Article co-écrit avec Frank.

Cet article a pour but d'expliquer les bases d'internet. Internet n'est pas un outil magique qui fonctionne tout seul, derrière ce nom désormais largement ancré dans les moeurs, se trouvent une multitude de mécaniques que nous allons essayer de décortiquer et d'expliquer.

Qu'est ce qu'Internet ?

On nomme Internet ou L'internet la somme des réseaux informatique de plusieurs organismes, compagnies, universités, gouvernements qui se sont mis d'accord pour "parler" un langage commun (TCP/IP) et s'interconnecter. L’internet n'a pas de centre de réseau et on appelle un nœud tout ce qui se connecte et échange sur le réseau.

Au dessus de ce gigantesque réseau, il existe plusieurs services que nous utilisons quotidiennement. Le web est le plus connu et est très souvent confondu avec "internet". Mais il existe aussi d'autre services tel que le courrier électronique, le chat, le streaming vidéo, le partage/échange de fichiers et bien d'autres.

Bien souvent le concept de client/serveur s'applique, le serveur, possédant des informations/fichiers/média, sur lequel un ou plusieurs clients peuvent se connecter.

Il existe aussi des applications qui fonctionnent en mode Pair à Pair (P2P) pour lesquelles chaque nœud est simultanément un client et un serveur.

Comme vous le faites tous les jours avec votre ordinateur, chaque nœud est capable d'utiliser plusieurs services simultanément. Afin que les services ne se mélangent pas, chacun utilise un port réseau qui lui est propre. Les ports réseaux des principaux services sur Internet (web, e-mail, ...) sont définis et identiques pour l'ensemble d'internet. (Mais rien ne vous empêche de configurer votre serveur web sur un autre port, si vous souhaitez le cacher.)

Commençons par les bases, sur le service le plus utiliser : le web.

Les technologies du web "côté client".

Les technologies côté client, c'est tout simple, il s'agit de votre ou de vos navigateurs internet, vous connaissez tous Firefox, Safari ou Chrome. Alors qu'il y a quelques années ces applications n'étaient que des accessoires, elles sont désormais les applications les plus, voir les seules, utilisées sur votre ordinateur, ou même sur vos mobiles ou tablettes. Ces applications sont disponibles partout, comme sur vos consoles ou vos télés connectées.

Mais qu'est ce qui se cache derrière votre navigateur internet ?

Votre navigateur est une application executant une tache simple : se connecter à un serveur (sur le port 80 en HTTP ou sur le 443 en HTTPS), faire une requête de lien internet (autrement appelé URL (Uniform Resource Locator)), pour en récupérer le fichier, puis l'afficher.

Par convention, ce fichier doit être au format HTML, afin d'être lu correctement par votre navigateur. Il s'agit d'un fichier texte (lisible par un simple éditeur de texte) décrivant le contenu de la page.

Pages HTML

Le format HTML (Hypertext Markup Language) est un format de données majoritairement utilisé pour décrire les pages web. Son contenu, écrit sous forme de balises, permet de structurer la page avec des éléments tels que des titres, des paragraphes ou encore des tableaux. Il permet aussi de formater les textes avec de l'italique, du gras, du souligner et bien d'autres.

L'une des facultés du format HTML est aussi de pouvoir intégrer des liens permettant de naviguer d'une page à l'autre.

Si aux débuts d'internet, c'était un peu la jungle et chaque navigateur utilisait ses propres balises HTML, désormais le HTML est normé et il est fortement conseillé pour les navigateurs comme pour les développeur web de suivre les recommendations du consortium W3C (dont un des centres est situé en France, à Sophia Antipolis).

En affichant la source d'une page, vous verrez que vous pouvez récupérer le contenu chargé par le navigateur, et qu'il est presque lisible. En effet, au milieu des balises vous pourrez certainement repérer quelques mots. La lecture des balises, par contre, nécessite un peu d'entrainement qui s'acquière en développant des sites internet.

Le format HTML, à lui seul peut mais souvent, ne suffit pas à faire afficher à votre navigateur de jolies pages web, interactives. Cependant, il est capable d'emmener avec lui 3 types d'éléments :

• Fichiers multimédia
• Fichiers de styles CSS
• Fichiers Javascript

