Énoncé

Vous avez un client : l’office du tourisme de la ville de Strasbourg ! Ils souhaitent un site web à l’image de la ville pour attirer des touristes et informer sur les activités proposées.

Vous allez devoir réaliser un site web pour mettre en avant Strasbourg !
Vous allez devoir réaliser un site web pour mettre en avant Strasbourg !

Instructions

On vous indique que le site doit être créé sous WordPress et qu’il doit utiliser un thème personnalisé. Le client souhaite avoir un rendu unique pour son site : vous allez donc devoir adapter le thème à son image (vous pouvez utiliser un thème existant comme base néanmoins).

Voici les fonctionnalités attendues de la toute première version du site :

  • Le site possèdera une page d’accueil, essentiellement graphique, avec un peu de texte, qui souhaite la bienvenue au visiteur et lui indique ce que l’on peut trouver sur le site. Des liens sont prévus pour accéder aux autres pages dans le corps de l’accueil. Un encart affichera un aperçu de la dernière actualité postée par la ville.

  • Un menu de navigation en haut de la page doit suivre le visiteur lorsqu’on va plus bas dans la page. Ce menu doit contenir les éléments suivants dans l’ordre : Accueil (avec une icône de maison à gauche du texte),  Actualités, Plus d’infos, Activités du mois, Contact

  • Un Champ de recherche doit aussi être présent pour faciliter l’accès au contenu. Il n’est pas nécessaire que celui-ci fonctionne pour cet exercice.

  • Les pages doivent être conçues en responsive, de telle sorte à ce que le site s’affiche correctement sur toutes les résolutions. La navigation sur mobile et tablettes doit être naturelle et ne doit pas nécessiter de zoomer.

Voici les différentes pages que doit proposer le site:

  • La page « Actualités » affiche la liste des billets d’actualité. Les billets ne seront pas signés par un auteur : ils seront tous postés au nom de la ville.

  • La page « Plus d’infos »  présente différents types d’activités sportives et culturelles organisées (musée de la ville, marathon… affichez-en au départ au moins 6 différentes). L’administrateur du site doit pouvoir indiquer le nom de l’activité, une description et une image.

  • La page « Activités du mois » liste au moins 10 activités à venir dans le mois sous forme de tableau (avec date, titre et court descriptif). Les lignes doivent se colorer au survol de la souris pour qu’on puisse se repérer. Un bouton « Inscription » à droite de chaque ligne du tableau ouvre un formulaire permettant de saisir son nom.  L’envoi du formulaire n’a pas d’effet pour cet exercice.

  • La page « Contact » affiche un formulaire de contact structuré avec les champs « Titre du message », « Votre nom », « Votre date de naissance », « Votre e-mail », une case à cocher « Résident de la ville », un menu déroulant « Nationalité « et un champ « Message » où on peut rédiger son message. Un petit texte d’aide s’affiche sous le champ date de naissance pour dire que le format JJ/MM/AAAA est attendu. Le formulaire doit générer l’envoi d’un e-mail.

Le site doit avoir été optimisé pour le référencement naturel et doit suivre les bonnes pratiques d’accessibilité (WCAG 2.0 niveau A).

Fichiers à fournir

  • Code HTML et CSS du site web WordPress, contenant le thème que vous aurez créé

  • Export de la base MySQL du site WordPress

Merci d’héberger votre site en ligne dans la mesure du possible et de fournir l’URL à votre mentor. Il doit rester disponible jusqu’à l’examen de votre dossier par le jury.

Nous vous conseillons d’investir dans un hébergeur, avoir votre portfolio en ligne vous servira plus tard !  Notre partenaire 1&1 offre 2 mois d’hébergement gratuits aux étudiants pour toute souscription à un pack d’hébergement. Certains de nos étudiants utilisent aussi Planet Hoster ou OVH. Vous êtes bien sûr libre d’utiliser tout autre hébergeur de votre choix.

Si vous ne souhaitez pas ou ne pouvez pas payer un hébergeur, vous pouvez utiliser un hébergeur gratuit. Attention cependant, vous devrez faire avec les limitations (la plupart de ces hébergeurs ne prennent pas en charge PHP 7) et les problèmes de fiabilité. Voici quelques exemples : Heroku, Hostinger, Free, Nexgate, etc.

N’hésitez pas à demander conseil à votre mentor si vous avez des difficultés à choisir votre hébergeur.

Soutenance

Pour cette soutenance, vous devrez vous positionner comme un développeur freelance présentant son travail au responsable communication et marketing de l’office de tourisme (le mentor), pendant 25 minutes.

  • La présentation de votre projet : 20-25 minutes
  • Un moment questions/réponses avec le mentor : 5 minutes

Compétences à valider

  • Assurer la comptabilité avec les navigateurs du marché
  • Renseigner les balises HTML5 utiles pour le référencement
  • Concevoir un thème personnalisé WordPress
  • Assurer l’accessibilité des applications sur les différents types de terminaux (portables, tablette)
  • Vérifier la conformité aux normes d’accessibilité

Voir le site ici : Le Site De Strasbourg By OC