Projet web: « mon ami secret »

Un petit service façon Doodle pour organiser des tirages au sort

Je sais pas vous, mais moi j’aime bien les repas de Noël entre amis. Vous savez ceux qu’on fait en petit comité, un peu avant l’officiel repas en famille. C’est sympa et on s’offre des cadeaux rigolos. Mais pour éviter d’alourdir encore les 606 euros que nous allons tous dépenser cette année malgré la crise, on tire au sort un unique « ami secret » à qui offrir un petit cadeau (secret car il ne sera révélé aux autres que le soir même). Cette tradition est appelée « Secret Santa » chez les anglosaxons.

Pour ce tirage au sort, qui doit donc être fait à l’avance (pour que le cadeau soit un peu spécifique ce qui est quand même plus agréable), j’avais créé une petite page web il y a quelques années. Il fallait aller dessus, choisir son nom dans la liste des participant et valider. Le système tirait au sort un autre participant et affichait le résultat. Mais cette page web demandait à chaque nouveau tirage une initialisation manuelle de ma part.

J’ai donc refait le « service » dans une version plus dynamique, que tout le monde est maintenant libre d’utiliser sans intervention de ma part, car il permet de créer des tirages au sort accessibles via un lien spécial (un peu comme Doodle). Je vous présente donc « Mon ami secret 2.0  »

Et maintenant un peu de technique…

C’était aussi le prétexte pour moi à quelques expérimentations techniques. J’ai voulu faire un service basé sur une unique page HTML 100% statique pour l’interface client, et une page PHP à part pour tous les échanges d’information avec la base de données. Pour faire le lien entre les deux, une couche de Javascript (jQuery) qui discute en JSON avec la page PHP.

Les deux versions (française et anglaise) pointent sur le même répertoire du serveur (et les mêmes fichiers), c’est le nom du sous-domaine utilisé qui permet au script de déterminer quelle langue est attendue pour ensuite sélectionner les éléments à afficher ou non en se basant sur leur attribut « lang ».

Cela m’a aussi permis de jouer un peu avec les media queries CSS pour offir une version optimisée pour les mobiles (réduisez la taille de la fenêtre pour voir la version mobile de la page) et autres propriétés CSS3 (shadow, transform) que mon vrai travail m’interdit d’utiliser…

Enfin, j’ai découvert les api des différents boutons sociaux (Tweet, +1 et Like), pour me rendre compte qu’ils n’étaient pas forcément basés sur du code HTML valide. J’ai donc du bricoler un peu pour garder ma page valide HTML5.