Dual Blog : DeFr's Weblog

Ethele, un brin de folie quotidien | vendredi 17 juin 2005, 23h43

Mood: Oohh

Ca va faire des lustres que tous les posts que je fais sur ce weblog sont soit techniques, soit des nouvelles, sans réelle touche d'humanité. Il est donc temps de faire un petit billet classifiable "3615 Ma vie" ( shamelessly stolen from Kévin ). Comme je n'en ai pas encore parlé, je vais donc commencer ce qui devrait constituer une suite de billet sur les gens qui égaient ma vie au quotidien par leur présence sur le Net, avec qui je discute, je m'amuse, je dis des bêtises, en sommes, des amis au sens le plus classique du terme.

C'est miss Ethele qui a l'honneur d'entamer cette série, puisqu'elle m'a fait l'immense honneur de parler de moi z'à l'ouverture de son skyblog ^^; Ca va faire une petite année que je l'ai rencontré sur MSN, grâce à Mega-Poudlard - comme a bien y penser une bon nombre de personne de ma liste de contacts. Que dire de cette jeune ( elle vient d'avoir 16 ans, attention ! ;-) ) demoiselle ? Une première chose vient de suite à l'esprit, vous allez de suite le comprendre avec la photo ci-dessous :

Ethele dans une position perilleuse, en pleine cascade
Ethele Val en pleine cascade

Comme vous pouvez le constater sur la photo, c'est demoiselle est folle. Attention, ceci n'est absolument pas une critique, c'est même dans son cas une grande qualité, mais il est necessaire de le savoir et d'y être préparé, sous peine de se voir complètement dérouté à certains moments. Enfin, je vous rassure, même au bout d'un an, y a encore des fois ou j'me retrouve dérouté moi-même :p. Si cette folie peut parfois partir dans un grand nombre de direction, elle peut aussi se retrouver canaliser, et devient alors un atout de taille : ce grin de folie devient une imagination créatrice d'une puissance remarquable.

C'est cette imagination qui lui permet de faire une des choses qu'elle fait si bien : les RPG. C'est notament son domaine de spécialité dans le cadre de son travail d'admin sur Mega-Poudlard, ou elle s'est aussi essayée, pour me faire plaisir et je lui en suis infiniment reconnaissant, à coder ^^; Ca n'a pas l'air d'être réellement ce qu'elle préfere faire de ces journées, mais rien que le fait d'avoir fait l'effort de découvrir le PHP pour essayer de m'aider dans un moment où le codage de MP n'avancait pas très vite, et dans une periode de relative tension entre les différentes membres du site m'a énormement touché ^^.

Toutefois, si les ordinateurs ne lui font pas peur, ce n'est pas là que réside sa véritable passion. En effet, son truc à elle, c'est la musique, et faut dire qu'elle a pas trop mauvais gout, Mickey3D, Mathmatah et la musique celtique d'une facon générale constituant des trucs qui à mon humble avis se laisse effectivement écoute ;-) Elle semble de plus très éprise de la basse qu'elle a eu pour son anniversaire, toutefois j'attends de l'entendre jouer pour me prononcer sur cette acquisition ;-)

What else ? Elle possède un don pour l'écriture, aussi bien de nouvelles que de paroles de chansons, et ce même si elle se destine à faire S, pour avoir enfin des TPs de chimie avec des trucs qui font boom ( si si si, j'vous assure :p ). Accessoirement, ca peut aussi servir pour rentrer dans la police scientique, mais bon, c'est juste un bonus ;-) Vous pouvez d'ailleurs voir qu'il existe déja une osmose entre la personne et la blouse :

Ethele en blouse, avec un air serieux

Pour conclure de facon un peu plus serieuse : Ethele, je vous remercie toi et ton grin de folie, vous me permettez de me changer les idées, et ce tous les jours de l'année ^^ Impossible de ne pas avoir le moral en parlant avec discutant avec toi ^^

D'un table-layout à un site sémantique : l'expérience pas-à-pas | lundi 23 mai 2005, 21h50

Convaincu depuis longtemps de l'interet de posseder un site web sémantique, respectant non seulement la lettre, mais aussi l'esprit des normes du W3C, il restait pourtant sur mon collectif un site faisant tâche : Mega-Poudlard. Oui, mais voila, comment passer un site d'une taille non négligeable d'un design utilisant une table à un site web sémantique ? En effet, si le problème est relativement simple dans le cadre de sites de quelques pages ( blog, ... ), l'ampleur de la tâche est toute autre lorsque l'objectif est de transformer le code, en faisant en sorte que le changement soit transparent aux utilisateurs finaux.

Facteur agravant, la présence de plusieurs apparences pour le site, avec bien entendu comme objectif de conserver l'ensemble de ces apparences lors du passage à un site web sémantique. Toutefois, je dois avouer que ce facteur a été beaucoup moins problématique que ce que je craignais, je ne vais donc pas tellement le développer dans ce post, puisque l'immense majorité des sites actuellement en table-layout sont dépourvues de ce genre de problème. Pour information, dans le cas de Mega-Poudlard, il m'a suffi de me concentrer sur une des apparences pour pouvoir par la suite appliquer des changements relevant pratiquement du copier / coller sur les autres. Aucun mystère là-dedans : le système était relativement peu flexible.

