TP 8 et 9

Partie 1 - Projet web 

Nous allons profiter des 4 heures de TD pour rencontrer chaque équipe pendant 20 minutes environs pour : 

  • critiquer la note de cadrage
  • valider le périmètre du projet
  • choisir le nom de domaine à acheter 
Vous devrez alors prendre en compte nos échanges pour modifier la note de cadrage et la finaliser durant la séance du 19/12. La note de cadrage nous sera livré le 19/12 et fera l'objet d'une notation. 

Plan type de la note de cadrage (pour mémoire) 

  • Choix par groupe du sujet parmi la liste des sujets proposés 
  • Contexte du projet 
  • Définition du concept du site / finalité du site 
    • En 1 phrase présenter le concept du site 
  • Périmètre du projet 
    • Explique les différents aspects couverts dans le projet (développement de site,... réseaux sociaux, newsletters,...) 
  • Cibles du site 
    • Définir de manière la plus détaillée possible quelles sont les cibles principales et secondaires du site (localisation, sexe, âge,...) 
  • Objectifs du site 
    • Quels sont les principaux objectifs du site Internet (penser à la valeur ajoutée apportée par votre approche) 
  • Stratégie webmarketing 
  • Principales fonctionnalités envisagées à terme 
    • Une liste des fonctionnalités que devra proposer le site 
  • Nom de marque et nom de domaine 
    • des propositions pour le nom de domaine et le nom de marque 
  • Risques identifiés 
  • Macroplanning 

Partie 2 : Intégration HTML et CSS

En parallèle de la rencontre de 20 minutes avec chaque groupe projet vous travaillerez sur les sujets suivants : 

A. Réalisations de quiz individuels : 

B. Intégration HTML et CSS d'un formulaire 

Suite du TP précédent

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>
    • implanter votre code CSS en bas du code CSS déjà en place dans 
    • styles-perso.css

2. Mise en place du code HTML 

En vous basant sur la charte graphique ci après  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 : 

Pour vous aider dans les balises HTML de formulaire : http://www.commentcamarche.net/contents/493-formulaires-html-cours-et-exemples


Une fois le code HTML en place est valide 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")

C. Préparer l'épreuve de fin de semestre

Vous allez réaliser le TP de manière à mettre en place du code HTML et CSS.

Déroulement 

  • 1. Livraison d'un dossier zippé  Télécharger le fichier (mmi-s1-inte-g2.zip 1,58 Mo 2017-01-13 08:45:38)
    • dossier "Informations"
      • code source des textes
      • image du rendu final de la page web
    • dossier "www" contenant
      • fichier "index.html" contenant les principales balises devant structurer votre page web
      • répertoire css avec un fichier css "style.css"
      • répertoire image contenant 2 images
  • 2. Décompression du répertoire par les étudiants
  • 3. Les étudiants renomment le répertoire www en "www-NOM-NUMEROTP"
  • 4. Ouverture des fichiers index.hml et style.css avec l'éditeur de code (ce sont les 2 seuls fichiers sur lesquels vous devez travailler)
  • 5. Vous réaliser votre travail pendant 2 heures
Vous avez le droit d'aller sur Internet, de consulter le support de cours. vous n'avez pas le droit d'utiliser votre messagerie, une messagerie instantannée ou tout autre moyen d'échange entre élèves. 

Lorsque vous aurez fini vos travaux vous devriez obtenir une page web dont l'affichage devra ressembler à celui-ci :

Les travaux à réaliser

ETAPE 1 : Code HTML (8/20)

  • 1. Mettre en place dans le code html le texte livré en pièce jointe en respectant la structuration des titres, sous titres, listes à puce, gras, italique, lien hypertexte...
  • 2. Mettre en place le logo "mmi-bordeaux-src2.png" en haut de la page web dans le <header> en remplissant judicieusement l'attribut "alt"
  • 3. Mettre en place en bas de page, dans le <footer> un formulaire :
    • dont l'intitulé est "Abonnement newsletter"
    • avec un label dont l'intitulé est "Votre email"
    • avec un input type "text"
    • avec un bouton de validation dont l'intitulé est "S'abonner"
  • 4. Remplissez les balises META judicieusement
  • 5. valider la conformité du code html

ETAPE 2 : Code CSS (8/20)

Réaliser une mise en forme en CSS de la page web intégrée en mettant en place :

  • 1. sur l'ensemble de la page web l'image de fond "bg-main.jpg"
  • 2. l'ensemble du contenu doit être centré dans la page dans un "conteneur" de 960px de large
  • 3. l'ensemble du texte sera par défaut : police Arial, police de 12px, couleur #CCCCCC, texte justifié
  • 4. les titres de niveau 1 : police Verdana, police de 36px, couleur #ffffff et avec un texte centré 
  • 5. les titres de niveau 2 : police Verdana, police de 24px, couleur #ffff00, bordure basse : 1px d'épaisseur et de couleur #ffff00, hauteur de ligne 25px, 
  • 6. les titre de niveau 3 : en police Arial, police de 18px, couleur #ffff00 et en capitales 
  • 7. les titres de niveau 4 : en police Arial, police de 16px, couleur #ffff00
  • 8. vous devez créer en CSS des marges ou espaces intérieures, jouer sur les interlignages, pour améliorer la présentation et la lisibilité de la page
  • 8. le logo doit être centré horizontalement dans la page et l'ensemble du header doit avoir un fond blanc
  • 9. le formulaire doit s'afficher correctement en bas de la page
  • 10. le champ email du formulaire doit avoir une bordure de 3px de couleur #CCCCCC

ETAPE 3 : Code CSS : adaptation responsive (2/20)

Votre page doit s'afficher correctement sur un smart phone et une tablette (responsive design) dont la largeur d'écran sera inférieure à 960px de large, vous devez mettre en place ces adaptations en CSS

ETAPE 4 : Code CSS : adaptation à l'impression (2/20)

Adaptez votre page à l'impression pour que lors de l'impression : 

  • l'ensemble de la partie formulaire soit caché 
  • l'ensemble des textes et titres soient imprimés en noir
  • les titres h1, h2, h3 soient centrés horizontalement