Catégorie: Technologie

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

Introduction

Comme une montre suisse: l’architecture de la toute nouvelle plateforme de hub de contenu est dotée de nombreuses importations de données et d’interfaces d’exportation vers des systèmes environnants. Le plurilinguisme et l’attractivité dans plusieurs domaines, mais aussi l’automatisation dans la migration des données ou l’affichage des images grâce à l’AI comptent parmi ses points forts. La performance et la disponibilité au niveau mondial grâce à une solution multi-CDN, en particulier pour les marchés lointains et prioritaires comme la Chine, ainsi que l’utilisation des toutes dernières technologies en avant-plan pour le calendrier source d’inspiration et la carte montrent la complexité de la solution.

Concept et architecture

Les grandes quantités de données, la performance et le traitement continu des données de nombreuses interfaces externes réclamaient une architecture ambitieuse et bien pensée. Le tout nouveau CMS évalué (Sitecore 9) sous forme de hub de contenus est prêt pour sa future utilisation sur tous les canaux numériques (headless-ready). Des données sont régulièrement fournies par des fournisseurs de données externes sur 20 interfaces (présentes uniquement à titre d’exemple dans le cadrage de la photo), puis déposées dans le CMS par les éditeurs, traduites, liées, publiées ou remises à disposition via les interfaces d’exportation.

Afficher l'image détaillée

Multilinguisme et marchés

Le site web est élaboré en 14 langues, dont certaines qui se lisent de droite à gauche, comme l’arabe. Les contenus peuvent être adaptés dans 22 marchés de manière individuelle, par exemple en employant plutôt le mot «septante» ou «soixante-dix», selon le pays. Une même page de contenu peut être configurée différemment par les éditeurs pour les diverses versions locales. 

Show example

Migration automatique des données

La migration de 85% des données (depuis environ 18 000 pages en jusqu’à 14 langues et 60 000 photos) a été effectuée au moyen d’un échange automatisé des données de l’ancien système CMS vers le nouveau. Les données ont été exportées de l’ancien CMS dans un format intermédiaire neutre (JCR, Java Content Repository). Afin d’améliorer la qualité des données et de les préparer pour le nouveau système, elles ont été validées et restructurées au moyen d’un analyseur et de règles d’expression régulières. Pour pallier la longue phase de préparation du contenu dans le nouveau système CMS, nous nous sommes assurés que le contenu migré dans le nouveau système CMS avait été préparé, mais que certaines modifications de l’ancien système CMS ont pu être reprises après la migration.

Afficher l'exemple

Logiciel médiateur

Sur MySwitzerland.com, les données sont issues d’une multitude de sources. Un logiciel médiateur a été développé sur la base d’Apache Camel afin de les relier; il réduit la complexité de Sitecore en tant que couche anti-corruption (anti-corruption-layer). L’utilisation de modèles «event-carried-state-transfer» permet un couplage lâche avec Sitecore. Le logiciel médiateur est chargé de la liaison des interfaces extérieures, il réalise un test de plausibilité, transfère les données dans le modèle de domaine propre, calcule les modifications et les fournit à Sitecore via le système de gestion asynchrone des messages RabbitMQ. Sitecore assimile ces événements, les traite et les confirme, et il s’assure que les modifications simultanées sont correctement traitées par les auteurs et les systèmes externes.

Afficher l'image détaillée

Disponibilité et performance

La grande disponibilité est assurée grâce à une mise à l’échelle verticale et horizontale et à un hébergement géographiquement redondant avec une synchronisation entre les emplacements du centre de données. Disponibilité annuelle vérifiable actuelle: 99,95%. La mise en œuvre d’une solution multi-CDN avec deux CDN et de l’HTTP/2 assure la bonne exploitation dans tous les pays. 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 apporter diverses adaptations techniques en avant-plan (frontend) et en arrière-plan, afin qu’aucune solution Google et Facebook ne puisse être utilisée.

Afficher l'image détaillée

Désactivation automatique des CDN

Les pages du CDN seront mises en cache pour une durée déterminée. Les règles concernant la durée de la mise en cache peuvent être configurées via une règle générique ou par page de manière individuelle via les éditeurs. Lorsqu’une page est modifiée, elle est automatiquement désactivée sur les deux CDN via l’API CDN.

Show example

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 tags du calendrier source d’inspiration

Un développement du Motion Tag Drawing Tool a été effectué ​pour l’enregistrement du mouvement des tags de métadonnées «mobiles». Les mouvements générés peuvent être exportés sous forme de vecteurs au format JSON et stockés dans le système CMS Sitecore. Cliquez ici pour essayer l’outil.

Démarrer!

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. Une police 3D propre avec animation d’explosion a été créée. 

En savoir plus

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

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

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

Optimisation des moteurs de recherche

Dès le début du projet, plusieurs mesures d’optimisation des moteurs de recherche (SEO) ont été prises en compte au niveau conceptuel en vue du lancement. Pour ce faire, un mapping automatisé de l’ancienne structure URL et de la nouvelle structure URL a été réalisé, grâce à la migration des données et des ID des précédentes pages. Pour les pages explorateur/filtre, des possibilités de configuration ont été élaborées pour permettre à l’éditeur de remplacer les anciens paramètres par de nouveaux. Grâce à ces mesures, après le lancement, près de 90% des anciennes URL ont pu être interceptées par le nouveau site web. Deux mois après le lancement, l’indexation de recherche de Google était à nouveau normalisée.

Afficher l'exemple

Possibilités de configuration de l’explorateur

Pour tous les explorateurs, tels que celui des manifestations (https://www.myswitzerland.com/events), des options de configuration ont été implémentées dans le back-end et définissent le contrôle de l’indexation SEO.​ Ainsi, l’éditeur peut définir quelles combinaisons (p. ex. filtre sujet et filtre région) sont autorisées pour l’indexation SEO. Il contrôle alors l’émission de la ​​métadonnée robots de la page ainsi que les liens nofollow. Les métadonnées (méta-titre, méta-description, méta-image) peuvent également être configurées. Le méta-titre et la méta-description sont regroupés de façon dynamique sur la base de la sélection actuelle du filtre.

Show example

Configuration du plan du site et métadonnée robots

Pour chaque page, l’éditeur peut configurer individuellement si la page doit être indexée (toutes les combinaisons d’index/noindex et follow/nofollow sont sélectionnables) et si la page doit apparaître dans le Sitemap.xml. De cette façon, le budget de crawl peut être mieux pris en compte et les pages moins importantes ne sont pas exposées aux moteurs de recherche. Dans la production, l’attention est portée sur l’utilisation correcte des URL et des liens croisés hreflang.

Show example

Autres catégories