Pour ma part, c’est la quatrième année consécutive où je m’y rends … et où on accepte de me voir déblatérer des sujets de plus en plus bizarre. Qu’y ai-je vu cette année ?

Gloire au petit amphitéâtre

Les double sessions sont apparues à l’origine avec une orientation décideur/technique. Aujourd’hui j’y vois davantage une découpe atypique/grand public puisque dans la pratique, la distinction se fait sur la contenance de l’amphithéâtre.

Dans ce petit amphi, on a décortiqué la base de notre travail : l’impact du webdesign dans les neurosciences et vu comment fonctionnait un navigateur, d’une requête HTTP au rendu de l’interface.
Subtilement, en deux heures, on a pu se rendre compte qu’un changement de code hexadécimal dans un fichier CSS transitait au travers de plusieurs milliers de ligne de code au sein de votre navigateur Web … mais surtout, traversait 7 zones différentes du cerveau pour provoquer une … sensation.

Sensation. Mot qui navigue lui aussi au travers de l’accessibilité, de l’ergonomie ou plus généralement, d’UX (expérience utilisateur).

De la technique au management

Le public a eu du mal à retenir un rire sarcastique, moi compris, lorsqu’Arthur Rigaud de Voyages-SNCF.com a débuté sa présentation sur l’accessibilité. Malin, il a préféré utiliser grand compte pour éviter la désertion de la salle ?

Toujours est-il qu’on a vite oublié les sarcasmes devant l’ampleur de la mission : 70 sites Internet, 450 sites Intranet et 1 mission commune, les rendre accessible. Tous ne le seront pas à la date buttoir mais l’explication dans leur démarche mérite attention.

En effet, classiquement, un expert accessibilité a été missionné pour aider les différentes équipes à rendre leurs sites accessibles. Grand bien leur en a pris, car ça s’est soldé par un échec. L’ampleur et la dureté de sa mission a certainement contribué à l’intégrisme de son application, excluant cette personne de tous les projets.

Une approche tranversale a ensuite été adoptée : communication dans les lieux communs (machine à café, affichages de communication interne), formations au personnel et surtout, une responsabilisation de différents postes, du développeur au chef de projet en passant par les graphistes.

De la brutalité isolée à la douce transversalité.

Du public au grand public

On ne parle pas de backend à Paris Web par contre on y parle Open Data !

David « Nippon » Larlet et Olivier Thereau ont présenté à la fois un panorama d’Open Data au travers des cultures, et comment la BBC s’y prenait pour utiliser Open Data avec leurs contenus et ceux issus de communautés spécialisées.

Open Data est le gros buzzword pour lequel le retour sur visibilité reste faible, en partie à cause du manque d’accompagnement, des coûts de développement et de maintenance (ben quoi, c’est de l’informatique et du temps de cerveau piqué à TF1) … et pourra-t’on constater, du manque d’outillage.

Y’a du maille pour mailler les données, car le Web sémantique c’est bien beau, mais lier des fichiers PDF entre eux, c’est priver un diabétique de son insuline en le gavant de chamallow (OK ? © Pablo).

L’atelier des bonnes idées

Samedi fût un peu plus difficile : réveil tardif suite à la retombée de pression de la veille et d’un épuisement lié au manque de sommeil. Bref, j’ai préféré rogner sur le premier atelier pour réserver mon attention au reste de la journée.

Après un énième café, la journée débute sur un sujet de typographie adressée aux développeurs. Le sujet couvrait les aspects de ce qu’on devait connaître mais après les 2 excellentes conférences de l’an dernier (macrotypographie de la page Web et typographie comme outil de design), dur dur. On repartait en tous cas avec l’idée essentielle : d’abord le contenu, ensuite le design. Couplé avec Mobile First et l’accessibilité, le lien n’en est que plus évident.

Songeant de plus en plus régulièrement à publier ce blog sous forme de contenu versionné avec git (geek), je pensais naïvement que ce serait le sujet de l’atelier Création et partage d’archives Web personnelles. La bonne surprise c’est qu’il y fût surtout question de créer des archives distribuées pour éviter les liens morts sur nos propres blogs : chaque lien externe est indexé en local pour s’y substituer en cas de disparition de la page cible respective. Ce sera à suivre sur le projet Owark.

Et le meilleur pour la fin : deux jeux sur l’itération et la communication de Pablo Pernot. J’avais déjà entendu parler du Marshmallow Challenge et ce fût l’occasion de l’expérimenter. Tout le monde (ou presque) a eu le réflexe de construire la tour la plus haute possible … et de se planter au dernier moment. Comme dans nos projets informatiques en fin de compte. Livraisons itératives vs. grosse livraison finale (qui fait mal).

Puis de tester la communication écrite (nos belles specs et cahiers des charges) vs. la communication orale. Cette dernière a donné de meilleurs résultats, en permettant d’ajuster en fonction du feedback. Ça m’a donné à réfléchir sur la capitalisation technique : travailler à 2 en même temps, pour qu’un formalise par écrit semble plus efficace qu’une seule personne, réfléchissant et écrivant. Et de constater une fois de plus la difficulté à imposer un processus formalisé à des personnes ne se sentant pas en mesure de le faire.

Des outils aux ressentis

C’est avec surprise que je suis reparti sans le boost d’énergie habituel, et sans le spleen post-évènement. Et de me rendre compte que finalement, j’ai passé tout mon temps à m’imprégner des expériences humaines exposées sur scène, ainsi que des conversations pendant les repas, apéritifs et autres diners plus ou moins informels.

J’y vois trois raisons :

1. l’expérience Sud Web a déjà regonflé le ballon il y a 6 mois ;
2. en travaillant en indépendant, je ne subis plus cette pression du boulot mal fait ou de l’incompréhension auxquelles Paris Web apporte une grande bouffée d’air frais ;
3. je n’espérais pas révolutionner ma vision des outils pour améliorer radicalement mon quotidien.

À vrai dire, ça doit bien être la première année où je me suis fichu éperdument des outils pour me focaliser totalement sur le comment et le pourquoi. Pourquoi ça foire ? Comment des hommes et femmes font réussir un projet ?

Et ma conférence ?

J’y reviens dans un prochain article pour apporter à la fois une explication à mes slides et aussi des éléments complémentaires.

