Pour cette édition 2010, il y a 2 thématiques transversales : le développement durable et l’accessibilité.

Les thèmes des RMLL

Les logiciels libres sont un vaste domaine, couvrant de multiples aspects de notre vie ordinaire … et de l’informatique. C’est pourquoi ce cycle est composé de thèmes, regroupés sur 2 jours chacun :

• Technique
• Loisirs, Culture, Arts, libre diffusion
• Économie sociale et solidaire – Développement durable
• Accessibilité et handicap
• Sciences, Éducation, Éducation populaire
• Entreprises et Logiciel Libre
• Collectivités, administrations, politiques publiques

Chacune de ces thématiques comporte ensuite des sessions. Ces sessions agissent comme des sous-thèmes, afin d’affiner et guider le visiteur au sein de la centaine de conférences réparties sur 5 jours.

La session Internet

Nicolas et moi-même nous occupons de la session Internet, sous-thème de « Technique ». Le programme 2009 est à disposition si cela peut vous donner des idées.
Allez, quelques pistes :

• Firefox
• WordPress
• eZ Publish
• Drupal
• Apache, Nginx, Lighttpd & cie
• Zend Framework, Symfony, CodeIgniter
• Jabber/XMPP/PubSubHubbub
• OpenStreetMap
• Licences − CreativeCommons etc.

Soyez créatifs, proposez des sujets

Internet != Web

À titre de précision : si le Web fait partie de l’Internet ; l’Internet est bien plus que le Web. Cela concerne aussi bien IRC, le transport de mails, les protocoles de transport que l’infrastructure permettant à ce nuage d’exister.

Donc n’hésitez pas à avoir une vision large et de ne pas vous restreindre qu’au Web − aussi bien soit-il.

Pour en savoir plus

Le site Web de l’édition 2010 des RMLL est en ligne à l’adresse permanente http://2010.rmll.info. On y trouve, entre autre, d’autres informations sur l’appel à  conférences.
Vous avez jusqu’au début du mois de mars pour y songer.

Si vous avez « juste » peur d’être timide, établissez au moins le contact pour obtenir des informations.
Nous sommes également passés par là donc on pourra vraisemblablement vous assister.

Un email vers internet@listes2010.rmll.info fera l’affaire. On vous guidera le reste du processus.

Pour les besoins du boulot et non plus pour le plaisir, j’ai eu pour impératif de me connecter à un Intranet client via un VPN Citrix. Je ne sais pas pour vous, mais quand j’entends VPN, je commence à avoir des sueurs froides en me disant que la galère ne fait que commencer.

Et bien pour une fois, je peux dire que je n’ai presque pas ramé. Vous allez voir, c’est simple et rapide.

Citrix Presentation Server en 2 minutes

Citrix Presentation Server c’est une manière d’offrir une connexion à des applications à distance indépendamment de la machine que l’on utilise. En clair, que l’on soit sous Linux, MacOS X ou Windows, on est censé pouvoir accéder à des applications d’une infrastructure distante.

Tout se fait via son navigateur Web préféré (Iceweasel sous Debian, Firefox sous Ubuntu dans mon cas). Seulement voilà, quand je souhaitais lancer l’application Putty pour profiter d’une jolie connexion SSH, que nenni !
À la place, j’avais le droit de télécharger un fichier launch.ica qui, j’avoue, ne m’évoquais pas grand chose.

Si on en est là, c'est que ça ne va pas

Installer le plugin ICA pour Linux

Une recherche Google plus tard, je découvre donc sans surprise qu’il me faut installer un client Citrix. J’ai un peu peur en imaginant qu’il ne fonctionne que sur des systèmes d’exploitation arriérés.

Et pourtant, quand on sait ce qu’il faut installer c’est tellement plus simple :

1. Téléchargez le client ICA pour Linux
   1. En prenant la version .tar.gz puis en lançant ./setupwfc
   2. En convertissant le .rpm par un petit sudo alien -i ICAClient-10.6-1.i386.rpm
   3. En utilisant le .deb que j’ai créé avec alien
2. Liez le plugin ICA à votre navigateur Web
   • Sous Ubuntu : ln –s /usr/lib/ICAClient/npica.so /usr/lib/mozilla/plugins/npica.so
   • Sous Debian : ln –s /usr/lib/ICAClient/npica.so /usr/lib/iceweasel/plugins/npica.so
3. Fermez et relancer Firefox/Iceweasel si nécessaire
4. Dans les modules complémentaires, vérifiez que le plugin apparaît bien (ou bien dans about:plugins)

