Ma Titine

Je ne vais pas vous faire un scoop en vous dévoilant que le site sera à la sauce Web2.0.

Tant au niveau du design que des effets nous allons essayer de proposer un service dans la vague du web actuel. Cela passe par certaines technologies et notamment l’Ajax.

On a sûrement du vous la faire souvent mais l’Ajax n’a rien à voir avec un produit de nettoyage… C’est une techno mélangeant PHP et Javascript qui permet de rendre vachement plus agréable et pratique votre website. Prenons l’exemple d’une page d’inscription, rien de plus angoissant qu’une fois cliqué sur “Envoyer” vous retombiez sur la même page avec du rouge de partout. Bien souvent ça vous oblige à retaper 40 fois votre mot de passe (et en double s’il vous plaît !) et à corriger vos erreurs précédentes pour pouvoir, enfin, vous inscrire.

Avec l’Ajax, ce temps est révolu. C’est tellement plus pratique d’interroger la base de données en temps réel et d’afficher directement si le champ est correct ou non. Bref que du bonheur pour les utilisateurs que nous sommes :).

Vous l’aurez donc compris, j’utilise de l’Ajax pour notre projet. Le choix de l’outil ne s’est pas fait immédiatement. Deux solutions s’offraient à moi:

• Tout coder à la main Javascript et PHP avec du HTTPRequest et compagnie
• Utiliser un framework

J’ai choisi la deuxième solution pour une raison évidente : pourquoi s’embêter à tout refaire soit même quand des outils le font déjà ! Vint alors le choix du framework. Personnellement j’ai opté pour Xajax. C’est un petit framework qui permet de se passer de la partie “javascript”. Vous écrivez votre fonction en PHP et Xajax s’occupe de l’écrire en JS pour vous ! Il n’y a que l’appel de votre fonction qui reste du Javascript à écrire par vos soins.

Voilà pour l’instant ce que j’utilise mais il se peut que j’opte pour MooTools dans le futur pour faire des effets “qui déchirent tout!”. Je réfléchis là dessus et me suis déjà documenté. Cependant notre objectif étant de sortir une beta fonctionnelle assez rapidement, les effets de la mort qui tuent ne sont pas notre objectif premier .

A suivre donc !

Pour ceux que ça interesse, Xajax et sa doc se trouve ici : http://www.xajaxproject.org/

Alors que Julien travaille actuellement sur le développement du site, Raf et moi même se penchons sur la conception du design. A vrai dire, aucun de nous deux n’est né artiste ou bien nos talents sont encore vraiment cachés. Ainsi, suite à l’article de Raf sur la route à suivre pour la réalisation du design, nous nous sommes mis à nos palettes.

Pour compliquer tout cela, nous ne travaillons pas ensemble dans un même et unique bureau mais bien à distance. Cela est tout à fait possible mais afin d’être efficace, il est nécessaire de partir sur de bonnes bases. Malheureusement, alors que Raf avait déjà un premier jet du design réalisé sur Inkscape, j’ai souhaité lui donner un coup de main. En effet, ce gentil monsieur est encore vieille école donc il a loupé le tournant des effets 2.0 … heureusement que les jeunes sont là pour le rappeler à l’ordre Malheureusement, étant donné que de mon côté j’ai toujours {essayé} utilisé Photoshop, cela pose problème au niveau de la compatibilité des fichiers.

Ainsi, actuellement, nous réalisons chacun une version du design de notre côté, puis le jury prendra une décision. Quand je parle de jury, cela se résume aux 3 membres de l’équipe !

Dans l’éventualité qu’un aimable designer passe sur ce blog, ça serait avec plaisir de discuter

Les choses avancent, j’ai acheté hier les deux noms de domaines (que je ne vous dévoilerai pas tout de suite, vous croyez au Père Noël au quoi, et le teasing alors?) … Après pareil investissement (2 fois 6â?¬ au bas mot), plus moyen de reculer, va falloir aller au bout!

L’été arrive, la chaleur avec et franchement sous le capot, bah ça chauffe !
Entre Raf qui nous pond un bon petit design et Ludo qui l’aide et fait les collectes d’infos nécessaire on peut dire que ça bouge.

Coté dev’ ça bouge aussi !

Après un petit temps de flottement, j’ai enfin enclenché le starter, laissant derrière moi Symfony qui après deux semaines de bidouillage m’a laissé plutôt perplexe.

Les fonctions liées au compte utilisateurs sont quasiement términées. A savoir :

• L’inscription
• L’authentification
• La demande de mot de passe (pour ceux qui l’égare)
• Les modifications concernant ses infos personnelles, mot de passe etc.

Je vais donc devoir maintenant m’attacher au gros du site :).

Secret oblige, je ne vous en dévoilerai pas plus pour l’instant, mais ça avance, pièce par pièce le puzzle s’assemble.

L’exercice du jour c’est de trouver un nom pour notre site. En cherchant un peu on a identifié 4 catégories de noms:

• le nom entièrement inventé
  Exemples: Wikio, Viadeo, Ziki
  Avantages: naturellement multi-lingue, facile à mémoriser, évite des problème de disponibilité du nom de domaine
  Inconvénients: pas très explicite sur la nature du site WEB
