Oomph : Boîte à Outils Microformats 1° novembre 2008 Je vais faire une pause rapide (promis) de ma série "Parvenir à la Sémantique avec les Microformats parce que j'en ai besoin, et je voulais passer un peu de temps à jouer avec et à évaluer la boîte à outils microformats de Oomph sortie cette semaine sur MIX Online. Ainsi, vous (mes chers lecteurs adorés), bénéficierez encore des bienfaits des microformats, et ça me permet de faire une pause sérieuse sur la recherche intense et l'écriture déjà produite. On y va, ok ?
Oomph ? Ce que c'est ? Oomph est une boîte à outils destinée aux designers et développeurs pour faciliter l'implémentation des microformats. Non seulement c'est un nom vraiment cool (bon, plus cheesy que cool), mais y'a de bons trucs : * Une surcouche jQuery inter‐navigateurs qui agrège et exporte les microformats * Une extension Internet Explorer qui agrège et exporte les microformats * Un ensemble de CSS pour styliser les microformats * Une extension Windows Live Writer pour générer de l'information hCard Et dans l'esprit de collaboration et d'extension, la boîte à outils est sur CodePlex, le site d'hébergement des projets open source de Microsoft. Tout cela semble vraiment bien, non ? Hé, pour moi aussi. Aussi, j'ai dû passer un peu de temps avec Oomph pour vraiment voir si je devais l'utiliser pour moi‐ même..
Surcouche Inter‐Navigateurs jQuery
La première partie de Oomph que je voulais vérifier était la surcouche jQuery, qui ne pourrait pas être plus simple à ajouter à un site. Juste deux lignes dans le <head> des pages qui contiennent des microformats si vous faites appel à la librairie jQuery (ce que je fais) : <script type="text/javascript" src="https://visitmix.com/labs/oomph/1.0/Client/jquery1.2.6.min.js"></script> <script type="text/javascript" src="https://visitmix.com/labs/oomph/1.0/Client/oomph.min .js"></script> Ce que ça vous donne ? Bon, si vous lisez l'article sur mon blog (à l'inverse du fil RSS) dans un navigateur, jetez un oeil dans le coin tout en haut et à gauche. C'est la "gleam" Oomph (oui, le nommage est sérieusement pauvre) :
icône jQuery microformats Oomph
Cette petite icône est générée par le jQuery et indique qu'il y a des microformats (hCard et/ou hCalendar) sur la page. Si cette icône est sélectionnée et cliquée, la surcouche s'affiche en :
surcouche jQuery microformats de Oomph
La surcouche affiche l'information hCalendar sur la gauche et l'information hCard à droite. Si le jQuery détecte plus d'un hCalendar ou hCard sur la page, il affichera les liens "Next" et "Prev" pour progresser vers les autres ensembles d'information.
Export des Microformats
Il fournit aussi une large gamme d'options d'exportation (qui fonctionnent toutes) pour hCalendar : * Agenda Google * Apple iCal * Agenda Yahoo! * Outlook
* 30 Boxes * Windows Live Tout comme pour hCard : * Carnet d'Adresses Apple * Outlook * Carnet d'Adresses Yahoo!
Cartographie
Une autre fonctionnalité intéressante est que la surcouche fournit une option pour visualiser l'information adr contenue dans hCalendar ou hCard sur une carte via Virtual Earth de Microsoft : carte jQuery microformats Oomph Pas Complètement Compatible‐Tous‐Navigateurs J'ai testé la surchouche jQuery Oomph sur tous les navigateurs auxquels j'ai accès : * Firefox (Mac/PC) * Safari (Mac/PC) * Opera (Mac/PC) * Camino * IE7 * IE6 Safari pour PC n'Aime Pas C'est fonctionnel sur tous les navigateurs hormis Safari pour PC.
L'icône Oomph apparaît bien, mais je n'ai pas pu extraire la surcouche dans Safari sur mon PC. IE6 est une Salope (Bien sûr) Si vous étiez amené(e) à visualiser cet article dans IE6 (mais pourquoi feriez‐ vous ça sur terre !), vous devrez scroller tout en bas de la page pour voir cette petite icône. Et puis il flingue complètement la mise en page de mon pied de page. Pourquoi ? Parce que IE6 fait tout sauter et vous devez le mettre à jour. Maintenant. Néanmoins, les développeurs de Oomph ont noté que les conflits d'affichages (pas explicitement en rapport avec IE6) peuvent être résolus en modifiant le positionnement dans la CSS Oomph (ou peut‐être en la neutralisant avec une plus grande spécificité dans ma propre CSS).
Quelques Problématiques
Pendant que je jouais avec la surcouche jQuery, j'ai remarqué quelques problématiques. Relativement mineures, et elles seront probablement résolues au fur et à mesure de l'évolution du projet. Valent néanmoins la peine d'être mentionnées : Email dans la hCard Pour les microformats hCard, l'agrégateur jQuery ne capte pas la bonne information pour le lien de l'e‐mail (<a class="email">) dans une hCard. Il semble qu'il extrait le contenu s'affichant dans le navigateur plutôt que la valeur href="mailto:". Ainsi, si dans votre hCard vous avez quelque chose de ce type (ce que je fais) : <a class="fn email" href="mailto:emily@ablognotlimited.com">Emily Lewis</a>
L'agrégateur hCard jQuery capte "Emily Lewis" comme mon adresse e‐mail, plutôt que "emily@ablognotlimited.com". URL dans les hCalendar & hCard Tant pour le microformat hCalendar que la hCard, l'agrégateur jQuery semble incohérent avec l'URLs. Il reconnaît la valeur URL pour un événement hCalendar sur mon site, mais pas pour un hCalendar différent. Idem avec les hCards. J'ai validé toutes les instances de hCard et hCalendar sur ce blog, et confirmé aussi que les autres agrégateurs reconnaissaient les URLs de manière cohérente. Je ne suis pas complètement certaine des différences en cause avec ce problème. Et je n'ai ni le temps ni l'intérêt pour m'y pencher.
Chargement de Page
Depuis l'ajout du jQuery Oomph sur mes pages, j'ai remarqué un délai de 2‐3 secondes dans mes chargements de pages sur ma connexion câble à haut débit. Cela semble négligeable, mais j'ai remarqué ça, et ce n'est pas quelque chose que je repère normalement. Je suis en train d'appeler le JS Oomph à partir du serveur visitmix, qui appelle alors la CSS Oomph à partir de ce serveur. Mais je n'ai pas la moindre idée (et ce n'est même pas proche de quelque champ de connaissance en ce qui me concerne) si la vitesse de chargement de la page s'accélérerait si je l'hébergeais moi‐même.
Extension Internet Explorer
Maintenant, passons à l'extension IE de Oomph. Avant que je n'embête quelqu'un avec l'extension, j'ai d'abord retiré tous les jQuery Oomph sur mon site, de façon à ne pas mélanger les deux. Parce que, selon Oomph, la fonctionnalité serait la même. Ensuite, j'ai téléchargé le fichier d'installation et l'ai fait tourner. Cela m'a pris environ une minute. Simple.
Puis j'ai lancé IE7. Voilà, l'icône lueur de Oomph est apparue dans le coin tout en haut à gauche, tout comme avec le jQuery. Quand j'ai cliqué sur la lueur, la surcouche est apparue, et tout le contenu agrégé était le même que celui avec le jQuery : * Les informations hCalendar et hCard se sont agrégés * L'exportation des liens tant pour hCalendar et hCard étaient disponibles et fonctionnaient * L'information cartographique était disponible pour le contenu adr
Le Problème : IE6
Parce que j'aime me torturer, j'ai regardé l'extension sur IE6. Et tout comme avec jQuery, l'extension s'affiche en bas de la page de mon site. Et tout comme avec le jQuery dans IE6, l'extension démontait la mise en page de mon pied de page. Néanmoins, pas à la hauteur ce que le jQuery faisait. Heureusement pour moi, ce sont des non‐problèmes, parce que je pense IE6 comme un non‐navigateur et je ne le supporte pas pour mon blog. Un problème spécifique à IE6 qui m'ennuie du point de vue de la perspective d'utilisabilité : s'il existe plusieurs instances de hCard sur une page, le fait de cliquer sur les liens "Next" ou "Prev" réinitialise le focus de la page au sommet. Aussi, l'utilisateur doit ensuite scroller tout en bas pour voir l'information de la surcouche. Problématiques A part les problématiques d'IE6, la fonctionnalité d'extension était belle. Même si elle a les mêmes problématiques notées avec le jQuery de Oomph : * agrégation incorrecte de l'information d'e‐mail pour hCard * agrégation incohérente de l'information d'URL pour hCalendar et hCard
Jeux de CSS
L'une des choses les plus brillantes, je pense, à propos de Oomph est que la boîte à outils comprend des ensembles de CSS pour styliser l'information hCard et hCalendar. C'est vraiment tout à fait brillant, parce que les microformats utilisent un ensemble standard de valeurs de classes, les rendant ainsi idéal pour les ensembles de CSS et gabarits. Voici quelques aperçus des différents styles en action, avec un exemple de hCard sur la gauche ; l'exemple de hCalendar à droite : Coins Arrondis Clairs Oomph CSS ‐ Light Rounded Corners Coins Arrondis Sombres Oomph CSS ‐ Dark Rounded Corners Coins Arrondis Bleus Oomph CSS ‐ Blue Rounded Corners Notebook Oomph CSS ‐ Notebook Grunge Oomph CSS ‐ Grunge Basic Dark Celui‐ci est livré avec des options fixed‐ et auto‐width options: Oomph CSS ‐ Basic Dark
Problématiques ? Pas Vraiment.
J'ai pris ces exemples dans tous mes navigateurs et ils sont tous restitués de façon relativement cohérente (avec les problématiques attendues dans IE6).
D'un point de vue légèrement négatif, je ne peux pas dire que je sois vraiment fan de la manière dont la CSS a été écrite en elle‐même. Pas assez raccourcie pour mes préférences. Ceci étant dit, la CSS est bien commentée, aussi, il serait très facile de travailler avec et de la transformer. La seule autre chose qui me gêne légèrement moins à propos des ensembles de CSS est qu'elles s'appuient sur une façon commune/cohérente de baliser les microformats. Personnellement, j'applique les microformats sur la totalité de mon blog (tout spécialement hCard), aussi le balisage varie selon le contexte. Dans ce type de situation, les ensembles de CSS ne pourraient pas être utilisés tels quels. Il devrait y avoir quelque modification. Mais, même si vous n'utilisez pas ces styles, ils fournissent de très belles inspirations pour ce qui peut être pratiqué avec du contenu microformaté. Comme je l'ai toujours dit, styliser les microformats ne se limite qu'à vos talents CSS.
Extension Windows Live Writer hCard
Je n'utilise pas Windows Live Writer, mais j'ai voulu voir comment l'extension Oomph fonctionnait, aussi je l'ai installé... Pas l'intention de faire quelque commentaire sur Windows Live Writer, mais l'extension Oomph hCard a été facile à ajouter et à utiliser. J'ai simplement téléchargé, installé et fait tourner le fichier install, et l'option est apparue dans ma liste de plug‐ins :
Oomph Live Writer hCard Plug‐In
L'extension vous offre un formulaire pour saisir l'information de contact : Oomph Live Writer hCard Entry Form
Et puis vous propose de l'ajouter à votre page Live Writer : Oomph Live Writer hCard Generated Content J'ai jeté un coup d'oeil à la source : <div class="vcard"><img class="photo" style="float: left; margin‐right: 4px" alt="photo of Emily Lewis" src="http://www.ablognotlimited.com/images/emilyLewisThumb.jpg"><span class="fn n"><span class="given‐name">Emily</span> <span class="additional‐ name">Paige</span> <span class="given‐family">Lewis</span> </span> <div><a class="email" href="mailto:emily@ablognotlimited.com">emily@ablognotlimited.com</a></d iv> <div class="adr"><span class="locality">Albuquerque</span>, <span class="region">New Mexico</span> <span class="postal‐ code">87106</span><div><a class="url" href="www.ablognotlimited.com">www.ablognotlimited.com</a></div></div> Parfaitement acceptable et valide. Bien que j'aurais préféré personnellement un marquage indenté et mis en forme, pour ne pas dire plus sémantique. Et j'aurais préféré qu'il ne génère pas les styles dans la ligne. Et je n'aime pas les "divitis." Mais c'est juste moi. Ainsi ceci me semble être un outil génial pour les utilisateurs de Live Writer, bien que je ne sois pas trop sûre de combien y'en a t'il. Je ne savais même pas ce qu'était Live Write jusqu'à ce que je teste cette extension. Le Mot de la Fin Pour conclure, j'adore les microformats, aussi suis‐je une fan de Oomph. Je crois que tout ce qui tente non seulement de passer le mot concernant les microformats, mais de faire en sorte que ce soit plus facile à implémenter et utiliser est une bonne chose. Extension hCard
Personnellement, je ne me vois pas utiliser le hCard creator. Essentiellement parce que je n'utilise pas Live Writer. Mais même si je l'utilisais, j'aime coder à la main. Je n'utilise pas ici quelques‐uns des créateurs. Aussi ce n'est pas une charge contre Oomph.
Jeux de CSS
Je ne me vois pas utiliser les CSS. Mais à nouveau, parce que j'ai une tendance (une que j'essaye de casser) à vouloir styliser les choses moi‐même. Je n'utilise même pas les frameworks CSS ici.
Extension IE
Tout comme pour l'extension IE, je vais la conserver sur mon portable DELL de travail. Cela ne semble pas abîmer quoi que ce soit, et cela me dit quand des microformats sont sur une page. Parce qu'il manque à IE la plupart des extensions navigateurs agréables que j'utilise pour dire quand des microformats sont présents, ceci m'est utile. jQuery Pour finir, le jQuery Oomph, Je vais le conserver pour le moment. Au minimum, si vous lisez cet article sur mon blog, j'aimerais pouvoir le voir en action. Je pense aussi que je pourrais détruire la CSS Oomph pour faire en sorte qu'elle soit un peu plus jolie et peut‐être même avoir quelque coopération avec IE6.
Oomph = Boîte à Outils Utile
C'est sans aucun doute une addition utile sur mon blog, et cela dit à tous les utilisateurs qu'il y a des microformats. Ceci est tout particulièrement cool pour ces utilisateurs qui ne savent pas ce qu'ils sont et qui n'utilisent pas les extensions navigateurs qui leur disent quand des microformats sont sur une page. Et pour finir en ce qui me concerne, cece ne fait que promouvoir les microformats.
Oomph y parvient.