Cette année, j’ai décidé de participer à toutes les conférences qui ne sont pas au cœur de mon activité quotidienne, au sens production. En gros, j’ai voulu laisser tomber tous les buzzwords et me concentrer sur des compétences et connaissances périphériques à activité. Satisfaire ma curiosité.

Je suis donc arrivé à Paris Web sans avoir regardé le programme, en décidant entre chaque pause le titre de la conférence que j’allais inscrire sur mon carnet de notes.

L’ouverture par l’architecture

Ce n’est pas tout à fait vrai : je savais quelle était la première conférence à laquelle j’allais assister. Graine semée il y a 2 ans, dans le retour en métro de Paris Web 2008. J’apprenais que Fabien Basmaison partait 1 année entière en Chine (ou ailleurs en Asie ?).
Absent de Paris Web 2009, il propose « Espace construit et espace virtuel, un retour vers le futur ?«  en guise d’introduction.

Ou comment ne pas parler de Web mais d’architecture, de construction et d’alliage fonctionnel/esthétique.

Il citait d’ailleurs une phrase que j’apprécie beaucoup : l’architecture, c’est savoir changer d’échelle, de point de vue. Je me plais à appliquer ce moto au quotidien mais au fond, n’est-ce pas là une chose essentielle pour toute personne travaillant dans le Web ? Savoir sortir le nez du cambouis, observer ce qui l’entoure, s’en inspirer et replonger/changer d’angle d’attaque.

L’architecture, c’est également réduire les obstacles pour obtenir davantage de fluidité, et augmenter le rendement. C’est la raison d’être des méthodes agiles, comme scrum. Parce que notre défi, c’est réussir un projet sur une base qui est tout sauf industrialisée (voire industrialisable).

L’architecture, c’est travailler sur un patrimoine, ensemble, en utilisant l’existant (cf. Let’s Interface!). On ne peut créer un ouvrage sans tenir compte de l’existant, de l’environnement ou même de l’intérêt même du-dit ouvrage. On ne peut décemment pas concevoir un site Web optimisé pour Internet Explorer 6 et une résolution de 1024×748, ce serait juste omettre/nier l’existence du Web tout entier.

Paris Web est un moment où l’on s’ouvre l’esprit : cette conférence était programmée au bon moment, avec le bon intervenant mais surtout avec le bon contenu. Quelque chose qui n’était pas axée sur le Web. Celui qui replace le Web dans son contexte, celui de l’inspiration.

Conseil livre : de Le Corbusier.

Let’s Interface!

Christian Heilmann me fascine littéralement. Il a le don d’arriver à insuffler ce qu’il recherche : du fun et de l’intelligence.
Si je devais résumer cette conférence en une phrase, ça serait la sienne : le Web est un outil, utilisons-le. On ne construit pas pour le Web, on construit avec le Web.

C’est la transcription parfaite de l’architecture vers le Web. Tenir compte de l’existant, des outils, pour construire les siens et arrêter de réinventer la roue.

Les interfaces devraient être des outils faciles à utiliser, et à comprendre. De l’accessibilité au sens large en somme.
De quoi insister auprès des clients de ne pas perdre de vue l’objectif principal ? L’utilisateur ?

L’accessibilité dans une chaîne de production Web

Quel meilleur moyen de ne pas perdre ses objectifs de vue en effectuant un contrôle qualité, matérialisé par une vérification de l’accessibilité à toutes les étapes du processus, plutôt qu’en livraison finale. C’est le point de vue de Denis Boudreau et de Vincent François.

Pourquoi la fin de chaîne pose problème ? Tout simplement parce qu’il est (souvent) déjà trop tard, que le coût des modifications en est multiplié mais surtout, c’est beaucoup plus simple d’intégrer ça dès le départ.
Si on en revient à l’architecture, c’est comme si on mettait des fenêtres à 2 mètres de hauteur et qu’on se rendait compte à la livraison de la maison que ce n’est pas accessible car trop en hauteur pour les habitants. Vous vous voyez casser le mur et descendre la fenêtre ?

Leur présentation de l’accessibilité dans une chaine de production Web, navigable au clavier et à la souris, est équivoque et découpe ces différentes phases au sein du projet :

• Analyse
• Architecture
• Ergonomie
• Graphisme
• Prototypage
• Rédaction
• Développement
• Contrôle qualité

Le liant entre ces phases étant la gestion de projet, menée de concert entre la maîtrise d’oeuvre et la maîtrise d’ouvrage. Une personne a même très justement souligné qu’il faudrait ajouter une nouvelle dernière étape, la livraison/maintenance. Pour s’assurer notamment qu’à l’usage, lors de la contribution ou des évolutions de l’application, l’accessibilité soit maintenue à niveau.

Innover de 9 à 5

Je m’intéresse à l’innovation, pas seulement à la théorie mais également à sa mise en pratique, depuis que je vois passer sous mon nez des projets intéressants mais qui oublient toujours une chose. Les usagers (tiens, on y revient). Un site est réalisé par une entreprise, pour accomplir un but (besoin marketing, nouveau produit ou autre) mais … la praticité et l’intérêt de l’usager, bien souvent, y sont absent ou trop peu représenté.

