Projet COM.WAVE

🦆

🦆

🦆

🦆

COMmunication Web pour une Agence de Voyage

Contexte général

Vous participez à la création d'une agence de voyages innovante. Comme c'est une start-up, vous gérez à la fois la communication, le marketing, et la création du site Web.

Vous devez concevoir un projet (fictif) d'agence de voyages, avec beaucoup de liberté sur les lieux visités. Vous lui choisirez un nom, un slogan et une identité visuelle. Durant le projet, vous produirez des textes argumentatifs pour expliquer votre projet et un site Web qui le présente, plus un petit rapport technique et une présentation orale finale.

Cette page Web contient toutes les consignes du projet ; c'est votre seule référence.

Responsables du projet :

• Communication : Caroline Covas et Jean-Michel Ledjou.
• Web : Benjamin Hellouin de Menibus.

Organisation et planning

Ce projet se fait en binômes (sauf quelques exceptions). Vous pouvez trouver votre groupe ici.

Planning

• Avant la première session : discutez avec votre binôme et choisissez un thème qui vous plait à tous les deux.

• Deux séances de communication où vous réflechissez à votre projet et préparez des textes argumentatifs

  1. Présentation de l'agence et de son originalité
  2. Quel voyage pour quel profil de voyageur ?

• Quatre séances de Web : création du site Web.

  1. Réflechir à l'apparence du site (maquettes sur papier, voir d'autres sites, polices...) et préparer le contenu (textes, images). Commencer le code en fin de séance.
  2. Ecrire la structure de chaque page et commencer la mise en page.
  3. Terminer les pages manquantes et travailler l'apparence.
  4. Rédiger le rapport, gérer les détails techniques (validation, adaptatif, rangement...). Vérifier qu'on sait comment déposer.

• Vendredi 28 novembre : rendu de la partie Web (site + rapport).

• Fin décembre / début janvier une séance de préparation à l'oral + soutenances.

Pour plus de détails, voir la section Rendu.

Consignes générales

⚠ Ce site est la seule référence pour les consignes. Si le sujet n'est pas clair, vous devez demander à votre chargé de TP ou au responsable Web.

• Vous ne savez pas tout faire ; vous êtes là pour apprendre. Faites des recherches sur Internet, regardez d'autres sites, posez-nous des questions...
• Suivez les bonnes pratiques vues en cours même si le sujet ne le précise pas. Par exemple, pensez à la lisibilité, à la validation W3C...
• Respectez à la lettre les consignes du sujet / cahier des charges, mais vous pouvez toujours faire plus (voir section Notation).
• Conservez une sauvegarde commune de votre projet (on recommande le cloud de l'IUT) et sauvegardez votre travail après chaque séance.

Travail en groupe :

• Pas de changement de partenaire, sauf situation exceptionnelle et avec notre autorisation.
• Les notes dans le groupe peuvent être différentes, par exemple en cas d'absences non justifiées ou de participation inégale.
• En cas d'absence / retard, vous devez prévenir votre binôme immédiatement et rattraper votre travail plus tard.
• Si vous avez un problème avec votre binôme, vous devez nous en parler avant la fin du projet. Nous serons vigilants à ce qui se passe dans votre groupe, et nous vous aiderons à trouver une solution.

Ressources externes :

• Vous pouvez utiliser des ressources externes (code, images, texte...) de manière raisonnable ; pas des pages entières déjà faites. Citez vos sources dans le rapport : la page Web (pas le moteur de recherche), le modèle d'IA générative avec son instruction (prompt). Indiquez si vous avez adapté ou modifié ce que vous utilisez.
• Vous pouvez utiliser des ressources qui n'ont pas de licence permissive (le projet n'est pas publié).
• Si vous utilisez des ressources externes sans source, on ne valorisera pas cette partie-là.

Choix du sujet

Le projet

Avant la première séance, choisissez un projet d'agence de voyages, à prendre au sens large. Le projet peut être réaliste ou imaginaire, sérieux ou parodique, et il doit avoir une composante originale.

Quelques exemples : visiter des bases militaires ultrasecrètes ; randonnées en groupe dans Minecraft ; faire du voilier sur un trou noir, etc. Le but est que le sujet vous plaise ; ça n'a pas d'impact sur votre note.

Evitez des sujets provocateurs (insultants, inconfortables, etc.) ou trop surréalistes (il faut que vous puissiez expliquer et argumenter).

