# TP SRC # TP n°4

## "Mémo" codes HTML & CSS

- HTML5 : http://njea-tis-09.wikispaces.com/file/view/WOORK+-+HTML+5+Cheat+Sheet.pdf
- CSS 2 : http://downloads.gosquared.com/help_sheets/10/CSS%20Help%20Sheet%20outlined.pdf
- CSS 3 : http://downloads.gosquared.com/help_sheets/10/CSS3%20Help%20Sheet%20outlined.pdf

De nombreuses applications smart phone/tablettes existent aussi !

## Les tool bars

La première et la plus connue était un plugin pour Firefox appelé Firebug. Elles sont maintenant natives sur tous les navigateurs modernes, et sont indispensables pour assister la construction des pages web :

- en permettant de comprendre l'origine du rendu visuel dans le navigateur,
- en permettant de modifier les valeurs des styles et d'ajouter supprimer des styles,...
- mais aussi en renseignant sur des caractères de performance des pages et d'optimisations.

### 1 ou 2 exemples

- Sur Chrome cf https://developers.google.com/chrome-developer-tools/
  - Use Ctrl+Shift+I (or Cmd+Opt+I on Mac) to open the DevTools.
  - Use Ctrl+Shift+J (or Cmd+Opt+J on Mac) to open the DevTools and bring focus to the Console.
  - Use Ctrl+Shift+C (or Cmd+Shift+C on Mac) to open the DevTools in Inspect Element mode, or toggle Inspect Element mode if the DevTools are already open.
- Sur Safari : cf "Web inspector" : https://developer.apple.com/safari/tools/

## Rappels

Le principe de la mise en forme via les CSS est de coder des styles CSS qui s'appliquent à un ou plusieurs éléments html de la page.

L'association entre les styles CSS et le code HTML se fait via des sélecteurs :

- des sélecteurs universels : *
- des sélecteurs via les balises html : p, h1, footer, header,...
- des sélecteurs via le contexte de balises : header h1, footer p,...
- des sélecteurs via l'attribut class : .quelquechose
- des sélecteurs via l'attribut id : #quelquechose

Nous avons lors des précédents TP construits le code HTML d'une page web, puis lors du dernier TP commencé à coder la feuille de style CSS.

## Consignes pour la suite de l'intégration CSS

Lors de ce TP, nous allons continuer la saisie de la feuille de styles CSS :

- Ouvrez/décompressez le répertoire www pour éditer le code de la page index.html et du fichier CSS
- Vérifiez l'état d'avancement de la construction des styles CSS en exécutant la page index.html dans un navigateur
- Et suivez les étapes ci-après...

- A. Pour respecter la charte graphique transmise il faut reproduire l'effet qui est présent au niveau du background du header
  - il s'agit d'appeler une image de fond appliquée au "header" (cette image est semi transparente) : "bg-header.png"
  - une fois ce style appliqué se pose un problème, les zones à droite et à gauche de la zone de contenu n'affichent pas l'image
  - pour corriger ce point il faut remanier les styles CSS précédemment posés
    - on ne doit pas préciser la largeur du header, ni ses marges
    - on doit créer une class sur l'élément qui est contenu dans le header pour lui appliquer la largeur et les marges précédemment supprimées sur le header
    - une fois mis en place on doit retrouver le même effet sur le header que dans la charte graphique
- B. Intégration des styles de la première ligne de 3 blocs : styler la ligne
  - on ajoute une class sur le div qui fait suite au div .flexslider
  - on ajoute les styles permettant d'appliquer le fond image à ce div en appelant l'image "tail-header.png"
  - on applique une bordure en haut de ce div d'une couleur #0C0B0B et d'une hauteur de 12px
  - on applique un espacement à l'intérieur du bloc pour créer des espaces intérieurs de 92px en haut, 89px en bas, 0 pixels à droite, 0 pixels à gauche
