fastclemmy.com

Liens en vracs ?

# 31-10-2003

Maintenant que les commentaires sont activés sur fastclemmy.com, je peux récolter facilement vos avis... Est-ce qu'un log (rythme de parution à déterminer) qui serait une liste des liens à propos de l'XHTML/CSS, l'accessibilité, le webdesign vous intéresserait ? Cela ne ferait-il pas une redite par rapport aux autres weblogs que vous lisez ? Plus généralement, tous les commentaires sur la ligne éditoriale du weblog sont les bienvenus ! :)

#nombril

Mon engagement pour la promotion des standards m'amène souvent à me poser des questions sur la finalité de celle-ci. Vous l'aurez sans doute compris, je me considère comme un intégriste de la conception par blocs, dans le sens où il me paraît pour le moins aberrant de faire un site en 2003 avec de mauvaises méthodes datant d'il y a 5 ans. Je ne manque donc pas une occasion d'expliquer aux gens comment faire différemment et surtout mieux. Oui, mais jusqu'où ?

Ma conviction pro-standards est particulièrement exacerbée pour les sites faits par des "professionnels de la profession", ce qui m'amène même à être très exigeant sur la qualité des sites en XHTML/CSS, autant que je le suis sur les sites professionnels que je produis moi-même.

Mais quid de l'évangélisation des webmasters amateurs ? Quel intérêt a-t-on réllement à leur répondre, alors qu'ils posent une question sur un décalage de leur mise en page d'un tableau sous IE, qu'il faut tout reprendre à zéro et se mettre à l'XHTML/CSS ?

D'une part, la plupart du temps, on se fera stigmatiser pour notre "intégrisme", d'autant que tôt ou tard le webmaster trouvera la réponse à son problème de code pourri dans Google... D'autre part, est-ce vraiment une mauvaise chose que l'XHTML/CSS reste une affaire d'initiés ? Je vais peut-être paraître hautain, mais cela aurait le mérite de contre-carrer un peu l'idée générale selon laquelle tout le monde est capable de produire un site web de qualité professionnelle avec un peu de Photoshop et une touche de Dreamweaver.

Ma réflexion sur ce point n'est pas encore arrêtée, et vous, qu'en pensez-vous ?

#xhtmlCSS

Bien souvent, en lisant les forums de discussion, on tombe sur des webmasters ravis de montrer que dorénavant leur site "valide". C'est bien, mais bien souvent le travail ne fait que commencer...

Tout d'abord il y a valide et valide. Chaque document HTML doit spécifier dans son en-tête la "langue" qu'il parle (ce sont les DTD) : (x)HTML transitional, (x)HTML strict, (x)HTML avec des frames (frameset), etc. Le validateur du W3C en tient compte et vérifie que le document soumis correspond aux spécifications déclarées dans l'en-tête.

Il faut savoir que le choix de la DTD a une influence sur le degré de "sévérité" du validateur, ainsi, entre les normes transitional et strict, l'utilisation de certaines balises est interdite (le terme consacré est "déprécié") afin que le (x)HTML soit le plus proche possible de l'esprit d'origine de la publication web. Ainsi donc, une personne qui s'enorgueillit de voir son site valider en mode transitional a en fait sans doute encore un peu de pain sur la planche pour arriver à valider en mode strict.

Ensuite, la validation n'est qu'une étape pour s'assurer que l'on a fait un bon site web. Le validateur, c'est un peu le vérificateur d'orthographe de votre site. Si c'est valide, ça veut dire que la syntaxe est bonne, pas grand chose de plus. Le validateur ne vérifie par exemple pas si la mise en page de votre site se fait à base de tableaux plutôt que de blocs, c'est donc à vous de vous en assurer. Mieux vaut donc passer du temps à construire un site sémantiquement correct mais qui échoue au validateur pour un caractère & que vous auriez oublié de transformer en & plutôt que l'inverse.

Ceci étant, je vous engage à faire les deux : un site bien construit et valide !

#xhtmlCSS

