FredCavazza.net

Aujourd’hui est un grand jour, non pas parce que IE 7 vient de sortir en version définitive, mais plutôt parce qu’après 3 Release Candidate, Firefox 2 est également sur le point de sortir.

Pourquoi est-ce si important ? Pour plusieurs raisons :

1. ces deux nouvelles moutures intègrent de façon native l’abonnement et la gestion des flux RSS, ce qui va faire sortir de l’ombre la syndication et la faire connaitre aux yeux du grand public) ;
2. les moteurs de rendu ont évolué, ce qui veut dire une meilleur prise en charge des CSS ;
3. deux modèles d’organisation (la multi-nationale privée et la fondation) nous ont démontré leur réactivité et leur puissance de feu (l’une fondée sur la capitalisation et des milliers de salariés, l’autre basée sur la passion et des millions de bénévoles).

Bref tout ça pour dire que je serai bien allé à la soirée de lancement de Firefox 2 la semaine prochaine, mais visiblement je ne suis pas le seul comme le précise ce billet de Tristan. Comme je suis convaincu du bienfondé des standards web et un inconditionnel de Firefox, je suis prêt à laisser ma place à cette soirée. Je préfère en effet utiliser Firefox au quotidien et faire bénéficier de cet évènement quelqu’un d’autre (même si cette soirée aurait été une bonne occasion de revoir des gens que j’apprécie).

Demain est un grand jour, c’est la première journée annuelle des naturistes du web : First Annual Naked Day.

Rassurez-vous, il est bien ici question de standards web et de qualité du code. Le principe est le suivant : demain (5 avril), les webmasteurs de la planète sont invités à désactiver leurs feuilles de styles CSS pour afficher une version brute de leur site (uniquement le HTML). L’objectif est de faire prendre conscience aux internautes de l’importance de la sémantique du balisage.

En gros, si vous utilisez une sémantique propre qui respecte les normes du W3C, alors votre site restera parfaitement consultable même sans feuille de styles. Par contre, si vous utilisez une sémantique exotique avec des balises détournées de leur fonction première et tout un tas d’astuces CSS alors vote site sera fortement pénalisé (la grosse honte !).

C’est en quelque sorte une journée porte ouverte où les visiteurs pourront juger de la qualité du code.

Bon, vous voilà prévenu : demain je désactive ma feuille de style. (via Gou Blog)

Visiblement ils ont mangé du lion chez Open-S ce midi à la cantine ! Non seulement ils viennent de publier un ensemble de gabarits HTML / CSS certifiés 100% accessibles, mais en plus ils se lancent dans une campagne de démystification autour de sujets qui fâchent comme les pop-up, les tableaux et javascript.

Saluons ces deux initiatives courageuses :

1. parce qu’il est toujours très délicat de publier des gabarits XHTML / CSS a une communauté de développeurs qui trouvent toujours à redire (du type : mon gabarit est plus accessible que le tien) ;
2. parce qu’il y a beaucoup de fausses idées sur l’accessibilité des mises en page par tableaux imbriqués et du javascript.

Bravo aux équipes d’Open-S pour leur engagement sur le débat de l’accessibilité. Vivement la suite !

Ca y est, la course est lancée entre les previews et autres beta pour savoir qui de IE 7 ou Opera 9 sortira le premier. Je vous propose un petit comparatif pour savoir ce que ces deux previews ont dans le ventre.

Je précise que je ne me risquerais pas à évaluer la performance des moteurs de rendu CSS de ces deux navigateurs. Premièrement parce que ce sont des previews et deuxièmement parce que d’autres sont bien mieux placés que moi pour le faire. Intéressons-nous donc plutôt aux différentes améliorations du côté de l’interface.

Une interface novatrice pour IE 7

Le développement d’IE 7 est toujours en cours mais l’équipe de développement nous gratifie régulièrement de preview de la future version du navigateur de Microsoft. Dernière en date la Beta 2 Preview. Pour cette nouvelle preview, IE 7 nous propose un système d’onglets très convainquant.

Nous sommes ici dans un mode de fonctionnement très proche de ce que peut proposer Firefox. Une chose amusante : IE 7 reprend à l’identique l’ensemble des raccourcis clavier de Firefox (Ctrl+T pour un nouvel onglet, Ctrl+W pour le supprimer, Ctrl+clic pour ouvrir un lien dans un onglet, Ctrl+Tab pour basculer à un autre onglet…).

