• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Ajoutez du sens à vos pages avec les microdonnées (Sud Web 2012)
 

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

on

  • 1,627 views

 

Statistics

Views

Total Views
1,627
Views on SlideShare
1,468
Embed Views
159

Actions

Likes
3
Downloads
10
Comments
2

5 Embeds 159

http://www.scoop.it 108
http://lanyrd.com 34
http://us-w1.rockmelt.com 8
http://www.twylah.com 8
http://seenthis.net 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NonCommercial LicenseCC Attribution-NonCommercial License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

12 of 2 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • @jpyrat : les microdata font partie de la spec HTML : http://www.whatwg.org/specs/web-apps/current-work/multipage/microdata.html

    Rappel : la validité n'est pas une fin, juste une aide.
    Are you sure you want to
    Your message goes here
    Processing…
  • Qu'en est-t'il de la validité W3C des pages avec ces microdonnées ?
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

    • 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 sur des attributs inappropriés
    • 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
    • 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>
    • 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
    • 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é
    • 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
    • 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.
    • 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.
    • 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.
    • 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.
    • 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.
    • 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.
    • 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 »
    • 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>
    • 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>
    • 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>
    • 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
    • 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
    • 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 distinguer l’objet sans doute possible code ISBN, visa d’exploitation par exemple
    • 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/
    • À vous de jouer ! Merci de votre attention Corinne Schillinger - @schillinger http://www.inseo.fr