Share
Il y a beaucoup de données sur le web. Comme beaucoup. Mais je suppose que les données les plus utiles aux masses, telles que les informations sur les personnes qu’elles doivent contacter ou les événements auxquels elles doivent participer, sont stockées en HTML, où il est difficile de les obtenir facilement. Alors, qui allez-vous appeler? Microformats tente de prendre en charge!
Prenons ceci du haut. Que sont les microformats? Sur la page d'accueil de microformats.org vient cette définition:
Conçus pour les humains d'abord et ensuite pour les machines, les microformats sont un ensemble de formats de données simples et ouverts construits sur des normes existantes et largement adoptées..
Un bon début, mais il nous faut un peu plus de précisions. Vous pouvez trouver toute une liste de définitions sur le site, mais voici le résumé: les microformats sont un ensemble de standards pour incorporer des données facilement extractibles sur vos pages, en utilisant des technologies avec lesquelles vous êtes à l'aise aujourd'hui. La grande partie de ceci est que vous avez probablement du contenu sur votre site maintenant que vous pouvez marquer avec un microformat. La partie encore plus importante est que cela ne vous prendra que quelques minutes après la lecture de ce tutoriel..
Alors pourquoi devriez-vous utiliser des microformats? Quel est l'incitatif? Eh bien, si vous êtes convaincu que HTML doit être sémantique juste parce que, alors les microformats vont cliquer avec vous. Sinon, je vais persuader: comme nous l'avons remarqué, l'idée des microformats est de standardiser les données de manière à les marquer sur une page, de manière à pouvoir les extraire facilement. Actuellement, il n'y a pas beaucoup d'outils qui tirent parti des microformats, mais je pense que cela va changer. L'utilisation de microformats dans votre travail préparera vos sites web pour l'avenir, lorsque les microformats seront beaucoup plus répandus. Encore une fois, le site web a une liste générale de ce que vous pouvez faire avec les microformats. Il existe déjà un bon addon Firefox pour extraire les microformats; ça s'appelle opérateur.
ensuite, Dan Web a créé une bibliothèque JavaScript simple appelée 'Sumo' qui extrait des microformats à utiliser avec JavaScript. Vous pouvez aussi essayer le bookmarklet des microformats.
Eh bien, si vous en êtes à ce stade, il est évident que vous et les microformats étaient faits l'un pour l'autre. Alors sautons à l'intérieur et regardons-en un. Mais auparavant, voici la structure générale des microformats que nous allons examiner: d’une manière générale, s’ils impliquent plus d’un élément dans notre code, ils utilisent des classes. S'ils ne sont concernés que par un élément, c'est généralement l'attribut rel qui est utilisé.
hCalendar est un moyen facile de marquer des événements. Nous allons commencer avec un élément qui déclare notre événement:
Si vous avez plusieurs événements, vous devriez les envelopper dans un div.vcalendar; Cependant, ce n'est pas nécessaire. Il existe deux propriétés requises pour un événement: la date de début (dtstart) et le récapitulatif. Ajoutons ceci:
Cette année, notre dîner de fête d'entreprise va commencer à 2009-12-18T17: 30.
Lisible par l'homme, hein? Pas cette date! Tu as raison; Bien que les microformats soient écrits en premier pour les gens, les dates sont un domaine dans lequel il est important que les ordinateurs puissent les lire. La convention habituelle serait d'écrire la date avec une balise abbr, auquel cas l'attribut title serait la valeur de la valeur de la propriété:
17h30 le vendredi 18 décembre.
Vous pouvez également ajouter d'autres propriétés facultatives. Que diriez-vous d'une heure de fin ou d'un lieu?
Nous nous rencontrerons dans le salle de conférence de l'hôtel Tower, que nous avons réservé jusqu'à 21h30.
En utilisant la barre d’opérateur dans Firefox, nous pouvons voir que cet événement est sur notre page. Nous pouvons travailler avec cela de plusieurs manières:
Si je choisis de l'exporter vers Google Agenda, il reprend parfaitement les valeurs que nous avons définies..
Pour plus d'informations sur hCalendar, consultez la documentation hCalendar.,
Passons à hCard; hCard est beaucoup plus compliqué que hCalendar, mais nous n'entrerons pas dans tous les détails. Si vous voulez lire plus tard, consultez la documentation.
Encore une fois, nous commençons par notre racine:
Pour hCard, il n'y a que deux propriétés requises; le nom (n) et le nom formaté (fn). Habituellement, il y a le même élément.
John Doe
Sans aller trop loin, je noterai que ce format implique que «John» est le prénom et «Doe» est le nom de famille. Si vous souhaitez spécifier cela, vous pouvez utiliser les classes prénom et nom de famille:
John Biche
Bien sûr, vous voudrez généralement ajouter plus que votre nom. Vous pouvez ajouter un surnom, une photo, une adresse électronique, une date de naissance, une URL, un numéro de téléphone et une adresse, pour ne nommer que ceux-ci..
JayDee
1er janvier 1980
Mon site internet123 rue principale
Toronto, Ontario M2W 4R5
Canada
Il y a quelques choses à noter ici:
En utilisant Operator, je peux exporter ceci en vcard…
… Et ouvrez-le dans Outlook.
Voir? Tout ce que nous avons défini est ici!
xFolk est un microformat en développement pour les marque-pages sociaux ouverts. De la docs:
L’absence de norme de données ouverte et interopérable est un problème majeur dans l’utilisation des services de bookmarking social. Un standard ouvert permettrait de collecter facilement des données de signets sociaux et de les remixer pour inventer de nouveaux services… Un standard ouvert permettrait également d'écrire des scripts Java qui fonctionnent sur plusieurs services comme certains le font actuellement pour del.icio.us, permettant ainsi de the-board amélioration de l'expérience utilisateur.
Pour implémenter xFolk, commencez par donner à chaque emballage de signets une classe de 'xfolkentry':
Ensuite, insérez le lien et une description en leur donnant les classes de 'taggedLink' et 'description', respectivement.
Accentsconagua
Nettuts, le meilleur blog de développement web sur la planète. Ouais, simple; Je peux imaginer que cela soit utile sur un rouleau de blog ou dans une rafle web. Pensez à un outil qui vous permettrait de mettre en signet tous ces liens à la fois..
XFN est un moyen simple de marquer les relations humaines. En utilisant l'attribut rel (qui est l'abréviation de relation) sur vos liens, vous définissez votre relation avec le propriétaire de la page vers laquelle vous créez un lien. Vous pouvez avoir une relation avec deux parties: d’autres personnes ou vous-même (ainsi, vos autres pages). Il est facile de définir d'autres pages que vous possédez:
Mes posteuses mes photos mes tweets
Assez simple, hein? rel = "moi" et vous avez terminé.
Les relations avec les autres personnes sont un peu plus détaillées, mais pas plus difficiles: Il existe six catégories d’options: amitié, physique, professionnelle, géographique, familiale, romantique. Je ne les énumérerai pas tous ici (une bonne idée serait d'essayer le créateur du lien), mais voici quelques exemples:
Dans le premier lien, vous pouvez voir à partir de l'attribut rel que j'ai rencontré le propriétaire de la page vers laquelle je me connecte et que je suis son ami. Vient ensuite mon épouse (hypothétique), qui se trouve être mon épouse et mon amour, ainsi que quelqu'un que j'ai rencontré et qui m'inspire. J'ai aussi rencontré le gars d'à côté, mais ce n'est qu'un ami et un voisin. Enfin, bien que mon collègue (encore hypothétique) soit un ami, notez que je ne l’ai jamais rencontré; cela serait décrit comme une relation virtuelle. Je devrais souligner que vous ne devriez pas utiliser XFN lorsque vous vous connectez simplement à un article de blog ou similaire; utilisez-le lorsque vous vous référez directement à une personne; son nom est donc le texte du lien et le href se dirige vers sa page d'accueil.
VoteLinks est une idée intéressante: lorsque vous créez un lien vers un article, une publication, un produit, n'importe quoi, ajoutez l'attribut rev. Tour? Rev est le contraire de rel; tandis que rel décrit ce qu'est la page liée à la page actuelle (comme un "ami" ou une "feuille de style"), rev décrit ce que la page actuelle représente pour la page liée. Avec VoteLinks, vous pouvez transformer votre page en "vote pour", "vote contre" ou "vote-abstention", quel que soit le lien que vous créez. Donc, par exemple:
Consultez notre article de blog de Collis sur la netsetter
J'ai eu un service terrible au Five Seasons Grill hier soir
Qu'est-ce que je pense de la refonte de son site?
Comment est-ce utile? Eh bien, imaginez si Google (et d’autres moteurs de recherche) tenait compte de VoteLinks lorsqu’il affichait des éléments. Actuellement, leur système (en gros) est le plus de liens, le plus de visibilité sur Google. Mais que se passe-t-il si la plupart de ces liens étaient des votes contre le produit ou la page? Ou que diriez-vous d'un site qui explore le Web à la recherche de VoteLinks et vous montre la popularité générale des pages? Tout est très spéculatif, mais cela pourrait être intéressant. Le problème est que beaucoup de gens doivent utiliser VoteLinks pour qu’ils aient un effet quelconque..
Geo est très simple. il a deux propriétés: latitude et longitude.
Pomme : (37.33171397409807 -122.03051626682281)
Envato: -37 ° 48 '45.1008 " 144 ° 58 '8,6736 ".
Comme nous l'avons vu précédemment, vous pouvez utiliser l'élément abbr pour masquer les valeurs réelles. Et bien sûr, l'opérateur reconnaît ces.
Si vous avez déjà publié quelque chose au public, vous savez que vous devez lui attribuer une licence. Vous pouvez attribuer à l'attribut rel d'un lien la valeur de 'licence' lors de la liaison à la documentation de la licence..
cc par 2.0
À quoi ça sert? Déjà Yahoo Creative Commons Search et Google Usage Right Search utilisent tous les deux l'attribut rel = "license" dans leurs algorithmes.
C’est un projet intéressant, car chaque blogueur marque ses messages. Pour ce microformat, ajoutez simplement rel = "tag" à vos liens de tag et soyez prêt. Maintenant, en utilisant notre add-on Operator, nous pouvons voir le contenu d’autres sites avec les mêmes tags. Il est important de noter que le nom de la balise provient du href du lien et non du texte du lien. Donc, dans l'exemple suivant…
Script côté client
… La balise est 'javascript' et non pas 'script côté client'.
Nettuts a implémenté ce microformat; mais vous saviez déjà que si vous avez un opérateur!
Une autre balise simple mais efficace: l’ajout de rel = "nofollow" à un lien est conçu pour empêcher le lien d’affecter le classement de votre page dans les moteurs de recherche. Bien entendu, le moteur de recherche doit l'implémenter, et Google, Yahoo et Bing l'ont déjà fait. Il serait idéal d’ajouter cela à tous les liens dans les commentaires de blog, afin qu’ils n’affectent pas votre site et ne reçoivent aucun crédit pour leurs propres.
Nous avons brièvement couvert un bon nombre de microformats; mais la question demeure: valent-ils votre temps? Pas avant de commencer à les utiliser! Les microformats sont conçus pour faciliter la récupération de page de données, mais tant qu’ils ne seront pas largement utilisés, ils ne disposeront pas de très nombreux outils. Bien que beaucoup d’entre elles puissent sembler inutiles à présent, nous espérons qu’elles seront partout dans quelques années. Lorsque cela se produira, les outils pour les utiliser seront disponibles. Les microformats valent vraiment votre temps: si faciles, si peu coûteux, si potentiellement puissants.
Voulez-vous implémenter des microformats dans vos sites??
J'ai caché un microformat dans ce tutoriel; peux-tu le trouver?