Pour préparer la première séance, réflechissez à votre projet : qui est votre public ? Qu'est-ce qui différencie votre agence des autres ? etc.

Identité visuelle

Vos trois productions (site, rapport, diapos) doivent partager :

1. Un nom et un sous-titre ou slogan.
2. Une image qui servira de logo (on ne demande pas de le créer soi-même).
3. Deux couleurs majeures (que vous donnerez et utiliserez par code RGB ou hexa).
4. Deux polices (par exemple : textes / titres).

Site Web - contenu

Votre site Web contiendra plusieurs pages (fichiers HTML différents qui peuvent partager des fichiers CSS). Chaque membre du projet choisit une page dont il est personnellement responsable et le reste est fait en commun. Cela ne vous empêche pas de vous entraider et de partager du CSS pour avoir la même identité visuelle.

Menu de navigation et pied de page

Chaque page contient un menu de navigation dans lequel votre nom et logo apparaissent et qui permet d'aller sur toutes les pages. L'apparence du menu est similaire entre les pages. Cliquer sur le logo renvoie à la page d'accueil.

Le pied de page contient la liste des membres du projet, des liens vers votre rapport aux formats traitement de texte et au format pdf, et le logo de l'IUT, sur deux colonnes (ou plus). Il apparait sur toutes les pages.

Première page : les voyages

Il s'agit de la page sur laquelle les visiteurs arrivent automatiquement.

Cette page propose au moins trois options (destinations, plans...) proposées par l'agence. Pour chaque option, on trouve :

• Un nom ;
• Une description ;
• Une image ou une icône ;
• Un profil-cible avec une liste d'arguments (travail fait en communication) ;
• Des informations factuelles comme un prix et une durée, ou similaire ;

Ces éléments sont visuellement clairement séparés : on ne veut pas avoir toutes les infos dans un bloc de texte.

Chaque option apparait dans un bloc différent mais avec une structure similaire, et il doit être facile de rajouter un bloc. Autrement dit, il ne faut pas que chaque bloc ait beaucoup de CSS spécifique.

Deuxième page : réservation

Cette page permet de passer une réservation pour un des voyages proposés.

Elle donne une liste de guides / pilotes / accompagnateurs... qui peuvent être les membres du projet, avec une photo (pas forcément une vraie photo).

Elle doit contenir un formulaire de réservation qui permet au visiteur de choisir dans une liste une option de voyage, un choix de guide / pilote, et une date, ainsi que d'autres infos que vous pensez nécessaires. Il n'est pas demandé que le formulaire fasse quelque chose quand on appuie sur le bouton.

En bas de la page, elle contient l'adresse de l'agence et une carte interactive OpenStreetMaps pointant vers le bon endroit

Troisième page : à propos de nous

Cette page donne des informations sur votre agence et explique en quoi elle est différente des autres. On utilisera les idées travaillées en séance de communication.

Elle présente deux ou trois paragraphes courts, visuellement séparés, expliquant l'originalité de l'agence, avec une différence entre chaque paragraphe (alignement, couleur de fond...).

Elle donnera aussi des éléments factuels sur l'agence (date de création, directeur ou directrice, etc.). Trouvez une manière claire et visuellement agréable de donner ces informations sans gros bloc de texte.

Cette page doit contenir, à un endroit, une grande image de fond (au moins la moitié de la largeur de la page) sur lequel est placé un autre élément (texte, image...). On doit aussi trouver une grande version de votre logo accompagné de votre slogan.

Site Web - spécifications

Spécifications techniques

1. Le site doit passer la validation W3C. S'il reste une erreur ou un avertissement, indiquez-le dans le rapport.
2. Les polices doivent s'afficher correctement même si la police n'est pas installée chez l'utilisateur (en utilisant @font-face dans le CSS). Vous ne devez pas dépendre d'un site de polices externes.
3. Le logo et un titre doivent apparaître dans l'onglet du navigateur sur toutes les pages.
4. Le site doit rester utilisable sur toute taille d'écran entre 400px et 1600px de large, en utilisant l'espace disponible à toutes les tailles (pas de grand espace laissé vide). Il faut utiliser au moins une requête média pour changer la mise en page.
5. Le texte de votre site Web ne doit pas pouvoir dépasser 60 caractères de large environ, et vous devez choisir des couleurs qui font un bon contraste.
6. Vous devez utiliser à au moins un endroit Flexbox ou Grid pour de la mise en page.

