(Cette série d’articles est une traduction de la série Introduction to The Web Standards Curriculum publiée sur le site d’Opera Software. Cet article est une traduction de How does Internet work? écrit par Jonathan Lane. N’hésitez pas à me faire part de vos remarques si vous voyez des incohérences avec le texte original!)
Introduction
De temps en temps, on vous permet de regarder “sous le capot” pour comprendre comment quelque chose fonctionne, pour en saisir tout les rouages. Aujourd’hui c’est votre jour de chance. Je vais être votre guide pour partir à la découverte d’une des technologies les plus en vogue, et avec laquelle vous êtes peut-être déjà familier: le World Wide Web. Action!
Cette article décrit les technologies sous jacentes au World Wide Web afin de lui permettre de fonctionner:
- Hypertext Markup Language (HTML)
- Hypertext Transfer Protocol (HTTP)
- Domain Name System (DNS)
- Serveur Web et navigateurs web
- Contenu statique et dynamique
Ce sont tous les fondamentaux du web-Bien que la plupart d’entre eux ne vous permettrons pas à construire un meilleur site web, cela vous permettra d’avoir le bon niveau de langage lorsque vous parlerez d’internet avec des clients, ou à d’autres personnes. C’est un peu comme le disait si bien la religieuse devenue gouvernante dans La Mélodie du Bonheur: “Lorsque l’on apprend à lire on commence par A-B-C. Lorsque l’on apprend à chanter on commence par Do Re Mi.”. Dans cet article, on décrira rapidement le mode de communication entre ordinateurs utilisant HTTP et TCP/IP, ensuite on s’intéressera aux différents langages qui, utilisés ensemble, permettent de créer les pages qui constitues l’Internet. Cet article se décompose de la manière suivante:
- Comment les ordinateurs communiquent sur Internet?
- Types de contenu
- Sites web statiques ou dynamiques
- Synthèse
- Exercice
Comment les ordinateurs communiquent sur Internet?
Heureusement, les choses sont simples pour les ordinateurs. Sur le World Wide Web, la plupart des pages sont écrites avec un langage commun, le HTML, qui est diffusé en utilisant un protocole commun-HTTP (hypertext transfer protocol). HTTP est le patois d’internet (spécification), qui permet par exemple à une machine sous windows de chanter en harmonie avec une machine tournant sous la dernière et meilleure version de Linux (Do Re Mi!). Grace à l’usage d’un navigateur internet-Un logiciel qui comprend HTTP et affiche le HTML dans un format lisible par les humains-les pages internet écrites en HTML stockées sur n’importe quel ordinateur peuvent être lues n’importe où, y compris sur un téléphone portable, un PDA ou même une console de jeu.
Bien que parlant un langage commun, ces périphériques connectés à Internet doivent respecter certaines règles de communication-tout comme il faut lever sa main pour poser une question en classe. HTTP définit ces règles de base pour Internet. Grace à ces règles, une machine cliente (comme votre ordinateur) sait qu’elle doit initier la demande de page en envoyant une requête à un serveur. Un serveur est un ordinateur où sont stocké les sites web-lorsque vous tapez une adresse dans votre navigateur, un serveur reçoit une requête, trouve la page désirée, et l’envoi à votre navigateur pour qu’il vous l’affiche à l’écran.
Analyse d’un cycle de requête/réponse
Après avoir décrit brièvement tous les éléments mis en oeuvre pour permettre aux ordinateurs de communiquer sur Internet, nous allons regarder en détail un cycle de requête / réponse HTTP. La séquence ordonnée ci-dessous me permet de vous introduire efficacement tous les concepts:
- Chaque cycle commence en saisissant une URL (ou Universal Resource Locator) dans la barre d’adresse de son navigateur, par exemple http://dev.opera.com. Ouvrez une fenêtre / onglet de navigateur et entrez une adresse.
Bon, ce que vous ne savez probablement pas c’est que votre navigateur n’utilise pas directement cette adresse pour envoyer une requête sur un serveur; il fait appelle au protocole Internet (IP ou Internet Protocol) ou adresse IP (qui sont simplement comme des numéros de téléphone ou des adresses postales qui identifie les serveurs). Par exemple, l’adresse IP de http://dev.opera.com est 213.236.208.98. - Dans un nouvel onglet de navigateur, entrez http://www.apple.com dans la barre d’adresse et validez; ensuite entrez http://17.149.160.10/ et validez-vous arriver au même endroit. De même, essayez avec http://213.236.208.98-et vous voilà au même endroit qu’à l’étape 1, bien que vous aurez une erreur 403 “Access Denied”-C’est parce que vous n’avez pas les droits d’accès à la racine de ce serveur.
http://www.apple.com est tout simplement un alias pour http://17.149.160.10/, mais pourquoi et comment ça marche? Tout d’abord parce qu’il est plus facile de retenir des mots qu’une suite de numéros. Ensuite, le mécanisme qui permet de faire fonctionner les alias s’appelle un Système de Noms de Domaine (ou Domain name system-DNS), qui est un annuaire de toutes les machines connectées à internet. Lorsque vous entrez http://dev.opera.com dans la barre d’adresse, cette adresse est envoyez à un serveur de noms qui essaye de lui associer une IP. Comme il y a des millions de machines connectées à Internet, les serveurs DNS n’ont pas de liste exhaustive des machines en ligne, il y a donc un système qui permet de router votre demande au bon serveur afin de traiter votre demande.
Ainsi, le DNS recherche le site www.opera.com, le localise à l’adresse 17.149.160.10, et renvoie l’adresse IP au navigateur web.
Votre machine envoie ensuite une requête à la machine ayant l’adresse IP spécifiée et attend pour la réponse. Si tout va bien, le serveur envoie un court message au client lui indiquant que tout est OK (voir Figure 1,) suivi de la page demandée. Ce type de message est contenu dans un en-tête HTTP.
Figure 1: Dans ce cas, tout va bien, et le serveur retourne la page demandée.
Si quelque chose se passe mal, par exemple si l’URL saisie est invalide, alors vous obtiendrez une erreur HTTP renvoyée au navigateur-la tristement célèbre erreur 404 “page not found” est l’exemple le plus connu que vous rencontrerez.
- Essayez de demander la page http://dev.opera.com/joniscool.html-Elle n’existe pas, vous avez alors une erreur 404. Essayez avec plusieurs pages inexistantes, sur différent sites web, vous aurez en réponse une grande variété de pages d’erreur renvoyées. Certains développeurs on laissé leur serveur renvoyer la page d’erreur par défaut, et d’autre ont modifiés ces pages d’erreur. Cette technique avancée ne sera pas traiter dans cet article mais sera bien évidemment dans un autre article de la série.
Terminons par une remarque sur les URLs-Normalement la première URL sur laquelle vous allez n’a suivi d’un nom de fichier (par exemple, http://www.mysite.com/), et les pages que vous visitez ensuite en ont un mais pas tout le temps. Vous accédez toujours à des fichiers, mais quelque fois le développeur a configuré le serveur pour qu’il n’affiche pas le nom du fichier-Et ceci afin de rendre les URLs plus nettes et facile à retenir, ce qui tend à offrir une meilleure expérience de navigation aux utilisateurs de votre site. Nous ne couvrirons pas non plus ce sujet dans cet article; nous couvrirons l’envoi de fichier vers un serveur et la structure de l’arborescence serveur dans un article ultérieur.
Types de contenu
Après avoir étudié le cycle d’échange HTTP, nous allons nous concentrer sur les différents types de contenu que vous pourrez rencontrer sur Internet. Je les ai regroupés en quatre catégories-texte seul, standards web, pages dynamique, et les formats nécessitant l’usage d’applications externes ou de plug-ins.
Texte seul
Au tout début de l’Internet, avant même l’apparition des standards ou des plug-ins, il y avait principalement que des images et des fichiers texte ayant une extension .txt ou similaire. Lorsque ce type de fichier est rencontré sur Internet, le navigateur l’affiche tel quel sans aucun traitement. Vous avez encore beaucoup de page de ce type sur les sites universitaires.
Standards Web
Les trois principaux piliers du World Wide Web sont les standards-HTML (ou XHTML, j’utiliserai l’un ou l’autre de manière interchangeable), CSS et JavaScript.
Hypertext Markup Language sert, comme son nom l’indique, à communiquer. HTML est ce qui est utilisé pour découper un document, spécifier son contenu et sa structure, et définir le sens sémantique de chacun de morceaux (qui contiennent tout le texte, etc. que vous pouvez voir sur les sites). Il utilise des éléments pour identifier les différents composants d’une page.
Les feuilles de style CSS (Cascading Style Sheets) vous donne les moyens de contrôler l’affichage d’un élément. Il est très simple, en seulement quelques instructions, de modifier tous les paragraphes pour qu’ils aient un interligne double (line-height: 2em;), ou bien de faire en sorte que tous les titres de niveau 2 soit en vert (color: green;). Il y a des milliers d’avantages à séparer la structure de la forme, nous y reviendrons dans un autre article. La figure 2 nous permet de démontrer la puissance de HTML et CSS utilisés ensemble: sur la gauche vous avez du texte HTML simple, sans formatage, sur la droite, le même fichier HTML mais avec des styles CSS appliqués dessus.
Figure 2: Fichier HTML seul à gauche, HTML avec des CSS à droite.
Enfin, JavaScript fournit le comportement dynamique de votre site. Vous pouvez écrire de petits programmes en JavaScript qui seront exécutés sur l’ordinateur client, et ne nécessitant l’installation d’aucun logiciel particulier sur le serveur. JavaScript vous permet de spécifier des fonctionnalités basiques ainsi que d’ajouter de l’interactivité à votre site, cependant il y a certaines des limitations, qui peuvent être contournées en utilisant des langages de programmation qui seront, eux, exécutés sur le serveur et ainsi réaliser des pages web dynamiques.
Pages web dynamiques
Parfois, lorsque l’on navigue sur Internet, on peut aller sur des pages qui n’ont pas d’extension .html-Elles ont par exemple une extension du type .php, .asp, .aspx, .jsp, ou tout autre nom d’extension bizarre. Ce sont tous des exemples de technologie peuvant être utilisées pour créer des pages dont certaines sections sont dynamiques-le contenu affiché dépend des paramètres d’entrée récupérés depuis une base de données, depuis un formulaire, ou une autre source de données. Nous couvrirons ce sujet dans la section Sites web statiques ou dynamiques ci-dessous.
Formats nécessitant l’usage d’applications externes ou de plug-ins
Les navigateurs web ne sont équipés par défaut que d’outils qui leur permettent d’interpréter et d’afficher certaines technologies, comme les standards web (html, css…). Si vous faites un requête vers une URL qui pointe sur un fichier dans un format complexe, ou sur une page qui contient des éléments utilisant des technologies non standards, alors soit votre navigateur vous proposera de télécharger le contenu, soit il sera affiché en ayant recourt aux plug-ins installés. Par exemple:
- Si vous rencontrez un document Word, Excel, PDF, compressé (ZIP, ou SIT par exemple) ou un fichier d’image complexe comme Photoshop PSD, ou autre que le navigateur ne comprend pas, alors par défaut il vous proposera de le télécharger ou d’ouvrir le fichier. Ces deux options reviennent au même, si ce n’est que la dernière va télécharger le contenu puis l’ouvrir avec une application qui la comprend, si elle est installée.
- Si vous rencontrez une page contenant un film Flash, un MP3 ou un autre format de musique, un fichier MPEG ou un autre format vidéo, le navigateur va l’ouvrir en utilisant le plug-in adéquat, s’il est installé. Si ce n’est pas le cas, soit vous aurez un lien pour télécharger le plug-in manquant, soit le fichier sera téléchargé, le système cherchera une application pour l’ouvrir.
Bien sûr, de il y a des zones d’ombres-par exemple SVG (Scalable Vector Graphics) est un standard web qui est affiché par défaut dans certains navigateurs, comme Opera, mais pas dans d’autres, comme Internet Explorer qui a besoin d’un plug-in pour lire les SVG. Certains navigateurs sont livrés avec un ensemble de plug-ins préinstallés, ce qui fait que vous ne pourrez pas savoir si le contenu est lu par un plug-in ou bien nativement par le navigateur.
Sites web statiques ou dynamiques
Alors, quelle est la différence entre un site web statique et un site dynamique? En apparence rien, tout est dans le détail:
Un site web statique est un site ou le contenu, fichiers HTML et images, est statique-c’est à dire qu’il est identique pour tous les visiteurs, à moins que la personne qui a créé le site ne décide de manuellement mettre à jour le contenu du site-Exactement comme ce que nous avons vu au cours de cette article.
Par contre sur un site web dynamique, le contenu sur le serveur est le même, mais au lieu d’être du simple HTML, il y a aussi du code dynamique, qui peut faire varier les informations affichées en fonction des données envoyées au serveur. Prenons un exemple-naviguez sur http://www.amazon.com dans votre navigateur, et faites une recherche pour 5 produits différents. Le résultat qu’Amazon vous retourne ne sont pas 5 pages différentes; mais une seule et même page envoyée 5 fois, mais avec à chaque fois un contenu différents. Ces différentes informations sont sauvegardées dans une base de données, qui renvoie l’information qu’on lui demande, afin qu’elle puisse être ajoutée à la page par le serveur web.
De plus, pour créer des sites web dynamiques, il est nécessaire d’ajouter un logiciel sur le serveur. Alors que les fichiers HTML statiques standards sont stockés avec l’extension .html, les fichiers contenant du code dynamique en plus du HTML sont stockés avec des extensions de fichiers spéciales afin de prévenir le serveur web qu’ils nécessitent un traitement supplémentaire avant d’être envoyés aux clients (par exemple ajouter de l’information provenant d’une base de données)-Les fichiers PHP portent par exemple une extension .php.
Il y a pleins de langages différents-J’ai déjà mentionné PHP, mais il y a aussi par exemple Python, Ruby on Rails, ASP.NET et Coldfusion. Finalement, tous ces langages offrent tous les mêmes fonctionnalités, comme communiquer avec une base de données, valider les informations saisies dans un formulaire, etc. mais ils le font de manière légèrement différentes, et ont des avantages et inconvénients. Il ne vous reste plus qu’à choisir celui qui vous convient le mieux.
On ne couvrira pas les langages dynamiques dans ce cours, mais voici une liste de ressources à lire si vous voulez approfondir le sujet:
- Rails: Fernandez, Obie. (2007), The Rails Way. Addison-Wesley Professional Ruby Series.
- Rails screencasts
- PHP: Powers, David (2006), PHP Solutions: Dynamic web development made easy, friends of ED.
- PHP Online documentation
- ASP.NET: Lorenz, Patrick. (2003). ASP.NET 2.0 Revealed. Apress.
- ASP.NET: online ASP.NET documentation and tutorials.
Synthèse
Et voilà, s’en est fini avec notre aperçu des rouages de l’Internet. Cet article ne traite que superficiellement l’ensemble des concepts couverts, mais il fait suffisamment car il les mets tous en perspective, et montre bien comment ces concepts interagissent entre eux. Il reste encore pleins de choses à apprendre à propos de la syntaxe des langages HTML, CSS et JavaScript, et c’est ce dont nous allons parler dans le prochain article-le prochain article mettra le focus sur le modèle de développement web utilisant les standards HTML, CSS et JavaScript, et jette un oeuil sur le code d’une page web.
Exercice
- Fournir une brève description de HTML et HTTP en décrivant les différences entre les deux.
- Définir la fonction d’un navigateur web.
- Faites un tour sur Internet pendant 5 à 10 minutes et essayer de trouver différents types de contenu-texte, images, HTML, pages dynamiques comme PHP et .NET (.aspx), PDFs, documents word, animation Flash etc. Visualisez-les et interrogez vous sur la façon dont votre navigateur les affiche.
- Quelle est la différence entre une page web statique et dynamique?
- Trouver une liste des codes d’erreur HTTP, listez en 5, et expliquer à quoi ils correspondent.