Catégorie: Innovation

Projet MySwitzerland.com

Liste des liens menant directement aux points forts sur cette page.

Introduction

Les dernières technologies repensées et combinées pour vivre l’expérience de la Suisse: MySwitzerland.com se positionne comme la nouvelle référence dans le domaine de l’innovation. Il utilise par ailleurs entre autres la réalité virtuelle (A-Frame), les capteurs de mouvement, des polices 3D, la solution multi-CDN, l’apprentissage machine dans le domaine de la reconnaissance des images, une solution de cartes multi-couche avec intégration de SwissTopo et Google Maps (y compris API Google Places).

Calendrier source d’inspiration

Toute la diversité et la beauté de la Suisse en 48 vidéos inspirantes interactives, réunies dans un calendrier annuel. Une solution totalement autonome et réactive a été conçue à cet effet (comprenant notamment de la réalité virtuelle. https://vr.myswitzerland.com -> Optimisé pour Oculus Go). Le calendrier est entièrement fonctionnel même sur smartphone. Il possède en plus un mode «explorateur» qui utilise le capteur de mouvement de l’appareil. La performance du transfert de vidéos au niveau mondial a été assurée grâce aux CDN et à diverses optimisations en avant-plan, en arrière-plan et de performance vidéo. Pour que les vidéos offrent une plus-value aux visiteurs, des métadonnées cliquables «mobiles» ont été réalisées en superposition (overlay).

Essayer en direct

Motion Tag Tool

Pour placer un élément interactif de manière synchronisée sur une image mobile du calendrier source d’inspiration, des processus de tracking manuels coûteux sont généralement mis en œuvre. Un outil d’édition a été spécifiquement élaboré pour permettre aux éditeurs un placement libre (que ce soit avec des objets ou de manière distincte). Des balises (tags) peuvent ici être placées sur un calendrier avec quelques positions, qui deviennent des vecteurs de déplacement propres ensuite interpolés au moyen de l’algorithme de lissage. Pour les exportations, il suffit de quelques points forts pris en charge en tant que JSON dans le CMS et utilisés pour le rendu (rendering) des composants du CMS.

Essayer en direct

Réalité virtuelle

Développement d’un environnement de réalité virtuelle pour le calendrier source d’inspiration à l’adresse https://vr.myswitzerland.com (Oculus Go recommandé). La mise en œuvre de la réalité virtuelle s’appuie sur les technologies de création de sites web en réalité virtuelle reposant sur la base de données A-Frame. Les mêmes vidéos sont utilisées sur le bureau et sur smartphone. Pour ce faire, les vidéos doivent être tournées en 3D, à 220 degrés, être corrigées et fondues, et une interface de réalité virtuelle propre est développée pour la navigation dans la vidéo. Une police 3D propre avec animation d’explosion a été créée.

En savoir plus Common.Of Réalité virtuelle

Carte de Suisse

Une solution de cartes panoramiques offrant un aperçu de la diversité de la Suisse. Au sein d’un contenu sélectionné, il est possible d’exécuter et d’afficher d’autres recherches de proximité (recherche dans les environs). Il existe également une fonction «Autour de moi» (around me), qui met l’accent sur la position actuelle. Il est possible de sélectionner plusieurs couches de carte, et SwissTopo (topographie nationale suisse) a notamment été intégré dans Google Maps. Une recherche textuelle intègre, outre les contenus de Suisse Tourisme, toutes les rues et tous les lieux grâce à une liaison avec l’API Google Places. L’application a été développée avec VueJS, en privilégiant une performance UI sans attente et un fonctionnement clair.

Essayer en direct

Affichage automatique des images

L’intelligence artificielle permet de gérer ce site imagé et inspirant doté de plus de 400 000 photos. Les éditeurs ne gèrent en arrière-plan qu’une photo à la fois par teaser ou page. La photo finalement affichée sur la page est calculée et adaptée à la taille de l’écran et à la taille des composants lors du chargement de la page (Crop). Le découpage est effectué automatiquement à l’aide d’algorithmes d’apprentissage machine, l’intelligence artificielle assurant la sélection du bon cadrage ainsi que la reconnaissance et la conservation des éléments pertinents pour le témoignage visuel. Le service d’affichage des images utilisé, Cloudinary, détermine aussi automatiquement et de manière dynamique le format de la photo (JPEG, PNG, WebP) et son niveau de qualité (p. ex. 75%).

Feuilleter en ligne

Recherche

Alternative à l’accès direct via un moteur de recherche ou à la navigation principale, une recherche intuitive et performante permet d’effectuer une recherche non structurée en fonction du contenu souhaité. La solution «search-as-you-type» peut être remplie de contenus spécifiques et prendre en compte les besoins propres à un marché. La recherche est conçue pour tolérer les erreurs de frappe et offrir plus de sécurité au visiteur; elle prévoit la possibilité d’obtenir depuis le bureau un aperçu de la page détaillée, en survolant le résultat de recherche. La recherche basée sur Algolia est performante dans le monde entier grâce à l’intégration des CDN.

Regarder le screencast

Performance mondiale

Pour proposer une expérience client aussi bonne que possible aux marchés lointains, une solution multi-CDN (Cedexis) est mise en œuvre pour assurer un affichage performant de la page. Les pages sont alors mises en mémoire tampon, si possible à proximité du visiteur, et livrées depuis ce point. Pour la Chine, nous avons évalué un CDN dédié (Quantil), ce qui permet de sauvegarder les contenus en Chine continentale et, ainsi, de les livrer derrière le pare-feu chinois. Nous avons dû demander une licence ICP spécifique et entreprendre diverses adaptations techniques, afin qu’aucune solution Google et Facebook ne soit implantée en Chine! Le gain de performance par rapport à avant est conséquent (facteur 10) et les retours du marché sont excellents!

Feuilleter en ligne

Autres catégories