Jean-Sébastien Mansart .com - Tag - accessibilite

Mon best-of Paris Web 2008 : Qualité et Accessibilité

Jean-Sébastien Mansart — Tue, 20 Jan 2009 11:34:00 +0100

Troisième conférence que je vous propose, on continue avec un thème cher à Paris Web : l'accessibilité. C'est Elie Sloim qui s'y colle, et il en profite pour nous présenter opquast

Elie Sloïm Qualité et accessibilité Web

J'ai suivi avec beaucoup d'intérêt cette conférence car développant des sites pour des administrations, le RGAA nous est un peu "imposé". Il nous faudra donc des outils pour suivre nos projets et qualifier l'accessibilité de ceux-ci.

A ce propos, j'ai une question : Est-ce que les sites pour les centre culturels français sont soumis au RGAA ?
Un chocobon à gagner pour le premier qui peut répondre à cette question...

Article original écrit par Jean-Sébastien Mansart et publié sur Jean-Sébastien Mansart .com | Lien direct vers l'article | Si vous lisez cet article dans son intégralité sur un autre site que Jean-Sébastien Mansart .com c'est qu'il a été reproduit illégalement et sans autorisation. Merci de le sig naler à son auteur original en cliquant ici | © jsmansart.com.

Mon best-of Paris Web 2008

Jean-Sébastien Mansart — Mon, 12 Jan 2009 18:38:00 +0100

Paris Web, c'est LA mecque pour les développeurs web un tant soit peu concernés par l'ergonomie, l'accessibilité et le goût du travail bien fait.

Si vous n'avez pas eu la chance d'y assister, je vous présente dans une série d'articles les présentations qui m'ont le plus marquées et que j'ai trouvé particulièrement intéressantes.
Laissez vous guidez, installez vous confortablement, c'est partit.

On commence avec une conférence de Stéphane Deschamps et Aurélien Levy sur l'accessibilité. Une conférence comme je n'en avais jamais vue, avec énormément d'humour et de vérités.
Une vidéo que tout le monde devrait voir au moins une fois pour comprendre ce qu'est l'accessibilité et pourquoi on ne peut pas ne pas rendre nos sites accessibles.

La conférence dure 1h20, et c'est du pur bonheur !

Stephane Deschamps et Aurélien Levy - Accessibilité : des volontaires ?

Alors, vos impressions ?

Performances d'un site web

Jean-Sébastien Mansart — Sun, 23 Nov 2008 11:00:00 +0100

Depuis quelques mois je m'intéresse à deux points particuliers d'un site web : l'accessibilité et les performances.
Les performances web ne sont pas combien de visiteurs un site web a réussi à convertir en acheteur, mais plutôt la rapidité de réponse et d'affichage d'un site dans le navigateur de l'internaute.

Dans le domaine des performances web, en français, il n'existe pas beaucoup de lecture sur internet. Cependant deux blogs traitent du sujet.

Le premier est celui d'Eric Daspet : Performances web, et le second, celui de Nicole Sullivan.

Je lis celui d'Eric Daspet depuis plusieurs mois, et quand j'ai le temps, je me penche d'un peu plus près sur les conseils qu'il donne et regarde ce que je peux mettre en place de mon coté.

Pourquoi se préoccuper des performances des sites web ?

C'est vrai après tout, tout le monde a une connexion de ouf...

Tout le monde ? Pas forcément. Et des fois, tout se joue pour quelques centaines de millisecondes.

Perdre 500ms c’est perdre 20% de traffic pour Google (ou pourquoi il n’y a que dix résultats par page dans les recherches).
Perdre 100ms c’est perdre 1% de ventes pour Amazon.
Réduire de 25% le poids de la page c’est gagner 25% d’utilisateurs à moyen terme pour Google.
Eric Daspet - A quoi ça sert ?

Pour un petit blog comme le mien, ce n'est rien, je n'ai pas un besoin vital de me préoccuper de cet aspect.
Non.

Je m'en sers comme "bac à sable". Je peux tester certaines pratiques, certaines techniques, afin de voir comment les intégrer dans mon travail, les partager avec mes collègues et leur faire comprendre que c'est un point tout aussi important que l'accessibilité ou que la couleur du bouton que veut le client.

Que peut-on faire facilement ?

