En route pour Limoges !

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

FACE : le retour du DHTML ?

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 :

Le principe de fonctionnement de FACE

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

CSS 3 : des templates pour structurer vos pages web

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

Le principe de gabarit des CSS 3

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.

Un site web à toutes épreuves

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.

La couverture du livre Bulletproof Web Design

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.

Formulaires : quand les CSS 3 vous changent la vie

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.