Programme des dernières séances du semestre : 

  • TP 12 (04/01/2017) : TP intégration HTML (entrainements)
  • TP 13 (12/01/2017) : Point avancement projet web
    • 20 minutes par équipe projet pour discuter de votre avancement, de vos besoins,
    • vous devez avoir préparer les éléments suivants de manière à les présenter pour cette séance 
      • expressions clés stratégiques 
      • arborescence envisagée 
      • avancement sur la base d'un macroplanning ou product backlog (en intégrant l'échéance de mise en production d'une première version du site pour la fin février 2017 en remplacement de la page d'attente) 
  • TP 14 (13/01/2017) : évaluation intégration HTML devoir individuel 

TP 12 (04/01/2017) : intégration HTML CSS d'un formulaire

Vous pouvez vous référer au support de cours sur les formulaires : http://mmi-pub-2015.kiubi-web.com/theme/fr/includes/les-bases-du-html/page_2.html#LII-I​

Vous devrez au cours de ce TP :
  • construire la partie HTML
  • puis la partie CSS d'un formulaire,
  • vous devrez ensuite l'adapter pour un affichage smartphone

1. Récupération des sources 

  • récupérer le dossier Télécharger le fichier (tp.zip 12,69 Ko 2015-12-09 16:12:22)
  • enregistrez et décompresser le dossier 
  • ouvrez les 2 fichiers avec un éditeur sur lesquels vous devez travailler :
    • index.html
    • styles-perso.css
  • ouvrez le fichier 
  • index.html dans votre navigateur 
  • Une partie du code est en place dans ces 2 fichiers, vous devrez :
    • implanter votre code HTML entre les balises <form>    </form>
      • vous devrez utiliser différentes balises comme les balises
        • fieldset pour encadrer le groupe de champ "vos coordonnées" et le second groupe de champ "Un autre groupe de champ du formulaire", 
        • input, 
        • textarea,...
    • implanter votre code CSS en bas du code CSS déjà en place dans 
    • styles-perso.css
Remarque : le fichier HTML fait appel à une autre feuille de styles CSS basée sur le framework CSS http://knacss.com/

2. Mise en place du code HTML 

En vous basant sur la charte graphique ci après et en faisant référence notamment au support de cours concernant les formulaires HTML et CSS vous devez mettre en place le code HTML correspondant à l'ensemble des champs de formulaire. Voici l'aspect de la page web une fois l'ensemble du code HTML mis en place et avant la mise en place des CSS : 

Une fois le code HTML en place est valide par rapport au W3C vous pouvez passer à l'étape suivante...

3. Mise en place des CSS

Vous pouvez maintenant compléter le fichier CSS de manière à obtenir la charte graphique suivante en version desktop : 
 
 

4. Mise en place des adaptations responsive

Vous pouvez maintenant compléter le fichier CSS de manière à obtenir la charte graphique en version mobile : 


 

5. Mise en place des alerte/contrôles permis par le HTML 5

En ajoutant de nouveaux attributs HTML5 à certains champs de formulaires (cf http://dmouronval.developpez.com/tutoriels/html/formulaires-html5/)  vous pourrez mettre en place des controles et alertes sans Javascript permettant par exemple lors de la validation du formulaire de faire un controle et une alerte sur les champs obligatoires pour obtenir ce résultat : (ou l'alerte apparait sur le champ "nom")