Dans un premier temps, j'ai donc installé YSlow, un plugin pour firefox qui vient en surcouche de firebug.

YSlow m'a donné un petit D, soit 58 sur 100. Et mon site se chargeait en 3 secondes.

J'ai regardé point par point ce que je pouvais faire, et après avoir lu de la doc un peu partout, j'ai commencé par réduire le poids des images.

Pour ça, il existe un site web fabuleux, créé par Nicole Sullivan et Stoyan Stefanov : smushit. Il suffit de donner l'url de la page, et le service s'occupe de tout. Au final il vous rend un fichier zip avec toutes les images optimisées et, point important, les optimisations ne sont pas destructives. Votre image sera identique pixel par pixel à celle d'origine.

J'ai ensuite tenté de réduire le nombre de requêtes HTTP.

Pour réduire le nombre de requêtes HTTP, on peut :

merger les CSS
merger les JS
privilégier les CSS Sprites

Je n'ai pas été très chanceux sur ce coup, je voulais à tout prix faire un maximum de CSS Sprites, mais dans mon cas, ce n'était pas possible, je n'ai réussi qu'à réduire d'une image le nombre d'images CSS.

J'ai tout de même réussi à merger les trois feuilles de styles pour n'en faire plus qu'une seule, et je l'ai ensuite optimisée avec code beautifier.

Pour les fichiers JavaScript, rien à faire de ce côté là, utilisant dotclear, je préfère laisser les fichiers JS tels quels.

En troisième action, j'ai demandé à mon hébergeur de configurer le mod_expires d'apache.

mod_expires permet de spécifier une date d'expiration du contenu. Tant que la date n'aura pas expirée, votre navigateur ne rechargera pas le contenu en question. Les gains en cache plein sont assez impressionnants.

Vous pouvez régler la date d'expiration par type de contenu, et vous pouvez le faire soit dans la configuration générale d'apache, soit dans votre vhost ou votre .htacess.

Voici par exemple ce que j'utilise :

ExpiresActive on
ExpiresDefault access plus 10 years
ExpiresByType text/html now
ExpiresByType text/xml now

On active le mode expires, par défaut tous les types de contenus expirent dans 10 ans, par contre, le HTML et le XML expirent immédiatement, ce qui évite de vider son cache quand un nouvel article est publié sur le site et sur le flux RSS par exemple.

