Blanche de Peuterey.com
Mettre l’Internet au service des petites structures et de la famille
Blanche de Peuterey.com
Mettre l’Internet au service des petites structures et de la famille
Accueil > Articles > Un calendrier de l’avent
Regardez à quoi ressemble mon calendrier de l’Avent
L’idée est simple : tous les jours, on « ouvre une porte », et derrière, il y a un cadeau. Cela permet de communiquer un peu tous les jours, de faire des cadeaux, de créer du lien.
J’ai pas mal cherché des choses existantes, certaines très graphiques avec des vraies portes qui s’ouvrent, avec du javascript, du Jquery, etc, mais rien ne me plaisait vraiment, ou demandait des compétences que je n’ai pas. Je suis donc parti sur une page php simple, avec un test sur la date du jour : si on est le jour indiqué, ou plus tard, le lien est actif, et vous arrivez sur la page où se trouve la cadeau. D’où un code tout simple :
<?php
$date = new DateTime();
?>
<ul>
<li>
<?php
$lancement = new DateTime('01-12-2106');
if ($lancement<=$date)
{echo '<a href="1.php">1</a>';}
else
{echo "1";};
?>
</li>Ce calendrier de l’Avent était également un bon laboratoire pour mettre en place certains principes pertinents en terme de référencement, de conception, et d’expérience utilisateur.
Le graphisme de la page est conçu fluide, avec trois colonnes en pied de page. J’aurais juste à modifier ces trois colonnes par Media Queries, et c’est tout. Mon adaptation aux mobiles se fait toute seule.
Un rapide test sur https://testmysite.thinkwithgoogle.com/ donne la réponse suivante :
Il reste encore des points à améliorer sur la vitesse d’affichage des pages, mais l’adaptation aux mobiles est bonne. Ce qui est un gage de bon référencement.
J’utilise deux images dans ma page d’accueil : le logo et le bandeau avec les petites maisons. Les carrés sont obtenus en CSS.
Je suis en train de travailler sur les bonnes pratiques du web Opquast, afin d’en préparer la certification. Parmi celles que j’ai pu mettre en place, voici celles qui m’ont posé le plus de problème :
– Bonne Pratique 17 : le codage de caractère est en UTF-8
Ce ne fut pas très simple, car plusieurs de mes fichiers textes n’étaient pas en UTF-8
– Bonnes Pratiques 32 et 33 : Le titre de chaque page permet d’identifier le site et le titre de chaque page permet d’identifier son contenu
Comme toutes les pages sont codées « à la main », sans utiliser de CMS, ce fut l’un des points à vérifier (Avec un CMS, entre autre Spip, ces questions sont automatisées)
– Bonne Pratique 125 : Le code source de chaque page contient une métadonnée qui en décrit le contenu.
Là encore, rien d’automatisé.
– Bonne Pratique 124 : La racine du site contient des instructions pour les robots d’indexation.
J’ai mis mon fichier robots.txt, avec presque rien dedans, si ce n’est l’adresse du fichier Sitemap.
– Bonne Pratique 128 : Le site propose un fichier sitemap indiquant les contenus à explorer.
Là aussi, créé à la main, et non automatiquement comme avec Spip
Il en reste d’autres à mettre en place, j’en conviens. Il y en a certaines que j’ai oubliées, et que je vais essayer de régler au plus vite.
On comprend qu’il ne suffit pas de mettre en ligne ce type de calendrier pour que les gens le trouvent, le regardent, et que cela crée du lien avec votre site principal et vos clients (ou vos futurs clients). Il est important de relayer l’information chaque jour sur les réseaux sociaux, pour donner envie aux visiteurs de revenir, ou pour intéresser chaque jour de nouvelles personnes.
Pour cela, je crée grâce à Canva un post Facebook, tous avec le même graphisme, et une image nouvelle en fonction de la surprise qui se trouve derrière la porte. Ces posts sont publiés quotidiennement. La taille réelle de ces images est de 950 px
| 
| 
|
En plus de cela, une newsletter informe mes clients de l’existence de ce calendrier, et les encourage à aimer la page Facebook des Editions Blanche de Peuterey pour être informé chaque jour de la nouvelle porte ouverte.
Il existe d’autres calendriers de l’Avent, en voici quelques-uns parmi ceux que j’ai pu trouver.
– Un calendrier de l’Avent en Javascript http://www.hongkiat.com/blog/advent-calendar-javascript/
– A little Advent Calendar, par Nicolas Hoening https://www.nicolashoening.de/?takeaways&nr=63
– David Frohlich : Calendrier de l’Avent en css3 et php https://github.com/semperhilaris/css3adventcalendar
– http://www.24joursdeweb.fr/
(Même si cette année la formule est légèrement modifiée)
– https://24ways.org/ Web design and development articles and tutorials for advent
– Un superbe calendrier de l’Avent de Cozy Cloud https://www.myadvent.net/calendars/?id=60a3f8cf02141a43ec6efbd8a76a02a6
– 10 advent calendars for web designers and devs http://www.creativebloq.com/web-design/advent-calendars-designers-developers-12125924
– https://gathercontent.com/advent-calendar?utm_content=buffer68103&utm_medium=social&utm_source=plus.google.com&utm_campaign=buffer
Un calendrier de l’Avent sur la stratégie de contenu. Une vidéo par jour.
– http://nrjrce.wixsite.com/calendriergrenoble (Mais, bon, il n’y a pas de contrôle des dates, les portes s’ouvrent n’importe quand)
– Le calendrier de l’Avent du domaine public http://www.aventdudomainepublic.org/?date=2016-12-31
D'autres articles avec le mot clé « Référencement »
Rapidement, sans formatage, je mets ici quelques infos sur les balises Open Graph sous spip. (...)
Lorsque l’on paramètre Google Analytics pour son site, il est utile de savoir si la paramétrage (...)
Tout commence par une recherche sur Google, « Un Iphone sous linux », qui fait apparaître un de (...)
Constat Plusieurs de mes sites n’étaient plus Mobile Friendly selon l’outil Google. Je m’en suis (...)