Plugin Citrix vu depuis le gestionnaire de modules Firefox

Conclusion

Bref ça marche bien même sous Firefox 3 et j’en suis content. Le chargement des applications est relativement rapide. Ça fait presque bizarre de voir une application Windows bien se lancer !

C’est également la première fois que je peux me connecter à un VPN distant sans sérieux problèmes. J’ai déjà eu droit aux VPN Cisco à passphrase aléatoire généré par un badge … même le support technique n’a pas pu m’aider : j’étais le premier à les appeler en étant sous Linux !

Chargement de l'application Windows à distance

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.

Firebug fait partie de mes extensions préférées depuis un bon moment. Je l’estime aujourd’hui même plus importante que l’extension Web Developer, c’est dire.

J’ai pourtant constaté que la plupart de ses utilisateurs la sous-exploitait en se limitant à la console pour consulter les erreurs et éventuellement à l’inspecteur HTML pour remonter rapidement dans l’arborescence des balises en 1 clic. C’est bien mais pas assez.
Firebug est tout simplement énorme ! Suffisamment énorme pour gagner un temps incroyable dans le développement d’applications JavaScript et pour mieux comprendre les incohérences des CSS dans une page, entre autre.

Je vous offre aujourd’hui mon cadeau de Noël pour gagner en productivité et maîtriser cet outil ô combien indispensable.

Le plus amusant dans l’histoire c’est que le site officiel de Firebug dévoile (succinctement certes) tous les petits plus qui simplifient la vie. Je vais m’atteler à les éplucher en fonction des domaines d’utilisation :

1. pour le HTML et les CSS
2. pour le JavaScript
3. pour gagner en performances

Firebug pour le HTML

L’inspection HTML

J’apprécie l’inspection HTML car elle me permet de retrouver simplement le code lié au visuel. Après avoir activé l’inspecteur, je survole l’élément sur lequel je veux travailler, je clique dessus et le volet Firebug se fige dessus en m’indiquant toutes ses propriétés CSS, le modèle de boîte et ses propriétés DOM. On en reparle tout de suite après.
L’inverse est également possible. C’est à dire qu’en survolant le code, la correspondance visuelle dans la page est établie. C’est rudement pratique pour repérer des éléments qui sortent du flux. Ça l’est d’autant plus que les différentes marges (internes, externes, bordures) sont elles aussi mises en surbrillance.

Le gros atout de cet inspecteur c’est également l’édition à la volée de toutes les balises ! Idéal pour tester diverses classes d’un objet ayant un impact visuel fort sur son affichage. Cet outil présente un gain de temps énorme par rapport à la modification du code dans son éditeur et un petit coup de touche F5 dans la foulée.

Il faut également retenir que toute balise est sélectionnable en cliquant sur son nom (div, h3 etc.). Cela a a pour effet de mettre à jour le panneau latéral de Firebug. Panneau latéral qui est également fort utile.

L’inspection CSS, Layout et DOM

Le panneau latéral de l’inspecteur HTML se compose de 3 onglets, tous très utiles.

Inspecteur CSS

Les propriétés CSS affichées concernent uniquement l’objet actif et c’est ce qui en fait sa force. Ce panneau indique en effet la cascade CSS en cours ce qui permet de comprendre rapidement pourquoi sa feuille de style n’est pas appliquée comme il faudrait. Elle a la bonne idée de mentionner quelle feuille de style est utilisée et quelle ligne. De quoi corriger ça dans son éditeur favori rapidement.

Ou pas. En effet l’inspecteur CSS permet, tout comme l’inspecteur HTML, de modifier les propriétés à la volée et sans fioriture. Si je précise sans fioriture c’est parce que l’éditeur à la volée de Web Developer rend parfois l’affichage de la page bancale en décalant des éléments. Là vous pouvez totalement compter sur l’éditeur intégré et ce n’est pas un luxe !
Désactiver, supprimer, modifier ou ajouter des propriétés sont quelques-unes des actions que vous pourrez effectuer à même la page.

Là encore c’est une des parties où les gains de temps sont énormes. On peut en effet modifier ses CSS et les tester tout en observant l’impact immédiat de ses modifications.

Inspecteur du modèle de boîte (Layout)

Le modèle de boîte CSS peut vite devenir pénible à gérer et plus particulièrement quand on visualise mal le cumul des différentes marges.
Dans tous les cas c’est appréciable de pouvoir constater les marges en présence et encore, de pouvoir modifier leurs dimensions à la volée. Firebug a la bonne idée de colorer les marges intérieures (padding), extérieures (margin) et les bordures (border) d’une couleur différente.

