Le site Zz Smiley Family en Backstage !

Ca y est le site officiel de Zz Smiley Family est enfin sur le web et c'est une bonne nouvelle, du moins pour les smiliens(nes) ! Un an de gestation et quatre à cinq mois de travail intensif pour son développement. Ce sont toutes ces étapes avec leurs moments de doutes qui sont relatés

Le constat

 Au départ je n'étais pas du tout intéressée par un site pour Zz Smiley Family. Je trouvais suffisant les services proposés par la plate-forme de téléchargement boxson.net. De plus à cette période je n'avais pas d'accès internet chez moi. Mon changement d'avis a été dû aux refus temporaires de deux travaux graphiques pour la rubrique galerie de ma fiche boxson.net: (la carte Smiley Térégo et la peinture Théoriel des angel's series).
Une précaution d'usage de l'association pour vérifier les contenus à risques tendancieux ou négatifs. Ne cherchant pas à poser de problèmes à qui que ce soit et tenant aussi à mon indépendance, il m'était nécessaire de disposer d'une espace personnel de création dont je puisse être entièrement responsable.

La conception

 j'ai donc réfléchi au projet et aux outils pour sa mise en oeuvre. Je me suis notamment appuyée sur des « bouquins » consacrés à la construction de sites web.
Mon idée générale était d'allier mes origines : l'Afrique noire, au concept du 2YCD* (*Yin & yang's concept drawing). Pour l'Afrique je souhaitais une palette dans les couleurs terre, ocre, sable... au style de la distribution Ubuntu chez linux ou bien encore à celle de la bouteille black coca.
Étant gourmande les couleurs telles les crèmes « Mont - blanc » : vanille, chocolat, caramel étaient les bienvenues.

Pour exprimer le 2YCD il fallait quelque chose de sobre, et d'équilibré dans la mise en page du site, l'idée étant d'évoquer l'Asie sans tomber dans les clichés et sans  copier servilement une iconographie. Aussi ai je retenu comme éléments :
   - La typographie chinyen
    - La calligraphie par l'évocation du papier dans les textures des backgrounds des pages principales et de ceux du menu latéral  
- La personnalisation des éléments iconographiques de la culture asiatique comme le sceaux smiley family (SMF) et le gong yin & yang (émetteur de vibrations)


Quant au menu de navigation, je désirais un système d'images cliquables qui se comprenne intuitivement. Pour mener à bien mon projet je me suis appuyée sur de la documentation personnelle et sur des recherches internet. J'ai déniché un modèle de charte graphique pour la structuration du site.
J'ai également acheté un livre consacré au web design pour trouver des sources d'inspirations. Progressivement, grâce à tout ce matériel j'ai élaboré la structure définitive du site.

 Les outils

 L'étape suivante fut le choix des outils pour la construction du site. Une connaissance de Bordeaux m'avait parlé de Spip pour débuter.
Bien qu'à l'origine Spip vise les sites collaboratifs il est également adapté pour les sites personnels.
Après documentation et visite de sites sous spip, je l'ai essayé. Mais rapidement j'ai constaté qu'il ne me convenait pas.
En effet la personnalisation des squelettes demandait soit d'utiliser le travail des autres soit de réécrire le code. Un travail plutôt ardu lorsqu' on est novice dans le domaine...bref je risquais de me retrouver avec un site impersonnel (au style spip) et de plus devoir prendre du retard sur mon calendrier.
Du coup j'ai choisi l'éditeur Nvu (devenu Kompozer). Son apprentissage a été aisé et j'avais l'entière liberté de créer un site de A à Z de mes mains ! Bref toute cette étape de gestation et de conception s'est déroulée tranquillement sur une période d'environ un an. Au même moment je commençais à rédiger tout le contenu rédactionnel du site.

Le Développement

 Fin juin 2007 je terminais un contrat de travail et j'étais 100·% disponible pour débuter la réalisation du site. Tout l'été j'ai dessiné et conçu sous Gimp et inkscape les éléments iconographiques ainsi que les backgrounds du site. Les jaquettes des mp3, ayant été crées deux mois auparavant.
Pour les backgrounds je me suis appuyée sur différents catalogues de décoration. Quant aux images des rubriques musique et vidéo, les prospectus des magasins d'électroménager furent également source d'inspiration.
Ce fut la phase la plus plaisante pour moi car j' étais en terre familière et j' avançais rapidement de façon autonome.
Des recherches internet ont été utiles pour trouver un logiciel optimisant des images au format PNG afin d'obtenir un bon compromis entre qualité de fichier et poids raisonnable. Pour le découpage des interfaces du site j'ai utilisé le filtre webotine de Gimp.

Les choses se sont corsées lors de la construction des fichiers html. J'ai longtemps hésité entre travailler à l'ancienne à partir de tableaux ou bien faire le grand saut pour apprendre le langage des css . Et à nouveau j'ai investi dans l'achat de « bouquins » consacrés au sujet :

  •         « Les css »par E. Meyer
  •        « Le guide complet des css » des éditions micro application.


Cela n'a pas été facile au début mais les tutos de Matéo du site du zéro m'ont grandement aidés en accélérant ma compréhension du sujet, puis la motivation a fait le reste. De plus l'éditeur NVU intègre un éditeur de css qui vous assiste dans le travail. Maintenant je ne jure que par les feuilles de styles, c'est vraiment souple de travailler avec toutefois il me reste encore beaucoup à apprendre dans le domaine !

Ce n'est qu'à force d'erreur que progressivement j'ai appris parce que franchement « les bouquins »... c'est bien au début mais rien ne vaut la pratique !

La page pour laquelle j'ai le plus « galéré » fut celle des fiches signalétiques. Je voulais un système de texte déroulant qui inclurait un  bouton d'ascenseur (un overflow en langage css). Le positionnement en double colonne des textes était une difficulté supplémentaire, le travail fut laborieux. Je dois avouer que j' ai eu recours parfois à des astuces personnelles pour la syntaxe css qui ne sont pas trop dans les règles de l'art mais bon...

Par la suite le plus fastidieux fut de tester les pages sous les différents navigateurs. Mama mia ! Je croyais ne jamais m'en sortir...
l'affichage pouvant présenter des différences assez importantes entre les navigateurs. et IE est assez pénible en cela, il n'interprète pas toujours correctement les feuilles de style.
Le point pour lequel je déclare forfait c'est bien dans l'apprentissage du langage php.
J'ai tenté de m'y mettre, mais c'est trop pour moi. Administrer une base de donnée, construire une formule mathématique... tout cela me donne mal à la tête. Les maths et moi on a jamais été amis donc pour ces différentes raisons des rubriques resteront temporairement en suspens (ex le guestbook)...mais l'évolution du site nécessitera que je m'y « colle » à un moment !

A chacun son « truc », je ne suis pas programmatrice...

Enfin bref tout cela m'a occupé jusqu' en octobre 2007. En Novembre de la même année le site était achevé et testé en local sous les navigateurs IE7, Firefox, Mozilla, Opera et Safari, il ne restait plus qu'à le publier.

La publication

 La publication était prévue pour février 2008. Je suis passée par des grands moments de doutes où je voyais le moment que le projet n'aboutirait pas et dix ans de travail (le concept 2YCD est né en 1998) risquait d'être anéantis.

Les raisons à cette inquiétude furent multiples...Je venais de déménager, il me fallait une seconde prise téléphonique près de mon bureau qui soit accessible à  mon modem. Ce fut « la croix et la bannière » pour qu'un technicien de France Telécom se déplace pour s'acquitter de cette tâche.

Une fois ce problème réglé, l'épreuve suivante fut de faire fonctionner ma connexion ! L'enregistrement de ma demande à l'adsl auprès du fai FDN a été rapide mais à la date prévue, ma connexion ne fonctionnait pas. Cela a duré environ un mois, mes compétences étant limitées, j'ai à nouveau fait appel à  la connaissance qui m'avait conseillée spip mais sans succès... sa mauvaise volonté pour résoudre mon problème n'ont fait qu'ajouter au retard de la publication du projet.

Finalement c'est un bénévole de mon fai qui a su identifier et résoudre le problème après l'envoi de captures d'écran de la configuration de mon modem.

Ce dernier étant un modem-routeur il fallait le configurer en mode réseau et non comme un modem simple ! Tout était ok après, le site pouvait être installé et testé sur le serveur du fai.

Le quinze avril 2008 naissance du site officiel de Zz Smiley Family !

Et début également d'une grande aventure artistique qui n'est qu'à son balbutiement tan tan tan...

Ajouter un commentaire

Les commentaires peuvent être formatés en utilisant une syntaxe wiki simplifiée.


Warning: Undefined array key "c_question_hash" in /home/clients/16a79a2b4a88ebd2ea42e71229340385/web/virtualw@ibblog/dotclear/plugins/accessibleCaptcha/class.dc.filter.accessible.captcha.php on line 55

Warning: Undefined array key "c_answer" in /home/clients/16a79a2b4a88ebd2ea42e71229340385/web/virtualw@ibblog/dotclear/plugins/accessibleCaptcha/class.dc.filter.accessible.captcha.php on line 61

Deprecated: htmlspecialchars(): Passing null to parameter #1 ($string) of type string is deprecated in /home/clients/16a79a2b4a88ebd2ea42e71229340385/web/virtualw@ibblog/dotclear/plugins/accessibleCaptcha/class.dc.filter.accessible.captcha.php on line 61

Haut de page