L'essentiel du HTML5

Utiliser JSON-LD

Testez gratuitement nos 1252 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Parfois, vous n'avez pas accès aux codes HTML et les paramétrer devient chronophage. Il est donc possible de générer les métadonnées au travers d'un code JavaScript.
04:48

Transcription

Implémenter du micro data ou du RDFa light ou du micro, peu importe, c'est toujours intéressant de pouvoir le faire, mais bien souvent, lorsqu'on attaque sur un site, on a déjà toute une série d'informations qui sont paramètrées, qui sonr rentrées, structuées, etc. Et il peut être complexe de venir déterminer à l'intérieur, quels que marquages que ce soit. Alors pour cela, si on regarde du côté, justement, de Schema.org, en vocabulaire, qu'on regarde dans la partie basse, on a toujours cent marqueurs avec les micro data, avec le RDFa light, et un quatrième à la ronde à la bande, avec un jSON-LD. Alors, qu'est-ce que jSON-LD ? jSON-LD, c'est utiliser la syntaxe jSON, qui est le java script objectmentation, c'est-à-dire un ensemble de propriétés valeurs sous forme d'objets java script littéral, pour pouvoir décrire l'information. Alors, de ce côté là, si on regarde encore une fois du côté de micro data, ici, on s'appeçoit ici qu'on a la description du contexte, qui va définir un fait, de la crémerie dans laquelle on va aller piocher les vocabulaires. Le type, qui correspond au type de vocabulaire qu'on avait utilisé, puis après toute une série d'informations, pour décrire les propriétés valeurs, les contenus, sur lesquels on veut accentuer les meta données. Si nous regardons de notre côté, ici, qu'est-ce qu'on a ? On a une organisation avec le nom, le prénom, le téléphone, etc, donc une description classique d'informations. Il nous suffit donc, dans l'entête de notre fichier HTML, PHP, peut importe la nature de ce document ici, de définir un scripte ici. On pourrait le charger dynamiquement, ou bien le charger de manière alternative, mais là on va l'écrire en dur dans l'entête du fichier. On va placer un scipte, mais attention, on définir son type comme étant un type applicatif, donc, application/ de nature lincon date plus jSON. Ici bien pour expliquer la nature de ce document, et qui ne va pas être interprèté par le document lui-même, mais pour le document. Ici ensuite, on va décrire un objet jSON, ici on va l'écrire de manière litérale, donc on ouvre, simplement, un objet. Dnas cet objet, on va placer d'entrée de jeu, une propriété @context, qui va permettre de définir la crémerie, donc ici http Schema.org. Pensez à placer le / en fermeture du RL, sinon cela ne fonctionnera pas. Et puis, on va défnir le type, donc le dictionnaire qu'on utiliser, ici, organisation. Et on va défnir comme ça tout un certain nombre de propriétés. Donc le legal name, c'est Puce et Média. On va définir le propriétaire. Alors les propriétaires, c'est un autre objet. Cet object va définir un autre type, parce qu'on affecte un autre dictionnaire. On aurait pu également définir un autre contexte, si on allait, par exemple, chercher une librairie de type FOAF, ou Dublin Core, ou Purl, ou peu importe. Ici, on reste donc dans Schema.org, on va simplement changer de dictionnaire. On va définir l'état civile, le nom, Et on va pouvoir, comme ça, continuer à décrire toute une série d'informations. Si chaque fois qu'on imbrique, peu importe que je sois imbriqué à l'intérieur d'une imbrication, ou au même niveau à la racine, mais que l'on imbrique un élément d'une nature différente, qui va piocher dans un dictionnaire alternatif, il faut, à chaque fois, redéfinir le @ type, pour partir sur le nouveau type de description. Par contre, l'item scope va forcément s'adresser à l'objet lui-même, donc ici si je prends un poste à l'adresse, il s'adresse à l'adresse. Si je prends un personne, il s'adresse à l'objet 11. Ce qui veut dire que si je sors ici de l'objet 11, et que je marque le téléphone, ce sera ni le téléphone du propriétaire, ni le téléphone de l'adresse, ça sera le téléphone, ici, de l'organisation. Et on va pouvoir commencer à remplir toutes les informations nécessaires. Une fois que ces informations sont saisies, on va les copier. Et puis, il est intéressant de pouvoir venir les tester, et dire directement dans un outil, comme par exemple ici chez Google. On va directement taper ce code ici dans la partie gauche, on va demander de le valider. Et ici, on nous explique zéro erreurs, zéro avertissement, donc, la structuration a bien été remplie. On peut donc venir enregistrer notre document, le mettre en ligne, et cette fois-ci,le tester au sein de notre navigateur. Alors ici, c'était sans informations. J'actualise, voici avec informations. On vient dans la partie des meta données ici, et on voit bien qu'on détecte du jSON-LD ici, c'est pas du micro data, ni du RDFa. Et l'intégralité des meta données ont pu être récupérées au sein du navigateur. Voilà donc une autre alternative qui permet de passer tout un tas de meta données, au travers de nos documents. Juste un petit détail. C'est que, du fait qu'on va avoir un javascript qui va parler avec d'autres serveurs, il est toujours important de redéfinir sur un htaccess ici, un header 7 access control allow origin étoile, pour permettre à notre document, d'aller récupérer un jSON sur d'autres serveurs, d'autres informations, et pouvoir assurer une meilleure portabilité.

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 !