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

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

Cours HTML / CSSLearn to code

HTML/CSS easily

Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +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

Rappel du projet

Website is good ! Responsive website is wonderful !

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,

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.

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.

Les media queries

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

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.

Media queries

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

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.

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

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

Approche responsive

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

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.

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 …

Approche responsive

Les Framework CSS

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.

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/

Des questions ?

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

Internet

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

Dbw 20141105

Corso di formazione - iscom-modena.it · formazione Ente titolare Iscom Emilia Romagna Ente attuatore Iscom Formazione Modena Soggetti che partecipano alla progettazione e realizzazione

Dv 20141105

Dw 20141105

Dbn 20141105

학부모신문278호입니다. 20141105

Dm 20141105

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

Java session3

Dsb 20141105

ISCOM : Recommandation professionnelle - Babyliss

Expresses 20141105

Diario Resumen 20141105

ISCOM : Communication Intégrée - Eurostar

Day2 session3 pcm_milestones_russian

Блок искрозащиты ISCOM РЭ 11.08Блок искрозащиты ISCOM СНАГ 436231.001 наименование изделия обозначение заводской

ISCOM : Recommandation professionnelle - Bellemont

Kathubulletinka 20141105

Session3 part1

Zugerpresse 20141105