Dur Comme Faire

Je suis plutôt content de l'accueil reçu par mon premier plugin pour DotClear. Quelques remarques me sont revenues aux oreilles afin de l'améliorer. Je compte donc sortir sous peu une nouvelle version. Mais avant j'aimerais avoir votre avis sur ce qui devrait être ajouté, modifié, supprimé.

Voici ma liste personnelle :

• Ecrire une documentation concernant l'installation et l'utilisation
• Ajouter quelques informations facultatives en plus du titre et de l'URL (Site de l'auteur, langue etc.)
• Echapper correctement les titres
• Améliorer la saisie peut-être par le biais d'un mécanisme qui permettrait d'automatiser la récupération des informations. Il suffirait de donner l'URL. Le plugin tenterait de récupérer les informations par lui-même et les soumettrait à l'utilisateur pour approbation.
• Créer des fils RSS et Atom pour le blogmark mais là ça suppose une intéraction avec DotClear qui, à ma connaissance, n'est pas possible actuellement. A voir avec Olivier.
• Vérifier que l'URL, n'est pas déjà présente.

N'hésitez pas à donner votre avis.

Dans le domaine du développement Web, les bons articles ne manquent pas en revanche leur diffusion est pour le moins anarchique. La multiplicité des sources, qui est somme toute logique, a malheureusement pour effet de compliquer l'accès à ces bonnes pratiques par les nouveaux venus. C'est là que le projet Opquast entre en scène.

Fondé par Elie Sloïm, gérant de Temesis, société d'expertise et de formation sur l'amélioration de la qualité des services en ligne et de Fabrice Bonny, co-fondateur d'OpenWeb, son but est de rassembler un ensemble de bonnes pratiques pour l'amélioration de la qualité des services en ligne.

Après un rapide parcours, je suis totalement conquis. En revanche une chose manque pour le moment à mon avis: une explication détaillée de ces pratiques afin de dire pourquoi c'est important et peut être donner des pistes concernant la mise en oeuvre. En tout cas voilà un projet à suivre de près.

Via le StandBlog

En créant mon template pour ce blog, j'avais été intrigué par une balise meta inhabituelle :

<meta name="MSSmartTagsPreventParsing" content="TRUE">

Sur le coup j'avais d'autres chats à fouetter mais récemment j'ai revu cette balise dans le code de plusieurs pages. Oui j'ai une drôle d'habitude, quand un site me plait je regarde systématiquement son code HTML et CSS pour voir si il n'y aurait pas quelque chose à en apprendre et c'est régulièrement le cas.

Je me suis donc mis en quête de documentation sur le sujet. Il s'avère donc que cette balise a pour but d'empêcher l'activation des Smart Tags pour la page. Bon c'est bien joli tout ça mais que sont ces Smart Tags ? Il s'agit en fait d'un mécanisme implémenté dans Windows et diverses autres applications de Microsoft, dont Internet Explorer, qui recherche dans un document un mot qui correspondrait à ceux qu'il a en stock. Lorsqu'il en trouve un il, le transforme en lien. Quand on clique sur celui-ci, un menu permettant des actions en rapport avec le mot s'affiche. Par exemple il peut détecter un nom de ville et vous proposer un lien vers un voyagiste proposant des séjours dans cette ville.

A priori on ne voit pas trop ce qui pourrait poser problème mais en y regardant de plus près cela ne signifie ni plus ni moins que Microsoft tente par ce biais de s'incruster dans vos pages Web et y propose des services pas forcément en rapport avec vos préoccupations. Cela pourrait même tourner à la concurrence pure et simple si dans notre exemple précédent on considère qu'on est sur le site d'un voyagiste.

La parade est relativement simple, elle consiste tout simplement à insérer la balise meta indiquée au début de ce billet.

Comme promis, voici la démarche que j'ai utilisée pour créer le visuel Old metal pour CSS Zen Garden. Elle diffère assez peu de celle que j'utilise habituellement. La principale différence vient du fait que pour une fois le code HTML était imposé ce qui induisait des contraintes supplémentaires.

Préambule

