Bon… on ne peut pas dire que se soit très bien chanté mais on souligne l’effort.
Vous pouvez retrouver les paroles avec des liens explicatifs pour les termes techniques, et les accords de guitare sur cette page.

Je ne me sers que d’un éditeur en texte simple. Aucune mise en forme, aucun choix de typos. Du code, un point c’est tout. Un retour à mes premières amours en quelque sorte. À l’époque où j’ai commencé à coder du html (en 1994), un éditeur WYSIWYG c’était de la Science-Fiction, on ne pouvait faire autrement que de taper tout le code à la main, ou presque.

C’est pratiquement indispensable lorsque l’on travaille sur un site dynamique, par exemple un blog. Il faut modifier en permanence plein de fichiers PHP, CSS, XHTML, etc. Sans parler des plug-ins qu’il est souvent nécessaires de traduire, adapter, hacker directement dans le code.

Maintenant, je programme les sites que nous produisons en XHTML 1.1 et CSS uniquement. Sans <table> et autres casses-têtes. Le but était de produire un code propre, de séparer la forme du contenu (aucunes images incluses dans l’habillage, ce qui facilite la refonte graphique), qui fonctionne dans les principaux navigateurs, qui respecte une certaine sémantique, qui peut s’adapter selon le terminal utilisé tout en passant les tests de validations. Vous l’aurez compris, un éditeur WYSIWYG n’est pas l’outil idéal pour ça. Surtout quand il “pond” un code affreux.

Sans me poser plus de questions que ça, je me suis donc retrouvé à taper tout le XTHML et CSS à la main dans BBEdit sur Mac. Ça marche aussi avec la version gratuite TextWrangler, version allégée de BBEdit mais pas si allégée que ça finalement (vous avez bien lu : GRATUIT !). En plus il permet de coder dans tout les langages, donc il n’y a plus qu’une seule application pour le HTML, CSS, PHP, JavaScript, Perl, etc. Il a aussi un client FTP et SFTP intégré qui permet d’éditer des fichiers distants sans avoir à les redeposer à chaque modifications. Pomme+s et hop! cest en ligne. Magique.

Voici avec quoi on débute un site :

(pour une feuille de styles c’est encore plus dépouillé : le document est complètement vide )

Autre avantage : la rapidité. Qu’il y a-t-il de plus rapide pour afficher les pages qu’un navigateur ? Rien. Qu’il y a-t-il de plus rapide et simple pour coder qu’un éditeur de code (justement ) ? Rien.
Et, surtout, l’éditeur non WYSIWYG ne plante pas au beau milieu d’un boulot à rendre hier ! Haha ! Moi j’vous l’dis, c’est que du bonheur.

Bien entendu, il faut que le(s) navigateur(s) web soi(en)t ouvert(s) et recharger la page en cours à chaque modifications pour voir le résultat. Bien entendu, il faut chercher sur Google pourquoi telle chose ne marche pas comme prévu, car les navigateurs ont un rendu différent (point qui diffère peu avec le html basique). Bien entendu, c’est toujours Internet Explorer 6 (et ses nombreux bugs) qui pose problème. Dans ce cas, il faut faire une feuille de styles alternative spécialement pour IE. Ce qui fait “perdre” de nombreuses heures. Mais la compatibilité est à ce prix.

Le résultat final est sans appel. Il y a moins de balises, les pages s’en trouvent allégées. C’est propre, net et sans bavures. Comme cas d’école personnel, j’ai fabriqué un site (pas encore en ligne) pour un client qui passe les validations sans aucune erreur, qui fonctionne parfaitement avec pas moins de 5 navigateurs différents (si on n’est pas à deux pixels près) : Safari (Mac), Firefox (Mac/Win), Opera (Mac/Win), Internet Explorer 6 (Win) et même Internet Explorer 5 sur Mac ! Si l’on additionne toutes les versions sur les deux plates-formes, ça fait 7 navigateurs ! (mais ne prenez pas mon blog en exemple, ce n’est pas moi qui l’ai fait )