• le nom descriptif
  Exemples: debit-credit, brosseadomicile
  Avantages: explicite, facile à traduire dans une autre langue et facile à mémoriser
  Inconvénients: pas très fun, pas très porteur d’un point de vue marketing, peut facilement être noyé dans la masse en cas de succès et de copiage du concept.
• le nom faisant appel a des mots du dictionnaire mais n’ayant rien à voir avec la choucroute
  Exemples: La Fraise (Tshirts), Bagatelles (cadeaux)
  Avantages: ???? et pourtant, ça marche!
  Inconvénients: pas forcément facile à mémoriser, pas toujours très explicite et très franco-français
• le nom basé sur un jeu de mot, sur une expression ou sur une subtilité de langage
  Exemples: look-zippy (Tshirts), archiduchesse (chaussettes)
  Avantages: fun, donne une identité forte, évite des problèmes de disponibilité du nom de domaine
  Inconvénients: pas forcément facile à mémoriser

Après un petit brainstorming collectif, on a trouvé un nom qui nous plaît plutôt bien. Teasing oblige, on ne dévoilera rien pour le moment. Juste un indice, il fait partie de la 4ème catégorie!

Bon je vais être honnête avec vous, je n’y connais rien en design de site web. Enfin rien, quasi rien: un peu de HTML, quelques notions de CSS, l’expérience de quelques adaptations de thèmes Wordpress ou Joomla, mais à part ça rien. Je ne suis pas dessinateur, encore moins graphiste, je n’ai même jamais réalisé de site web de A à Z. Et pourtant quand il a fallu que quelqu’un se propose pour s’occuper du design du site, un réflexe nerveux consécutif à un trop long assoupissement m’a poussé à lever le doigt! Allez comprendre …

Me voilà donc au pied du mur, sans trop savoir par où démarrer. J’ai beau chercher sur la toile, pas moyen de trouver un vrai tutorial dans le genre “le design Web pour les nuls de chez nuls”. Tout ce que je trouve est trop pointu, trop technique. Je cherche des grandes règles de design, quelle largeur, quelle hauteur, largeur fixe … ou pas, coins ronds ou carrés, quelles couleurs, …Rien de tout ça, tant pis, je me débrouillerai tout seul ….

Première chose, il me faut des sources d’inspiration, des sites qui me plaisent, des exemples. En vrac, j’aime bien les sites colorés, en rondeur, originaux sans être m’as-tu vu, je n’aime pas les sites sombres, trop chargés, trop tous pareils, …

Deuxième chose, il me faut imaginer à quoi ressemblera le site, quelle sera sa mise en page, comment seront placés les différents modules. Pour ça, rien de mieux qu’un crayon et un bout de papier, ça permet de mettre facilement en place des éléments, de gommer, de raturer, de noter des idées à côté. C’est sommaire, spartiate, rustique, mais ça se trimballe partout! Il faut aussi trouver un concept, un discours en accord avec le thème principal du site, sans tomber dans l’illustration ringarde et désuète. Il faut enfin réléchir à l’ergonomie du site, concevoir une interface intuitive et facile à prendre en main.

Troisième chose, il faut maintenant matérialiser ces idées sur ordinateur. Il semble que l’outil le plus adapté pour cela soit un logiciel de dessin vectoriel, comme Adobe Illustrator, plutôt qu’on logiciel de retouche photo genre Photoshop. Compte-tenu du caractère auto-financé du projet, j’ai préféré m’orienter vers un outil gratuit et libre, Inkscape, qui semble jouir d’une petite notoriété dans le milieu des graphistes. Relativement puissant, facile à apprendre et à utiliser, bien documenté, riche en tutoriaux, il répond largement à mes besoins et je ne regrette pas ce choix.

Quatrième et dernière chose à faire, transformer tout ça en HTML et CSS. On n’y est pas encore, mais je m’orienterai sans doute vers ce bon vieux Gimp pour extraire les différentes images du design et vers Nvu qui semble être une bonne alternative libre à Dreamweaver pour la création de sites.

Voilà ma feuille de route tracée, reste plus qu’ à se mettre au travail. La suite au prochain numéro!

Aprés 4 semaines de flottements et quelques menus ajustements, nous voilà de retour, motivés et remobilisés. Eric étant trop occupé en ce moment pour avoir le temps de s’investir sur le projet, c’est donc à 3 que nous continuons l’aventure: Raf, Ludo et Julien. Cela n’exclut pas néanmoins une collaboration avec Eric et Zagaz dans le futur, mais en l’état actuel des choses il nous fallait nous réorganiser et nous recentrer sur une équipe certes réduite mais disponible si on voulait avancer. Les charmes de la gestion de projet à plusieurs et à distance! On a donc redistribué les rôles:

• Julien prend en charge le codage
• Raf se colle au design du site
• Ludo s’occupe de tout le reste: récupération de données, tests, un peu de design, …

t force est de constater que les choses commencent à avancer: le plan du site s’est affiné, l’enregistrement et l’authentification des utilisateurs est codée et le design commence à prendre forme.