Projet web

Création & exploitation de sites Internet
Projet MMI 2016 – 2018 – Semestre 2

Au cours du second semestre nous travaillerons ensemble sur :

  • Votre projet web lors des cours et TP d'intégration HTML + interventions d'Arnaud Teyssedre pour vous accompagner dans les développements 
    • vous devez continuer à avancer sur votre projet et nous contacter si vous êtes bloqués dans votre avancement 
    • notre prochaine rencontre aura lieu seulement le 16 mars (cours) et 22 mars (TD : point d'avancement projet web)
    • nous aurons pour objectif la mise en production d'une première version du site avant le 1er mai 
  • Développements front end et plus particulièrement :
    • la qualité des sites web,
    • l'audit de sites web,
    • le SEO,
    • l'usage de frameworks HTML CSS JS 

TP1 du 13/02/2017 : initiation au frameworks en développement front end

Un framework HTML CSS JS est un ensemble qui contient des codes HTML et CSS, des formulaires, boutons, outils de navigation et autres éléments interactifs, ainsi que des extensions JavaScript en option. Ils premettent de gérer la compatibilité sur les différents navigateurs (reset CSS) de faciliter le positionnement CSS (« grille » CSS) et de faciliter la gestion des résolution d’écrans multiples à l’heure de la mobilité (responsive design).

Au cours de ce TP vous allez devoir intégrer une charte graphique sur la base du framework HTML / CSS JS Foundation : http://foundation.zurb.com/​

Les sources 

  • un dossier compressé contenant les sources du framework foundation 
    • Télécharger le fichier (foundation-6.2.1-complete 189,69 Ko)
    • Une fois décompressé vous trouverez dans ce répertoire les fichiers HTML CSS et JS, le fichier index.html pourra vous servir de base à votre intégration HTML 
  • une charte graphique d'une page web 
  • les images et polices dont vous aurez besoin pour l'intégration 

Les éléments à connaitre ou à utiliser 

  • Un framework HTML CSS JS est un ensemble qui contient des codes HTML et CSS, des formulaires, boutons, outils de navigation et autres éléments interactifs, ainsi que des extensions JavaScript en option. Ils premettent de gérer la compatibilité sur les différents navigateurs (reset CSS) de faciliter le positionnement CSS (« grille » CSS) et de faciliter la gestion des résolution d’écrans multiples à l’heure de la mobilité (responsive design)
  • A lire avant de commencer l'intégration HTML 
  • A lire également : 

Le travail à effectuer 

  • récupérer et décompresser les sources 
  • ouvrir le fichier PSD et le fichier jpeg pour consulter la charte graphique de la page web à intégrer 
  • ouvrir le fichier index.html 
  • si vous n'êtes pas initiés à l'intégration HTML en grille, lisez cet article http://www.emmanuelgeorjon.com/framework-css-foundation-4931/
  • dupliquer le fichier index.html en un autre fichier (par exemple, accueil.html) puis ouvrir ce fichier avec votre éditeur de code 
  • commencer l'intégration de la page web 
    • en intervenant dans le fichier HTML (d'abord en supprimant le contenu HTML puis en intégrant votre propre contenu) 
    • en indiquant vos règles CSS dans le fichier app.css
  • vous pouvez aussi commencer votre intégration sur la base d'un autre template html : http://foundation.zurb.com/templates.html