Cours HTML / CSS 
Learn to code 
HTML/CSS easily 
Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com -...
Cours HTML / CSS 
• 6 Sessions de ~3 heures > ~18 heures au total, 
• A chaque sessions aura des objectifs à atteindre pou...
Rappel du projet 
Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52 
3
Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52 4
Website is good ! 
Responsive website is wonderful ! 
Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.c...
Responsive web design 
• Principe : 
• On a un site, une url, différents design. 
• On adapte le design à la taille de l’é...
Responsive web design 
Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52 
7
Responsive web design 
• Avantage(s) : 
• Notre site est adapté à l’appareil utilisé pour naviguer sur celui-ci, 
• Le con...
Responsive web design 
• Comment fait-on ? 
• On définit les points d’arrêt : 
• PC : x >= 1200px, 
• Tablettes : 768px <=...
Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52 10
Les media queries 
Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52 
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...
Media queries 
• Mon conseil : 
• On charge une feuille de style 
spécifique pour les media queries. 
• On charge aussi la...
Media queries 
• Dans ce fichier, on déclare toutes nos 
tailles ainsi qu’une déclaration pour 
le menu. 
Nicolas AGUENOT ...
Approche responsive 
Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52 
15
Approche responsive 
• On a notre site qui est développé, 
• Notre site est découpé et intégré pour une version PC, 
• On ...
Approche responsive 
• Step 1 : 
• Prendre son site et le découper en grille de même largeur afin d’avoir 12 colonnes 
de ...
Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52 18
Approche responsive 
• Step 4 : 
• On créé notre logique pour pouvoir définir nos critères en fonction des tailles et 
des...
Approche responsive 
• On définit ces éléments dans notre 
feuille de style mediaqueries.css 
(exemple pour mobile) 
Nicol...
Approche responsive 
• On met à jour notre fichier HTML en 
concatenant les classes pour les différentes 
dimensions. 
• O...
Approche responsive 
• Enfin, on supprime (ou on met à jour) les 
déclarations de taille que nous avions 
ajouté dans nos ...
Approche responsive 
Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52 23
Les Framework CSS 
Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52 
24
Les framework CSS 
• Un Framework CSS est un recueil de fonctions CSS prédéfinie permettant d’effectuer des actions 
ou de...
Les framework CSS 
• Les Framework les plus répandues : 
• Twitter Bootstrap : http://getbootstrap.com/ 
• Pure CSS (Yahoo...
Des questions ? 
Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52 
27
Prochain SlideShare
Chargement dans…5
×

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

405 vues

Publié le

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

Publié dans : Internet
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
405
Sur SlideShare
0
Issues des intégrations
0
Intégrations
3
Actions
Partages
0
Téléchargements
22
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

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

  1. 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. 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. 3. Rappel du projet Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52 3
  4. 4. Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52 4
  5. 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. 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. 7. Responsive web design Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52 7
  8. 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. 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. 10. Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52 10
  11. 11. Les media queries Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52 11
  12. 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. 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. 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. 15. Approche responsive Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52 15
  16. 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. 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. 18. Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52 18
  19. 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. 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. 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. 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. 23. Approche responsive Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52 23
  24. 24. Les Framework CSS Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52 24
  25. 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. 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. 27. Des questions ? Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52 27

×