Más contenido relacionado La actualidad más candente (20) Similar a Formation html5 CSS3 offerte par ippon 2014 (20) Formation html5 CSS3 offerte par ippon 20142. Ippon Technologies © 2014
Licence
Cette formation vous est fournie sous licence Creative Commons AttributionNonCommercial-
NoDerivatives 4.0 International (CC BY-NC-ND 4.0)
Vous êtes libres de :
● Copier, distribuer et communiquer le matériel par tous moyens et sous tous formats
Selon les conditions suivantes :
● Attribution : Vous devez créditer l'Oeuvre, intégrer un lien vers la licence et indiquer si des modifications
ont été effectuées à l'Oeuvre. Vous devez indiquer ces informations par tous les moyens possibles
mais vous ne pouvez pas suggérer que l'Offrant vous soutient ou soutient la façon dont vous avez
utilisé son Oeuvre.
● Pas d’Utilisation Commerciale: Vous n'êtes pas autoriser à faire un usage commercial de cette Oeuvre,
tout ou partie du matériel la composant.
● Pas de modifications: Dans le cas où vous effectuez un remix, que vous transformez, ou créez à partir
du matériel composant l'Oeuvre originale, vous n'êtes pas autorisé à distribuer ou mettre à disposition
l'Oeuvre modifiée.
http://creativecommons.org/licenses/by-nc-nd/4.0/deed.fr
3. Ippon Technologies © 2014
Ippon Formation en bref
Pourquoi Ippon Technologies
publie ses supports de
formation ?
Car Ippon participe à la communauté Java et
Web et soutien le modèle open-source
Le support théorique représente 40% du
temps de formation, l'intérêt est dans les
Travaux Pratiques et l'expert Ippon qui
assure le cours.
Nos TP sont dispensés lors des sessions
de formations que nous proposons.
4. Ippon Technologies © 2014
Pour nous contacter
Pour nous contacter et participer à nos
formations :
- Technique : formation@ippon.fr
- Commercial : nzago@ippon.fr
Toutes les informations et les dates de
formations sont sur notre site internet et
notre blog :
- http://www.ippon.fr/formation
- http://blog.ippon.fr
5. Ippon Technologies © 2014
Sommaire
● HTML5 depuis HTML en passant par XHTML
● HTML5 nouveaux éléments et attributs
● Les formulaires “Web form”
● HTML5 multimédia et dessin
● HTML5 avec CSS3
● CSS3 les sélecteurs
● CSS3 les transformations, transitions et animations
● CSS3 avec les préprocesseurs
● HTML5 Web API
● Librairie Modernizr
7. Ippon Technologies © 2014
Sommaire
1. Évolutions du langage
2. Syntaxe et DOCTYPE
3. Prise en charge par les navigateurs
4. Sensibilisation au cas du mobile
5. HTML5 pour faire quoi ?
8. Ippon Technologies © 2014
1. Évolutions du langage
Naissance de l’HTML
● HTML (Hyper Text Markup Language) invention de “Sir” Tim Berners-Lee en
1991, s’appuyant sur SGML (Standard Generalized Markup Language)
● HTML 1 n’a jamais existé
● HTML 2 : premières spécifications par IETF (Internet Engineering Task Force)
● Pour la normalisation IETF remplacée par W3C (World Wide Web Consortium)
● Plusieurs vagues de révisions puis spécifications HTML 4.01 en 1999 par W3C
9. Ippon Technologies © 2014
1. Évolutions du langage
Naissance de l’XHTML
● XHTML 1.0 (X signifiant “eXtensible”) par W3C, aucun nouvel élément par
rapport à HTML 4.01 mais beaucoup plus strict au niveau de la syntaxe s’
inspirant du XML (eXtensible Markup Language)
● XHTML 1.1, du pur XML qui ne pouvait pas être traité par un type MIME
text/html. Les navigateurs alors du moment ne peuvent plus l’interpréter !
● Spécifications XHTML 2 en cours, pour faire table rase, incompatible avec l’
existant du Web
10. Ippon Technologies © 2014
1. Évolutions du langage
Le clash XHTML / HTML
● Rébellion au sein du W3C (théorie Vs pragmatisme), création d’un nouveau
groupe de travail WHATWG (Web Hypertext Application Technology Working
Group)
● W3C travaille sur la norme XHTML 2, tandis que WHATWG travaille sur une
norme HTML5 ...
11. Ippon Technologies © 2014
1. Évolutions du langage
Le compromis HTML5
● La mayonnaise XHTML 2 ne prend pas, en 2006 W3C décide de travailler sur
une nouvelle norme HTML 5, qui va s’appuyer sur HTML5 du WHATWG (qui
eux même vont continuer leur travail) !
● Fin 2009, tous sous la bannière HTML5 mais avec un processus différent
WHATWG (“Commit-Then-Review”) et W3C (“Review-Then-Commit”)
● 17 décembre 2012 le W3C publie la “Release Candidate” HTML5
12. Ippon Technologies © 2014
2. Syntaxe et DOCTYPE
Laxiste le HTML5 ?
● Balises en majuscules ou en minuscules ?
● Balise auto-fermante ou non ?
● Guillemets simples ou doubles ?
● Tout est permis, c’est à vous de décider ; soyez juste cohérent avec vous même
13. Ippon Technologies © 2014
2. Syntaxe et DOCTYPE
Le “tampon” HTML5, ça n’existe pas
● Contrairement à XHTML 2, le mot d’ordre de HTML5 est de garder la
compatibilité avec l’existant (HTML 4.01 et XHTML 1.0)
● Paradoxe HTML5 : la spécification doit être puissante et en même temps elle
doit être compatible avec les existants (qui n’ont rien de carrés)
● Vous faîtes du HTML 4.01, du XHTML 1.0 et du HTML5 (sans le savoir)
14. Ippon Technologies © 2014
2. Syntaxe et DOCTYPE
Quelle grammaire utilisons nous au juste ?
● Doctype HTML 4.01
<!DOCTYPE HTML PUBLIC
“-//W3C//DTD HTML 4.01//EN”
“http://www.w3.org/TR/html4/strict.dtd”>
● Doctype XHTML 1.0
<!DOCTYPE HTML PUBLIC
“-//W3C//DTD HTML 4.01//EN”
“http://www.w3.org/TR/html4/strict.dtd”>
● Doctype HTML5
<!DOCTYPE html>
15. Ippon Technologies © 2014
3. Prise en charge par les navigateurs
Les navigateurs ... comme toujours
● La vérité, on s’en fiche des DOCTYPE. Ce sont les navigateurs qui supportent
les fonctionnalités pas les DOCTYPE
● Si un élément ou un attribut de votre document HTML est devenu obsolète, ce n’
est pas (si) grave ; puisqu’il est censé être supporté par les navigateurs
“modernes”.
● Les nouveautés HTML5 sont elles supportées ? caniuse.com votre nouvel
meilleur ami
● Vous devez utiliser les possibilités du HTML5 sans jamais oublier votre
périmètre de compatibilité navigateurs
16. Ippon Technologies © 2014
3. Prise en charge par les navigateurs
“Vieux” navigateurs Vs navigateurs “modernes”
● Définitions assez floues, mais en général on désigne de “vieux” tout navigateur
qui ne supporte pas HTML5, CSS3 ou ne dispose pas d’un moteur JavaScript
performant
● Mais comme on l’a vu le “tampon” HTML5 n’existe pas, donc difficile à dire, c’est
souvent une affaire de communication / marketing ; le cas IE9 est sujet à débat
par exemple
● Il est préférable d’avoir une approche “Amélioration progressive” plutôt qu’une
approche “Dégradation gracieuse” et on enrichira les fonctionnalités au cas par
cas en fonction des possibilités du navigateur ou avec la mise en place de
“polyfills”
17. Ippon Technologies © 2014
4. Sensibilisation au cas du mobile
Et le Web mobile dans tout ça ?
● Explosion des terminaux mobiles (smartphones, tablettes)
● Fourchage des documents HTML Vs “Responsive Web Design”
● Explosion combinatoire des terminaux (et très hétérogènes) pouvant lire un
document HTML
● En fait sensibilisation au cas de l’avenir du Web en général, le mobile étant juste
la réalité du moment
18. Ippon Technologies © 2014
5. HTML5 pour faire quoi ?
Le futur du Web
● Donner du sens à la structure et au contenu des documents, afin de mieux les
indexer / référencer avec les nouveaux éléments et attributs
● Offrir des nouvelles possibilités sur les formulaires avec les “Web forms”
● Favoriser les médias dessin, audio et vidéo sans recourir à des plugins /
solutions propriétaires
● Améliorer la présentation des documents avec CSS3
● Gérer le mode du Web “offline”
● Favoriser les futures extensions possibles avec les Web API
20. Ippon Technologies © 2014
Sommaire
1. Recomposition d’une structure de page HTML
2. Recomposition d’une hiérarchie de page HTML
3. Les nouveaux attributs data-*
4. Les éléments obsolètes ou réaménagés
5. Les autres nouveautés
21. Ippon Technologies © 2014
Recomposition d’une structure de
page HTML
La sémantique de structuration
● Éléments permettant de structurer un document HTML tout en permettant à
celui-ci d’avoir un sens
● Nouveaux éléments : <section>, <article>, <nav>, <aside>, <header> et
<footer>
● Ils se calquent sur les propriétés de <div> avec un affichage par bloc (excepté
pour certains anciens navigateurs cf. caniuse)
22. Ippon Technologies © 2014
Recomposition d’une structure de
page HTML
Les éléments de structuration
● <section> : Déclare un conteneur mais avec une valeur sémantique : un
regroupement thématique générique
● <article> : Déclare une section de contenu qui peut être indépendante du reste
de la page
● <nav> : Déclare une section de navigation majeure
● <aside> : Déclare une section annexe qui est potentiellement liée au reste du
contenu de la page
● <header> : Déclare une section d’entête / d’introduction
● <footer> : Déclare une section de pied de page
23. Ippon Technologies © 2014
Recomposition d’une structure de
page HTML
Quel est l’intérêt ?
● Pour les développeurs : lisibilité du code
● Mais surtout pour le SEO : indexation des pages facilitées, meilleur
référencement
● /! Certaines sections ne sont pas uniques, par exemple on peut très bien insérer
un <header> dans un <article>
24. Ippon Technologies © 2014
Recomposition d’une hiérarchie de
page HTML
Rappels sur les éléments h1 ... h6
● Déclare un titre selon des niveaux (de 1 à 6)
● Valeur sémantique de titre, pas juste pour la mise en forme
● Il faut éviter de sauter des niveaux
25. Ippon Technologies © 2014
Recomposition d’une hiérarchie de
page HTML
Ce qui change
● On peut avoir des sous niveaux à l’intérieur des sections
● Élément <hgroup> déclare une entête de section au même titre que <header>,
mais ne devant regrouper que des titres. Il sert à masquer les titres de niveau
inférieur dans l’algorithme d’”outline”
26. Ippon Technologies © 2014
Recomposition d’une hiérarchie de
page HTML
Quel est l’intérêt ?
● Pour les développeurs : lisibilité du code
● Mais surtout pour le SEO : indexation des pages facilitées, meilleur
référencement
27. Ippon Technologies © 2014
Les nouveaux attributs data-*
Comment étendre / enrichir HTML5
● Nouvelle nomenclature des attributs data-*
● Ajout d’une metadonnée sous la forme d’une chaîne de caractères
● Metadonnée non visible dans le navigateur
28. Ippon Technologies © 2014
Les nouveaux attributs data-*
Quel est l’intérêt ?
● Solution élégante car la méta donnée est associée à l’élément en question tout
en conservant un code valide
● Solution propre car on ne détourne pas l’utilisation d’un autre attribut
● Solution souple car son formalisme n’est pas rigide (comme une DTD XHTML) :
un caractère et pas de majuscules
● Solution puissante car on peut en déclarer plusieurs par éléments
29. Ippon Technologies © 2014
Les éléments obsolètes ou
réaménagés
Les éléments de présentation
● Les éléments <font>, <big>, <center>, <strike> ne doivent plus être utilisés ;
les propriétés CSS doivent jouer leur rôle
● L’élément <small> représente désormais “small print” ; à utiliser pour les
mentions spécifiques ou légales
● L’élément <b> représente désormais une mise en valeur différente, mieux vaut
préférer <strong> si nécessité de donner une valeur sémantique d’importance
● L’élément <i> représente désormais un changement de ton
30. Ippon Technologies © 2014
Les éléments obsolètes ou
réaménagés
Les éléments de structure
● Les éléments <frame>, <frameset>, <noframes> ne doivent plus être utilisés
31. Ippon Technologies © 2014
Les éléments obsolètes ou
réaménagés
Les éléments sémantiques
● L'élément <acronym> perturbait les rédacteurs ; celui-ci se lit comme un mot
contrairement à une abréviation <abbr> désormais seul ce dernier doit être
utilisé
32. Ippon Technologies © 2014
Les autres nouveautés
Sémantique toujours
● Ajout de l’attribut <mark> qui déclare un surlignage sur un texte pour attirer l’
attention
● Ajout de l’élément <time> qui déclare une heure ou une date. Possède les
attributs datetime (standardiser l’affichage), pubdate (permet de lier la date à l’
élément article qui le contient ou au document entier s’il n’y en a pas)
33. Ippon Technologies © 2014
Les autres nouveautés
Cas pratiques
● Ajouts des attributs media, type et download dans l’élément <a>
● Ajout de l’élément <wbr> (word break) qui déclare la possibilité de couper un
mot si celui s’avère trop long (en cas de coupure, il n’y a pas de césure ou de
trait d’union)
34. Ippon Technologies © 2014
Les autres nouveautés
Chargement asynchrone des scripts
● L’élément <script> possède un nouvel attribut async qui lui permet d’exécuter
de manière asynchrone les scripts (à utiliser uniquement si l’attribut src est
renseigné). Cela signifie que le navigateur exécute le script dès qu’il est
disponible, donc possiblement avant l’évènement load
● Les scripts peuvent être interprétés dans le désordre et non par rapport à l’ordre
dans lequel ils apparaissent dans le code de la page
35. Ippon Technologies © 2014
Les autres nouveautés
Le reste
● Les “Web form”
● Les éléments multimédia
● Et tant d’autres, consulter http://www.w3.org/TR/html5-diff/
37. Ippon Technologies © 2014
Sommaire
● Nouveaux types d’input
● Nouveaux attributs
● Nouveaux éléments de formulaire
● Un peu de CSS
● Upload multiple de fichiers, exemple du “drag and
drop”
38. Ippon Technologies © 2014
Nouveaux types d’input
● Pour les expressions récurrentes
● Pour les dates
● Autres
39. Ippon Technologies © 2014
Pour les expressions récurrentes
● L’attribut tel, pour saisir un numéro de téléphone
● L’attribut url, pour saisir une URL
● L’attribut email, pour saisir un email
● L’attribut number, pour saisir les valeurs numériques
<input type="url" name="website"/>
40. Ippon Technologies © 2014
Pour les dates
● L’attribut date, pour saisir une date (calendrier grégorien)
● L’attribut time, pour saisir une heure précise
● L’attribut datetime, pour saisir une date et une heure sous un fuseau horaire
précisé
● L’attribut datetime-local, comme datetime sans préciser le fuseau horaire
(celui de l’utilisateur par défaut)
● L’attribut month, pour saisir un mois dans une année précise
● L’attribut week, pour saisir une semaine dans une année précise
41. Ippon Technologies © 2014
Mais encore
● L’attribut search, pour saisir comme un champ de type text mais avec une
apparence différente, laissée libre aux navigateurs pour l’implémenter
● L’attribut range, pour saisir les valeurs numériques mais de manière imprécise,
généralement utilisé pour simplifier l’IHM aux utilisateurs (volume sonore d’une
vidéo par exemple)
● L’attribut color, pour saisir la sélection d’une couleur (hexadécimal
uniquement)
42. Ippon Technologies © 2014
● L’attribut placeholder pour afficher un texte indicatif sur la saisie à effectuer
● L’attribut autofocus pour donner le focus directement sur un champ au
chargement du document HTML
● L’attribut autocomplete pour indiquer si le navigateur peut agir sur l'auto-
complétion du champ
● L’attribut required pour indiquer que la saisie est obligatoire
● L’attribut multiple pour indiquer que plusieurs saisies sont possibles dans un
même champ (sélection de plusieurs fichiers pour un upload, ou séparation par
des virgules pour un champ texte par exemple)
Nouveaux attributs
43. Ippon Technologies © 2014
● L’élément output pour afficher un résultat suite à un calcul (utilisé pour la
sémantique et la mise en page)
● L’élément keygen pour générer une paire de clés cryptées
● L’élément progress pour représenter une barre de progression
● L’élément meter pour représenter un état d’avancement autre que par le biais
numérique (utilisé pour la sécurité d’un mot de passe par exemple)
Nouveaux éléments de formulaire
44. Ippon Technologies © 2014
● L’utilisation des types de champ input peut permettre avec l’aide de CSS de
faciliter la compréhension d’un formulaire
● Il est possible d’effectuer des changements de style CSS en fonction de l’état d’
un champ input avec le sélecteur de pseudo classes “d’état d’élément d’
interface” :invalid
Un peu de CSS
45. Ippon Technologies © 2014
● Ne fait pas partie du scope initial Web Forms 2.0, mais intéressant d’associer
ces fonctionnalités aux formulaires
● Les attributs draggable et dropzone combinés pour la fonctionnalité de “drag
and drop”
● L’attribut draggable déclare que votre élément peut se déplacer sur votre page
● L’attribut dropzone déclare que votre élément est un conteneur potentiel
Les attributs draggable et dropzone
46. Ippon Technologies © 2014
● L’événement dragstart indique que l’élément draggable débute son
déplacement
● L’événement drag indique que l’élément draggable est en cours de
déplacement
● L’événement dragend indique que l’élément draggable finit son déplacement
Les événements associés (1)
47. Ippon Technologies © 2014
● L’événement dragenter indique qu’un élément draggable entre dans le
périmètre d’un élément dropzone
● L’événement dragover indique qu’un élément draggable survole le périmètre
d’un élément dropzone
● L’événement dragleave indique qu’un élément draggable quitte le périmètre
d’un élément dropzone
● L’événement drop indique que l’élément dropzone reçoit un élément
draggable
Les événements associés (2)
48. Ippon Technologies © 2014
● L’événement drag est déclenché continuellement lorsque l’élément draggable
est déplacé (même sans mouvement de curseur)
● L’événement dragover est lui aussi déclenché continuellement... ce
comportement pose problème car il empêche l’événement drop d’être perçu, il
faut donc le désactiver
● Le comportement des événements peut être variable selon les navigateurs
Les notions à connaître sur les
événements
49. Ippon Technologies © 2014
● Pour porter des données de l’élement draggable vers l’élément dropzone
● Affectation des données au moment de l’événement dragstart avec la
métode setData()
● Récupération des données au de l’événement drop avec la méthode
getData()
● /! Impossible de récupérer les données du DataTransfer pour les dragenter,
dragover, etc ; il faut utiliser le local storage pour ces cas là
L’interface DataTransfer
51. Ippon Technologies © 2014
Sommaire
● Les éléments audio et vidéo
● Les types de formats et codecs
● Canvas
● SVG
● Canvas VS SVG
52. Ippon Technologies © 2014
Les éléments audio et vidéo
Petit rappel
● Anciennement, des plugins propriétaires dans les navigateurs pour publier des
vidéos, de l’audio et des jeux
○ Flash
○ Silverlight
● Technologies puissantes mais non ouvertes et non standardisées par la
communauté, donc non pérennes
● HTML5 pour faire la même chose mais de façon native dans les navigateurs
○ Élément audio
○ Élément video
○ Canvas
○ SVG
53. Ippon Technologies © 2014
Audio & vidéo : les éléments
● Le nouvel élément audio permet au navigateur de lire nativement un son audio,
c’est simple d’utilisation
<audio src=”audio.mp3”></audio>
● Le nouvel élément video permet au navigateur de lire nativement une vidéo, c’
est également simple d’utilisation
<video src=”video.ogv”></video>
54. Ippon Technologies © 2014
Audio & vidéo : les attributs
● Les 2 éléments possèdent quelques attributs booléens
○ autoplay : pour lancer automatiquement la lecture
○ loop : pour avoir une lecture en boucle
○ controls : pour afficher des contrôles natifs au navigateurs
● Un attribut booléen ne prend pas de valeur
Exemple : autoplay / autoplay=”true”
● Les 2 éléments possèdent un attribut preload pour précharger le media, attribut
qui peut avoir plusieurs valeurs
○ auto : charge la totalité du media
○ meta : charge uniquement les méta-informations
○ none : pour ne pas précharger
55. Ippon Technologies © 2014
Vidéo : attribut spécifique
● L’élément video possède un attribut spécifique poster afin d’afficher une image
de substitution avant la lecture d’une vidéo
<video src=”video.ogv” poster=”poster.jpg”></video>
56. Ippon Technologies © 2014
Audio et vidéo, des Media Element
● Les éléments audio et video implémente l’interface HTML Media Element ce
qui vous permet d’accéder à des propriétés (modification ou lecture seule) ou de
gérer certains événements
57. Ippon Technologies © 2014
Media Element : les propriétés
● Propriétés en modification
○ currentTime : position courante de lecture
○ paused : booléen pour indiquer si la lecture est en pause
○ volume : volume audio (0 à 1.0)
○ muted : booléen pour indiquer si mode silencieux
○ etc.
● Propriétés en lecture seule
○ duration : durée totale
○ ended : booléen pour indiquer si la lecture est terminée
○ networkState : valeurs pour indiquer l’accès au média
○ readyState : valeurs pour indiquer l’état du média
○ etc.
● Les valeurs des propriétés en temps sont en secondes
58. Ippon Technologies © 2014
Media Element : les événements
● Les événements permettent d'interagir avec le lecteur
○ play() : lance la lecture
○ pause() : met en pause la lecture
○ load() : réinitialise l’élément et l’algorithme de sélection de ressource
○ canPlayType() : détecte les capacités de lecture du navigateur
59. Ippon Technologies © 2014
Les types de formats et codecs
Une simplicité relative
● Les formats audio et vidéo sont nombreux et les navigateurs n’ont pas toutes les
mêmes capacités
● Pour palier les incertitudes de compatibilité il est possible de préciser plusieurs
fichiers source avec le nouvel élément source en précisant le type MIME
<audio>
<source src=”audio.mp3” type=”audio/mp3”>
<source src=”audio.aac” type=”audio/mp4”>
Pas de fichier audio disponible :(
</audio>
60. Ippon Technologies © 2014
Cas plus complexes
● Il est également possible de préciser les codecs
<source src=”video.ogv”
type=”audio/ogv; codecs=theora, vorbis”>
● Il est également possible de différencier avec l’attribut media
<source src=”video.ogv”
type=”audio/3gpp” media=”handled”>
● Si le navigateur ne supporte rien il est toujours possible de le détecter via
canPlayType() et de faire appel aux anciennes technologies propriétaires
61. Ippon Technologies © 2014
L’élément Canvas
● Le nouvel élément canvas introduit avec HTML5 permet de créer des dessins /
images de manière dynamique
● Il convient de spécifier ses dimensions en le déclarant
● Le contenu qui est déclaré dans l’élément ne sera visible que par les
navigateurs ne supportant pas l’élément
<canvas id =”cnvs” width=”400” height =”300”>
Votre navigateur ne supporte pas canvas :( </canvas>
● Il existe plusieurs polyfills pour paliers quelques manques pour certains
navigateurs
62. Ippon Technologies © 2014
L’utilisation canvas
● Un élément canvas s’utilise via son API, on y accède en JavaScript en
récupérant un contexte
var canvas = document.getElementById('cnvs');
var ctx = canvas.getContext('2d');
63. Ippon Technologies © 2014
L’utilisation canvas
● Avec le contexte on peut alors accéder aux propriétés fondamentales
○ fillStyle : définit le style de remplissage
○ lineWidth : définit l’épaisseur du trait
○ etc.
● Et aux fonctions fondamentales
○ fillRect() : dessine un rectangle plein
○ lineTo() : dessine une ligne
○ drawImage() : dessine une image
○ etc.
ctx.fillStyle = 'blue';
ctx.lineWidth = 5;
ctx.fillRect(10, 10, 380, 200);
64. Ippon Technologies © 2014
Les options du “crayon”
● Couleurs prédéfinies , spécifiques (hexadécimal ou RGBA)
○ ctx.fillStyle = 'yellow';
○ ctx.fillStyle = '#FFFF00' // aka yellow;
○ ctx.strokeStyle = 'rgba(0, 0, 200, 0.5)';
● 1 type de remplissage “fill” (plein)
○ ctx.fillRect(90, 210, 180, 120);
● 1 type de remplissage “stroke” (contours)
○ ctx.strokeRect(90, 210, 180, 120);
● Épaisseur du trait
○ ctx.lineWidth = 40;
65. Ippon Technologies © 2014
● Créer un dégradé linéaire avec la fonction createLinearGradient(xA, yA,
xB, yB) avec A point de départ et B point d’arrivée
var gradient = ctx.createLinearGradient(100, 200, 400,
300);
gradient.addColorStop(0, 'green');
gradient.addColorStop(0.5, 'yellow');
gradient.addColorStop(1, 'red');
ctx.fillStyle = gradient;
ctx.fillRect(100, 200, 300, 100);
Le dégradé linéaire
66. Ippon Technologies © 2014
● Créer un dégradé radial avec la fonction createRadialGradient(xA, yA, rA,
xB, yB, rB) avec r la longueur du rayon du point
var gradient= ctx.createRadialGradient
(200, 250, 50, 200, 250, 100);
gradient.addColorStop(0, 'green');
gradient.addColorStop(0.5, 'yellow');
gradient.addColorStop(1, 'red');
ctx.fillStyle = gradient;
ctx.fillRect(100, 200, 300, 100);
Le dégradé radial
67. Ippon Technologies © 2014
● La forme du crayon au extrémités d’un tracé avec la propriété lineCap qui peut
prendre les valeurs butt (par défaut), round ou square
● La forme du crayon aux jointures d’un tracé avec la propriété lineJoin qui
peut prendre les valeurs miter (par défaut), round ou bevel
Les options avancées du “crayon”
68. Ippon Technologies © 2014
● Un tracé correspond à un chemin, on explicite le début de l’enregistrement du
chemin avec la fonction beginPath()
● Un tracé peut être terminé avec la fonction closePath()
● Les méthodes moveTo() et lineTo() permettent de définir le tracé
ctx.beginPath();
ctx.moveTo(100, 200);
ctx.lineTo(200, 300);
ctx.lineTo(100, 300);
// OPTIONNEL
ctx.closePath();
ctx.stroke();
Les tracés
69. Ippon Technologies © 2014
Les tracés complexes
● Les fonctionnalités rectangulaires sans “Path”
○ fillRect(x, y, width, height) : remplit un rectangle
○ strokeRect(x, y, width, height) : entoure un rectangle
○ clearRect(x, y, width, height) : efface un rectangle
● Les fonctionnalités rectangulaires avec “Path”
ctx.beginPath();
ctx.rect(50, 50, 100, 50);
ctx.stroke(); // marche avec fill() aussi
● Les fonctionnalités pour tracer des arcs
○ arc(...) et arcTo(...)
ctx.arc(300, 70, 35, 0, Math.PI*2, true);
● Les fonctionnalités “vectorielles”
○ bezierCurveTo(...)
○ quadraticCurveTo(...)
70. Ippon Technologies © 2014
Les transformations
● Les transformations s’appliquent sur le contexte dans son ensemble mais n’
affecteront que les futures actions sur le canvas
● Réduction ou agrandissement
○ scale (x, y) : x et y coefficients appliqués horizontalement et
verticalement
● Rotation
○ rotate (angle)
● Translation
○ translate (x, y) : translation de x et y
● Transformation matricielle
○ transform(...) et setTransform(...)
71. Ippon Technologies © 2014
La mémoire du contexte
● Il est assez fréquent de modifier le contexte pour diverses raisons, il est possible
d’enregistrer l’état d’un contexte
○ save() : pour mémoriser un état de contexte
○ restore() : pour récupérer un état de contexte
● Il est possible de mémoriser plusieurs états, la mémorisation fonctionnant
comme une pile
ctx.fillStyle = 'white'; ctx.save();
ctx.fillStyle = 'red'; ctx.save();
ctx.fillStyle = 'blue';
ctx.fillRect(...); // blue
ctx.restore();
ctx.restore();
ctx.fillRect(...); // white
// red not available ... :(
72. Ippon Technologies © 2014
Les images
● Possibilité d’importer des images dans un canvas
○ drawImage(img, x, y) : importer une image avec ses dimensions
○ drawImage(img, x, y, width, height) : importer une image en la
redimensionnant
○ drawImage(img, imgx, imgy, imgwidth, imgheight, cnvsx,
cnvsy, cnvswidth, cnvsheight) : importer une zone de l’image en la
redimensionnant ; utilisée pour les sprites
● Il est obligatoire de charger dynamiquement le contenu à partir de l’objet Image
de JavaScript
var imageLoaded = new Image();
imageLoaded.onload = function() {
ctx.drawImage(imageLoaded, 100, 300, 200, 200);
}
imageLoaded.src = 'ippon_400x400.png';
73. Ippon Technologies © 2014
Les patterns d’images
● Possibilité de créer un motif à partir d’une image avec la fonction
createPattern(img, option) avec les options repeat, repeat-x,
repeat-y, no-repeat
var pattern = ctx.createPattern(img, 'repeat');
ctx.fillStyle = pattern;
74. Ippon Technologies © 2014
● Possibilité de créer, lire, modifier et injecter des pixels d’une image
○ createImageData(width, height) : pour créer une image
○ getImageData(x, y, width, height) : récupérer une image d’une
certaine taille à partir d’un point
○ putImageData(imgData, x, y) : injecter une image
○ La propriété data permet d’accéder aux tableaux de valeur des pixels selon
le formalisme RVBA
Les images pixel par pixel
75. Ippon Technologies © 2014
● Possibilité d’écrire du texte
○ fillText(txt, x, y, maxw) : écrit un texte avec maxw pour largeur
maximale (optionnel)
○ strokeText(txt, x, y, maxw) : entoure un texte avec maxw pour
largeur maximale (optionnel)
● Mesurer la taille d’un texte
○ measureText(txt) : détermine l’espace nécessaire pour un texte ; ctx.
measureText(txt).width;
● Propriétés du texte
○ font : police ; ctx.font = '20pt Georgia';
○ textAlign : alignement horizontal, options : start (défaut), end, left,
center, right
○ textBaseline : alignement vertical, options : alphabetic (défaut), top,
hanging, middle, ideographic, bottom
Le texte
76. Ippon Technologies © 2014
Les effets
● Propriétés d’ombrage sur le contexte
○ shadowBlur : valeur du flou de l’ombrage
○ shadowColor : couleur de l’ombrage
● Propriété de transparence sur le contexte
○ globalAlpha : opacité du contexte
● Propriété de compositions sur le contexte
○ globalCompositionOperation : types de composition, options :
source-over (défaut), source-in, source-out, source-atop,
destination-over, destination-in, destination-out,
destination-atop, lighter, darker, copy, xor
● Fonction de masque sur le contexte
○ clip() : mémorise le chemin actuel pour se servir de masque
○ Possibilité de fusionner plusieurs masques
77. Ippon Technologies © 2014
● Le canvas peut écouter les événements de la souris
○ Fonctions classiques onmousedown, onmousemove, onmouseup
cns.onmouseup = function(e) {
ctx.strokeStyle = 'black';
ctx.fillRect(e.offsetX, e.offsetY, 4, 4);
}
● Le body peut écouter les événements du clavier et on interagit ensuite avec le
canvas
○ Fonctions classiques onkeypress, onkeyup, onkeydown et propriété
keyCode de l’événement
document.body.onkeypress = function(e) {
ctx.strokeStyle = 'black';
if (String.fromCharCode(e.keyCode) === 'a')
ctx.fillRect(e.offsetX, e.offsetY, 4, 4);
}
Les événements souris et claviers
78. Ippon Technologies © 2014
Animation du canvas
● Créer des animations complexes se définit via la boucle infinie draw > clear >
draw > clear > draw > ...
● Utilisation “basique” avec la fonction setInterval() pour itérer à intervalle de
temps régulier
● Utilisation “avancée” avec requestAnimationFrame() pour moins gaspiller
les temps morts entre les intervalles et ainsi y gagner en performance
79. Ippon Technologies © 2014
Canvas from scratch ?
● Le canvas possède des propriétés et des fonctionnalités basiques, mais qui
combinées entre elles permettent de faire énormément de choses
● Cela demande de coder énormément de choses également
● Il existe beaucoup de librairies pour se simplifier la vie :
○ KineticJS : Éprouvée et polyvalente
○ Paper.js : Du vectoriel dans le canvas
○ Processing.js : Très simple d’accès car s’appuyant sur le langage
Processing (destiné aux non développeurs)
○ three.js : Pour faire de la 3D avec de la 2D (du moins sans WebGL si l’on
souhaite)
● Le canvas permet la connexion avec WebGL (qui se base sur le standard 3D
OpenGL), loin d’être amplement supporté étant donné la compatibilité tardive
80. Ippon Technologies © 2014
L’élément SVG
● Format d’images vectorielles, contrairement aux images traditionnelles qui sont
réalisées avec des pixels
● L’élément svg permet au navigateur de déclarer une image vectorielle
<svg>
<circle cx="200" cy="100" r="100"></circle>
</svg>
● Une image vectorielle ça peut aller loin ...
81. Ippon Technologies © 2014
Décrire un élément SVG
● Le contenu d’un élément SVG est décrit en XML, avec divers éléments
○ circle : pour créer un cercle
○ rect : pour créer un rectangle
○ line : pour créer une ligne
○ etc ; cf. https://developer.mozilla.org/fr/docs/SVG/Element
● La description d’une image vectorielle peut s’avérer vite “verbeuse”
● Un élément SVG est généralement contenu dans un fichier (zippé) plutôt que
dans les sources directement
● Une image vectorielle est généralement créée avec des logiciels adaptés
(Inkscape, Illustrator, Sketch, GIMP, etc.)
82. Ippon Technologies © 2014
Pourquoi un élément SVG ?
● Le navigateur interprète “à chaud” les formes vectorielles, l’image s’affiche alors
dans les meilleures conditions (dimensions, résolutions)
● Il est également possible de lire ou modifier le contenu, et donc se le ré-
approprier facilement
○ Appliquer un style CSS
○ Apporter du dynamisme et des interactions via JavaScript
○ Apporter des filtres et des effets
83. Ippon Technologies © 2014
SVG from scratch ?
● Idem pas la peine de repartir de zéro
● Il existe beaucoup de librairies pour se simplifier :
○ D3.js : Top pour la “data-visualization”
○ Raphaël : Librairie polyvalente, qui simplifie l’utilisation des images
vectorielles
○ Snap.svg : Le successeur de Raphaël
84. Ippon Technologies © 2014
Canvas VS SVG : comment choisir ?
● En fonction des images souhaitées
● En fonction des compatibilités navigateurs
○ Attention SVG : > IE8 & > Android 2.3
● En fonction de la scalabilité des images
● En fonction des interactions / animations
86. Ippon Technologies © 2014
Sommaire
● De CSS2 à CSS3
● Les implémentations selon les navigateurs
● Gestion media avec les media queries
● Propriétés de texte
● Les décorations
● Les modes de positionnement
87. Ippon Technologies © 2014
De CSS2 à CSS3
● 1997 : Début du travail sur les spécifications du CSS2
● 1999 : Début du travail sur les spécifications du … CSS3
● CSS2 introduit de très nombreuses propriétés, notamment de positionnement
● CSS3 propose une approche “modulaire” dans la façon du travail : spécifications
divisées en modules, par ex le module “Animations”, le module “Bordures”, etc.
88. Ippon Technologies © 2014
Les implémentations selon les
navigateurs
Les préfixes propriétaires
● CSS3 est toujours en cours de rédaction : implémentation progressive dans les
navigateurs
● Pour commencer à implémenter les nouvelles propriétés sans attendre la
spécification finale, les moteurs de rendu utilisent des préfixes propriétaires
● Un moteur de rendu pouvant être utilisé par plusieurs navigateurs
● En fait on devrait dire les implémentations selon les moteurs de rendu
89. Ippon Technologies © 2014
● -webkit- pour Webkit (moteur de rendu), utilisé par Safari mais aussi Chrome,
Android, etc.
● -moz- pour Mozilla, moteur de rendu Gecko utilisé par Firefox, Thunderbird,
etc.
● -o- pour Opera, moteur de rendu Presto utilisé par Opera, Nintendo DS
Browser, etc.
(anciennement vrai les nouvelles versions utilisent -webkit-)
● -ms- pour Microsoft, moteur de rendu Trident, utilisé par Internet Explorer
Les préfixes à connaître
90. Ippon Technologies © 2014
● Les préfixes c’est pas l’extase, mais ça sera quand même toujours plus propre
que les hacks CSS utilisés dans le passé
● Dans la pratique on utilise tous les préfixes propriétaires
● On ajoute toujours la propriété réelle en plus des propriétaires ; lorsque la
propriété passe en Release Candidate, les navigateurs remplacent leurs
propriétés respectives par la vraie propriété
section .trainings {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
Les préfixes, une fausse bonne idée ?
91. Ippon Technologies © 2014
CSS2 et les media
● Gestion “basique” de CSS2 pour les différents medias
● Un media c’est un écran, un support papier (pour l’impression), une plage
braille, une TV, etc.
● On peut déclarer une feuille de style par media souhaité, ou bien ajouter la règle
@media dans une feuille CSS pour ajouter un style propre à un media
Gestion media avec les media queries
92. Ippon Technologies © 2014
● Le problème, il n’y a pas de gestion fine pour les différents supports au sein d’un
même media, les écrans par exemple
● Désormais, avec tous les terminaux possédant un écran (smartphone, tablette,
PC, TV, etc.), on a des écrans allant de 2.5” à 27” et plus…
● On ne peut plus proposer le même rendu, soit on fourche notre rendu, soit celui-
ci doit s’adapter (Responsive Web Design)
L’avènement des nouveaux terminaux
93. Ippon Technologies © 2014
● Le Responsive Web Design est une approche qui permet à votre rendu de s’
adapter en fonction des capacités du media sur lequel vous voulez l’afficher
● Cela peut être sur les capacités de votre écran mais aussi sur celles de votre
réseau par exemple
● CSS3 peut s’approprier certaines capacités avec les media queries, mais pas
toutes (pas le réseau par exemple)
Responsive Web Design ?
94. Ippon Technologies © 2014
● Distinction plus fine des capacités des medias
● Les distinctions : color, color-index, aspect-ratio, ratio, device-
aspect-ratio, device-height, device-width, grid, height,
monochrome, orientation, resolution, scan, width
● On peut ajouter les préfixes min- et max- lorsque les valeurs des capacités
sont numériques
● On peut combiner les opérateurs logiques and, only et not
Les media queries
95. Ippon Technologies © 2014
● La propriété box-sizing délimite la taille d’une boîte
● La taille peut être définie par rapport au contenu via la propriété content-box
(valeur par défaut)
● La taille peut être définie par rapport à sa marge intérieure via la propriété
padding-box
● La taille peut être définie par rapport à sa marge intérieure et sa bordure via la
propriété border-box
● Cette propriété s’avère très utile lorsque l’on veut respecter une largeur en
positionnant plusieurs éléments côte à côte sans se soucier des marges
intérieures et des bordures
Propriété box-sizing
96. Ippon Technologies © 2014
Propriétés de texte
Un peu d’originalité
● CSS introduit la possibilité de définir ses propres polices à partir d’un fichier de
polices
● Pour déclarer la police, il faut utiliser la règle @font-face
● Pour utiliser cette police, il suffit ensuite de la référencer via la propriété “font-
family”, tout comme les font-family “classiques”
97. Ippon Technologies © 2014
Propriétés de texte
Faites de l’ombre à votre texte
● On peut maintenant ajouter très simplement une ombre à un texte avec la
propriété text-shadow
98. Ippon Technologies © 2014
Propriétés de texte
Ne pas dépasser
● CSS3 introduit la possibilité de “casser” les mots pour qu’ils soient affichés sur
plusieurs lignes plutôt que de sortir de l’élément parent : word-wrap: break-word;
● On peut également gérer les “cassures” de manière plus globale avec la
propriété “word-break”, qui permet par exemple de couper n’importe quel mot au
milieu dès qu’il arrive en fin de div : word-break: break-all;
● Ou à l’inverse, pour être sûr qu’aucun ne soit coupé : word-break: keep-all;
● Une autre propriété permet de gérer les débordements pour les remplacer, par
exemple, par “...” : text-overflow: ellipsis;
99. Ippon Technologies © 2014
Propriétés de texte
Comme dans les journaux
● La propriété column-count permet désormais de diviser un élément en plusieurs
colonnes, à la façon d’un journal
● L’avantage est la répartition fluide des textes entre les différentes colonnes
● On peut aérer les colonnes avec la propriété column-gap
● On peut séparer les colonnes par des indicateurs visuels (ligne par exemple)
avec la propriété column-rule
100. Ippon Technologies © 2014
Les décorations
Simplifiez-vous la vie !
● Plus besoin de composer avec de multiples images pour créer des ombres, des
dégradés, des coins arrondis ou des arrière-plans multiples
● En combinant plusieurs effets on peut obtenir des choses dignes de
“Photoshop”
● Le faire en CSS plutôt que de passer par des images améliore le chargement de
la page et assure une meilleure maintenabilité
● Faire attention aux compatibilités navigateurs...
101. Ippon Technologies © 2014
Les décorations
Les ombres
● La propriété box-shadow permet de créer une ombre sur un bloc
box-shadow: h-pos v-pos (blur) (spread) (color) (inset);
○ Décalage horizontal et/ou vertical de l’ombre
○ Dureté de l’ombre
○ Taille de l’ombre
○ Couleur de l’ombre
○ Ombrage intérieur ou extérieur
section .note {
-moz-box-shadow: -2px 2px 4px #c0c0c0;
-webkit-box-shadow: -2px 2px 4px #c0c0c0;
box-shadow: -2px 2px 4px #c0c0c0;
}
102. Ippon Technologies © 2014
Les décorations
Les arrondis
● La propriété border-radius permet de créer des bords arrondis sur un bloc
● A tel point que l’on peut transformer un carré en un rond !
103. Ippon Technologies © 2014
Les décorations
Les dégradés (1)
● Les fonctions linear-gradient et radial-gradient créent des images qui
représentent des dégradés
● Ces images sont sans dimensions intrinsèques, cela signifie qu’elles s’adaptent
aux éléments auxquelles elles sont appliquées
● Les dégradés peuvent être utilisés partout où une image peut être déclarée:
background, background-image, border-image, list-style-image
● La fonction linear-gradient est utilisée pour réaliser un dégradé linéaire
● La fonction radial-gradient est utilisée pour réaliser un dégradé radial
104. Ippon Technologies © 2014
Les décorations
Les dégradés (2)
● Dans un dégradé, possibilité d’ajouter X couleurs, avec chacune une “position”
et une opacité : très puissant mais très vite complexe à lire également
● Syntaxes hétérogènes selon les navigateurs
● Favoriser les outils de génération tous prêts, par exemple : http://www.colorzilla.
com/gradient-editor/
105. Ippon Technologies © 2014
Les décorations
Les arrières plans multiples
● Possibilité d’appliquer plusieurs images d’arrière-plan à un même élément en
déclarant X images pour un background
● On peut déclarer les propriétés background-size, background-position,
background-repeat, background-origin de manière distincte pour chaque image
composant le background, ou de manière commune
● A utiliser à bon escient puisque les “shadow” et les “border” permettent de
mettre en valeur certains arrières plans
● Cela permet le “défilement parallaxe”, technique permettant de créer une illusion
de profondeur en faisant défiler les images de l’arrière plan plus lentement que
les images du premier plan
106. Ippon Technologies © 2014
Les modes de positionnement
Ce que l’on a déjà vu
● Les media queries avec des points de rupture et leurs associations avec la
propriété float pour redéfinir le positionnement “à chaud” des éléments dans une
page
● Le positionnement des flux de textes comme dans les journaux avec la propriété
column-count
107. Ippon Technologies © 2014
Les modes de positionnement
Flexbox, la nouveauté
● Jusque là, les principaux type de positionnement étaient block, inline, inline-
block et table
● Nouveau type de positionnement : flex pour un bloc “flexible”
● Les éléments contenus dans un bloc typé flex, peuvent avoir un comportement
adaptatif si la taille de celui-ci a été atteinte, plusieurs comportements peuvent
être déclarés avec la propriété flex-wrap
● La flexibilité du bloc peut être horizontale flex-direction: row ou verticale flex-
direction: column
● Pas encore totalement supporté partout !
109. Ippon Technologies © 2014
Sommaire
● Parcourir le DOM
● Sélecteurs d’attributs
● Sélecteurs de pseudo classes
● Combinateur d’adjacence indirecte
110. Ippon Technologies © 2014
Parcourir le DOM
Encore plus de sélecteurs
● Pour appliquer un style à un élément il existe plusieurs manières de le
sélectionner : par élément, par attribut, par affiliation, par action, par état
● Le choix de la sélection s’effectue selon les attentes du style que l’on veut
appliquer, mais aussi par “la portée” de la sélection : générique ou spécifique
● Beaucoup de sélecteurs en CSS2 existaient avant CSS3, ils sont toujours d’
actualité
● CSS3 vient enrichir le panel de sélecteurs possibles, pour d’offrir de nouvelles
possibilités de style, mais aussi pour en faciliter la maintenabilité
111. Ippon Technologies © 2014
Sélecteurs d’attributs
Affiner la recherche de l’attribut
● Possibilité en CSS2 de sélectionner un attribut ayant une valeur précise, par
exemple input[type=”button”]
● CSS3 permet d’affiner les possibilités de recherche sur la valeur de l’attribut
● Attribut commençant par : [attribute^=theValue]
● Attribut finissant par : [attribute$=theValue]
● Attribut contenant : [attribute*=theValue]
112. Ippon Technologies © 2014
Sélecteurs de pseudo classes
Le panel des pseudo classes
● Possibilité en CSS2 de sélectionner un élément en fonction de sa pseudo-classe
“action Usager”, par exemple a:hover
● CSS3 permet d’affiner les possibilités de recherche avec les pseudo classes
“structurelles”, “d’état d’élément d’interface”, “de contenu”, “de négation” et “:
target”
113. Ippon Technologies © 2014
Sélecteurs de pseudo classes
Sélecteurs de pseudo classes “structurelles” (1)
● Ils permettent de sélectionner plus précisément des éléments enfants
● Sélectionner le n-ième enfant de son parent avec E:nth-child(n)
● Sélectionner le n-ième enfant de son parent en commençant par la fin avec E:
nth-last-child(n)
● Les indexes commencent à 0
114. Ippon Technologies © 2014
Sélecteurs de pseudo classes
Sélecteurs de pseudo classes “structurelles” (2)
● Sélectionner le premier enfant de son parent en avec E:first-child
● Sélectionner le dernier enfant de son parent en avec E:last-child
● Sélectionner le seul enfant de son parent en avec E:only-child
● Sélectionner un élément qui n’a aucun enfant avec E:empty
115. Ippon Technologies © 2014
Sélecteurs de pseudo classes
Sélecteurs de pseudo classes “structurelles” (3)
● Possibilité de sélectionner par type également sans se soucier de l’élément
parent
● En remplaçant “child” par “of-type”, on retrouve les mêmes correspondances
pour sélectionner par type : E:nth-of-type(n), E:nth-last-of-type(n), E:first-of-type,
E:last-of-type, E:only-of-type
116. Ippon Technologies © 2014
Sélecteurs de pseudo classes
Sélecteurs de pseudo classes “structurelles” (4)
● Sélectionner un élément qui n’a aucun enfant avec E:empty
● Sélectionner l’élément racine du document E:root
117. Ippon Technologies © 2014
Sélecteurs de pseudo classes
Sélecteurs de pseudo classes “d’état”
● Possibilité de sélectionner un élément en fonction de son état dans l’interface
● Les champs peuvent être activés E:enabled ou désactivés E:disabled
● Les case à cocher et les boutons radio peuvent être cochés E:checked ou
indéterminés E:indeterminate
● Il existe également les sélecteurs de pseudo éléments “fragments d’éléments d’
interface”. La partie d'un élément qui est actuellement sélectionnée/mise en
exergue par l'usager E::selection. Par exemple, la sélection d’un texte.
118. Ippon Technologies © 2014
Sélecteurs de pseudo classes
Sélecteurs de pseudo classes “de contenu”
● Possibilité de sélectionner un élément dont le contenu textuel concaténé
contient une sous-chaîne E:contains("theValue")
119. Ippon Technologies © 2014
Sélecteurs de pseudo classes
Sélecteurs de pseudo classes “de négation”
● Possibilité de sélectionner un élément qui n’est pas concerné par un sélecteur
E:not(“selector”)
120. Ippon Technologies © 2014
Sélecteurs de pseudo classes
Sélecteurs de pseudo classes “:target”
● Possibilité de sélectionner un élément qui est la cible de l'URL d'origine
contenant lui-même un fragment identifiant. Par exemple si l’URL courante est
http://foo.com/#thisSection, la pseudo-classe “:target” permettra de sélectionner
l’élément ayant pour id “thisSection”
121. Ippon Technologies © 2014
Combinateur d’adjacence indirecte
Qui est présent ?
● Possibilité en CSS2 de sélectionner un élément F qui est immédiatement
précédé par un élément E : E + F
● Possibilité en CSS3 de sélectionner un élément F qui est précédé par un
élément E : E ~ F
● Cela signifie l’élément F est il précédé d’un élément E ? Si oui ont-ils bien le
même parent ? Si c’est le cas alors l’élément F est sélectionné.
123. Ippon Technologies © 2014
Sommaire
1. Pourquoi privilégier les effets CSS3 plutôt que les effets
en JS
2. Les transformations graphiques
3. Les transitions
4. Les animations
124. Ippon Technologies © 2014
Pourquoi privilégier les effets CSS3
plutôt que les effets en JS
Éviter de lier le rendu au Javascript
● Le rendu final ne sera effectué qu’une fois les scripts chargés
● Avec CSS3, tous les styles sont au même endroit : plus facile à maintenir
● Le rendu est indépendant du JS
125. Ippon Technologies © 2014
Pourquoi privilégier les effets CSS3
plutôt que les effets en JS
Légèreté et rapidité
● Les scripts JavaScript sont allégés
● On évite une requête serveur pour récupérer le JavaScript qui gère le rendu
● Le rendu CSS3 sera plus rapide que le rendu JavaScript
126. Ippon Technologies © 2014
Les transformations graphiques
Origine et flux
● Par défaut, l’origine de la transformation est le point central (50%, 50%) de l’
élément à transformer
● Pour le changer, utiliser la propriété transform-origin
● Attention ! Il n’y a plus de notion de flux lorsqu’on utilise les transformations
127. Ippon Technologies © 2014
Les transformations graphiques
La rotation
● Possible d’effectuer une rotation sur les éléments dans toutes les directions,
aussi bien en 2D qu’en 3D
● Utilisation de la fonction transform : rotate() en 2D
● Utilisation des fonctions transform : rotateX(), transform : rotateY(),
transform : rotateZ() ou transform : rotate3d() en 3D
● Attention à l’axe de rotation. Par défaut l’élément pivote par rapport à son
centre. Pour changer cet axe, on utilise la propriété transform-origin
128. Ippon Technologies © 2014
Les transformations graphiques
La translation
● Possible d’effectuer une translation pour les éléments dans toutes les directions,
aussi bien en 2D qu’en 3D
● Utilisation de la fonction transform : translate() en 2D
● Utilisation des fonctions transform : translateX(), transform : translateY(),
transform : translateZ() ou transform : translate3d() en 3D
● Attention ! La fonction translate() ne doit pas être utilisée comme méthode de
positionnement des éléments mais plutôt pour les transitions ou animations. Elle
ne remplace pas donc le positionnement CSS “classique”
129. Ippon Technologies © 2014
Les transformations graphiques
Le zoom
● Possible d’effectuer un zoom pour les éléments dans toutes les directions, aussi
bien en 2D qu’en 3D
● Utilisation de la fonction transform : scale() en 2D
● Utilisation des fonctions transform : scaleX(), transform : scaleY(), transform
: scaleZ() ou transform : scale3d() en 3D
● Attention à la perte de qualité visuelle sur un agrandissement (élément texte en
particulier)
130. Ippon Technologies © 2014
Les transformations graphiques
La distorsion
● Possibilité d’effectuer une distorsion (décalage de l’axe X et de l’axe Y) de
l'élément
● Utilisation de la fonction transform : skew()
● Utilisation des fonctions transform : skewX(), transform : skewY()
131. Ippon Technologies © 2014
Les transformations graphiques
Un peu de mathématiques
● Possibilité d’appliquer des transformations mathématiques, avec l’aide de
matrices
● Utilisation de la fonction transform : matrix()
● Même propriété entre la 2D et la 3D mais avec plus de paramètres
transform:matrix(0.866,0.5,-0.5,0.866,0,0);
transform:matrix(0.866,0.5,-0.5,0.866,0,0, 0, -0.5, 0.866, 0.866, 0, ...);
132. Ippon Technologies © 2014
Les transformations graphiques
Combinez le tout
● Les différentes fonctions peuvent être chaînées
transform: translate(20px, 20px) rotate(50deg) skew(20deg, 30deg);
● Attention à l'ordre de déclaration des fonctions. Un translate() puis un scale() n'a
pas le même effet qu'un scale() puis un translate() !
● A utiliser à bon escient
133. Ippon Technologies © 2014
Les transitions
Une question d’états
● Transition : passage d’un état 1 à un état 2
● Il faut un événement qui va faire passer de l’état 1 à l’état 2
● Exemple : passage d’un bouton d’un état “normal” à l’état “hover” (au passage
de la souris)
134. Ippon Technologies © 2014
Les transitions
Comment définir une transition ?
● Définir (ou pas) l’état normal de l’élément
● Ajouter la transition désirée en cas de changement d’état, sur l’état “normal”
● Définir les changements subis lors du deuxième état
● A noter : l’élément effectuera la transition inverse lorsqu’il perdra son état 2 (par
exemple notre div retrouvera sa forme initiale si la souris n’est plus sur lui)
135. Ippon Technologies © 2014
Les animations
Une keyframe = une définition d’animation
● Pour définir une animation, il faut utiliser la règle @keyframes
● Il faut ensuite lui spécifier un nom
● A l’intérieur de cette règle il faut définir l’animation réelle : c’est-à-dire définir
quelles sont les transformations que va subir l’élément, état par état.
● On peut bien sûr combiner plusieurs propriétés au sein d’une même animation
136. Ippon Technologies © 2014
Les animations
Et pour la voir ?
● On utilise la nouvelle propriété animation en lui spécifiant le nom et la durée
● On peut régler le délai avant le démarrage de l’animation avec la propriété
animation-delay
● On peut aussi régler le statut initial de l’animation : en pause, en cours
● On peut gérer le nombre de cycles que fera l’animation, 1, 5, infini…
138. Ippon Technologies © 2014
Sommaire
● À la découverte des préprocesseurs CSS
● Les principaux préprocesseurs CSS
● Liste des fonctionnalités
139. Ippon Technologies © 2014
À la découverte des préprocesseurs
CSS
C’est quoi un préprocesseur CSS ?
● Pas un nouveau langage, mais plutôt un métalangage (du code pour produire du
code)
● Ça ne vient pas remplacer CSS, ça vient produire du CSS
● Pas un standard W3C
● Nouvelles syntaxes, dérivées fortement de celle de CSS
● C’est avant tout un outil
140. Ippon Technologies © 2014
À la découverte des préprocesseurs
CSS
A quoi ça sert un préprocesseur CSS ?
● A rendre plus dynamique le langage CSS qui est très statique (pas de variables,
pas de boucles, pas d’héritage, pas de fonctions)
● Étendre les possibilités de l’intégration ; sans pour autant être du CSS et donc
passer par une nouvelle normalisation W3C
● A factoriser du code et donc le rendre plus lisible et maintenable
● Produire un CSS valide sans passer par une interprétation du navigateur, c’est
lors du “préprocessing” que la la validation s’effectue
141. Ippon Technologies © 2014
Les principaux préprocesseurs CSS
SASS
● Préprocesseur développé en Ruby (nécessite une machine virtuelle Ruby)
● Fichiers .sass
● Axé développeur, car plutôt basé sur les lignes de commande et plus dur d’
installation
● Le site officiel : http://sass-lang.com
● Utilisé par “Zurb Foundation” mais également par “Twitter Bootstrap” désormais
142. Ippon Technologies © 2014
Les principaux préprocesseurs CSS
LESS
● Préprocesseur développé en JavaScript
● Peut s’utiliser côté client (via less.js) ou côté serveur (module node.js)
● Fichiers .less
● Axé intégrateur, car simplicité d’installation (du moins côté client) et d’utilisation
● Le site officiel : http://lesscss.org
● Utilisé par “Twitter Bootstrap”
143. Ippon Technologies © 2014
Les principaux préprocesseurs CSS
Les autres
● Stylus : préprocesseur libre et gratuit qui est un module node.js
● Compass : pas un préprocesseur mais un framework SASS
● Google Closure Stylesheets : préprocesseur codé par les équipes Google en
Java, le plus complexe, à utiliser pour la performance. Très peu utilisé dans les
communautés.
144. Ippon Technologies © 2014
Liste des fonctionnalités
Facilite la lecture des sources
● Découpage facile en plusieurs fichiers ayant chacun un rôle bien précis
● Possibilité de créer des règles imbriquées
● Utilisation des commentaires dans le fichier source mais pas dans la réalisation
145. Ippon Technologies © 2014
Liste des fonctionnalités
Assure la maintenabilité CSS
● Déclaration de variables
● Utilisation de fonctions
● Notion d’héritage
● Création de mixins
148. Ippon Technologies © 2014
Présentation Web API
Introduction
● HTML5 définit un nombre assez important de nouvelles API
● Leur pertinence est variable en fonction du type de projet concerné (toutes ne
sont pas utiles dans tous les projets)
● La formation illustre 3 API assez fréquemment utilisées :
○ Géolocalisation
○ Canvas
○ Web Storage (stockage local des données)
149. Ippon Technologies © 2014
Présentation Web API
Autres API, nombreuses et inégalement implémentées
● Video et Audio : capacités multimédia
● Offline Web app : applications déconnectées
● Drag & Drop
● Web SQL Database et IndexedDB : bases de données
● Selectors : méthodes de sélection DOM
● Web Workers : JavaScript en (multi)tâches
● ...
150. Ippon Technologies © 2014
Géolocalisation
Présentation
● Permet de récupérer les coordonnées complètes du client : latitude, longitude,
altitude (et notion de temps)
● Sur les terminaux disposant d'un module GPS, la précision sera souvent
meilleure que pour les autres, où la localisation par l'IP ou par triangulation (wifi,
GSM) sera utilisée
● C'est l'objet navigator qui sera porteur de l'information
if (navigator.geolocation) {
// API est disponible
}
151. Ippon Technologies © 2014
Géolocalisation
Récupération des coordonnées (théorie)
● L'exploitation de cette API ne peut se faire qu'après approbation de l'utilisateur
● Deux méthodes sont proposées :
○ getCurrentPosition() : récupère ponctuellement la position
○ watchPosition() : suit la position
● Les deux fonctions vont faire appel à des fonctions de callback que le
développeur spécifiera
● Les deux fonctions permettent aussi de définir une fonction de callback pour la
gestion des erreurs : TIMEOUT, POSITION_UNAVAILABLE,
PERMISSION_DENIED, UNKNOWN_ERROR
● Enfin, il est aussi possible de définir certaines options (troisième paramètre de la
fonction)
152. Ippon Technologies © 2014
Géolocalisation
Récupération des coordonnées (pratique)
navigator.geolocation.getCurrentPosition(
successCallback,
errorCallback, {
maximumAge:600000, // utilisation du cache ou non
timeout:0, // timeout
enableHighAccuracy:true // précision accrue (GPS)
}
);
153. Ippon Technologies © 2014
Géolocalisation
Avec Modernizr
● Penser à utiliser Modernizr pour tester le support et à défaut proposer une
implémentation alternative (polyfill)
Modernizr.load({
test: Modernizr.geolocation,
yep : 'geolocation.js',
nope: 'geolocation-polyfill.js'
});
● Il existe une multitude de polyfills pour les API HTML5 : https://github.
com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills#geo-location
154. Ippon Technologies © 2014
Présentation
● Nouvelle technique pour stocker localement des données
● Remplace avantageusement les cookies ou les connexions aux bases de
données distantes (en Ajax par exemple)
● Capacité allant de 5 à 10 Mo en général (cela dépend des navigateurs)
● Les données sont stockées sous forme clef-valeur
● Le stockage est réalisé par domaine (isolation)
● L’interface Storage possède deux interfaces “filles” :
○ sessionStorage sera limitée à la durée de la session
○ localStorage permet un stockage sans limite de durée
● Les 2 interfaces “hérite” des mêmes méthodes d’accès
Web Storage
155. Ippon Technologies © 2014
Les méthodes d’accès
● setItem(clef, valeur) : stocke une valeur
● getItem(clef) : récupère une valeur
● removeItem(clef) : supprime une valeur
● clear() : supprime tout (pour le domaine donné)
● key(index) : récupère la clef d'indice 'index'
● Et une propriété length qui indique le nombre de paires clef/valeur
Web Storage
156. Ippon Technologies © 2014
Web Storage
Avec Modernizr
● Penser à utiliser Modernizr pour tester le support et à défaut proposer une
implémentation alternative (polyfill)
Modernizr.load({
test: Modernizr.localstorage, // ou sessionstorage
yep : 'localStorage.js',
nope: 'localStorage-polyfill.js'
});
● Il existe une multitude de polyfills : https://github.
com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills#web-storage-
localstorage-and-sessionstorage
157. Ippon Technologies © 2014
A retenir
● Très simple d’utilisation
● Le format chaînes de caractères nécessite de faire des transformations (JSON.
stringify(), image en base64, etc.)
● Ça reste très limité au niveau de l’espace disponible, si vous avez vraiment
besoin de place : IndexedDB
Web Storage
159. Ippon Technologies © 2014
Sommaire
● Présentation Modernizr
● Modernizr pour CSS
● Modernizr pour JavaScript
● Le compagnon yepnope
160. Ippon Technologies © 2014
Présentation Modernizr
Introduction
● L'univers des navigateurs web est très fragmenté
● Plusieurs acteurs, plusieurs versions, plusieurs OS
● Les possibilités sont donc variables (HTML5, CSS3, API JavaScript)
● Afin qu'une application puisse tirer pleinement profit de la plate-forme sur
laquelle elle s'exécute, elle doit connaître ses possibilités
● Des solutions permettent cette détection, Modernizr en est une
● Modernizr supporte la quasi totalité des navigateurs
161. Ippon Technologies © 2014
Présentation Modernizr
Son fonctionnement
● Pour utiliser Modernizr, il suffit de l'ajouter aux ressources de type script de la
page
● Modernizr ne s'appuie pas sur la technique du « User Agent Sniffing » car trop
imprécise
● Il teste directement la capacité à faire du navigateur et va proposer 2 mises en
oeuvre
● Une mise en oeuvre CSS, qui s'appuiera sur des classes pour adapter le
comportement de la page aux capacités CSS
● Une mise en oeuvre JavaScript, avec un test conditionnel qui permettra
d'adapter le code JavaScript aux capacités offertes, notamment avec les polyfills
162. Ippon Technologies © 2014
Présentation Modernizr
Les polyfills
● Un « polyfill » (ou polyfiller) est un morceau de code JavaScript qui va émuler
une fonctionnalité non supportée par un navigateur de telle sorte que le
développeur puisse l'utiliser
● Exemple classique : ajout du support de canvas dans Internet Explorer en
s'appuyant sur Silverlight ou à défaut sur du VML
● Il existe presque un polyfill (souvent plusieurs) pour chaque fonctionnalité
HTML5 : https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-
Polyfills
163. Ippon Technologies © 2014
Modernizr pour CSS
Modernizr pour CSS (théorie)
● Lors du premier chargement de la page, la librairie exécute sa série de détection
de fonctionnalités et utilise les résultats pour ajouter des attributs de classe à l’
élément <html>
<html class=”js opacity cssgradients no-csscolumns ...”
● Ajout d'une classe « no-js » à l'élément html permet de prévoir un comportement
spécifique si le JavaScript n'est pas disponible
● Le script Modernizr doit être défini dans l'élément head et après les définitions
de style
164. Ippon Technologies © 2014
Modernizr pour CSS
Modernizr pour CSS (pratique)
<html class="js boxshadow cssgradients no-csscolumns ...">
<style type=”text/css”>
.csscolumns {
/* pour les navigateurs supportant multi-column */}
.no-csscolumns {
/* pour les navigateurs NE supportant PAS multi-column */}
</style>
<script src="modernizr.js"></script>
165. Ippon Technologies © 2014
Modernizr pour JavaScript
Mise en oeuvre JavaScript (théorie)
● Modernizr propose de construire une dépendance JavaScript sur mesure en ne
sélectionnant QUE les fonctionnalités que l'on souhaite tester
● L'objet Modernizr expose les capacités détectées, facilitant l'écriture du code
JavaScript
● La documentation sur les capacités détectables www.modernizr.com/docs
● Des plug-ins sont disponibles pour étendre encore plus le champ des tests (dart,
vibration, notification, cors, ...)
● Il est également possible de faire appel au “media queries” via Modernizr
Modernizr.mq(‘only screen and (max-width: 480px)’);
166. Ippon Technologies © 2014
Mise en application
Mise en oeuvre JavaScript (pratique)
if (Modernizr.localstorage) {
// script si local storage disponible
} else {
// script si local storage NON disponible
}
167. Ippon Technologies © 2014
Le compagnon yepnope
Présentation
● Le code JavaScript présenté précédemment n'est pas optimal
● Quelle que soit l'aptitude du navigateur, le code pour les deux scénarios (apte
ou non) est chargé dans la page : pas optimal en volume, ni en lisibilité
● L'idéal serait de ne charger QUE le script correspondant
● yepnope.js est un chargeur de scripts utilisé en interne dans Modernizr et qui
permet un chargement spécifique
168. Ippon Technologies © 2014
Le compagnon yepnope
Mise en oeuvre (théorie)
● yepnope va permettre de ne charger que les scripts nécessaires adaptés aux
capacités du navigateur
● Le code n'embarquera plus explicitement les tests if
● Les valeurs pour 'yep' et 'nope' sont des tableaux : plusieurs ressources, aussi
bien CSS que JS, peuvent être chargées
● Modernizr.load admet aussi bien une chaîne, un objet ou un tableau d'objets
● Le test peut porter sur plusieurs aptitudes : l'expression sera évaluée pour
déterminer le booléen correspondant
169. Ippon Technologies © 2014
Le compagnon yepnope
Mise en oeuvre (pratique)
Modernizr.load({
// le test sur le support du navigateur
test: Modernizr.geolocation,
// chargements (yep/nope)
yep: "geolocation.js",
nope: "geolocation-polyfill.js",
// appelée à la toute fin
complete: function() {console.info("done");}
});
170. Ippon Technologies - 43, avenue de la grande Armée 75116 Paris
01 46 42 48 48 - contact@ippon.fr - www.ippon.fr - blog.ippon.fr
- www.ipponusa.com - www.ippon-hosting.com