Article original 26.09.03 - Evangéliser, c'est diffuser la bonne parole en se mettant à la portée de son auditoire. Souvent, utiliser une parabole pour expliquer les grandes lignes du concept est une technique des plus efficaces. Cela est aussi vrai pour le message des intégristes de la conception par blocs.

J'ai cherché longtemps une parabole satisfaisante. J'ai d'abord pensé à opposer le français argotique au "bon français", mais l'aspect dévalorisant était rhédibitoire.

Parlons musique. Imaginez le web d'il y a quelques années comme de la musique, qu'on jouait plus ou moins en improvisant, à l'oreille, essentiellement pour soi. Quand on rejouait le morceau, il y avait quelques variations, fausses notes dues justement à cette improvisation.

Un jour, quelques personnes se décidèrent à décrire de manière précise les notes, les variations, les rythmes qu'ils consignèrent dans un grand livre appelé "Solfège". Grâce à ces règles, le même morceau peut être lu et joué par tout le monde, en étant fidèle à l'original.

Pour le web c'est un peu pareil. Avant, on faisait un peu n'importe quoi avec du HTML permissif que l'on vérifiant avec le permissif IE. Maintenant tout cela a changé. On code proprement, ça passe avec tous les navigateurs dignes de ce nom et c'est accessible à tous.

Alors on se met tous au solfège ?

Mise à jour 28.10.03 - J'ai trouvé une nouvelle comparaison !

La problématique du vieil HTML avec tableaux par rapport à l'XHTML élégant avec CSS est la même que celle de l'euro. Mais oui, vous savez ces vieux grincheux tout autour de vous qui continuent à vous parler en francs alors que cette monnaie a disparu de la circulation ! En matière de HTML, c'est un peu pareil : on a vécu pendant un certain temps avec une manière de faire (le HTML à tableaux), maintenant il est recommandé de faire différemment (le XHTML/CSS par blocs). Bien sûr que cela demande un certain investissement, bien sûr que cela demande un peu de temps, mais vient un moment où il faut évoluer. Vous imaginez si on parlait encore en anciens francs ? Non ? Bon alors, allez faire un tour sur OpenWeb !

#xhtmlCSS

Expiration

# 27-10-2003

L'expiration, c'est le contraire de l'inspiration.

Ce sont ces périodes pendant lesquelles on se décourage, on creuse sans rien trouver, on trouve que l'on a décidément d'autres choses à s'occuper.

Heureusement, après l'expiration, l'inspiration revient...

#nombril

Le site de promotion des logiciels Mozilla fait peau neuve avec aux commandes David "CSSZenGarden" Shea et Tristan "StandBlog" Nitot. Pour le moment uniquement disponible en version beta, il déchaine les enthousiasmes dans les blogosphères francophones et anglophones. Au risque de passer pour le grincheux de service écrivant un log "pour le démolir bêtement parce que je n'aime pas les couleurs", je suis assez déçu de l'aspect final du site.

C'est vrai quoi, la déception est d'autant plus grande que Tristan nous faisait saliver avec un teasing digne des plus grandes productions hollywoodiennes (enfin quelques allusions sur son blog quoi), que David Shea était en charge du design et que la précédente mouture avait déjà reçu une volée de bois vert.

Certes du côté sémantique, construction de page en blocs et non pas en tableaux, accessibilité, le site a fait de gros progrès (merci Tristan !), encore heureux, serais-je tenté de dire... Cela dit ça fait un site de plus à rajouter à la liste des sites valides; du moins, quand les dernières petites corrections auront été apportées.

