Formation html5 CSS3 offerte par ippon 2014

Formation HTML5 / CSS3

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




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.


Pour nous contacter

Pour nous contacter et participer à nos formations :- Technique : [email protected] Commercial : [email protected]

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

mailto:[email protected]

mailto:[email protected]

http://www.ippon.fr/formation

http://blog.ippon.fr


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


HTML5 depuis HTML en passant par XHTML


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 ?



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



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



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



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



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



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)



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>

http://www.w3.org/TR/html4/strict.dtd

http://www.w3.org/TR/html4/strict.dtd



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

http://caniuse.com/



“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”


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


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


HTML5 nouveaux éléments et attributs


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


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)

http://caniuse.com/



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



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>


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



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”



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


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


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


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



Les éléments de structure● Les éléments <frame>, <frameset>, <noframes> ne doivent plus être utilisé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é


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)



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)



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



Le reste● Les “Web form”● Les éléments multimédia● Et tant d’autres, consulter http://www.w3.org/TR/html5-diff/

http://www.w3.org/TR/html5-diff/


Les formulaires “Web form”


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”


Nouveaux types d’input

● Pour les expressions récurrentes● Pour les dates● Autres


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"/>


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


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)


● 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


● 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


● 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


● 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


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


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


● 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


● 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


HTML5 multimédia et dessin


Sommaire

● Les éléments audio et vidéo● Les types de formats et codecs● Canvas● SVG● Canvas VS SVG


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


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>


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 valeurExemple : 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


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>


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


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


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


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>


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


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


L’utilisation canvas

● Un élément canvas s’utilise via son API, on y accède en JavaScript en récupérant un contextevar canvas = document.getElementById('cnvs');var ctx = canvas.getContext('2d');


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


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;


● 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éevar 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


● Créer un dégradé radial avec la fonction createRadialGradient(xA, yA, rA, xB, yB, rB) avec r la longueur du rayon du pointvar 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


● 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”


● 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);// OPTIONNELctx.closePath();ctx.stroke();

Les tracés


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


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


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 pilectx.fillStyle = 'white'; ctx.save();ctx.fillStyle = 'red'; ctx.save();ctx.fillStyle = 'blue';ctx.fillRect(...); // bluectx.restore();ctx.restore();ctx.fillRect(...); // white// red not available ... :(


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 JavaScriptvar imageLoaded = new Image();imageLoaded.onload = function() { ctx.drawImage(imageLoaded, 100, 300, 200, 200);}imageLoaded.src = 'ippon_400x400.png';


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;


● 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


● 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


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


● 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énementdocument.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


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


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

http://kineticjs.com/

http://kineticjs.com/

http://paperjs.org/

http://paperjs.org/

http://processingjs.org/

http://threejs.org/


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


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

https://developer.mozilla.org/fr/docs/SVG/Element


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


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

http://d3js.org/

http://d3js.org/

http://raphaeljs.com/

http://snapsvg.io/

http://snapsvg.io/


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


HTML5 avec CSS3


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


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.


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


● -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


● 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 ?


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


● 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


● 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 ?


● 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


● 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


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”



Faites de l’ombre à votre texte● On peut maintenant ajouter très simplement une ombre à un texte avec la

propriété text-shadow



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;



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


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


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érieursection .note { -moz-box-shadow: -2px 2px 4px #c0c0c0; -webkit-box-shadow: -2px 2px 4px #c0c0c0; box-shadow: -2px 2px 4px #c0c0c0;}


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 !


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


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/

http://www.colorzilla.com/gradient-editor/




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


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


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 !


CSS3 les sélecteurs


Sommaire

● Parcourir le DOM● Sélecteurs d’attributs● Sélecteurs de pseudo classes● Combinateur d’adjacence indirecte


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é


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]


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”



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



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



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



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



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.



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



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



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”

http://foo.com/#thisSection


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


CSS3 les transformations, transitions et animations


Sommaire

1. Pourquoi privilégier les effets CSS3 plutôt que les effets en JS

2. Les transformations graphiques3. Les transitions4. Les animations


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


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


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



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



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”



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)



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



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



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


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)


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)


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


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…


CSS3 avec les préprocesseurs


Sommaire

● À la découverte des préprocesseurs CSS● Les principaux préprocesseurs CSS● Liste des fonctionnalités


À 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


À 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


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

http://sass-lang.com



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”

http://lesscss.org



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.


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


Liste des fonctionnalités

Assure la maintenabilité CSS● Déclaration de variables● Utilisation de fonctions● Notion d’héritage● Création de mixins


HTML5 Web API


Sommaire

● Présentation Web API● Géolocalisation● Web Storage


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)


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● ...


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'informationif (navigator.geolocation) {

// API est disponible}


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)


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)

}

);


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

https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills#geo-location




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


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


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

https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills#web-storage-localstorage-and-sessionstorage





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


Librairie Modernizr


Sommaire

● Présentation Modernizr● Modernizr pour CSS● Modernizr pour JavaScript● Le compagnon yepnope


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



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



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

https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills




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


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>


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)’);

http://www.modernizr.com/docs


Mise en application

Mise en oeuvre JavaScript (pratique)

if (Modernizr.localstorage) {

// script si local storage disponible

} else {

// script si local storage NON disponible

}


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



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



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");}

});

Ippon Technologies - 43, avenue de la grande Armée 75116 Paris01 46 42 48 48 - [email protected] - www.ippon.fr - blog.ippon.fr

- www.ipponusa.com - www.ippon-hosting.com

http://www.ipponusa.com

Documents

Formation html5 CSS3 offerte par ippon 2014