J’ai eu peur il y a 2 semaines en arrivant à Paris-Web 2008 : en discutant avec plusieurs personnes, il se trouve que peu d’entre elles connaissaient les frameworks CSS. Je craignais de n’attirer personne avec ce sujet lors des ateliers du samedi.

Les frameworks CSS ont été mentionnés la première fois dans la conférence Working in the Now (visualiser la présentation). Au final, on n’était pas loin de faire salle comble avec plus d’une vingtaine de participants à vue de nez.

Une petite scéance de rattrapage s’impose

Pourquoi avoir choisi ce sujet ?

J’ai lu un article sur l’importance du rythme vertical l’an dernier sur Biologeek et ça m’a sensibilisé au fait qu’on pouvait rendre la lecture d’un site tout simplement en rendant prédictible la position du texte.

Entre temps j’ai également lu l’excellent Transcender CSS d’Andy Clarke. J’y ai été sublimé par des présentations de sites totalement en grille.

Depuis je suis devenu fan de Blueprint CSS (je crois que ça s’est remarqué lors de mon intervention ). J’ai commencé à l’utiliser sur des projets personnels puis dans un cadre professionnel. J’utilisais déjà symfony comme framework PHP et jQuery comme framework JavaScript alors pourquoi pas Blueprint ?

Comme le suggérait très justement Christian Heilmann dans sa présentation, l’utilisation d’outils déjà existants est nécessaire pour réduire les coûts de production. C’était déjà un bon alibi mais je les apprécie aussi parce qu’on gagne un temps fou ! On se concentre sur le code métier, pas le reste.

La présentation

Je n’en dis pas plus, je vous laisse lire la présentation. Ayez toutefois en tête qu’en vrai elle dure facilement 1h.

Ce qu’il faut en retenir

J’ai rencontré 2 types de réactions lorsque j’ai parlé des frameworks : les enthousiastes et les réfractaires.

Je ne reviens pas sur les enthousiastes : il suffit de lire ma présentation. Les atouts les ont clairement séduit.
Je m’intéresserai plutôt aux réfractaires. Assez paradoxalement, ce n’est pas dans la salle que je les ai eu mais en dehors. Les principaux arguments étaient :

• ça rajoute des kilo-octets superflus
• on perd le contrôle de notre code
• j’utilise déjà le mini-framework d’un collègue ou qui existait dans mon entreprise avant que j’arrive

Ces arguments sont tout à fait acceptables … mais ça dépend dans quel contexte.

Exemple de mise en forme en grille

Les sites à la recherche de performances exceptionnelles, ceux pour qui un Ko supprimé économise plusieurs Go de bande-passante par jour … oui ceux-là ont un grand intérêt à réfléchir à l’adoption d’un framework, aussi compressé qu’il soit.
Je ne me fais pas de soucis pour eux : en général ils ont leur propre framework, totalement adapté à leur besoin. Cependant ça n’empêche pas d’aller prendre des idées ailleurs et de découvrir de nouveaux concepts. Puis de les intégrer.

Lorsqu’on adopte un outil de développement rapide (RAD), la conception ne se fait plus par rapport à nos habitudes mais par rapport à des principes établis. On ne fait plus forcément comme on veut mais les meilleurs frameworks disposent de fonctionnalités répondant à cette problématique. Le compressor de Blueprint en est un parfait exemple.
Il permet de construire une version de Blueprint adaptée à son besoin, inclut des feuilles de notre choix et compresse le tout en un seul fichier prêt à la mise en production.

Maintenant l’avantage d’un framework c’est qu’une communauté ou un groupe de personnes compétentes en ont la gestion. Ces mainteneurs produisent une documentation, des spécifications et un code suffisamment compréhensible à lire. Ce n’est pas forcément le cas de Joe le développeur à qui on aura demandé 36 choses en même temps.
Je fais davantage confiance à un outil éprouvé avec succès sur des milliers de projets qu’un outil développé sur un coin de bureau, malgré toute la bonne volonté de son concepteur.
C’est également un risque certes mais un bon outil délaissé aura tout de même le mérite de fonctionner … et d’avoir davantage de chances de trouver un repreneur.

Une remarque intéressante a également émergé de l’atelier : faut-il utiliser un framework CSS avant ou après que la créa graphique ait été établie ?
Je réitère ma réponse : l’idéal est que tout soit pris en charge le plus tôt possible. Autrement dit, intégrer les contraintes du framework dès la conception graphique est un gros atout. Le découpage de la maquette n’en sera que facilité et ça évitera tout bricolage.
Certains outils l’ont d’ailleurs bien compris en proposant des supports pour graphistes au format PSD, Visio, Fireworks etc.

Feuilles de dessin pour 960 Grid System

Conclusion

Quoiqu’il en soit, les frameworks CSS sont à mon avis promis à un bel avenir dès lors que les critères d’industrialisation auront débarqué au sein des agences Web.

Aujourd’hui une petite agence a tout à gagner à maîtriser de tels outils et à annoncer qu’elle développera mieux, plus vite et moins cher. Le prix ne fait pas tout : ce sont les outils et la qualité du développement. Tous les frameworks cités sont également des logiciels libres.

J’espère que cet aperçu rapide aura ouvert les yeux à certains d’entre vous. Je suis preneur de vos retours, surtout en entreprise. Ça vaut également pour celles et ceux qui ne sont toujours pas convaincu de l’intérêt des frameworks CSS

Remarque : il y avait 2 ateliers complémentaires à Paris-Web :

• Optimiser ses CSS
• Cascade et héritage : concevoir, organiser, optimiser et maintenir ses feuilles de style

Après 10 ans de règne d’Internet Explorer et un succès d’adoption en demi-teinte pour son successeur, Internet Explorer 7, Microsoft a fort à faire pour convaincre avec Internet Explorer 8.
La firme de Redmond est confrontée à ce fâcheux dilemne :

• considérer ses clients existants
• réagir aux pressions exercées par la concurrence, Firefox en tête

On peut à ce titre saluer le choix de Microsoft d’enfin embrasser les standards du Web. La huitième version de son navigateur Web adoptera ainsi par défaut une interprétation respectant ces standards (HTML, XHTML, CSS 2, partiellement CSS 3).
Ce choix a notamment été facilité par la proposition d’une nouvelle balise propriétaire : X-UA-Compatible.

Solution de facilité ou excellent compromis ?

Internet Explorer 6 : retour de boomerang

