Nous venons de lancer le nouveau site de l’Adresse, Musée de la Poste réalisé avec Mosquito :
▻http://www.ladressemuseedelaposte.fr
C’est comme toujours du #SPIP, #HTML5, #responsive.
– Le site utilise les nouvelles fonctionnalités que j’ai développées pour le #plugin image_responsive :
►http://zone.spip.org/trac/spip-zone/browser/_plugins_/image_responsive
En particulier la définition de valeurs de largeur prédéfinies, pour éviter de fabriquer quelques centaines d’images. Le site a, à plusieurs endroits, des images qui occupent toute la largeur de l’écran ; donc il faut éviter de fabriquer avec le plugin autant de versions de l’image que de largeurs de la fenêtre d’affichage.
J’avais documenté ça là :
▻http://seenthis.net/messages/223187
– L’une des originalités du site est la possibilité de présenter le contenu d’une rubrique sous forme dite de « longform » ou de parallaxe. C’est-à-dire une de ces longues pages regroupant toute l’information sur page unique, avec un long scroll, tout en essayant graphiquement de rendre la consultation d’une longue page aussi attractive que plusieurs pages normales. Par exemple, les « 10 objects phares du musée » :
▻http://www.ladressemuseedelaposte.fr/Les-10-objets-phares-16
Les grandes images qui rythment la page, avec l’effet de parallaxe, ce sont les logos des articles de cette rubrique.
Les images de la page se chargent au fur et à mesure du scroll, simplement en utilisant l’option « lazy load » du plugin image_responsive. C’est bien pratique…
Pour la gestion du parallaxe, j’utilise le plugin jquery skrollr. J’avais indiqué il y a quelques temps comment rendre skrollr compatible avec le lazy load de image_responsive :
▻http://seenthis.net/messages/204550
– Enfin, comme c’est du SPIP, je peux intégrer facilement dans les pages longform les éléments que j’inclus habituellement dans un tel site. Voir par exemple ici :
▻http://www.ladressemuseedelaposte.fr/La-tete-dans-les-nuages
Il y a donc une colonne principe « à gauche » et une colonne d’informations spécifiques « à droite », on peut intégrer un calendrier, et évidemment un portfolio.
– Sinon, on a fait une présentation plutôt spectaculaire des vidéos embeddées :
▻http://www.ladressemuseedelaposte.fr/Pilatre-du-Rozier
et aussi une grande carte d’accès bien maousse :
▻http://www.ladressemuseedelaposte.fr/Travaux-Acces-Tarifs
– Enfin, j’ai récupéré le contenu d’un Wordpress préexistant pour réaliser la rubrique « Le Blog » (qui se gère désormais dans SPIP) :
▻http://www.ladressemuseedelaposte.fr/Le-Blog-48
J’avais fait un squelette dans SPIP permettant de récupérer le contenu d’un site Wordpress, livré ici :
▻http://seenthis.net/messages/213240