J'ai mis la main il y a quelques années sur une série de photos libres de droits mettant en scène des plaques de différents métaux. L'une d'elle m'a immédiatement fascinée. Je l'ai utilisée comme base pour le visuel de la première mouture de Dying Culture. Malheureusement avec l'arrivée du blog, les titres en images n'étaient plus appropriés et je ne voulais pas les remplacer par des titres en texte car le rendu visuel était bien moins intéressant. Je me suis donc résolu à changer de visuel pour celui qui est actuellement en place. Seulement j'aimais tellement l'ancien visuel que je ne voulais pas qu'il aille définitivement aux oubliettes du Web. J'ai donc décidé de le retravailler en vue de le soumettre au CSS Zen Garden de Dave Shea. C'est ambitieux, j'en ai conscience, voire même peut-être présomptueux mais j'espère qu'il sera accepté.

Dans un autre registre, on me demande régulièrement des conseils de développement Web. Je donne avec plaisir quelques conseils ci et là mais j'ai pleinement conscience que souvent ce ne sont pas les détails qui pêchent mais carrément la méthodologie complète. Ceci n'est pas un reproche, tout débutant par définition ne sait pas comment aborder les problèmes auxquels il est confronté. C'est avec l'expérience et les erreurs commises qu'on acquiert une méthode de travail efficace. Je vais donc détailler ma démarche dans la conception de ce visuel. N'y voyez pas la manifestation d'un ego hypertrophié. Ce ne sont que des conseils et des méthodes tirées de mon expérience personnelle. Chacun peut faire des choix radicalement différents qui ne sont pas pourtant moins bons. Mon but est uniquement de vous donner une vision d'ensemble de ma méthode. Ensuite libre à vous de vous inspirer de tout ou partie pour vous forger votre propre méthode ou même de considérer qu'il n'y a rien d'intéressant là dedans à vos yeux.

Je ne vais utiliser que des logiciels libres ou gratuits à l'exception notable de Photoshop qui est incontournable dans son domaine. Cela montre bien qu'en terme de développement Web, la valeur ajoutée se situe dans la créativité et les compétences du développeur et non dans les outils eux même.

Croquis

Tout d'abord je commence par faire un croquis de ce que je veux obtenir. Bien que simpliste, ce croquis me permet d'avoir une idée des volumes et donc de l'équilibre global de la page. Je peux également grâce à cela estimer les tailles des différents éléments pour la maquette.

Maquette

Ensuite je passe à la maquette. Elle me permet de faire des essais de couleurs, de formes, d'agencement et me servira, une fois finalisée, de source pour mes images.

Généralement je travaille avec Photoshop dont j'apprécie la gestion des calques, les styles de calques, les tranches ainsi que l'exportation pour le Web. Le seul défaut est une mauvaise gestion du PNG en compression. Si vous préférez un outil libre alors essayez Gimp qui est vraiment bien mais, tout du moins à mes yeux, ne rivalise pas encore avec Photoshop pour la création de graphismes destinés au Web.

Nous allons commencer par créer la texture rocheuse qui servira de fond. Je veux qu'elle ressemble un peu à du charbon, qu'on ait l'impression d'une pierre très sombre avec un peu de relief. Obtenir cet effet est assez simple avec Photoshop, le problème ici est qu'il faut obligatoirement que cette texture puisse être utilisée comme motif pour le fond. Cela complique sérieusement la tâche. Heureusement j'ai trouvé sur l'excellent site theWebMachine un tutorial montrant une technique pour y arriver. Je m'en suis grandement inspiré mais j'y ai introduit quelques différences notamment j'ai utilisé une taille de 512 et non 256. Le but est de limiter le nombre de répétitions du motif afin justement que cela ne saute pas aux yeux qu'il s'agit d'un motif comme c'est trop souvent le cas. J'ai ensuite diminué la luminosité afin d'accentuer le côté charbon.

Voici à présent les 2 images qui vont nous servir de matériau de base pour ce visuel. Ces versions sont bien entendu réduites. Les versions originales font 3800x2500 en 300 dpi.

En ce qui concerne la police, je voulais une écriture manuscrite mais peu structurée. Après une petite recherche sur DaFont j'ai trouvé mon bonheur en la police Violation.

Voici ce que donne la maquette une fois terminée. Pour le moment les 3 menus sont regroupés en un sur la gauche mais c'est uniquement pour faciliter la création de la maquette et éviter de dupliquer inutilement des éléments.

Réalisation