Si les développeurs de sites Web « pour Internet Explorer 6 » ont pu se réjouir d’un certain laxisme d’interprétation des standards du Web, ils vont payer dès demain le prix d’une catastrophe annoncée.
Des milliers (des millions ?) de sites Web et des milliers d’applications spécifiques reposent ou ont été conçues uniquement pour Internet Explorer 6. Ce navigateur n’est désormais plus supporté par Microsoft et ce dernier pousse les utilisateurs à adopter au moins Internet Explorer 7. Il faudra cependant disposer de Windows XP et son Service Pack 2 pour en « profiter ».

Mais alors, que faire de ses sites et applications vouées à une double obsolescence : la leur et celle de leur navigateur compatible ?

La solution X-UA-Compatible

En adoptant par défaut le support des standards avec Internet Explorer 8, Microsoft ne pouvait pas fermer la porte à sa base de clients et d’utilisateurs.
Au lieu de les flouer et de les ignorer, une nouvelle balise HTML propriétaire pourra être incluse dans l’entête de toutes les pages HTML : X-UA-Compatible.
Cette entête pourra également être renvoyée par le biais d’une entête HTTP par votre serveur Web favori.
Par « propriétaire », j’entends que seul Internet Explorer 8 (et peut-être ses successeurs) sera en mesure d’interpréter la valeur de cette balise. Elle est fort heureusement respectueuse du standard HTML et n’empêchera donc pas vos pages Web de passer au validateur sans provoquer d’erreur.

Cette balise a pour effet d’indiquer à Internet Explorer quel moteur de rendu utiliser. Autrement dit c’est le site/application Web qui influe sur le comportement schizophrénique du navigateur et en aucun cas l’utilisateur final.
Si Internet Explorer 8 ne rencontre pas cette balise, il utilisera son moteur de rendu respectueux des standards. Autrement, il basculera dans le mode d’interprétation correspondant à la version spécifiée, à savoir Internet Explorer 6 ou Internet Explorer 7.

Il faut toutefois avoir en tête que cette bascule n’affecte pas que l’interprétation d’HTML mais aussi celles des CSS et de JavaScript.
Autrement dit, si vous décidiez un jour d’enlever la balise X-UA-Compatible, il y a de très fortes chances que vous souscriviez à une grosse couche de recettage fonctionnel, tant du côté CSS que JavaScript.

Bouton d'émulation Internet Explorer 7 ... équivoque ?

Les options de compatibilité, le casse-tête

Microsoft propose 3 modes de rendu :

1. IE=7 pour forcer tout type de rendu en respect des standards à la sauce IE7 (respect approximatif donc) ;
2. IE=EmulateIE7 pour respecter les standards sauf quand la page est moisie (le fameux mode Quirks). Autrement dit, un Internet Explorer 8 déguisé en IE7 ;
3. IE=EmulateIE8 pour respecter les standards (mais vraiment) sauf quand la page est moisie. Autrement dit un Internet Explorer 8 avec quelques laxismes.

Si on compte avec ça la possibilité pour l’utilisateur de basculer de lui-même vers un mode de rendu « dégradé », difficile de choisir la moindre balise à appliquer.
Le navigateur sera cependant strictement compatible par défaut (pas besoin d’ajouter la moindre entête ou balise pour cela).

Quelle stratégie adopter pour ses sites Web ?

Si la présence de cette balise est en soi une bonne nouvelle, il convient de se poser les bonnes questions : X-UA-Compatible ne doit pas permettre à l’errance Internet Explorer de se reproduire à nouveau. La facilité ne doit pas être le seul facteur à envisager.
Voici quelques intérêts à utiliser X-UA-Compatible :

• manque de compétences internes sur HTML/XHTML et CSS
• besoin rapide d’adapter l’existant au nouveau logiciel
• parc d’applications non-maîtrisé ou doté d’une politique de mise à niveau stricte
• pas de budget pour redévelopper le site/application Web
• la refonte du site/application aboutira plus tard que le déploiement d’Internet Explorer 8

Vous remarquerez que je n’aborde en aucun cas la question des nouveaux sites et applications et/ou leur refonte. Ceci pour la simple et bonne raison suivante : X-UA-Compatible est un palliatif à court-terme pour conserver un maximum d’applications fonctionnelles en attendant leur adoption des standards.

Il y a de très fortes chances que cette balise ne soit plus prise en compte dans la version 9 du navigateur ; tout du moins, je l’espère fortement.
En clair et pour résumer en 2 lignes :

1. X-UA-Compatible n’est à utiliser que sur des sites existants, peu conformes aux standards et nécessitant une compatibilité maximale très rapide avec Internet Explorer 8
2. les refontes doivent impérativement se concentrer sur les standards et agir comme si X-UA-Compatible n’existait pas

Conclusion : l’avenir passe par les standards

Si ce résumé éveille des craintes au plus profond de vous-même, sachez qu’il n’est pas trop tard. Comme tout choix logiciel ou matériel, il faut anticiper à moyen et long terme en évitant de s’enfermer dans une solution totalement fermée.

Les 99% des parts de marché d’Internet Explorer d’antan sont la preuve même qu’on ne peut se reposer sur un taux d’adoption mais bel et bien sur une base qualitative saine : le Web de demain sera sur vos ordinateurs, vos PDA, vos téléphones mobiles, vos téléviseurs, vos frigos, vos montres, vos consoles de jeux et même vos murs et tables basses. Dans tous les cas, la garantie que vos sites et applications fonctionnent c’est le respect des standarts ; les standards du Web, pas ceux définis par Internet Explorer 6.

X-UA-Compatible est une solution à court terme, en aucun cas une fin en soi ou une garantie de pérennité.

J’ai publié il y a quelques semaines un widget Jaiku dans l’écosystème Netvibes. Autrement dit, on peut désormais interagir avec le sous-employé Jaiku depuis son compte Netvibes en levant à peine le petit doigt.

La réalisation de ce widget était pour moi l’occasion de réaliser mon premier widget utilisant la plateforme UWA : un développement rendu compatible pour plusieurs plateformes dont iGoogle, MacOS X Dashboard, Windows Live etc.

Présentation du widget Jaiku pour Netvibes

Avant de rentrer dans les détails techniques, faisons ensemble un petit tour de ce qu’est capable de faire le widget Jaiku. Rien de bien méchant puisqu’il fait ce qu’on veut : lire et envoyer les messages. Faut savoir rester simple

Widget Jaiku pour Netvibes

Je ne me cacherai pas que je me suis largement inspiré du widget Twitter pour Netvibes au niveau de la présentation tout en ajoutant ma touche personnelle.

L’écran de connexion accueille directement avec des champs identifiant et mot de passe pour faciliter son utilisation. Pas besoin d’aller fouiller dans les options. Un petit confort on dira.

