Ajouter du sens à vos pages     web avec les microdonnéesCorinne Schillinger - www.inseo.fr   Sud Web 2012
Un peu d’histoire...‣   RDFa    ⊕ très souple    ⊖ relativement complexe‣   Microformats    ⊕ plus simple    ⊖ s’appuie su...
Les microdonnées‣   Réunit le meilleur des deux mondes    très souple    peu complexe à utiliser‣   5 nouveaux attributs  ...
Explication par l’exemple<div>  <h2>La Vague</h2>  <img src="img/la-vague.jpg" width="160" height="210" alt="" />  <p>Note...
Créer un nouvel objet<div itemscope>  <h2>La Vague</h2>  <img src="img/la-vague.jpg" width="160" height="210" alt="" />  <...
Identifier cet objet<div itemscope itemtype="http://schema.org/Movie">  <h2>La Vague</h2>  <img src="img/la-vague.jpg" wid...
Préciser la nature des données<div itemscope itemtype="http://schema.org/Movie">  <h2 itemprop="name">La Vague</h2>  <img ...
Préciser la nature des données<div itemscope itemtype="http://schema.org/Movie">  <h2 itemprop="name">La Vague</h2>  <img ...
Préciser la nature des données<div itemscope itemtype="http://schema.org/Movie">  <h2 itemprop="name">La Vague</h2>  <img ...
Préciser la nature des données<div itemscope itemtype="http://schema.org/Movie">  <h2 itemprop="name">La Vague</h2>  <img ...
Préciser la nature des données<div itemscope itemtype="http://schema.org/Movie">  <h2 itemprop="name">La Vague</h2>  <img ...
Préciser la nature des données<div itemscope itemtype="http://schema.org/Movie">  <h2 itemprop="name">La Vague</h2>  <img ...
Préciser la nature des données<div itemscope itemtype="http://schema.org/Movie">  <h2 itemprop="name">La Vague</h2>  <img ...
Imbriquer des objets<div itemscope itemtype="http://schema.org/Movie">  <h2 itemprop="name">La Vague</h2>  <img itemprop="...
Renseigner la nature de l’objet<div itemscope itemtype="http://schema.org/Movie">  <h2 itemprop="name">La Vague</h2>  <img...
Renseigner la nature de l’objet<div itemscope itemtype="http://schema.org/Movie">  <h2 itemprop="name">La Vague</h2>  <img...
Renseigner la nature de l’objet<div itemscope itemtype="http://schema.org/Movie">  <h2 itemprop="name">La Vague</h2>  <img...
Associer des données distantes<div itemscope itemtype="http://schema.org/Movie" itemref="prize">  <h2 itemprop="name">La V...
Associer des données distantes<div itemscope itemtype="http://schema.org/Movie" itemref="prize">  <h2 itemprop="name">La V...
Tester la validité du code‣   Rich Snippets Testing Tool    http://www.google.com/webmasters/tools/richsnippets
Et itemid, dans tout ça ?‣   Utilité relativement restreinte    prend comme valeur un identifiant unique permettant    de ...
Récapitulons itemscope : racine de l’objet (booléen) itemtype : définit le type et les propriétés (via une url) itemprop :...
À vous de jouer ! Merci de votre attention  Corinne Schillinger - @schillinger        http://www.inseo.fr
Prochain SlideShare
Chargement dans…5
×

Ajoutez du sens à vos pages avec les microdonnées (Sud Web 2012)

2 412 vues

Publié le

