Projet

Contexte général

Vous faites partie de COIN, une petite entreprise de développement Web. Avec vos collègues, vous formez l'équipe de Communication Innovante - Conception Internet (COIN-COIN).

Une start-up vous a embauchés pour mettre en place sa communication sur le Web. C'est à vous de choisir le nom de la start-up, son produit-phare, son logo...

Votre mission : choisir une charte graphique, un site Web comprenant plusieurs pages, des textes argumentatifs pour expliquer les objectifs de la start-up, un rapport qui explique vos productions et des diapositives pour une présentation orale.

Responsables du projet :

Organisation et planning

⚠ Valérie Fabre étant en arrêt maladie, certaines séances ne seront pas encadrées.

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

Pour ce projet, vous aurez:

Planning recommandé

Vous êtes autonomes pour diriger votre projet. Les dates ci-dessous ne sont que des suggestions de votre niveau d'avancement après chaque session.

A la dernière séance, pensez à relire le sujet pour vérifier que vous n'oubliez rien. Il vous reste du temps avant de rendre si nécessaire.

Les deux créneaux en janvier sont dédiés à préparer les diapositives et l'oral ; ce n'est pas la peine de commencer avant janvier.

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.

Les consignes du sujet sont un cahier des charges ; il faut les respecter en détail (cela fait partie de la notation) mais vous pouvez toujours ajouter des choses non demandées (plus de détail en section Notation.

Ressources externes :

Bin√īmes

Choix du sujet

L'entreprise

Vous choisissez une entreprise fictive concentrée sur un ou deux produits ou concepts. Votre entreprise peut être :

Le but est que le sujet vous plaise et que vous puissiez en parler de manière crédible. Votre site sera visible par toute la promotion. Evitez donc des sujets :

Demandez-nous si vous avez un doute.

Identité visuelle

Dés la première séance, vous commencerez à définir l'identité de l'école :

  1. Un nom.
  2. Une image qui servira de logo.
  3. Un sous-titre ou slogan (du type "Notre qualité c'est l'excellence").
  4. Au moins deux couleurs majeures (en RGB) à utiliser sur le site et le rapport.
  5. Au moins deux polices (textes / titres).

Site Web - général

Votre site Web contiendra plusieurs pages (fichiers HTML différents qui peuvent partager des fichiers CSS) et un menu de navigation qui permettra de passer d'une page à l'autre.

Toutes les pages du site doit contenir le nom de l'entreprise, le logo et le menu de navigation, situés comme vous le souhaitez.

Chaque page doit avoir un pied de page contenant la liste des membres du projet ainsi qu'un lien vers votre rapport aux formats traitement de texte et au format pdf.

Spécifications :

  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).
  2. Le site doit passer la validation W3C.
  3. L'image du logo et un titre doivent appara√ģtre dans l'onglet du site.
  4. Le site doit utiliser l'espace disponible et rester utilisable sur une 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, vous devez avoir du texte sur une image.
  6. Le code du projet doit être bien rangé (pas de redondance ou de code mort) et bien formaté.

Si les autres spécifications sont faites, un exemple de travail supplémentaire est d'ajouter au menu de navigation un menu déroulant fait en HTML+CSS qui permet de choisir à quel endroit de la page on arrive. Vous pouvez tenter de le faire vous-même avec ce que vous avez appris et la pseudo-classe :hover, ou bien vous inspirer d'exemples sur Internet (en les citant dans votre rapport !)

Site Web - page à page

Première page: accueil

Les visiteurs doivent arriver automatiquement sur cette page (index.html).

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 avoir à un endroit 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... Elle peut être pertinente ou non.

Deuxième page : produits

Cette page propose différents produits ou services proposés par votre entreprise (au moins trois), chacun dans un bloc indépendant. Chaque bloc doit contenir :

Les deux aspects les plus importants sont que les informations doivent être présentées de manière cohérente entre les blocs, et qu'il doit être facile de rajouter un bloc si nécessaire (copier-coller + modifications mineures). Autrement dit, il ne faut pas que chaque bloc ait beaucoup de CSS spécifique.

Vous pouvez utiliser ici des outils vus en cours de Web comme flexbox ou les grilles CSS.

Troisième page : contact

Cette page sert aux informations de contact et d'accès. Elle contient dans l'ordre que vous voulez :

Le formulaire doit permettre au visiteur d'indiquer son nom, adresse mail et message et de sélectionner une personne à contacter. Le formulaire est décoratif : vous verrez comment faire des formulaires actifs plus tard. Vous devez trouver et utiliser les éléments HTML appropriés.

La carte doit utiliser un service externe tel que OpenStreetMaps ♡, Google Maps, Bing Maps... C'est à vous d'aller vous renseigner sur leur site.

Texte argumentatif

⚠ Suite à l'indisponibilité de la responsable communication, cette partie est très réduite.

Pour le texte de la première page, vous pouvez simplement écrire une description de votre entreprise en trois paragraphes au moins. Ce texte ne sera pas noté.

Rapport