Il est maintenant temps de créer la feuille de style pour le visuel. L'éditeur que j'utilise depuis des années est Top Style Lite. Il s'agit d'une version très allégée et gratuite de l'excellent éditeur Top style. Ma méthode est de développer avec Firefox jusqu'à ce que je sois satisfait du résultat. C'est à ce moment et pas avant que je teste mon design avec Internet Explorer.

Cela peut paraître étonnant comme démarche mais mon principe est que je veux coder proprement donc utiliser Firefox est un bon moyen de vérifier l'aspect de la page dans un navigateur conforme. Néanmoins je suis conscient qu'Internet Explorer détient une part de marché beaucoup trop importante pour être négligé. C'est pourquoi je m'attache ensuite à adapter ma feuille de style afin d'obtenir un rendu correct dans ce navigateur. Ainsi j'ai un code CSS globalement propre avec seulement quelques "bidouilles" concédées pour Internet Explorer. Cette démarche a fait ses preuves à maintes reprises mais elle suppose tout de même d'avoir en tête lors de la création de la feuille de style initiale les limitations d'Internet Explorer afin de ne pas introduire des choses impossibles à reproduire sous ce navigateur même en bidouillant.

Pour être sûr que le code CSS concernant les liens sera pris en compte partout, il faut respecter l'ordre de déclaration suivant : link, visited, hover, active. C'est un peu idiot mais certains navigateurs ayant une gestion assez spéciale de cela, seul cet ordre vous assure un rendu correct.

Tests

Une fois le visuel réalisé, il convient de tester son rendu dans le plus de navigateurs possibles. Ne disposant que d'un PC sous Windows pour le moment (Mon serveur Linux n'a toujours pas de nouvelle carte mère), j'ai utilisé la technique de Ethan Marcotte mise en oeuvre par Ryan Parman. Celle-ci permet d'avoir plusieurs versions d'Internet Explorer installées en même temps sur un poste.

Pour tester sur Mac, j'ai eu recours à l'excellent iCapture de Daniel Vine qui permet de tester l'apparence d'une page dans Safari.

Au final j'ai donc testé ce visuel sur les navigateurs suivants :

• Mozilla 1.7 / Windows
• Firefox 0.9 / Windows
• Internet Explorer 6.0 / Windows
• Internet Explorer 5.5 SP2 / Windows
• Internet Explorer 5.01 SP2 / Windows
• Opera 7.51 / Windows
• Safari 1.2 / Mac

Corrections

Suite à ces tests j'ai donc effectué les quelques corrections nécessaires afin de limiter l'impact de la mauvaise gestion des CSS par certains navigateurs. Il y a finalement assez peu de hacks, et ceux-ci sont assez basiques. Ainsi ils ne compliquent pas outre mesure le code CSS. Si vous visualisez ce design avec un navigateur moderne (Firefox, Mozilla, Opera etc.) puis avec Internet Explorer vous constaterez que la version affichée par le navigateur de Microsoft est moins jolie. Cela est dû aux limitations de ce navigateur. Entendons nous bien, le site reste visuellement agréable et parfaitement navigable seulement pour profiter à 100% du visuel il faut utiliser un navigateur digne de ce nom. Cela rejoint la doctrine Don't sell. Show ! qui, à mon sens, est la meilleure pour démocratiser l'utilisation des standards Web.

Conclusion

J'espère que ce billet vous aura donné quelques pistes quant à la démarche à adopter pour développer une page avec CSS. Comme je l'ai dit précédemment, ne vous sentez pas obligé de l'appliquer à la lettre. Piochez-y plutôt ce qui vous intéresse et adaptez-le à vos besoins.

Voilà c'est fait, mon visuel pour CSS Zen Garden a été soumis à l'approbation. Je l'ai nommé Old metal rapport à son aspect. Je vous tiendrais au courant de son sort. De plus j'ai commencé à rédigé un billet détaillant la création de ce visuel. Je le mettrais en ligne sous peu.

Je profite de l'occasion pour dresser la liste des visuels que je préfère.