Basiquement, lorsque votre navigateur va lire le source de la page, il va repérer à l'intérieur les liens vers ces éléments et demander au serveur de lui envoyer les fichiers correspondants.

Le navigateur va ensuite les intégrer à la page afin de vous afficher le contenu complet et formaté tel que vous avez finalement l'habitude de le voir, puisque toute cette gymnastique est totalement transparente (ou tente de l'être) pour le visiteur.

Voyons un peu plus en détails ces éléments attachés.

Fichiers multimédia

Les fichiers multimédia sont les fichiers images ou vidéos qui agrémentent les pages web. Le serveur envoi les fichiers tels qu'ils sont stockés, charge ensuite à votre navigateur de les lire s'il en est capable. Si les pages web sont jolies, c'est en parti grâce aux images qui sont intégrées dans son code. Cependant ces fichiers peuvent être volumineux et représenter un frein à la rapidité de chargement des pages internet. 

Fichiers styles CSS

Les fichiers de styles CSS sont des fichiers (texte eux aussi) qui décrivent le design à appliquer à la page web. Ainsi, ils vont compléter le travail des images et rendre la page plus jolie. Autant que possible, il est préférable d'utiliser des styles CSS plutôt que des images car, étant de simples fichiers textes, ils sont très légers.

Toujours en fouillant dans les sources, vous pouvez voir le contenu de ces fichiers, qui seuls, ne veulent pas dire grand chose.

Le design des pages n'est pas quelque chose qui se fait tout seul. Les pages sont en général créées par un designer, puis le design est retranscrit en code et en images par un développeur.  La qualité du design des pages dépend donc du talents des deux professionnels, c'est pour cela que vous pouvez voir des pages de qualité très variable sur internet.

Fichiers Javascript

Enfin les fichiers Javascript permettent d'ajouter de l'interactivité aux pages internet, faire dérouler un menu, afficher l'heure, afficher ou cacher des éléments d'une pages, tout cela est le travail du Javascript. Le Javascript est un langage de programmation, basé sur le Java mais dont il n'a finalement aujourd'hui plus que le nom, qui a été développé pour accompagner le HTML et qui est capable de le manipuler.

Le Javascript n'est pas le seul language de script disponible, cependant, c'est devenu avec le temps le language universel car tous les navigateurs l'ont accepté comme language de script principal.

Par exemple, il y a quelques années lorsqu'Internet Explorer était maître d'internet, il utilisait le VBScript, un language de Microsoft, en plus du Javascript. S'il est toujours accepté (mais par Internet Explorer sur Windows uniquement), il n'est plus vraiment utilisé.

Les navigateurs améliorant leur support de Javascript avec les années, nous pouvons désormais lui demander des choses bien plus complexes que les exemples cités précédemment.

Quel navigateur utiliser ?

Si tous les navigateurs ont le même but : afficher des pages web, ils ont tous leurs qualités et leurs défauts. Certains sont plus rapides à afficher les pages, d'autres à exécuter le Javascript et d'autres encore proposent des fonctionnalités annexes plus intéressantes.

Ne cherchez pas, il n'y a pas encore de navigateur parfait, il faudra donc choisir celui qui, de par ses fonctionnalités et son ergonomie, vous conviendra le mieux.

Si vous connaissez certainement Firefox et Chrome, ou encore Safari sur Mac et iOS, vous ne savez peut être pas qu'il existe en fait, une multitude de navigateurs, souvent très peu connus. Et si les navigateurs sont nombreux, il faut savoir qu'ils utilisent tous les mêmes moteurs de rendu HTML, dont les 3 principaux sont :

• WebKit, développé par Apple, basé sur le moteur de Konqueror
• Gecko, développé par la fondation Mozilla
• Trident, développé par Microsoft

Les principaux navigateurs :