- C. Intégration des styles de la première ligne de 3 blocs : styler chaque bloc
  - On ajouter une class "bloc_tiers" à chaque div conteneur d'un bloc de contenu
  - On applique dans la feuille de styles les styles permettant :
    - marge droite : 10pixels
    - marge gauche : 10 pixels
    - de positionner les 3 blocs les uns à côté des autres
    - largeur de 290px
  - A ce stade les 3 blocs se disposent bien les uns à côté des autres mais l'image de fond n'est pas bien positionnée, c'est parce que nous sommes "sortis du flux html" en mettant en place les flottements, il faut "revenir dans le flux" :
    - en ajoutant une class sur le div au dessus des 3 blocs
    - en attribuant à cet élement
      - une largeur de 100%
      - un style overflow:hidden pour supprimer les flottements (cf http://www.quirksmode.org/css/clearing.html)
  - On doit maintenant "styler" les headings de niveau 2 :
    - ces styles s'appliqueront à tous les headings de niveau 2 de la page
    - la taille de la police est de 40 pixels
    - un espace en bas du heading est aménagé sur une hauteur de 36 pixels
  - On définit ensuite les styles du paragraphe contenu dans chaque bloc
    - la taille de la police est de 11 pixels
    - les caractères sont transformés en capitale
  - On définit les styles s'appliquant au lien contenu dans chaque bloc :
    - on ajoute une class "link-1" dans le code html au niveau de chaque lien
    - on définit des styles s'appliquant à la class "link-1"
      - couleur blanche
      - taille de police de 11 pixels
      - comportement de type bloc
      - mise en forme en capitale
      - pas de souligné
      - une marge haut de 15 pixels
  - La flèche qui vient devant chaque lien est gérée en image de fond et est associée à la balise span
    - on attribue à chaque span contenu dans chaque lien les styles suivants
      - comportement de type "inline-block"
      - image de fond : "marker-1.png" positionnée à droite sans répétition
      - largeur de 9 pixels
      - hauteur de 5 pixels
      - marge de 5 pixels en haut, 4 pixels à droite
    - au passage de la souris sur le lien la flèche change de couleur
      - cet effet est produit en déplaçant l'image de fond du span au passage de la souris
      - on doit donc créer un effet se déclenchant au passage de la souris qui va au niveau de chaque span contenu dans chaque lien déplacer l'image de la droite vers la gauche
- D. finalisation de la première ligne
  - Pour finaliser la première ligne dans sa mise en forme reste à équilibrer les paragraphes qui ont des hauteurs variables :
    - On ajoute une hauteur minimum de 80 pixels
    - On ajoute une hauteur maximum de 80 pixels
- E. Mise en forme de la seconde ligne

Cette mise en forme respectera des principes similaires, vous pouvez donc réaliser sa mise en forme en autonomie.

## Liens utiles

### "Mémo" codes HTML & CSS

- HTML5 : http://njea-tis-09.wikispaces.com/file/view/WOORK+-+HTML+5+Cheat+Sheet.pdf
- CSS 2 : http://downloads.gosquared.com/help_sheets/10/CSS%20Help%20Sheet%20outlined.pdf
- CSS 3 : http://downloads.gosquared.com/help_sheets/10/CSS3%20Help%20Sheet%20outlined.pdf

De nombreuses applications smart phone/tablettes existent aussi !

### CSS

- Appel aux feuilles de styles CSS :
  - méthode traditionnelle et méthode import : http://www.alsacreations.com/actu/lire/160-link-ou-import.html
  - méthode d'application de CSS en fonction du media : http://www.alsacreations.com/article/lire/930-css3-media-queries.html
- Fichier reset.css : principe et mise en place
  - http://meyerweb.com/eric/tools/css/reset/
- Principe des positionnements absolus, relatifs et flottant, notion de sortie du flux html http://www.alsacreations.com/tuto/lire/608-initiation-positionnement-css.html
- Principe de restauration du flux html
  - méthode : "overflow hidden" : http://www.quirksmode.org/css/clearing.html
  - méthode "classique" : http://www.aidenet.com/css/css38m.htm
- Polices non système embarquées :
  - Polices libre de droit google : http://www.google.com/webfonts
  - Générateur de police : http://www.fontsquirrel.com/fontface/generator
- Outils d'aide CSS 3 :
  - Générateur d'arrondis : http://border-radius.com/
  - Générateur de dégradés CSS 3 : http://www.display-inline.fr/projects/css-gradient/#startType=hex&startValue=aaeeff&endType=hex&endValue=3399cc
- Générer du contenu en CSS : "content" : http://css-tricks.com/6555-css-content/
- Les sélecteurs CSS 3 : http://debray-jerome.developpez.com/articles/les-selecteurs-en-css3/

### Ressources/tutoriaux en JS, CSS, HTML :

- http://tympanus.net/codrops/
- http://www.scoop.it/t/webdesigner/p/3658456/50-free-tools-and-apps-for-web-designers-and-developers-speckyboy-design-magazine
- http://tutorialzine.com/
- http://html5demo.braincracking.org/
- http://www.thecssawards.com/
- http://devtype.fr/hacks/hacks-css-ie-firefox-safari-opera
- http://www.splashnology.com
- http://www.splashnology.com/article/responsive-web-design-toolbox-50-handy-tools-and-services/2632/
- http://www.no-margin-for-errors.com
- Mise en place d'un javascript d'aide au remplissage des formulaires http://www.webcssdesign.com/ajax/jquery-validation-formulaire/*