L’entête contient ce qu’il faut pour envoyer des messages : votre lieu de présence et le champ de saisie. Le compteur de texte se met à jour à chaque caractère saisi et surtout, votre saisie n’est pas bloquée une fois que vous atteignez la limite. Il n’y a rien de plus pénible que ça.

Le gros du morceau réside dans les onglets : pour une fois vous pouvez facilement naviguer d’une ligne de temps à une autre. Choisissez les messages de vos contacts, les vôtres (un peu narcissique non ?) ou encore les messages publics.
Les 3 onglets sont paginés à la convenance de l’utilisateur, de 1 à 20 messages par page.

J’ai ensuite agrémenté de plusieurs fonctionnalités que j’apprécie à l’usage (à vous de me dire si c’est aussi le cas) :

• possibilité de répondre à un message en pré-remplissant le champ de saisie avec ce qu’il faut (et ce que l’API Jaiku permet de faire …)
• icône signalant l’origine des messages affichés (flux RSS, Twitter, Last.fm etc.)
• filtrage de ses propres messages : vos messages n’apparaîtront pas dans la ligne de temps des contacts (ce qui en soit n’est pas plus mal)
• formattage des messages avec une meilleure reconnaissance de URL que le widget Twitter et surtout, une reconnaissance des noms d’utilisateurs (@utilisateur) et des noms de canaux (#canal) … vous permettant de leur répondre en cliquant sur leur nom

Il resterait encore pas mal de choses à faire mais on arrive malheureusement assez rapidement aux limites des 2 services.

L’API Jaiku

L’API Jaiku est très bien mais un peu chiche en services.

Le nombre de flux en récupération est suffisant : contacts, messages, informations personnelles.
En revanche les méthodes d’envoi sont limitées et pour cause, il n’y en a qu’une : envoyer un message.

Il ne manque pas grand chose pour qu’on puisse tout faire :

• obtention de la liste des icônes personnalisées
• préciser à quel message on adresse une réponse (pour éviter de casser les discussions)
• une gestion de messages privés (et les flux qui vont bien)
• une API qui ne souffre pas d’autant de délai … parfois il faut attendre 3 heures avant d’avoir un flux actualisé. Pas pratique pour de la messagerie en temps quasi-réel

Ces demandes ont été faites mais bon, il faudra attendre la relance de Jaiku avec Google App Engine … très bientôt visiblement.

Et du côté de Netvibes ?

Le développement du widget repose sur l’API UWA de Netvibes et donc par conséquent, c’est du développement 99% JavaScript.

Heureusement tout n’est pas à faire puisqu’UWA fournit une base d’outils et quelques fonctionnalités natives comme la pagination ou les onglets.

Quels avantages à utiliser Netvibes UWA ?

La spécification UWA permet donc à partir d’un développement unique de le porter sur d’autres plateformes de blogs en un minimum d’efforts (très souvent aucun). Il faut savoir qu’à chaque plateforme de widget il y a une manière de développer différente.

Alors plutôt que de parier sur un cheval, avec UWA, on peut parier sur tous. Et ne faire qu’un seul développement.

Le développement d’un widget aboutit très généralement à l’ajout dans l’écosystème Netvibes. Le widget se retrouve ainsi à la portée de toutes les pages de démarrage par le biais de son moteur de recherche intégré.

Côté développement, tout reste globalement simple quand on veut faire du simple.

Mais quelle galère à développer avec Netvibes UWA …

En revanche ça devient beaucoup moins drôle quand on tombe sur des besoins mal couverts par la documentation.
Et quand je dis mal couvert, ça inclut :

• pas de documentation du tout
• une documentation partielle et pas suffisamment verbeuse (genre pour les onglets et la pagination)
• une documentation obsolète et pas recommandée de leur propre aveu (le stockage des mots de passe)

L’adoption d’un service et sa qualité se jugent à mon avis par sa documentation. Certes des efforts sont faits mais leur API deviendra crédible et fiable le jour où elle sera à jour et complète.

En plus de ça, certaines fonctionnalités sont elles aussi incomplètes.

Au hasard, le processus de l10n : à implémenter soi-même et encore, il ne pourra pas couvrir tous les besoins comme les préférences. C’est d’autant plus dommage que leur système est particulièrement au point pour l’interface traduite en une dizaine de langues.
Mais pas les widgets …

Toute à l’heure j’évoquais les mots de passe. Il y a bien un mécanisme qui permet de les stocker mais il agit comme il veut : on ne peut stocker qu’un mot de passe par widget et surtout, on ne peut pas l’utiliser autrement que dans le cas d’une identification HTTP.
Autrement dit, le stockage d’un clé d’API se fera dans un champ texte standard.

Ça ne serait pas gênant si la plupart des widgets étaient exécutés dans une iframe et que cette dite iframe embarquait dans l’URL toutes les préférences enregistrées. Donc votre clé d’API.
Pourquoi c’est gênant ? Car il y a un mécanisme inhérent à tout navigateur Web qui s’appelle le Referrer. En clair, quand vous affichez une page, votre navigateur envoie l’adresse de la page appelante.
Je me passerai du dessin …

Enfin, et pour terminer sur une note un peu moins noire, l’environnement de développement est un superbe outil pour tester son widget de manière indépendante. C’est à dire sans se connecter sur netvibes.com.
Enfin là où le bas blesse c’est que les comportements et la présentation sont différents entre l’environnement de développement et Netvibes.

Ce qui sous-entend des bugs présents en développement et pas en production, la gestion des mots de passe qui diffère en développement de la production et du paramétrage spécifique pas documenté.

Proxy local pour widget Netvibes

Le proxy de développement Netvibes indiqué dans la FAQ est fonctionnel mais trop minimaliste. On peut en effet récupérer les données mais dès qu’il s’agit d’en envoyer, c’est cuit.

J’ai donc adapté le proxy du Yahoo! Developer Network à mes besoins en ajoutant plusieurs fonctionnalités :

• mise en cache des requêtes GET pour accélérer les chargements de page et éviter de cramer trop de requête auprès de fournisseurs les limitant (qui a dit Twitter ?)
• transmission des données POST ; c’est ce qu’il manquait le plus à la version fournie par Netvibes
• compatible texte/JSON/XML ; le proxy renvoie les bonnes entêtes en fonction de la demande

<?php
define('CACHE_TTL', is_int($_GET['cache']) ? $_GET['cache'] : 3600);
define('CACHE_FOLDER', dirname(__FILE__).'/cache');
//
$session = curl_init($_GET['url']);
// If it's a POST, put the POST data in the body
if (isset($_POST) && !empty($_POST))
{
  $postvars = '';
  while ($element = current($_POST))
  {
    $postvars .= key($_POST).'='.$element.'&';
    next($_POST);
  }
  curl_setopt ($session, CURLOPT_POST, true);
  curl_setopt ($session, CURLOPT_POSTFIELDS, $postvars);
}
// Play with some cache
$md5sign = md5($_GET['url'].$postvars);
$md5file = CACHE_FOLDER.'/'.$md5sign;
/*
 * Read cache
 */
if (file_exists($md5file) && filemtime($md5file)+CACHE_TTL > time())
{
  curl_close($session);
  send_headers_content_type($_GET['type']);
  readfile($md5file);
  exit();
}
// Don't return HTTP headers. Do return the contents of the call
curl_setopt($session, CURLOPT_HEADER, false);
curl_setopt($session, CURLOPT_RETURNTRANSFER, true);
// Make the call
$output = curl_exec($session);
$fp = fopen($md5file, "wb+");
fwrite($fp, $output);
fclose($fp);
send_headers_content_type($_GET['type']);
echo $output;
curl_close($session);
/*
 * Functions
 */
function send_headers_content_type($type)
{
  // Set the Content-Type appropriately
  switch ($type)
  {
    case 'text':
    default:
      header("Content-Type: text/plain");
    break;
    case 'xml':
      header("Content-Type: text/xml");
    break;
    case 'json':
      header('Content-Type: text/x-json');
    break;
  }
}
?>

En revanche, je serais vous, j’éviterais de m’en servir publiquement car il n’y a aucune vérification de sécurité donc à moins que vous ayiez envie de servir de relais à spam, le mieux est de n’utiliser ce proxy que sur une instance locale ou bien de davantage le blinder.

Conclusion

On arrive désormais au terme de ce billet fleuve

Quoique je puisse en dire, Netvibes UWA est quand même fort sympathique et permet d’aboutir à des temps de développement assez courts une fois la majorité des problèmés rencontrés. Nul doute que votre premier développement sera le plus compliqué. Surtout si comme moi vous avez envie de tout utiliser : pagination, onglets et AJAX à droite à gauche.

Dans tous les cas, une bonne conception de l’application vous sauvera la mise et évitera trop de réécriture de code.
L’implémentation de la pagination et des onglets est particulièrement douloureuse si vous n’utilisez pas de programmation objet. Soyez-en avertis.

Je me suis personnellement bien amusé à développer en utilisant UWA et en jouant avec l’API Jaiku. Cette dernière met vraiment l’accent sur le JSON ce qui est très pratique pour manipuler des données distantes de manière minimaliste.

Une fois que ces 2 plateformes arriveront à maturité, il y aura de quoi faire d’encore plus belles applications.

N’hésitez pas à utiliser Jaiku sur Netvibes, à me laisser vos remarques et à partager votre expérience de développement de widgets si le cœur vous en dit

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 ?

Mon premier grand fait d’armes sur le Web aura été le lancement d’Emu Nova en octobre 2002. Les grandes lignes du site ont toujours été jeux vidéo rétro, émulation et aide aux utilisateurs.
J’ai ainsi décidé d’offrir une nouvelle garde-robe à Emu Nova le 1^er avril 2008 pour renouveler une interface vieille de 3 ans. 3 ans où le contenu s’est accumulé, les menus se sont désordonnés et la navigation s’est complexifiée.

Aujourd’hui je vous dévoile les tenants et aboutissants d’un travail de réflexion mené sur plusieurs mois tant en terme d’ergonomie, d’accessibilité et de respect des standards du Web.
Où l’on parlera de jQuery, Blueprint et d’interface orientée utilisateur.

Objectifs de la refonte

Comme je le disais, la plus grosse critique se tournait vers l’agencement du site : les menus étaient séparés en 2 et étaient peu visible.

Pire, il y avait tellement de contenu accumulé qu’au final l’utilisateur était obligé de scroller au mois une fois pour atteindre le contenu demandé.
J’ai donc opté pour un choix radical : tout reprendre de la feuille blanche et ne tenter de conserver que l’identité du site au travers de ses couleurs et de son logo.

Plusieurs objectifs ont émergé en griffonnant au fur et à mesure l’interface sur une feuille de papier :

• offrir une page d’accueil qui ne fasse pas doublon avec le reste du site
• offrir une page d’accueil mettant en avant du contenu pour inciter à visiter le site en profondeur (textes courts, images)
• davantage lier les forums et le site pour susciter l’interaction avec l’internaute
• offrir une interface lisible dont les contenus sont aisément identifiables sans effort cognitif
• offrir du contenu annexe en pied de page : je suis désormais intimement convaincu que le pied de page est le meilleur moyen de fidéliser un vagabond curieux qui n’a pas tiré satisfaction de la première lecture
• proposer un site conforme au standard XHTML 1 Strict en bannissant les mises en forme en tableau, entre autre

On le voit, les objectifs de surface sont résolument tournés vers l’interface utilisateur. Derrière il y avait également des objectifs de simplification et de mutualisation du code avec l’interface d’administration.

Choix technologiques

Plutôt que de réinventer la roue, j’ai souhaité utiliser les applications en qui je crois le plus. Je peux compter dessus tout en gagnant du temps. N’est-ce pas là l’essentiel ?

JavaScript : jQuery

Je suis un féroce utilisateur de jQuery que j’adore pour sa souplesse d’utilisation et sa syntaxe vraiment plaisante. Elle dépassera, à mon avis, largement le vieillissant couple Prototype/Scriptaculous d’ici la fin de l’année 2008.

jQuery sert de base à tout le code JavaScript :

• altérer l’interface pour construire le menu de navigation principal : sans JavaScript ça marche, avec c’est encore mieux !
• affichage des messages d’alertes pour les formulaires incomplets : pas de popup mais un message inséré à même la page
• ouverture des liens externes dans une nouvelle fenêtre
• diaporama de photos avec Lightbox ; personnalisé pour l’occasion afin de bénéficier de légendes plus détaillées

Il ne reste donc plus en tout et pour tout que 2 popup/alert/confirm obligeant à un affreux et désobligeant clic.

CSS : Blueprint

Blueprint est la librairie CSS la plus proche du Saint-Graal : facile d’utilisation et très puissante. Mon seul regret à l’heure actuelle est qu’elle ne fonctionne qu’en largeur fixe. Mais dans cette configuration elle joue parfaitement son rôle :

• construction de colonnes les doigts dans le nez
• rythme vertical respecté pour un confort de lecture accru
• construction typographique prémachée
• correctifs liés à Internet Explorer déjà intégrés

Une bonne présentation c’est une présentation sans contrainte : pas de couleur primaire, pas de difficulté à lire, pas de texte trop petit.

Le premier lecteur qui plisse les yeux c’est qu’il aura oublié d’allumer son écran

Transparence d’images : GIF ou PNG ?

Quitte à trancher dans le vif, le GIF a été abandonné au profit du PNG pour le logo.

Pour rappel, si la transparence est possible avec le GIF, il lui manque la couche alpha qui permet de mélanger transparence et couleur. Avec le PNG on peut frimer avec des contours ombrés et des reflets qui fusionnent parfaitement avec le décors.

Alors où est le problème ? Le sempiternel Internet Explorer 6 qui commence même à chauffer les oreilles à Microsoft. À tel point qu’il souhaite s’en débarrasser au plus tôt en poussant Internet Explorer 7, y compris pour les non-possesseurs du Service Pack 2 de Windows XP.
La transparence est affichée comme du gris. Magnifique. Sauf en utilisant jQuery.ifixpng, entre autre.

Emu Nova : carte de chaleurs, avant et après

Voici une comparaison des cartes de chaleur à 6 mois d’intervalle.

On remarque aisément que sur la précédente version les clics sont concentrés, notamment sur la partie haute de la page. Les quelques listes existantes mettent peu en valeur le contenu et de ce fait ne sont pas cliquées.

Sur la nouvelle version les clics semblent moins concentrés mais touchent globalement toute la page, exception faite des vignettes en image. Un problème ? Non pas vraiment puisqu’elles sont rafraîchies toutes les 3 heures ce qui fausse le calcul (qui s’étale sur 1 journée).

Notez aussi les clics en bas de page : le pied de page compte. Qui n’a pas eu envie qu’on lui suggère du contenu à lire une fois sa lecture terminée ?

Conclusion

Il n’est pas aisé de refondre une interface, surtout quand il y a derrière toute une troupe d’utilisateurs attachés à ses habitudes (ce qu’on peut comprendre).

Si on temporise les différentes phases, voici ce que cela donne :

• analyse des besoins, ressenti de la situation : plusieurs mois
• dessin de la nouvelle interface sur papier : plusieurs jours
• intégration HTML : plusieurs heures
• refonte du code : plusieurs jours
• corrections de bugs : plusieurs heures
• premières critiques : quelques minutes

Pas étonnant que ma régularité sur ce blog en aie pris un coup

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

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

Des sites déjà microformatés

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

Exemple avec Google Maps :

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

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

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

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

Exemple avec Yahoo ! Upcoming :

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

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

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

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

Identifier visuellement les microformats à intégrer

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

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

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

Exemple avec Wikia Search :

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

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

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

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

Exemple avec Clever Age :

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

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

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

Intégrer les microformats dans du (X)HTML

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

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

Microformater des données d’entités

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

Clever Age - Siège social : 01.53.34.66.10

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

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

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

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

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

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

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

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

Valider l’intégration des microformats

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

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

Conclusion

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

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

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

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

Je rédige sur ce blog depuis bientôt 3 ans, depuis plus de 5 ans sur Emu Nova et depuis quasiment 10 ans si on remonte à mon ancien site perso et mon site consacré à Star Wars. Ah l’époque des .fr.st .
Ce bagage m’a permis d’affiner mon écriture sur le Web mais je cherchais à l’améliorer. C’est précisément à ce moment qu’Olivier Ertzscheid offre la dernière préface issue de sa plume et qu’Élie Sloïm recommande un obscur livre : l’écrit Web.

J’apprécie ces hommes, entre autre, pour leur bonne parole donc il n’en fallait pas davantage pour me procurer cet ouvrage.

Pourquoi le lire ?

L’écrit Web se destine à toute personne désireuse de perfectionner son écriture. Et plus particulièrement l’écriture sur le Web.
Combien d’entre vous ou parmi vos connaissances n’ont jamais dis que lire sur un écran c’est fatiguant, les livre c’est mieux ? Une bonne majorité. Et c’est bien parce qu’on ne lit pas de la même manière un livre qu’un écran d’ordinateur qu’on doit impérativement adapter son écriture à un lectorat volatile, contraint par la technologie et difficile à capter.

L’écrit Web dispense ses bonnes pratiques pour mieux écrire sur le Web en suivant 6 grands axes :

1. organiser l’information
2. structurer son texte
3. adapter son style
4. soigner les microcontenus
5. penser indexation et référencement
6. bloguer

J’ai volontairement grassé les 4 axes les plus intéressants. Ils m’ont permis de conceptualiser beaucoup de pratiques que j’appliquais inconsciemment … et d’en découvrir d’autres.
L’idée générale n’est pas d’apprendre à écrire mais de réapprendre. Les raisons sont simples :

• on lit moins vite sur un écran d’ordinateur ;
• on lit en profondeur et non à plat, grâce aux liens hypertextes (qui ralentissent aussi la lecture).

Organiser et structurer

En partant de ces principes là, il faut donc songer à réorganiser ses textes voire ses sites Web d’une part pour faciliter la vie de ses lecteurs (occasionnels ou pas) mais aussi pour capter plus facilement leur attention. Que faites-vous devant un gros pavé de texte ou un site mal organisé ? Vous zappez. Alors pensez qu’on fait de même avec ce que vous écrivez .

En fin de compte tout contenu, que ce soit une page ou du texte, s’organise en suivant le principe de la pyramide inversée à l’image du triangle d’or d’une page Web si cher aux référenceurs. On commence par l’essentiel pour terminer sur du détail. Ça vaut également pour l’ordre des listes à afficher (chronologiques, géographiques, thématiques etc.).

Contrairement au papier où la lecture se fait à plat, on peut et on doit se servir de la navigation hypertexte pour désengorger les pavés de textes susceptibles de décourager la lecture. C’est ce qu’entend l’auteur par navigation en profondeur.
Plutôt que d’accueillir un visiteur avec beaucoup de texte, mieux vaut donc plusieurs boites aux titres informatifs présentant le contenu en une poignée de lignes.

Autre conseil judicieux, respecter les 5W (ou QQOQP en français) :

1. Qui ? (Who)
2. Quand ? (When)
3. Où ? (Where)
4. Quoi ? (What)
5. Pourquoi ? (Why)

En y songeant lors de la rédaction et en respectant l’ordre, on se retrouve à construire des phrases informatives, bien structurées et plaisantes à lire. Cumulez avec la pyramide inversée et c’est le gros lot : votre lecteur sait tout et tout de suite.

Comment mieux écrire pour le Web

Maintenant que l’on connaît l’ordre de rédaction, écrivons mieux. Écrivons court en suivant les principes 1 idée par phrase et sujet, verbe, complément. La lecture n’en est que fluidifiée. Si en plus il n’y a pas de fautes d’orthographe et que le style reste naturel, alors on touche presque au but.

Une des particularités du Web c’est la republication du contenu. On peut écrire un article pour un site mais le retrouver affiché sur d’autres sites, sur son téléphone portable, un agrégateur voire sur le même site mais sans son contenu (dans une liste par exemple).
Cette particularité est une bonne raison pour donner des titres explicites. Ils pourront ainsi être compris déconnecté de leur contexte. L’écrit Web propose des exemples clairs et compréhensibles vous aideront à mieux en comprendre les subtilités.

La construction des liens hypertexte était indispensable et mérite vraiment d’être lue par toute personne peu familière du référencement. Au-delà de cette pratique, ce sont tout simplement la compréhension et l’accessibilité qui sont en jeu. Pas de liens sur des cliquez ici, ici ou là. Je rajouterai même qu’il ne faut pas de liens ayant le même libellé pointant vers des URL différentes.
Tout comme le libellé du lien décrit le contenu vers lequel il pointe, il vaut mieux englober plusieurs mots (plus facile à cliquer) et qu’ils soient soulignés surtout ! Combien de chartes graphiques je reçois sans aucun lien soulignés ; j’outrepasse systématiquement cette mauvaise pratique du graphiste, dans le contenu en tous cas.

Conclusion

J’ai énormément apprécié et appris de ce livre, surtout les parties structurelles et organisationnelles. La pyramide inversée et les bonnes pratiques de rédaction sont des gros « plus » que j’ai rarement retrouvé ailleurs … ou tout du moins, pas concentré en si peu de pages.
Il se lit très bien et rapidement. J’ai prévu de l’offrir à quelques collaborateurs rédacteurs qui seront susceptibles d’en tirer des leçons et ainsi améliorer leur qualité rédactionnelle. Un bon investissement.

J’ai en revanche moins appris (voire rien du tout) sur les 2 derniers chapitres concernant le référencement et les blogs. Étant donné la quantité d’informations à traiter sur ces sujets, le contenu du livre était forcément un peu léger mais pas dénué d’intérêt pour les néophytes.
Ces parties étaient néanmoins plus techniques et à mon avis plus difficiles à comprendre pour des personnes survolant l’informatique.

Si vous ne saviez pas quoi faire de vos étrennes, que vous rédiger pour le Web et que le marketing vous intéresse, il y aura sûrement de bonnes idées à prendre

Concevoir un site Internet dans les règles de l’art demande de multiples compétences : architecture technique, programmation, graphismes, intégration, ergonomie et du bon sens. Transcender CSS : sublimez le design Web ! s’intéresse à l’aspect esthétique au travers des CSS.

Ou comment CSS, sémantique, intégration XHTML, microformats, sources d’inspirations et approche du design en grilles sont indispensables pour tirer partie du meilleur du Web.

Transcender CSS : sublimez le design Web ! est un ouvrage paru en France en août 2007 aux éditions Eyrolles ; en novembre 2006 dans le monde anglophone. Le livre est broché sur 360 pages ce qui en fait un livre imposant et propice à de riches illustrations d’excellente qualité. Andy Clarke, son auteur, s’est permis ce plaisir pour montrer au mieux qu’un site visuellement alléchant et bien structuré est un succès assuré pour capter l’attention du visiteur.

Transcender CSS ne s’adresse pas aux débutants puisqu’il ne s’attardera pas à vous expliquer les modèles de boîte ou les innombrables bugs d’Internet Explorer. Son contenu évolue toutefois en douceur de la facilité à la complexité ce qui le rend néanmoins abordable par des néophytes.

Découverte

Organiser les contenus avant tout, tel est le credo de Transcender CSS. C’est l’objectif majeur de cette première partie ; partie qui devrait être lue et transmise par tous les enseignants puisqu’elle explique comment on adapte le design au contenu et non l’inverse.

La mise en pratique du balisage XHTML est menée avec pédagogie. Vous apprendrez comment traduire une image en balises HTML de manière adaptée. Et un bon balisage c’est déjà la moitié du travail, l’autre restant son habillage. Il faut dissocier le contenu et la mise en page tout en n’oubliant pas un point essentiel : donner du sens au contenu.
Il existe de nombreuses balises XHTML qui ont chacune leur propre signification : il faut les utiliser pour donner du sens. C’est non seulement important pour le référencement mais aussi pour ancrer les feuilles de style de manière propre et efficace. Nos professeurs de français nous ont appris à utiliser des verbes riches au lieu de verbes pauvres (être, avoir, aller, prendre etc.) alors faisons de même avec les balises XHTML :

• <h1 à h6> pour afficher des titres hiérarchiques
• <p> pour des paragraphes de textes (les images sont du texte)
• <ul/ol/li> pour des listes de contenus
• <q/cite/blockquote> pour des citations de textes
• <pre/code/kbd> pour des saisies de texte au clavier ou des extraits de code
• <span/div> dans les autres cas ; ce sont des balises neutres vides de tout sens

Et d’aborder dans la foulée les microformats. Ça a été ma première surprise car je ne m’attendais pas à les retrouver dans ce livre. Un duo de page les aborde et montre (un peu trop succinctement) que microformater du contenu n’a rien d’impossible, surtout quand la structure XHTML est bonne dès le départ.

Processus

Transcender CSS s’intéresse à une approche industrielle du processus de création. Autrement dit : comment proposer efficacement une interface graphique à un client/décideur sans investir trop de temps. Nous savons tous qu’il y a toujours du changement, mineur mais surtout majeur, et qu’il est difficile de chambouler toute une feuille de style pour repositionner des éléments en conservant une cohérence.

C’est là que l’approche par la méthode de la boîte grise prend tout son sens. Elle définit à l’aide de boîtes grises l’agencement des contenus de la page. Une boîte, un contenu et le charme opère. Les classiques story-board s’en approchent.
Cette méthode peut se compléter à l’aide de symboles pour représenter des éléments annexes (textes, formulaires etc.) mais est surtout très facilement réalisable à partir d’un logiciel de présentation de type OpenOffice Impress ou Microsoft Powerpoint.

Une fois les bases de la structure mise en place, l’heure est venue de présenter une maquette statique. Autrement dit du HTML et des CSS. Les ajustements resteront possibles puisque la première partie du livre a expliqué comment mettre en œuvre une structure pérenne et libre de mise en forme.
Transcender CSS recommande fortement, et je suis on ne peut plus d’accord, d’utiliser de manière poussée les extensions indispensables de Firefox que sont Firebug et Web Developer.
J’y consacrerai un billet mais les éditeurs intégré modifiant à la volée votre page sont des outils précieux offrant des gains de développement mésestimés.

L’ouvrage poursuit sur des bonnes pratiques d’organisation de son code au sein même des feuilles de style. Des pratiques qui permettent de retrouver facilement ses petits sans avoir à chercher inutilement. Des pratiques qui suggèrent également de bien coder pour mieux réutiliser son travail dans d’autres projets. Si vous estimez votre travail, pourquoi le recommencer intégralement lors du projet suivant ?

Inspiration

Cette troisième partie a été mon deuxième choc pendant la lecture. C’est la partie dans laquelle j’ai le plus appris car elle explore des aspects finalement peu abordés dans les ouvrages liés aux CSS.

J’ai commencé à mieux percevoir l’intérêt et l’ingéniosité du rythme vertical grâce à la divine proportion. Qui aurait cru que les maths se cachaient aussi subtilement dans le design Web ? Certainement pas moi. Retenez bien le nombre 1,62 (φ) car c’est le nombre d’or qui régira avec majesté les designs CSS les plus réussis.
En français, il s’agit de la règle des tiers. Au lieu de choisir arbitrairement la taille des contenus, divisez les espaces en largeurs proportionnelles, elles-mêmes divisibles par 1,62 etc. La clarté en résultat est tout simplement saisissante.

Tout ceci nous amène à parler du design par grille. Vous venez de suivre le lien ? Vous aurez probablement remarqué, consciemment ou pas, que la page est découpée en 8 colonnes de largeur identiques. Certains contenus occupent davantage de place mais devinez-quoi ? Cela correspond toujours à un certain nombre de colonnes, pas une largeur hasardeuse.
Cette lubie n’est pas si excentrique que cela puisqu’elle nous provient directement des … journaux papiers. Qui aurait cru que le New York Times aurait pu inspirer les meilleurs designers du Web ? Et pourtant, on ne regardera plus les journaux de la même manière en observant leur structure à 6 ou 8 colonnes. Du nombre d’or en veux-tu en voilà.

Andy Clarke termine ce chapitre sur les sources d’inspirations. Là non plus il n’y a pas de frein à l’imagination puisque tout est susceptible de catalyser créativité : architectures d’immeubles, coupures de presse, publicités de magazines, affiches diverses et variées. Vous l’aurez compris, tous les supports visuels facilement agrégeables.

Transcendance

Cette partie termine en apothéose Transcender CSS. Nous savons intégrer, nous savons structurer et nous savons imaginer alors maintenant il va falloir sublimer. Au prix du livre, ça serait dommage que notre côté créatif n’aie pas pris du galon

Il n’y a d’ailleurs qu’un point sur lequel j’ai du mal à adhérer : cette adhésion au positionnement absolu/relatif et le dénigrement déguisé des flottants. Si les positionnements relatifs permettent de forcer le positionnement d’un bloc, c’est en revanche une solution beaucoup moins flexible dans la majorité des cas. Cette technique oblige, à mes yeux, de connaître les tailles des éléments à positionner. C’est parfois impossible, surtout si on veut pouvoir s’affranchir de largeurs fixes pour profiter de designs élastiques.
Je comprends néanmoins que c’est une pratique appréciable pour les designs en grilles.

De très nombreux cas pratiques abondent dans cette partie. Ces exemples stimulent l’imagination avec des mises en pages (et des variantes) convaincantes, attractives et on ne peut plus déclinables dans le monde réel. Réel ou presque puisqu’ils se basent sur des navigateurs valides uniquement.
C’est l’occasion d’aborder le génie de Dean Edwards avec IE7, la librairie Javascript ultime pour Internet Explorer. Cette librairie permet de mettre à niveau Internet Explorer 5 et Internet Explorer 6 au niveau d’Internet Explorer 7. Ce n’est certes pas la panacée mais ce n’est plus l’enfer truffé d’incertitude que l’on haït tant.

Transcender CSS conclut sur une quarantaine de pages avec les CSS 3 en mêlant exemples pratiques et des comparaisons entre CSS 2 et CSS 3. J’ai été ravi de voir en pratique l’affichage multi-colonnes sans jouer avec les flottants, l’habillage d’un bloc avec plusieurs bordures en images (sans balises superflues) et surtout l’Advanced Layout.
L’Advanced Layout est probablement l’avancée la plus attendue car elle permet de s’affranchir des positions absolues pour repositionner du contenu sur la page simplement. Et de retrouver les notions de grilles puisque des régions sont définies dans la feuille de style. Au designer de déplacer un contenu dans le flux sans le faire quitter.

Autant dire que les designs bâtis sur CSS 3 seront riches en créativité. Et ce n’est pas l’initiative Goto CSS3 qui dira le contraire

Conclusion

Cet ouvrage m’a énormément plu pour 2 raisons :

• j’ai failli croire que je n’allais rien apprendre
• le contenu est ouvert vers l’avenir

En effet plutôt que de nous dire quoi faire, Transcender CSS explique comment mieux faire. C’est véritablement appréciable car en lisant le livre on adapte son contenu à ses besoins. Ses pages sont généreusement émargées de conseils, d’astuces et de ressources qui enrichissent la perception de la conception du design Web. Je me suis d’ailleurs surpris à relire le livre mais uniquement ses marges de peur d’avoir raté un lien essentiel …

Vous le savez tout aussi bien que moi, le gros problème des ouvrages réside dans des cas pratiques difficilement réutilisables au quotidien. Transcender CSS a l’intelligence de proposer des recettes pour mieux aborder la conception des sites, des sources d’inspiration jusqu’aux secrets du découpage en grilles. Qui eût cru que la presse papier avait encore de belles leçons à donner au Web ?

Transcender CSS ne livre pas clé en mains des solutions mais vous aidera à y voir plus clair, à comprendre pour mieux réagir. En soi c’est ce que j’attends d’un livre à 30€. Une valeur sure.

Le CSS Summer Refresh 2007 est lancé. Ce concours met en scène CSS, HTML, accessibilité et standards du Web. Chaque site inscrit est tenu de proposer un site beau, propre et accessible pour recevoir un maximum de votes positifs.

La refonte de ce blog était également secrètement motivée par la participation à ce concours. Je ne brigue pas la première place, loin de là, mais c’est là une occasion de tirer un bout de la couverture vers moi, de montrer qu’une personne de plus sait intelligemment respecter les standards (sémantique au lieu de divite).

L’édition de cette année comporte presque 2 fois plus de participants que la première édition l’année passée, soit 72 candidats. En espérant que cette progression soit corrélée avec l’intérêt des standards du web

Pendant que la bataille fait rage du côté des sites Web 2.0 (mais c’est un des leviers de l’innovation sur Internet que l’on aime ou pas cette appellation), une révolution silencieuse se met en marche : le Web sémantique ou encore le Web 3.0.
Jusqu’à présent, les moteurs de recherche (Google, Yahoo!, Windows Live Search, Exalead etc.) avaient pour défi le recensement du plus grand nombre de documents et des résultats de recherche pertinents.

S’il faudra bien évidemment soigner l’intitulé des liens, il faudra avant tout donner du sens à vos documents. C’est tout l’intérêt d’une programmation propre, respectant les standards et utilisant la sémantique à bon escient.

Les microformats sont pour moi un élément essentiel qui accéléreront le processus et permettront de comprendre l’intérêt de la sémantique.

Qu’est-ce que la sémantique ?

La sémantique est loin d’être une invention de l’informatique puisque ce principe est à la base de toutes les langues du monde. La sémantique se réfère tout simplement au sens exprimés par les mots. Ce concept peut être à vrai dire être élargi à tout ce qui structure de l’information.

Plus concrètement encore, ouvrez un journal (Le Figaro, Libération ou même Voici) et prenez une page au hasard. Vous arriverez sans peine et surtout sans lire le texte à discerner les titres d’articles, leur résumé, leurs passages clés et leur texte à proprement parler. Pourquoi ? Parce que tous ces éléments sont présentés de manière différente, utilisent une police de caractère différente et ont une taille différente. Un titre d’article sera naturellement plus grand et plus épais que l’article ; le résumé sera situé sous le titre et sera espace du texte l’article en lui-même.

Et si vous ne prenez pas garde à la sémantique en elle-même c’est parce qu’elle silencieuse et logique : votre cerveau analyse lui-même ce qu’il faut faire car il comprend la signification de la disposition sans avoir à comprendre ce qui est écrit.

Bien structurer une page HTML

Récemment encore j’entendais de la bouche d’une agence Web on fait des sites aux standards, avec des div et du CSS. C’est déjà bien de passer au validateur mais c’est encore mieux si on produit du code significatif.
Voici deux exemples de code qui contiennent les mêmes textes et qui respectent le standard (X)HTML.

Méthode sémantiquement correcte :

<div id="introduction">
	<h2>Site valide HTML</h2>
	<p>Cette portion de code a un code HTML valide.</p>
	<p class="suite"><a href="./edito">Lire la suite de l'édito</a></p>
<div>

Méthode sémantiquement incorrecte :

<div id="page_haut">
	<div class="titre rouge">Site valide HTML</div>
	<div class="texte">Cette portion de code a un code HTML valide.</div>
	<div class="texte petit"><a href="./?page=12345">Lire la suite de l'édito</a></div>
</div>

Sans avoir à donner un cours de balisage, voici les principes auxquels se tenir :

• utilisez les balises HTML au bon endroit et à bon escient. Ne mettez pas un div (bloc neutre) si un p (paragraphe) ou un hn (titre hiérarchique) peuvent faire l’affaire. De même pour les listes, n’utilisez pas de div (bloc neutre) si une ul/ol (liste désordonnée, liste ordonnée) ou une dl (liste de définition) sont mieux adaptées.
• nommez les classes (.classe) et les id (#id) en fonction de ce qu’ils représentent et non en fonction de l’apparence qu’ils devraient avoir.

Et c’est tout ! Cette petite touche de rigueur assurera une pérennité certaine dans vos développements. Sans compter la facilité à intégrer les microformats par la suite.

Et les microformats dans tout ça ?

Justement les microformats parlons-en. Si de prime abord sémantique et microformats peuvent paraitre sans grand rapport, ces concepts sont pourtant intimement liés. En utilisant les attributs class et rel (pour les liens hypertextes) dans une logique bien précise, on décrit le contenu et sa nature (titre de billet, auteur, date d’un évènement etc.).

Pour faire simple :

• les microformats sont faciles à intégrer si le contenu est déjà bien structuré
• les microformats aident à bien structurer le contenu : qu’il soit bien structuré ou pas, les recommandations vous guideront dans cette voie
• les microformats sont déjà reconnus par des moteurs de recherche spécialisés (Technorati) et plus officieusement par les moteurs de recherche classiques (Google, Yahoo! etc.). Pas convaincu(e) ? Voici la liste non-exhaustive des sites comprenant les microformats.

Pour bien compléter ces paroles, je vous recommande cette excellente introduction aux microformats.

Intérêt supplémentaire des microformats

Ce qui est intéressant avec les microformats c’est que l’on peut les utiliser sans avoir derrière un site Web super hi-tech en Web 46.0 full Ajax. Une page HTML suffit. J’ai justement utilisé les microformats la première fois lorsque j’ai voulu refaire mon CV en me disant qu’en HTML ça serait sympa. Il existe fort heureusement un microformat hResume réutilisant lui-même les microformats hCard (carte de visite) et hCalendar (calendrier et évènements).
Outre l’aspect purement technique de cet exercice, ce CV me sert maintenant de carte de visite (en utilisant le service contacts de Technorati) en plus de pouvoir être réutilisé sur des sites de recherche d’emploi.

Mis à part une sémantisation de votre contenu, voici les bénéfices à retirer d’un microformatage :

• extraction et republication du contenu à la volée : des services Web permettent d’aggréger une page pour la transformer en flux Atom voire même de créer des cartes de visites instantanément
• les navigateurs Web intégreront eux aussi les microformats pour faciliter la navigation des utilisateurs : installez l’extension Operator pour Firefox, revenez sur cette page et améliorez votre expérience de navigation
• les microformats sont au coeur de l’Internet de demain et c’est aujourd’hui qu’il faut y travailler

La sémantique, moteur des futures recherches sur Internet

Même si à l’heure actuelle on peut considérer que les microformats aident au référencement, ce n’est pas explicitement mentionné. Mais l’avenir est à la recherche sémantique afin d’affiner les résultats et de mieux répondre aux requêtes. C’est un énorme défi puisqu’entre indexer du contenu et comprendre ce qu’il dit, il y a tout un fossé. Cette recherche sémantique s’appliquera aussi bien au texte qu’aux ressources audio (musique, interview etc.) et vidéo.
Hakia s’intéresse à la recherche sémantique musicale tandis que d’un autre côté, la recherche sémantique est considérée comme étant une fonctionnalité nécessaire pour le futur de la recherche sur Internet.

Edition du 31/07 à 19h10 : Google Maps intègre désormais le microformat hCard.