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 :
Communication : Valérie Fabre (valerie.fabre@universite-paris-saclay.fr)
Web : Benjamin Hellouin de Menibus (benjamin.hellouin-de-menibus@universite-paris-saclay.fr).
⚠ 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:
7 séances d'1h30 jusqu'en novembre, encadrées par Benjamin Hellouin et Valérie Fabre (par alternance).
1 séance de préparation à l'oral début janvier, encadrée par Valérie Fabre.
1 oral de 2h début janvier, encadré par Valérie Fabre.
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.
1ère session : vous avez choisi un thème, un nom, un slogan, un logo, et commencé à réflechir à écrire des textes pour les pages 1 et 2. Vous avez un dossier partagé avec un fichier qui prépare le rapport.
2ème session : vous êtes d'accord sur l'idée générale de l'apparence du site et vous répartissez le travail. Premiers jets des textes qui apparaissent sur le site.
5ème session : la structure générale du site doit être faite, et vous corrigez des détails, vous travaillez la conception adaptative. Vous pouvez décider de faire du travail supplémentaire si vous avancez bien.
6ème session : le site doit être presque finalisé ; la dernière séance pour nettoyer le code, le valider, compléter et vérifier les détails du rapport.
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.
⚠ 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.
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 beaucoup de liberté sur le contenu, mais il est important de respecter rigoureusement les consignes du sujet (c'est votre cahier des charges). Vous pouvez aller au-delà (voir section Notation) mais cela ne doit pas aller à l'encontre des consignes.
Après chaque séance, sauvegardez votre travail sur la machine et quelque part en ligne (par exemple sur le cloud de l'IUT).
Ressources externes :
Vous pouvez utiliser des ressources externes (code, images, texte...) de manière raisonnable, en citant leur origine (le site, pas le moteur de recherche) dans le rapport. Il faut que nous puissions retrouver l'original. 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).
Binômes
La présence et le travail sont obligatoires à chaque séance. Si vous n'êtes pas actifs dans votre groupe (absences non justifiées, retards, discussions...), cela sera pris en compte dans la notation finale. En cas d'absence, vous devez prévenir vos partenaires et rattraper votre travail plus tard.
Les changements de partenaire ne sont pas autorisés, sauf situation exceptionnelle et avec notre autorisation.
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.
Vous choisissez une entreprise fictive concentrée sur un ou deux produits ou concepts. Votre entreprise peut être
:
en informatique ou pas,
réaliste ou imaginaire,
sérieuse ou parodique...
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 :
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 :
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).
Le site doit passer la validation W3C.
L'image du logo et un titre doivent apparaître dans l'onglet du site.
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.
A un endroit dans votre site, vous devez avoir du texte sur une image.
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 !)
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 :
Le nom ainsi qu'une courte description ;
Quelques informations factuelles de votre choix (prix, temps de livraison...) placés hors du texte ;
Une image ou une icône.
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 :
Des informations de contact (adresse, téléphone, mail - vous pouvez tout inventer).
Une carte pointant sur l'entreprise.
Un formulaire de contact avec un bouton inactif.
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.
⚠ 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 :
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.
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. Dans chaque cas, indiquez à quels endroits ils sont utilisés et (éventuellement) donnez les sources.
La liste des sources de toutes les ressources externes que vous réutilisez ou dont vous vous êtes inspirés (voir la partie Consignes).
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.
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.
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.
Vous présentez d'abord le projet : contexte, objectifs.
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).
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.
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 ?
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 ?").
Si votre question porte sur du code, envoyez votre code ou donnez un lien.
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.
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 !
Communication : Valérie Fabre (valerie.fabre@universite-paris-saclay.fr)
Web : Benjamin Hellouin de Menibus (benjamin.hellouin-de-menibus@universite-paris-saclay.fr).
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 charges
4
Qualité technique
5
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 rapport
1,75
Validation W3C code HTML+CSS
1,5
Site : page 2
1,5
Consignes de rendu
(note individuelle)
1
Conception adaptative du site
1,5
Site : page 3
1,5
Projet bien rangé, formatage, choix des noms
1,25
Contenu du rapport
1,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 :
Effort particulier sur l'apparence du site ou du rapport.
Contenu supplémentaire : scénario plus approfondi, ajout de vidéos, d'autres éléments, d'autres pages...
Utilisation d'outils ou de technologies non vus en cours.
Communication (25% de la note)
Texte argumentatif
⚠ Suite à l'indisponibilité de la responsable communication, cette partie ne sera pas évaluée.
Diapositives (10 pts)
Description du projet (entreprise) : 2 pts
Présentation des étapes de réalisation du projet : 2 pts