De l’importance du cahier des charges du développement web

sandglass

J’ai eu l’occasion récemment d’écrire un formulaire de contact ainsi que son traitement PHP pour une entreprise de construction canadienne qui cherche à recruter du personnel.

Je commence à écrire le code. Je connais bien les formulaires étant donné que c’est l’un de mes premiers scripts (2001 si je ne m’abuse).

Je place le script sur mon serveur, commence ma batterie de tests histoire de pallier toutes les situations auxquelles un utilisateur lambda peut être confronté. Le code que je livre est en en CSS3 et HTML5 valides.

Tout s’affiche impeccablement dans tous les navigateurs. Je me dis que c’est une affaire qui roule lorsque le client m’envoie quelques emails pour me demander quelques corrections, additions, et l’intégration du script dans son site.

C’est là que le vent a commencé à tourner.

Une correspondance diurétique

Je me plie à toutes ses exigences qui, au départ étaient bien maigres mais qui ont grossi bien vite au fil de notre correspondance : telle fonction de Gmail devait être implémentée, des destinataires multiples ajoutés en copie cachée invisible, tel champ devait être numérique seulement…

Il m’a même demandé de retirer la bordure noire qui apparaît lorsque l’on sélectionne le bouton soumettre d’un formulaire – ce qui est impossible, ce focus est une fonctionnalité (ou restriction) des navigateurs afin que l’utilisateur sache que le bouton est sélectionné.

J’ai aussi bien apprécié de recevoir un mail toutes les 3 minutes pour me faire remarquer que les étoiles des champs requis n’étaient pas en rouge ou qu’un des champs du formulaire était un peu décalé. Et tout ça en changeant de sujet à chaque fois, histoire de bien surcharger ma boîte de réception, me forçant à répondre à plusieurs mails différents.

Premiers tests sur le serveur

Son serveur – limité, très limité, trop limité… mais c’est quoi ce serveur ?? – a lui aussi pas mal joué avec mes nerfs. Il est tellement rapide qu’une pièce jointe ne peut dépasser, tenez-vous bien, 157 Ko. Wow.

C’est sûr que cela valait le coup de me faire écrire un bout de code pour rajouter des champs d’upload de fichier à la volée à la Gmail ! Espérons que le client final aura un serveur décent pour faire tourner le script.

L’intégration avec le site

Le client paie. Je lui livre le script fonctionnel, même sur son serveur. Une demi-heure plus tard, il me demande de l’intégrer sur son site parce qu’il est “designer” et non “codeur”. Cela se tient. Je me dis que allez, de toute façon ça ne va pas me prendre longtemps. Je me trompe.

Il m’envoie l’adresse de son site ainsi que ses identifiants FTP (j’ai eu les bons au 5ème email, la situation s’améliore). Un petit clic droit sur le code source m’indique que celui-ci n’est pas du tout valide : des tableaux qui s’imbriquent sur trois voire quatre niveaux, du code javascript pour préloader les images, des styles appliqués aux différents éléments dans le code même au lieu d’utiliser une feuille CSS… bref, le cauchemar. Je dis adieu à ma belle validation. J’intègre.

La correspondance reprend de plus belle. Il lui prend l’envie de modifier son code au dernier moment. Re-intégration. Tiens, je m’aperçois qu’il a aussi rajouté des champs dans le formulaire. Et accessoirement, modifié le script PHP pour le planter sur une variable incorrectement attribuée.

Il me parle alors des boutons : il veut styliser ses boutons en noir et blanc. Il me dit ça comme ça. Ok. Ah non, il veut moins d’espace, m’envoie une capture d’écran. Je modifie. Ce n’est pas encore ça, il faut que le comportement du bouton change quand on passe la souris dessus. Hmm. Il m’envoie alors un exemple de ce bouton qui se trouve déjà sur son site…

Je lui règle tous ses soucis CSS. Il me remercie comme si j’étais le Messie. Je crois que j’ai eu la patience d’un saint quand même.

Une semaine plus tard, re-mail. Il me dit que cela s’affiche bien dans Internet Explorer mais pas dans les autres navigateurs. Le camouflet suprême.

Régler le problème des hauteurs de cellule d’un tableau sous Mozilla/Opera

Le problème : il y avait des espaces entre les lignes des tableaux, ce qui ne devrait pas être. Le tableau apparaît correctement sous IE mais pas sour Firefox ou Opera par exemple.