J’y reviendrai dans d’autres articles, par le biais de mes lectures et de mes projets.

Toujours est-il, j’ai découvert une autre personne de Phéromone, Olivier Théreaux. Il a présenté de manière méthodique les différents types d’innovations possibles (business, design, incrémentales, radicales). Leur mélange provoque de l’efficacité, une amélioration des processus, de nouveaux produits, une découverte de nouveaux besoins et j’en passe.

Le travail de l’innovation, ce n’est pas seulement l’acquisition de l’idée : c’est l‘art de la faire fructifier, de la mettre concrètement en oeuvre.
En ce sens, il cite Scott Berkun : les gens ne veulent pas innover, ils veulent avoir innové. N’avez-vous jamais entendu de client qui vous demandait une application iPhone sans savoir ce qu’ils voulaient y mettre ? La réponse est dans la citation.

Innover, c’est apprendre à échouer. C’est admettre que des fautes seront commises et que la réussite se mesure également en terme de ressources : elles doivent être à la mesure des ambitions. L’amplitude entre les 2 augmente les risques d’échec.

Olivier soulignait aussi un détail essentiel, qu’on oublie un peu et qui pourtant caractérise tellement notre métier, notre univers : c’est la culture hacker. Hacker au sens bidouilleur. Celui qui parvient à ses fins en se servant d’outils à disposition. LE Web est à notre disposition.

Encore une fois, les personnes les plus fascinantes ne sont pas celles qui apportent de nouvelles choses ou qui sont les « meilleures ». Mais celles qui apportent un regard différent, de par leur(s) culture(s), leur expérience et leur vécu.

Conseil lecture :  de Scott Berkun.

Journey over Destination: creating an effective framework with UX tools