Il existe également une fonction permettant d’afficher toutes les pages web sous forme de mosaïque (un peu à l’image d’Exposé de Mac OS) :

La prise en charge des flux RSS est également simplifié avec un petit son qui est joué lors de la détection d’un flux ainsi que l’affichage simultanée d’une cartouche d’explications sur ce que sont les flux RSS et comment s’inscrire de même qu’un menu de navigation et de tri dans les catégories identifiées sur le flux :

On notera ensuite la disparition du menu traditionnel au profit de boutons qui déroulent un certain nombre d’options. L’utilisateur peut s’il le souhaite afficher de nouveau le menu mais c’est quand même agréable de n’occuper que 2 lignes.

Enfin, cette preview apporte un certain nombre d’autres nouveautés :

• un système de filtre anti-phishing ;
• un moteur de recherche intégré ;
• une fonction de zoom de page…

Du BitTorrent dans Opera 9

C’est hier qu’est sorti la technology preview 2 d’ Opera 9. Toujours du très bon pour cette neuvième version :

• un système d’onglets également très au point ;
• toujours pas de publicité ;
• une interface très claire…

Au niveau des nouveautés nous allons trouver l’affichage de miniatures au survol de la souris sur les onglets :

Encore plus intéressant, la possibilité d’ajouter des widgets (à l’image de Konfabulator ou des Microsoft Gadgets) qui viennent s’afficher en surimpression de la fenêtre :

Mais la plus grosse nouveauté d’Opera 9 est sans conteste la prise en charge des fichiers BitTorrent :

Il y a fort à parier que cette fonctionnalité va beaucoup faire parler d’elle (à moins que l’extension AllPeers pour Firefox vienne également jouer les trouble-fête).

Conclusion

Nous sommes ici face à deux approches complètement différentes :

• d’un côté IE 7 qui n’hésite pas à puiser le meilleur des autres navigateurs en calquant par dessus une interface simplifiée et qui ose l’innovation (saluons-le) ;
• d’un autre côté Opera 9 qui enrichi son navigateur et le dote de fonctionnalités très alléchantes pour les utilisateur avancés.

Je me garderais bien de vous conseiller l’un ou l’autre, surtout dans la mesure où il existe d’autres navigateurs qui ont fait leurs preuves et qui bénéficient du soutien des utilisateurs (Firefox pour les utilisateurs de Windows et Safari pour les utilisateurs d’Apple). Et vous, c’est quoi vote retour d’expérience ?

Que faites-vous les 2 et 3 février prochain ?

Si vous n’avez rien de prévu et que vous passez par Limoges alors ne ratez surtout pas le Webdesign International Festival. Comme l’édition 2006 est placée sous le signe des dernières tendances et des innovations technologiques, seront abordés des thèmes aussi variés que l’accessibilité, les standards web (XHTML, CSS…), l’utilisabilité, Flash…

Au programme de cette manifestation :

1. Le Webjam Contest où des équipes de designeurs vont s’affronter en live pour réaliser des interfaces web à partir d’un thème imposé ;
2. Les Butterfly Awards où seront récompensés les meilleurs réalisations et créateurs web de l’année ;
3. L’Université du Webdesign qui, comme son nom ne l’indique pas, est une série de conférences sur le thème du design et de la conception web.

Limoges accueillera pour cette occasion de très grand noms du web design comme Joshua Davis ou encore Molly Holzschlag ; mais également des personnalités françaises comme Tristan Nitot, Loïc Le Meur, Amélie Boucher et même notre Elie Sloïm national.

J’ai également la chance de participer à cette manifestation et animerais deux conférences sur l’ergonomie incitative et sur les interfaces riches.

Si vous souhaitez vous inscrire ou avoir plus d’informations, je vous recommande le programme officiel : WIF 2006 (fichier PDF, 1.700 Ko).

Le HTML vous connaissez ? Mais si, les pages de texte avec des images où rien ne bouge. Bon et bien le DHTML c’est la même chose mais avec des trucs qui bougent en plus.

Plus sérieusement, je vous propose de découvrir aujourd’hui un projet bien singulier : FACE est un framewok qui permet de faire des petites animations à l’écran sans avoir à utiliser Flash, sans connaître javascript et le tout dans le respect des standards web. Quelle est l’astuce ? Le recours à des propriétés des CSS ainsi qu’à des bouts de javascript le tout dans une syntaxe qui utilise le principe des noeuds :

