Comptes à rebours HTML,CSS… et PHP ! (Si si, c’est possible)

Camarades, pas d’introduction à rallonge dans ce nouvel article, je vais passer de ce pas et sans perdre de temps au sujet qui me préoccupe: L’internaute au pseudo « Emile Email » me faisait remarquer (à juste titre) en avril 2017, en commentaire à l’article sur la création d’un template emailing full responsive, qu’il aurait « apprécié […] comprendre comment […] faire un gif compte à rebours » (fin de citation). Qu’à cela ne tienne, cher ami ! Nous allons donc aborder ce point. Accrochez-vous à ce que vous avez sous la main (attention quand même hein, pas de sous-entendu graveleux, je vous vois venir), ça va être un chouïa technique !

En vérité je vous le dis, il existe déjà un post concernant les « countdowns ». En revanche, celui-ci avait été publié depuis la communauté Litmus, et n’est pas, au jour d’aujourd’hui (ouh que j’exècre cette expression) disponible dans la langue de Molière. En exclusivité donc, je vais vous faire un petit récapitulatif des compétences et points techniques à aborder, et rentrer un peu plus dans le test de la solution… Ne me remerciez pas surtout, ça me fait plaisir, c’est cadeau, c’est pour moi.

Alors bien évidemment, vous trouverez quelques sites vous proposant de générer en un tour de main ces comptes à rebours (https://motionmailapp.com/, https://www.sendtric.com/, https://countdownmail.com/). Quelques plateformes de routage ou éditeurs vous proposeront peut-être même d’en générer un directement depuis leur plateforme ! Si vous y trouvez votre compte, j’ai envie de dire « tant mieux » : vous pouvez passer votre chemin et ne pas lire l’intégralité de cet article… Mais ça serait dommage ! Bah oui, parce que moi, je vous propose de générer le vôtre, vous-même, avec vos petites mains, votre petit clavier !! et surtout d’attribuer le style que vous souhaitez à ce décompte. Donc bon, vous voyez bien que ça vaut le coup de continuer à lire…

Déjà, primo : quelle utilité ?
Eh oui ! Avant de s’engager dans ce chantier, il faut bien comprendre et en discerner l’utilité. On ne vas pas faire ça juste pour le plaisir et parce que c’est tendance, non non non !! Un compte à rebours, ça attire l’attention, ça induit une certaine notion d’urgence, de délai, et finalement, ça permet de mettre en avant une offre de façon singulière. Qu’il s’agisse d’une offre de dernière minute, d’une inscription pour un webinar ou un événement, il s’agit là d’un outil marketing puissant encourageant l’internaute à profiter d’une offre particulière (je me sens Wikipédia…)

« Et le support de ce petit plus de la maison Periglioni ? » me direz-vous ? Selon Litmus, le support serait total sur l’ensemble des webmails et logiciels de messagerie, même s’il faut bien garder à l’esprit que les gifs animés ne fonctionnent pas sur Outlook 07/10/13. MAIS MAIS MAIS (ne partez pas si vite !!!) la première image de votre gif animé s’affichera tout de même sur cet environnement, donc, pas de panique ! Le message reste clair et compréhensible, et la notion de délai reste bien présente.

« T’es assise ? Parce que j’ai un truc à te demander et c’est pas banal »
« Je t’écoute »
« Va t’asseoir »
Ace Ventura

Vous vous en doutez peut-être (ou pas du tout, ça je ne peux pas savoir en fait…) mais un compte à rebours dynamique va demander de réunir quelques conditions techniques :

• L’accès à un serveur pour héberger un fichier php (et donc un support PHP sur ce même serveur)
• Une typo si vous souhaitez utiliser une typographie particulière
• Une base de données (facultatif, on verra ça plus tard dans les évolutions de la chose)
• Les logiciels vous permettant de modifier ou créer des gifs et de modifier le code HTML/PHP

Alors, ch’bim, rentrons dans le vif du sujet (toujours faire attention de ne pas faire de faute d’orthographe, un « t » à la place du « f » sur certains mots et le sens diffère complètement) : Comment va-t-on s’y prendre ?

Tout d’abord, et comme le proposait l’article de la communauté Litmus, vous pouvez télécharger le zip depuis ce lien regroupant l’ensemble des fichiers nécessaires. Vous y trouverez donc un exemple de typographie, un fichier gif.php, un fichier GIFEncoder.class.php, un fichier php52-fix.php, ainsi qu’un dossier « images ». Perso, je vous propose la même chose mais avec un fichier gif.php commenté en français… Ce qui est bonnard déjà, c’est qu’il y a deux fichiers auxquels il n’y aura même pas besoin de toucher : GIFEncoder.class.php et php52-fix.php. Evidemment, si vous souhaitez y jeter un œil, y bidouiller ou tenter d’en comprendre quelque chose, aucun souci ! Sachez juste que je n’aborderai pas le contenu de ces fichiers pour le moment, puisque le compte à rebours peut être généré sans avoir à s’en soucier.

Eeeeeet, qu’est-ce qu’on fait maintenant ?
Benny B (B-E, deux N, Y-B, mon nom à moi c’est Benny B oui tu l’as deviné !)

Vient ensuite le dossier « images » : dans ce dossier, vous trouverez une image nommée « countdown.png ». Cette image n’est ici utilisée qu’à titre d’exemple. Vous pourrez par la suite (et vous devrez d’ailleurs, impératif du subjonctif) la modifier pour obtenir le graphisme et le rendu souhaité.

Enfin, reste le fichier gif.php : C’est ici que tout va se jouer. Alors, la solution que tout le monde aime adopter pour gagner du temps, c’est un gros copier/coller qui tâche, hop je mets ça en local sur mon serveur et je regarde si il se passe quelque chose. Autant vous dire que si vous vous limitez à ça, vous n’arriverez pas à grand-chose… Prenez bien le temps de lire ce que je vais détailler ci-dessous, je vais essayer d’aborder tous les points importants car j’estime que c’est en comprenant un minimum les choses que l’on arrive au résultat souhaité ! (et puis je me suis pas décarcassé comme Ducros pour rien quand même…)

Vous pouvez donc maintenant ouvrir le fichier gif.php :

date_default_timezone_set : En l’occurrence, si vous lisez cet article en français, je pense que vous n’aurez pas b’soin de toucher à cette variable. Il s’agit là tout simplement du fuseau horaire que nous allons utiliser pour notre décompte.

$image : Il s’agit ici de la variable reprenant le chemin de l’image que vous allez modifier. Cette variable et son chemin (normalement toujours identique) sont présents trois fois dans le code PHP. A vous de le modifier en conséquence si le chemin ou le nom de l’image venait à changer.

‘size’ : La taille de la typo que vous allez mettre en place sur le texte du décompte. Il s’agit ici d’une font-size en points en principe. N’hésitez pas à modifier cette variable à souhait !

‘angle’ : L’angle de rotation du texte. Vous pourrez ainsi décider d’attribuer un texte penché au décompte (pourquoi pas j’ai envie de dire, j’ai déjà vu des clients demander de créer de la neige en HTML sur leur site, alors je suis plus à ça près…). N’oubliez pas qu’un angle se situe obligatoirement entre 0 et 360.

‘x-offset’ : Il s’agit là de la distance à laquelle le début du texte se situe par rapport à la bordure gauche de l’image. Il s’agit d’une valeur en pixels. N’hésitez donc pas à la modifier à votre convenance.

‘y-offset’ : idem que le point du dessus, sauf qu’il s’agit de la position horizontale et non verticale (vous aviez deviné je suis sûr !). A vous de la modifier !

‘file’ : le chemin ou le nom de la typographie que vous souhaiterez utiliser sur le texte du décompte.

‘color’ : la couleur de votre texte à renseigner ici au format RGB ; Qu’est-ce que le format RGB me direz-vous ? Très bonne question… Je n’en sais rien. Je plaisante : RGB pour Red, Green, Blue, est un système de codage informatique des couleurs. Par synthèse additive de trois couleurs primaires (rouge, vert et bleu pour ceux qui n’auraient pas fait anglais LV1) les écrans d’ordinateurs peuvent ainsi reconstituer une couleur proche du matériel. Autrement dit, ce format doit contenir trois valeurs. N’importe quel éditeur graphique devrait pouvoir vous fournir de telles valeurs depuis un code hexadécimal, mais si ce n’est pas le cas, voici un outil qui pourrait s’avérer bien pratique : https://htmlcolorcodes.com/fr/

Maintenant que les principaux ajustements sont faits, il ne vous reste plus qu’à générer et consulter l’image en question. Pour se faire, vous pourrez vous rendre à VOTRESERVEUR/countdown/gif.php?time=LE-TEMPS-QUE-VOUS-AUREZ-DECIDE. Ou, plus simplement : https://127.0.0.1/Countdown/gif.php?time=2017-12-25+00:00:01 en cas d’un serveur local par exemple. Sur l’exemple que je viens de citer, j’ai renseigné la date butoir suivante : le 25 décembre 2017 à 00h01. Ainsi, lorsque je me rends sur la page concernée, j’aurai bien un décompte (au 10 octobre 2017, à 11h20) de 75 jours, 14 heures, 40 minutes et 16… 15… 13 secondes… Enfin bref, vous avez compris, tout fonctionne correctement !

Et finalement, tout simplement, pour pouvoir afficher ce compteur au sein d’un email, il me suffira de renseigner cette même url comme chemin d’une balise <img>, rien de plus simple ! Non non, pas besoin d’ajouter un format ou une extension type .jpg ou .png, vous avez bien lu, vous aurez quelque chose comme

<img src="https://127.0.0.1/Countdown/gif.php?time=2017-12-25+00:00:01">

Bon ok, graphiquement pour le moment, je vous l’accorde, c’est moche… Mais je suis pas votre DA ! A vous de voir ce que vous voulez en faire, et comment l’adapter, le moduler, le bidouiller, y trifouiller pour en obtenir un résultat probant !

« Je pense que le moment est venu de vous dire ce que j’ai appris, d’en tirer une conclusion, non ? »
Danny Vinyard, American History X

Alors voilà, on a vu le plus gros. Mais est-ce que pour autant il faut s’arrêter là ? Ouh que non ! Moi, quand je vois ça, j’ai plein d’autres idées qui me viennent en tête ! En fait, ce qui nous intéresse tout autant dans ce sujet, c’est aussi la création d’une image (png, gif ou jpeg) en PHP pour pouvoir gérer plus aisément la modification de cette image. Il ne s’agit pas seulement d’un article sur les comptes à rebours finalement, mais plus largement de l’utilisation des images générées en php (vous ne vous attendiez pas à ça hein, avouez !)

Pousse le bouchon un peu plus loin Maurice : Rien ne nous empêche de voir ce compte à rebours autrement. Je m’explique : un compte à rebours n’est pas systématiquement assimilé à un « temps » ou à un effet de chronomètre. Il serait tout à fait possible d’envisager un décompte de produits en stock, de mettre à jour en temps réel un taux, un pourcentage, un nombre de participants, etc.

En effet, si notre fichier PHP prend en compte une variable en Base de données, tout peut-être envisageable ! Bruno Florence évoquait déjà le sujet en 2013 (c’est dire si l’homme avait de l’avance !). Reste que vous devrez alors penser à tous les aspects techniques et graphiques de votre compte à rebours ! J’ai voulu moi-même tester une petite idée que j’avais derrière la tête : j’ai un certain nombre de produits en stock, et je veux créer une « urgence » sur le stock réduit restant de ce même produit…

Je vous livre ici une petite maquette réalisée à la va-vite pour vous illustrer ma pensée :

J’ai une irrésistible envie de gérer le contenu de ce mail directement en PHP et de penser le nombre de produits disponibles comme un compte à rebours justement ! Sacrée évolution de notre postulat de départ, n’est-il pas ?

Et bien, sachez que c’est tout à fait faisable… Je vais, en PHP, créer une image de 600px de large sur 600px de haut, lui attribuer une couleur de fond bleu, une variable de couleur blanche, et je vais ajouter trois textes (dont un dynamique, avec la valeur des produits restants en PHP et piochant directement dans la Base de données), que je vais placer conformément à ma maquette, puis je vais créer une petite boucle en php pour afficher autant de fois l’image de mon produit que la valeur indiquée en Base de données…

Allez hop, plutôt que de vous faire un détail exact des propriétés que je vais utiliser, je vous donne un petit accès direct à mon code, ça sera plus simple.. C’est un cadeau de plus, vous m’êtes désormais redevable ! (et je ne veux rien entendre sur les contours des produits qui sont légèrement pixellisés, vous n’êtes que des enfants gâtés !)

Ne vous limitez pas à ce simple exemple, mais gardez à l’esprit que beaucoup de « projets » et d’évolutions sont envisageables. A vous de faire marcher votre imagination, et de nous proposer, pourquoi pas, ce que vous êtes parvenus à créer depuis ce (petit) tutoriel !