Au final, avec ces quelques petites choses, avec un cache vide, mon site (d'après mes tests) se charge en 1s, et avec le cache plein en 0,5s. Ce qui me fait maintenant une note C, soit 79 sur 100.
On remarquera aussi qu'avec le cache vide, 26 requêtes sont nécessaires, alors qu'une fois le cache plein, il ne suffit plus que d'une seule requête : la page HTML.

Prochainement, avec mon hébergeur, nous devrions mettre en place le mod_gzip qui permet de compresser à la volée le contenu, et ainsi réduire la consommation en bande passante et, normalement, accélérer l'affichage des pages. Car plus c'est gros, plus c'est lent.

Tout ce travail porte ses fruits, j'ai déjà commencé à modifier la configuration apache de nos serveurs de production, et les graphistes regardent de près smushit et le format PNG-8 qui est beaucoup plus performant que le GIF.

Les performances web, c'est comme l'accessibilité, toujours en mouvement. On n'est jamais fixé, il y a toujours à faire, c'est pour ça que j'aime le web !

A suivre donc...

Les évènements de novembre où je serai

Jean-Sébastien Mansart — Mon, 27 Oct 2008 13:27:00 +0100

Parce qu'il n'y a pas que le web et surtout parce que le web ne se pratique pas que sur internet, je serai présent à deux évènements diamétralement opposés et pourtant, pas si éloigné que ça dans un sens...

Le week-end du 1er novembre, je serai avec Widiwici aux 2 alpes pour le mondial du snowboard. Au programme, distribution de tracts et faire connaitre le réseau social sportif, fête et test de matériel (ça va être sport, j'ai jamais fait de snow, mais on est pas des petits joueurs !).

Je serai aussi présent du 13 au 15 novembre à Paris Web 2008, avec Marlène. Deux jours de conférences et une journée d'atelier.

J'ai bien fait de réserver directement le pass atelier, ils se sont tous vendu en 24h !
Je vais surement participer à l'atelier que mon ami Frédéric de Villamil animera avec David Larlet sur les RDFa vs les Microformats. (oui, ça fait peur)

Si vous vous trouvez à l'un de ces deux évènements, signalez vous dans les commentaires ou contactez moi ! On pourra aller se boire une petite bière.

DotClear 2 : le Wordpress killer ?

Jean-Sébastien Mansart — Wed, 04 Jun 2008 08:00:00 +0200

Cela fait maintenant un mois que DotClear 2 est en RC1, il est temps de faire le point sur les nouveautés apportées et sur ce qu'il manque encore (à mon avis) pour en faire un moteur de blog incontournable.

En route !

Une RC1 désigne une version dont les fonctionnalités sont arrêtées. Reste seulement quelques bugs à corriger, et mener un test à grande échelle.

Bientôt deux ans que la version 2 de DotClear était en beta, et chose impensable dans le monde du logiciel libre, la RC1 a été livré à l'heure, à la minute près. Beaucoup de choses ont changés depuis les versions (7 en tout) beta, petit tour d'horizon :

La première grosse nouvelle, est l'arrivée (enfin !) des pages statiques. Plus besoin de plugin, ni de bidouille, vous pourrez enfin créer vos pages de contacts, d'à propos ou autre le plus simplement du monde. Le formulaire d'édition est le même point par point à celui des billets, vous ne serez donc pas perdu.

La deuxième grosse nouvelle, celle qui se voit le plus d'ailleurs, c'est le nouveau thème Blowup. Un thème simple, mais qui cache toute sa puissance dans l'interface d'administration.
En effet, il est possible d'éditer le thème.
On a de base accès à 11 styles prédéfinis, une fois choisi celui qui nous correspond le mieux, on peut modifier chaque paramètres indépendamment, comme la couleur des liens, la couleur de fond, la position du titre du blog, l'image du bandeau, etc... Les possibilités sont impressionnantes et infinies.
Les personnes n'ayant aucune connaissance en HTML / CSS en seront ravies.

Le formulaire d'édition des billets a subit lui aussi un petit lifting avec quelques options bien utiles :

Les zones d'édition sont redimensionnables à la volée grâce à des poignées, un petit drag & drop et le tour est joué.
Si vous écrivez votre billet avec la syntaxe wiki, un petit lien permet de le convertir en XHTML. Un autre permet la validation XHTML du billet.
Dans la barre wysiwyg deux nouveaux boutons font leur apparition, le premier permet d'insérer un lien vers un ancien billet. Une fenêtre s'ouvre et vous laisse choisir le billet à lier. Un petit module permet d'effectuer une recherche sur les billets.

Le second, permet d'ajouter un média externe, comme une vidéo dailymotion ou youtube. Il suffit d'indiquer l'url de la vidéo et DotClear s'occupe d'insérer le code XHTML valide (contrairement à ce que dailymotion ou youtube fournissent) dans le corps du billet.

En parlant de média, il est maintenant possible d'enregistrer le contenu de ce dossier au format zip et de le télécharger sur l'ordinateur.

Le zip est d'ailleurs devenu le nouveau format pour les plugins. Oubliez le format propriétaire pkg.gz pour distribuer vos plugins, le zip prend le relais. Beaucoup plus simple et ne requière pas l'utilisation d'un plugin particulier pour générer les packages...

La gestion des tags a été aussi revue, il est maintenant possible (oui, ça ne l'était pas avant) de supprimer un tag.

Pour en finir avec les nouveautés, l'accès contextuel à l'aide a été améliorée. Un bouton sur la droite de l'écran permet d'ouvrir un bandeau latéral et affiche le contenu de l'aide en rapport avec la rubrique où vous vous trouvez.

Comme vous pouvez le voir, le travail accompli a été énorme et très bien pensé. Malheureusement (ou heureusement), il y a encore du travail à faire, déjà pour sortir une version finale, et ensuite pour en faire un vrai moteur de blog incontournable, voir un Wordpress killer. Qui sait ?

Pour moi il ne manque pas grand chose :

La prévisualisation du billet dans le blog directement. Pour mieux voir la mise en page et ce que va rendre le billet une fois en ligne.
La sauvegarde automatique du billet toutes les minutes par exemple. Parce qu'on en a marre de perdre le travail en cours (bon, ok, moi je passe par OpenOffice ou Word pour rédiger mes billets... mais bon.)
L'auto-complétion des tags lors de l'édition du billet. C'est peut-être du gadget, moi je ne trouve pas. C'est de l'ergonomie et de la facilité d'utilisation, surtout lorsque l'on a une liste de tags assez chargée. Ca évite aussi de faire des doublons avec deux orthographes différentes.
L'identification par OpenID. On aurait une piste par ici...
Rendre un blog privé. Pour le moment, on ne peut rendre que les billets privés, avec un accès par mot de passe. Des plugins existeraient pour rendre le blog privé, mais d'après les échos que j'en ai eu, ils ne seraient pas vraiment au top.

Pour ma part, je trouve que DotClear est un très bon moteur de blog. Au delà de ce que peut être Wordpress, surtout au niveau de l'ergonomie de l'interface d'administration. DotClear possède des qualités indéniables. Manque juste une communauté plus importante et plus active, surtout pour la création de plugins et thèmes. Cela viendra sûrement avec la version finale.

Note de service : changements sur le blog

Jean-Sébastien Mansart — Wed, 28 May 2008 12:04:00 +0200

Ces derniers temps, mon blog n'était pas accessible à 100%, des coupures, des bugs, etc...

Raisons des changements, et solutions apportées...

Depuis que je me suis lancé dans la grande aventure des blogs, j'ai toujours utilisé DotClear comme plateforme de blog.
J'ai quand même fait quelques essais avec Wordpress au cas où, mais l'interface d'administration étant tout simplement horrible, je n'ai pas poussé plus loin mes investigations.

Ce week-end, petit soucis avec mon DotClear : impossible d'associer des tags à un billet, le déploiement des articles (javascript) ne marchait plus... Bref, il était temps pour moi de mettre à jour la plateforme et de tester la RC1.
Installation en 10 minutes, aucun soucis, et les bugs ont disparus. Magique.
Quelques améliorations plutôt sympathique et surtout : l'arrivée des pages statiques. Je fais mumuse un moment avec l'éditeur de thème. C'est rigolo, bien pensé et très performant.

Je reviendrai plus tard avec un billet spécial sur les nouveautés de la RC1 et ce qu'il manque encore pour en faire un vrai Wordpress killer.

Coté hébergement, c'est du Home Made. Un PII400 avec 750Mo de RAM, 250Go de disque dur, Debian, apache 1.3 et php5, le tout installé dans le placard de mon ancienne chambre chez mes parents. (On est geek où on ne l'est pas).

Le soucis d'un tel hébergement, c'est que Free n'est pas un fournisseur d'accès proposant du QoS, et les coupures sont assez fréquentes, quand c'est pas la FreeBox qui plante.
Pour résoudre ce problème, Olivier Bonhomme me propose un hébergement sur un de ses serveurs : ftp, ssh jailé, php5, mysql, espace illimité... Pour l'instant l'hébergement est en phase de test, je pense migrer mes blogs en septembre si tout se passe bien.

Depuis mon passage à la version 2 de DotClear, je n'avais pas accès aux fonctions avancées du gestionnaire de média, comme la gestion des miniatures. Pourtant GD était installé.
Après investigation, je me suis rendu compte que Debian avait installé GD pour apache2. Etant toujours avec apache1.3, j'ai donc voulu mettre en place la nouvelle version d'apache.
La partie la plus dur a été de réécrire tous les vhost, la syntaxe n'étant pas exactement la même, c'est pour cela que certains ont eut des erreurs 500 lundi midi.

Une fois apache2 installé et correctement configuré, j'ai pu voir que mon diagnostique était bon : GD est bien pris en compte, je peux enfin profiter des miniatures.

Au final, j'ai l'impression qu'apache2.2 est beaucoup plus stable et beaucoup moins gourmand en ressources qu'apache1.3, on verra comment le serveur répondra avec le temps et s'il tiendra encore le coup d'ici septembre.
Il faut encore que je refasse le CSS de la page contact qui a changé avec la mise à jour de DotClear et ce sera bon.

Les commentaires vidéos : une vraie fausse bonne idée ?

Jean-Sébastien Mansart — Fri, 25 Apr 2008 14:12:00 +0200

TechCrunch a lancé hier les commentaires vidéos avec seesmic.
Au-delà de l’innovation technologique et de l’effet « über hype » qu’en est-il réellement ?

Il est vrai qu’on pourrait croire que c’est génial, que ce système va révolutionner les blogs et qu’à partir de maintenant tous les blogs n’ayant pas cette fonctionnalité sont voués à un abandon par les masses, car complètement dépassés.

Dans le fond, je vous rassure, il n’en est rien.

J’ai voulu tester pour vous le nouveau système. J’ai d’abord été interpelé par la nouvelle en elle-même, je me suis dit qu’effectivement ça pouvait donner un gros plus, effectivement, il y a un gros plus, mais j’y reviendrai plus tard.

Donc, je lis le billet, et je m’attaque aux commentaires. Je lis les différents commentaires tous aussi constructifs les uns que les autres (« Ouais, trop bon ! » « Han, génial », etc…). Voyant un commentaire vidéo de Loic Lemeur, je me dis que ça serait bien d’écouter ce qu’il a à dire. Je lance la vidéo. Ca charge, Loic dit bonjour, mon boss arrive et je coupe la vidéo.

Résultat : complètement inexploitable (au travail en tout cas).

Plusieurs questions me viennent à l'esprit :

Comment va faire TechCrunch pour modérer tous ces commentaires ?
Les commentaires vidéos ne vont-ils pas engendrer une baisse du nombre de commentaires ?

La modération des commentaires est un gros souci. J’ai vu qu’Ouriel apportait une réponse, mais vu qu’il a répondu en vidéo, je n’ai pas pu l’écouter…
Dommage.

Comme je le disais plus haut, effectivement, il y a un gros plus : vous passerez moins de temps à lire les commentaires des autres, vu que généralement vous êtes au travail la journée, vous n’aurez pas le temps d’écouter tous les commentaires. Donc d’y répondre (vous avez une webcam au taf ?) (bon, moi oui, mais elle est intégrée dans mon iMac), vous serez donc plus productif. Et c’est votre employeur qui remerciera TechCrunch.
Le fait que le commentaire soit en vidéo ne vous permet pas de le lire en diagonal. Vous êtes obligé de l’écouter en entier pour vous apercevoir qu’il n’apportait rien.

Autre point négatif : l'accessibilité. La vidéo n'est absolument pas accessible, et les personnes malentendantes sont largement lésées. Impossible pour elles de prendre part à la conversation (mais ce problème là est valable pour toutes les vidéos sur le net, podcast, etc...)

Pour finir, je ne pense pas que les commentaires vidéos se démocratiseront, c’est une belle expérience en tout cas non seulement pour la technologie, mais aussi pour seesmic qui va d’un coup « populariser » sa plateforme, recruter de nouveau membres et vérifier que son infrastructure tient la charge.

Et vous, pour ou contre les commentaires en vidéo ?

Nouveau thème : je vous fais faire le tour du proprio ?

Jean-Sébastien Mansart — Wed, 26 Mar 2008 13:54:00 +0100

Après un mois de dur labeur et de fouettage de la graphiste, le nouveau thème de ce blog est enfin en ligne.
Plus qu'un simple changement de couleurs, c'est avant tout un changement ergonomique de la navigation.

Petit tour d'horizon des nouveautés apportées.

Premièrement, d'un point de vue global, la charte graphique reste dans les mêmes tons. L'accent à surtout été mis sur la navigation qui était le point faible (c'est pas peu dire) de l'ancienne version, l'ergonomie et l'accessibilité.
Lorsqu'un visiteur arrivait sur un billet, il n'avait d'autre choix que de retourner à l'accueil où cliquer sur la barre de navigation qui exécutait un javascript douteux...

Maintenant, on retrouve une barre de navigation sur la droite, assez commune, avec un bel emplacement pour l'abonnement au flux RSS, la liste des derniers billets, les catégories et les tags.

Une "micro" navigation horizontale permet d'accéder à des informations plus personnelles : une page pour me contacter, un lien d'échappement vers l'à propos et un lien vers mon CV en format PDF.

Toujours dans la navigation, tout en bas du blog se trouve un "bigfooter" ou "pied de page" qui regroupe les derniers commentaires publiés, les derniers articles et un encart sur ma vie trépidante (c'est pas tout le monde qui peut se targuer d'être l'inventeur d'un sport).

Pour le contenu, tout à été fait pour le mettre en avant.

Sur la page d'accueil, les billets sont coupés, le lien "lire la suite..." à été revu et mis en valeur.
Un lien affiche le nombre de commentaires, et lorsqu'il n'y en a pas, au lieu d'afficher un triste et désespéré "0 commentaires", s'affiche un "commentez !" nettement plus incitatif.
Les liens dans le corps du texte étaient avant pratiquement invisibles, ils étaient noyés dans le texte. On a donc changé la couleur pour une couleur beaucoup plus voyante avec un fort contraste afin de mieux les identifier.
Enfin, à la fin de chaque billet se trouve une section "vous allez aimer !" qui affiche les 5 billets qui sont (plus ou moins) en rapport avec le billet en cours.

Ce thème à naturellement été testé avec les principaux navigateurs du marché : IE6, IE7, Firefox et Safari.
Mis à part sous IE6 qui est un véritable calvaire pour les développeurs, tout a fonctionné à merveille sur les autres navigateurs.

Faites moi part de vos critiques et/ou rapport de bugs (si vous en trouvez)

Utiliser les nouvelles technologies a tout prix

Jean-Sébastien Mansart — Wed, 19 Mar 2008 14:45:00 +0100

L'échange de cartes de visite est un moment assez solennel. Certains ont une carte standard, d'autres pourtant se démarquent. C'est le cas de la carte de visite de Patricia Gallot-Lavallée : un format rond, type sticker, avec sur le recto les informations usuelles et sur le verso des infos en plus.
Quand Patricia nous a donné sa carte, chacun l'a regardé un moment et j'ai été le premier à m'étonner : "Oh ! Un QR Code". Les autres quant à eux se demandaient ce que pouvait bien être cet espèce de picto 8-bit revival tout chelou...

Bienvenue dans le petit monde du QR Code et de sa non utilisation en France...

Le QR Code (Quick Response Code) est un code barre en deux dimensions, il permet un stockage d'informations plus élevé qu'un code barre classique et on peut le lire même s'il est dégradé (ça serait bien pratique en caisse ça...).

Les Codes QR sont originaire du Japon, ils sont principalement utilisés (au japon, forcément) sur les cartes de visites, magazines, affiches publicitaires, etc... et peuvent représenter une url, un email, un nom, une adresse...

Tout le monde le sait, au Japon, c'est pas comme chez nous, ils ont des téléphones portables beaucoup plus évolués, c'est d'ailleurs avec ces derniers que l'utilisation des Codes QR prend tout son sens : Vous voyez un Code QR, hop, dégainage du mobile, une photo et l'appareil reconnaît directement le code. Il vous propose ensuite de suivre le lien et vous vous retrouvez sur une page web par exemple.
Ca évite de devoir taper avec son gros pouce une url dans son téléphone. C'est quand même beaucoup plus pratique.

Par contre en France, avant de trouver un téléphone qui utilise cette technologie, ben... Ouais. On peut encore attendre... Il existe bien quelques logiciels sur PC qui permettent de décoder ces codes barres, et peut être une ou deux applications pour les téléphones, mais elles sont en japonais.

Alors la carte de visite de notre chère Patricia (tout comme celle de Fred Cavazza) est très jolie, elle fait "über hype" avec son QR Code, elle est à la pointe de la technologie, sauf que complètement inutilisable, car complètement inutilisé (et inconnu) en France.

Les early adopters aiment toujours propulser un peu en avant les nouvelles technologies, afin d'en faire un standard (OpenID par exemple). Mettre ainsi sur sa carte de visite un QR Code permet effectivement de promouvoir cette technologie, mais est-ce une bonne idée de l'afficher sur un média aussi commun qu'une carte de visite ?

Peut être que dans dix ans je pourrais ressortir sa carte et la scanner avec mon téléphone, mais pour l'instant...
Heureusement que les infos sont aussi sous forme de texte.

Refonte complète du blog

Jean-Sébastien Mansart — Fri, 07 Mar 2008 13:31:00 +0100

Ça faisait un petit moment que ça me turlupinait, mon blog avait un thème "sympa", mais pas top. Après avoir rencontré Patricia Gallot, l'auteur de "Internet, donne moi ce que je veux", je me suis mis en tête de refondre complètement mon blog, en commençant par la navigation.

La première étape était de trouver un ou plusieurs modèle de navigation propice à un blog.

Un coup de chance, j'avais le livre de Patricia sous la main, et après avoir parcouru les 60 modèles de navigation, j'en ai retenu 3 :

le menu sur la droite
le big footer (le gros pied de page)
le menu horizontal

Il ne restait plus qu'a placer les différents éléments dedans.
Dans le menu de droite seraient présents (dans le désordre) :

la recherche
le lien vers le flux RSS
la liste des tags
les derniers billets
la liste des catégories

Dans le big footer :

le fameux "a propos"
les derniers commentaires
et pour se faire plaisir, une fois encore les derniers billets

Dans le menu horizontal :

Contact
CV
A propos

Et pour finir le tout, un petit colophon histoire de rappeler les mentions légales et quelques liens rapides d'échappements.

Deuxième étape : faire une maquette à partir des éléments définis plus haut.

J'admets, cette partie là, je l'ai délégué. Étant en collocation avec une graphiste web, je n'ai pas eu à chercher longtemps à qui j'allais confier cette tache... On en a profiter pour revoir l'ergonomie du blog, en créant des liens d'échappements là où il en fallait (comme un lien pour aller directement aux commentaires), retirer quelques éléments qui n'apportaient rien (le lien permalink).
Mettre des parties plus en évidences : comme l'abonnement au flux RSS, le "lire la suite..." sur la page d'accueil, les liens dans le corps du texte, etc...

Je voulais aussi garder l'esprit et la charte graphique de l'actuel. Le bandeau à été remanié, le titre du blog amélioré...

Troisième étape : optimiser le code HTML pour le référencement.

Dotclear est part défaut très bien conçut pour le référencement. Cependant, on peut noter quelques améliorations à apporter.

La balise <title> est le titre de la page.
Une balise <h1> définit le titre du document.
Une balise <h2> définit les sous titres

Lorsque l'on est sur la page d'accueil, le title doit donc être le nom du blog, la balise <h1> contiendra elle aussi le titre du blog et on placera les titres des billets dans des balises <h2>.

Par contre, lorsque l'on est sur un billet. Le title de la page devient donc le titre du billet. Celui-ci est aussi englobé dans une balise h1, mais quid du titre du blog ?

Certains disent qu'on peut le laisser en <h1>, d'autres au contraire affirment qu'il ne doit y avoir qu'une seule balise <h1> par page.
Si on part sur la seconde hypothèse, dans quelle balise met-on le titre ?
Une balise <h2> ?
Une balise <p> ?
Une balise <span> ?

Les mêmes questions se posent pour la navigation : les bloc ont des titres, on met quoi ? des <hx> ou une toute autre balise ?

Pour le coup, je suis un peu dépassé, et même tous les grands du HTML se battent sur ce genre de sujet...

Tout cela demande énormément de travail et de recherche, la maquette est terminée, il reste encore l'intégration à faire, les tests sous différents navigateurs et système d'exploitation, et pour finir : le polissage.

A votre avis : quelles balises utiliser pour le titre du blog et la navigation ?

Pourquoi utiliser FeedBurner

Jean-Sébastien Mansart — Tue, 25 Sep 2007 14:05:00 +0200

On m'a souvent demandé pourquoi je passais par FeedBurner pour distribuer mes flux RSS.
A cette question, on peut dégager 3 réponses :

Fidéliser les lecteurs sur une adresse unique
Proposer aux utilisateurs une page compréhensible
Avoir des statistiques plus fiables

Fidéliser les lecteurs sur une adresse unique :

Pour le lecteur, avoir une adresse unique pour un flux permet de ne pas être tributaire des changements que le blogueur peut effectuer sur son blog.
Par exemple, si le blogueur choisit de changer de système de blog, il lui suffira de changer dans les options du flux FeedBurner la source du flux RSS et la migration du blog sera totalement transparente pour le lecteur.

Proposer aux utilisateurs une page compréhensible :

Dans RSS, il y a "Really Simple" : "Vraiment très simple", le problème est que le concept n'est vraiment pas simple à faire comprendre aux non informaticiens.
Le meilleur exemple me vient d'un ami : "Tiens, au fait, sur ton site, il y a un bug. Il y a un lien et si tu clique dessus on vois le code source du site. C'est pas un petit peu dangereux ? Les gens pourraient copier ton site avec ça..." En fait non, il s'agissait tout simplement d'un flux RSS.
Faire afficher de l'XML brut est tout sauf convivial et la majorité des internautes ne savent pas ce que c'est et ne devrait pas être obligé de le savoir pour l'utiliser. FeedBurner propose une feuille de style XSLT qui transforme la page XML de votre flux en une page lisible par le commun des mortels tout en le restant aussi pour les machines. Cette page informe l'utilisateur qu'il se trouve sur une page de syndication et qu'il peut l'ajouter à son aggrégateur favori. Des boutons représentant les aggrégateurs en ligne sont présent, et un simple clic dessus permet d'y ajouter le flux.

Avoir des statistiques plus fiables :

Savoir que le flux RSS a été vu 6354 fois dans le mois n'apporte pas beaucoup de sens. En revanche savoir que l'on a en moyenne 50 lecteurs par mois et quel type d'aggrégateur ils utilisent sont des informations qui ont du sens.
FeddBurner fournit ces informations ainsi que d'autres peut être un peu plus futiles, mais intéressantes malgré tout.
En modifiant mon outil de statistiques pour ne prendre en compte que les visiteurs, hors lecteurs, j'ai maintenant une meilleure vue, non polluée les accès aux flux RSS.

Au final que reste-t-il ?

Pour faire le bilan de ces trois raisons, il n'en reste plus qu'une et demi de valide :

Pour éviter que les lecteurs aient à changer l'adresse de mon ancien flux pour celui fournit par FeedBurner, j'ai écris quelques lignes dans le .htaccess avec mod_rewrite.
Je me rend compte au final que j'aurais pu me passer de FeedBurner pour la première réponse. Rien qu'en utilisant mod_rewrite, si je changeais l'adresse de mon flux, il me suffirai de créer une ligne pour faire la redirection.

Proposer une page présentant le flux RSS de façons clair n'est pas réservé à FeedBurner. Depuis la version 2 de Firefox et la version 7 d'Internet Explorer, ces navigateurs identifient les flux RSS et leur associent une feuille de style automatiquement. Sur cette page apparaît une brève explication, ainsi qu'une liste des aggrégateurs les plus utilisés. En en choisissant un, le flux est automatiquement ajouté.
Ma démarche n'est pas totalement vaine, car avant que tout le parc informatique soit sous IE7 ou Firefox2, j'ai encore un peu de temps. Donc utiliser FeedBurner pour cette raison, est une bonne demi raison.

Utiliser FeedBurner n'est pas une mauvaise chose en soit non plus, avoir des statistiques plus précises peut être un bon argument, à des fin marketing par exemple, si l'on a besoin de savoir combien de lecteurs on a fidélisé...
FeedBurner permet aussi d'ajouter de l'interactivité dans les billets, on peut aussi rajouter des bandeaux de publicité, etc...
Si le blog a une grosse audience, utiliser FeedBurner peut être bénéfique aussi, cela permet d'éviter de surcharger le serveur en requêtes.

FeedBurner n'est pas une obligation, mais un choix. Et l'on peut sûrement trouver encore plusieurs autres raison d'utiliser ce service.

Lancement

Jean-Sébastien Mansart — Tue, 29 May 2007 12:31:00 +0200

Je profite de mon temps de pause déjeuner pour lancer mon blog "pro", pour faire comme les grands et enfin devenir influent (d'ailleurs, ne le suis-je pas déjà ?).

On remarquera un super nom de domaine qui claque, un thème pour dotclear 2 qui utilise du jQuery, il y a encore quelques finitions à faire, mais le gros est posé, il ne reste plus que le contenu.

D'ailleurs, de quoi je vais parler ?
Principalement des technos web que j'utilise au quotidien :

D'autre sujets tournant - forcément - autour du web :

Design
Accessibilité
Marketing
etc...

Je me réserve un peu de champs libre tout de même, il ne faut pas s'enfermer.