Il s’avère que Mozilla et Opera, entre autres, formatent les hauteurs des cellules différemment : selon mes observations, Mozilla doit utiliser une sorte de doctype sniffing. Le navigateur évalue le doctype de la page et décide de quelle manière rendre la hauteur des lignes du tableau.

La solution a été toute simple : étant donné que son code était tout crade, j’ai supprimé la déclaration doctype. Tout est rentré dans l’ordre et s’affiche de la même manière dans tous les navigateurs.

Conclusions

Le gros problème avec certains clients, c’est leur manque de clarté et de vision quant au projet qu’ils essaient de boucler. Leur vision est approximative et évolue sans cesse, ce qui peut poser pas mal de problèmes lorsque l’on soit résoudre leurs problèmes et respecter leurs exigences.

Ce projet m’aura donné de nouvelles règles de conduite :

  1. s’assurer que le cahier des charges est au point et baser le devis sur ce cahier des charges.
  2. toute fonctionnalité supplémentaire, non déclarée dans le cahier des charges, entraîne un projet supplémentaire ou une nouvelle milestone.
  3. s’assurer des capacités du serveur du client.

Voilà. Cet article a une visée cathartique mais je me rappelerai ces quelques règles pour mes prochains projets.

Articles conseillés :

15 pensées sur “De l’importance du cahier des charges du développement web”

  1. Oui, je développe en freelance pour une association de loi 1901 qui s’appelle… SkyMinds.Net – comme je ne trouvais pas d’idée à l’époque, je l’ai appelé comme le site.

    Reply
  2. Rhoooo ce détournement de la loi 1901 pour des profits personnels… Si j’étais pas en train de voir comment monter une structure pour faire de la formation informatique sous ce même profil je serai… outré, pour le moins…

    LOL quand même.

    Reply
  3. tu fais allusion à la bordure en pointillés autour de l’élément actif, par exemple en naviguant avec la touche tab ?

    cette petite fonction JS est justement faite pour :
    onfocus=”this.blur();” dans la balise de l’élément, par exemple button

    ps1: tu devrais, si tu peux, empêcher l’interprétation de la balise dans les commentaires, just in case…

    pstwo: désolé pour le doublon, tu peux effacer l’ancien message…

    Reply
  4. @OuT : oui, il voulait retirer la bordure autour du bouton lorsque celui-ci était sélectionné.

    Pour mettre du code dans les commentaires, il faut utiliser le bouton “Code”. Cela foire l’aperçu mais cela rend bien une fois que le commentaire apparaît.

    exemple : 
    Reply
  5. Oui Matt je suis allé voir pour l’auto-entrepreneur mais rien n’est clair concernant la Nouvelle Calédonie… En tant que TOM les lois varient et les organismes, codes et autres registres ne sont les mêmes (RIDET en NC contre SIRET en métropole je crois par exemple…) Donc Asso Loi 1901… Enfin si ça colle.

    Reply
  6. BoZo, c’est l’une des raisons pour lesquelles nous avons monté l’association. Cela et le fait que nous n’avons pas suffisamment de clients pour créer une véritable société (avec les taxes que cela suppose) donc le statut d’association est le plus adapté pour le moment. Les recettes sont réinvesties dans l’année dans le renouvellement du matériel.

    Bon courage pour ton asso, ce sera donc de la formation informatique ?

    OuT, tu pourrais remettre ton code JS ?

    Reply
  7. je suis aussi dans une asso loi 1901 à vocation informatique (quelque chose de vraiment très simple, pas d’argent du tout qui circule), et j’aimerais beaucoup te poser quelques questions sur ton projet, dans le but d’en monter un qui serait similaire sur certains points, dans un avenir plus ou moins lointain…

    si cela ne te dérange pas de me consacrer une (petite rassure-toi) partie de ton temps, on pourrait discuter de cela en privé, tu as mon adresse :)

    Reply
  8. J’ai eu aussi l’occasion de développer un formulaire un peu (beaucoup) galère pour un webmaster. Ce cruchon me l’a modifié et m’a cassé les bonbons pour les modifications… ne comprenant pas pourquoi “ca marche pas” ;) alors que des champs avaient été renommés, rajoutés le CSS modifié… Bref, pas mal ton blog. ;)

    Reply

Opinions