La chanson du CSS


css.mp3Par di13774n73 (ou “dilettante”, si vous ne comprenez pas le 1337 5p34k 😛 )

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.

La chanson du CSS

Par di13774n73 (ou “dilettante”, si vous ne comprenez pas le 1337 5p34k 😛 )

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.

Look ma, no WYSIWYG!

Il y a quelques jours, je me suis rendu compte d’un fait peu banal (pour moi) : je n’utilise plus d’éditeur de pages html “WYSIWYG” (comme Dreamweaver par exemple).

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 :

Media_httpubergeeekco_hjvyf

(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.” 😛

Look ma, no WYSIWYG!

Il y a quelques jours, je me suis rendu compte d’un fait peu banal (pour moi) : je n’utilise plus d’éditeur de pages html “WYSIWYG” (comme Dreamweaver par exemple).

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 :
Début d'un site avec BBEdit
(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.” 😛

Mais qu’est-ce qui fait courir le Geek ?

À l’instar de The seeKoeur, mon blog n’est pas très actif (c’est le moins que l’on puisse dire) mais il n’est pas mort !
Deux mois et demi sans bloguer, ça fait un bail. Mais figurez-vous que lorsque l’on fabrique des blogs pour les autres, on n’a plus le temps de bloguer et à peine plus pour laisser des commentaires ailleurs. Paradoxal, mais vrai. 😉

En attendant que je puisse remettre la tête dans tout ce que j’ai mis dans la liste des choses à bloguer, voici une liste désordonnée et non exhaustive de ce qui m’a occupé tout ce temps : • Des rendez-vous, plein de rendez-vous (même le matin, si si !) ;

• Un voyage express à Rennes (3h30 sur place) ;
• Le blog de Philippe Quéau ;
• Deux articles (pas finis) sur des bidouilles de Mac ;
• Un Podcast d’Yvette Roudy ;
Refonte complète du site du Carrefour numérique de la Cité des Sciences ;
• Les deux blogs du Carrefour numérique (La vie du Carrefour et L’actualité du numérique)
• La transformation complète du site d’i-marginal (ma boîte) en blog ;
• Tournage, montage, etc. d’une bande annonce pour une pièce de théâtre au Parc de La Villette ;
• Le blog du GNCR ;
• Interviewé par Nouvelles Clés ;
Accrédité aux conférences de presse du PS ;
Podcast lors d’une conf de presse du PS. ;
• Montage du clip “The Fly at the WiFiPicning” pour la promo ;
• Création et mise en œuvre du concept de PocketBubble ;
• La préparation du WiFiPicning 3.0 ;
• Le WiFiPicning lui-même (toutes les photos) ;
Un site et un blog pour le Conseil économique et social (troisième assemblée constitutionnelle de la République) ;
• Changé de téléphone mobile pour un beau Nokia N90 (mis à disposition par Nokia France 😛 ) ;
D’autres photos et d’autres vidéos (ici aussi) ;
Réparation de ma machine à laver ;

• Et j’oublie certainement quelques trucs ;

Le tout dans un temps record et, bien sûr, en compagnie soit de Natacha, de jeanrem, de Tristão ou de moi-même. 😛

On peut comprendre aisément que je ne trouve pas toujours le temps de répondre aux mails (parfois même de les lire), de répondre dans le chat, de me raser ou de me laver les joues. Bon, pour les deux dernières choses je trouve quand même le temps (question de principe), contrairement à mon ami Dino. Mais son cas est plus grave, il est limite nervous breakdown.

Mais qu’est-ce qui fait courir le Geek ?

À l’instar de The seeKoeur, mon blog n’est pas très actif (c’est le moins que l’on puisse dire) mais il n’est pas mort !
Deux mois et demi sans bloguer, ça fait un bail. Mais figurez-vous que lorsque l’on fabrique des blogs pour les autres, on n’a plus le temps de bloguer et à peine plus pour laisser des commentaires ailleurs. Paradoxal, mais vrai. 😉

En attendant que je puisse remettre la tête dans tout ce que j’ai mis dans la liste des choses à bloguer, voici une liste désordonnée et non exhaustive de ce qui m’a occupé tout ce temps :

• Des rendez-vous, plein de rendez-vous (même le matin, si si !) ;
• Un voyage express à Rennes (3h30 sur place) ;
• Le blog de Philippe Quéau ;
• Deux articles (pas finis) sur des bidouilles de Mac ;
• Un Podcast d’Yvette Roudy ;
Refonte complète du site du Carrefour numérique de la Cité des Sciences ;
• Les deux blogs du Carrefour numérique (La vie du Carrefour et L’actualité du numérique)
• La transformation complète du site d’i-marginal (ma boîte) en blog ;
• Tournage, montage, etc. d’une bande annonce pour une pièce de théâtre au Parc de La Villette ;
• Le blog du GNCR ;
• Interviewé par Nouvelles Clés ;
Accrédité aux conférences de presse du PS ;
Podcast lors d’une conf de presse du PS. ;
• Montage du clip “The Fly at the WiFiPicning” pour la promo ;
• Création et mise en œuvre du concept de PocketBubble ;
• La préparation du WiFiPicning 3.0 ;
• Le WiFiPicning lui-même (toutes les photos) ;
Un site et un blog pour le Conseil économique et social (troisième assemblée constitutionnelle de la République) ;
• Changé de téléphone mobile pour un beau Nokia N90 (mis à disposition par Nokia France 😛 ) ;
D’autres photos et d’autres vidéos (ici aussi) ;
Réparation de ma machine à laver ;

• Et j’oublie certainement quelques trucs ;

Le tout dans un temps record et, bien sûr, en compagnie soit de Natacha, de jeanrem, de Tristão ou de moi-même. 😛

On peut comprendre aisément que je ne trouve pas toujours le temps de répondre aux mails (parfois même de les lire), de répondre dans le chat, de me raser ou de me laver les joues. Bon, pour les deux dernières choses je trouve quand même le temps (question de principe), contrairement à mon ami Dino. Mais son cas est plus grave, il est limite nervous breakdown.