Remerciez-le!

Remerciez @Admin pour avoir partagé cet document gratuitement, de la manière la plus simple, en partageant sur les réseaux sociaux.

Le guide ultime des microformats : références et exemples Par SÃ©bastien Poudat

Le guide ultime des microformats : références et exemples Par SÃ©bastien Poudat Date de publication : 16 juillet 2011 Dernière mise à jour : 5 janvier 2016 Durée : 1 heure Si le concept POSH (Plain Old Semantic HTML) ne vous est pas familier, la première chose à savoir c'est que produire du code sémantique, qui reflète la valeur du contenu textuel (en plus de la mise en forme), est une composante critique du processus de conception Web. Alors que le HTML dispose d'une kyrielle d'éléments par lesquels le contenu prend du sens, une foultitude de microformats (conventions) ont été créés pour mieux représenter les données qui composent votre page. Commentez Le guide ultime des microformats : références et exemples par SÃ©bastien Poudat I - Les microformats, c'est quoi ?................................................................................................................................3 I-A - Les avantages des microformats...................................................................................................................4 I-B - Les inconvénients des microformats............................................................................................................. 4 II - Tableau de référence des microformats................................................................................................................ 5 II-A - Les valeurs de l'attribut rel........................................................................................................................... 6 III - Utiliser les microformats : exemples.....................................................................................................................6 III-A - Adr................................................................................................................................................................7 III-B - Geo...............................................................................................................................................................7 III-C - hAtom...........................................................................................................................................................7 III-D - hAudio.......................................................................................................................................................... 8 III-E - hCalendar.....................................................................................................................................................8 III-F - hCard............................................................................................................................................................9 III-G - hListing.......................................................................................................................................................10 III-H - hMedia........................................................................................................................................................11 III-I - hNews..........................................................................................................................................................11 III-J - hProduct......................................................................................................................................................12 III-K - hRecipe...................................................................................................................................................... 12 III-L - hResume.....................................................................................................................................................13 III-M - hReview..................................................................................................................................................... 14 III-N - Rel..............................................................................................................................................................15 III-O - Robot Exclusion Profile............................................................................................................................. 15 III-P - VoteLinks....................................................................................................................................................15 III-Q - XFN............................................................................................................................................................16 III-R - xFolk...........................................................................................................................................................16 III-S - XMDP......................................................................................................................................................... 16 III-T - XOXO......................................................................................................................................................... 17 IV - Conclusion.......................................................................................................................................................... 17 V - Remerciements....................................................................................................................................................17 - 2 - Copyright ® 2011-2016 Sébastien Poudat. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts. https://web-semantique.developpez.com/tutoriels/microformats/guide/ Le guide ultime des microformats : références et exemples par SÃ©bastien Poudat I - Les microformats, c'est quoi ? Bien qu'ils ne fassent pas partie des spécifications HTML du W3C, ils offrent un assortiment utile de conventions de nommage (en utilisant les attributs class, id, rel et rev) qui identifient les points d'intérêt sur une page. Ils permettent de mettre en avant du contenu, tel que les événements de calendrier, un lien vers l'acceptation de vos licences (dont la GPL) et même des choses plus légères telles que les recettes de cuisine. Si les microformats ne font pas encore partie du standard W3C, les navigateurs Web n'ont pas attendu pour en assurer le support. Les microformats valent vraiment la peine d'y porter un intérêt et de les implémenter dans les sites que vous réalisez. Le site officiel des microformats dispose d'un wiki et d'un forum et metdifférents outils à votre disposition. Vous utilisez peut-être déjà les microformats si vous utilisez un CMS tel que WordPress, car ce dernier supporte nativement des formats de données simples, comme l'attribut rel. Si vous êtes nouveau dans l'univers des microformats, vous vous demandez certainement pourquoi vous devriez vous embêter à les utiliser. Il y a certes des avantages et des inconvénients, mais tout ce qui aidera votre site à être mieux compris par les robots (spiders, crawlers) qui indexent vos pages vaut bien cet effort supplémentaire, non ? - 3 - Copyright ® 2011-2016 Sébastien Poudat. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts. https://web-semantique.developpez.com/tutoriels/microformats/guide/ Le guide ultime des microformats : références et exemples par SÃ©bastien Poudat De tous les microformats, rel=« nofollow » est probablement le plus connu. Parce que les microformats s'appuient sur la syntaxe et les attributs conventionnels du HTML, vous pouvez les utiliser aussi en XHTML. Même les pages XML (comme les flux RSS ou ATOM) peuvent profiter des microformats. Cela accroit ainsi leur utilisation potentielle. Ils se combinent également très bien avec le RDFa et les autres métadonnées. I-A - Les avantages des microformats 1 Ils améliorent la valeur sémantique de votre contenu. 2 D'autres applications Web peuvent les utiliser pour découvrir les contenus de votre site. Ils peuvent également servir d'interface avec vos données. 3 Les réseaux sociaux les implémentent dans les profils utilisateurs pour que des services tiers puissent interagir avec eux. 4 Des extensions de navigateurs existent pour donner aux utilisateurs l'accès aux données contenues dans les microformats. Par exemple, Michromeformats est une extension Google Chrome qui découvre pour vous les microformats embarqués dans une page web. 5 Les robots (comme Googlebot) les utilisent pour l'indexation des sites. I-B - Les inconvénients des microformats 1 Ils nécessitent davantage de code HTML. 2 Ils sont encore une chose que vous devez apprendre et maintenir. 3 Ils existent pour relativement peu de types de données. 4 Ils attirent l'attention sur vos contenus (qui peuvent être data minés). 5 Les navigateurs ne les supportent pas uniformément. - 4 - Copyright ® 2011-2016 Sébastien Poudat. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts. https://web-semantique.developpez.com/tutoriels/microformats/guide/ Le guide ultime des microformats : références et exemples par SÃ©bastien Poudat L'extension Operator pour Firefox détecte les microformats et les rend lisibles. Le microformat hCard permet aux extensions Firefox telles que Tails Export de découvrir et de s'interfacer avec la carte de visite virtuellede quelqu'un. II - Tableau de référence des microformats Chaque microformat a un but unique de présenter un certain type d'informations et tous sont potentiellement utiles en fonction de vos besoins. Bien que vous pourriez trouver des informations exhaustives sur le site des microformats, voici un récapitulatif rapide de ce qu'on y trouve : - 5 - Copyright ® 2011-2016 Sébastien Poudat. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts. https://web-semantique.developpez.com/tutoriels/microformats/guide/ Le guide ultime des microformats : références et exemples par SÃ©bastien Poudat Nom But ADR Marquer une adresse postale. Geo Marquer une position géographique. hAtom Ajouter du contenu syndicable. hAudio Décrire un podcast ou un fichier audio. hCalendar Marquer un événement ou lister du contenu par date (concerts, spectacles…). hCard Exploiter les contacts d'affaires ou personnels (carte de visite). hListing Lister des biens et des services. hMedia Lister des médias. hNews Utilise hAtom pour les nouvelles journalistiques. hProduct Embarquer des informations supplémentaires sur un produit. hRecipe Marquer des recettes de cuisine. hResume Présenter les expériences d'un CV. hReview Avis et notes de produits et services. rel L'attribut rel est un microformat pour les éléments HTML, quelques exemples populaires : rel=« license », rel=« nofollow », rel=« tag », rel=« directory », rel=« enclosure », rel=« home », rel=« payment ». Robot Exclusion Profile Donner des instructions aux robots. VoteLinks Fournir des options pour aimer ou ne plus aimer un lien. XFN Décrire une relation avec un site Web. XFolk Lister des liens favoris. XMDP Ajouter des ressources sur le profil d'une page. XOXO Mettre en avant un document ou une liste d'objets. II-A - Les valeurs de l'attribut rel Pour compléter le tableau ci-dessus, voici une description des valeurs de l'attribut rel (raccourci de relationship) : • license : identifie les accords de licences (tel que Creative Commons ou GPL) sur une page ; • nofollow : indique aux moteurs de recherche de ne pas ajouter de poids ou de valeur à la ressource liée ; • tag : applique des mots-clés aux liens pour construire un nuage de tags ou de catégories ; • directory : indique une liste dans un répertoire (comme un dossier) sur le site courant ; • enclosure : pour les liens qui pointent vers des fichiers téléchargeables ; • home : fournit un lien permanent vers la page d'accueil d'un site ; • payment : indique si un lien pointe vers une page de paiement ou d'achat. III - Utiliser les microformats : exemples Recommander d'utiliser les microformats, c'est bien, mais fournir des exemples, c'est mieux ! Nous allons voir ensemble quelques exemples pour chaque microformat qui peut être implémenté sur votre site. - 6 - Copyright ® 2011-2016 Sébastien Poudat. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts. https://web-semantique.developpez.com/tutoriels/microformats/guide/ Le guide ultime des microformats : références et exemples par SÃ©bastien Poudat Pour commencer, le concept-clé à comprendre : un microformat s'identifie par un bout de donnée contenu dans l'attribut de class ou id d'une balise HTML. La balise peut jouer un uploads/Finance/ guide-microformat.pdf