environ 11 minutes de lecture

Architecture web

“We can't blame the technology when we make mistakes”
Tim Berners-Lee

Scroll

L’URL, une adresse pour les gouverner tous

Le World Wide Web s’appuie sur 3 technologies, inventées par Tim Berners-Lee: le langage HTML, le protocole HTTP, et les URLs. URL signifie Uniform Resource Locator. C’est une adresse, à laquelle on peut trouver une ressource. Chaque adresse est supposée être unique et éternelle. On parle de design d’URL pour concevoir leur schéma, et de migration pour passer d’un schéma d’URL à un autre. L’URL n’est pas un détail, c’est une grande responsabilité et un fondement du web.

La première partie, ici “https://”, est le protocole, c’est à dire la manière de communiquer. Un protocole standardise les questions que l’on peut poser, et les réponses que l’on peut attendre. Les 2 protocoles les plus connus sont http:// et https://, le second étant la version sécurisée du premier. Cela signifie Hyper Text Transfer Protocol. C’est une manière de transférer des documents HTML, et aussi des images, des vidéos, etc. Il y a de nombreux autres protocoles, notamment FTP (File Transfer Protocol).

La seconde partie, “video.”, est le sous-domaine, et la troisième partie “google.co.uk” est le domaine. Les deux sont expliqués ci-dessous.

La quatrième partie, “:80”, est le port. C’est un numéro de canal, sur lequel on communique. Les protocoles ont des ports par défaut, 80 pour l’HTTP, 403 pour l’HTTPS. Quand on utilise le port par défaut, on n’a pas besoin de le préciser.

La cinquième partie, “/videoplay”, est le chemin. C’est une chaîne de caractères qui indique une sorte de lieu.

La sixième partie, le point d’interrogation, indique que l’on va maintenant fournir des paramètres.

La septième partie, “docid=-724…&hl=en”, est une série de paramètres avec leurs valeurs, séparés par des esperluettes.

La huitième partie, “#00h02m30s”, est le fragment. Cela indique au navigateur qu’il faut afficher directement une partie de la page, identifiée par une ancre. Dans les faits, c’est aussi utilisé souvent pour naviguer dans des applications Web (comme Gmail).

Tout va bien?

Domaines

Les noms de domaines sont un peu comme les noms de rue par rapport aux coordonnées GPS. “Latitude: 48.869578 Longitude: 2.322547”, c’est moins facile à retenir que “28 rue Boissy d’Anglas, Paris”. Si on n’avait pas de nom de domaine, il faudrait utiliser les adresses IP. Il y en a 2 sortes: des vieilles, qui s’appellent IPv4 et ressemblent à 132.9.250.72 et des récentes, qui s’appellent IPv6 et ressemblent à 2607:f0d0:1002:0051:0000:0000:0000:0004. Dans les 2 cas, c’est pas un cadeau à mémoriser. Grâce aux noms de domaine, vous pouvez chercher google.fr, et pas 216.58.213.131.

Les noms de domaine se lisent de droite à gauche, séparés par des points. La partie la plus à droite, par exemple .com, .fr, .org, s’appelle le Top Level Domain (TLD). C’est une liste de domaines de premier niveau, qui comprend à l’heure actuelle environ 500 entrées. Le processus pour en ajouter de nouveau est long (plusieurs années) et piloté de façon centralisée par l’ICANN.

L’élément suivant, de deuxième niveau donc, est primordial. Quand on choisit un nom de domaine, on choisit le TLD et ce second niveau, et cela constitue le domaine à proprement parler. Par exemple dans google.fr, le tld est “fr”, et le second niveau “google” ; dans lespoupees.paris, le TLD est “paris”, et le second niveau “lespoupees” ; dans wikipedia.org, le TLD est “org”, et le second niveau “wikipedia”. Les noms de domaines ne s’achètent pas, ils se louent pour une période minimale d’un an auprès d’un registrar. Un registrar est une entreprise, habilitée à louer des noms de domaines. Nous utilisons souvent Gandi.net, mais il en existe de très nombreux.

Serveurs de noms de domaines (DNS)

Une fois qu’on a loué un domaine, il faut faire ce qu’on appelle le paramétrage DNS. DNS, ça veut dire Domain Name Server. C’est un genre d’annuaire sur lequel on écrit toutes les correspondances entre domaines et adresses IPs. Cela permet de taper “google.fr” dans le navigateur, et de se retrouver sur un serveur, qui a en fait l’adresse IP “216.58.213.131”. Le navigateur interroge le serveur DNS pour “google.fr”, et le serveur lui répond “216.58.213.131”.

