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

Nicolas AGUENOT - Freelance web developer - [email protected] - +33 (0)6 27 32 20 52 1

Cours HTML / CSSLearn to code

HTML/CSS easily

http://www.nicolasaguenot.com

mailto:[email protected]?subject=KEYNOTE::Votre%20Pr%C3%A9sentation

Nicolas AGUENOT - Freelance web developer - [email protected] - +33 (0)6 27 32 20 52

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

2




Rappel du projet

3




Website is good ! Responsive website is wonderful !

5




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,

6




Responsive web design7




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.

8




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.

9




Les media queries

11




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é).

12




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.

13




Media queries

• Dans ce fichier, on déclare toutes nos tailles ainsi qu’une déclaration pour le menu.

14




Approche responsive

15




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.

16




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),

17




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],

19




Approche responsive

• On définit ces éléments dans notre feuille de style mediaqueries.css (exemple pour mobile)

20




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.

21




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 …

22




Approche responsive




Les Framework CSS

24




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.

25




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/

26



http://purecss.io/

http://foundation.zurb.com/

http://gumbyframework.com/


Des questions ?

27

