• Support de formation 2018-2019

TP 1 : initiation à l'intégration HTML : les balises

Déroulement

  • 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>
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 2 : projet web - rédaction de la note de cadrage

Au cours de cette séance vous devez travailler par groupe projet pour l'initier : 
  • Réunissez vous par groupe projet 
  • Mettez en place un espace de travail sur google drive : 
    • créer un dossier du nom de votre groupe ou de votre projet (en ajoutant comme personnes autorisées naturalnetericemery@gmail.com) 
    • partager ce dossier avec les autres membres du groupe 
    • créer des sous dossier pour commencer à ranger vos productions 
      • dossier divers 
      • dossier charte graphique 
      • dossier conduite de projet 
  • Dans le dossier conduite de projet créer un document "google doc" intitulé note de cadrage 

Plan de la note de cadrage 

La note de cadrage à rédiger pendant le TP devra répondre au plan suivant : 
  • 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,...) 
  • Conccurents identifiés 
    • une liste argumentée 
  • Objectifs du site 
    • Quels sont les principaux objectifs du site Internet (penser à la valeur ajoutée apportée par votre approche) 
  • 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 ouvertes et nombreuses pour le nom de domaine et le nom de marque 
  • Risques identifiés 
  • Macroplanning 
Votre objectif est de produire une première version de la note de cadrage pendant le TP en traitant chaque chapitre de son plan (même si certains éléments pourront rester flous ou non satisfaisants).

Vous pourrez alors vous reposer sur cette première version du document pour initier la conduite de projet en mode agile.

Quelques liens à consulter pour vous aider :