Comme il y a de nombreux serveurs DNS, il faut qu’ils s’informent les uns les autres des nouvelles informations qu’ils ont reçues, pour fournir tous les mêmes correspondances. Ce processus s’appelle la propagation DNS, et prend en général 24 à 48 heures. Cela explique que deux personnes utilisant des serveurs DNS différents peuvent voir deux sites différents à la même adresse, pendant une propagation: l’une des deux peut pointer vers l’ancien serveur, et l’autre vers le nouveau.

Quand on a loué un domaine, on peut faire tout ce qu’on veut en termes de sous-domaines. C’est à dire qu’on peut dire que www.wikipedia.org va pointer vers un serveur, fr.wikipedia.org va pointer sur un autre, meta.wikipedia.org sur un troisième. Quand on n’a pas de sous-domaine du tout (wikipedia.org), on appelle ça l’apex. www est un sous-domaine courant, mais il n’a rien de spécial. On peut créer des sous-domaines sous d’autres sous-domaines, comme on veut, et sans rien payer de plus que la location du domaine.

Pour chaque sous-domaine, on peut pointer vers un serveur différent, mais aussi (plus subtil) vers un espace différent sur le même serveur. Cela s’appelle un virtualhost. C’est cette solution qui permet de faire cohabiter simplement différentes solutions technologiques sur le même domaine.

Moteur de recherche et crawling

Comment font les moteurs de recherche (Google en tête) pour nous proposer des résultats parmi toutes ces pages? Le processus est en 2 temps: d’abord, les pages sont indexées et analysées (on appelle ça le crawling) par des robots (on les appelle aussi crawlers ou spiders). Ensuite, le moteur va puiser dans la base de données qu’il a constitué pour proposer les résultats les plus pertinents compte tenu de la recherche effectuée.

Cette première phase, le crawling, est donc absolument essentielle. Mais comment les crawlers voient-ils les pages web? On a coutume de comparer le crawler à un utilisateur aveugle: il ne voit que du contenu textuel, pas de mise en page. Les images sont remplacées par leurs descriptions textuelles. L’enjeu est donc de faciliter la compréhension du contenu textuel des pages.

La première chose à faire est de respecter les normes du W3C. Pour ça, il existe un validateur, qui repère les erreurs et donne des conseils sur les bonnes pratiques. Ensuite, il faut utiliser avec pertinence les balises html. Par exemple, une balise <nav></nav> indiquera au crawler que ce qui est à l’intérieur n’est pas du contenu, mais des liens vers du contenu.

Il faut aussi que les pages que le crawler doit indexer puissent être trouvées. Pour ça, 2 solutions complémentaires: les liens et le sitemap. Le crawler va suivre les liens trouvés dans les pages, les uns après les autres, jusqu’à ce que tous aient été suivis. Si une page existe, mais sans lien depuis aucune autre, le crawler ne pourra pas la trouver. Le sitemap est une liste de toutes les pages du site, sous la forme d’un fichier xml.

Balisage sémantique et web sémantique

Déterminer ce qui est un menu, c’est bien, mais on peut aller plus loin que ça. Imaginons par exemple ce texte présentant Delphine:

Delphine Coutable
Les Poupées Russes
dcoutable@lespoupees.paris
28 rue Boissy d'Anglas
Paris, 75020 France

En html, cela donnerait ça:

<a href="https://www.linkedin.com/in/delphine-coutable-922b4910/">Delphine Coutable</a><br/>
Les Poupées Russes<br/>
<a href="mailto:dcoutable@lespoupees.paris">dcoutable@lespoupees.paris</a><br/>
28 rue Boissy d'Anglas<br/>
Paris, 75020 France

Tel quel, rien n’indique le prénom, le nom, l’entreprise, etc. Le crawler est donc démuni pour analyser. Comment typer davantage ce texte? Il existe une technologie, les microformats, qui s’appuie sur une spécificité de l’html (la possibilité d’ajouter des classes aux éléments) pour améliorer la description de l’information. Voyons notre texte maintenant:

<div id="hcard-Delphine-Coutable" class="vcard">
  <a class="url fn" href="https://www.linkedin.com/in/delphine-coutable-922b4910/">
    <span class="given-name">Delphine</span> 
    <span class="family-name">Coutable</span>
  </a>
  <div class="org">Les Poupées Russes</div>
  <a class="email" href="mailto:dcoutable@lespoupees.paris">dcoutable@lespoupees.paris</a>
  <div class="adr">
    <div class="street-address">28 rue Boissy d'Anglas</div>
    <span class="locality">Paris</span>, 
    <span class="postal-code">75020</span>
    <span class="country-name">France</span>
  </div>
