Des conférences de choix

Les thématiques abordées sont une nouvelle fois intéressantes. Si leur titre n’est pas forcément attirant, la qualité des intervenants fait qu’à n’en pas douter, on va encore en prendre plein les yeux : suffit de lire le programme.

Parmi celles qui retiennent toute mon attention :

• Intégrateurs, montez au front !
  Notamment parce que j’ai participé à l’enquête sur le dialogue entre webdesigner et intégrateur et qu’il s’agit d’une pierre angulaire de la réussite graphique d’un projet.
• Un seul Web
  Car l’an dernier j’avais été épaté par la présentation des nouveautés CSS3 de Daniel Glazman.
• CSS peut-il être orienté objet ?
  Parce que je crois beaucoup aux nouvelles méthodes de réutilisation et de conception CSS ; cette approche combinée à d’autres outils CSS est à mon avis la meilleure qui soit.
• CSS3 : Future Style Now
  Parce qu’il est toujours bon de savoir comment utiliser les technos que l’on utilisera dans pas trop longtemps.
• WCAG 2.0, Flash, PDF, Javascript et les autres sont dans un bateau
  Une bonne piqûre de rappel sur l’accessibilité et les différentes boîtes noires qui sont devenus des standards de facto.
• Les nouveaux standards du web et leur implémentation dans les navigateurs modernes
  Le titre parle de lui-même

C’est sans compter sur les ateliers techniques où là, je n’ai pas encore fait mon choix … la concurrence est rude

Atelier technique sur Gears

Il y a toutefois un atelier où je suis sûr d’être présent, c’est celui-ci : le Web en Offline avec Gears et HTML 5, à 14h00 pour la digestion . Et pour cause, je l’animerai … enfin, encore faut-il que j’en termine la présentation. En voici la description officielle :

Gears est un outil Open Source, majoritairement connu pour permettre à une page Web d’être consultable en étant déconnecté du réseau. Ce plugin pour navigateur Web propose pourtant d’autres briques utiles dans d’autres contextes, notamment les performances et le traitement d’un nombre important de données. C’est un outil unique permettant de créer des applications fonctionnelles hors-ligne et cross-brower sans avoir à recours à du client lourd (type application iPhone).

La présentation se focalisera sur la présentation des composants, des exemples d’utilisation mais aussi sur les contraintes et les choix de stratégie à adopter dans son code pour éviter la création d’usines à gaz.

L’atelier concluera sur l’avenir et HTML 5 dans la mesure où les travaux de Gears sont désormais intégrés à la spécification HTML 5.

Mais globalement, l’atelier s’articulera autour des points suivants :

• présentation des modules de Gears
• contraintes d’ergonomie
• implications en terme d’architecture de code
• débat ouvert avec l’assemblée

Le choix sera difficile avec en même temps un atelier de David Larlet et Charles McCathieNeville … où j’aurais aimé également être présent.

À samedi … et jeudi et vendredi pour d’autres

Articles relatifs

• Google Gears efficace (0 commentaires)
• Ajouter TinyMCE dans un plugin WordPress (13 commentaires)
• Widget Jaiku pour Netvibes : présentation et bilan du développement (5 commentaires)
• Widget Jaiku pour Netvibes 1.4 (1 commentaires)
• Transcender CSS : sublimez le design Web ! (15 commentaires)

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.

Articles relatifs

• Mes rendez-vous d’octobre/novembre : Web2, Paris-Web & cie (4 commentaires)
• Développement efficace avec les frameworks CSS (25 commentaires)
• Webdeux.connect 2.0, les 400 coups du réseau (8 commentaires)
• Transcender CSS : sublimez le design Web ! (15 commentaires)
• Sites Web : les bonnes pratiques (12 commentaires)

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.

Articles relatifs

• Réussir son blog professionnel − deuxième édition (9 commentaires)
• Quand faut-il s’arrêter de tweeter ? (6 commentaires)
• Prochainement : réussir son blog professionnel (28 commentaires)
• Netvibes Ginger : bien mais pas top (5 commentaires)
• High Performance Web Sites (5 commentaires)

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 ...

Articles relatifs

• Twitter, la mini-messagerie (6 commentaires)
• Quand Jaiku surpassera Twitter (6 commentaires)
• Quand faut-il s’arrêter de tweeter ? (6 commentaires)
• Netvibes Ginger : bien mais pas top (5 commentaires)
• La génération Y bouscule le monde du travail (7 commentaires)

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é.

Articles relatifs

• Modifier l’emplacement des données d’un serveur MySQL (36 commentaires)
• Configuration d’Apache, MySQL et PHP à base de liens symboliques (12 commentaires)
• Un bon client FTP pour Gnome : Filezilla (4 commentaires)
• Ubuntu 7.04 : configurer les effets graphiques (4 commentaires)
• REnouveau : Reverse Engineer nouveau (6 commentaires)

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 ?

Articles relatifs

• Emu Nova 2.1 : coulisses d’une refonte ergonomique et visuelle (5 commentaires)
• Widget Jaiku pour Netvibes : présentation et bilan du développement (5 commentaires)
• Transcender CSS : sublimez le design Web ! (15 commentaires)
• Modifier du HTML à la volée de manière non intrusive (1 commentaires)
• Microformats : comment microformater du contenu déjà existant ? (2 commentaires)

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.

Articles relatifs

• Sites Web : les bonnes pratiques (12 commentaires)
• Microformats : republier et donner du sens aux contenus (8 commentaires)
• jQuery : optimiser l’utilisation des sélecteurs CSS (5 commentaires)
• Conventions de programmation : la nécessaire maturité (19 commentaires)
• Transcender CSS : sublimez le design Web ! (15 commentaires)

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

Articles relatifs

• Conventions de programmation : la nécessaire maturité (19 commentaires)
• WordPress en tant que dépendance SVN (7 commentaires)
• Modifier du HTML à la volée de manière non intrusive (1 commentaires)
• Ajouter TinyMCE dans un plugin WordPress (13 commentaires)
• Widget Jaiku pour Netvibes : présentation et bilan du développement (5 commentaires)

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

Articles relatifs

• Modifier du HTML à la volée de manière non intrusive (1 commentaires)
• Microformats : republier et donner du sens aux contenus (8 commentaires)
• L’écrit Web : traitement de l’information sur Internet (5 commentaires)
• Conventions de programmation : la nécessaire maturité (19 commentaires)
• Transcender CSS : sublimez le design Web ! (15 commentaires)