Projet

CW AC

🦆

🎓

Communication Web Académique

Contexte général

Dans le cadre de la création d'une école (fictive), vous êtes responsable de l'équipe COIN-COIN (COnception INnovante de COmmunication INternet). Il s'agit de créer un site Web et du matériel de communication pour l'école.

Vous devez inventer un projet d'école, avec 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 exception). 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 (plus de détails).

  Les textes rédigés.

• Quatre séances de Web.

  1. Lire le sujet, noter les tâches à faire. Réflechir au site voulu (que mettre sur chaque page, maquettage rapide, regarder d'autres sites...) et à l'identité visuelle (couleurs majeures, polices, images). Première répartition des tâches.
     Collectivement, notes pour le rapport avec ces informations + sources des images choisies.
  2. Structure HTML des pages. Début du CSS.
     Individuellement, une page sur laquelle vous travaillez (au moins la structure HTML bien entamée).
  3. Travail sur le HTML - CSS.
     Individuellement, la où les pages sur lesquelles vous travaillez + premier rapport de validation.
  4. Rédiger le rapport, gérer les détails techniques (validation, adaptatif, rangement...). Vérifier qu'on sait comment déposer.
     Collectivement, rendu final.

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

• Fin décembre / début janvier séance de préparation + soutenances orales. Plus de détails

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.
• Respectez à la lettre les consignes du sujet / cahier des charges, en nous demandant si ce n'est pas clair. Vous avez le droit de 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, 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

L'école

Avant la première séance, choisissez entre vous une école (à prendre au sens large : centre de formation, université, etc.) qui peut être réaliste ou complètement imaginaire, sérieuse ou parodique...

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

Le but est que le sujet vous plaise ; ça n'a pas d'impact sur votre note.

Pour préparer la première séance, réflechissez à votre projet : comment s'appelle l'école ? Où est-elle ? Quels diplômes propose-t-elle ? Qui sont les étudiants intéressés ? Qui voudront les recruter ? Qu'est-ce qui différencie votre école des autres ?

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 fournirez 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). Vous choisirez la répartition des tâches mais chaque membre du projet a une page dont il est personnellement responsable. 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. Les éléments du menu changent d'apparence (couleurs de fond, soulignement...) quand la souris passe dessus.

Le pied de page contient, sur deux colonnes (ou plus): 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. Il apparait sur toutes les pages.

Première page : présentation

Les visiteurs doivent arriver automatiquement sur cette page.

Elle donne une présentation rapide de l'école avec quelques informations, puis une explications des atouts de votre école pour plusieurs types de visiteurs (Séance 2 de communication).

Les informations doivent être données de manière claire sans gros bloc de texte.

Les paragraphes d'explication doivent être visuellement séparés avec une différence entre chaque paragraphe (alignement, couleur de fond...).

Cette page doit contenir une grande version de votre logo accompagné de votre slogan.

Deuxième page : les diplômes / formations

Cette page propose au moins trois options (diplômes, formations...) proposées par l'école.

Chaque option apparait dans un bloc différent mais avec une structure similaire, et il doit être facile de rajouter un bloc

Pour chaque option, on trouve :

• Un nom ;
• Une description courte ;
• Une image ou une icône ;
• Un tableau ou une liste (différentes matières, années...)
• Une information factuelle comme un prix ou une durée.

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

Deuxième page : candidature

Cette page permet de poser sa candidature pour une des formations proposés.

Elle contient un formulaire de candidature. Le visiteur peut choisir dans une liste une des formations offertes (de la page 2) et fournir les informations personnelles que vous pensez nécessaires. Le formulaire permet de déposer une lettre de candidature, uniquement au format pdf. Le formulaire est inactif (Il n'est pas demandé que le bouton de soumission fasse quelque chose).

La page indique l'adresse de l'école et une carte interactive OpenStreetMaps pointant vers le bon endroit

La page contient, à 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...).

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 entre horizontal et vertical.
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.
7. Vous devez utiliser des variables CSS pour utiliser vos couleurs majeures.

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 de manière à ce qu'on s'y retrouve facilement. De même, organisez votre CSS en plusieurs fichiers pour qu'on trouve facilement le CSS pour chaque élément.
3. Choisissez des noms (classes, fichiers, dossiers, images...) clairs. Par exemple, avec le dossier et le nom d'une image, on doit comprendre où elle est utilisée.
4. Ne laissez pas de code mort, de code dupliqué sans raison (dans le CSS) ou de fichier inutilisé.

Texte argumentatif

Séance 1 : Présentation

Réaliser une présentation écrite de votre école par binôme.

• Description générale : Présentez l’école que vous avez créée en mentionnant le nom, le lieu, la date de création, le nom du directeur(rice), du (de la) responsable pédagogique, le type de cours, la tranche d’âge concernée. Donnez des détails et expliquez le concept de votre école.
• Détaillez bien 3 cursus proposés dans l’école : cours dispensés dans chaque cursus, spécificités, public ciblé etc.
• Montrez en quoi votre école est originale : pourquoi se démarque-t-elle des autres écoles présentes (donner un panorama, réel ou inventé, des écoles déjà existantes, qu’elles soient dans le même domaine que votre école ou dans un autre domaine).

Cette présentation est à rendre à la fin de la 1ère séance et compte pour 10 points.

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

Séance 2 : Argumentation

1. les partenaires et sponsors
2. les élèves et les parents d’élèves
3. les entreprises (ou autres) qui pourraient recruter les élèves par la suite.

Vous devez rédiger 3 paragraphes distincts dans lesquels vous adapterez vos arguments à chaque cible. On demande 3 arguments par cible. Vous pouvez appuyer vos arguments sur des informations ou des chiffres inventés, surtout si votre projet est imaginaire.

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

Vous utiliserez ces arguments en page 1 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

Une recherche rapide "redirection HTML" devrait vous aider.

.

Le site ou la redirection doit être visible à l'adresse suivante (login = votre login) :

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

Si cette adresse n'est pas accessible, votre rendu n'est pas fini. Ne laissez dans ce dossier cwac 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)

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...

Poussez les aspects qui vous intéressent, mais attention à bien respecter le cahier des charges.

Communication (1/3 de la note)

Textes (10 pts)

Oral (10 pts)