• Mediterranean par John Whittet
• Revolution! par David Hellsing
• Wiggles the Wonderworm par Joseph Pearson
• webZine par Vincent Valentin
• Open Window par Ray Henry
• Tulipe par Eric Shepherd
• Oceans Apart par Ryan Sims
• Springtime par Boér Attila
• Egyptian Dawn par James Abbott
• Radio Zen par Marc LA van den Heuvel
• This is Cereal par Shaun Inman
• Postage Paid par Mike Stenhouse
• I Dream in Colour par Jeff Bilen
• Burning par Kevin & Ethel Davis
• Hedges par Kev Mears
• Entomology par Jon Hicks
• Zunflower par Radu Darvas
• Friendly Beaches par Sophie G
• What Lies Beneath par Michael Pick
• Golden Mean par Douglas Bowman

Récemment on m'a demandé à plusieurs reprises comment apprendre les bases du SQL. Si rien ne vaux un vrai cours avec un professeur qui peut répondre précisément à vos questions, ce site peut être un paliatif efficace.

Il ne faut pas se fier à son aspect 1996, le contenu est de qualité même si parfois on aimerait un peu plus d'explications sur certains points.

Si vous êtes un lecteur fidèle, vous savez que j'ai changé le visuel de ce blog en début d'année. J'en suis plutôt satisfait mais cela a également signifié l'abandon de mon visuel précédent. Seulement je l'aimais beaucoup ce visuel même s'il n'était pas adapté à un contenu dynamique. Dans le même temps j'avais envie depuis longtemps de créer un visuel pour le célèbre CSS Zen Garden de Dave Shea.

J'ai donc retroussé mes manches et j'ai pondu ceci. Ce n'est pas tout à fait fini mais je suis assez satisfait du résultat. Pour le moment je l'ai testé avec Firefox 0.9, Internet Explorer 5.01 SP2, 5.5 SP2, 6.0 sur Windows et Safari 1.2 sur Mac. Il n'y a, a priori, pas de souci. Il est à noter tout de même que l'affichage sous un navigateur valide offre une meilleure expérience utilisateur comme disent les marketeux.

Avant de soumettre ce visuel à Dave Shea, j'aimerais avoir vos avis et vos remarques si vous constatez des bugs d'affichage sur des configurations que je n'ai pas pû tester. Merci pour votre aide.

En lisant le billet de Daniel Glazman intitulé Future of HTML and the Web, part 1 je suis tombé sur la phrase suivante : no browser, since a late first version of HotJava, shows a warning when the document is invalid.. En lisant cette phrase j'ai immédiatement repensé à un problème qui me turlupine depuis des lustres : comment arriver à sensibiliser l'utilisateur lambda au fait qu'Internet Explorer est un navigateur obsolète et peu fonctionnel qui complique considérablement la tâche des développeurs Web.

En effet si cela semble évident à toute personne qui a déjà un tant soit peu sérieusement développé des sites Internet, monsieur tout le monde n'en a même pas conscience. Comment dès lors le persuader de faire le bon choix alors même qu'il ignore le problème ? De plus les quelques rares personnes qui ont conscience qu'il peut y avoir des navigateurs alternatifs prennent le problème à l'envers en érigeant la page HTML en référence. Dans cette optique si un navigateur n'affiche pas la page correctement alors c'est lui qui est dans l'erreur alors que ceci n'est valable que dans le cas où une page est valide, ce qui reste encore marginal malheureusement.

Bien entendu il est n'est pas envisageable de former tout le monde aux problématiques du développement Web. Heureusement que l'utilisation d'un outil ne nécessite pas d'être expert dans le domaine. Il faudrait donc trouver un moyen simple de sensibiliser le grand public à tout cela. Un moyen serait à mon sens de simplement faire connaitre la notion de validité d'une page qui est un concept assez facile à appréhender pour des néophytes. Ainsi la responsabilité de l'affichage des pages reviendrait à un équilibre plus naturel entre le développeur de la page en question et le navigateur.

C'est là que la phrase de Daniel prend tout son intérêt. Pourquoi ne pas intégrer dans les navigateurs un mécanisme de validation automatique des pages affichées ? L'invalidité d'une page pourrait être matérialisée par l'affichage d'une icône dans la barre d'état du navigateur. On pourrait également imaginer qu'en cliquant sur celle-ci on pourrait accèder à un écran listant les erreurs.

Je rejoins tout à fait l'avis d'Eric Daspet dans son récent billet sur CyberCodeur. Il exprime simplement mais avec force et intelligence une vision de ce métier qui rend au développeur Web son importance. On l'a trop souvent cantoné au rôle de simple exécutant alors qu'il a pour vocation d'apporter toute son expertise aux projets.