J’ai malheureusement été moins attentif sur la conférence de Stéphanie Troeth (projet client à régler, à croire que chaque année j’y coupe pas ;-(). Néanmoins, à la lecture de ses slides pendant sa présentation, une chose m’avait frappé : tout est clair, limpide et extrêmement synthétique. Sans le son, il y avait de quoi apprendre. C’est d’ailleurs comme ça que je me suis aperçu que la méthode employée lors de mon atelier technique (dont vous pouvez lire l’annonce ; le détail et résumé arrivent) était en fait de l’interactive design.

L’expérience utilisateur repose avant tout sur la conception, du site, de l’outil ou de je ne sais quoi (le concept s’applique à tout, pas seulement au Web). Encore une fois, l’agilité du processus, la fragmentation des tâches et les contraintes (limites de temps, de fonctionnalités etc.) sont un élément essentiel à la qualité du résultat final.

L’exemple le plus parlant est celui du curseur : tirer d’un côté enlève du poids à l’extrême opposé. De même que parmi la trinité temps, argent, fonctionnalité, on ne peut en conserver que 2. Lesquels choisiriez-vous au moment d’acter un choix ? Que diraient vos clients ?

Notre conversation en off m’a confirmé mon intuition : sa présentation représente des mois de réfléxion, au fil de l’eau. Tiens, ce n’est pas justement le concept de l’innovation ?

La typographie comme outil de design

Encore un petit nouveau à Paris Web : David Rault. Encore un globetrotter, à croire que ça va devenir un élément déterminant sur le CV

La typographie, de mémoire, est un sujet qui a été peu abordé à Paris Web, en tous cas pas lors de conférences. Je m’y connaissais assez peu et le moins que je puisse en dire, c’est que je suis resté le regard rivé sur la scène, à noter avec délectation cet enseignement, fort souvent un choix par défaut. On va utiliser quelle typo ? Oh bof, de l’Arial ou du Verdana.

Quelques explications sur la classification typographique, et hop, tout devient plus clair quant aux termes serif, sans-serif, linéales, humanes, garaldes, romaines etc. Je ne paraphraserai pas cette classification.

En revanche, retour à l’architecture, c’est tout le bagage culturel que les polices de caractères véhiculent. Sans oublier leur base historique et sociale. Je n’imaginais pas utiliser sur un ordinateur une police datant du XVI^ème siècle, considérée comme parfaite.

En considérant que le Web, c’est 95% de typographie (ce que l’on lit), ce n’est clairement pas le choix banal que l’on a l’habitude de faire, ou de subir. Je rajoute cette notion aux indispensables à réunir pour réussir un projet, par le biais de la communication écrite.

Conseil lecture : de David Rault.

La macrotypographie de la page Web

On reste dans l’univers de la communication visuelle avec Anne-Sophie Fradier. L’occasion d’ailleurs de me rendre compte que j’avais déjà lu son blog auparavant, et que je le découvre juste maintenant, à l’occasion de la rédaction de cet article Le Web est petit et on se connait plus facilement en avatar en fin de compte.

Macrotypographie vous dites ? Il s’agit de concevoir la typographie au niveau du paragraphe, de la page, par le biais de grilles, de colonnes, leur ratio etc. C’est forcément une personne bien puisque les grilles, elle adore et en mange au petit-déjeuner mais surtout, a eu une réponse extra à ma question (oui j’ai posé beaucoup de questions, je sais ) : les grilles apportent-elles une contrainte qui brident la créativité ?
Réponse : non, bien au contraire, il faut des contraintes pour développer la créativité. Elles agissent comme un guide.

Le rapport permanent du livre au Web était très intéressant. On a tendance à opposer print au Web, moi le premier … et finalement, elle considère que la page Web se rapproche du volumen (les rouleaux de papier, utilisé pour la Torah notamment).
Plus amusant encore, tout ce qui concerne la typographie a déjà été inventé … par les moines. Enluminures, marges, blocs de lecture etc.

Un regard rafraîchissant de plus sur la manière de concevoir et d’architecturer nos contenus, nos sites et nos applications.

Conseil lecture : de Josef Muller-Brockmann.

La crois au rouge français

Conclusion

Alors, pourquoi avoir titré mon article l’âge de la raison ? Parce qu’en plus de partager notre amour du Web, les intervenants de Paris Web, les organisateurs, mais aussi les participants, ont réussi à démontrer qu’on n’était plus que dans la diffusion d’informations à coup de slides.
Non, on était dans la création.

L’âge de la raison parce que finalement, le fond de cette édition était basé sur les réflexions. Qui sommes-nous ? Comment valoriser nos compétences ? Comment dialoguer avec le client ? Comment dire que la qualité ce n’est pas une option (pas la nôtre) ? Comment faire un site Web standard et un site Web mobile en un seul développement ?

L’âge de la raison car les processus de création et les enjeux métier étaient au centre des réflexion. Et qu’on n’a d’ailleurs toujours pas une réponse claire. L’argumentation va s’étoffer avec le temps, je n’en doute pas.

Je remercie chaleureusement les organisateurs d’avoir si bien réussi la programmation. Cette matinée typographie est un vent de fraîcheur qu’il faut continuer à pousser, pour aborder le webdesign d’un angle peu pratiqué jusqu’à présent.
L’expérience de la vélotypie et de la traduction simultanée (et les 2 en même temps) était excellente. Je découvrais l’effervescence d’un organisateur des RMLL se demandant comment mettre en place un tel système.

Je terminerai malgré tout par quelques critiques, car on peut toujours progresser :

• HTML5 c’est sympa, il faut aller vers du concret, au-delà des balises section, header etc. La démo de Paul Rouget cassait la baraque car elle apportait ce qu’il manquait jusque là : la concrétisation au-delà du slide ;
• le mobile a quasiment disparu de la programmation alors que l’an dernier, on sentait que c’était le sujet de toutes les interrogations
• les conférences sur le contenu, leur rédaction me font trop souvent penser à des cours de référencement naturel de bas étage (je suis dur, j’assume)

Encore une fois, rendez-vous de pris pour l’année prochaine, à savoir en 2011 … à moins qu’un Sud Web se glisse entre temps dans le calendrier ?

Remarque : j’oublie plein de choses, plein de personnes (Ryan, toute la famille avec Frank, N1k0 etc.) … dur dur de tout caser en 1 billet ;-(

High Performance Web Site, sous-titré Essential Knowledge for Frontend Engineers, est ce genre de livre à lire au moins une fois à défaut de le posséder. Il résume en à peu près 120 pages 14 points d’optimisation d’un site Web.

C’est d’autant plus intéressant que l’approche se base sur les mécanismes et non sur de l’optimisation de code. Ainsi dans la plupart des cas, vous n’aurez « que » du paramétrage serveur à faire.

Ce livre fait étrangement penser aux conseils de haute performance prodigués par le Yahoo! Developer Network et repris par l’extension Firefox pour Firebug, j’ai nommé YSlow.
C’est normal : ce livre est écrit par un ingénieur de Yahoo!, probablement un de ceux qui ont participé à la rédaction du guide de performances.

Pourquoi acheter High Performance Web Sites ?

On serait tenté de ne pas acheter le livre puisqu’une bonne partie de ses conseils sont repris sur le guide de haute performance cité plus haut.

Sachez toutefois que cet ouvrage va plus loin dans le détail, prend bien le temps de présenter ses tests de performance pour illustrer et de justifier l’application de leurs méthodes. La plupart des relevés de mesure sont effectués sur une dizaine de sites allant de Google à Amazon.

J’achèterais ce livre si j’étais :

• un administrateur système chargé d’héberger 1 ou plusieurs sites Web
• un technicien/webmaster en charge d’un site à plus ou moins fort trafic
• un développeur Web soucieux des performances de ses productions
• toute personne avare en kilo-octets superflus
• toute personne voulant accélérer les temps de réponse de son ou ses sites Web

Les 14 points d’optimisation

High Performance Web Sites axe son discours sur 14 points :

1. Limiter le nombre de requêtes HTTP
2. Utiliser un Content Delivery Network (CDN)
3. Utiliser une entête Expires
4. Compresser les composants avec Gzip ou Deflate
5. Placer les feuilles de style en début de page
6. Placer les scripts JavaScript en bas de page
7. Éviter les expressions CSS (Internet Explorer)
8. Placer les scripts JavaScript et les feuilles de style dans des fichiers externes
9. Réduire le nombre d’appels à des DNS différents
10. Minifier le JavaScript et les CSS
11. Éviter les redirections
12. Supprimer les doublons de scripts
13. Configurer ETags
14. Permettre la mise en cache des appels Ajax

Il prend cependant le soin de bien expliquer les mécanismes d’HTTP et les intérêts à améliorer les performances frontend.

Le livre termine sur un comparatif des 14 points sur 10 sites, notation YSLow comprise, dont Amazon, Google, CNN, eBay, Wikipédia et Yahoo!.

La mise en pratique

J’étais déjà sensibilité à presque tous les points pour avoir lu ces fameuses 14 règles en utilisant l’extension YSlow et Firebug. Cependant après la lecture du livre j’ai eu davantage de clés et des exemples probants pour me convaincre de les mettre en œuvre.

On peut appliquer la majorité des points et les points pertinents en 1 heure. En effet, tout site ne peut se permettre d’utiliser un CDN pour accélérer les temps de réponse autour du globe.

Personnellement j’ai mis en place une compression Gzip directement au niveau d’Apache au lieu d’utiliser une compression effectuée en PHP (avec Gzip aussi). J’ai couplé cet effort avec la minification JavaScript et la désactivation des ETags.

J’avais déjà au préalable externalisés mes CSS et JavaScript, placé au bon endroit (mais seulement les appels externes au DNS principal en bas de page) et sans doublon.

C’est bête à dire mais le résultat s’est vraiment senti avec des chargements de page incroyablement plus rapides. YSlow est effectivement un compagnon idéal pour la mise en application de ces éléments avec son analyse des performances et des composants.

Conclusion

J’ai dévoré High Performance Web Sites grâce à sa simplicité de rédaction, les nombreux exemples et surtout, les explications enrichissantes. Elles sont mises en application sur Yahoo! et certes, même si on peut se dire qu’on n’a pas de site de leur envergure, leurs conseils sont toujours bons à prendre.

High Performance Web Sites est un concentré de bonnes pratiques, simples à mettre en œuvre. Pourquoi s’en priver ?

Ces optimisations ne sont évidemment pas les seules à mettre en place pour que tout fonctionne bien : il faut aussi produire du code HTML propre, du JavaScript optimisé, du code application qui ne soit pas redondant.

C’est un bon début et des pratiques à généraliser.

Nous avions dressé un panorama des microformats dans un précédent article intitulé « microformats : republier et donner du sens aux contenus ». Nous avions notamment conclu que leur intégration était rapide, peu coûteuse et surtout bénéfique tant pour le visiteur que pour la visibilité du contenu.

Nous nous intéresserons cette fois-ci à une partie plus pratique des microformats : leur intégration. Toutefois ce rapide apprentissage sera didactique puisque nous apprendrons à identifier visuellement quels contenus d’une page peuvent être microformatés mais aussi comment microformater du code HTML déjà existant.

Des sites déjà microformatés

Intéressons-nous toutefois à des sites ayant déjà microformaté leurs contenus. Nous pourrons ainsi éveiller notre curiosité et préparer le travail de réflexion de la prochaine étape.

Exemple avec Google Maps :

Google Maps est un service de recherche cartographique accessible via un simple navigateur Web. Le moteur donne un accès à des recherches de lieux, de calculs d’itinéraires mais aussi d’emplacement d’entreprises.

Le support des microformats sur Google Maps est relativement léger mais suffisant pour être utile.
Contrairement à ce que l’on aurait pu penser, Google n’a pas intégré le microformat geo pour exporter les coordonnées GPS d’un point. La société s’est concentrée sur les données personnelles au moyen de deux microformats combinés :

• microformat hCard (correspond à la réunion des encadrés bleu et vert)
• microformat adr (correspond à l’encadré vert uniquement)

Cette combinaison facilite l’extraction des adresse postales et des entités (individus ou entreprises).

Exemple avec Yahoo ! Upcoming :

Yahoo ! Upcoming est un service gratuit cataloguant tous les évènements à venir par pays, ville, date et même par catégories (cinéma, concerts, expositions etc.).

Le microformat par excellence à adopter était bien évidemment le microformat hCalendar. Chaque occurence microformatée est représentée par un rectangle vert et peut contenir ces différents attributs, entre autre :

• date de début de l’évènement
• date de fin de l’évènement
• titre de l’évènement
• description de l’évènement
• le lieu de l’évènement (sous forme d’adresse complète ou pas)
• une URL menant à un descriptif plus approfondi de l’évènement

Ce microformatage permet d’aller au-delà d’une lecture classique puisque de manière simple, elle permet au visiteur de récupérer les évènements qui l’intéresse pour les ajouter à son gestionnaire de temps favoris, qu’il soit logiciel ou en ligne.

Identifier visuellement les microformats à intégrer

Identifier des microformats déjà implémenté est assez simple avec les outils adéquats. En revanche pour décider de microformater du contenu, deux outils sont indispensables :

• la documentation des microformats pour savoir quoi implémenter
• un peu de jugeotte pour savoir comment implémenter

Avec un peu de pratique et de connaissance des différents microformats, il ne faut pas plus de 5 à 10 minutes pour identifier les contenus microformatables. La difficulté d’intégration dépendra uniquement de la structure technique affichant les données : plus elle sera complexe, plus le microformatage pourra être long … au même titre que toute autre modification basique.

Exemple avec Wikia Search :

Wikia Search est un moteur de recherche lancé au tout début de l’année 2008 par un des fondateurs de l’encyclopédie en ligne Wikipédia. Ce moteur en reprend d’ailleurs le principe du wiki pour contribuer à l’élaboration et la notation de meilleurs résultats.

Il est d’ailleurs étonnant de voir qu’aucun microformat ne soit présent malgré de tels objectifs. La capture d’écran ci-dessus découpe la page en 3 zones microformatables distinctes :

1. le lien sur logo aurait pu se voir agrémenter d’un rel-home pour signifier un retour vers la page d’accueil ;
2. les résultats auraient pu quant à eux embarquer :
   • le microformat hAtom pour faciliter la syndication de contenu et l’extraction des résultats.
   • le microformat hReview ou VoteLinks sur les encadrés orangés identifiant les zones de votes.
3. enfin le microformat hCard aurait été le bienvenu sur la liste des résultats correspond à des personnes.

On peut constater que plus il y a d’emplacement représentant des contenus différents sur une page, plus on a de chances qu’un microformat corresponde.

Exemple avec Clever Age :

J’ai dénombré pas moins de 5 zones pouvant accueillir des microformats :

1. les dernières actualités pourraient utiliser le microformat hAtom. Un flux RSS est déjà disponible sur la page mais ce serait offrir un chemin de traverse pour les visiteurs et les moteurs d’indexation ;
2. le microformat hCalendar aiderait à la réutilisation des données dans les gestionnaires de temps. Imaginez un chef d’entreprise affairé désireux de transmettre à ses collaborateurs une ressource contenant toutes les informations de leur future formation : peu d’effort et un gain de communication ;
3. ajouter facilement Clever Age dans votre carnet de contacts et de prestataires serait également facilité si le microformat hCard redistribuait le nom et les moyens de contact de la société ;
4. en complément au moyen de contact, l’emplacement géographique des agences serait à portée de clic avec le microformat geo. Après tout, Google Maps proposera peut-être un jour d’importer des URL microformatée en plus des fichiers KMZ (Google Earth) ;
5. enfin, le microformatage de la dernière partie dépend de ce qu’on aimerait redistribuer :
   • le microformat hAtom pour offrir 3 flux de syndication mais le peu d’éléments (2 à chaque fois) tende à infirmer la pertinence de ce microformat dans le cas présent ;
   • le microformat XOXO est adapté à décrire des types de contenus embarqués dans une page ; ici des flux RSS. Il serait à placer sur chaque lien pointant vers les flux RSS ;
   • le microformat Xfolk est adapté aux collections d’URL plus communément appelés « favoris » ou « marque-pages »

Avec ce dernier exemple, nous venons de voir que le microformatage était facilement adaptable à un site Web de société. Dans ce cas précis, il y a énormément de contenu republiable mais pas systématiquement de manière pertinente.

Intégrer les microformats dans du (X)HTML

Les précédents exemples, sur de l’existant et ce qui pourrait exister, avaient pour but de former notre esprit à reconnaitre des zones susceptibles d’être microformatées.

La difficulté de l’exercice est d’ajouter du balisage sans altérer la présentation actuelle. Je traiterai du site de Clever Age dont nous avons parlé précédemment.

Microformater des données d’entités

Voici le code de départ, repris tel quel :

Clever Age - Siège social : 01.53.34.66.10

Comme nous avons pu le voir, la gestion d’identités passe par le microformat hCard :

<span class="vcard">
<span class="fn org">Clever Age</span> - Siège social : <span class="tel"><span class="value">01.53.34.66.10</span></span>
</span>

La balise span est une balise en-ligne neutre au sens où … n’en a pas justement. div est son pendant de type bloc.

Microformater des ressources syndiquées
Voici le code de départ (simplifié par rapport à l’exemple afin de réduire le code à lire) :

<dl>
<dt><a href="/rss/blog.xml">derniers billets du blog</a></dt>
<dd>...</dd>
<dt><a href="/rss/publications.xml">dernières publications</a></dt>
<dd>...</dd>
<dt><a href="/rss/cleverlink.xml">derniers Clever Links</a></dt>
<dd>...</dd>
</dl>

Le microformat XOXO nous permet de définir une liste d’éléments en fonction des modules XHTML :

<dl class="xoxo">
<dt><a href="/rss/blog.xml" rel="feed" type="text/xml">derniers billets du blog</a></dt>
<dd>...</dd>
<dt><a href="/rss/publications.xml" rel="feed" type="text/xml">dernières publications</a></dt>
<dd>...</dd>
<dt><a href="/rss/cleverlink.xml" rel="feed" type="text/xml">derniers Clever Links</a></dt>
<dd>...</dd>
</dl>

Le microformatage a été rendu possible uniquement en utilisant de manière standardisée des attributs définis par XHTML.
Malgré cet aspect de simplicité, il faut s’investir dans la compréhension des spécifications XHTML. Ce n’est un problème que pour les personnes produisant du code XHTML non-conforme.

Valider l’intégration des microformats

La question qui se pose toujours après avoir produit un code quelconque c’est comment le tester ? Il existe à l’heure actuelle trois outils gratuits :

• la relecture manuelle avec la documentation à côté
• l’extension Operator pour Firefox. Elle n’est toutefois pas complète et ne permettra pas de tester tous les microformats existants. Cette extension propose dans ses options un mode débogage très utile ;
• le service en ligne Optimus. Ce service polyvalent est capable de retourner sous forme de flux XML ou JSON les microformats présents dans une page Web. Il propose également un validateur, toujours pour une page Web, décrivant les erreurs de microformatage.

Conclusion

Il est difficile d’infuser en un article la manière de microformater du contenu. Fort heureusement la documentation des microformats abonde d’exemples en traitant des cas de figure concrets. Les spécifications restent là pour savoir quels sont les attributs, obligatoires ou pas.

De manière générale l’intégration des microformats est relativement aisée mais il existe 3 difficultés principales à l’intégration des microformats :

• difficultés liées à la plate-forme technique d’intégration ;
• difficultés liées à un manque de données. Certaines spécifications exigent la présence de données particulières que l’on n’a pas ou que l’on ne peut afficher, rendant invalide le contenu ;
• difficultés liées à un code HTML désorganisé. L’abus de div et le non-respect de hiérarchie est une source de problèmes et si elle rend pénible l’intégration des microformats, elle pose problème à la maintenance du code et des CSS.

Intégrer les microformats c’est finalement mener une réflexion sur la qualité du code produit. Un bon code, respectueux des standards et sémantique sera pérenne dans le temps, facilitera le microformatage et aura davantage de chances d’être accessible.

Google est une société à la fois adulée et pointée du doigt. La moindre nouveauté résonne sur l’étendue du Web, louée par ses défenseurs, critiquée par ses détracteurs.
Au-delà de ces querelles insipides et totalement subjectives, qu’est-on en droit de penser de Google ?

Aujourd’hui nous confions notre vie à Google avec plus ou moins de visibilité : données personnelles, emails, mots de passe, habitudes comportementales, organisation professionnelle et j’en passe. Est-ce parce que c’est écrit Google que l’on peut dormir tranquille ?

Quels intérêts à confier sa vie à Google ?

Des services qui justifient leur taux d’adoption

Rendons à César ce qui appartient à César : de nombreux services Google sont exemplaires et méritent d’être utilisés. Difficile de ne pas faire état du moteur de recherche, LE service qui a révélé Google au monde entier et sur lequel il a basé tout le reste de sa stratégie. Il n’est peut-être pas pertinent sur toutes les recherches (d’où l’intérêt d’avoir un choix de moteurs) mais il faut bien avouer que ses réponses cadrent bien avec les requêtes.
Bilan des courses ? Un moteur employé à hauteur de 90% en Europe ; chiffre qui devrait être atteint fin 2008/début 2009 aux États-Unis.

Comment continuer sans parler de Gmail (emails), Google Maps (cartographie et itinéraires), Google Calendar (agenda), Google Reader (lecteur de contenus syndiqués), Google Apps (solution collaborative pour son propre nom de domaine), Blogger (blogs) et Google Analytics (mesure d’audience), entre autre.

Tous ces services, on aurait du mal à les quitter du jour au lendemain, d’autant plus qu’ils sont gratuits. C’est peut-être à ça que l’on reconnaît un produit indispensable : il améliore notre quotidien et ne représente pas une contrainte.

Des services tournés vers l’utilisateur

En plus d’excellents services, Google se paie aussi le luxe de concevoir leurs interface avec brio. C’est ce qu’on pourrait simplexité : une interface simple qui se complexifie sur demande en fonction des besoins.
Vous vous souvenez également avoir cliqué sur message de confirmation pour supprimer, archiver ou déplacer des emails ? Non : à la place vous avez un message Annuler qui s’affiche une fois l’action effectuée. C’est le fameux undo et c’est génial car il permet de se tromper tout simplement. Avec ce procédé, l’erreur est permise puisqu’on peut revenir en arrière. Ce qui n’est pas le cas avec un Êtes-vous sûr ? Oui / Non …

Leurs interfaces ne sont pas forcément belles, ne proposent pas d’effets graphiques de furieux mais elles sont claires, lisibles et fonctionnelles. En d’autres termes elles sont ergonomiques et pratiques.

Une raison de plus d’utiliser des services Google.

La gratuité n’a pas de prix

Pourquoi payer quand on peut avoir quelque chose gratuitement ? Cet adage habille très bien Google puisque tous les services grand public sont gratuits (avec éventuellement quelques options payantes). Je me souviens encore des railleries au lancement de Gmail : 1Go pour ses mails ? Ça sert à rien.
Il n’empêche que pour bénéficier d’une telle capacité à l’époque il fallait mettre la main à la poche. Et effectuer une recherche pour trouver un email datant de 3 ans ça n’a pas de prix … ou plutôt si ça en un : c’est cher, très cher. Mais pas pour Google. Maintenant qui cracherait sur son archivage d’emails ?

Cette gratuité n’est pas de la philanthropie de la part de Google (la Fondation Google est là pour ça). Tout ceci repose quasiment exclusivement sur la publicité. Plus Google affiche de publicités et plus Google gagne de l’argent.
Google Adsense est un véritable cheval de Troie puisque la régie publicitaire va jusqu’à s’imposer sur la majorité des sites du monde entier et … rapporte de l’argent à ses utilisateurs.

En clair, utiliser Google est gratuit mais permet même de générer des revenus. Elle est pas belle la vie ?

Une innovation qui hisse le Web

Une autre raison de soutenir Google et/ou d’utiliser ses services est en rapport avec la dynamique que le géant a su insuffler au Web : l’innovation. Le grand réveil est apparu avec l’introduction de Gmail et par la suite, de Google Maps. Ces 2 services ont été le catalyseur de ce qui a été bêtement appelé « Web 2.0″. Le Web était tout simplement passé de l’enfance à l’adolescence.

Par delà cet aspect visible, il y a également un travail de l’ombre avec des contributions à des projets libres tels que Mozilla Firefox, Wine ou encore MySQL. Google utilise ces produits et redistribue ses contributions par rapport à son utilisation.
En fournissant une forge nommée Google Code, Google permet aussi à des projets de naître en leur fournissant une infrastructure, certes limitée, à moindre coût.

De quoi est-on en droit de se méfier ?

Don’t be evil

Tout ceci paraît bien évidemment idylique : Google est beau, Google est grand, Google est fort. Son slogan est même Don’t be Evil. Ne sois pas mauvais. Sauf que mauvais, Google l’est quelques fois. Notoriété oblige, tout problème est amplifié, à tort ou à raison et se termine parfois en polémique obligeant Google à faire marche arrière.

Des exemples ? La controverse Google Reader et des amis, le scandale AFP/Google News, l’indexation des livres avec Google Books (anciennement Google Print), la sortie de Google Web Accelerator, les clauses abusives de Google Sites ou encore les failles Gmail sources de fraudes (n’utilisez jamais ces formulaires demandent login et mot de passe par pitié).

On ne peut pas dire que la communication de Google à ce niveau aie été exemplaire ni … entendue.

Une communication destructurée

En y réfléchissant, qui sait ce que Google va lancer dans 1, 2, 3 ou 6 mois ? Pas grand monde. Si on sait que le Master Plan est la clé de tout, toujours est-il qu’on ne sait pas et qu’en dehors des annonces de produit, Google cultive le mystère.

Cette stratégie a beau limiter au maximum les plagiats de la concurrence mais ça limite également grandement la visibilité sur les objectifs de Google. Aux questions Quand est-ce qu’un service sera amélioré ?, Quel service a été arrêté ? ou encore La faille a-t-elle été corrigée, vous apprendrez bien souvent les réponses à vos dépends.

Cette communication du blackout est problématique pour une société censée … agréger et traiter l’information. Je pense qu’un peu de transparence et une meilleure organisation de l’information interne à Google lui éviterait quelques déboires et des inquiétudes de la part d’utilisateurs.

À la merci d’une politique obscure

Quand on aime, on ne compte pas. Et on se retrouve avec une majorité de produits Google dans notre quotidien.
Ces produits sont nombreux, variés et certains sont totalement inconnus. C’est comme ça que certains produits ferment du jour au lendemain sans qu’on sache trop pourquoi si ce n’est qu’ils sont peu utilisés.

Attention à ne pas prendre de raccourci : quand on lance beaucoup de services il est normal que certains meurent. Pourtant à côté de ça certains subsistent alors qu’ils sont pestiférés (Google Directory ou Google Web Accelerator). On ne sait jamais QUAND ça va arriver, on ne sera jamais prévenu AVANT. Difficile de baser un produit dessus ou d’en faire une fonctionnalité sur son propre site avec une telle politique.
Votre épicier vous prévient avant de partir en congès alors pourquoi pas Google ?

Le pire c’est peut-être quand on n’utilise pas Google mais une société que Google rachète : les clients d’Urchin et de GrandCentral se mordent encore les doigts de ces acquisitions. À peine rachetés, ces services ont été fermés/non-maintenus. Il aura fallu attendre 3 ans pour qu’une nouvelle version du logiciel Urchin sorte … en beta. C’est d’autant plus problématique que c’était le logiciel de sa catégorie le plus abouti.

Conclusion

Je ne fais pas partie de ceux qui adulent corps et âme Google.
Je ne fais pas non plus partie de ceux qui lui crachent dessus systématiquement.

Je suis un utilisateur de Google qui apprécie ses produits pour ce qu’ils sont, pour leur utilité et leur conception. À juste titre je me sens concerné par l’attitude de la société. Parler à des millions d’utilisateurs n’a rien de facile je le concède largement mais un développeur travaillant avec des outils Google, une société travaillant avec des outils Google ou même un utilisateur employant avec des outils Google ne devrait craindre la fermeture d’un service et la perte des données qui s’ensuit.
Google applique des principes d’ergonomie astucieux sur ses interfaces. Cela devrait être la même chose avec ses clients. Une trop grosse partie du Web repose sur Google pour que celui-ci ne se permette de devenir evil, ne serait-ce qu’un peu.

À l’heure actuelle la bulle Google a perdu de sa stature avec une action malmenée en Bourse, des services qui évoluent peu/pas et un attentisme important vis à vis d’Android (système d’exploitation sur téléphone mobile) et d’OpenSocial (réutilisation des données entre sites pour éviter de vous recréer sempiternellement vos listes d’amis, entre autre). Ce dernier a été annoncé au moment où Facebook volait la vedette au journal de 20H. Qu’en est-il maintenant que la starification est retombée ?

Il est important d’avoir un regard critique sur les services employés et sur les méthodes pratiquées. Être fan d’un produit est aujourd’hui dangereux si c’est pour être enfermé par celui-ci. On en paie aujourd’hui les conséquences avec Internet Explorer, par exemple, devenu un véritable fardeau pour Microsoft dans sa version 6. Tout le Web aimerait s’en débarasser. Mais beaucoup se sont basés dessus et exclusivement dessus.
L’Histoire peut très bien se répéter avec une situation monopolistique de Mac qui a la fâcheuse habitude d’enfermer ses utilisateurs en verrouillant et protégeant à n’en plus finir.

OpenID est un service d’identité numérique qui permet, entre autre, de mettre fin à la sempiternelle saisie des noms d’utilisateurs et des mots de passe. C’est gratuit, c’est libre et ça permet de gérer plusieurs identités sous la même adresse.
Puisque de plus en plus de services proposent d’utiliser OpenID, intéressons-nous de près avant de terminer sur quelques astuces et autres microformats

OpenID, comment ça marche ?

L’identification sur le Web se résume souvent à un couple nom d’utilisateur/mot de passe, email/mot de passe ou encore code client/mot de passe.
Je ne vous apprendrai rien en indiquant que chaque site Web :

• a sa propre politique de nom d’utilisateur (avec ou sans caractères spéciaux etc.)
• a sa propre politique de mot de passe (longueur minimale, avec ou sans caractères spéciaux etc.)

On peut se retrouver facilement avec une bonne dizaine de combinaisons au fur et à mesure que l’on multiplie le nombre d’adhésions sur des sites Web. C’est d’autant plus le cas que l’on possède plusieurs identités :

• son identité personnelle
• son identité professionnelle
• une à plusieurs identités en fonction de ses centres d’intérêts (jeux, photo etc.)

OpenID c’est un seul paramètre : une URL du genre http://pseudonyme.serveur-openid.com. Disposer d’une adresse OpenID c’est l’avantage de :

• gérer plusieurs identités à partir d’une seule adresse
• n’avoir plus qu’un seul mot de passe : celui de son adresse OpenID
• ne plus avoir à s’inscrire : votre URL est déjà votre identifiant
• ne plus galérer pour trouver un nom d’utilisateur alambiqué comme toto9898464 : votre URL est unique

En s’authentifiant sur un service compatible OpenID, l’identifiant et le mot de passe sont à fournir au prestataire OpenID (pour vérifier qu’il s’agit bien de vous), la dernière étape étant celle de l’autorisation du service.
Le prestataire OpenID vous met en relation de confiance, relation qui peut s’arrêter du jour au lendemain. Vous révoquez ainsi l’accès du service à vos données personnelles.

Choisir un prestataire OpenID

Avant de pouvoir utiliser OpenID, il faut obtenir une adresse OpenID … comme on le ferait pour une adresse email par exemple.
Le nombre de fournisseurs OpenID croît ce qui a un peu tendance à dérouter : un et un seul prestataire suffit. Certains sont très populaires ce qui fait que vous pouvez disposer d’une adresse OpenID sans le savoir :

• Yahoo OpenID (du genre https://me.yahoo.com/pseudonyme ou http://flickr.com/people/pseudonyme)
• WordPress.com (du genre http://pseudonyme.wordpress.com)
• Blogger (du genre http://nom-du-blog.blogspot.com)
• Orange OpenID (du genre http://openid.orange.fr/pseudonyme)