Voilà quelques années que je n'étais plus actif sur le forum, mais je reviens avec un projet de dingue que nous venons tout juste de finaliser au sein de BLACKBLITZ, mon agence web et vidéo : une VV interactive du SIAL, un des plus grand salon de l'alimentation au monde.
Un projet assez fou, qui a mobilisé de nombreuses compétences :
- un webdesigner, pour dessiner un site entièrement adapté à la charte du client
- un développeur et intégrateur, pour faire le travail d'ajout des sphères en HTML5, avec des hotspots dans des lightbox
- un vidéaste pour le tournage et le montage de vidéos présentes sur le site
- un infographiste, qui a réalisé 5 infographies placées dans des hotspots, mais aussi les titrages animés dans les vidéos
- un pano-photographe - moi-même
- pour les 9 prises de vues, les assemblages et les retouches dans PhotoshopPour les plus impatients, le projet est dispo à cette adresse : https://explore.sialparis.fr/
Pour les autres, je vais un peu détailler les aspects techniques du projet, puisque le défi à relever était de réaliser un site entièrement adapté sur mobile et tablettes, avec des hotspots non-captifs dans les VV. C'est-à-dire que nous les avons ajouté dans le code HTML, avec des lightbox.
Les présentations étant faites, voici les détails du projet, pour partager avec vous les défis que nous avions à relever et les difficultés rencontrées.
Si certaines difficultés vous paraissent anodines ou que vous avez déjà rencontré les mêmes, le partage d'expérience est toujours bon à prendre ... parce que pas agréable du tout de se casser la tête pour apprendre ensuite qu'il existait une solution toute simple
Petite carte d'identité du projet
- 9 sphères d'une résolution de 12k
- 5 parcours différents (dont 1 parcours général)
- plus de 200 contenus
- répartis dans environ 70 hotspots
3 défis majeurs étaient à relever, pour mener à bien ce projet
- Le rendre entièrement accessible sur mobiles et tablettes
- Personnaliser le design de la plateforme aux couleurs du client, cela va de la page d'accueil, aux lightbox et aux boutons dans les hotspots, en passant bien entendu par la navigation dans les sphères
- Enfin, le site devait être optimisé pour les réseaux sociaux : une image et un texte spécifique devaient apparaître lors du partage
Pour rendre le site entièrement accessible sur mobiles et tablettes, nous avons dû ruser
En fait, il n'y avait pas de solution réellement stable, permettant de passer par un player 100% html5, il y avait toujours du flash quelque part et/ou des hotspots à intégrer avant l'export de la sphère.
Pour des raisons de design, de référencement dans les moteurs de recherche, de temps de chargement des sphères et d'ergonomie, les hotspots (au nombre de 72) devaient apparaître dans des lightbox, qui permettent de gérer HTML, CSS et JS.
Nous nous contentions donc d'exporter les sphères en equi, avec uniquement les hotpots, que nous remplacions par des tags à la main, dans le JS, qui puissent faire appel au HTML
Il y avait en effet plusieurs types de lightbox :
- texte
- diaporama photo
- infographie
- vidéo
Tout ceci était bien casse-tête ... on a également dû toucher au corps des fichiers WebGL émis par Pano2VR, pour faire appel à des fonction JS
En fait, nous voulions une solution 100% modulable et personnalisable, les fonctions de soft comme Pano2VR ou PanoTour Pro ne nous permettaient par cette autonomie. Le diable se cache dans les détails
Enfin, ce qu'il nous fallait, c'était un site léger et fluide au chargement : intégrer les contenus dans les lightbox permet d'alléger le poids des sphères et de ne charger que le contenu réellement consulté par l'utilisateur.
Cela permis également d'intégrer des fonctionnalités spéciales, comme l'utilisation des flèches droite/gauche du clavier, pour naviguer dans les hotspots.
En matière de gestion du projet
- les sphères ont été shootées durant le salon 2014 (1 édition tous les 2 ans)
- assemblées ensuite à l'automne 2015, avec pour objectif le travail le plus quali possible
- exportées puis assemblées en VV à Noël, avec des versions aussi diverses qu'il y eut de tests sur les technos
- le site web n'a quant à lui pu être designé qu'en novembre, lorsque la charte est sortie
- en gros, le développement de la plateforme a réellement démarré en janvier, soit 3,5 mois de taff technique
Le rendu est assez puissant, notre dev a fait un travail de malade sur des technos qu'il a dû faire travailler ensemble et je trouve ça vraiment bluffant, à mon simple niveau de photographe.
À de nombreuses reprises, on a dû tenir notre souffle car nous pensions que le projet n'allait pas sortir.
Mais au final, on a un site web fluide aussi bien sur ordi, tablettes que mobiles
Je me demandais même si la combinaison des différentes technologies et le fait de l'avoir rendu responsive en passant par des hotpots/lightbox intégrés en HTML était une première ?
Vos avis m'intéressent beaucoup, car à ma connaissance je n'ai pas trouvé d'équivalence ... donc la question que je me pose, c'est si nous avons réellement pris le taureau par les cornes ou si nous avons fait trop compliqué