Publié dans : Technologie
2 commentaires
3 j’aime
Statistiques
Remarques
Aucun téléchargement
Vues
Nombre de vues
2 412
Sur SlideShare
0
Issues des intégrations
0
Intégrations
179
Actions
Partages
0
Téléchargements
13
Commentaires
2
J’aime
3
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Ajoutez du sens à vos pages avec les microdonnées (Sud Web 2012)

  1. 1. Ajouter du sens à vos pages web avec les microdonnéesCorinne Schillinger - www.inseo.fr Sud Web 2012
  2. 2. Un peu d’histoire...‣ RDFa ⊕ très souple ⊖ relativement complexe‣ Microformats ⊕ plus simple ⊖ s’appuie sur des attributs inappropriés
  3. 3. Les microdonnées‣ Réunit le meilleur des deux mondes très souple peu complexe à utiliser‣ 5 nouveaux attributs itemscope, itemtype, itemprop, itemref et itemid pouvant être employés dès à présent
  4. 4. Explication par l’exemple<div> <h2>La Vague</h2> <img src="img/la-vague.jpg" width="160" height="210" alt="" /> <p>Note : 3.8/5.0 - 4856 avis</p> <p>Dans le cadre dun atelier, un professeur de lycée propose à ses élèves uneexpérience visant à leur expliquer le fonctionnement dun régime totalitaire.Commence alors un jeu de rôle grandeur nature, dont les conséquences vont savérertragiques.</p> <p>Réalisé par Dennis Gansel. Avec Jürgen Vogel, Frederick Lau.</p> <a href="https://www.youtube.com/watch?v=xBwj28sflL4">bande annonce</a></div>
  5. 5. Créer un nouvel objet<div itemscope> <h2>La Vague</h2> <img src="img/la-vague.jpg" width="160" height="210" alt="" /> <p>Note : 3.8/5.0 - 4856 avis</p> <p>Dans le cadre dun atelier, un professeur de lycée propose à ses élèves uneexpérience visant à leur expliquer le fonctionnement dun régime totalitaire.Commence alors un jeu de rôle grandeur nature, dont les conséquences vont savérertragiques.</p> <p>Réalisé par Dennis Gansel. Avec Jürgen Vogel, Frederick Lau.</p> <a href="https://www.youtube.com/watch?v=xBwj28sflL4">bande annonce</a></div>itemscope : attribut booléen
  6. 6. Identifier cet objet<div itemscope itemtype="http://schema.org/Movie"> <h2>La Vague</h2> <img src="img/la-vague.jpg" width="160" height="210" alt="" /> <p>Note : 3.8/5.0 - 4856 avis</p> <p>Dans le cadre dun atelier, un professeur de lycée propose à ses élèves uneexpérience visant à leur expliquer le fonctionnement dun régime totalitaire.Commence alors un jeu de rôle grandeur nature, dont les conséquences vont savérertragiques.</p> <p>Réalisé par Dennis Gansel. Avec Jürgen Vogel, Frederick Lau.</p> <a href="https://www.youtube.com/watch?v=xBwj28sflL4">bande annonce</a></div>itemtype : spécifie le type et les propriétés de l’objeturl : indique le vocabulaire employé
  7. 7. Préciser la nature des données<div itemscope itemtype="http://schema.org/Movie"> <h2 itemprop="name">La Vague</h2> <img src="img/la-vague.jpg" width="160" height="210" alt="" /> <p>Note : 3.8/5.0 - 4856 avis</p> <p>Dans le cadre dun atelier, un professeur de lycée propose à ses élèves uneexpérience visant à leur expliquer le fonctionnement dun régime totalitaire.Commence alors un jeu de rôle grandeur nature, dont les conséquences vont savérertragiques.</p> <p>Réalisé par Dennis Gansel. Avec Jürgen Vogel, Frederick Lau.</p> <a href="https://www.youtube.com/watch?v=xBwj28sflL4">bande annonce</a></div>intemprop : définit le contenu de la balise marquée
  8. 8. Préciser la nature des données<div itemscope itemtype="http://schema.org/Movie"> <h2 itemprop="name">La Vague</h2> <img itemprop="image" src="img/la-vague.jpg" width="160" height="210" alt="" /> <p>Note : 3.8/5.0 - 4856 avis</p> <p>Dans le cadre dun atelier, un professeur de lycée propose à ses élèves uneexpérience visant à leur expliquer le fonctionnement dun régime totalitaire.Commence alors un jeu de rôle grandeur nature, dont les conséquences vont savérertragiques.</p> <p>Réalisé par Dennis Gansel. Avec Jürgen Vogel, Frederick Lau.</p> <a href="https://www.youtube.com/watch?v=xBwj28sflL4">bande annonce</a></div>intemprop : définit le contenu de la balise marquéesauf pour les éléments munis d’un attribut : data, href ou src.
  9. 9. Préciser la nature des données<div itemscope itemtype="http://schema.org/Movie"> <h2 itemprop="name">La Vague</h2> <img itemprop="image" src="img/la-vague.jpg" width="160" height="210" alt="" /> <p itemprop="aggregateRating">Note : 3.8/5.0 - 4856 avis</p> <p>Dans le cadre dun atelier, un professeur de lycée propose à ses élèves uneexpérience visant à leur expliquer le fonctionnement dun régime totalitaire.Commence alors un jeu de rôle grandeur nature, dont les conséquences vont savérertragiques.</p> <p>Réalisé par Dennis Gansel. Avec Jürgen Vogel, Frederick Lau.</p> <a href="https://www.youtube.com/watch?v=xBwj28sflL4">bande annonce</a></div>intemprop : définit le contenu de la balise marquéesauf pour les éléments munis d’un attribut : data, href ou src.
  10. 10. Préciser la nature des données<div itemscope itemtype="http://schema.org/Movie"> <h2 itemprop="name">La Vague</h2> <img itemprop="image" src="img/la-vague.jpg" width="160" height="210" alt="" /> <p itemprop="aggregateRating">Note : 3.8/5.0 - 4856 avis</p> <p itemprop="description">Dans le cadre dun atelier, un professeur de lycéepropose à ses élèves une expérience visant à leur expliquer le fonctionnement dunrégime totalitaire. Commence alors un jeu de rôle grandeur nature, dont lesconséquences vont savérer tragiques.</p> <p>Réalisé par Dennis Gansel. Avec Jürgen Vogel, Frederick Lau.</p> <a href="https://www.youtube.com/watch?v=xBwj28sflL4">bande annonce</a></div>intemprop : définit le contenu de la balise marquéesauf pour les éléments munis d’un attribut : data, href ou src.
  11. 11. Préciser la nature des données<div itemscope itemtype="http://schema.org/Movie"> <h2 itemprop="name">La Vague</h2> <img itemprop="image" src="img/la-vague.jpg" width="160" height="210" alt="" /> <p itemprop="aggregateRating">Note : 3.8/5.0 - 4856 avis</p> <p itemprop="description">Dans le cadre dun atelier, un professeur de lycéepropose à ses élèves une expérience visant à leur expliquer le fonctionnement dunrégime totalitaire. Commence alors un jeu de rôle grandeur nature, dont lesconséquences vont savérer tragiques.</p> <p>Réalisé par <span itemprop="director">Dennis Gansel</span>. Avec JürgenVogel, Frederick Lau.</p> <a href="https://www.youtube.com/watch?v=xBwj28sflL4">bande annonce</a></div>intemprop : définit le contenu de la balise marquéesauf pour les éléments munis d’un attribut : data, href ou src.
  12. 12. Préciser la nature des données<div itemscope itemtype="http://schema.org/Movie"> <h2 itemprop="name">La Vague</h2> <img itemprop="image" src="img/la-vague.jpg" width="160" height="210" alt="" /> <p itemprop="aggregateRating">Note : 3.8/5.0 - 4856 avis</p> <p itemprop="description">Dans le cadre dun atelier, un professeur de lycéepropose à ses élèves une expérience visant à leur expliquer le fonctionnement dunrégime totalitaire. Commence alors un jeu de rôle grandeur nature, dont lesconséquences vont savérer tragiques.</p> <p>Réalisé par <span itemprop="director">Dennis Gansel</span>. Avec <spanitemprop="actors">Jürgen Vogel, <span itemprop="actors">Frederick Lau</span>.</p> <a href="https://www.youtube.com/watch?v=xBwj28sflL4">bande annonce</a></div>intemprop : définit le contenu de la balise marquéesauf pour les éléments munis d’un attribut : data, href ou src.
  13. 13. Préciser la nature des données<div itemscope itemtype="http://schema.org/Movie"> <h2 itemprop="name">La Vague</h2> <img itemprop="image" src="img/la-vague.jpg" width="160" height="210" alt="" /> <p itemprop="aggregateRating">Note : 3.8/5.0 - 4856 avis</p> <p itemprop="description">Dans le cadre dun atelier, un professeur de lycéepropose à ses élèves une expérience visant à leur expliquer le fonctionnement dunrégime totalitaire. Commence alors un jeu de rôle grandeur nature, dont lesconséquences vont savérer tragiques.</p> <p>Réalisé par <span itemprop="director">Dennis Gansel</span>. Avec <spanitemprop="actors">Jürgen Vogel, <span itemprop="actors">Frederick Lau</span>.</p> <a itemprop="trailer" href="https://www.youtube.com/watch?v=xBwj28sflL4">bandeannonce</a></div>intemprop : définit le contenu de la balise marquéesauf pour les éléments munis d’un attribut : data, href ou src.
  14. 14. Imbriquer des objets<div itemscope itemtype="http://schema.org/Movie"> <h2 itemprop="name">La Vague</h2> <img itemprop="image" src="img/la-vague.jpg" width="160" height="210" alt="" /> <p itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">Note : 3.8/5.0 - 4856 avis</p> <p itemprop="description">Dans le cadre dun atelier, un professeur de lycéepropose à ses élèves une expérience visant à leur expliquer le fonctionnement dunrégime totalitaire. Commence alors un jeu de rôle grandeur nature, dont lesconséquences vont savérer tragiques.</p> <p>Réalisé par <span itemprop="director">Dennis Gansel</span>. Avec <spanitemprop="actors">Jürgen Vogel, <span itemprop="actors">Frederick Lau</span>.</p> <a itemprop="trailer" href="https://www.youtube.com/watch?v=xBwj28sflL4">bandeannonce</a></div>Créer un objet « évaluation »
  15. 15. Renseigner la nature de l’objet<div itemscope itemtype="http://schema.org/Movie"> <h2 itemprop="name">La Vague</h2> <img itemprop="image" src="img/la-vague.jpg" width="160" height="210" alt="" /> <p itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">Note : <span itemprop="ratingValue">3.8</span>/5.0 - 4856avis</p> <p itemprop="description">Dans le cadre dun atelier, un professeur de lycéepropose à ses élèves une expérience visant à leur expliquer le fonctionnement dunrégime totalitaire. Commence alors un jeu de rôle grandeur nature, dont lesconséquences vont savérer tragiques.</p> <p>Réalisé par <span itemprop="director">Dennis Gansel</span>. Avec <spanitemprop="actors">Jürgen Vogel, <span itemprop="actors">Frederick Lau</span>.</p> <a itemprop="trailer" href="https://www.youtube.com/watch?v=xBwj28sflL4">bandeannonce</a></div>
  16. 16. Renseigner la nature de l’objet<div itemscope itemtype="http://schema.org/Movie"> <h2 itemprop="name">La Vague</h2> <img itemprop="image" src="img/la-vague.jpg" width="160" height="210" alt="" /> <p itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">Note : <span itemprop="ratingValue">3.8</span>/<spanitemprop="bestRating">5.0</span> - 4856 avis</p> <p itemprop="description">Dans le cadre dun atelier, un professeur de lycéepropose à ses élèves une expérience visant à leur expliquer le fonctionnement dunrégime totalitaire. Commence alors un jeu de rôle grandeur nature, dont lesconséquences vont savérer tragiques.</p> <p>Réalisé par <span itemprop="director">Dennis Gansel</span>. Avec <spanitemprop="actors">Jürgen Vogel, <span itemprop="actors">Frederick Lau</span>.</p> <a itemprop="trailer" href="https://www.youtube.com/watch?v=xBwj28sflL4">bandeannonce</a></div>
  17. 17. Renseigner la nature de l’objet<div itemscope itemtype="http://schema.org/Movie"> <h2 itemprop="name">La Vague</h2> <img itemprop="image" src="img/la-vague.jpg" width="160" height="210" alt="" /> <p itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">Note : <span itemprop="ratingValue">3.8</span>/<spanitemprop="bestRating">5.0</span> - <span itemprop="reviewCount">4856</span> avis</p> <p itemprop="description">Dans le cadre dun atelier, un professeur de lycéepropose à ses élèves une expérience visant à leur expliquer le fonctionnement dunrégime totalitaire. Commence alors un jeu de rôle grandeur nature, dont lesconséquences vont savérer tragiques.</p> <p>Réalisé par <span itemprop="director">Dennis Gansel</span>. Avec <spanitemprop="actors">Jürgen Vogel, <span itemprop="actors">Frederick Lau</span>.</p> <a itemprop="trailer" href="https://www.youtube.com/watch?v=xBwj28sflL4">bandeannonce</a></div>
  18. 18. Associer des données distantes<div itemscope itemtype="http://schema.org/Movie" itemref="prize"> <h2 itemprop="name">La Vague</h2> <img itemprop="image" src="img/la-vague.jpg" width="160" height="210" alt="" /> <p itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">Note : <span itemprop="ratingValue">3.8</span>/<spanitemprop="bestRating">5.0</span> - <span itemprop="reviewCount">4856</span> avis</p> ...</div>...<p>Le film a reçu <span id="prize">le Grand Prix du jury au Festival de Sundance</span>.</p>intemref : placé au même niveau que itemscopevaleur de la propriété = identifiant du bloc contenant les données distantes
  19. 19. Associer des données distantes<div itemscope itemtype="http://schema.org/Movie" itemref="prize"> <h2 itemprop="name">La Vague</h2> <img itemprop="image" src="img/la-vague.jpg" width="160" height="210" alt="" /> <p itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">Note : <span itemprop="ratingValue">3.8</span>/<spanitemprop="bestRating">5.0</span> - <span itemprop="reviewCount">4856</span> avis</p> ...</div>...<p>Le film a reçu <span id="prize" itemprop="award">le Grand Prix du jury auFestival de Sundance</span>.</p>intemref : placé au même niveau que itemscopevaleur de la propriété = identifiant du bloc contenant les données distantes
  20. 20. Tester la validité du code‣ Rich Snippets Testing Tool http://www.google.com/webmasters/tools/richsnippets
  21. 21. Et itemid, dans tout ça ?‣ Utilité relativement restreinte prend comme valeur un identifiant unique permettant de distinguer l’objet sans doute possible code ISBN, visa d’exploitation par exemple
  22. 22. Récapitulons itemscope : racine de l’objet (booléen) itemtype : définit le type et les propriétés (via une url) itemprop : renseigne la nature de la donnée définit le contenu sauf en présence de data, href et src itemref : associe des données distantes valeur = identifiant du bloc de données itemid : identifiant unique affecté à l’objet exemple de microdonnées sémantiques : http://schema.org/
  23. 23. À vous de jouer ! Merci de votre attention Corinne Schillinger - @schillinger http://www.inseo.fr

×