D’ici là, tous mes remerciements à l’organisation impeccable de l’évènement (notamment sur l’arrivée des orateurs), à l’excellente soirée communautaire au Comptoir Général et aux personnes avec qui j’ai pu échanger, que ça soit sur ma coupe de cheveux ou sur nos vies respectives.

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 ;-(

J’ai enfin pu assister à mon premier Paris-Web à Paris du 13 au 15 novembres 2008 inclus. C’était bien, très bien mais que dis-je : excellent ! J’ai rarement eu aussi peu envie de rentrer chez moi après cette multitude de rencontres dans un état d’esprit des plus respectueux.

Y’a même pas de troll pendant la conférence Internet Explorer 8, c’est dire.

Les conférences en quelques mots

Les conférences de Paris-Web 2008 étaient réparties du jeudi au vendredi. Je souhaitais intituler cette partie « mes conférences préférées » mais en faisant le décompte, j’en citerais au moins 75% :

• Qualité et accessibilité Web : vers l’amélioration continue
• Travailler dans le présent
• Accessibilité, des volontaires ?
• Internationalisation
• La mode se démode, le <style> jamais
• Identité 2.0 et Web sémantique
• IE8 et les standards du Web
• Performances côté client

Stéphane Deschamps

Ce qu’il faut retenir c’est que désormais, nous sommes dans une époque où nombre d’outils sont à notre disposition. Il faut maximiser l’utilisation d’outils déjà existants et s’en servir pour bâtir nos applications, interfaces et présentations.

Il faut également qu’on en finisse avec notre approche trop technique et intégriste de travailleurs du Web : le client se fiche éperdument de la techno employée ou de la fonctionnalité en elle-même. Ce qui compte c’est ce qu’elle apporte ainsi que le résultat final.
Bien entendu, si la solution employée tient compte des performances et est facile à mettre en œuvre, c’en n’est que mieux.

Élie me faisait la remarque : il faut vendre de la qualité et pas de l’accessibilité. Il faut vendre un site qui rassure et guide le client. Si le site n’est déjà pas adapté aux individus sans déficiences, à quoi bon s’acharner à le rendre accessible ?
Mieux vaut beaucoup de sites accessibles à 60% qu’une infime proportion de sites accessibles à 99%.

Bon nombre de conseils sur l’optimisation des sites Web étaient déjà cités dans l’excellentissime livre High Performances Websites. L’équipe Exceptional Performance de Yahoo! s’est toutefois penchée à fond sur l’optimisation des images.
J’y reviendrai d’ailleurs car j’ai découvert pngnq et pngcrush. Ces 2 programmes sont d’une utilité redoutable pour compresser et optimiser vos PNG, notamment pour faciliter la transparence IE6 sans douleur.

Chris Wilson

On terminera également avec une perspective du futur.
Daniel Glazman a fait un show exceptionnel sur les nouveautés de CSS3 avec tout plein de bonnes choses. J’ai vraiment hâte qu’on puisse jouer avec … peut-être dans pas si longtemps que ça vu que les navigateurs intègrent ces nouveautés par anticipation.

De son côté, Chris Wilson (qui faisait déjà partie de l’équipe de développement de Mozaïc) a abordé les standards et Internet Explorer 8. En toute honnêteté, j’admire la bravoure de cet homme « seul » face à une assemblée pro-standards qui passe sa journée à jeter des cailloux sur Internet Explorer.
Pour avoir un peu discuté avec lui après coup, il représente une chance exceptionnelle d’enfin avoir Internet Explorer au niveau des autres navigateurs.

Si fonctionnellement je me fiche éperdument du navigateur puisque je ne l’utiliserai plus, le monde a tout à gagner à avoir un navigateur de plus à respecter les standards.
Bon courage à Chris car ça ne doit pas être évident tous les jours pour lui. Je n’ose pas imaginer les montages qu’il a dû déplacer pour imposer ce choix du respect.

Du côté des ateliers

Le samedi c’était ateliers : 2 sessions le matin et 2 l’après-midi. Je me suis d’ailleurs vite retrouvé avec des choix cornéliens puisque pour chaque horaire, il y avait 5 sujets qui se faisaient concurrence.

J’ai pour ma part assisté à :

• Rédaction Web et référencement naturel
• Validation avancée des formulaires
• Développement efficace avec les frameworks CSS
• RDFa vs Microformats

La rédaction Web était intéressante même si je n’ai pas appris grand chose et j’en profitais pour terminer mes slides. Vous retrouverez tout le contenu de cette présentation dans le livre l’écrit Web.

La validation avancée des formulaires partait d’un bon principe mais s’enfonçait inutilement dans certaines parties. À mon avis, expliquer chaque fonction (y compris celles du DOM) était une perte de temps.
Conseil : charger ses slides ne rend pas pour autant l’information digeste. C’est pas un document Word.
C’était néanmoins intéressant pour le raisonnement et la satisfaction de mettre en place son propre validateur. Toutefois en production autant utiliser de l’existant. Il y a des plugins pour tous les bons frameworks JavaScript qui se respectent.

Je passe sur l’atelier des frameworks CSS puisque je l’animais. J’y reviendrai dans un prochain article pour appuyer ma présentation et fournir des explications à ceux qui n’ont pas pu y assister.
J’étais en revanche étonné qu’ils soient si peu connus. J’ai par contre été enchanté de les voir cités à plusieurs reprises dans mes conférences préférées

Rien à redire sur RDFa vs. Microformats même si on aurait pu éjecter les microformats rapidements et plonger encore plus loin dans la pratique de RDFa. Ça sera prétexte à une suite plus technique l’an prochain

La sublime Amélie Boucher

Sans oublier les gens !

Paris-Web c’est aussi l’occasion de rencontrer la moitié de son aggrégateur et de ses followers Twitter

Et Dieu sait s’il y avait tout un tas de pointures du Web à notre disposition dans une ambiance exceptionnellement cordiale :

• Sophie Major, big boss du Yahoo! Developer Network
• Nicole Sullivan, de l’équipe Yahoo! Exceptional Performance
• Christian Heilmann et son incroyable bonne humeur pragmatique ; je suis fan !
• Daniel Glazman, du CSS Working Group ; franc, direct et j’aime ça
• Sans oublier pêle-mêle Than, Sébastien Delorme, Monique, La Lène, Amélie Boucher, Hellgy, Raphaël Goetter, Fabrice Bonny, François Hodierne, Xavier Borderie … et en oubliant très certainement plein d’autres :’(
• Et d’excellentes découvertes : Anthony Ricaud, Mathieu Pillard et toute l’équipe Paris-Web !

La brochette des meilleurs !

Conclusion

Bref, Paris-Web c’est bien. Tellement bien que l’attente de l’édition 2009 me paraît déjà insoutenable !

Je ne regrette au final qu’une chose : 3 jours ça paraît long mais ça passe teeeeeeeeeeeeellement vite en compagnie de personnes de qualité avec un programme chargé.
J’ai essayé de discuter avec un maximum de personnes, que je connaissais ou pas, mais des fois c’est très insuffisant.

Les tables rondes étaient également exceptionnelles … désolé ça frise le billet sponsorisé mais il est difficile de ne pas déborder d’enthousiasme après un tel évènement.

C’est l’effet Paris-Web. Rendez-vous est pris.

Je suis tombé nez à nez sur l’annuaire des sites Internet publics la semaine dernière en cherchant l’adresse de la CPAM de Gironde. Il se trouve que la page de cette dite organisation était affublée d’un message explicite … ou en fait pas vraiment.

Ou comment un message partant d’un bon sentiment peut ruiner une navigation.

Manque de clarté du message

Voici la disposition de l’alerte une fois sur la fiche de l’organisation recherchée :

Message d'alerte de Service-public.fr

On est sur du simple et direct : message puis information recherchée.

Le problème c’est qu’on est confronté à plusieurs messages :

• la partie locale de l’annuaire va fermer.
  Suis-je sur la partie locale ? Je proviens d’une recherche Google et franchement, je n’en sais rien. Un petit « locaux » en rouge aurait tendance à me le faire croire.
  Résultat des courses : j’ai eu besoin de chercher à vérifier si j’étais concerné par le message.
• Elle est remplacée par l’annuaire de l’administration / services locaux.
  Le premier message vraiment utile est là : cette partie va être remplacée et j’ai un lien d’accès à la nouvelle ressource.
• Les mises à jour ne sont plus effectuées.
  Donc si je comprends bien, je suis en train de consulter des données sans aucune garantie qu’elles soient encore fiables. Autant dire que je n’ai qu’un seul intérêt : me rendre sur le site de remplacement.
  Un effort cognitif de plus.
• Un message d’information pour les administrations locales.
  Est-ce ce message concerne l’utilisateur lambda ? Pas vraiment. Surcharge de texte inutile sauf s’il n’y a aucun autre moyen d’avertir ces fameuses administrations locales de mettre à jour leurs procédures.

L’information principale se retrouve noyée dans la masse et laisse à penser qu’on n’aura pas les informations souhaitées sur la page courante.

Alors soit, cliquons sur le seul lien de rechange que l’on ait.

Perte de l’information et de la navigation

Je pense qu’en terme de perte d’information de substitution, on ne peut pas faire pire (sauf à avoir un lien cassé).

En effet, alors que j’étais sur une page d’information très précise, je reviens au point de départ : l’échelle nationale sans aucun repère.
En clair :

• j’ai perdu l’information dont j’étais en possession
• je dois à nouveau la retrouver dans une disposition différente de l’origine

La bonne chose à faire serait de taper à nouveau ma recherche (CPAM gironde) dans le champ de saisie mais préférant la facilité, j’use de la carte de France et clique sur la région Aquitaine.

Enfer et damnation, je dois retrouver la CPAM dans une liste à 5 niveaux de défilement. 2 solutions :

• cliquer sur un département : l’affichage de la longue liste se retrouve filtré au département en question. À nouveau recherche de l’information.
• scanner la page pour y trouver ce que je veux. Heureusement que l’occurence CPAM est affichée, ce qui m’évite d’avoir à tout lire.

Et comme si je n’avais pas assez cherché, je me retrouve confronté à un choix difficile : choisir parmi 8 liens hypertexte au même libellé. Jugez-en par vous-même :

Quel lien choisir ?

Le pifomètre m’a fait cliquer sur le premier des 8 liens et coup de bol … c’est bon.

J’ai désormais l’information souhaitée … différente de la page initiale sur le futur-ex annuaire local de Service-public.fr. Mais après combien de manipulations et de réflexion ?

Conclusion

Trop de manipulations c’est certain. Résumons les erreurs principales :

• présentation d’un message peu clair
• renvoi vers une page détruisant l’information en notre possession
• obligation de rechercher à nouveau l’information en notre possession

Cela aurait pu être évité par l’un de ces 2 moyens :

• redirection automatique permanente.
  On ne voit pas de message, on tombe directement sur une information à jour et on ne perd pas un seul instant. La meilleure solution et de loin.
• afficher un message plus clair avec un hyperlien direct vers la ressource de remplacement.
  C’est un chouilla moins bien mais si on tient vraiment à faire passer un message, c’est très bien.

Avec la méthode présentée, on a un peu l’impression de faire le boulot à la place des mainteneurs du site. Est-ce vraiment si pratique ?

L’accessibilité passe aussi par une présentation réduisant les efforts cognitifs. Et ça ne vaut pas que pour des personnes handicapées, ça vaut également pour des utilisateurs peu avertis du Web, pour votre référencement mais aussi pour le simple respect de votre clientèle.

Hier Sébastien Delorme s’est fendu d’un petit twit qui m’a fait sourire sur le site de vente en ligne Ooshop. Cependant après réflexion, je me suis dis que c’était particulièrement grave.

En 2008 on vous demande encore de venir en smoking sur un site Web et qui plus est, avec des recommandations liées à des logiciels périmés, à savoir Internet Explorer 6 et Firefox 1.5 à jour (le site a été mis à jour suite à cet article).

Entrevue d’une configuration optimale tout sauf accessible et acceptable.

Avant toute chose, prenez connaissance de cette fameuse configuration optimale. Y’aurait de quoi écrire une thèse dessus.

Navigateur optimal

Ooshop recommande d’utiliser la résolution d’écran suivante : 1024×768.

Ooshop recommande pour une navigation optimale d’utiliser les navigateurs suivants :

Pour PC :
Internet Explorer 6 – Télécharger
Firefox 1.5 – Télécharger

Pour Mac :
Firefox 1.5 – Télécharger
Safari 2.0.3 – Ce navigateur est installé par defaut par Apple

Les navigateurs Konqueror, Opéra, Avant Browser ne sont pas encore entièrement compatibles sur notre site.

Tout est critiquable mais je suis joueur.

La résolution optimale, je pense qu’à peu près tout le monde s’en fiche :

• ceux qui ont la bonne résolution n’en auront que faire (et je les comprends)
• ceux qui n’ont pas la bonne … et bien ils s’en apercevront et surtout, que peuvent-ils faire ?

Combien de personnes ont diminué leur résolution pour cause de problème de vision ? Vont-ils augmenter la résolution uniquement parce que ça a été voulu sur ce site Web ? C’est un peu comme si en allant au supermarché on regardait la taille de votre coffre de voiture en refoulant tous les possesseurs de Smart.
Personne ne le fera, faut arrêter de rêver. Et surtout si les personnes ne savent pas régler leur résolution (tant et si bien que ça leur parle).

Plusieurs cas de figure :

• si on a vraiment besoin de ces 1024, on s’arrange pour placer au moins la navigation principale dans la partie qui sera toujours visible sans avoir à scroller horizontalement
• ou alors on opte pour un site à largeur variable, fluide ou élastique

Et pour le navigateur ? J’ai un PC mais je ne comprends pas, je ne peux pas avoir Internet Explorer 6 dessus. Ah je suis sous Linux ? Je comprends pas pourquoi je ne me sens pas concerné.
Hé les gars : faut faire la différence entre Windows (système verrouillé par conception) et PC (architecture basée sur x86, dont les Mac feraient même partie aujourd’hui si on reste large).

Et à côté de ça on me cite Konqueror, un des navigateurs avec les plus faibles part de marché (et compatible Linux uniquement). Y’a franchement de quoi se marrer.

Solution : virer ce bout de texte et opter pour un code compatible avec des navigateurs modernes, d’Internet Explorer 7 à Safari en passant par Firefox.

Configuration optimale

J’adore ce genre de pots-pourris façon Internet de la bulle Internet des années 2000. Et vas-y qu’y a du simple pixel gif et que je te parle de ce qu’il faut configurer sans image aucune (ben ouais, c’est pas optimisé les images).

La configuration des cookies est tellement bien expliquée, à tel point qu’on te dit :

• que ça ne fait «que» mémoriser des informations
• que ça ne permet pas de lire des informations sur le disque dur (à moitié vrai, les cookies c’est pas sur le disque ?)
• mais qu’à côté de ça, ça permet de créer une base de données sur les visiteurs (c’est beau la transparence ceci dit)
• et surtout le plus fun, que les cookies sont gérés automatiquement par les sites de commerce électronique

Alors 2 possibilités :

• Ooshop n’est pas un site de commerce électronique, ce qui explique la procédure de configuration des cookies expliquées juste en-dessous
• Ooshop se fiche éperdument de la tête de ses visiteurs et compte sur leur aptitude à ne pas lire cette même pas (et là ils ont raison, personne ne la lit/lira/a lu)

Mon conseil : vérifier que les cookies sont activés sur le navigateur. C’est pas comme si on pouvait le faire de manière automatique mais presque … En cas d’erreur, lui présenter en image les manipulations à effectuer sur son navigateur.
À quoi bon parler de la configuration d’Internet Explorer si on utilise Konqueror …

Je passe également le volet sur le SSL. Quand on vient faire des courses, c’est certainement pas pour prendre des cours de crypto. J’entends déjà mon médecin m’expliquer que les données sur ma carte Vitale sont accessibles car non protégées lors d’une visite médicale.
Ah non pardon, ça c’est vrai.

Conclusion

Au lieu de s’évertuer à pondre une pleine page en popup pour expliquer comment paramétrer un navigateur dans un language peu compréhensible, il faudrait glisser du il faut à nous allons.
Oui, optimiser au lieu d’expliquer comment optimiser son navigateur pour un site donné.

Imaginez qu’on doive paramétrer son butineur favori/imposé pour chaque site.
C’est le reflet d’une mauvaise conception ou d’un vice assumé.

Je n’aurais qu’une chose à dire, le slogan d’Ooshop, il est parfait !

Je te le fais pas dire ...

J’ai découvert totalement par hasard un jeu de filtres pour daltonien fonctionnant sur l’environnement de bureau Gnome. Son petit nom ? colorblind-applet.
Il est livré en standard sous Debian et plus péniblement, sous Ubuntu. Cette dernière distribution englobe pourtant Gnome Magnifier (paquet gnome-mag), le projet père mais allez savoir pourquoi, sans l’applet pour daltonien.

Petit tour du propriétaire et mise en application dans le cas du développement Web.

Présentation rapide du daltonisme

Se mettre dans la peau d’un daltonien, ou voir à travers ses yeux, est une chose difficile. Comment imaginer le rendu des couleurs ? Et surtout, comment l’imaginer en fonction du daltonisme ?
Il faut savoir qu’il existe plusieurs variations de cette anomalie de perception de couleurs :

• mauvaise perception du rouge
• pas de perception du rouge
• mauvaise perception du vert
• pas de perception du vert
• mauvaise perception du bleu
• pas de perception du bleu

À cela s’ajoutent également des combinaisons possibles entre ces différentes variantes. Pour plus d’informations, je vous invite à consulter l’article sur le daltonisme sur Wikipédia.
Et pour votre gouverne, être daltonien ne signifie pas être handicapé. Les personnes atteintes de cette anomalie (environ 8% des hommes en France, même pas 1% de femmes) ne peuvent donc pas être reconnues comme telles.

Chiffre 37, invisible pour les personnes atteintes de protanopie

Pour savoir savoir si on est daltonien, il suffit de regarder les images des planches du test d’Ishihara. Peut-être la « mauvaise » nouvelle du jour ?

Présentation de colorblind-applet

Mais alors, que vient faire colorblind-applet dans tout ça ?
Cet applet pour Gnome est un « simple » filtre de visualisation. En clair, il altère la colorimétrie de votre écran pour l’afficher comme si vous étiez daltonien.
Jusqu’à présent j’utilisais Color Oracle puisque présenté avec conviction sur Ergophile.

colorblind-applet me convient toutefois davantage pour les raisons suivantes :

• il peut se piloter entièrement via des raccourcis clavier (activation, désactivation, navigation entre les filtres)
• son utilisation est persistante : il reste actif tant qu’on ne le désactive pas (Color Oracle enlève le filtre au moindre clic de mémoire)
• il demande peu de ressources machine, intégration directe dans Gnome oblige (Color Oracle est en Java)

En clair je résumerais comme suit :

• vous êtes sous Linux et plus particulièrement dans un bureau à base de GTK ? Utilisez colorblind-applet
• dans les autres cas, utilisez Color Oracle (compatible Linux, MacOS X et Windows)

Colorblind-applet : contrôles

colorblind-applet en action

Puisqu’une image vaut davantage qu’un long discours (trop tard me direz-vous ), voici une série d’images présentant mon bureau de travail ainsi qu’un navigateur Web ouvert sur la page de Planète Accessibilité.

Capture d'écran d'origine

Filtre réglé sur "Selective Green Desaturation"

Filtre réglé sur "Negative Hue Shift"

Plusieurs choses à noter :

• les teintes blanches sont épargnées
• les autres couleurs changent en revanche du tout au tout en fonction du type de daltonisme
• jouer sur les couleurs n’est pas suffisant pour faire passer un message aux utilisateurs
• ça ne doit pas être évident de parcourir le Web et ses multiples couleurs tous les jours : la désaturation de vert pique particulièrement les yeux
• et par extension, il me paraît très difficile de produire une charte graphique convenant à tous les types de daltonisme

Je serais curieux d’avoir des retours de personnes ayant déjà eu à travailler avec cette déficience, les bonnes pratiques de conception et tout autre conseil avisé.

Joie : je fais maintenant partie de Planète Accessibilité en plus de Planet Libre. C’est l’occasion pour ce premier article dédié d’allier à la fois logiciels libres et accessibilité pour le plus grand bien du Web

Le but de cette explication sera de développer la méthode et le raisonnement pour mettre en place un menu en rollover accessible. La difficulté tient essentiellement au fait que tout élément masqué par le biais des CSS est masqué pour de nombreux clients Web.

Nous verrons aussi pourquoi il est important de dissocier la présentation et les artifices graphiques grâce à une dégradation propre du JavaScript. Nous utiliserons pour cela jQuery, ma librairie JavaScript favorite.

Buts et objectifs de l’exercice

J’ai eu besoin d’appliquer cette technique sur le site Emu Nova. Je souhaitais plusieurs choses :

• disposer d’un menu en rollover en haut de page (facilite la navigation sur toutes les pages)
• placer le contenu avant les menus dans le flux HTML de la page (améliore le référencement)
• une navigation possible sans JavaScript (pour cause de bug ou autre)

Autrement dis, j’ai besoin d’un contenu en fin de flux mais visible avant tout le reste. J’ai opté pour la solution JavaScript pour éviter un positionnement absolu pénible à gérer (pour cause de conteneur centré) mais aussi pour respecter le colonnage de Blueprint (puis toutes façons j’ai raison )

En une image, cela se résume ainsi :

Nous allons aborder les 3 phases de ce tracé de flèche :

1. la construction du menu (la zone verte)
2. le déplacement du contenu (la flèche)
3. la construction de notre nouveau menu (la zone bleue)

Étape 1 : construire le menu en HTML

C’est l’étape essentielle. De sa structure dépend le reste de l’application. On doit d’abord penser à présenter le contenu de manière dégradée. C’est ainsi que le verront les utilisateur et c’est important de penser d’abord au pire des cas avant de mettre en place les paillettes et les artifices.

Cette structure est représentée ainsi en HTML :

<div id="contenu-secondaire">
  <ul id="navigation">
    <li class="first column span-6">
      <h2>Actualités</h2>
      <ul>
        <li><a href="...">Actualités</a></li>
        <li><a href="...">Newsletter</a></li>
        <li><a href="...">Flux RSS</a></li>
        <li><a href="...">Twitter</a></li>
        <li><a href="...">Réactions à chaud</a></li>
      </ul>
    </li>
    <li class="column span-6">
      <h2>Émulation</h2>
      <ul>
        <li><a href="...">Émulation</a></li>
        <li><a href="...">Tutoriaux</a></li>
        <li><a href="...">Foire aux Questions</a></li>
      </ul>
    </li>
  </ul>
</div>

Cette version est volontairement tronquée pour faciliter sa lecture.
L’idée générale de tout ça c’est de transporter directement la liste #navigation en dehors de son conteneur, #extra-content. C’est en effet plus rapide et plus performant de transporter une partie du DOM dans un autre endroit que de la recréer séquentiellement.

Ça aura également l’avantage de limiter au maximum le travail à effectuer en JavaScript par derrière. On notera que jusqu’à présent, on n’a pas encore touché à jQuery.

Avec cette structure, on peut dores et déjà deviner que les <ul> de second niveau seront masqués et affichés à la demande.

Étape 2 : préparer le menu HTML

La deuxième reste assez simple : on transporte #navigation dans son nouveau conteneur (déjà existant) : #welcome-bar.

Pour éviter tout aléas graphique, l’idéal est de masquer tout ce qu’on ne veut pas voir maintenant. Nous rentrons maintenant dans la partie pure JavaScript.

Pour atteindre ce résultat, on pourrait envisager le code suivant :

(function($){
  $(function(){
    /*
     * Étape 2 : préparation du menu
     */
    $('#navigation > li > ul').hide();
    $('#navigation').appendTo('#welcome-bar');
  });
})(jQuery);

En soi, ce n’est pas excessif du tout :

1. on masque tous les sous-menus
2. on transporte le contenu de #navigation dans #welcome-bar

Tout le travail se situait dans la réflexion il faut croire

Étape 3 : assigner les évènements

Maintenant le plus dur c’est de donner vie à tout ça. C’est bien beau d’avoir des menus mais encore faut-il les animer. Là encore nous avons plusieurs contraintes à subir :

• les titres doivent être cliquables. Certaines personnes cliqueront en effet avant de réaliser qu’il y a un menu déroulant. Par principe, on prendre le premier lien de la liste et on l’assignera au titre correspondant ;
• le menu doit se dérouler lors du survol du titre …
• mais il ne doit pas se masquer tant qu’on n’a pas quitté le titre NI la liste déroulante

La difficulté tient à ces 2 dernières contraintes. On pourrait tout d’abord penser à l’utilisation des évènements mouseover et mouseout MAIS, parce qu’il y a bien un mais, mouseout est un peu capricieux.

Si on imagine un mouseover directement sur li.column, le problème c’est que survoler un élément comme Actualités ou Newsletter activera le mouseover de ces derniers … et désactivera, un temps minime certes, le survol de li.column. Autrement dit le menu se repliera alors qu’on tentera de l’utiliser.

Heureusement pour nous, jQuery a introduit les évènements mouseenter et mouseleave (présents dans Internet Explorer depuis des lustres, c’est bien le seul avantage de cette atrocité) depuis la version 1.2.2. Ces évènements correspondent exactement à ce que l’on souhaite : maintenir une zone survolée malgré le survol de ses enfants.
Tout est histoire de couches

Côté code, ça se complique :

(function($){
  $(function(){
    /*
     * Étape 3 : assignation des évènements et transformation
     */
    $('#navigation > li')
      .each(function(){
        var title = $('h2:first', this);
        var href = $('a:first', this).clone();
        href.text(title.text()).wrapInner('<span></span>');
        title.html(href);
       })
      .find('h2 > a').bind('mouseenter', function(){
        $(this).parents('li.column').find('> ul').slideDown('fast');
      }).end()
      .bind('mouseleave', function(){
        $('> ul', this).slideUp();
      });
  });
})(jQuery);

Plusieurs remarques sur ce code :

• j’utilise les chaînes de jQuery pour gagner du temps et reparcourir des tableaux déjà connus (le sélecteur n’est pas réexécuté)
• j’utilise également la méthode end() pour revenir au précédent état du sélecteur. Très pratique pour naviguer dans un jeu d’éléments et gagner en performances

Et pour les explications :

1. Pour chaque élément de liste
   1. on met de côté le titre de la liste
   2. on clone le premier élément du sous-menu
   3. on modifie le libellé du lien du clone
   4. on remplace le titre par le code HTML du clone
2. Pour ces liens hypertextes nouvellement créés (plus faciles à styler sans JS au rollover), on leur demande de déplier le sous-menu voisin
3. Ce sous-menu ne sera replié que lorsqu’on quittera le li.column

Conclusion

La mise en œuvre de ce menu est relativement aisée et surtout, suffisamment souple pour que vous puissiez l’adapter à vos besoins.
Dans tous les cas on remarquera que les clés de la réussite sont :

• un code HTML propre (facile les sélections JS et le stylage CSS)
• une évolution d’une base sans artifices vers une interface améliorée en JavaScript
• un code simple, facilement maintenable et adaptable

Ceci n’est qu’un exemple où le JavaScript peut servir à conserver des interfaces accessibles tout en augmentant leur utilisabilité. Qui a dit que le JavaScript c’était nul ?

Le seul reproche que l’on peut faire à ce menu accessible c’est le manque de navigation au clavier. L’idéal serait de pouvoir naviguer dans le choix des menus entièrement avec les flèches de son clavier.
Rendez-vous dans un autre billet pour ce point ?

Lors de la refonte de ce blog, j’ai concocté un petit script JavaScript (non intrusif bien entendu) affichant et modifiant le contenu d’un bandeau sous la forme d’une classe statique reponsant sur jQuery. J’explique aujourd’hui comment ces 48 petits lignes de code (en comptant commentaires, sauts de lignes et accolades) fonctionnent, comment il est aisé de mettre en place de telles routines de manière intelligente, souple et non intrusive.

Et comme l’indique le slogan de jQuery : Write less, do more.

Le besoin

Avant de se lancer tête baissée dans le code, prenons le temps d’exprimer avec des mots ce que l’on aimerait faire.

On souhaite disposer d’une liste de liens. Lors d’un clic sur un lien de cette liste, l’encart correspondant doit s’afficher pour illustrer davantage son sens. Eventuellement, lorsque l’on reclique sur ce même lien, le visiteur est transporté sur la page en question.

J’ai grassé les mots importants de ce besoin. Vous le verrez par la suite, ils vont régir le comportement du script.

La structure HTML

Nous allons donc nous retrouver avec trois grosses parties dans le code :

• la liste de liens, une balise ul semble toute indiquée)
• une liste de textes correspondants, il n’a pas lieu d’être visible pour l’utilisateur final concerné par le code
• un bloc conteneur neutre destiné à recevoir les textes d’enrichissement de manière visuelle

Des mots au code, voici ce que donnerait la structure balisée :

<body>
<!-- (...) -->
	<div id="conteneur_cible"></div>
	<!-- (...) -->
	<ul id="liens_etendus">
		<li><a href="page1.html" class="page1">Page 1</a></li>
		<li><a href="page2.html" class="page2">Page 2</a></li>
		<li><a href="page3.html" class="page3">Page 3</a></li>
	</ul>
	<!-- (...) -->
	<div id="conteneur_source">
		<h2>Titre</h2>
		<p>Texte explicatif apportant de la cohérence aux utilisateurs dépourvus de JavaScript et d'interprétation des feuilles de style.</p>
		<ul>
			<li class="page1">Texte page 1</li>
			<li class="page2">Texte page 2</li>
			<li class="page3">Texte page 3</li>
		</ul>
	</div>
<!-- (...) -->
</body>

L’ordre de la structure importe peu mais dans tous les cas, leur position dans le flux HTML dépend avant tout de leur importance au sein de celui-ci. De manière générale, il vaut mieux disposer le contenu principal tout en haut du flux et le faire suivre par le contenu secondaire tels que les menus de navigation et les textes supplémentaires.
Je pense que le code parle de lui-même, posez vos questions en commentaires si jamais il y a besoin d’explications plus poussées.

Côté HTML tout est réglé avec ceci. Il ne restera éventuellement que du travail de stylage pour lui donner une apparence plus conviviale.
Vous remarquerez qu’il n’y a aucune mention à du JavaScript à l’intérieur de ce code et ce sera le cas jusqu’au bout. C’est tout l’intérêt de séparer fond et forme et donc, du JavaScript non intrusif.

Le code Javascript

J’ai pris la décision d’écrire ce code pour jQuery car cette bibliothèque (ou framework) est embarquée dans WordPress et réduit drastiquement la quantité de code à écrire pour produire des résultats.

Dans la pratique, le code va se charger dès que possible (c’est à dire dès que le DOM est prêt) et exécutera une méthode en se servant des paramètres prédéfinis ou passés manuellement à la classe. Le code suivant est structuré et suffisamment commenté pour le comprendre sans trop de difficulté. J’expliquerai en-dessous sa logique :

/*////////////////////////////////////////
// Classe statique 'oncletom_text_grabber'
// # Permet d'afficher un slide d'informations en cliquant sur un lien
// # C'est rigolo et en plus ça sert à quelque chose
// @ parametres (objet, optionnel) : objet de clé:valeur paramétrant le comportement
////////////////////////////////////////*/
function oncletom_text_grabber()
{
	var parametres = arguments.length == 1 && typeof arguments[0] == 'object' ? arguments[0] : {};
	//Paramétrage de la fonction
	//# permet un lancement de la classe avec un paramétrage par défaut
	parametres.source = typeof parametres.source == 'undefined' ? '#conteneur_source > ul > li' : parametres.source;
	parametres.bindto = typeof parametres.bindto == 'undefined' ? '#liens_etendus a' : parametres.bindto;
	parametres.target = typeof parametres.target == 'undefined' ? '#conteneur_cible' : parametres.target;
	/*////////////////////////////////////////
	// Méthode publique 'ot_text_caller'
	// # Récupère le contenu associé à l'attribut 'rel'
	// # Méthode à appeler sur un évènement
	////////////////////////////////////////*/
	function ot_text_caller()
	{
		//sélection de l'élément à récupérer
		var id = $(this).attr('class');
		//hop ! on vérifie c'est déjà ouvert. Auquel cas le lien redevient cliquable
		if( $( parametres.target ).attr('class') == id )
		{
			return true;
		}
		//on nettoie le contenu de la destination
		$( parametres.target ).empty();
		$( parametres.target ).attr({ 'class' : '' });
		//on remplit la destination avec le bon contenu
		//on le fait en utilisant une expression régulières pour récupérer l'élément voulu
		$( parametres.target ).fadeIn( 'slow' ).append(  $( parametres.source+"."+id ).html() ).toggleClass( id );
		//évite que le lien soit cliqué
		return false;
	}
	//On greffe les différentes méthodes
	$( parametres.bindto ).click( ot_text_caller );
}
//exécution automatique de fonctions au lancement du document
$( oncletom_text_grabber );
//FACULTATIF
//pour assigner une deuxième liste de liens, il suffirait d'écrire le code ci-contre, par exemple :
//tous les paramètres non renseignés prennent la valeur par défaut de la classe
$( function(){ oncletom_text_grabber({ 'target' : '#nouveau_conteneur_cible', 'bindto' : '#exemple_entete ol a[@rel]', 'source' : '#liste_source2' }); } );

1. Dans un premier temps, je m’applique toujours à pouvoir proposer une utilisation de la classe sans avoir à fournir de paramètre lors de son appel. C’est un côté pratique qui permet en plus de documenter les différentes options possibles. Ces options correspondent aux différents sélecteurs jQuery dont on aura besoin par la suite ;
2. Dans un deuxième temps, je déclare une méthode interne à la classe. La cascade des accolades fait qu’elle n’est accessible que depuis la classe. Cette méthode sera assignée à l’évènement onclick de tous les éléments concernés par parametre.bindto. En clair, des liens hypertextes. Le this y fait référence.
   1. On stocke dans la variable interne id le nom de la classe. En effet, la classe du lien permet de récupérer le bon texte dans el conteneur source (parametre.source),
   2. On vérifie que le conteneur cible ne porte pas le même nom de classe : si oui, on suit le lien, si non, on affiche d’abord le texte complémentaire (la suite),
   3. Le passage le plus délicat consiste à extraire ce qu’il faut et le placer où il faut. Heureusement jQuery dispose de deux fonctions magiques : append() et html(). La première rajoute du HTML à la suite du sélecteur tandis que la deuxième extrait le HTML par sélection. Le fonctionnement en chaîne de jQuery permet de réaliser tout ceci en une ligne,
   4. Pourquoi un return false; pour terminer ? Tout simplement pour éviter que le lien hypertexte contenu dans l’attribut href du lien soit suivi.
3. Dans un troisième temps, on assigne la méthode déclarée juste avant. A chaque clic de chaque élément, elle sera appelée et surtout, aura accès à tous les paramètres de la classe ;
4. Enfin, après avoir clôturé la classe, on l’exécute dès que le DOM est chargé.

Conclusion et résultat

Pour que ce code soit effectif, il faut bien évidemment l’insérer à même la page ou bien en appelant un script externe (cette méthode est recommandée justement pour dissocier fond et forme). Il faut aussi penser à inclure jQuery dans votre page sans quoi le compilateur JavaScript va tirer la tête.

Pour résumer, je résume la pensée des bonnes pratiques du JavaScript non intrusif, prouvant si besoin en était que JavaScript est loin d’être le Diable :

1. définir sa structure HTML
2. styler le HTML
3. ajouter le JavaScript en surcouche

Ainsi, on ne pénalise personne (y compris en cas d’erreur de programmation), on conserve un code lisible tout en facilitant sa réutilisation dans un autre document.

Voici donc mon constat de départ :

• un client doit pouvoir saisir un seul article s’il le veut
• un client doit pouvoir saisir 10 articles s’il le veut
• un client doit pouvoir saisir 100 articles s’il le veut
• mais celui qui n’en saisit que 10 ne doit pas être gêné par 100 lignes de formulaire à remplir
• un débutant doit pouvoir saisir 100 lignes sans avoir de mode d’emploi sous la main

Donc ma solution a été très simple : je ne mettrai qu’une ligne.

L’idée

Comment faire pour satisfaire tout le monde, les gros donneurs d’ordre comme les petits ?
En faisant en sorte que le formulaire s’adapte à leur besoin. Je voulais donc qu’à chaque ligne complétée s’en ajoute une autre avant de passer à la validation finale. Place au combo JavaScript + DOM = Ajax.

La version dégradée

Une bonne pratique de l’Ajax est de partir du cas particulier : celui où les conditions ne sont pas requises. En clair, une personne qui n’a pas JavaScript d’activé ou pas de JavaScript tout court.
Conclusion, j’ai décidé de générer un tableau en HTML de 10 lignes. 10 est un choix arbitraire, modifiable à tout moment et qui ne doit donc pas gêner la version dynamique en cas de changement (ajout de colonne, ajout de lignes).

La version Ajax

On peut manipuler le document à loisir grâce à JavaScript. Avec un code propre et ordonné c’est d’autant plus simple. Alors voici la logique à mettre en oeuvre :

1. éliminer toutes les lignes dont on ne veut pas et n’en garder qu’une
2. assigner à chaque champ de formulaire de la ligne (input, select, textarea) une fonction de vérification : si tous les éléments de la ligne sont remplis / cochés et qu’il n’y a pas de ligne après, on clonera la ligne
3. cloner la ligne en la vidant de ses valeurs, en modifiant les noms de champ pour les rendre exploitable après coup

Ce qu’on l’on veut étant relativement simple, le code doit l’être également ! Le résultat aussi, la preuve en mouvement.

Au final, 50 lignes de JavaScript ont suffit à transformer un tableau complètement statique en tableau dynamique, s’adaptant à la demande de n’importe quel client. Client qui pourra également utiliser le clavier pour davantage d’efficacité de saisie.

C’est à dire exactement ce que l’on souhaitait au départ.

Le code

Le tableau HTML

<table cellspacing="0" id="ajout_multi_articles">
  <thead>
    <tr>
      <th>Code article</th>
      <th>Quantité</th>
    </tr>
  </thead>
  <tbody>
    <tr class="article">
      <th><input type="text" name="article[1][ref]" maxlength="10" /></th>
      <td><input type="text" name="article[1][qte]" maxlength="5" size="5" /></td>
    </tr>
    <tr class="article">
      <th><input type="text" name="article[2][ref]" maxlength="10" /></th>
      <td><input type="text" name="article[2][qte]" maxlength="5" size="5" /></td>
    </tr>
    <tr class="article">
      <th><input type="text" name="article[3][ref]" maxlength="10" /></th>
      <td><input type="text" name="article[3][qte]" maxlength="5" size="5" /></td>
    </tr>
    <tr class="article">
      <th><input type="text" name="article[4][ref]" maxlength="10" /></th>
      <td><input type="text" name="article[4][qte]" maxlength="5" size="5" /></td>
    </tr>
    <tr class="article">
      <th><input type="text" name="article[5][ref]" maxlength="10" /></th>
      <td><input type="text" name="article[5][qte]" maxlength="5" size="5" /></td>
    </tr>
    <tr class="article">
      <th><input type="text" name="article[6][ref]" maxlength="10" /></th>
      <td><input type="text" name="article[6][qte]" maxlength="5" size="5" /></td>
    </tr>
    <tr class="article">
      <th><input type="text" name="article[7][ref]" maxlength="10" /></th>
      <td><input type="text" name="article[7][qte]" maxlength="5" size="5" /></td>
    </tr>
    <tr class="article">
      <th><input type="text" name="article[8][ref]" maxlength="10" /></th>
      <td><input type="text" name="article[8][qte]" maxlength="5" size="5" /></td>
    </tr>
    <tr class="article">
      <th><input type="text" name="article[9][ref]" maxlength="10" /></th>
      <td><input type="text" name="article[9][qte]" maxlength="5" size="5" /></td>
    </tr>
    <tr class="article">
      <th><input type="text" name="article[10][ref]" maxlength="10" /></th>
      <td><input type="text" name="article[10][qte]" maxlength="5" size="5" /></td>
    </tr>
  </tbody>
</table>

La fonction JavaScript

/**
 * Transforme un tableau multi-lignes en un tableau mono-ligne mais auto-extensible
 * Renomme également les noms de champ en suivant un masque paramétrable ; par défaut article[]
 *
 * @usage articlesMultiRows([{'css_id': ?, 'css_row_class': ?, 'check_inputs': ?}])
 * @param {Object} params Objet contenant (ou pas) les paramètres de contrôle de la classe
 */
function articlesMultiRows(params)
{
  this.row_number = 0;
  /*
   * Extension des paramètres par défaut
   */
  var params = params || {};
  params.css_id = params.css_id || 'ajout_multi_articles';
  params.css_row_class = params.css_row_class || 'article';
  params.check_inputs = params.check_inputs || 'input,select,textarea';
  /**
   * Initialise le tableau de données et accroche les méthodes dynamiques
   */
  this.init = function(){
    //aucun ID détecté, pas la peine de continuer plus loin
    if (!$(params.css_id))
    {
      return false;
    }
    //on récupère les lignes, on enlève la première du tableau et on supprime les autres
    var rows = $(params.css_id).getElements('tr.'+params.css_row_class);
    var row_first = rows.shift();
    rows.removeElements();
    rows = null;
    /*
     * On assigne l'évènement aux champs paramétrés de la ligne
     * On place le focus sur le premier champ
     */
    $ES(params.check_inputs, row_first).addEvent('blur', rowCheck);
    $(row_first).getElement('input').focus();
    row_number = 1;
    /*
     * On écrit un petit message sympathique indiquant le fonctionnement du bazar
     * On le fait via JavaScript car un utilisateur sans JS ne pourrait justement pas suivre les infos
     * Il est placé juste avant le tableau
     */
    new Element('p',{
          'class' : 'message'
          }).setHTML("Dès qu'un code article et une quantité sont saisis ci-dessous, <strong>une nouvelle ligne s'ajoute automatiquement</strong>.<br />Afin d'accélérer votre saisie, <em>utilisez la touche de tabulation de votre clavier</em> pour passer d'un champ à l'autre. Vous verrez, c'est facile et surtout efficace !").injectBefore(params.css_id);
  };
  /**
   * Vérifie si la ligne a entièrement été complétée et le cas échéant, déclenche l'ajout de ligne
   */
  this.rowCheck = function(){
    var row = { 'inputs' : 0, 'completed' : 0, 'dom' : $(this).getParent().getParent() };
    $ES(params.check_inputs, row.dom).each(function(input){
      //Un élément de plus ...
      ++row.inputs;
      //... dont on vérifie s'il est bien complété
      switch (input.getTag())
      {
        case 'input':
        case 'textarea':
          if (input.value.clean())
          {
            ++row.completed;
          }
        break;
        case 'select':
          if (input.selectedIndex >= 0 && input.selectedIndex < input.length)
          {
            ++row.completed;
          }
        break;
      }
    });
    /*
     * Pour insérer une nouvelle ligne, on doit avoir :
     * - autant de champs complétés que de champs existants
     * - aucun élément suivant
     */
    if (row.inputs === row.completed && !row.dom.getNext())
    {
      rowInsert(row.dom);
    }
  };
  /**
   * Insère une nouvelle ligne en clonant la dernière du tableau et la purgeant de ses valeurs
   *
   * @param {Object} row Noeud DOM correspondant à la ligne à cloner
   */
  this.rowInsert = function( row ){
    //On incrémente le nombre de lignes dispo
    //Ce numéro sert à changer les masques de nom de champ
    ++row_number;
    var row_clone = row.clone();
    //Clonage de la ligne
    $ES('input[type=text],input[type=password],input[type=hidden],textarea', row_clone).setProperty('value', '');
    $ES(params.check_inputs, row_clone).removeEvents('blur'); /* obligé car IE5+ clone aussi les évènements ... alors qu'il ne le devrait pas */
    $ES(params.check_inputs, row_clone).addEvent('blur', rowCheck); /* oui oui, IE5+ ne rassignait pas cet évènement comme il fallait malgré ça */
    //On remplace les noms des champs pour que permettre une utilisation des résultats $_POST
    $ES(params.check_inputs, row_clone).each(function(input){
      input.name = input.name.replace(new RegExp('^'+params.css_row_class+'\[[0-9]+\]'), params.css_row_class+'['+row_number+']');
    });
    //Injection de la ligne, une fois tout le travail terminé
    row_clone.injectAfter(row);
    //Nettoyage, le clonage, ça salit
    row_clone = null;
    row = null;
  };
  /*
   * Initialisation de la classe
   */
  this.init();
}
/*
 * Initialisation du tableau multi-lignes avec les options par défaut
 */
window.addEvent('domready', articlesMultiRows);

Lorsqu’on crée son premier site ou bien lorsqu’on navigue sur Internet, on est loin de se douter de l’étendue des conventions implicites qui facilitent la vie de tout le monde.
Et pourtant, passé l’apprentissage de la soupe de balises HTML et éventuellement des feuilles de style, il y a tout un tas de règles à respecter pour rendre la navigation aisée et non bloquante. Car oui, mal concevoir un site peut en bloquer, qu’il s’agisse de personnes atteintes de déficiences (physiques, mentales) ou pas.

Pour se sensibiliser à ces bonnes pratiques de la conception des sites Web, il existe depuis peu le guide Sites Web : les bonnes pratiques édité dans la collection Memento d’Eyrolles. Les habitués de l’initiative Opquast ne seront pas dépaysés étant donné qu’il en reprend les quelques 153 bonnes pratiques.

Mais au final, c’est quoi une bonne pratique ? Quelques règles que certains appliquent sans se rendre compte alors que d’autres sont au contraire bien loin de pouvoir ne serait-ce que les imaginer.

Exemples de bonnes pratiques simples que n’importe qui peut mettre en oeuvre :

• Le nom du site et/ou le nom de l’auteur sont indiqués sur chaque page ;
• Le soulignement est réservé aux hyperliens ;
• Le site propose au moins un moyen de contacter l’auteur et/ou le webmestre.

D’autres sont plus tordues au premier abord mais totalement justifiée, certaines abordant le délicat sujet de l’accessibilité :

• Les hyperliens sont visuellement différenciés du reste du contenu ;
• L’emplacement du menu principal de navigation est identique sur toutes les pages ;
• La navigation reste possible sur l’ensemble du site en utilisant exclusivement le clavier.

Comme vous pouvez le constater, ça n’a rien de bien sorcier. C’est un peu comme dire bonjour en se présentant à un inconnu : c’est le minimum à fournir pour établir une conversation. Lorsqu’on crée un site Web, c’est une conversation avec le monde que l’on établit