L'essentiel du HTML5

Comprendre les microdatas

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Les microdatas ont été mis en place sous forme de parseurs et de dictionnaires. Il est donc possible de renseigner plus finement l'ensemble des contenus de vos pages.
04:23

Transcription

Depuis l'apparition de HTLM5, proposé par Google, Schema.org propose à la fois un perceur et des dictionnaires, qui vont permettre d'aller encore plus loin que les micro formats. Les micro datas sont une mécanique double, on va dire, parce que ça va être la possibilité de pouvoir structurer, un document de manière sémantique, de pouvoir aller plus loin dans la possibilité de décrire l'information, et en plus, propose ce qu'on appelle des dictionnaires. Donc si je viens ici dans la partie des schémas, ici, on va voir que je vais pouvoir décrire une organisation, Et là, à l'instar de micro formats, je vais avoir tout un certain nombre de propriétés valeurs, qui vont me permettre de définir cette information. Alors, ce qu'il y a d'intéressant ici, c'est dans la partie basse de ce site, On a toujours la possibilité de dire, voilà dans les micro data comment je vais pouvoir venir représenter cette information. Alors prenez des exemples très basiques au départ, qu'est-ce qu'on a besoin de définir ? On a besoin de définir un item score, qui va dire de là à là, de cette balise div, à cette balise div. Toute cette étendue là, c'est un item taille, qui est quoi ? Qui est un Broagcast Service. Et là, une fois que je vais avoir cette information là, je sais dans quel dictionnaire je vais devoir chercher l'information, et chaque fois que j'aurai item propr, je vais définir la propriété, tout ce qui est contenu dans la balise sera la valeur. Donc ici, si jevais chercher le format vidéo, c'est du SD. La filéatre off, et là je vais imbriquer un nouvel item score, je vais dire, dans cette balise, de là à là, tout ce qu'il y a à l'intérieur c'est un item type, organisation. Et cette organisation, c'est quoi ? C'est le name, A, B, C. Et vous voyez, vous pouvez imbriquer comme ça autant de dictionnaires que vous voulez, Toujours en respectant, bien entendu, les balises itemscope qui définissent l'étendue le type, le dictionnaire, et la propriété qui est affectée. En dehors de Schema.org, vous avez des globes qui se mettent en place, et qui commencent à discuter autour de l'implémentation d'un dictionnaire, Donc, par exemple, ici, c'est vraiment pour pouvoir travailler sur les appareils médicaux et de santé, qui vont pouvoir développer ce vocabulaire. Pareil sur tout ce qui va être la description onthologique de la voiture, et de tout ce qui va concerner les véhicules. Et une fois que ce dictionnaire, dans ce groupe de travail va avancer, bien entendu vous pouvez vous y inscrire, y participer, Et même on va pouvoir le retrouver, maintenant, ici, au sein de Schema.org, dans les parties pas forcément accessibles de manière directe, mais par les groupes de travail, vous pourrez accéder à ces informations. Revenons à nos moutons, maintenant, sur l'implémentation, par exemple ici de Puce et Média qui est une organisation avec la description, le logo. Alors ici, l'image est absente, c'est normal, l'image n'est pas fournie. Mais on pourrait très bien envisager avoir une IMG SRC ici, qui dirait, eh bien voici le logo de cette association, voilà la description, quelles sont les langues parlées, contact, adresse, les téléphones, email, web, et la localisation GPS. Donc ici, on est dans du pur HTML de base, toutes ces informations sont indiquées, et on va voir que si on tague, tout simplement, en utilisant un item scope, un item type organisation. Ici, le legal name c'est Puce et Média, item propr description, et on continu à décrire comme ça l'information. Ici, on peut faire un item scope, une imbrication pour le language. Et ici dans langage on va dire, eh bien, l'item propr, le nom, c'est le français pour les AvailableLanguage ici. Et on peut utiliser un alternate name ici, et l'alternate name, c'est quoi ? C'est FR. Ou EN pour anglais, etc. Donc, vous avez compris le principe. On peut imbiquer, comme ça, autant de vocabulaire qu'on le veut. Alors là, j'ai choisi quelque chose d'un tantinet complexe, volontairement. Donc si on a imbriquée une personne, plus une postal adress, toutes les informations sont données, puis les Geocoordinate, ici, pour la géolocalisation, qui fait que maintenant, on va aller visualiser ceci dans un navigateur. Et on va retrouver la partie visibile telle quelle. Si je regarde le code source, bien entendu qu'on a toute la balise qu'on vient d'écrire dans notre logiciel. Mais ici, dans cet outil qui me dit, eh bien montre moi toutes les metadonnées de ce document. Si je clique dessus, il va me dire, eh bien j'en ai un paquet, et voici les meta données que je me retrouve. Donc je me retrouve ici avec de l'organisation, Puce et Média, il vous retrouve toutes les informations nécessaires, Et donc vous pouvez récupérer, comme ça, toute la structuration de meta données, que vous avez implémenté dans votre document.

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 !