Il a également la bonne idée d’afficher une double règle millimétrée au survol du panneau layout. Très pratique dans le cas de design en grilles ou nécessitant un certain rythme de visualisation.

Inspecteur DOM

Ah l’inspecteur DOM ! S’il n’existait pas il faudrait l’inventer. Firefox proposait déjà un tel outil à la différence près qu’il était moins pratique d’utilisation.
L’inspecteur DOM m’est moyennement utile dans le cas d’une simple inspection du code HTML bien que ce soit toujours pratique de visualiser la présence ou pas d’objets JavaScript dans tel ou tel élément. C’est fortement appréciable pour la librairie Prototype étant donné les dégâts causés par son extension du DOM à gogo.

Firebug pour le JavaScript

L’inspecteur JavaScript

C’est l’autre outil indispensable de Firebug. Avec lui, c’en est fini des alert(mavariable);. L’inspecteur DOM prend avec lui toute son utilité.

J’illustre sur l’image ci-dessus l’utilisation des points d’arrêt (breakpoints). Il suffit d’un clic à gauche d’un numéro de ligne pour en placer/retirer un. Concrètement quand l’exécution du JavaScript arrivera au premier point d’arrêt, elle va se stopper.
Quel intérêt ? Observer. En agissant ainsi, vous avez la main sur toutes les variables connues au sein de votre code/fonction. Très utile pour connaître les paramètres passées à la fonction et détecter les erreurs. C’est pour cette raison que les alert() deviennent inutiles : tout est à portée de main. Vous ne pesterez plus contre un undefined mal placé

En parallèle de ça, l’inspecteur DOM est à utiliser pour visualiser d’un coup d’œil les différentes variables actives ainsi que leur arborescence. Comme tout est cliquable, l’inspecteur vous transporte sur n’importe quel objet pour en étudier le contenu.

La console Firebug alias console.*

La console Firebug est l’autre tueuse d’alert() et s’utilise de deux manières.

La plus accessible est d’interagir avec. Vous saisissez votre code, la console l’exécute et retourne le ou les résultats. Encore une fois les objets sont cliquables et navigable au travers de l’inspecteur DOM.
La console est utile pour utiliser des fonctions sorties du contexte de l’initialisation : il devient tout à fait possible de piloter des éléments après le chargement de la page. Ça évite encore une fois des F5 inutiles et consommateurs de temps.

L’autre manière d’utiliser la console c’est de ne pas l’utiliser. Ou pas de manière active tout du moins puisqu’elle est également un objet JavaScript (console) utilisable dans votre code auquel sont rattachées plusieurs fonctions au nom explicite :

• console.log() : affiche une information standard
• console.info() : affiche une information de type « information »
• console.warn() : affiche une information de type « avertissement »
• console.error() : affiche une information de type « erreur »
• console.debug() : débogue le contenu d’un objet directement dans la console

Autrement dit, si l’inspecteur ne suffisait pas, au lieu de lancer un alert(mavariable) (potentiellement dangereux dans une grande boucle qui n’a jamais cliqué 50 fois sur « OK » à cause de ça ?), il vaudra mieux utiliser console.log(mavariable). Il y a de quoi faire, surtout avec la possibilité de créer des groupes de messages et l’utilisation de la syntaxe printf.

Et top du top, en cas d’erreur JavaScript, la console affiche un petit cercle rouge qui rappelle fortement le point d’arrêt. Normal puisque c’en est un. Un clic et on évite de rechercher la ligne problématique dans le code. Encore une fois, du temps de gagné.

Firebug pour les performances

Après avoir bien développé, Firebug propose de mieux développer. L’extension magique propose quelques outils sympathiques pour rapidement déceler les problèmes, notamment de scripts trop gourmands ou à optimiser.

Le traceur réseau

Avec le traceur réseau c’est simple, tout ce qui est chargé sur la page est chronométré. Si un élément est systématiquement long à charger en tête de liste, pourquoi ne pas essayer de le déplacer dans le bas de la pile ? Je pense notamment aux appels vers des fichiers JavaScripts externes. Les appeler en bas de page permet d’éviter des gels de page. C’est ce que YSlow nous recommandera

Outre une petite prévisualisation des contenus, le traceur affiche aussi les statuts des contenus s’ils sont différent du statut 200 (found). Et de surligner ça en rouge en cas de fichier introuvable.

