Support de cours PUB/MMI

TP n°3

Prochaines séances

13 octobre 2h TP : intégration HTML
17 novembre 2h TP : intégration HTML
1er décembre 4h CM : code CSS & mise en forme
8 décembre 4h TD : projet web - fin note de cadrage
12 décembre 2h TD : code CSS & mise en forme
19 décembre 4h TD : projet web - début des développements page d'attente
21 décembre 6h CM : épreuve notée (2h) + projet web - développements page d'attente

Projet web

Les équipes :

https://docs.google.com/spreadsheets/d/1NUhtCQJlwGqrV2D6aePYxVK8F4Em46eAvVLHveA-43s/edit?usp=sharing

La note de cadrage

La note de cadrage devait m'être livrée dans sa première version par chaque équipe par mail avant le 11/10/2017 à 23h59 : contact@natural-net.fr
Dans les faits
- je n'ai pas reçu toutes les notes de cadrage à la date requise
- certaines notes de cadrage sont complètes, d'autres assez réduites,
- certaines équipes semblent avoir du mal à identifier un sujet et un concept de site

Je propose de mettre en suspends ce projet jusqu'au 8 décembre ou nous consacrerons 4 heures à ce travail en groupe TD. D'ici là, les 6 équipes doivent obligatoirement avant le 20/10/2017 me transmettre un mail contenant :

le nom/prénom des élèves de l'équipe
une adresse mail générique à l'équipe
une première version de la note de cadrage (même embryonnaire)

Recommandations :

L'envoi de ce mail est obligatoire. Je ne vous relancerai pas sur cette échéance.
A la suite de ce livrable je répondrai à chaque groupe par mail pour indiquer mes retours, conseils et suites à donner.
Pour les équipes qui ont édéjà avancé dans la note de cadrage, je vous invite à continuer d'avancer en peaufinant la note de cadrage et en travaillant sur les aspects noms de marque, logo,...

Initiation à l'intégration HTML : les balises

1. Livraison d'un nouveau dossier zippé contenant : Télécharger le fichier (tp1.zip 7,46 Mo 2015-09-23 18:59:10)
- répertoire "Informations"
  - code source des textes
  - charte graphique en 2 largeur d'affichage
- répertoire "www" contenant
  - fichier index.html quasi vierge
  - répertoire css vide
  - répertoire "images" contenant des images prédécoupées de la charte graphique

2. Décompression du répertoire par les étudiants
3. Les étudiants renomment le répertoire www en www-NOMBINOME1-NOMBINOME2
4. Ouverture du fichier index.hml avec l'éditeur de code
5. On passe en revue avec les étudiants le code source de index.html
6. Travaux à réaliser par les étudiants en séance : mise en place du code html pour mise en place de la charte graphique et des contenus.

Détails :

Pas à pas vous allez copier/coller le texte brut dans la page web,
Puis pour chaque zone de texte spécifiques vous allez "encapsuler" ces textes au sein des balises html adaptées

Le code HTML de la page web qui vous est livrée est le suivant :

<!DOCTYPE html>

<html lang="fr">

<head>

<title> </title>

<meta name="description" content=" " />

<meta name="keywords" content=" " />

<meta charset="utf-8">

</head>

<body>

</body>

</html>

Vos contenus textes seront à mettre en place entre les balises <body> </body>
Voys devrez également coder l'appel aux différentes images qui sont affichées dans la page
Vous pouvez vous reporter au support de cours pour vous aider à mettre en place les balises adaptées
Vous pouvez également vous aider avec un mémo des balises HTML à télépcharger en pdf :
- Télécharger le fichier
- Télécharger le fichier
La mise en place des contenus, des balises et des appels aux images permettra de construire le code HTML de l'ensemble de la page (pour l'heure dépourvu de mise en forme car sans CSS)

Une fois l'intégralité du contenu remis en place et balisé :

vérifier le rendu dans un navigateur, il doit ressembler à cela :

renseigner judicieusement les balises META description et Title contenus dans le <head> de votre page web
vérifier la qualité de votre code sur le validateur du W3C : https://validator.w3.org/ et corriger les éventuelles erreurs jusqu'à l'obtention d'une page sans aucune erreur

TP n°3.