Gestion de projet

1. Choisissez les éléments HTML (voir la doc) et les sélecteurs CSS appropriés ; pas d'éléments obsolètes.
2. Organisez votre projet en sous-dossiers, et le CSS en plusieurs fichiers, de manière à ce qu'on s'y retrouve facilement.
3. Choisissez des noms (classes, fichiers, dossiers, images...) clairs. Par exemple, en lisant le nom d'une image, on doit comprendre où elle est utilisée.
4. Ne laissez pas de code mort, de code dupliqué inutilement (dans le CSS) ou de fichier inutilisé.

Textes argumentatifs

Séance 1 : Présentation

Réaliser une présentation écrite de votre agence de tourisme par groupe.

1. Donner le nom, le lieu du siège social mais aussi des différentes antennes s’il y en a, la date de création, le nom du directeur(rice), du (de la) responsable des séjours, le type de séjours/la thématique (séjours en haute montagne, séjours spécialisés sur l'Australie, séjours romantiques).
2. En quoi votre agence de tourisme est-elle originale ? Pourquoi se démarque-t-elle des autres agences de tourisme déjà existantes (donner un descriptif, réel ou inventé, des agences de loisirs déjà présentes)

Travail évalué à rendre à la fin des 2h : 1 recto / verso.

Une version synthétisée de cette argumentation doit se retrouver en page 1 de votre site.

Séance 2 : Argumentation

Réaliser un développement en 3 parties distinctes pour expliquer à trois profils de voyageurs différents que vous choisirez, les atouts de vos séjours. Il s’agit ici de donner des arguments convaincants.

Exemple de profils : séjour à destination des adultes seuls ou en couple à destination des familles, à destination des entreprises pour leurs salariés.

Il faut 3 arguments PAR cible. N’oubliez pas d’adapter le niveau de langage en fonction des interlocuteurs.

Travail évalué à rendre à la fin des 2h.

Vous utiliserez ces arguments en page 2 de votre site.

Rapport

Le rapport est un document court qui indique quelques informations techniques ; ne cherchez pas à expliquer tout le projet en détail.

Vous avez le choix de format / logiciel mais la version rendue doit être un fichier local, pas un lien vers un service externe.

Il doit contenir les informations suivantes :

• Une page de garde qui comprend : noms, groupe, nom et logo de l'entreprise, logo de l'IUT.
• Une table des matières, faite automatiquement (pas à la main).
• Une introduction d'un paragraphe qui explique ce qu'est ce document.
• Les couleurs et polices utilisées dans vos documents (identité visuelle). Indiquez en quelques mots à quels endroits elles sont utilisés.
• La liste des sources de toutes les ressources externes que vous réutilisez ou dont vous vous êtes inspirés (voir la partie Consignes) : images, polices, code...
• Compte-rendu de validation W3C (HTML et CSS) : reste-t-il des erreurs ? Si oui, dites une phrase sur ce que vous avez fait pour essayer de les résoudre, ou pourquoi vous avez choisi de les ignorer.
• La répartition du travail (qui s'est chargé de quelle page - sans entrer dans tous les détails)

La page de garde doit être un peu soignée. Il doit y avoir des numéros de page automatiques (sauf en page 1) et des en-têtes avec le nom des auteurs. Votre logo doit apparaître sur chaque page en en-tête ou en pied de page.

Le rapport n'a pas forcément à être très joli (ça peut être du bonus), mais la présentation doit être cohérente et professionnelle. Relisez votre rendu et évitez les changements de style ou les trous dans le texte sans raison.

Oral

La soutenance orale dure 10 min pour l’ensemble du groupe. Ensuite le professeur de communication pose 5 min de questions. Vous veillerez à ce que le temps de parole soit distribué équitablement au sein du groupe. Vous vous appuierez sur votre site internet pour expliquer votre travail. On insiste ici sur votre démarche de construction du site avec ses difficultés et ses solutions trouvées (vous ne devez pas passer en revue tous les séjours touristiques).

Ne pas réaliser de diaporama ; ne pas lire ses notes.

1. Déroulement du travail de groupe : choix du thème, répartition du travail et les difficultés collectives rencontrées et leurs solutions.
2. Chaque membre du groupe présentera le travail qu'il a réalisé. Vous mentionnez les réussites, les écueils (difficultés rencontrées et solutions trouvées, impasses). N’hésitez pas à mettre en avant une réussite dont vous êtes particulièrement fier.
3. Enfin, vous effectuez individuellement un bilan technique et humain du projet, c'est-à-dire que vous expliquez ce que la réalisation de ce projet vous a apportés en termes de compétences techniques (informatiques notamment) et de qualités (lesquelles ont été développées, lesquelles ont été simplement renforcées).

⚠ N’oubliez pas qu’il s’agit d’un exercice oral qui doit susciter l’intérêt de l’auditoire. Vous veillerez donc à ciseler votre discours de façon à le rendre éloquent.

Votre discours ne doit pas utiliser de termes techniques sans les avoir expliqués (ex : « j’ai réalisé le responsive », il faut expliquer à un non informaticien ce qu’est « un responsive »). Attention aussi à tout terme jargonneux (ex : ne pas dire « nav barre » mais « barre de navigation ».)

Soignez la lisibilité et l'orthographe.

Pas de téléphone portable le jour de l’oral. Vous pouvez avoir une feuille de notes.

Demander de l'aide

Comment poser des questions ?

1. Posez votre question dès le premier mail ou message, n'attendez pas l'autorisation (❌ "Bonjour Monsieur, puis-je vous poser une question sur le projet ?").
2. Si votre question porte sur du code, joignez votre code ou un lien vers votre code.
3. Essayez d'être le plus clair possible : quelle page ou quel bloc est concerné, qu'est-ce qui ne marche pas, que voulez-vous faire... Une capture d'écran peut être utile mais ne remplace pas une explication.
4. Plus votre question est facile à comprendre et contient les informations, plus vite vous aurez une réponse !

• Communication : Caroline Covas et Jean-Michel Ledjou.
• Web : Benjamin Hellouin de Menibus.

Consignes de rendu

Rendu de la partie Web : vendredi 28 novembre au soir (ramassés automatiquement dans la nuit du 29 novembre).

Spécifications

Le site et le rapport doivent être déposés sur https://webdev.iut-orsay.fr/. Vous êtes responsables de tester à l'avance la procédure de dépôt qui est indiquée là-bas et de nous signaler les problèmes par mail (avec une capture d'écran et une explication du problème).

Un des membres doit rendre le projet, les autres membres déposent une redirection automatique vers l'adresse du projet

Si vous n'arrivez pas à faire une redirection, mettez une page contenant un lien.

. Tous les rendus sont faits dans un sous-dossier nommé comwave (pas de majuscules).

Si vous avez bien fait les choses, le site ou la redirection doit être visible à l'adresse suivante (login = votre login) :

https://webdev.iut-orsay.fr/~login/comwave

Si cette adresse n'est pas accessible, votre rendu n'est pas fini. Ne laissez dans comwave que votre rendu / redirection et pas d'autres versions ou de fichiers inutilisés.

Si vous n'y arrivez pas, partagez un dossier du cloud de l'IUT avec nous.

Si les consignes de rendu ne sont pas respectées, cela nous donne plus de travail, et vous serez pénalisés sur votre note individuelle.

Retards

Si vous rendez en retard, vous devez nous envoyer un mail à l'avance pour nous prévenir, et nous prévenir quand vous faites le rendu.

Si vous nous prévenez professionellement avant le jour J, vous aurez un délai gratuit et moins de pénalité. Sinon, la pénalité est de 0,5pt par jour de retard.

Critères d'évaluation

Web (2/3 de la note finale) -- version non définitive

Groupes

Les membres du groupe peuvent avoir des notes différentes (absences répétées, répartition inégale du travail).

Si votre binôme abandonne en cours, vous aurez un bonus en compensation pouvant aller jusqu'à 2,5 pts (projet entier seul).

Les trinômes sont notés plus sévèrement (-1,5 pts si vous avez fait le projet entier à trois), mais vous pouvez toujours avoir 20/20 avec le travail supplémentaire.

Travail supplémentaire

Un rendu de bonne qualité qui respecte tout ce qui est demandé vous donnera une très bonne note. Pour des points supplémentaires, vous pouvez pousser plus loin certains aspects du sujet : améliorer encore la finition et l'apparence, faire une page en plus, ajouter un menu déroulant ou des animations CSS...

Nous voulons récompenser votre créativité et les aspects que vous voulez mettre en avant, mais cela ne doit pas remplacer le cœur du projet : respecter le cahier des charges.

Communication (1/3 de la note)

Textes (10 pts)

Oral (10 pts)