• Apple Safari : Le plus intégré à Mac OS X, puisque livré avec le système. Il utilise le moteur WebKit. C'est un bon navigateur, mais comme pour tous les logiciels (et matériels) Apple, il peut souffrir des choix arbitraires de la part de la société de Cupertino.
• Mozilla Firefox : Navigateur issu du monde libre, remplaçant de l'historique et vieillissant Netscape. Il est basé sur le moteur Gecko. Il s'agit du navigateur le plus compatible et le plus flexible. Il semble cependant commencer à souffrir de sa relative lourdeur face aux navigateurs basé sur WebKit.
• Google Chrome : Basé sur WebKit, il est le dernier venu sur le marché et l'a conquit avec brio. Il est désormais leader dans ce domaine. Il s'agit aussi d'un des navigateurs les plus rapides, Google multipliant les optimisations afin de conserver une base commune pour ces navigateurs pour ordinateur, mobile et tablette.
• Microsoft Edge : (Indisponible sur Mac) Navigateur de base fourni avec Windows, il est le successeur du désormais mal-aimé Internet Explorer. Longtemps leader incontesté et incontestable sur le marché avec plus de 90% des utilisateurs, il a fini par laisser sa place à cause de son manque d'ouverture, de compatibilité au profit d'un Firefox ouvert et prenant en compte les recommandations des standards dictés par le consortium W3C. Depuis, Microsoft tente de retrouver ses lettres de noblesse en proposant de nouvelles versions de son navigateur de plus en plus précautionneuses des standards, et propose désormais Edge afin d'oublier et d'enterrer Internet Explorer, même s'il en est le descendant direct.

Les principaux outsiders :

• Opera : Depuis toujours outsider indépendant, Opera a eu ses hauts et ses bas. Alors qu'il utilisait auparavant, son propre moteur : Presto, il est désormais basé sur WebKit. Ce navigateur propose depuis toujours des options originales.
• Google Chromium : Version libre et OpenSource de google Chrome, forcément basée sur WebKit.

Les moins connus :

• Vivaldi par Vivaldi Technologies - Par le créateur d'Opéra, original et pleins d'options
• iCab par Alexander Clauss - Vestige de Mac OS 9 et de l'époque ou les sharewares étaient légion
• OmniWeb par The Omni Group - Autre vestige datant des débuts d'OS X
• SeaMonkey par SeaMonkey Council
• Maxthon
• Pale Moon par Moonchild
• GNU IceCat
• Amaya par le consortium W3C
• Tor par The Tor Project, Inc - Pour parcourir l'internet alternatif

Les inconnus :

• Sleipnir par Fenrir Inc.
• Dooble
• TenFourFox
• Brave par Brave Software Inc.
• QupZilla
• Roccat Browser par Runecats
• Slimjet par FlashPeak Inc.
• Yandex Browser - Alter ego de Google en Russie, qui propose, comme Google; son navigateur
• Dillo Web Browser
• Waterfox
• Iron Browser par SRWare
• Epic par Hidden Reflex
• Stainless par MD Software, LLC
• Links
• Fluid
• Kylo
• NetSurf
• Citrio par Catalina Group Ltd.
• Conkeror
• Nano
• Bitty Browser par Turnstyle
• Classilla
• QtWeb
• ZAC Browser

Outils développeur

Cet article ne vous a pas suffit ? Cvous voulez en savoir encore un peu plus sur les technologies du web côté client ?

Il est donc temps d'aller un peu plus à l'intérieur des navigateurs. Les principaux disposent tous d'outils dit "développeurs".

Sur Firefox : Menu Outils > Développement Web

Sur Safari, le menu Développeur est caché, et doit être activé avant. Pour cela, allez dans les préférences de l'application, dans l'onglet Avancées, tout en bas, activer Afficher le menu Développement dans la barrer des menus. Le menu Développement devrait apparaitre.

Sur Chrome : Menu Afficher > Options pour les développeurs

Tout ces outils permettent de voir le code source des pages, la liste des éléments chargés, d'étudier la rapidité de chargement des pages et des ressources, de vérifier les erreurs de script ou de style, bref, tout ce qu'il faut à un développeur web pour contrôler le bon fonctionnement de son site web.

A noter qu'il existe aussi une multitude d'extensions (au moins pour Firefox et Safari) qui permettent d'obtenir encore plus d'informations.

Affichage des ressources du site

Chronologie de chargement des ressources

N'hésitez pas à partager dans les commentaires, quel est votre navigateur préféré mais surtout pourquoi, ou, si vous connaissez un navigateur qui n'est pas listé.