J’aime beaucoup le traceur pour le suivi des requêtes XHR (appels AJAX). Un clic sur un appel affiche à la fois les entêtes, les données transmises au serveur et sa réponse. Fini les requêtes AJAX qui ne produisent rien sans qu’on puisse savoir pourquoi. Le clic droit sera également un fidèle allié, notamment pour ouvrir l’appel AJAX dans un nouvel onglet. C’est plus lisible pour déboguer quand même

Le profileur JavaScript

Le profileur (profiler) JavaScript s’utilise un peu à la manière de la console : de manière active ou au travers de l’objet console.

Le profileur enregistre tout ce qui se passe entre le moment où il est enclenché et le moment où il est stoppé. Il va ainsi dénombrer toutes les appels (calls), leur durée d’exécution et leur fichier d’origine, entre autre. L’idée est bien entendu de voir ce qui consomme le plus d’appels et de temps pour savoir si ce comportement est normal ou pas. À ce stade là, difficile de pousser la granularité du profileur plus loins.

Sauf en utilisant le profileur directement dans le code comme on a déjà pu le faire pour les logs. console.profile() et console.profileEnd() seront vos amis. C’est vraiment l’idéal pour profiler l’exécution d’une fonction, voire même les portions de code exécutée en son sein.

L’extension YSlow

L’extension YSlow est une extension pour Firefox mais elle nécessite toutefois la présence de Firebug. Elle s’articule autour de trois critères.

Il y’ a d’une part la surveillance des performances. YSlow se base sur la liste des bonnes pratiques établies par Yahoo! (14 à l’heure actuelle). YSlow passe ces critères en revue et accorde une note en conséquence. Si certaines sont difficiles à tenir, c’est un bon moyen de s’intéresser à de nouvelles pratiques d’optimisation et de performances.

Le second critère est affiché dans le panneau stats. Il s’agit de la capture d’écran ci-dessus. Certes il s’agit d’un simple tableau mais dont les chiffres sont intéressants à étudier. YSlow analyse la page pour un premier et un second chargement. La différence entre les deux ? C’est que le cache est passé par là et normalement, je dis bien normalement, le second chargement se doit d’être beaucoup plus rapide.
Si ce n’est pas le cas, il y a de l’optimisation à faire et cela peut aussi signifier du côté serveur Web. Pas forcément du développement donc.

Enfin on termine sur une partie complémentaire aux stats : les composants (components). Elle distille des informations plus verbeuses que le traceur réseau de Firebug en se focalisant sur les E-Tag, la présence ou pas de compression, la date de validité du cache ainsi que la taille des objets.

Conclusion

J’espère avoir éclairé quelques lanternes sur l’utilisation de Firebug. Cette extension est suffisamment puissante pour gagner en confort de développement ; il serait dommage de s’en priver. On gagne du temps, du confort et surtout, de la qualité de développement.
À noter qu’il existe aussi Firebug Lite. Il s’agit d’un script JavaScript compatible avec les principaux navigateurs du marché mais comme le Lite l’indique, les fonctionnalités sont plutôt limitées. Seule la console JavaScript persiste.

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.

Read/WriteWeb fait partie de mes sources d’informations quotidiennes. Je suis tombé aujourd’hui sur un article concernant le lancement d’une nouvelle application Facebook permettant de recommander ses extensions favorites : Rock your Firefox.

Ca tombe bien puisque je songeais depuis quelques jours à parler des extensions que j’utilise quotidiennement dans Firefox. Certaines n’intéresseront que les développeurs, d’autres les amateurs de praticité.

Extensions Firefox

Avant toute chose, si jamais vous vous posiez la question où trouver de nouvelles extensions pour Firefox (ou Thunderbird ou d’autres produits Mozilla), rendez-vous sur Mozilla Add-ons.
L’application Facebook Rock your Firefox reprend la liste des extensions et des thèmes en vous proposant de choisir vos préférées et de les partager sur votre profil. C’est un bon moyen pour afficher votre qualité d’utilisation de ce navigateur libre et gratuit.

Extensions « Pratiques »

Adblock

Certains sites sont envahis de publicités qui gênent affreusement la navigation. Plutôt que de se passer d’un contenu intéressant, autant supprimer les nuisances. Adblock est là pour ça. Que ça soit des images,des animations Flash ou bien encore des scripts JavaScript, Adblock liste le contenu des ressources bloquables et permet même de créer des filtres génériques à l’aide du caractère * (wildcard, remplace un à plusieurs caractères, peu importe lesquels).
Attention toutefois, la publicité est vitale pour de nombreux sites donc bloquez avec intelligence.