Voilà comment on passe d’un logiciel usine à gaz à un outil simple, mais surpuissant.

Bref. Tout ça est un peu comme le gars qui jouait du piano debout. “C’est peut-être un détail pour vous, mais pour moi ça veut dire beaucoup.”

Outre l’élégance générale de l’interface de Safari (mais Firefox peut être rendu aussi élégant ;-)), il y a un petit détail en plus : le champ de texte pour faire une recherche sur un site peut avoir une apparence à la OS X. Avec ses jolis bords arrondis, l’ombre, le halo quand on clique dedans et la petite croix pour effacer le contenu du champ. Vous n’avez aucune idée de ce dont je parle ? Bien. Voici quelques exemples issus de l’interface de Mac OS X :

Comme on peut le voir, sur apple.com vu depuis Safari, le champ de recherche à le même look que les autres. C’est bien sympa et c’est très simple à faire.

Dans le code xhtml (ou html mais il faut enlever l’espace et le “/” à la fin) du champ “input”, au lieu du type “text”, il suffit de mettre “search” :

Magique ! Safari se charge du rendu tout seul comme un grand.
On peut même rajouter le petit menu en forme loupe servant à mémoriser les derniers termes recherchés :

Voici ce que ça donne :

Je vois d’ici votre perplexité car vous ne voyez qu’une simple case sans habillage particulier, n’est-ce pas ? Si c’est le cas, c’est parce que vous consultez cette page avec Firefox ou Internet Explorer comme 96% des internautes (source : Journal du Net février 2006) ou tout autre navigateur. Voilà tout le problème. Ça ne marche qu’avec Safari (2,1% de PdM) et c’est bien dommage.

Mais tout n’est pas perdu ! J’avais remarqué sur last.fm, que le champ de recherche (en haut à gauche) était du même style, quel que soit le navigateur (récent, bien entendu). Donc, il devait y avoir un truc et je voulais l’appliquer sur ce blog. Muni de quelques mots-clés bien choisis, j’entrepris une recherche avec Google (et son champ tout moche, tout carré :-P). J’ai trouvé tout de suite. Ça se passe chez Timothy Groves. J’avais donc dans les mains des gif, du JavaScript et des CSS. Il ne restait plus qu’à se mettre au boulot.

Autant le dire tout de suite, tout n’a pas été comme sur des roulettes (et le contraire m’eut étonné ;-)). Il m’a fallu pas mal bidouiller le code et les styles du blog pour y arriver. Mais ce n’était pas encore parfait. Manquaient à l’appel le halo et le texte gris “Recherche” qui disparaît quand on clique dans le champ. OK. Pour l’histoire du texte gris je ne sais plus par quel moyen j’ai trouvé chez theMasTa. Je me suis rapidement rendu compte qu’il me manquait encore une information sur la façon de coder ce que je voulais faire. Car il fallait se rendre à l’évidence, je devais en partie le coder moi-même. OK -> Google. Trouvé sur Caboose.

Ouf ! J’avais tout. Après avoir passé tout ça au mixeur j’y suis parvenu. Si on regarde le(s) code(s) pour faire tout ça, ce n’est pas très propre. Mais ça marche ! Avec un petit bémol pour Opera qui n’affiche pas tout à fait correctement un bouton, mais je corrigerai ça.

Vous pouvez voir le résultat ici, sur ÜberGeeek (que vous utilisiez Firefox ou Internet Explorer, Mac ou PC) en haut de la colonne de droite.
(en cas de problèmes, merci de me l’indiquer)

C’est vraiment de la grosse bidouille mal faite. C’est pourquoi je ne livre pas le code pour l’instant. Quand j’aurai le courage, je le referai proprement en l’incluant dans le code trouvé chez Timothy Groves (Brand Spanking New). À ce moment-là, j’en ferai don à la communauté (ça fait vachement humble, n’est-ce pas ? :-P). En attendant, vous pouvez toujours vous servir du code original qui résout une grande partie du problème.

Quel était le problème déjà ?… Avoir un joli champ “recherche”. C’est bien. Il y en a dans le fond qui suivent.