</div>

La class “vcard” nous indique qu’il s’agit d’une carte de visite. La classe “org” nous indique que l’on parle de l’organisation à laquelle appartient Delphine. Et la class “adr” nous indique qu’il s’agit d’une adresse, avec le détail des contenus (code postal, ville, pays, rue) ce qui aide beaucoup à l’international! Le crawler peut maintenant noter qu’il existe une personne prénommée Delphine et nommée Coutable, qui travaille dans une organisation qui s’appelle Les Poupées Russes à Paris, en France. Pas mal, non?

Mais que faire si on veut typer autre chose qu’une adresse? On peut utiliser schema.org, par exemple pour un produit. Scrollez en bas de la page, il y a plein d’exemples passionnants. Si si.

Cette technologie peut être utilisée aussi pour faire des breadcrumbs dans les snippets Google. Oh la la. Des breadcrumbs dans les snippets. Le breadcrumb, ou “petit bout de pain”, est une technologie sophistiquée créée par Charles Perrault (dans Le Petit Poucet) et reprise par les frères Grimm (dans Hansel et Gretel) qui consiste à laisser de petites miettes de pain derrière soi pour retrouver son chemin. A savoir pour le plaisir, en français cela s’appelle fil d’Ariane, technologie tout aussi sophistiquée créée par Ariane pour aider Thésée à sortir du labyrinthe après avoir tué le Minotaure, et qui consiste à dérouler un fil au fur et à mesure de son chemin. On notera la supériorité grecque, les oiseaux ne mangeant pas les fils. Reprenons. Un breadcrumb, c’est un outil ergonomique permettant de se situer dans un site. Et un snippet, c’est l’affichage d’un résultat de recherche dans Google. Pour voir concrètement le résultat, c’est ici.

Ce type de balisage est à la base de ce qu’on appelle le web sémantique, un Web de connaissances et pas seulement de pages. A terme, cela transformerait le Web en une base de données regroupant toute la connaissance humaine, que Tim Berners-Lee appelle le Giant Global Graph.

De nombreuses données sont déjà disponibles en ligne dans un projet qui s’appelle dbpedia, permettant par exemple de trouver des footballeurs nés dans un pays de plus de 10 millions d’habitants qui ont joué comme goal pour un club ayant un stade de plus de 30.000 places et dont le pays de naissance est différent du pays du club.

Sécurité

Un petit film pour se détendre ?

Méthodes, API, REST

Quand nous naviguons sur Internet, la plupart du temps, nous faisons des requêtes GET. Ce sont des requêtes dédiées à la lecture. Et de temps en temps, nous soumettons un formulaire, et là c’est une requête POST. Les requêtes POST écrivent des données.

Il y a 5 méthodes http principales :

  • GET pour lire
  • POST pour créer
  • PUT pour mettre à jour en remplaçant la ressource
  • PATCH pour mettre à jour en modifiant la ressource
  • DELETE pour supprimer

Plus en détail sur cette page.

Ces méthodes sont utilisées pour fabriquer des API (appelées aussi web services), ce qui signifie Application Programming Interface. En gros, ce sont des sites utilisés par des machines et pas par des humains. Par exemple, quand un comparateur de vols cherche le vol le moins cher, il interroge les APIs de nombreuses compagnies aériennes, puis présente les résultats les plus pertinents. Ces APIs, très souvent, sont RESTful, c’est à dire qu’elles appliquent l’architecture REST.

Ce protocole très utile standardise les URLs et les méthodes utilisées pour accéder aux ressources. Les ressources sont les données métiers, par exemple, dans le case de notre comparateur de vol, les aéroports, les villes, les compagnies, les vols, etc. Le fonctionnement conceptuel standard lié à une ressource s’appelle CRUD: Create, Read, Update, Delete. Cela signifie simplement qu’il faut pouvoir la créer, la lire, la modifier et la supprimer. Pour créer une ressource, on va utiliser la méthode POST, pour la lire, la méthode GET. Voilà voilà.

Le protocole REST standardise le CRUD pour les APIs.

Ca y est, vous êtes un geek.

Le Clafoutis aux cerises

On remercie Huguette pour cette recette.