Post on 24-May-2015
description
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
2
Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52
Rappel du projet
3
Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52 4
Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52
CSS : Définition des balises
5
Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52
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 _.
6
Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52
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 ?
7
Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52 8
CSS : Définition des balises
Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52 9
CSS : Définition des balises
Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52 10
CSS : Définition des balises
Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52
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)
11
Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52
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).
12
Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52
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,
13
Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52
A vous de jouer !
14
Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52
Compatibilité navigateur
15
Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52
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, …).
16
Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52
What’s The
Problem ?
17
Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52
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 !
18
Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52
Comment rendre mon site compatible avec les principaux navigateurs ?
Et comment faire si des fonctionnalités
ne sont pas disponible pour certains navigateur ?
19
Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52
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 !
20
Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52
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.
21
Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52
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.
22
Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52
Des questions ?
23