ISCOM::HTML/CSS::session3 (20141105)

1. Cours HTML / CSS
Learn to code
HTML/CSS easily
Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52 1

2. Cours HTML / CSS
• 6 Sessions de ~3 heures > ~18 heures au total,
• A chaque sessions aura des objectifs à atteindre pour pouvoir continuer à la
prochaine session,
• 30% de théorie et 70% de pratique,
• Finalité : Monter un site en HTML / CSS responsive,
• En bonus, utilisation d’outil de versioning
Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52
2

3. Rappel du projet
Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52
3

4. Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52 4

5. Website is good !
Responsive website is wonderful !
Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52
5

6. Responsive web design
• Principe :
• On a un site, une url, différents design.
• On adapte le design à la taille de l’écran,
• On adapte le contenu au contenant,
• On définit au minimum 3 tailles (PC, tablette, mobile),
• On ajoute une balise meta viewport pour définir la « surface » de la fenêtre du
navigateur.
• On utilise des media queries pour faire des points d’arrêt,
Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52
6

7. Responsive web design
Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52
7

8. Responsive web design
• Avantage(s) :
• Notre site est adapté à l’appareil utilisé pour naviguer sur celui-ci,
• Le contenu est personnalisé (on peut avoir un contenu différent en fonction du
device utilisé),
• Meilleure expérience utilisateur.
Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52
8

9. Responsive web design
• Comment fait-on ?
• On définit les points d’arrêt :
• PC : x >= 1200px,
• Tablettes : 768px <= x < 1200px,
• Mobile : x < 768px,
• On créé une grille de 12 (ou 24 colonnes) avec des marges entre chaque.
• On intègre des media queries.
• On adapte notre maquette PC aux différents points d’arrêt.
Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52
9

10. Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52 10

11. Les media queries
Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52
11

12. Media queries
• Les media queries permettent de réaliser des points d’arrêts ou de définir des
éléments spécifiques pour certains comportement (exemple : print),
• C’est une déclaration CSS3,
• Les styles que l’on intègrent dans ces MD seront chargées que si on respecte les
conditions définies,
• On définit les media queries dans les feuilles de styles (le plus fréquemment utilisé)…
• … ou dans la déclaration des fichiers CSS (très peu utilisé).
Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52
12

13. Media queries
• Mon conseil :
• On charge une feuille de style
spécifique pour les media queries.
• On charge aussi la meta viewport.
• Avantage :
• On peut exclure cette feuille de
style pour les navigateurs ne
prenant pas en compte le
responsive (IE 8- par exemple),
• On gère les styles des tailles dans
un fichier spécifique.
Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52
13

14. Media queries
• Dans ce fichier, on déclare toutes nos
tailles ainsi qu’une déclaration pour
le menu.
Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52
14

15. Approche responsive
Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52
15

16. Approche responsive
• On a notre site qui est développé,
• Notre site est découpé et intégré pour une version PC,
• On veut le décliner pour les version tablettes et mobile.
Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52
16

17. Approche responsive
• Step 1 :
• Prendre son site et le découper en grille de même largeur afin d’avoir 12 colonnes
de même largeur avec les mêmes marges.
• Step 2 :
• On regarde si tout est bien positionné et si nous n’allons pas rencontrer des
problèmes au niveau de l’intégration,
• Step 3 :
• On place nos repères sous photoshop (ou autre logiciel similaire),
Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52
17

18. Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52 18

19. Approche responsive
• Step 4 :
• On créé notre logique pour pouvoir définir nos critères en fonction des tailles et
des colonnes à l’aide de classe CSS. Par exemple :
• Nos classes pour PC auront un identifiant de type : pc-[nbCol],
• Nos classes pour tablettes auront un identifiant de type : tab-[nbCol],
• Nos classes pour mobile auront un identifiant de type : mob-[nbCol],
Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52
19

20. Approche responsive
• On définit ces éléments dans notre
feuille de style mediaqueries.css
(exemple pour mobile)
Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52
20

21. Approche responsive
• On met à jour notre fichier HTML en
concatenant les classes pour les différentes
dimensions.
• On ajoute nos englobeurs resp-section et
resp-grid.
Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52
21

22. Approche responsive
• Enfin, on supprime (ou on met à jour) les
déclarations de taille que nous avions
ajouté dans nos fichiers css (width et
padding principalement) et on adapte son
code pour avoir un rendu optimisé.
• On a donc ce résultat sur PC,
• Et ce résultat sur mobile et tablette …
Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52
22

23. Approche responsive
Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52 23

24. Les Framework CSS
Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52
24

25. Les framework CSS
• Un Framework CSS est un recueil de fonctions CSS prédéfinie permettant d’effectuer des actions
ou de récupérer process de code testés précédemment et compatible avec la plupart des
navigateurs (et versions).
• Avantage :
• Un Framework CSS fait gagner beaucoup de temps au niveau du développement,
• On peut l’incrémenter de son propre « pseudo-framework ».
• Inconvénient(s) :
• Une méconnaissance des techniques vues dans les précédentes sessions (on fait du copier /
coller de code),
• Pratique pour les petits projets, plus difficile à maintenir sur de gros projet.
Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52
25

26. Les framework CSS
• Les Framework les plus répandues :
• Twitter Bootstrap : http://getbootstrap.com/
• Pure CSS (Yahoo) : http://purecss.io/
• Foundation (Zurb) : http://foundation.zurb.com/
• Gumby : http://gumbyframework.com/
Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52
26

27. Des questions ?
Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52
27