Le rapport est un court document qui indique quelques informations qui n'ont pas leur place dans le site ; il ne faut pas tout expliquer.

Il doit contenir les informations suivantes :

Le rapport doit contenir une page de garde √† la pr√©sentation soign√©e, contenant le logo du sujet ainsi que le logo de l'IUT. Il doit contenir une table des mati√®res faite automatiquement, des num√©ros de page (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 il doit être professionnel. Relisez votre rendu et corrigez les changements de style ou les trous dans le texte sans raison.

Diapositives et oral

Les diapositives seront à faire en janvier dans la séance de préparation à l'oral.

Vous devez réaliser un diaporama sur le projet COIN élaboré par votre groupe. Vous vous positionnez en tant que concepteurs du site.

  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é.
  3. Vous mentionnez les réussites, les écueils (difficultés rencontrées et solutions trouvées, les impasses).
  4. 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és en termes de compétences et de qualités (lesquelles ont été développées, lesquelles ont été simplement renforcées ?)

Votre présentation devra être effectuée entre 10 et 15 minutes. Vous veillerez à ce que le temps de parole soit distribué équitablement au sein du groupe.

Vous avez la possibilité de faire une démonstration du sité élaboré (ou tout autre démonstration qui vous semble opportune) en incluant dans vos diapositives le lien correspondant.

⚠ 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. Soignez la lisibilité et l'orthographe.

Demander et trouver de l'aide

Hors des séances, vous pouvez poser vos questions par mail (Web) ou sur le canal Discord du projet (S106 - Projet COIN), que nous essayons de regarder régulièrement.

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 est parfois utile.
  4. Nous ne répondrons pas forcément immédiatement. Plus votre question est facile à comprendre, plus vous avez une chance d'avoir une réponse le plus vite possible !

Consignes de rendu

Un seul membre du groupe doit déposer le site sur https://webdev.iut-orsay.fr/. Les consignes pour déposer sont là-bas, à tester à l'avance. Le site doit être visible à l'adresse :

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

Les autres membres du groupe doivent avoir à leur adresse (également dans /coin) une page contenant une redirection automatique vers le rendu . Attention aux majuscules !

Si votre site n'est pas accessible à cette adresse, votre rendu n'est pas fait. Ne laissez que votre rendu et pas d'anciennes versions.

Vous êtes responsable de tester à l'avance et de nous signaler les problèmes par mail (avec une capture d'écran et une explication du problème). Mais si vous ne trouvez pas d'autre solution, partagez un dossier du cloud de l'IUT avec nous.

Rendu du projet : mercredi 30 novembre.

Les projets sont récupérés automatiquement le lendemain matin.

Si vous rendez en retard, vous devez nous envoyer un mail pour nous prévenir, et de nouveau quand vous faites le rendu. Chaque jour de retard donnera 0.5 pt de pénalité, mais nous vous donnerons deux ou trois jours de délai si vous nous avez prévenus professionellement à l'avance.

A l'inverse, si vous ne respectez pas les consignes, cela nous donne plus de travail, et vous serez donc pénalisés sur votre note individuelle.

Rendu des diapositives : dimanche 15 janvier sur le Moodle du projet.

Critères d'évaluation

Web (75% de la note finale)

Productions 7,5 Respect du cahier des charges4 Qualité technique5
Identité
(logo, slogan, polices, couleurs)
1,25 Spécifications générales du site 1,25 Qualité générale du code
(choix des éléments, sélecteurs CSS...)
0,75
Site: page 1 1,5 Spécifications du rapport1,75 Validation W3C code HTML+CSS 1,5
Site : page 21,5 Consignes de rendu
(note individuelle)
1 Conception adaptative du site 1,5
Site : page 31,5 Projet bien rangé, formatage, choix des noms 1,25
Contenu du rapport1,75

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 (environ 16,5). Des points supplémentaires seront donnés pour tout le travail allant plus loin que le sujet. 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.

Voici des exemples de travaux supplémentaires possibles :

Communication (25% de la note)

Texte argumentatif

⚠ Suite à l'indisponibilité de la responsable communication, cette partie ne sera pas évaluée.

Diapositives (10 pts)

Oral (10 pts)

Respect du temps de parole : 1 pt

Verbal : 3 pts Non verbal : 3 pts Structure : 3 pts
Syntaxe
correction et clarté
Apparence générale
aisance physique, absence de tension, mobilité dans l'espace, confiance en soi, force de conviction
Construction
cohérence du raisonnement, clarté des transitions,
valorisation des idées principales, fermeté de la démarche
Vocabulaire
précision, richesse, pertinence du registre
Gestuelle
absence de gestes parasites, expressivité, implication
Introduction
vivacité de l'accroche, présentation claire du sujet, annonce du plan, originalité
Absence de mots parasites Visage
sourire, présence, ouverture
Conclusion
fermeté, originalité, choix de la chute, ouverture
Voix
débit, clarté de l'articulation et de la prononciation, intonation
Regard
franchise et mobilité, absence de lecture des notes,
recherche du feedback auprès des auditeurs