L'essentiel du HTML5

Penser structure

Testez gratuitement nos 1270 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Afin de garantir une meilleure portabilité interactive ou visuelle de vos contenus, il est primordial de proposer une structure propre et adaptée. Ainsi, le W3C vous propose un standard sur lequel vous appuyer : le DOM.
06:14

Transcription

Au fil du temps on va construire nos pages, en ayant défini notre head en ayant défini nos body etc. On aura imbriqué tout un certain nombre de balises pour refléter le contenu de notre page. Alors ici si on le regarde pour l'instant dans cette structure on a une balise « nav » , une balise « header », une balise « main » qui sont au premier niveau de body. Et imbriqués dans chacune de ces balises on a d'autres types de contenu qui sont affichés. Alors ici sur l'explore à peu près on a la balise « nav » qui correspond à une navigation. Une balise « header », à l’entête de document avec le titre, puis une balise « main », le main contenu qui contient des articles ici voyez avait des titres et des paragraphes et un footer. En fait c'est la partie cachée de la SPA, la partie immergée, on ne la voit pas. Que voit-on dans notre navigateur, si je viens dans un navigateur, voilà ce que je vois, à mes yeux quand même c'est pas très esthétique, mais on voit qu'il y a un titre, un titre plus petit, un liste ici. Puis en ayant les mots « Menu 01 », « Menu 02 », ça pourrait être accueil à propos etc. Donc on comprend que c'est une navigation, on voit des images, on voit le pied de page, il y aura pas trop de chose, qui le distinguent ici, dans cette partie-là, mais voilà. On a une structure. Ce qui est d'important de penser maintenant c'est qu'on a une structure qui va être standardisée et ce standard ça s'appelle justement le DOM, le Document Objet Model. Alors rappelez-vous pendant la partie historique du HTML on a vu qu'à l'époque du HTML2 jusqu'à l'époque HTML3 il y avait une guerre de navigateurs entre Internet Explorer et Netscape, qui en fait avaient leur propre DOM, leur propre exploration de la structure du document. Et ça a crée deux scripts, il fallait écrire un script pour l'un un script pour l'autre, pour que les utilisateurs puissent utiliser l'un ou l'autre des navigateurs. Parfois on arrivait et on disait ce site est developpé pour Netscape donc si vous aviez Internet Explorer, circulez, il n'y a rien à avoir. Donc c'est très important de comprendre le DOM et de voir comment il fonctionne. Donc ici on va s'amuser à aller explorer ce DOM, justement. Alors pourquoi aller l'explorer ? Parce que nos applications ont besoin parfois de masquer, d'afficher les contenus, de manière différente en fonction du navigateur, en fonction des devices, des supports sur lesquels je vais les visualiser. Si je suis sur un IPhone, un Androïde, une tablette, une fablette, un écran d'ordinateur, un méga écran en 35 pouces, Bref, je vais devoir manipuler ce contenu par de l'interaction utilisateur et puis par de l'interaction aussi des contenus eux-mêmes, en fonction-- si je regarde les contenus de la bourse je veux la voir évoluér au fil du temps et je veux continuer à pouvoir suivre mon application et intervenir sur le contenu de ma page. Donc pour cela même utiliser un tiers langage qui s'appelle JavaScript. Rassurez-vous pour ceux d'entre vous qui ne le connaissent pas, c'est vraiment une formation focalisée sur HTML. Et donc on ne fera pas du JavaScript, au delà de ce qui est nécessaire pour pouvoir démontrer la fonctionnalité ou le besoin. Donc ici on va placer un écouteur, dès que la fenêtre de navigateur a fini de charger le contenu, tu exécutes une fonction anonyme, et donc tu vas exectuer tout ce qui va se passer entre ces deux accolades. A quel moment ? Quand c'est chargé. Donc ici voyez le parser, le navigateur, a chargé ce contenu comme ça, il a chargé le JavaScript, il est allé l'executer mais on lui dit : tu attends la fin du chargement. Donc il va continuer à charger ici. Et quand il arrivera à la fin du document à ce moment-là, il viendra exécuter ce qu'il se passe à l’intérieur de ces deux accolades. Qu'est-ce qu'on va lui demander ? On va créer une variable balise, alors elle aurait pu s'appeler par tout nom, x, y erneste, peu importe. Ici on va placer un mot qui sera le mot « main ». On va explorer la balise « main », on pourrait taper « ul », on pourrait travailler avec « H2 » , « P », peu importe. Ici en bas créer une second variable qui va s'appeler « résultat » et on va lui dire : dans le résultat tu vas placer le résultat d'une requête qui va correspondre à « document » que tu vas aller chercher dans le document tous les éléments au pluriel : « ByTagName », par les noms de balise, et quel nom de balise ? Justement, le nom de la variable qu'on a nommé « balise » avant. Pour avoir une meilleure écriture, je vais mettre des points virgules qui sont pas tout à fait obligatoires dans ce cas-là. Mais ça permettra d'avoir une structure plus stable. Ici on va créer maintenant une boucle, on va lui dire : tu vas boucler un certain nombre de fois. Alors on va créer une nouvelle variable « i », un incrémenteur, qui pourra être égal à « 0 » au départ, et « nb », qui sera égal à la longueur du tableau résultat, c'est à dire le nombre de résultats que tu auras obtenu en lançant ta requête. Point-virgule, deuxième instruction, je lui dis : tu vas faire cette boucle tant que « i » est inférieur à « nb ». Donc tant que « i » va être inférieur au nombre de résultats, tu continues la boucle. Si je bouge pas sur « i », mais ça ne bougera pas, ça va le faire qu'une fois, donc dans le troisième paramètre, si je lui dis « i++ », donc tu incrémentes « i » de un à chaque tour de boucle et tu vas faire ça pour autant résultats que tu as trouvé. Et je lui dis : mais ici maintenant ce que tu vas faire s'il te plaît, dans la console du navigateur ici, tu vas venir m'afficher le résultat un par un, durant cette boucle, et tu vas faire résultat « i ». Donc le premier coup il prendra le « 0i » mon résultat, puis le premier résultat, puis le deuxième alors pourquoi je disais « 0i » parce que JavaScript compte à partir de « 0 » et vous l'avez vu ici. Donc si j'enregistre maintenant, que je retourne dans mon navigateur, que je recharge ma page, je vais ouvrir l'inspecteur, ici je vais passer dans la console et je recharge ma page, et vous voyez qu'ici il m'affiche un « main », et il m'affiche tous le « main ». Vous avez compris que maintenant si je retourne dans JavaScript, et ici je lui dis : tu vas faire ça pareil avec « article » cette fois-ci. Je fais « CTRL+S », je retourne dans mon navigateur, alors chose importante c'est que regardez ici il n'y a qu'une flèche « main », si j'actualise ma page il va y avoir trois flèches « article » pour correspondre à trois articles. Et là je vais pouvoir venir parcourir le DOM, parcourir ma structure de document, venir l'explorer et plus la structure sera propre c'est à dire proche de la représentation du contenu. Je vais pouvoir être très subtile, très fin et très chirurgical dans ma manière de pouvoir venir explorer le DOM, soit pour du CSS, ou pour de la fonctionnalité interactive, soit pour des compléments d'information par exemple, quand vous survolez une news, une petite infobulle qui apparaît, qui vous donne plus informations sur la news, pour pouvoir cliquer etc. Voilà donc ce qui est très important c'est de comprendre que la base-même de nos documents HTML, c'est leur structure et plus leur structure va être fondamentale plus facilement les applications pouront se développer et plus on pourra les faire évoluer.

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
Votre/vos formateur(s) :
Date de parution :29 juin 2016
Durée :5h13 (63 vidéos)

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 !