Mais c'est plutôt côté design que la sortie de ce nouveau site me chagrine, j'attendais mieux de la part de David Shea. Au-delà des couleurs qui effectivement ne me conviennent pas (on peut faire du corporate sans tomber dans l'insipidité comme ça), le graphisme ne guide pas assez le visiteur. Je m'explique.

Pour moi le gros souci des produits Mozilla c'est l'organisation des produits. La page d'accueil devrait faire comprendre immédiatement que l'utilisateur a le choix entre une suite logicielle complète (comprenant un navigateur Firebird, un client mail Thunderbird et un éditeur HTML Composer) et tous ces logiciels séparés. De plus, il faudrait à mon avis plutôt mettre en avant Firebird comme alternative à Internet Explorer plutôt que la lourde suite Mozilla. Je suppose que ce choix vient du fait que Firebird et Thunderbird n'en sont pas encore à la version 1.0, m'enfin. Il aurait été tellement simple de jouer sur un code couleur rouge pour Firebird et bleu pour Thunderbird, comme leurs icônes respectives.

Du côté de la navigation c'est aussi un peu bizarre avec un bandeau en haut qui laisse une large part au vide et qui délaisse un logo en haut à gauche visiblement posé là un peu par hasard.

Dans l'ensemble, ce design manque d'homogénéité et c'est un sentiment de "flottement" général qui me frappe.

Un des avantages d'avoir fait un site en XHTML/CSS est néanmoins de permettre de changer un look de site rapidement, ça tombe bien, on fait un concours de MozillaZenGarden ?

#divers

L'un des gourous des standards du web, ancien de chez Netscape et auteur du logiciel d'édition (X)HTML Composer se met maintenant à son compte, mais toujours pour le bien des standards et de l'esprit open-source !

Voici son annonce :

J'ai le grand plaisir de vous annoncer la naissance officielle de la SARL Disruptive Innovations dont je suis le fondateur. Nous allons nous focaliser sur le développement de logiciels autour des technologies et standards du Web. Notre premier client d'importance est, comme cela a déjà été annoncé, Lindows.com pour qui nous allons développer un nouvel éditeur de contenu Web basé sur Mozilla Composer. Disruptive Innovations va elle-même travailler sur Mozilla pour proposer d'une part un produit d'édition Web très amélioré, et d'autre part des prestations de service de développement de même nature que celle menée pour Lindows.com. Nous allons également spécifier une technologie de transformations documentaires XML qui sera implémentée dans un produit commercial sur base Mozilla. En France, Disruptive Innovations offre aussi des prestations d'expertise sur les processus de développement de produits logiciels, et de gestion de l'innovation technologique. Innovations, Open Source, standards et audace. Vous allez adorer ça autant que nous.

Comme tout le monde va en dire du bien (Tristan s'y est déjà collé), je peux me permettre d'émettre quelques réserves sur le design et la validité de son nouveau site. Besoin d'un petit concours à la CSS Zen Garden Daniel ? :o)

#divers

Ce log est un article en gestation qui a pour but de clarifier un peu les choses entre XHTML, CSS, sémantique, contruction par blocs, bref tout un tas de notions nouvelles pour les concepteurs web qui se cotoient et souvent se mélangent. Bien sûr incomplet pour le moment, il a vocation à être modifié/repris/amélioré et qui sait peut-être publié à terme dans une tribune plus grand public ?

Tous vos commentaires en bas de log sont les bienvenus.

Sommaire

  1. Ma page est-elle sémantique ?
  2. Ma page est-elle valide ?
  3. Ma page est-elle accessible ?
  4. Ma page est-elle "navigo-dégradable" ?

Introduction

La conception de pages web avec XHTML et CSS commence à faire parler d'elle : de plus en plus de (grands) sites adoptent cette nouvelle façon de faire : Macromedia.com, Espn.com, Wired.com, entre autres. Ce changement apporte son lot de nouveaux termes techniques qui peuvent perdre le néophyte : sémantique, validation, doctype, accessibilité, dégradabilité, etc. Il faut bien comprendre que la conception par blocs (par opposition avec la mise en page à base de tableaux) recouvre tous ces aspects de la conception web. Il s'agit de concept tous différents mais connexes : une page web bien faite doit répondre à tous ces critères.

Ce grand questionnaire est destiné à vous donner les clés pour appréhender ces concepts et à chaque page que vous produirez, vous pourrez vous posez chacune des questions suivantes.

Ma page est-elle sémantique ?

Le principe

Derrière le mot un peu abscons "sémantique" se cache une réalité toute simple : quand on fait une page XHTML, il faut utiliser les balises telles qu'elles ont été pensées. Ce n'est rien moins que de la logique pure. Si vous regarder la source de ce document par exemple, vous constaterez que les titres sont balisés avec des <h1>, <h2>, <h3>, que les paragraphes sont bien dans des balises <p> (et non pas séparés par des <br><br> intempestifs), que les listes d'éléments ordonnés utilisent des <ol><li></li></ol>, etc. Il faut donc utiliser des balises qui ont du sens.

Les implications

Cette façon de faire découle du fait qu'il faut séparer la structure du document de sa présentation : le fichier HTML constitue un squelette que l'on habille à sa guise avec un fichier CSS. C'est pourquoi l'utilisation de balises de présentation comme <b>, <i>, <u> ou autres sont totalement à proscrire : les indications de mise en forme, de positionnement des éléments sont à décrire dans le fichier CSS.

Le fait de créer une page sémantique impose d'abandonner la mise en page en tableaux, mais pas d'en proscrire absolument l'utilisation. On comprend bien qu'une page conçue avec des multiples tableaux imbriqués avec des colspan, rowspan n'est pas la bonne méthode pour structurer son document. En revanche, quelle meilleure façon de décrire un tableau de chiffres qu'avec une balise <table> ?

D'ailleurs l'abandon de la mise en page à base de tableaux pour passer à la conception par blocs réduit considérablement le poids des pages HTML (c'est le "Codons moins, codons mieux" de Denis). En éliminant les attributs de présentation du fichier HTML et en les regroupant dans une CSS, on peut gagner jusqu'à 50% sur le poids du fichier.

L'utilisation sémantique des balises favorise aussi le bon référencement auprès des moteurs de recherche. Pas très étonnant, car ceux-ci recherchent uniquement les informations textuelles du document et apprécient de voir l'information hiérarchisée avec des niveaux de titres <h1>, <h2>, <h3>.

Les outils pour tester

Il n'existe pas à proprement parler d'outil automatisé pour tester la sémantique d'un document, seul un peu d'expérience et de logique permettent de déceler les erreurs dans un document HTML.

Ma page est-elle valide ?

Le principe

Ma page est-elle accessible ?

Le principe

Ma page est-elle "navigo-dégradable" ?

Le principe

#xhtmlCSS

Mélange des genres

# 12-10-2003

Les quelques habitués de ce weblog auront sans doute constaté que ce weblog est essentiellement technique : assez peu de bavardage, une rubrique égocentrique qui est souvent technique... Pas vraiment de mélange des genres quoi. Sans doute parce lire des posts "d'opinion" sur les autres weblogs techniques que je lis m'énerve.

#humeur

Article original du 15.08.03 - Comme annoncé précédemment, regonflé à bloc après une petite douche écossaise, je me suis remonté les manches et ai concocté rapidement ma proposition pour le CSS Zen Garden.

Vous pourrez la retrouver sur http://www.fastclemmy.com/tests/cssZenGarden/ et vous y retrouverez évidemment... un scrolling horizontal qui ravira mes détracteurs :o)

Bien entendu tous vos commentaires sont les bienvenus, sachant que la CSS n'est pas très optimisée et qu'une barre de défilement verticale est apparue mystérieusement à un moment mais que je vais m'employer à trouver pourquoi et à la faire disparaître.

En attendant, il est temps pour moi de prendre quelques jours de vacances. A la semaine prochaine !

Mise à jour du 10.10.03 - J'ai enfin repris et corrigé mon design pour le CSS Zen Garden. Maintenant que les commentaires sont activés, vous allez pouvoir me donner votre avis ! Je n'ai pas encore soumis ma proposition officiellement donc si il y a des critiques à faire, c'est le moment !

A voir en version anglaise ou française !

#xhtmlCSS

Article original 13.09.03 - Suite aux demandes répétées, je planche sur un système de commentaires pour fastclemmy.com. Avancée du travail : 60% environ. T'avais qu'à installer Dotclear me direz-vous. Oui, mais que voulez-vous, l'ego ça (se) travaille.

Mise à jour 09.10.03 - Ca y est, les commentaires sont en place. N'hésitez pas à me signaler les bugs éventuels...

#nombril

Si vous utilisez Internet Explorer, vous ne pourrez pas tester ce nouvel outil, profitez-en pour adopter Mozilla ou Firebird. Parés ?

Grâce à Mozile, vous pouvez éditer directement dans le navigateur votre page en XHTML/CSS ! Vous ne voyez pas l'utilité ? Imaginez que vous créez un site pour un client avec une jolie structure XHTML/CSS comme il se doit. Bien entendu, le client est un néophyte et il est hors de question qu'il modifie directement le code lui-même. C'est ici qu'intervient Mozile.

En l'implémentant dans le site que vous aurez conçu, le client pourra simplement cliquer dans la page et modifier le contenu grâce à une barre d'outils semblable à celle de Word. Une sacrée bonne alternative gratuite à des produits comme Contribute par exemple.

Oui mais... tout le monde va pouvoir éditer mon site me direz-vous ? Pour pallier à ce problème, il vous suffit de mettre en place un simple système d'identification qui affichera ou non Mozile sur les pages du site en question.

A noter que Mozile fonctionne aussi en partie sur IE, mais produira du code invalide, retirant un grand intérêt au produit.

Le système reste sans doute à parfaire mais c'est sans doute un pas en avant dans la bonne direction. Et tant mieux si de nouveaux utilisateurs adoptent Firebird dans la foulée !

#xhtmlCSS

Juste un petit log pour signaler l'arrivée d'un nouveau blogueur que j'aurai plaisir à lire chaque jour. (Notez au passage que la rubrique Nombril fait des émules). Bonne continuation à lui en tout cas !

#divers

Depuis quelques temps c'est la mode des générateurs automatiques de bidules en XHTML/CSS pour rendre la vie facile aux débutants. Après les listes, les listes imbriquées c'est carrément un modèle de site entier qu'on peut réaliser parfois en remplissant quelques champs. Pour ma part ce genre d'outils me laissent assez circonspect.

Tout d'abord, même si je ne perds pas de vue que ces initiatives sont à destination d'un public qui découvre la conception par blocs, force est de constater que des générateurs de gabarits mènent nécessairement à l'uniformisation des sites web. Chose qui personnellement me hérisse en tant que défenseur de l'innovation "XHTML-CSSesque". La perspective de revoir partout les mêmes sites avec les mêmes mises en page, les mêmes boutons, les mêmes titrages, ne m'enchante guère.

De plus on remarquera que lesdits générateurs perpétuent toujours et encore des modèles de page hérités de l'ère de la construction à base de tableaux avec ces désespérantes lignes droites et ces colonnes à n'en plus finir.

Mais soyons optimistes et disons-nous que grâce à ces outils de nouvelles personnes faisant des sites web se plongeront dans le code et découvrirons que passer aux standards c'est dur, mais ça vaut le coup.

Deuxième chose qui m'interroge, c'est la visibilité de ces outils. Pour l'instant il s'agit d'initiatives personnelles isolées (qui au passage repompent surtout le code grâcieusement offert par d'autres) cachées au fin fond de sites épars. La probabilité que le débutant moyen en HTML tombe dessus est quasi-nulle. Il faudrait plutôt concentrer les efforts de lobbying pour intégrer ces générateurs sur les portails des hébergeurs expliquant comment on fait des sites web ou, mieux, sur les sites de "référence" du HTML d'antan (qui a dit AllHTML ?). Ce n'est qu'à ce prix que du code valide pourra être à la portée des nouveaux venus dans le monde du web.

Enfin, dernier point qui me chagrine, c'est que les générateurs en question tournent pour l'instant en peu autour de leur nombril. C'est sympa de me faire ma page à ma place en me rassurant sur le fait que je sois "peu inspiré" plutôt que "feignasse", mais ça serait bien par la suite de m'expliquer un peu l'envers du décor, de comprendre comment ça marche, comment je pourrais l'améliorer moi-même, pour un jour ne plus être dépendant et faire les choses tout seul.

C'est un peu apprendre à pêcher du poisson au lieu de pêcher du poisson automatiquement.

#xhtmlCSS

Googlisms

# 02-10-2003

Il est souvent assez amusant de voir à cause de quels mots-clés les visiteurs tombent sur votre site.

Heureusement, la plupart du temps, les gens ne viennent pas tout à fait sur fastclemmy.com par hasard. Certains ont même une idée très précise de ce qu'ils recherchent. A se demander même, pourquoi ils ont besoin d'un moteur de recherche...

D'autres se trompent visiblement d'adresse, ou prennent des chemins détournés pour aller voir les collègues blogueurs.

Ils pensent parfois trouver ici une inspiration zen ou mieux, la conception du bonheur. Espérons qu'ils auront trouvé ça ici !

Non, je ne suis pas un spécialiste de la canicule, du ronflement, de la conception de carte de menu de restaurant.

Par contre j'aimerais bien qu'on m'explique pourquoi tous les gens qui recherchent un CV de chef de projet Internet ne m'envoient pas un mail pour me réclamer, à moins que ces googleurs ne cherchent tous à me piquer mon job ;)

#nombril

Changer de style ?

# 01-10-2003

Post original 25.08.03 - Dans ma todo list se trouve en première position : Trouver l'intérêt de proposer un style switcher sur le site. La question de l'opportunité d'un style switcher sur un site me taraude en effet depuis pas mal de temps déjà.

Pour les non-initiés, un style switcher apparaît la plupart du temps sous la forme d'un petit menu déroulant permettant de sélectionner un autre "style" de mise en page, très concrètement cela revient à recharger la page courante avec une feuille de style différente. Sur ce site par exemple, on pourrait imaginer que je fasse une feuille de style alternative où les informations s'afficheraient verticalement.

Si vous parcourez un peu les différents weblogs traitant comme le mien de l'XHTML-CSS, vous constaterez que ce petit outil est présent dans nombre d'entre eux, effet de mode sans doute... Mais côté utilisateur, cela apporte-t-il vraiment quelque chose ? En regardant mon expérience personnelle, je me rends compte que passé l'effet de surprise que je peux avoir en regardant les différents styles (la plupart du temps ils sont quand même relativement similaires, exception faite du cssZenGarden), je me fixe sur l'un d'entre eux et je n'en change presque jamais. Preuve que le style switcher tient plus du gadget que d'autre chose.

Ceci dit, grâce aux feuilles de style on peut changer non seulement la présentation mais aussi le contenu d'une page grâce à la propriété display des éléments. Et c'est peut-être de ce côté que la réflexion est à mener. Qu'en pensez-vous ?

Mise à jour 26.08.03 - L'ami Talou avance 3 arguments en faveur d'un style switcher. Tout d'abord le confort de lecture. Il est vrai que je ferai sans doute quelques heureux en créant une feuille de style verticale, mais d'une part ce genre de choix n'intervient généralement qu'une fois et le rapport temps passé pour créer un style alternatif/intérêt ne me paraît toujours pas probant.

Ensuite, Talou nous expose deux idées qui à mon sens se rejoigne : il s'agit de la démonstration de la puissance des CSS/du talent du webdesigner. Soit. Mais ces deux arguments ne sont valables que pour un public averti : il est certain que sur un blog parlant de l'XHTML+CSS, le public sera sensible à la qualité (technique) des styles alternatifs, pas sur un site grand public.

Pour mon blog, n'ayant toujours pas trouvé d'argument convaincant, je ferai l'impasse (pour le moment) sur un style switcher, ça tombe bien j'ai déjà quelques autres choses à faire dans ma todo list.

A noter également que du côté de Darken et d'Anubis, ça bouge dans les style switchers.

Mise à jour 01.10.03 - La lecture d'un post sur un nouveau blog anglophone me conforte dans mon idée. Sans en remettre en cause l'utilité, Vinnie se plaint du temps que lui prend le travail sur des feuilles de style alternatives et je le comprends !

#conceptionWeb