En résumé : c’est gratuit, c’est compatible W3C, c’est relativement léger, donc : pourquoi pas ! Qui pourrait creuser un peu plus la question et nous donner un avis plus… avisé ?

Voilà une annonce qui risque de faire grand bruit : le W3C vient de publier une nouvelle version de travail des spécifications des CSS 3 dédiées à la mise en page : CSS3 Advanced Layout Module. La grande nouveauté vient du principe de construction de page reposant sur des gabarits (template en anglais).

Le principe consiste à découper une page en grandes zones qui vont accueilir du contenu. Dans l’exemple qui suit, 4 zones sont identifiées : en-tête (a), colonne de gauche (b), corps de page (c) et colonne de droite (d) :

La structure générale de la page sera construite selon un modèle de grille à l’aide de la propriété display-model qui s’apparente à la construction d’un tableau. Une fois cette structure générale définie, les différents éléments qui la constitue vont venir s’incruster dans ces zones à l’aide de la propriété position (ex : h1 {position: a;}).

Révolution ? Oui, ça a tout l’air d’une révolution dans la mesure où les propriétés CSS se substituent au travail des outils de gestion de contenu qui jusqu’alors avaient en charge la gestion des gabarits.

Je ne sais pas comment tout ceci va être accueilli par la communauté des développeurs mais je suis sûr d’une chose : les mises en page à l’aide de tableaux sont condamnées, la sentence vient de tomber aujourd’hui.

Et hop ! A peine mon précédent billet sur l’évolution de l’interface des blogs vient-il de paraître que je vous propose de découvrir deux outils pour améliorer votre blog :

1/ FeedFlare est un outils proposé par FeedBurner pour ajouter des liens contextuels au pied de chacun de vos billets dans votre flux RSS : envoyer ce billet par email, envoyer un email à l’auteur, liens Technorati, tags del.icio.us… dont voici une copie d’écran :

(Plus d’infos sur FeedFlare : FeedBurner makes RSS interactive, with FeedFlare)
(Plus d’infos sur FeedBurner : Premier retour d’expérience sur les statistiques de fréquentation de flux RSS)

2/ QuickSub est une fonctionnalité en CSS et Javascript qui permet de simplifier l’inscription à un flux RSS à l’aide d’un lien riche :

Vous pouvez voir fonctionner ce truc sur le site de Robin Good (passez votre souris au dessus de la cartouche orange ‘XML’).

Je viens de finir le dernier livre de Dan Cederholm qui parle de conception web et des standards W3C : Bulletproof Web Design. Outre le fait que ce livre se lise très bien et que tous les exemples de code sont très bien expliqués, ce qui m’a le plus marqué dans cet ouvrage est l’approche à toutes épreuves que l’auteur y explique.

Le concept est le suivant : que deviendrait la mise en page de votre site si les images ou le code CSS était désactivé ? C’est à partir de cette question que l’auteur nous explique comment concevoir un site et des mises en page qui se dégradent proprement ou qui restent lisibles si l’on double la taille du texte. D’ailleurs à ce sujet le site de l’auteur est un bon exemple : SimpleBits.com.

Conclusion : un livre que je vous recommande vivement.

Souvenez-vous, l’an dernier j’avais rédigé un billet sur les apports de CSS 3 pour les formulaires (voir ce billet ici : Des formulaires standardisés) et notamment sur les pseudo-classes comme :valid, :invalid ou encore :required. Le Gou Blog vient de nous publier un billet sur le même thème qui tombe à pic : Un peu de CSS3 pour les formulaires…. L’auteur nous parle entre autre de pseudo-classes comme :disabled, :focus ou encore :checked.

Pourquoi cet article tombe à pic ? Tout simplement parce qu’à l’époque où j’ai rédigé mon billet, toutes ces pseudo-classes étaient encore de la science-fiction, alors qu’avec la sortie de Firefox 1.5 et autres Opera 8.5, ces pseudo-classes peuvent enfin être exploitées. Si vous n’êtes pas convaincu, je vous invite à regarder le formulaire test du sieur Gou ou encore à admirer cette superbe mise en page à deux colonnes réalisée bien entendu à l’aide de propriétés CSS 3.

Au cas où vous ne l’auriez pas compris, l’utilité de ces pseudo-classes est de standardiser la façon de concevoir un formulaire en proposant du code toujours plus limpide et un comportement uniforme.