Projet commun BTS CIEL 2ème année : Création d'une carte interactive

Objectif du projet :

Créer une carte interactive de l'établissement La Providence, accessible via un site web. Cette carte permettra de naviguer dans les différents espaces de l'établissement grâce à des zones cliquables, offrant des informations détaillées et des médias enrichis (images, panoramas 360°). Le site sera disponible en deux langues : français et anglais.

Étapes et livrables attendus :

1. Étude du plan de l'établissement :

• Analysez et identifiez les zones importantes à mettre en valeur (salles, bureaux, espaces communs, etc.) dans la zone qui vous sera affecté.
• Assurez-vous que chaque zone soit clairement identifiable sur le plan.

2. Création de la carte interactive :

• Utilisez une image du plan comme base. Vous pouvez, si vous le souhaitez :
  • Retoucher ou améliorer l'image existante pour qu'elle corresponde mieux aux besoins du projet.
  • Créer une nouvelle version du plan en utilisant des outils graphiques adaptés (GIMP, Photoshop, Canva, etc.).
• Implémentez des zones cliquables en HTML à l'aide des balises <area> et d'une carte d'image (<map>).
• Pour définir les zones interactives, vous pouvez utiliser l'outil en ligne https://www.image-map.net/, qui permet de générer facilement le code correspondant.
• Chaque zone doit permettre l'affichage des informations suivantes :
  • Nom de la zone.
  • Description en français et en anglais.
  • Une ou plusieurs images associées.
  • Un panorama à 360° si disponible.
  • (Optionnel) Le plan de la zone permettant à l'utilisateur de se situer dans le bâtiment.
  • (Optionnel) Le site devrait être responsive, c'est-à-dire compatible avec les appareils mobiles et tablettes.
• Une démo de carte interactive est disponible à l'adresse suivante : https://providence.delpech.info/map.
• Vous pouvez également télécharger les sources de cet exemple pour vous en inspirer ici : https://providence.delpech.info/download/map.
• Les plans numérisés sont disponible ici : https://providence.delpech.info/download/plans.

3. Développement du site web :

• Technologies autorisées :
  • Backend : PHP; JavaScript ou Python (Flask). Pour PHP, vous pouvez utiliser des frameworks comme Laravel ou Symfony, et pour JavaScript, vous pouvez utiliser des frameworks comme React si vous le souhaitez.
  • Frontend : HTML, CSS, JavaScript.
• Le site doit comporter :
  • Une page principale avec la carte interactive.
  • Une navigation claire pour basculer entre les langues (français/anglais).
  • Une interface utilisateur esthétique et intuitive.

4. Gestion des contenus multilingues :

• Structurez les données pour permettre un basculement simple entre les langues.
• Utilisez des fichiers de ressources (par exemple, JSON ou YAML) pour stocker les textes en français et en anglais.

5. Documentation du projet :

Une documentation complète devra accompagner le projet. Elle devra inclure les éléments suivants :

• Les instructions pour installer et exécuter le site web.
• Le fonctionnement global du site
• Un rapport détaillant le processus de mise en place, comprenant :
  • La phase de recueil du besoin : identification des attentes et des fonctionnalités principales.
  • La collecte des informations et des médias (photos, descriptions, panoramas) pour chaque zone.
  • Les étapes de conception : choix technologiques, création du design, définition des zones interactives sur le plan, etc.
  • Le développement : création du code pour les zones cliquables, intégration des contenus multilingues et des médias enrichis.
  • Les tests et validations : vérifications techniques, compatibilité, retours utilisateurs.
  • (Optionnel) L'hébergement ou la mise en ligne du site.
• Un retour d'expérience : description des défis rencontrés et des solutions apportées.

Évaluation :

• Qualité technique :
  • Fonctionnalité et précision de la carte interactive.
  • Intégration correcte du multilingue.
  • Respect des standards du web (HTML5, CSS3, bonnes pratiques PHP/Python).
• Qualité esthétique :
  • Interface utilisateur claire et attrayante.
• Qualité du contenu :
  • Pertinence et clarté des informations affichées.
  • Présence d'éléments enrichis (images, panoramas).
• Travail collaboratif :
  • Répartition efficace des tâches entre les membres de l'équipe.
  • Respect des délais et des consignes.

Contraintes et recommandations :

• Respectez les délais imposés pour chaque étape du projet.
• Utilisez un dépôt Git pour suivre l'avancement et collaborer efficacement.
• Testez régulièrement le site pour vérifier la compatibilité avec différents navigateurs.
• Pensez à optimiser les images pour réduire les temps de chargement.

Livrables attendus :

• Le site web complet, hébergé localement ou en ligne.
• Les fichiers sources (code, images, panoramas, etc.).
• La documentation technique et utilisateur.
• Une présentation orale (5-10 minutes) pour expliquer les choix techniques et les résultats obtenus.