VDM version 2013

Le 17 décembre 2012 — par

À l’heure où vous lisez ces lignes, vous aurez sûrement déjà remarqué que la nouvelle version de Vie de merde est en ligne. À la base une volonté personnelle de remettre le design de VDM au goût du jour, un travail constant pour un site qui va bientôt fêter ses 5 ans, devenue peu à peu un mouvement global pour renouveler toute notre identité pour 2013.

Vous avez déjà un bel article pour vous expliquer en détail les nouveautés du site ainsi que les nouvelles versions des applications officielles (iPhone et Android), donc je ne parlerai ici que de quelques détails plus ou moins techniques qui ont pavé ce développement.

La barre du haut

Ce qui saute aux yeux est l’abandon de l’entête actuel pour une barre fixe, qui montre enfin notre logo et laisse un peu de côté le nom complet « Vie de merde » (ainsi que le slogan qui bien que marrant n’était pas compris par certains).

Barre du haut

L’avantage est que l’utilisateur peut à tout moment naviguer sur le site sans avoir à remonter toute la page. Un inconvénient de ces barres fixes est pour l’utilisation des ancres HTML, puisque le haut est toujours occupé par cette barre il a fallu un peu tricher avec du JavaScript :

$('a[href*=#]:not(.nofix)').click(function() {

    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
        && location.hostname == this.hostname) {

        if (this.hash.substr(0,3) == '#!/') return false;

        var target = $(this.hash);

        target = target.length && target || $('[name=' + this.hash.slice(1) +']');

        if (target.length) {

            var targetOffset = target.offset().top - 55;
            $('html,body').animate({scrollTop: targetOffset}, 10);
            return false;

        }

    }

});

Ce script descend automatiquement la page de 55 pixels lorsqu’un utilisateur clique sur un lien avec une ancre dans l’URL. Ne pas oublier de faire le même traitement sans l’évènement click pour les cas où la page est directement chargée avec une ancre.

La largeur du site

Depuis pratiquement 5 ans la largeur du site n’avait pas bougé et était restée à environ 910 pixels. Pratique pour les petits écrans à l’époque et pour les tablettes aujourd’hui, moins bien pour les grands écrans qui peuvent afficher bien plus de contenu.

Je suis passé à exactement 1038 pixels de largeur, une taille qui s’explique simplement par l’addition de la bannière 728px et du carré 300px, avec une marge de 10px entre les deux. En effet ce qui a aussi changé depuis 5 ans est l’utilisation du carré bien plus rémunérateur que les bannières hautes type Skyscraper.

Pour les tablettes le design utilise un peu de Responsive afin que la lecture reste agréable : La colonne de droite se place en dessous du contenu avec un placement sur deux colonnes.

L’intégration Facebook

Un autre gros chantier de cette nouvelle version était l’intégration de Facebook et en particulier de son OpenGraph qui n’a d’Open que le nom puisque personne d’autre ne l’utilise et que Facebook est très sévère sur la validation de ses actions.

Facebook

Au niveau de la technique, vu le volume potentiel d’actions à envoyer, je ne pouvais pas le faire du côté serveur comme avec BetaSeries, j’ai donc dû mettre en place le SDK JavaScript pour que l’utilisateur s’identifie via son navigateur et envoie lui-même (via JavaScript) ses actions OpenGraph. Ainsi nous ne stockons aucune donnée Facebook et n’avons pas à faire les requêtes sur l’API.

Au niveau de l’administratif, je me suis demandé si je m’en sortirais un jour. Chaque action OpenGraph doit passer par une validation manuelle, qui en soi n’est pas très compliquée lorsqu’il s’agit d’une action personnalisée, mais lorsqu’il s’agit d’actions standard comme Read (pour indiquer sur Facebook que vous êtes en train de lire une VDM), c’est un cauchemar. J’ai dû envoyer une trentaine de fois mes tutoriaux d’utilisation de l’action, à attendre 2 jours pour me faire refuser et recommencer. Ça a fini par payer puisque j’ai réussi à faire valider mes 8 actions.

Le salon de discussion

La dernière nouveauté technique que je voulais mettre en avant est le salon de discussion. Déjà en place sur BetaSeries depuis un peu plus d’un an maintenant, j’ai à peu près réutilisé les mêmes éléments : Node.js avec le module node-irc. Pour ne pas avoir à gérer de serveur IRC, je m’appuie sur le réseau Geeknode. Comme tout salon IRC il sera sûrement blindé au lancement mais j’espère qu’une communauté sympathique s’installera.

Pour l’instant uniquement sur le site français, on verra selon le succès si on l’adapte aux autres langues.

Conclusion

Je ne vais pas vous soûler avec toutes les minuscules modifications et mises à jour qui ont été faites sur cette nouvelle version. Pour finir n’oubliez pas que cette nouvelle version apparaît en même temps sur tous nos sites traduits en 10 langues, ce qui rajoute une difficulté supplémentaire.

En tout cas j’espère que vous aimerez VDM version 2013 et qu’on pourra durer assez longtemps pour faire une version 2015 (laissez-moi respirer un an) !

S'abonner au flux RSS du blog
Recevoir les nouveaux articles par e-mail :