Web & HTML – Fonctionnement d’un Serveur Web et Protocoles

Module 1: Les Bases d’un Serveur Web

Introduction

Bienvenue dans le monde fascinant des serveurs web! Imaginez un serveur web comme un chef d’orchestre dans un concert, coordonnant les requêtes des visiteurs pour offrir une expérience harmonieuse. Dans ce module, nous explorerons le rôle essentiel d’un serveur web, les différents types disponibles, et les protocoles HTTP et HTTPS qui permettent la communication.

Cas d’Utilisation

Vous utilisez un serveur web chaque fois que vous accédez à un site internet. Si vous ouvrez votre navigateur et entrez l’adresse d’un site, le serveur web répond en fournissant les pages demandées. Comme un chef d’orchestre, il dirige cette interaction complexe pour assurer une performance fluide.

Explications Complètes et Détaillées

Compréhension du Rôle d’un Serveur Web:

Un serveur web est comme le cerveau derrière un site internet. Il reçoit les demandes des utilisateurs, trouve les pages correspondantes, et les envoie pour affichage. C’est le maestro qui assure la cohésion et la rapidité de l’expérience utilisateur.

Différents Types de Serveurs Web:

Il existe divers serveurs web tels qu’Apache, Nginx, et Microsoft IIS. Chacun a ses forces, mais ils partagent le même objectif: servir des pages web de manière efficace.

Protocoles HTTP et HTTPS:

HTTP (Hypertext Transfer Protocol) et HTTPS (HTTP Secure) sont les langages de communication entre les navigateurs et les serveurs. HTTPS, avec une couche de sécurité supplémentaire, garantit des échanges sécurisés, particulièrement cruciaux lors de transactions en ligne.

Comparaison avec d’Autres Protocoles:

Outre HTTP et HTTPS, d’autres protocoles tels que FTP (File Transfer Protocol) et SMTP (Simple Mail Transfer Protocol) sont utilisés pour des fonctions spécifiques. Chacun a son domaine d’application, tout comme différents instruments dans un orchestre.

Métaphore: Le Serveur Web comme un Chef d’Orchestre:

Imaginez un chef d’orchestre guidant chaque musicien pour créer une symphonie. De même, un serveur web coordonne les requêtes et les ressources pour offrir une expérience web harmonieuse.

Définitions des Termes Techniques Utilisés

• Serveur Web: Un logiciel qui répond aux demandes des navigateurs en fournissant les pages web demandées.
• Protocole HTTP: Un protocole de communication utilisé pour le transfert de données sur le web.
• Protocole HTTPS: Une version sécurisée de HTTP, utilisant une couche de chiffrement pour des échanges sécurisés.

Exemple Pratique:

Imaginez un serveur web comme un chef de restaurant. Les clients (navigateurs) passent leurs commandes (requêtes) au chef, qui prépare les plats (pages web) et les sert aux clients. Chaque plat est préparé avec soin (protocole HTTP/HTTPS) pour garantir une expérience délicieuse.

Petit Exercice:
Créez une liste des différentes étapes impliquées lorsque vous accédez à un site web. Pensez à ce qui se passe côté serveur et côté navigateur.

Module 2: Les Navigateurs pour Interroger les Serveurs

Introduction

Bienvenue dans le deuxième module de notre exploration! Cette fois, nous plongeons dans l’univers des navigateurs, ces compagnons fidèles qui nous permettent de surfer sur le web. Comprenez les différences entre eux, l’importance des tests sur plusieurs navigateurs, et explorez comment les navigateurs mobiles enrichissent notre expérience en ligne.

Cas d’Utilisation

Imaginons les navigateurs comme des guides touristiques. Chacun a sa propre manière de vous montrer les sites, avec des points forts et des faiblesses. Comprendre ces différences garantit une visite agréable, peu importe le navigateur utilisé.

Explications Complètes et Détaillées

Pourquoi le navigateur est important ?
Le navigateur est le programme qui nous permet de voir les sites web. Comme je vous l’ai expliqué plus tôt, le travail du navigateur est de lire le code HTML et CSS pour afficher un résultat visuel à l’écran. Si votre code CSS dit « Les titres sont en rouge », alors le navigateur affichera les titres en rouge. Le rôle du navigateur est donc essentiel !
On ne dirait pas, mais un navigateur est un programme extrêmement complexe. En effet, comprendre le code HTML et CSS n’est pas une mince affaire. Le principal problème, vous vous en rendrez vite compte, c’est que les différents navigateurs n’affichent pas le même site exactement de la même façon ! Il faudra vous y faire et prendre l’habitude de vérifier régulièrement que votre site fonctionne correctement sur la plupart des navigateurs.

