Dual Blog : DeFr's Weblog

Avril 2005Juin 2005Mai 2005

Automgen ou le cauchemard de l'ergonome | mardi 31 mai 2005, 22h54

Un petit peu de contexte : le tronc commun de première année à l'ECN comprenne un enseignement dont le nom de code est AUTOM, et qui est en réalité un cour d'automatisme. En gros, de la logique combinatoire ou séquentielle, ce genre de chose. Rien à redire dans le principe, ca fait plutot parti des choses que j'aime bien faire. Un peu moins bien niveau cours / td, mais, passons, ce n'est pas le propos de ce post. Car, en effet, il y a aussi des TPs, qui s'effectuent en grande partie sur un logiciel professionel, nommé Automgen. Le but du logiciel, c'est de pouvoir rentrer les schémas combinatoires ou graphcet, et de voir le logiciel interprété cela,et réagir dynamiquement à des changements d'état. Plutôt sympathique.

Cependant, on se rend compte dès les premières secondes d'utilisation que tout ne va pas être aussi rapide que ca... voir avant. En effet, au début du premier TP, une gentille thésarde ( erm, enfin, je pense ) se dévoue pour nous montrer sur un poste comment fonctionne AUTOMGEN. Le fait qu'elle est dû s'y reprendre à plusieurs fois pour réussir à placer ce qu'elle veut au bon endroit n'est à priori pas particulierement flatteur pour le logiciel en lui-même, et correspond à la premiere fois ou je me suis dit : Mais, euh, qu'est-ce que c'est que ca ?. Malheureusement, si c'était la première fois, ce n'était pas, loin s'en faut, la dernière. Si j'arrive à installer une version de démo d'AUTOMGEN, j'illustrerais ce post de quelques screenshots, toutefois, à défaut, une description devra suffire.

Un premier problème, important et entravant de facon non négligeable le workflow, vient du mécanisme de selection. En effet, AUTOMGEN oscille entre deux mondes, et n'a absolument pas fait ce qu'il aurait du pour pouvoir les concilier. Je m'explique : de facon interne, l'espace de travail d'AUTOMGEN est constitué de bloc, qui doivent avoir à l'écran une largeur d'une bonne vingtaine de pixel. Chaque case peut recevoir un et un seul schéma graphique. En soit, même si le système est quand même un peu démodée étant donnée les capacités de traitements des ordinateurs modernes, il n'est tout de même pas totalement aberrant. Après tout, c'est comme ca que sont construit les maps de la plupart des RTS, et ca donne des résultats sympathiques. Cependant, il est vital de fournir à l'utilisateur des repères adaptés. AUTOMGEN ne le fait pas, laissant le pointeur et le mécanisme de selection par défaut de Windows : en clair, les rectangles de selection dessinables ne collent pas à la grille. Le problème, c'est qu'il faut alors que le logiciel essaie de deviner à quels cases de la grille la selection correspond, et, à ce jeu là, AUTOMGEN est particulierement mauvais. Ainsi, on se retrouve souvent avec des cellules périphériques non voulues de selectionnées.

Ce défaut ne serait pas redhibitoire si AUTOMGEN n'avait pas une autre tare : si jamais votre selection contient des cases vides, et que lors du déplacement, ces cases vides se retrouvent au dessus de cases pleines, alors, elles effaceront le contenu des cases. Par conséquent, si jamais la selection que vous avez effectuée au paragraphe précédent contient quelques cases vides, vous risquez de vous retrouver à effacer sans le vouloir des parties importantes du dessin. Un algorithme simple, faisant diminuer les parasites en élimiant toutes les cases vides de la selection effectuée, aurant pourtant pu être implementée en quelque chose comme 2h par un stagiaire à mon humble avis, en augmentant de facon non négligeable le confort d'utilisation.

Si les problèmes se limitait à la selection, le logiciel serait agacant, mais utilisable une fois certaines habitudes prises. Malheureusement, il n'en est rien. Il existe notament un autre problème, et de taille celui là : la palette qui apparait sur le bord gauche de l'écran. En soit, l'idée est asseez bonne : on selectionne un element dans la palette, on l'amene dans l'espace de travail, et hop. C'est ce qu'utilise par exemple Microsoft dans Visual Basic, permettant de dessiner des interfaces d'applications... Là encore, le problème vient de l'implémentation, que je qualifierais de lamentable. Il semble que les concepteurs n'est pas envisagé qu'il était possible d'ajouter une barre de défilement à la palette. Ce qui implique que dans certaines des catégories bien fournie, les elements de la palette deviennent illisible, et la palette, par conséquent, inutilisable. Je vous jure que j'ai du, dans je ne sais plus quelle catégorie, inserer les elements de la palette un à un pour les voir à une taille décente et trouver le bon !

Si les problèmes s'arretaient à l'interface utilisateur - allez, un dernier pour la route, j'suis pas entierement convaincu du caractère intuitif des couleurs jaunes pour le 1 et vert pour le 0, sachant qu'en général, on associe l'état 1 à vrai - on aurait un logiciel pénible à utiliser, mais tout de même utilisable. Il pourrait peut-être même rendre quelques services. Malheureusement, les problèmes semblent plus profond. Peut-être - je dis bien peut-être - que les problèmes rencontrés viennent d'une modification du modèle par défaut à utiliser pendant les TPs, mais toujours est-il que dans l'implémentation d'une fonction, les 3/4 du temps sont passés à essayer de comprendre le comportement à priori non déterministe de l'application.

Subversion et logiciels de gestions de versions | dimanche 29 mai 2005, 12h37

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.

Pénurie temporelle | jeudi 19 mai 2005, 21h58

Bon, c'est totalement paradoxal étant donné mon emploi du temps actuel, mais il se trouve tout de même que je manque pour le moment cruellement de temps :-/ Je pense que c'est du à la fin de l'année qui approche, et donc une dernière ligne droite relativement intense, mais toujours est-il que je n'arrive pas à boucler l'ensemble des trucs que j'voudrais faire, ce qui inclue notamment poster sur ce blog. J'espere inverser la tendance, mais...

Toujours est-il que pour vous faire un peu patienter, voici une petite liste des choses sur lequel je compte blogger dans un futur relativement proche. Certains sont déja à l'état de brouillons dans mon administration, d'autres déja mentallement écrit, et qui necessite d'être taper, certains enfin sont des idées qui commencent juste à prendre forme... Cette lecture devrait vous donner une petite idée de ce qui devrait arriver prochainement sur Dual Blog.

Accessoirement, au dela de ces posts qui sont basés sur des trucs déja arrivé, y a aussi pas mal de projest en cours, certains dont je peux parler, d'autres pas ;-) Pour ceux dont je peux parler, y a entre autre :

Avril 2005Juin 2005Mai 2005
Sites visités