Google Browser Sync

C’est certainement l’extension que j’installe en premier et pour cause : Google Browser Sync sauvegarde tous mos favoris, cookies et historique de navigation de manière sécurisée.
Je l’utilise sur plusieurs ordinateurs et plusieurs installations de Firefox ce qui me permet de retrouver tous mes favoris peu importe où je me trouve, à partir du moment où il y a une connexion Internet. A utiliser pour vos sauvegardes ou vos besoins de mobilité.

PDF Download

Je n’aime pas que les documents PDF s’ouvrent directement dans un onglet ou une fenêtre de mon navigateur Web. Surtout quand les plus lourds le font planter. PDF Download affiche systématiquement plusieurs choix tels que Afficher dans la page, Ouvrir en tant que PDF ou encore Télécharger directement.

Screengrab!

Screengrab est une solution propre pour effectuer une capture d’écran de sa portion visible, d’une page Web complète ou bien d’une portion d’écran bien définie. Vous l’aurez compris, pas besoin de faire 10 000 captures pour une page étalée en hauteur et pas besoin d’avoir Photoshop ou The Gimp d’installé pour s’en sortir.

Tab Mix Plus

Tab Mix Plus apporte un lot considérable d’options pour mieux régler le comportement de vos onglets. Personnellement je l’utilise pour que toute nouvelle fenêtre se charge obligatoirement dans un nouvel onglet sans me déranger (chargement en arrière-plan). Je profite aussi de son indicateur de chargement allant de 0 à 100%.
En revanche j’évite son système de récupération en cas de plantage, il fonctionne moins bien que celui intégré à Firefox (pour les rares cas où cela s’est produit chez moi).

Extensions « Développeur Web »

ColorZilla

ColorZilla est une simple pipette colorimétrique mais ô combien efficace. Un clic sur un endroit de la page mémorise automatiquement le code couleur associé et permet de l’utiliser sous plusieurs formats dans n’importe quel autre programme dont Photoshop ou votre éditeur CSS favori.

DOM Inspector

C’est la seule extension qui ne se télécharge pas/plus (jusqu’à la version 1.5 c’était encore possible). L’inspecteur DOM s’installe en même temps que Firefox (si vous cochez la case adéquate) et permet comme son nom l’indique, d’inspecter les noeuds de votre document (HTML ou XML), d’en voir leurs attributs, fonctions et ce de manière récursive.
L’analyse en temps réel permet même de voir les modifications apportées à l’arbre DOM par le biais du JavaScript.

Firebug

Firebug est obligatoire lorsqu’on souhaite explorer avec aisance la structure HTML d’un document, exécuter du JavaScript à même la page ou déboguer efficacement son code, ne serait-ce qu’en se rendant compte des temps de chargement des différents fichiers (CSS, JavaScript, Flash etc.).
Ca incite notamment à taper son code directement dans sa console plutôt qu’à le modifier et recharger la page pour déceler des erreurs ou étudier le comportement de la page. On gagne du temps et votre employeur de l’argent.

Firebug : YSlow

YSlow est une extension Firefox mais dédiée à Firebug. Une petite première made in Yahoo! très utile. Cette extension permet de calculer les performances de la page, suggère des optimisations et analyse les différents composants ainsi que leurs caractéristiques (URL, poids, temps de réponse et ETag).
Indispensable pour les phases d’optimisation et de fine tuning comme dirait l’autre.

Operator

Je vous ai déjà parlé de l’intérêt des microformats ? Operator est un outil notifiant des microformats actifs sur les pages que vous visitez. Outre la navigation interactive procurée, Operator signale dans la console de débogage d’éventuelles erreurs (élément absent, malformé ou invalidant un microformat).

TimeStamp Converter

Le nombre 1198533599 vous dit quelque chose ? Avec TimeStamp Converter ça sera le cas. Cette extension convertit les temps Unix en heure humainement compréhensible et vice-versa. Elle le fait également à partir de sélections de texte, évitant ainsi toute saisie pénible.

Web Developer

Le Saint-Graal du développeur Web. Triturer la page, modifier ses mécanismes, débloquer des champs en lecture seule, afficher les champs masqués, topographie de la page, modifier la résolution et afficher l’arborescence en cascade de la page jusqu’à un élément pointé de la souris sont le genre d’outils fournis par Web Developer. Couplée avec Firebug, vous transformez un « simple » navigateur Web en machine de guerre du développement Web propre et efficace.