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
- Télécharger le fichier (01_Home 01_Home.psd 5,31 Mo) version desktop
- Télécharger le fichier (JPG) version desktop
- Télécharger le fichier (telechargement.jpg 490,28 Ko) version mobile
- les images et polices dont vous aurez besoin pour l'intégration
- Télécharger le fichier (sources-images-fonts.zip 2,20 Mo)
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
- http://www.emmanuelgeorjon.com/framework-css-foundation-4931/
- vous y trouverez des explications en français sur les grands principes de ce template et notamment sur le fonctionnement des grilles dont dépendront les adaptations aux différentes largeurs de navigateurs
- A lire également :
- http://www.alticreation.com/bootstrap-foundation-frameworks-front-end/
- documentation complète en anglais http://foundation.zurb.com/sites/docs/
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