Validation et compatibilité HTML (Les moteurs de rendu)

Bonjour à tous, dans cette vidéo je vais essayer de vous parler de la validation du code HTML et le rapport entre conformité du code et moteur de rendu. La plupart des développeurs, quand ils créent un site web ou bien une page web en particulier, des fois ils se rendent compte que son comportement n'est pas le même sur tous les navigateurs. Par exemple, il peut apparaître d'une manière différente Internet Explorer et Mozilla Firefox. On appelle ça un problème de compatibilité. Ça veut dire que le code n'est pas conforme pour qu'il soit interprété de la même manière. Alors la solution est de valider son code via un outil qui est très populaire qui s'appelle le validateur W3C. Le validateur, c'est quoi en fait? C'est tout simplement ce site-là dont l'URL est validator.w3c.org. Il s'agit du validateur W3C qui est le consortium ou bien organisation internationale à but non lucratif dans laquelle et la standardisation des outils du web. Alors il suffit de prendre son site web et de passer via ce validateur-là et voir le résultat. À la fin, nous aurons un rapport qui va nous indiquer toutes les erreurs qui ont été commises lors de la phase de développement et on peut les régler pour rendre son code compatible. Et dans ce cas, on aura un rendu qui est le même sur tous les navigateurs. Prenons par exemple ce code-là. C'est un petit code de 16 lignes qui ne contient rien de spécial sauf quelques balises de base. On va essayer de le faire valider par le validateur du W3C. Bon, déjà il y a 3 manières de faire valider son code. Soit en mettant directement l'URL de la page concernée ici. On appuie ensuite sur Vérifier pour voir le résultat. Ou bien on upload le fichier depuis son ordinateur. Ou bien la troisième méthode, c'est d'écrire directement son code ici. Bon, nous on va opter pour cette troisième solution parce qu'elle paraît très simple. On va d'abord prendre notre code, on va mettre copier-coller directement comme ça. On l'intègre ici dans cette boîte. Ensuite, on va mettre check. On attendra quelques secondes, on attend donc que le code soit vérifié. Et voilà, le rapport c'est ça. Alors, nous avons 3 erreurs. La première n'est pas si grave, il s'agit en fait de l'oubli de l'attribut lang dans la balise HTML parce qu'il faut bien spécifier de quelle langue il s'agit. Dans ce cas, on va mettre la langue française. La deuxième erreur, c'est que nous avons oublié la balise title dans le head. Et la troisième erreur, nous avons oublié l'attribut alt dans la balise img. Maintenant, on va revenir vers le code et on va essayer de vérifier ces 3 paramètres. Alors le premier, dans le HTML, on va ajouter lang, on va mettre fr pour dire que la page, elle est principalement faite en français. Deuxième erreur, c'est qu'il faut ajouter la balise title. On va mettre ici un titre, par exemple apprendre à coder. Et la troisième notification, c'est l'oubli de l'attribut alt dans la balise img. Par exemple, ici on va mettre logo. On enregistre. On va copier maintenant notre code et on va le faire passer par le validateur. Alors ici, on va remplacer le code ancien, on va mettre check. Alors là, vous avez remarqué qu'il n'y a plus aucune erreur, alors le code maintenant ça passe. Ça veut dire qu'il est conforme. Alors désormais, quand je vais exécuter ce code sur tous les navigateurs, je vais voir que le rendu sera pratiquement le même. Il faut savoir que la plupart des développeurs ne se conforment pas au validateur de W3C parce que tout simplement c'est très difficile de le faire. Prenons un exemple simple, on va faire le test sur quelques grands sites web connus, par exemple Google. Quand on met vérifier, On va voir qu'il y a plein d'erreurs qui surgissent. On sait tous que Google, il est bien conforme parce qu'il a la même allure sur tous les navigateurs, que ce soit sur PC ou bien sur mobile, et pourtant il n'est pas conforme aux directives de W3C. Essayons un autre site web. Là encore, nous avons plein d'erreurs. Voilà. Voilà. En fait, la plupart des développeurs ne se confondent pas au W3C parce que c'est très fastidieux de le faire, surtout que la plupart du code n'est pas généré manuellement. C'est-à-dire que le code HTML, à l'inverse de ce que l'on peut croire, il n'est pas toujours écrit manuellement. Il peut bien être généré par des scripts CGI comme le PHP, c'est-à-dire que certains bouts de code vont être générés d'une manière automatisée par le serveur. Puisque la validation par le validateur W3C s'avère tellement fastidieuse, Alors dans ce cas, on peut se baser sur le concept du moteur de rendu. Le moteur de rendu est un composant logiciel qui est intégré à tous les navigateurs. En fait, pour nous les utilisateurs, un navigateur c'est rien d'autre que cette interface que l'on est en train de voir devant nous. Il nous permet de visualiser le contenu hypertexte, il nous permet aussi d'interagir avec ce contenu et bien sûr procéder à quelques réglages. Et pourtant, derrière, il y a un composant qui est le plus important, c'est le moteur de rendu. C'est en fait l'interpréteur du langage HTML et du CSS. C'est lui qui exécute tout et qui nous affiche le résultat sur cette interface. Les moteurs de rendu, il y en a beaucoup et qui sont embarqués par tous les navigateurs, mais les plus connus sont Gecko de la fondation Mozilla, WebKit qui est très célèbre et Trident de Microsoft. Par exemple, Gecko est embarqué au sein des navigateurs Mozilla Firefox et IceCat. WebKit, il est embarqué au sein de Chrome, Safari et et Opera à partir de sa version 14. Trident est embarqué au sein d'Internet Explorer. Il y a aussi d'autres moteurs de rendu comme par exemple EdgeHTML qui est un fork de Trident et qui est embarqué au sein du navigateur de Microsoft Edge. Autrement dit, si on prend l'exemple de Chrome, Safari et Opera, ils embarquent le même moteur de rendu. Alors le fait qu'un code fonctionne correctement sur Chrome, il fonctionnera forcément correctement sur Safari et sur Opera. Parce qu'ils embarquent tous le même moteur de rendu. Et c'est ça le principe que l'on va suivre afin de rendre un code conforme. Au lieu de le faire valider par le validateur W3C, il suffit de le tester sur plusieurs navigateurs, d'autant plus les navigateurs qui sont le plus utilisés par les internautes. Parce que nous, en tant que développeur, on sait jamais l'internaute avec quel navigateur il va consulter notre site web. Et bien sûr, pour faire le test sur tous les navigateurs existants, parce qu'il y en a des dizaines et des dizaines, Ça serait une opération tellement compliquée. Alors ce qu'on va faire, c'est sélectionner un navigateur par moteur de rendu que l'on connaît. Par exemple Mozilla Firefox pour Gecko, Chrome ou bien Safari pour WebKit et Internet Explorer pour Trident. Il suffit d'installer ces 3 navigateurs-là et on va faire le test sur chacun d'entre eux. Et si le code nous paraît conforme, alors c'est qu'il sera forcément conforme pour tous les navigateurs restants. Et c'est une opération qui s'avère beaucoup plus simple que faire valider son code via le validateur de W3C et qui garantit aussi un résultat aussi satisfaisant. Et ça nous permet de créer des pages web compatibles et professionnelles. Merci pour votre attention et à la vidéo prochaine.