Projet

CW AC

🦆

Communication Web Académique

Contexte général

Vous faites partie du service informatique d'une école et on vous a chargé d'un projet, nom de code : Communication Innovante - Conception Internet (COIN-COIN). Il s'agit de créer un site Web pour la communication de l'école.

Vous devez inventer une l'école, avec un nom, un slogan et une identité visuelle. Durant le projet, vous allez produire un texte argumentatif, un site Web pour l'école, un rapport et préparer une présentation orale pour présenter vos travaux.

Cette page 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 d'école qui vous plait à tous les deux.

• Séance 1 (communication) : réflexion sur votre école et préparation du texte argumentatif.

• Séances 2 à 5 (Web) : création du site Web.

• Jeudi 30 novembre : Rendu du projet (site + rapport).

• Séance de préparation à l'oral : préparation des diapositives et de la présentation (début janvier).

• Oral : en dernière semaine du semestre.

Pour les dates de rendu, voir la section Rendu.

Consignes générales :

⚠ Ce site est la seule référence pour les consignes. Si vous avez un doute, vous devez nous demander.

• C'est normal que vous ne sachiez pas tout faire. N'hésitez pas à faire des recherches sur Internet, regarder d'autres sites, nous poser des questions...
• Vous devez suivre les bonnes pratiques vues en cours même si le sujet ne le précise pas. Par exemple, pensez à la lisibilité, à la validation W3C...
• Vous avez de la liberté sur le contenu, mais il faut respecter rigoureusement les consignes du sujet (c'est votre cahier des charges). Vous pouvez aller au-delà (voir section Notation) mais sans aller à l'encontre des consignes.
• Vous devez conserver une sauvegarde commune de votre projet (je recommande le cloud de l'IUT et sauvegarder votre travail après chaque séance.

Travail en groupe :

• Pas de changement de partenaire, sauf situation exceptionnelle et avec notre autorisation.
• En cas d'absences non justifiées ou si nous voyons que la participation est inégale, nous pouvons décider de mettre des notes différentes aux membres du projet.
• En cas d'absence, vous devez prévenir vos partenaires 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. Vous devez citer leur origine dans le rapport. Il faut que nous puissions retrouver l'original (le site, pas le moteur de recherche). Si vous l'avez adaptée ou modifiée, dites-le. Bien sûr, ne récupérez pas des pages entières (ça se voit).
• Si vous utilisez du code externe sans le signaler, nous considèrerons que vous n'avez rien fait sur la partie concernée.
• Vous ne pouvez pas réutiliser du code d'autres projets (cette année ou années passées).

Choix du sujet

L'école

Avant la première séance, choisissez entre vous une école (mot à 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.)
• surréalistes (il faut que vous puissiez expliquer l'utilité de l'entreprise)

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 : qui sont les étudiants intéressés ? Qui voudront les recruter ? Qu'est-ce qui différencie votre école des autres ? etc.

Demandez-nous si vous avez un doute.

Identité visuelle

Vos productions (site, rapport, diapos) doivent avoir une identité visuelle commune; elles doivent faire apparaître :

1. Le nom de l'école.
2. Une image qui servira de logo (ne faites pas compliqué).
3. Un sous-titre ou slogan.
4. Deux couleurs majeures (définies par un code RGB / hexa).
5. 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

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

Première page : accueil

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

Elle contient un texte argumenté présentant votre entreprise (plus de détails en partie Communication). Les différents paragraphes doivent être visuellement séparés (pas de gros blocs de texte). La page doit contenir une grande image de fond et votre logo affiché en grand.

Elle doit aussi contenir une vidéo venant d'un fourniseur de votre choix : framatube, youtube, dailymotion... (on ne regarde pas la pertinence).

Deuxième page : formation

Cette page propose différents cours / formations / filières (au moins trois), chacun dans un bloc indépendant. Chaque bloc doit contenir :

• Le nom ainsi qu'une courte description ;
• Une image ou une icône.
• Au moins une info (crédits, pré-requis, prix...) hors du texte ;

Les informations doivent être présentées de manière cohérente entre les blocs, et il doit être facile de rajouter un bloc si nécessaire. Autrement dit, il ne faut pas que chaque bloc ait beaucoup de CSS spécifique. L'usage de Flexbox ou des grilles CSS est recommandé.

Troisième page : contact

Cette page sert aux informations de contact et d'accès. Elle contient :

• Des informations de contact (adresse, téléphone, mail - vous pouvez tout inventer).
• Une carte pointant sur l'entreprise, en passant par un service externe (OpenStreetMaps ♡, Google Maps, Bing Maps...) C'est à vous d'aller vous renseigner sur leur site.
• Un formulaire de contact inactif (appuyer sur le bouton ne fait rien). Il doit permettre au visiteur de sélectionner une formation qui l'intéresse, d'indiquer ses informations de contact, et de laisser un message.

Pied de page

Chaque page contient un pied de page contenant la liste des membres du projet et des liens vers votre rapport aux formats traitement de texte et au format pdf.

Site Web - spécifications

Spécifications techniques

1. 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.
2. Le site doit passer la validation W3C. S'il reste une erreur ou un avertissement, indiquez-le dans le rapport.
3. L'image du logo et un titre doivent apparaître dans l'onglet du navigateur.
4. Le site utilise l'espace disponible et doit rester utilisable sur toute taille d'écran entre 350px et 1600px. Il faut utiliser au moins une requête média pour changer la mise en page d'un bloc.
5. A un endroit dans votre site, il y a du texte sur une image.

Gestion de projet

1. Le projet est organisé en sous-dossiers, et le CSS en plusieurs fichiers, de manière logique.
2. Les noms (classes, fichiers, dossiers, images...) sont clairs.
3. Pas de code mort, de code dupliqué inutilement (dans le CSS), ou de fichier inutilisé.

Texte argumentatif

Vous devez rédiger deux textes :

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, matières spécifiques enseignées...

Il faut aussi montrer 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 de l’école est à rendre au professeur de Communication, à la suite de la 1ère séance de Projet Web, de manière manuscrite. Vous pouvez (facultatif mais recommandé) déposer une deuxième version améliorée sur Moodle pour la date de rendu du projet.

Argumentation : Rédigez un développement pour expliquer à trois interlocuteurs différents les atouts de votre école :

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.

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

Le travail (environ 2 pages) est à rendre sur Moodle fin novembre le 8 décembre avec le reste du projet.

Rapport

Le rapport est un court document qui indique quelques informations technique ; ne cherchez pas à expliquer le site ou l'école en détail.

Il doit contenir les informations suivantes :

• Une page de garde qui comprend : vos noms, votre groupe, le nom et le logo de l'entreprise, le 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, polices et logos que vous avez choisi d'utiliser dans les trois documents. Indiquez rapidement à quels endroits ils 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 l'ignorer.
• La répartition du travail (qui s'est chargé de quelle page - on ne demande pas d'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.

On ne demande pas que le rapport soit 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

Vous aurez en janvier une séance de préparation à l'oral puis l'oral lui-même. Il n'est pas demandé de préparer de diapositives.

La soutenance orale dure 10 minutes pour l’ensemble du groupe. Ensuite, le jury posera 5 minutes de questions. Vous veillerez à ce que le temps de parole soit distribué équitablement au sein du groupe.

1. Vous présentez d'abord le projet : contexte, objectifs.
2. Vous détaillez les différentes étapes de la réalisation du projet. 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, les impasses). N’hésitez pas à mettre en avant une réussite dont vous êtes particulièrement fier lors de ce projet.
3. Enfin, vous effectuez un bilan technique et humain du projet, c'est-à-dire que vous expliquez ce que la réalisation de ce projet vous a apporté en termes de compétences et de qualités (lesquelles ont été développées, lesquelles ont été simplement renforcées ?)

Vous avez la possibilité de faire une démonstration du sité élaboré (ou tout autre démonstration qui vous semble opportune).

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

Demander et trouver 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, envoyez votre code ou donnez un lien.
3. Essayez d'être le plus clair possible : quelle page est concernée, quel est le nom du bloc, 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. Nous ne répondons pas forcément immédiatement. 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 du projet : jeudi 30 novembre au soir pour le site Web et le rapport (les projets sont récupérés automatiquement le lendemain matin). Vendredi 8 décembre pour le texte argumentatif sur Moodle.

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

Spécifications

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 cwac (pas de majuscules).

Si vous avez bien fait les choses, le site ou la redirection doit être visible à l'adresse :

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

Si cette adresse n'est pas accessible, votre rendu n'est pas fini. Ne laissez que votre rendu / redirection et pas d'anciennes versions.

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 donc pénalisés sur votre note individuelle.

Retards

Si vous rendez en retard, vous devez nous envoyer un mail pour nous prévenir, et de nouveau quand vous faites le rendu. La pénalité sont de 0.5pt par jour de retard, mais nous vous donnerons un délai gratuit et moins de pénalité si vous nous avez prévenus professionellement à l'avance.

Critères d'évaluation

Web (2/3 de la note finale)

Groupes

Les membres du groupe pourront avoir des notes différentes si la situation le justifie (absences répétées, répartition inégale du travail).

Si vous avez fait le projet seul (pour tout ou une partie), vous aurez un bonus en compensation pouvant aller jusqu'à 2,5 pts. A l'inverse, les trinômes sont notés plus sévèrement (environ -2 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 coeur du projet : respecter le cahier des charges.

Communication (1/3 de la note)

Textes (10 pts)

Oral (10 pts)

Respect du temps de parole : 1 pt