Vie de l'agence
04/08/2017

Mise en production du site du J1 - Port de Marseille - Drupal 8

Osez le J1 - Drupal 8
Le Grand Port Maritime de Marseille a lancé un appel à projet pour le réaménagement de la gare maritime qui accueillera d’autres activités et c’est bluedrop.fr qu’elle a choisi pour concevoir et développer le site Drupal 8 : osezlej1.com !

Le projet Osez le J1

Le Grand Port Maritime de Marseille détient le dernier hangar portuaire sur le site emblématique de la joliette : le J1 ! Cette ancienne gare maritime va faire l’objet d’un réaménagement colossal de plusieurs millions d’euros. En effet, l’espace d’embarquement vers les destinations du Maghreb va être migré vers un autre site, pour laisser de nouvelles activités prendre place dans le hangar J1. Pour cela, le Grand Port Maritime de Marseille a souhaité entreprendre un appel à projet en lançant un site qui servira à cet effet.

Un investissement important sur le front-end

Compte tenu des nombreux sites internet d’appels à projet, le site osezlej1.com doit se démarquer des autres projets et retenir l’attention. Vous l’aurez compris l’enjeu majeur est le front-end,  c’est pourquoi tous nos efforts ont été alloués au webdesign et à l’expérience utilisateur (merci à notre directeur artistique, Ryad Karar, minutieux dans les moindres détails !). L’information doit être mise en valeur pour faciliter l’accès au projet et à la candidature, c’est pourquoi nous avons opté pour un webdesign épuré et moderne.

Le petit plus: la vidéo et les prises de vue aériennes

Le projet demandait une visite virtuelle du site du J1 pour promouvoir au mieux le potentiel du hangar. Celle-ci a été réalisée sous forme de vidéo avec des prises de vue aériennes par drone. C’est avec la collaboration de Gérald Maiche et de notre directeur Ryad Karar, que nous avons pu prendre les vues aériennes, monter la vidéo, concevoir le design des éléments et de l’interface, ajouter le contenu textuel et audio en deux langues, et intégrer la vidéo en arrière plan dans la page d’accueil.


Solutions techniques

Pour le back-end - Drupal 8 comme socle technique (bilingue FR et EN) ;

Quelques modules Drupal tels que :

  • Paragraphs : module éminent pour structurer le contenu d’un site de manière à produire un visuel agréable pour l’utilisateur et facilite ainsi l’expérience utilisateur ;
  • Sitemap : utile pour mettre en place un plan de site ;
  • Focal Point : il permet de choisir la partie la plus importante d’une image en ne sélectionnant qu’un seul point ;
  • Metatag : ce module est utile pour gérer les balises Title et les Meta tags ;
  • Pathauto : flexible et complet, ce module permet de créer des syntaxes de réécritures complexes pour chaque type de contenu ;

Pour le front-end - Foundation 6 et jQuery 3 ;

Combinés de quelques plugins Foundation 6, tels que :

  • Reveal : pour la fenêtre modale ;
  • Accordion : pour réaliser des accordéons ;
  • Toggler : pour appliquer/ retirer une classe.

Les librairies suivantes :

  • Swiper : pour mettre en place un slider reponsive ;
  • ScrollMe : utile pour appliquer des animations lors d’un scroll ;
  • Waypoints : il permet de déclencher une fonction lorsque vous vous déplacez vers un élément.
  • StellarJS : pour appliquer des effets de scrolling parallaxe sur n’importe quel élément HTML.
  • Fancybox : permet la création de galeries photos en plein écran avec une navigation

La presse en parle aussi :

...