Le 14 septembre 2017, nous avons publié une version actualisée de notre Politique de confidentialité. En utilisant video2brain.com vous vous engagez à respecter ces documents mis à jour. Veuillez donc prendre quelques minutes pour les consulter.

L'essentiel du HTML5

Encoder une page

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Une fois les documents préparés, vous devez comprendre et gérer leur encodage. En quelques exemples, voyez comment bien prendre en compte ce paramétrage pouvant parfois être source de problèmes s'il est mal contrôlé.
06:08

Transcription

Travailler en utf-8 ou en iso, peut importe la manière dont on va encore nos pages html, ce qui est important, c'est de prendre en considération que l'encodage, c'est quelque chose d'explicite. C'est pas quelque chose qui doit être écrit tout simplement, charset, encoding, utf-8 ou iso C'est pas marqué golf gti derrière une trip pour avancer plus vite. Là vous allez devoir vraiment convertir vos documents dans ce format là ou dans cet encodage là. Donc ici, si vous regardez dans Notepad ++, vous avez la possibilité, on vous, pour l'instant, c'est encoder en ANSI donc on mets donc en ISO 8859, mais vous pouvez le conertir en utf-8. Et là, justement, deux soucis, c'est que l'utf-8, c'est avec ou sans BOM alors qu'est ce que je fais ? Est-ce que je l'encode avec ou sans BOM ? Je vous propose qu'on fasse une petite expérience juste après. Pour l'instant, on va se dire dans Notepad, je sais où ça se passe. Faites bien attention, c'est pas de dire je veux encoder en utf-8 où ça ? Je veux convertir, en fonction de l'encodage que vous avez parce qu'ici, ça vous liste ce que vous avez et là, vers là où vous allez. Si vous êtes dans Sublime Test, ici, vous avez la possiblité de faire File, Save with encoding, et là, vous allez choisir le mode d'encodage que vous souhaitez. Obtenir si ça correspond pas à l'encodage dans lequel vous destinez votre contenu. Si vous êtes Dreamweaver, ici, vous avez la possiblité de faire Modifier, Propriété de la page. Alors, je vais ouvrir une page html quelconque. Voilà, ici, un document de type html 5. Ok, ça me va très bien. Ici, il me dit que c'est en utf-8 mais si je regarde à la modification ici, Propriété de la page, je vais avoir la possiblité dans le titre et le codage ici, de venir changer cet encodage. Et vous avez encore une fois la possiblité d'inclure ou pas une signature BOM. Alors qu'est ce que c'est cette signature ? On va dire que nous, on en n'a pas besoin dans 95% de nos pages html. Ça va être nécessaire surtout dès l'instant où on va avoir des caractères un peu complexes, pour pouvoir les encoder et où on aura besoin d'avoir une signature explicite qui dira que le document est en utf-8. Alors ici, on en n'a pas réellement beosin et je vous conseillerai même de ne pas utiliser de signature. Je vais vous montrer une problématique qu'on peut rencontrer par exemple classiquement. On va le générer en php pour mieux le faire ressortir. Ici, j'ai deux documents, qui ont été explicitement enregistrés en utf-8 sans signature BOM echo si meliora dies. Et le même document mais avec une signature BOM qui dit echo si meliora dies. Donc, j'ai simplement enregistré en utf-8 avec et sans signature. Ici, maintenant, dans mon premier document php, je dis echo lorem ipsum et juste après, tu as une virgule, tu vas m'inclure le document sans signature BOM. J'enregistre, je passe dans un navigateur pour aller tester ce resultat. Je vais prendre un navigateur ici. Ici, j'ai mon fichier php. J'actualise ma page, et vous voyez, lorem ipsum, si meliora dies. Il n'y a pas d'espace, il n'y a rien. Tout s'est collé bout à bout sans soucis. Ok. Maintenant, je vais retourner dans mon document ici, Et je vais lui dire ce coup-ci, tu vas m'inclure exactement le si meliora dies mais celui qui utilise une signature BOM. Et la j'enregistre. Et si je retourne dans mon navigateur, pour venir tester ici, j'actualise ma page, qu'est-ce quil se passe ? Vous avez vu, vous avez un caractère un peu bizarre : ï. une » et un ¿. En fait, c'est ce caractère, justement qui est représenté et qui vient causer soucis. Parce que dans certaines configurations, dans certains modes d'exploitation, un fichier xml notamment, je pense, ou si votre fichier php, vous faite un header location avec une redirection, des trucs de ce style là. Ce caractère va venir vous embéter parce qu'il va perturber le navigateur. Alors, ce caractère est identifié, c'est un caractère bien précis, qui permet d'identifier. JHe vais vous le placer ici en commentaire, dans son entité numérique qui est le eperluette#65279. C'est ce caractère là qui est représenté dans le BOM. Donc, des fois vous pouvez aussi aller le renifler pour pouvoir réajuster vos documents. Donc, deux informations importantes, le BOM ou pas BOM, optez pour pas BOM, au cas ou. Et utf-8 encodé de manière explicite. Alors faites attention, il y a un petit piège qui peut arriver aussi fréquemment. Prenons le cas d'un travail sur un vieux site internet qui a été développé à l'époque de html 4. Ça pourrait exactement être le même problème aujourd'hui, bien entendu. Donc, prenons le cas le plus rencontré. Je travaille sur un vieux site et puis, j'ai des accents qui ont été tapé en dur dans le texte. Quand je dit tapé en dur, c'est que j'ai tapé un é. J'ai pas utilisé une entité html numérique. On verra ça par la suite. Donc ici, j'ai un é tapé. Et j'ai pas défini parce qu'à l'époque on définissait très peu les encodages de caractères. Donc, j'ai pas défini mais je sais pertinemment qu'il a été encodé en 8859-1. J'enregistre ce document et je vais le voir dans un navigateur. J'actualise ma page. Vous allez me dire que tout les accents passent très bien. Attention, allons sous le capot du navigateur. Si je viens dans l'affichage et encodage du texte ici, je vois que le détection automatique a été désactivé. Et que je travaille en occidental. C'est à dire que je travaille en 8859, exactement. Donc, je ne vais pas travailler en occidental, je vais dire non, je veux un unicode parce que je suis en intranet. C'est que de l'utf-8, mets toi en unicode. Là, mes caractères ne sont pks représenté parce qu'ils ne sont pas compris. Ils ne sont pas interprétés par le navigateur. Alors, je vais retourné dans mon code ici, maintenant. Et je vais dire, je vais te définir le mode d'encodage de manière explicite. Je l'enregistre ici, donc il est bien enregistré de manière explicite. Je retourne dans mon navigateur, je ne change rien aux paramètres, j'actualise juste ma page. Et vous voyez que maintenant les caractères sont bien interprétés. Parce que je dis au navigateur : ok, tu vas venir afficher dans un encodage de texte. Il a basculé automatiquement parce qu'il a détecté le truc. Mais en unicode dans la mesure où tu recevras quelque chose que tu ne sais pas gérer. Puisque la détection automatique est désactivée. Mais par contre, si du manière explicite dans mon document, je lui dit c'est de lutf-8, c'est du 8859, à ce moment-là, ça pilote le navigateur, et le navigateur va bien restituer l'ensemble des caractères. Donc, l'encodage utf-8, 8859, peu importe lequel vous allez utiliser, avec ou sans BOM pour l'utf-8, l'essentiel, c'est de bien comprendre ce qui se passe sour le capot et de vous, prendre la manette et de le gérer.

L'essentiel du HTML5

Préparez la structure de vos sites web de manière évolutive, sémantique, et accessible à tous avec le HTML5. Abordez la gestion du texte, les balises et les attributs, etc.

5h13 (63 vidéos)
Aucun commentaire n´est disponible actuellement
 
Logiciel :
Spécial abonnés
Date de parution :29 juin 2016

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !