IUT - Web - G6S1

Vous pouvez travailler en binôme. Vous devez rendre une archive au format .zip nommée NOM1_NOM2.zip par email à amelie.cordier@univ-lyon1.fr avant 18h. Chaque minute de retard sera pénalisée d'un point de moins sur la note finale.

Tout votre code (HTML et CSS) doit être valide.

1. Faire l'exercice suivant : http://liris.cnrs.fr/~pchampin/enseignement/intro-web/css.html#id7

2. Dans un nouveau document, faire l'exercice suivant : http://liris.cnrs.fr/~pchampin/enseignement/intro-web/css.html#exercices

3. Dans un nouveau document, créer un formulaire (par exemple, pour commander des pizzas), en expérimentant les différents types de champs avec le processeur fourni à l’adresse suivante : http://champin.net/enseignement/intro-web/_static/formproc/debug

Les supports de cours sont disponibles sur le site de Pierre-Antoine Champin.

Vous trouverez ici la documentation pour accéder au FTP qui vous permet de déposer vos pages web sur votre public_html étudiant.

L'objectif du projet est de produire une maquette du site de présentation des projets tuteurés de l'IUT. La maquette doit être exclusivement en HTML5/CSS. Toute autre technologie sera simplement ignorée dans la notation finale.

  • Page d'accueil
  • Page d'affichage de la liste des projets tuteurés
  • Page de présentation d'un projet tuteuré
  • Page de recherche de projets tuteurés selon plusieurs critères (type de support, année, nom, mots-clés)
  • Page de login pour accéder à la zone “privée du site”
  • Page de saisie d'un projet tuteuré dans la galerie (en mode connecté) [binômes uniquement]
  • Page “mon compte” (en mode connecté) [binômes uniquement]
  • Page “à propos” (visible par tous) [binômes uniquement]

De plus, un menu doit être visible sur toutes les pages.

Ces données sont fournies à titre indicatif… vous pouvez ajouter toute page qui vous semblerait utile.

Critères généraux de notation

  • Vos pages doivent être valides au sens du W3C (HTML et CSS).
  • La structure de votre site doit être correcte (organisation des ressources en répertoires, nommage correct des fichiers, etc.).
  • La présentation de votre site devra s’adapter à la largeur de l’écran, afin de présenter une ergonomie différente (et appropriée) sur un écran d’ordinateur et sur un smartphone.
  • Les pages doivent avoir un aspect uniforme.

Grille de notation (le barème ne sera pas communiqué) :

  • Utilisation des structures de base du HTML
  • Utilisation pertinente des sections
  • Mise en place de liens externes / internes et pertinence
  • Utilisation de listes
  • Formulaire
  • Meta-données
  • Qualité des CSS
  • Structuration des CSS
  • Richesse des CSS
  • Responsive design
  • Respect des consignes (toutes les pages sont présentes, bien nommées et bien organisées, modalités de rendu respectées)
  • Qualité visuelle
  • Exploitation des ressources disponibles
  • Validation CSS et HTML

Modalités de rendu

Chaque groupe devra envoyer par email à amelie.cordier AT univ-lyon1.fr :

  • L'URL à laquelle le site est visible
  • L'URL du dépôt GIT contenant les fichiers du projet ainsi que son historique (par exemple en utilisant Github ou Bitbucket)

La date limite d'envoi est les 10 juin 2015 à 18h00