Dans ces pages, je vais vous mettre à ma place, pour vous permettre de voir comment on peut construire des pages web qui sont belles à, regarder, qui ont un contenu intéressant, et qui valent la peine d'être mise dans son bookmark !

 
 

Le 26 février 1998

J'ai décidé de faire mes pages sur le thème de la couleur pourpre/violet, Toutes les pages seront donc dans ce modèle.
Chaque page aura, en haut, un lien pour pouvoir revenir facilement au sommaire. De même, un indicateur montrera l'endroit où le visiteur se trouve dans l'arborescence des pages. Tout ceci permet à l'utilisateur de ne pas se sentir perdu et aide à la navigation, quel que soit sa connaissance du site.

Le 27 février 1998

J'ai dessiné à la main sur papier la forme globale, puis je l'ai scanné.

 
Ensuite, j'ai utilisé Gimp pour le mettre dans un layer en "background". J'ai créé plusieurs layers corespondant chacun à des couches logiques du dessin (le corps, les boutons, le "fil").
Ceci permet de faire le découpage ou des modifications sans avoir à refaire toute l'image. A chaque changement important dans l'image, j'ai sauvegardé dans un nouveau fichier (avec la date de derniere modif) tous les layers, au format interne Gimp (fichiers .xcf compressés automatiquement avec bzip2 pour que cela prenne moins de place sur le disque !).

Le 28 février 1998

Après avoir dessiné l'image, j'ai réfléchi sur la manière de la découper pour avoir non seulement le moins d'images (délai de chargements réduits), les zones les plus grandes (optimisation de la compression) mais aussi les meilleures possibilités d'animations.
Les seules possibilités d'animations d'une grosse image telle que celle utilisée (en dehors d'une applet Java) sont de stocker ces images dans un tableau, chaque cellule du tableau étant une partie de l'image.
En théorie il est très complexe de découper une image en petits bouts, mais grâce aux "guides" (lignes pointillées bleues sur l'image) il est possible de mémoriser les points de découpe (et aussi de les mémoriser dans le fichier de sauvegarde).
Sachant que ce sont les cinq boutons qui doivent être animés, j'ai placé ces guide de manière à les englober. Je suis donc arrivé à la disposition suivante:
 

La zone "1" englobe tout le flare, ce qui me permettra de le faire apparaître ou disparaître sans gêner ce qui se trouve autour.