ISCOM::HTML/CSS::session2 (20141008)

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. CSS : Définition des balises
Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52
5

6. CSS : Définition des balises
• Rappel :
• Les déclarations CSS peuvent :
• Ne rien avoir si on appel un tag de balise,
• Avoir un # si on appelle un id,
• Avoir un . si on appelle une classe.
• Il faut toujours mettre en place un reset CSS.
• Pour les classes et les id, gardez la même logique:
• CamelCase,
• séparé par des - ou des _.
Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52
6

7. CSS : Définition des balises
• On a donc :
• Un Reset CSS
• Une déclaration de tag de balise,
• Un état pour un tag de balise,
• Un id (#wrapper),
• Une classe (.my-custom-class).
• Différence entre un id et une classe ?
Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52
7

8. CSS : Définition des balises
Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52 8

9. CSS : Définition des balises
Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52 9

10. CSS : Définition des balises
Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52 10

11. CSS : Définition des balises
• Les padding ne doivent pas être combiné avec des
width et des height.
• Un float ne peut être cumulé avec un clear,
• Les propriétés peuvent être concaténée (exemple1),
• De même pour les margin et padding (exemple 2),
• Des éléments peuvent être conditionné (exemple 3)
Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52
11

12. CSS : Définition des balises
• Les padding ne doivent pas être combiné avec des
width et des height.
• Un float ne peut être cumulé avec un clear,
• Les propriétés peuvent être concaténée (exemple1),
• De même pour les margin et padding (exemple 2),
• Des éléments peuvent être conditionné (exemple 3).
Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52
12

13. CSS : Les pseudo classes
• Une pseudo classe peut être utilisé pour définir un état d’un élément.
• Elle se définit par selector:pseudo-class{ property:value}
• Les plus courantes :
• :hover, :visited, :focus, :active, :link, …
• :first-child,
• ::first-letter, ::first-line,
• :before, :after,
Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52
13

14. A vous de jouer !
Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52
14

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

16. Compatibilité navigateurs
• Chaque système à son propre navigateur par défaut (IE pour Windows, Safari pour
Mac, …)
• … mais on peut aussi mettre d’autre navigateurs (Firefox, Chrome, Opera, …).
Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52
16

17. What’s
The
Problem
Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52
?
17

18. Compatibilité navigateurs
• Chaque navigateur a des versions différentes.
• Certains sont mis à jour automatiquement …
• … d’autre non !
• Certaines entreprises bloque les mises à jour automatique …
• … et on se retrouve avec un problème de taille !
Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52
18

19. Comment rendre mon site compatible
avec les principaux navigateurs ?
Et comment faire si des fonctionnalités
ne sont pas disponible pour certains
navigateur ?
Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52
19

20. Compatibilité navigateurs
• Cas concret :
• Vous travaillez dans une agence, vous avez de gros clients.
• Point important : Le navigateur utilisé dans la société est Internet Explorer 8.
• Les utilisateurs du site seront à 40% des personnes de la société.
• Il faut prendre en considération cette données pour le développement. Le site doit
être visible sur IE8 quoi qu’il en soit !
Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52
20

21. Compatibilité navigateurs
• Solution(s) simple(s) :
• Pour commencer, un code propre…
• Faire une feuille de style spécifique pour Internet Explorer 8 pour surcharger la
feuille de style existante,
• Des solutions javascript existent,
• Si (et seulement si) ces solutions ne règlent pas nos problèmes : Les hack CSS.
Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52
21

22. Compatibilité navigateurs
• La solution de la feuille de style spéficique pour IE8
est la plus répandue.
• On déclare une feuille de style dans un tag html
permettant à Internet Explorer de contrôler si la
feuille de style existe pour la version d’Internet
Explorer sur laquelle on se trouve.
Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52
22

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