Comprendre les Différences entre Navigateurs:
Chaque navigateur (Chrome, Firefox, Safari) a son propre style. Certains sont rapides et modernes, d’autres axés sur la sécurité. Découvrez comment ces choix influent sur votre expérience de navigation.

Voici les principaux à connaître :

	Navigateur	OS	Commentaires
	Google Chrome	Windows, Mac, Linux	Le navigateur de Google, simple d’emploi et très rapide. C’est le navigateur que j’utilise au quotidien.
	Firefox	Windows, Mac, Linux	Le navigateur de la fondation Mozilla, célèbre et réputé. Je l’utilise fréquemment pour tester mes sites web.
	IE	Windows	Le navigateur de Microsoft, qui équipe tous les PC Windows jusqu’à Windows 10. DEPRECATED
	Edge	Windows	Le nouveau navigateur de Microsoft, qui équipe tous les PC à partir de Windows 10. Il ressemble à Internet Explorer (les logos sont proches !) mais c’est une toute nouvelle version bien plus à jour. Edge est le remplaçant d’Internet Explorer.
	Safari	Windows, Mac	Le navigateur d’Apple, qui équipe tous les Mac.
	Opera	Windows, Mac, Linux	L’éternel outsider. Il est moins utilisé, mais propose de nombreuses fonctionnalités.

L’Importance des Tests sur Plusieurs Navigateurs:
Imaginez si un site web était optimisé pour un navigateur, mais pas pour les autres. C’est comme avoir un guide touristique qui ne parle qu’une seule langue. Les tests sur plusieurs navigateurs assurent une visite fluide pour tous.

Il est conseillé d’installer plusieurs navigateurs sur son ordinateur pour s’assurer que son site fonctionne correctement sur chacun d’eux. De manière générale, je conseille de tester son site web régulièrement au moins sur Google Chrome, Mozilla Firefox et Internet Explorer/Edge.
Notez que Safari et Google Chrome affichent les sites web quasiment de la même façon. Il n’est pas forcément nécessaire de tester son site sur Safari et Google Chrome, même si c’est toujours plus sûr.
La figure suivante vous montre un aperçu du résultat produit par quelques-uns de ces principaux navigateurs sur la page d’accueil de Google.

À vue de nez, ces navigateurs se ressemblent beaucoup. Mais comme je vous le disais plus tôt, les navigateurs n’affichent pas toujours un même site web exactement de la même façon. Pourquoi ? Cela est dû au fait que les navigateurs ne connaissent pas toujours les dernières fonctionnalités de HTML et CSS. Par exemple, Internet Explorer a longtemps été en retard sur certaines fonctionnalités CSS (et paradoxalement, il a aussi été en avance sur quelques autres).

Pour compliquer les choses, plusieurs versions des navigateurs coexistent. Aujourd’hui, un navigateur comme Chrome sort une nouvelle version presque tous les mois. Les mises à jour sont (heureusement) de plus en plus fréquentes.

Chaque version prend en charge de nouvelles fonctionnalités mais, si les utilisateurs ne mettent pas à jour leur(s) navigateur(s), cela devient un problème pour les webmasters, comme vous, qui créent des sites web.
Chrome a résolu en grande partie le problème en mettant en place des mises à jour automatiques, sans intervention de l’utilisateur. Firefox a semble-t-il décidé de suivre le rythme lui aussi. Internet Explorer est de plus en plus à jour, et son remplaçant Edge n’a pas à rougir de la comparaison avec les autres navigateurs.

Bref, j’ai un peu le sentiment de parler comme un ancêtre du Web en disant ça, mais on a beaucoup de chance aujourd’hui : les navigateurs supportent un grand nombre de fonctionnalités. La compatibilité reste toujours un problème malgré tout, mais ce n’est pas aussi grave qu’à une époque.
Le célèbre site caniuse.com tient à jour une liste des fonctionnalités prises en charge par les différentes versions de chaque navigateur (figure suivante).

Ça peut paraître un peu compliqué, mais comme je vous le disais, les navigateurs supportent aujourd’hui très bien un grand nombre de fonctionnalités. Les problèmes viennent le plus souvent d’anciennes versions d’Internet Explorer (IE7, IE8…), mais celles-ci sont si peu utilisées que je vous recommande de les ignorer.
Il est possible de tester son site sous le navigateur Internet Explorer à l’aide d’une machine virtuelle comme VirtualBox (gratuit). Le site modern.ie de Microsoft offre des "images disque" qui vous permettent de faire tourner sur votre ordinateur n’importe quelle version de Windows avec Internet Explorer ou Edge. Attention cependant : ces images sont grosses et consomment de la mémoire.