Maintenant que cette précision est faite, on peut s'attaquer au vif du sujet. Le secret, d'après moi, réside dans une transition par étape, que je vais détaillé ci-dessous. En effet, le problème, c'est que confronté à l'ampleur de la tâche, il est facile de se sentir perdu, et de se demander : "Et maintenant, je fais quoi ?". S'il est probablement possible de réaliser la transition de multiples façons, je dois dire que la méthode que j'ai utilisé m'a considerablement faciliter la tâche.

Etape 0

Pré-requi demandant très peu d'effort, mais qui est réellement indispensable : si jamais votre site n'a réellement recours à aucune feuille de style pour le moment, il va falloir en créer une, et rajouter un lien vers cette feuille de style dans votre structure HTML. Si votre site n'inclue pour le moment aucune feuille de style, il vous sera probablement utile d'aller lire quelques tutorials sur le CSS - par exemple sur W3Schools - avant de continuer la lecture de ce post, car je ne vise pas à incorporer une introduction à CSS ici.

Etape 1

Une fois que le site dispose d'une feuille de style, on peut s'attaquer en premier lieu à la suppression d'element purement présentationel. Plus précisement, au cours de cette étape, tout les tags <font> présent sur le site devraient disparaitre, remplacer par des classes adaptées. De même, il est opportun à cette étape de rechercher les endroits ou des balises <i> et <b> sont utilisées, en les remplacant au cas par cas par des <em> / <strong> si les balises sont utilisés pour fournir un sens, des <span> dans le cas contraire. Dernière chasse de cette étape, rechercher les <br> qui sont utilisés en lieu et place de paragraphe. A la fin de cette étape, notre site n'est toujours pas sémantique, mais le code en sortie est déja plus propre.

Etape 2

Il s'agit maintenant de retirer autant d'attributs présentationnels que possibles, en les remplacant par leurs alternatives en CSS. Par exemple, toute précision de margin dans la balise body, des border sur les table... Il est aussi possible, dans cette étape, de rechercher les inline-style qui peuvent eventuellement être présent sur le site, en les mettant dans la feuille de style. Le code, à la fin de cette étape, reste toujours assez loin d'être sémantique, mais devrait commencer à être nettement plus lisible que ce avec quoi l'on a commencé.

Etape 3

Les deux premières étapes ont constitués en un ajout de sémantique, mais surtout en un nettoyage du code. Maintenant qu'on y voit clair, il s'agit d'utiliser du code adaptée pour les différentes listes qui sont très probablement présentes sur le site. Entre autres, c'est maintenant qu'il s'agit de convertir des choses du genre :

<a href='foo'>foo</a><br> <a href='bar'>bar</a><br>

en quelque chose de sémantiquement compréhensible, comme par exemple :

<ul> <li><a href='foo'>foo</a></li> <li><a href='bar'>bar</a></li> </ul>

Pour une raison un peu inconnue, je trouve que les <dl> sont très peu utilisées sur le web, alors que leur application sont multiples, étant donné la définition qu'à donner le W3C de cette liste de définition. Ne serait-ce que sur une page par défaut de MP, j'en ai personnellement deux. Toutefois, je reconnais un problème à ces listes : d'après les normes du W3C, le contenu du <dt> doit être de type inline, on ne peut donc pas y mettre d'entete en <h[1-6]>.

Etape 4

Si vous avez suivi les étapes 0 à 3, votre site, d'un point de vue sémantique, n'a plus que deux problèmes : il continue d'y avoir un tableau, et les pages manquent probablement de niveau d'en-tête. Il devrait normallement être maintenant relativement aisé de se debarasser du tableau. En effet, à priori, les différentes colonnes vont se retrouver dans d'unique balise dl / ul / ol, ce qui permet en utilisant quelques float de reproduire facilement le layout actuellement utilisé. Si ce n'est pas le cas, il peut être envisageable de rajouter un <div> autour du contenu souhaité. Très honnetement, j'ai été étonné par la facilité de l'opération lorsque j'ai mis cette méthode en pratique sur Mega-Poudlard.

Etape 5

Il ne reste plus qu'à finaliser notre travail, en adaptant ou ajoutant des niveaux d'en-tête adapté aux différentes pages du site. Cette étape peut-être relativement longue lorsque le site comporte un nombre important de page, qu'il faut toutes vérifiées, mais possède un niveau de complexité des plus minimes : il s'agit tout simplement d'ajouter des <h[1-6]> de facon adapté autour des elements qui structure la page.

Etape 6

Il ne nous reste plus qu'une seule chose à faire : admirer le résultat de notre travail. Eventuellement, les perfectionnistes profiteront des différentes étapes pour faire en sorte que le code source des différentes pages soit correctement indenté, de facon à ce que les curieux regardant le code source de la page soit agréablement surpris, et que la maintenance du code soit simplifiée. Toutefois, un code source incorrectement indenté ne remet nullement en cause la conformité du site vis-à-vis des normes du W3C

Pour être tout à fait honnete, si Mega-Poudlard est déja passé par les étapes 1 à 4, il reste encore un peu de travail sur l'étape 5, un certain nombre de page du site pouvant assez nettement beneficié d'une amellioration du point de vue des entetes, ce qui permettrait un affichage plus sympathique lorsque les styles sont desactivés par exemple. Toutefois, l'amellioration de l'aspect sémantique procuré par les étapes 1 à 4 est déja notable, et particulierement appréciable.

Sites visités