Les Navigateurs sur Mobile:
Les navigateurs mobiles sont comme des compagnons de voyage compacts. Ils adaptent l’expérience web aux écrans plus petits des smartphones. Découvrez comment ils améliorent la navigation lors de déplacements.

En plus des navigateurs que je vous ai présentés, il faut savoir qu’il existe des variantes de ces navigateurs conçues pour les téléphones portables, en particulier pour les smartphones. De plus en plus de personnes consultent aujourd’hui des sites web sur leur portable ; il faut donc connaître un minimum le fonctionnement des navigateurs des téléphones.

En fait, vous n’allez pas être dépaysé : la plupart des navigateurs sur smartphones sont les mêmes que sur ordinateur, dans une version plus légère adaptée aux mobiles. Tout dépend du type de téléphone.

• iPhone : sur l’iPhone d’Apple, le navigateur utilisé est Safari Mobile. Il s’agit d’une version light et néanmoins très complète de Safari pour ordinateur.
• Android : les portables sous Android bénéficient du navigateur Chrome Mobile. Là encore, il s’agit d’une version adaptée aux mobiles.
• Windows Phone : sous Windows Phone, on retrouve… Internet Explorer/Edge Mobile ! Le principe est le même que pour les précédents navigateurs : il s’agit d’une version dédiée aux mobiles. DEPRECATED
• Blackberry : les Blackberry font exception car ils ont leur propre navigateur (il n’existe pas d’équivalent sur ordinateur). Néanmoins, les versions les plus récentes de ce navigateur se basent sur un noyau commun à Safari et Chrome (il s’agit du moteur de rendu WebKit). Par conséquent, l’affichage est en général proche de celui proposé par Safari et Chrome. Enfin, il faut reconnaître que les Blackberry sont de moins en moins utilisés. DEPRECATED

Les navigateurs pour mobiles prennent en charge la plupart des dernières fonctionnalités de HTML et CSS. De plus, le système de mise à jour automatisé des mobiles nous garantit que les utilisateurs auront le plus souvent les dernières versions.

Sachez néanmoins que des différences existent entre ces différents navigateurs mobiles, et qu’il est conseillé de tester son site sur ces appareils aussi ! En particulier, l’écran étant beaucoup moins large, il faudra vérifier que votre site s’affiche correctement.
Les tablettes tactiles sont équipées des mêmes navigateurs ; l’écran est simplement plus large. Ainsi, l’iPad est fourni avec Safari Mobile.

Métaphore: Protocoles comme des Règles de Communication:
Pensez aux protocoles comme aux règles qui permettent aux navigateurs de comprendre les serveurs. Si les règles sont claires et suivies, la communication est efficace, tout comme dans une conversation entre guides touristiques.

Définitions des Termes Techniques Utilisés

• Navigateurs: Des logiciels permettant aux utilisateurs d’accéder et d’interagir avec des pages web.
• Tests multi-browsers: Vérifications pour s’assurer qu’un site fonctionne correctement sur divers navigateurs.
• Navigateurs Mobiles: Versions adaptées aux smartphones, offrant une expérience de navigation optimisée.

Exemple Pratique:

Imaginez que vous ayez trois guides touristiques, chacun vous montrant la ville à sa manière. Testez-les tous pour voir celui qui vous convient le mieux. C’est similaire à choisir votre navigateur web préféré.

Petit Exercice:
Comparez les fonctionnalités de deux navigateurs différents (par exemple, Chrome et Firefox). Notez leurs avantages respectifs et discutez-en en classe.

Conclusion

Félicitations pour avoir exploré le monde passionnant des serveurs web et des protocoles! En comprenant le rôle crucial des serveurs et la danse complexe des protocoles, vous êtes prêts à créer et à naviguer sur le web avec confiance.

Chaque module que vous avez parcouru – des bases d’un serveur web aux subtilités des navigateurs – contribue à votre boîte à outils numérique. Continuez à pratiquer, à explorer et à expérimenter. Le web évolue constamment, et vous faites partie de cette aventure palpitante.

N’oubliez jamais que derrière chaque page web se cache un serveur travaillant en coulisses pour vous offrir une expérience exceptionnelle. Tout comme un chef d’orchestre dirige un concert, les serveurs et les navigateurs collaborent pour créer une symphonie web harmonieuse.

Si vous avez des questions ou des curiosités supplémentaires, n’hésitez pas à les partager en classe. L’apprentissage ne s’arrête jamais, et votre exploration du web ne fait que commencer. Bon voyage dans le monde numérique!