html5 / css3christophe.delagarde.free.fr/formation/html5.pdf · html 5 dernière version de html...
TRANSCRIPT
![Page 1: HTML5 / CSS3christophe.delagarde.free.fr/Formation/HTML5.pdf · HTML 5 Dernière version de HTML (28 oct. 2014) Rich Interface Applications Langage balisé Basé sur XHTML 2 HTML5](https://reader035.vdocuments.mx/reader035/viewer/2022062403/604f0c924368240fae6a6d51/html5/thumbnails/1.jpg)
HTML5
1
![Page 2: HTML5 / CSS3christophe.delagarde.free.fr/Formation/HTML5.pdf · HTML 5 Dernière version de HTML (28 oct. 2014) Rich Interface Applications Langage balisé Basé sur XHTML 2 HTML5](https://reader035.vdocuments.mx/reader035/viewer/2022062403/604f0c924368240fae6a6d51/html5/thumbnails/2.jpg)
HTML 5
Dernière version de HTML (28 oct. 2014)
Rich Interface Applications
Langage balisé
Basé sur XHTML
HTML5 2
![Page 3: HTML5 / CSS3christophe.delagarde.free.fr/Formation/HTML5.pdf · HTML 5 Dernière version de HTML (28 oct. 2014) Rich Interface Applications Langage balisé Basé sur XHTML 2 HTML5](https://reader035.vdocuments.mx/reader035/viewer/2022062403/604f0c924368240fae6a6d51/html5/thumbnails/3.jpg)
HTML 5 & Adobe Flash
Adobe Flash est un complément d’HTML5
Taux de pénétration :
Encore faible (75 %) pour HTML5
Flash (≈ 99 % sur PC, ≈ 80 % sur mobile) supérieur à JavaScript (≈ 90 %) !
HTML5 3
2011
![Page 4: HTML5 / CSS3christophe.delagarde.free.fr/Formation/HTML5.pdf · HTML 5 Dernière version de HTML (28 oct. 2014) Rich Interface Applications Langage balisé Basé sur XHTML 2 HTML5](https://reader035.vdocuments.mx/reader035/viewer/2022062403/604f0c924368240fae6a6d51/html5/thumbnails/4.jpg)
HTML 5 simplification
HTML5 5
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" > <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" > <head> <title>Titre de la page</title> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> </head> <body> <!-- Ici votre site Web --> </body> </html>
![Page 5: HTML5 / CSS3christophe.delagarde.free.fr/Formation/HTML5.pdf · HTML 5 Dernière version de HTML (28 oct. 2014) Rich Interface Applications Langage balisé Basé sur XHTML 2 HTML5](https://reader035.vdocuments.mx/reader035/viewer/2022062403/604f0c924368240fae6a6d51/html5/thumbnails/5.jpg)
HTML 5 simplification
HTML5 6
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" > <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" > <head> <title>Titre de la page</title> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> </head> <body> <!-- Ici votre site Web --> </body> </html>
![Page 6: HTML5 / CSS3christophe.delagarde.free.fr/Formation/HTML5.pdf · HTML 5 Dernière version de HTML (28 oct. 2014) Rich Interface Applications Langage balisé Basé sur XHTML 2 HTML5](https://reader035.vdocuments.mx/reader035/viewer/2022062403/604f0c924368240fae6a6d51/html5/thumbnails/6.jpg)
HTML 5 simplification
HTML5 7
<!DOCTYPE html > <html lang="fr" > <head> <title>Titre de la page</title> <meta charset="utf-8" /> </head> <body> <!-- Ici votre site Web --> </body> </html>
![Page 7: HTML5 / CSS3christophe.delagarde.free.fr/Formation/HTML5.pdf · HTML 5 Dernière version de HTML (28 oct. 2014) Rich Interface Applications Langage balisé Basé sur XHTML 2 HTML5](https://reader035.vdocuments.mx/reader035/viewer/2022062403/604f0c924368240fae6a6d51/html5/thumbnails/7.jpg)
HTML5 : CSS / JS XHTML <head> <link rel="stylesheet" type="text/css" href="css/monfichier.css" /> … <script type="text/javascript" src="js/myFile.js" ></script> </head>
HTML5 <head> <link rel="stylesheet" href="css/monfichier.css" /> … <script src="js/myFile.js" ></script> </head>
HTML5 8
![Page 8: HTML5 / CSS3christophe.delagarde.free.fr/Formation/HTML5.pdf · HTML 5 Dernière version de HTML (28 oct. 2014) Rich Interface Applications Langage balisé Basé sur XHTML 2 HTML5](https://reader035.vdocuments.mx/reader035/viewer/2022062403/604f0c924368240fae6a6d51/html5/thumbnails/8.jpg)
Sémantique Entête
<header></header>
Pied de Page <footer></footer>
Navigation <nav></nav>
Zone de regroupement <section></section>
Zone de contenu <article></article>
Zone secondaire <aside></aside>
HTML5 9
![Page 9: HTML5 / CSS3christophe.delagarde.free.fr/Formation/HTML5.pdf · HTML 5 Dernière version de HTML (28 oct. 2014) Rich Interface Applications Langage balisé Basé sur XHTML 2 HTML5](https://reader035.vdocuments.mx/reader035/viewer/2022062403/604f0c924368240fae6a6d51/html5/thumbnails/9.jpg)
Multimédia
Audio <audio controls="controls"> <source src="audio.ogg" type="audio/ogg" /> <source src="audio.mp3" type="audio/mp3" /> <source src="audio.wav" type="audio/wav" /> Ici l'alternative: un lien de téléchargement, un message, etc. </audio>
Vidéo <video controls="controls"> <source src="video.ogv" type="video/ogg" /> <source src="video.mp4" type="video/mp4" /> Ici l'alternative : un lien de téléchargement, un message, etc. </video>
HTML5 10
![Page 10: HTML5 / CSS3christophe.delagarde.free.fr/Formation/HTML5.pdf · HTML 5 Dernière version de HTML (28 oct. 2014) Rich Interface Applications Langage balisé Basé sur XHTML 2 HTML5](https://reader035.vdocuments.mx/reader035/viewer/2022062403/604f0c924368240fae6a6d51/html5/thumbnails/10.jpg)
Multimédia : codecs
HTML5 11
![Page 11: HTML5 / CSS3christophe.delagarde.free.fr/Formation/HTML5.pdf · HTML 5 Dernière version de HTML (28 oct. 2014) Rich Interface Applications Langage balisé Basé sur XHTML 2 HTML5](https://reader035.vdocuments.mx/reader035/viewer/2022062403/604f0c924368240fae6a6d51/html5/thumbnails/11.jpg)
Images
Image <img/>
Regroupement <figure></figure>
Légende <figcaption></figcaption>
HTML5 12
<figure> <img src="/images/chaton.jpg" alt="Oh le beau chaton"/> <figcaption>Un petit chat mignon tout plein</figcaption> </figure>
![Page 12: HTML5 / CSS3christophe.delagarde.free.fr/Formation/HTML5.pdf · HTML 5 Dernière version de HTML (28 oct. 2014) Rich Interface Applications Langage balisé Basé sur XHTML 2 HTML5](https://reader035.vdocuments.mx/reader035/viewer/2022062403/604f0c924368240fae6a6d51/html5/thumbnails/12.jpg)
Conteneurs
Division <div></div>
Section <section></section>
Article <article></article>
Cadre <iframe></iframe>
HTML5 / CSS3 13
![Page 13: HTML5 / CSS3christophe.delagarde.free.fr/Formation/HTML5.pdf · HTML 5 Dernière version de HTML (28 oct. 2014) Rich Interface Applications Langage balisé Basé sur XHTML 2 HTML5](https://reader035.vdocuments.mx/reader035/viewer/2022062403/604f0c924368240fae6a6d51/html5/thumbnails/13.jpg)
Texte
Titre <h1></h1> … <h6></h6>
Force <strong></strong> Gras <b></b>
Emphase <em></em> Italique <i></i>
Surligné <mark></mark> Souligné <u></u>
HTML5 14
![Page 14: HTML5 / CSS3christophe.delagarde.free.fr/Formation/HTML5.pdf · HTML 5 Dernière version de HTML (28 oct. 2014) Rich Interface Applications Langage balisé Basé sur XHTML 2 HTML5](https://reader035.vdocuments.mx/reader035/viewer/2022062403/604f0c924368240fae6a6d51/html5/thumbnails/14.jpg)
Formulaires
Conteneur <form></form> Méthode d’envoi method
Encodage des données enctype
Cible d’exécution action
Zone de texte <textarea></textarea>
Liste de choix <select></select>, <option></option> Liste à choix multiple multiple="multiple"
Etiquette <label for="id"></label>
HTML5 15
![Page 15: HTML5 / CSS3christophe.delagarde.free.fr/Formation/HTML5.pdf · HTML 5 Dernière version de HTML (28 oct. 2014) Rich Interface Applications Langage balisé Basé sur XHTML 2 HTML5](https://reader035.vdocuments.mx/reader035/viewer/2022062403/604f0c924368240fae6a6d51/html5/thumbnails/15.jpg)
Formulaires
Saisie d’information <input/> Valeur initiale value
Nom de la donnée name
Désactivation disabled
Type de donnée type
Valeurs possibles pour l’attribut type
HTML5 16
image password text url date month
reset checkbox hidden number time week
button file tel color datetime search
submit radio email range datetime-local
![Page 16: HTML5 / CSS3christophe.delagarde.free.fr/Formation/HTML5.pdf · HTML 5 Dernière version de HTML (28 oct. 2014) Rich Interface Applications Langage balisé Basé sur XHTML 2 HTML5](https://reader035.vdocuments.mx/reader035/viewer/2022062403/604f0c924368240fae6a6d51/html5/thumbnails/16.jpg)
HTML5 17
image url
reset number
button color
submit range
password date
checkbox time
file datetime
radio datetime-local
text month
hidden week
tel search
![Page 17: HTML5 / CSS3christophe.delagarde.free.fr/Formation/HTML5.pdf · HTML 5 Dernière version de HTML (28 oct. 2014) Rich Interface Applications Langage balisé Basé sur XHTML 2 HTML5](https://reader035.vdocuments.mx/reader035/viewer/2022062403/604f0c924368240fae6a6d51/html5/thumbnails/17.jpg)
Formulaires - Validation required
placeholder
pattern
min / max / step
list
novalidate
formnovalidate
HTML5 18
![Page 18: HTML5 / CSS3christophe.delagarde.free.fr/Formation/HTML5.pdf · HTML 5 Dernière version de HTML (28 oct. 2014) Rich Interface Applications Langage balisé Basé sur XHTML 2 HTML5](https://reader035.vdocuments.mx/reader035/viewer/2022062403/604f0c924368240fae6a6d51/html5/thumbnails/18.jpg)
Formulaires – Validation
HTML5 19
checkValidity validity validity.rangeOverflow
setCustomValidity validity.valid validity.rangeUnderflow
validationMessage validity.valueMissing validity.stepMismatch
willValidate validity.customError validity.tooLong
validity.typeMismatch validity.patternMismatch
![Page 19: HTML5 / CSS3christophe.delagarde.free.fr/Formation/HTML5.pdf · HTML 5 Dernière version de HTML (28 oct. 2014) Rich Interface Applications Langage balisé Basé sur XHTML 2 HTML5](https://reader035.vdocuments.mx/reader035/viewer/2022062403/604f0c924368240fae6a6d51/html5/thumbnails/19.jpg)
XML HttpRequest 1 :
HTML5 20
XHR2
var xhr = new XMLHttpRequest(); xhr.open('GET', '/path/to/image.png', true); xhr.overrideMimeType('text/plain; charset=x-user-defined'); xhr.onreadystatechange = function(e) { if (this.readyState == 4 && this.status == 200) { var binStr = this.responseText; for (var i = 0, len = binStr.length; i < len; ++i) { var c = binStr.charCodeAt(i); var byte = c & 0xff; } } }; xhr.send();
![Page 20: HTML5 / CSS3christophe.delagarde.free.fr/Formation/HTML5.pdf · HTML 5 Dernière version de HTML (28 oct. 2014) Rich Interface Applications Langage balisé Basé sur XHTML 2 HTML5](https://reader035.vdocuments.mx/reader035/viewer/2022062403/604f0c924368240fae6a6d51/html5/thumbnails/20.jpg)
XML HttpRequest 2 :
HTML5 21
XHR2
var xhr = new XMLHttpRequest(); xhr.open('GET', '/path/to/image.png', true); xhr.responseType = 'blob'; xhr.onload = function(e) { if (this.status == 200) { // Note: .response instead of .responseText var blob = new Blob([this.response], {type: 'image/png'}); ... } }; xhr.send();
![Page 21: HTML5 / CSS3christophe.delagarde.free.fr/Formation/HTML5.pdf · HTML 5 Dernière version de HTML (28 oct. 2014) Rich Interface Applications Langage balisé Basé sur XHTML 2 HTML5](https://reader035.vdocuments.mx/reader035/viewer/2022062403/604f0c924368240fae6a6d51/html5/thumbnails/21.jpg)
Types de réponses possibles
text
blob
arrayBuffer
HTML5 22
XHR2
![Page 22: HTML5 / CSS3christophe.delagarde.free.fr/Formation/HTML5.pdf · HTML 5 Dernière version de HTML (28 oct. 2014) Rich Interface Applications Langage balisé Basé sur XHTML 2 HTML5](https://reader035.vdocuments.mx/reader035/viewer/2022062403/604f0c924368240fae6a6d51/html5/thumbnails/22.jpg)
Cross Origin Resource Sharing
Accès à des ressources externes
Indentification du partage
HTML5 23
CORS
xhr.open('GET','http://datahost.example/data.xml');
Réponse (entête) Requête (entête)
Access-Control-Max-Age Access-Control-Allow-Origin Origin
Access-Control-Expose-Headers Access-Control-Allow-Headers Access-Control-Request-Method
Access-Control-Allow-Credentials
Access-Control-Allow-Methods Access-Control-Request-Headers
![Page 23: HTML5 / CSS3christophe.delagarde.free.fr/Formation/HTML5.pdf · HTML 5 Dernière version de HTML (28 oct. 2014) Rich Interface Applications Langage balisé Basé sur XHTML 2 HTML5](https://reader035.vdocuments.mx/reader035/viewer/2022062403/604f0c924368240fae6a6d51/html5/thumbnails/23.jpg)
JavaScript Object Notation
Echange de données simplifié
Indépendant du langage
Tableaux imbriqués {} et []
HTML5 24
JSON
{"employees":[ {"firstName":"John", "lastName":"Doe"}, {"firstName":"Anna", "lastName":"Smith"}, {"firstName":"Peter", "lastName":"Jones"} ]}
![Page 24: HTML5 / CSS3christophe.delagarde.free.fr/Formation/HTML5.pdf · HTML 5 Dernière version de HTML (28 oct. 2014) Rich Interface Applications Langage balisé Basé sur XHTML 2 HTML5](https://reader035.vdocuments.mx/reader035/viewer/2022062403/604f0c924368240fae6a6d51/html5/thumbnails/24.jpg)
JSON with Padding
Simplification des utilisations JavaScript
Script Element Injection
HTML5 25
JSONP
traiterReponse{"employees":[ {"firstName":"John", "lastName":"Doe"}, {"firstName":"Anna", "lastName":"Smith"}, {"firstName":"Peter", "lastName":"Jones"} ]}
![Page 25: HTML5 / CSS3christophe.delagarde.free.fr/Formation/HTML5.pdf · HTML 5 Dernière version de HTML (28 oct. 2014) Rich Interface Applications Langage balisé Basé sur XHTML 2 HTML5](https://reader035.vdocuments.mx/reader035/viewer/2022062403/604f0c924368240fae6a6d51/html5/thumbnails/25.jpg)
Communication avec iframe
HTML5 26
Messaging
var iframeWin = document.getElementById("cadre").contentWindow; iframeWin.postMessage("Message", "http://www.lehtml.com"); if (window.addEventListener) { window.addEventListener("message", afficherMessage, false); } else { window.attachEvent("onmessage", afficherMessage); }
![Page 26: HTML5 / CSS3christophe.delagarde.free.fr/Formation/HTML5.pdf · HTML 5 Dernière version de HTML (28 oct. 2014) Rich Interface Applications Langage balisé Basé sur XHTML 2 HTML5](https://reader035.vdocuments.mx/reader035/viewer/2022062403/604f0c924368240fae6a6d51/html5/thumbnails/26.jpg)
Principe similaire à une socket
Informations HTML5
Utilisation JavaScript
HTML5 27
WebSockets
var ws = new WebSocket("ws://echo.websocket.org"); ws.onopen = function(evt) { console.log("Connection open ..."); }; ws.onclose = function(evt) { console.log("Connection closed."); }; ws.onerror = function(evt) { console.log("WebSocket error : " + evt.data) }; ws.onmessage = function(evt) { console.log( "Received Message: " + evt.data); };
![Page 27: HTML5 / CSS3christophe.delagarde.free.fr/Formation/HTML5.pdf · HTML 5 Dernière version de HTML (28 oct. 2014) Rich Interface Applications Langage balisé Basé sur XHTML 2 HTML5](https://reader035.vdocuments.mx/reader035/viewer/2022062403/604f0c924368240fae6a6d51/html5/thumbnails/27.jpg)
Equivalent d’un Thread en JavaScript
WebWorker dédié
HTML5 28
WebWorkers
w = new Worker("SomeWorker.js"); w.onmessage = function(event) { document.getElementById("result").innerHTML = event.data; }; w.terminate();
var i = 0; function timedCount() { i = i + 1; postMessage(i); setTimeout("timedCount()",500); } timedCount();
![Page 28: HTML5 / CSS3christophe.delagarde.free.fr/Formation/HTML5.pdf · HTML 5 Dernière version de HTML (28 oct. 2014) Rich Interface Applications Langage balisé Basé sur XHTML 2 HTML5](https://reader035.vdocuments.mx/reader035/viewer/2022062403/604f0c924368240fae6a6d51/html5/thumbnails/28.jpg)
WebWorker partagé
HTML5 29
WebWorkers
myWorker = new SharedWorker("SomeWorker.js"); myWorker.port.postMessage(value);
var port = e.ports[0]; port.postMessage(workerResult);
![Page 29: HTML5 / CSS3christophe.delagarde.free.fr/Formation/HTML5.pdf · HTML 5 Dernière version de HTML (28 oct. 2014) Rich Interface Applications Langage balisé Basé sur XHTML 2 HTML5](https://reader035.vdocuments.mx/reader035/viewer/2022062403/604f0c924368240fae6a6d51/html5/thumbnails/29.jpg)
Récupération de la position de l’utilisateur
HTML5 30
Geolocalisation
function getLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition); } else { document.getElementById("demo").innerHTML = "Geolocation is not supported by this browser."; } } function showPosition(position) { document.getElementById("demo").innerHTML = "Latitude: " + position.coords.latitude + "<br>Longitude: " + position.coords.longitude; }
![Page 30: HTML5 / CSS3christophe.delagarde.free.fr/Formation/HTML5.pdf · HTML 5 Dernière version de HTML (28 oct. 2014) Rich Interface Applications Langage balisé Basé sur XHTML 2 HTML5](https://reader035.vdocuments.mx/reader035/viewer/2022062403/604f0c924368240fae6a6d51/html5/thumbnails/30.jpg)
Suivi de la position de l’utilisateur
HTML5 31
Geolocalisation
function getLocation() { if (navigator.geolocation) { navigator.geolocation.watchPosition(showPosition); } else { document.getElementById("demo").innerHTML = "Geolocation is not supported by this browser."; } } function showPosition(position) { document.getElementById("demo").innerHTML = "Latitude: " + position.coords.latitude + "<br>Longitude: " + position.coords.longitude; }
![Page 31: HTML5 / CSS3christophe.delagarde.free.fr/Formation/HTML5.pdf · HTML 5 Dernière version de HTML (28 oct. 2014) Rich Interface Applications Langage balisé Basé sur XHTML 2 HTML5](https://reader035.vdocuments.mx/reader035/viewer/2022062403/604f0c924368240fae6a6d51/html5/thumbnails/31.jpg)
Présentation sur une carte
HTML5 32
Geolocalisation
function getLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition); } else { document.getElementById("demo").innerHTML = "Geolocation is not supported by this browser."; } } function showPosition(position) { var latlon = position.coords.latitude + "," + position.coords.longitude; var img_url = "http://maps.googleapis.com/maps/api/staticmap?center=" + latlon + "&zoom=14&size=400x300&sensor=false"; document.getElementById("mapholder").innerHTML = "<img src='" + img_url + "'>"; }
![Page 32: HTML5 / CSS3christophe.delagarde.free.fr/Formation/HTML5.pdf · HTML 5 Dernière version de HTML (28 oct. 2014) Rich Interface Applications Langage balisé Basé sur XHTML 2 HTML5](https://reader035.vdocuments.mx/reader035/viewer/2022062403/604f0c924368240fae6a6d51/html5/thumbnails/32.jpg)
Gestion des erreurs
HTML5 33
Geolocalisation
navigator.geolocation.getCurrentPosition(showPosition, showError); . . . function showError(error) { var x = document.getElementById("demo"); switch(error.code) { case error.PERMISSION_DENIED: x.innerHTML = "User denied the request for Geolocation."; break; case error.POSITION_UNAVAILABLE: x.innerHTML = "Location information is unavailable."; break; case error.TIMEOUT: x.innerHTML = "The request to get user location timed out."; break; case error.UNKNOWN_ERROR: x.innerHTML = "An unknown error occurred."; break; } }
![Page 33: HTML5 / CSS3christophe.delagarde.free.fr/Formation/HTML5.pdf · HTML 5 Dernière version de HTML (28 oct. 2014) Rich Interface Applications Langage balisé Basé sur XHTML 2 HTML5](https://reader035.vdocuments.mx/reader035/viewer/2022062403/604f0c924368240fae6a6d51/html5/thumbnails/33.jpg)
Utilisation d’un cache manifest
HTML5 34
Mode Deconnecté
<html manifest="cache.manifest"> . . .
CACHE MANIFEST CACHE: index.html /favicon.ico NETWORK: * FALLBACK: images/online.png images/offline.png
![Page 34: HTML5 / CSS3christophe.delagarde.free.fr/Formation/HTML5.pdf · HTML 5 Dernière version de HTML (28 oct. 2014) Rich Interface Applications Langage balisé Basé sur XHTML 2 HTML5](https://reader035.vdocuments.mx/reader035/viewer/2022062403/604f0c924368240fae6a6d51/html5/thumbnails/34.jpg)
Conteneur de dessin
Fonctionnalité HTML5
Remplissage par JavaScript
HTML5 35
Canvas
<canvas id="c1" width="200" height="100" style="border:1px solid #000000;" ></canvas>
![Page 35: HTML5 / CSS3christophe.delagarde.free.fr/Formation/HTML5.pdf · HTML 5 Dernière version de HTML (28 oct. 2014) Rich Interface Applications Langage balisé Basé sur XHTML 2 HTML5](https://reader035.vdocuments.mx/reader035/viewer/2022062403/604f0c924368240fae6a6d51/html5/thumbnails/35.jpg)
Début de dessin : beginPath ()
Fin de dessin : closePath ()
Positionnement du curseur : moveTo ()
Tracé d’un trait : stroke ()
Remplissage d’une forme : fill ()
Ecriture de texte : fillText() / strokeText()
HTML5 36
Canvas - Dessin
![Page 36: HTML5 / CSS3christophe.delagarde.free.fr/Formation/HTML5.pdf · HTML 5 Dernière version de HTML (28 oct. 2014) Rich Interface Applications Langage balisé Basé sur XHTML 2 HTML5](https://reader035.vdocuments.mx/reader035/viewer/2022062403/604f0c924368240fae6a6d51/html5/thumbnails/36.jpg)
Dessin d’une ligne : lineTo()
Largeur d’une ligne : lineWidth
Couleur d’une ligne : strokeStyle
Fin de ligne : lineCap ( butt, round, square )
Jonction de lignes : lineJoin
HTML5 37
Canvas - Lignes
![Page 37: HTML5 / CSS3christophe.delagarde.free.fr/Formation/HTML5.pdf · HTML 5 Dernière version de HTML (28 oct. 2014) Rich Interface Applications Langage balisé Basé sur XHTML 2 HTML5](https://reader035.vdocuments.mx/reader035/viewer/2022062403/604f0c924368240fae6a6d51/html5/thumbnails/37.jpg)
Dessin d’un arc : arc() / arcTo ()
Courbe Quadratique : quadraticCurveTo ()
Courbe de Bézier : bezierCurveTo ()
Rectangle : rect ()
HTML5 38
Canvas - Formes
![Page 38: HTML5 / CSS3christophe.delagarde.free.fr/Formation/HTML5.pdf · HTML 5 Dernière version de HTML (28 oct. 2014) Rich Interface Applications Langage balisé Basé sur XHTML 2 HTML5](https://reader035.vdocuments.mx/reader035/viewer/2022062403/604f0c924368240fae6a6d51/html5/thumbnails/38.jpg)
Remplissage : fill ()
Couleur de Remplissage : fillStyle
Gradient Linéaire : createLinearGradient ()
Gradient Circulaire : createRadialGradient ()
Patron : pattern ()
HTML5 39
Canvas - Remplissage
![Page 39: HTML5 / CSS3christophe.delagarde.free.fr/Formation/HTML5.pdf · HTML 5 Dernière version de HTML (28 oct. 2014) Rich Interface Applications Langage balisé Basé sur XHTML 2 HTML5](https://reader035.vdocuments.mx/reader035/viewer/2022062403/604f0c924368240fae6a6d51/html5/thumbnails/39.jpg)
HTML5 40
Canvas – Exercice 1
![Page 40: HTML5 / CSS3christophe.delagarde.free.fr/Formation/HTML5.pdf · HTML 5 Dernière version de HTML (28 oct. 2014) Rich Interface Applications Langage balisé Basé sur XHTML 2 HTML5](https://reader035.vdocuments.mx/reader035/viewer/2022062403/604f0c924368240fae6a6d51/html5/thumbnails/40.jpg)
HTML5 41
Canvas – Exercice 2
![Page 41: HTML5 / CSS3christophe.delagarde.free.fr/Formation/HTML5.pdf · HTML 5 Dernière version de HTML (28 oct. 2014) Rich Interface Applications Langage balisé Basé sur XHTML 2 HTML5](https://reader035.vdocuments.mx/reader035/viewer/2022062403/604f0c924368240fae6a6d51/html5/thumbnails/41.jpg)
HTML5 42
Canvas – Exercice 3
![Page 42: HTML5 / CSS3christophe.delagarde.free.fr/Formation/HTML5.pdf · HTML 5 Dernière version de HTML (28 oct. 2014) Rich Interface Applications Langage balisé Basé sur XHTML 2 HTML5](https://reader035.vdocuments.mx/reader035/viewer/2022062403/604f0c924368240fae6a6d51/html5/thumbnails/42.jpg)
Ecriture de texte (plein) : fillText()
Ecriture de texte (contour) : strokeText()
Police de caractères : font Contient police, taille et style
Alignement (horizontal) : textAlign ()
Alignement (vertical) : textBaseline ()
Coupure de ligne : wrapText ()
Informations : measureText ()
HTML5 43
Canvas - Texte
![Page 43: HTML5 / CSS3christophe.delagarde.free.fr/Formation/HTML5.pdf · HTML 5 Dernière version de HTML (28 oct. 2014) Rich Interface Applications Langage balisé Basé sur XHTML 2 HTML5](https://reader035.vdocuments.mx/reader035/viewer/2022062403/604f0c924368240fae6a6d51/html5/thumbnails/43.jpg)
Remplissage avec une image : drawImage()
Paramètres variables :
Coordonnées
Coordonnées + Tailles (X et Y)
Coordonnées + Tailles (X et Y) dans image
d’origine + Coordonnées + Tailles (X et Y) dans
image finale
Attention, l’image doit être chargée
avant d’être utilisée ( callback ou
onload )
HTML5 44
Canvas - Images
![Page 44: HTML5 / CSS3christophe.delagarde.free.fr/Formation/HTML5.pdf · HTML 5 Dernière version de HTML (28 oct. 2014) Rich Interface Applications Langage balisé Basé sur XHTML 2 HTML5](https://reader035.vdocuments.mx/reader035/viewer/2022062403/604f0c924368240fae6a6d51/html5/thumbnails/44.jpg)
HTML5 45
Canvas – Exercice 4
![Page 45: HTML5 / CSS3christophe.delagarde.free.fr/Formation/HTML5.pdf · HTML 5 Dernière version de HTML (28 oct. 2014) Rich Interface Applications Langage balisé Basé sur XHTML 2 HTML5](https://reader035.vdocuments.mx/reader035/viewer/2022062403/604f0c924368240fae6a6d51/html5/thumbnails/45.jpg)
Translation : translate()
Rotation : rotate()
Transformation : transform()
Redimensionnement : scale ()
Reset : setTransform(1,0,0,1,0,0)
Mémorisation : save () / restore ()
HTML5 46
Canvas - Transformations
![Page 46: HTML5 / CSS3christophe.delagarde.free.fr/Formation/HTML5.pdf · HTML 5 Dernière version de HTML (28 oct. 2014) Rich Interface Applications Langage balisé Basé sur XHTML 2 HTML5](https://reader035.vdocuments.mx/reader035/viewer/2022062403/604f0c924368240fae6a6d51/html5/thumbnails/46.jpg)
Scalable Vector Graphics
Format de graphiques vectoriel
Basé sur XML
HTML5 47
SVG
<svg width="1000" height="1000"> <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow"/> </svg>
![Page 47: HTML5 / CSS3christophe.delagarde.free.fr/Formation/HTML5.pdf · HTML 5 Dernière version de HTML (28 oct. 2014) Rich Interface Applications Langage balisé Basé sur XHTML 2 HTML5](https://reader035.vdocuments.mx/reader035/viewer/2022062403/604f0c924368240fae6a6d51/html5/thumbnails/47.jpg)
Rectangle <rect>
Circle <circle>
Ellipse <ellipse>
Line <line>
Polyline <polyline>
Polygon <polygon>
Path <path>
HTML5 48
SVG - Formes
![Page 48: HTML5 / CSS3christophe.delagarde.free.fr/Formation/HTML5.pdf · HTML 5 Dernière version de HTML (28 oct. 2014) Rich Interface Applications Langage balisé Basé sur XHTML 2 HTML5](https://reader035.vdocuments.mx/reader035/viewer/2022062403/604f0c924368240fae6a6d51/html5/thumbnails/48.jpg)
http://www.w3.org/TR/SVG/styling.html
HTML5 49
SVG – Attributs Graphiques
fill stroke opacity
fill-opacity stroke-opacity
fill-rule stroke-width shape-rendering
stroke-dasharray image-rendering
marker stroke-dashoffset text-rendering
marker-end stroke-linecap color-rendering
marker-mid stroke-linejoin color-interpolation
marker-start stroke-miterlimit color-profile
stop-opacity stop-color
![Page 49: HTML5 / CSS3christophe.delagarde.free.fr/Formation/HTML5.pdf · HTML 5 Dernière version de HTML (28 oct. 2014) Rich Interface Applications Langage balisé Basé sur XHTML 2 HTML5](https://reader035.vdocuments.mx/reader035/viewer/2022062403/604f0c924368240fae6a6d51/html5/thumbnails/49.jpg)
HTML5 50
SVG – Groupes
Groupe <g>
<g fill="none" stroke="black" stroke-width="4" >
<rect x="150" y="150" width="100" height="100" />
<rect x="200" y="150" width="100" height="100" />
</g>
![Page 50: HTML5 / CSS3christophe.delagarde.free.fr/Formation/HTML5.pdf · HTML 5 Dernière version de HTML (28 oct. 2014) Rich Interface Applications Langage balisé Basé sur XHTML 2 HTML5](https://reader035.vdocuments.mx/reader035/viewer/2022062403/604f0c924368240fae6a6d51/html5/thumbnails/50.jpg)
Rectangle <rect>
HTML5 51
SVG - Rectangle
Attributs
x rx width
y ry height
style
<rect x="150" y="150" width="100" height="100" rx="20" ry="20" fill="red" stroke="black" stroke-width="5" opacity="0.5" />
![Page 51: HTML5 / CSS3christophe.delagarde.free.fr/Formation/HTML5.pdf · HTML 5 Dernière version de HTML (28 oct. 2014) Rich Interface Applications Langage balisé Basé sur XHTML 2 HTML5](https://reader035.vdocuments.mx/reader035/viewer/2022062403/604f0c924368240fae6a6d51/html5/thumbnails/51.jpg)
Circle <circle>
HTML5 52
SVG - Cercle
Attributs
cx cy r
<circle cx="50" cy="350" r="50" stroke="black" stroke-width="3" fill="red" />
![Page 52: HTML5 / CSS3christophe.delagarde.free.fr/Formation/HTML5.pdf · HTML 5 Dernière version de HTML (28 oct. 2014) Rich Interface Applications Langage balisé Basé sur XHTML 2 HTML5](https://reader035.vdocuments.mx/reader035/viewer/2022062403/604f0c924368240fae6a6d51/html5/thumbnails/52.jpg)
Ellipse <ellipse>
HTML5 53
SVG - Ellipse
Attributs
cx rx
cy ry
<ellipse cx="200" cy="350" rx="50" ry="20" fill="yellow" />
![Page 53: HTML5 / CSS3christophe.delagarde.free.fr/Formation/HTML5.pdf · HTML 5 Dernière version de HTML (28 oct. 2014) Rich Interface Applications Langage balisé Basé sur XHTML 2 HTML5](https://reader035.vdocuments.mx/reader035/viewer/2022062403/604f0c924368240fae6a6d51/html5/thumbnails/53.jpg)
Line <line>
HTML5 54
SVG - Line
<line x1="300" y1="0" x2="400" y2="100" stroke="rgb(255,0,0)" stroke-width="2" />
Attributs
x1 x2
y1 y2
![Page 54: HTML5 / CSS3christophe.delagarde.free.fr/Formation/HTML5.pdf · HTML 5 Dernière version de HTML (28 oct. 2014) Rich Interface Applications Langage balisé Basé sur XHTML 2 HTML5](https://reader035.vdocuments.mx/reader035/viewer/2022062403/604f0c924368240fae6a6d51/html5/thumbnails/54.jpg)
Polyline <polyline>
HTML5 55
SVG - Polyline
Attributs
points
<polyline points="300,300 305,310 320,330 340,380 350,390 400,400" fill="none" stroke="black" stroke-width="3" />
![Page 55: HTML5 / CSS3christophe.delagarde.free.fr/Formation/HTML5.pdf · HTML 5 Dernière version de HTML (28 oct. 2014) Rich Interface Applications Langage balisé Basé sur XHTML 2 HTML5](https://reader035.vdocuments.mx/reader035/viewer/2022062403/604f0c924368240fae6a6d51/html5/thumbnails/55.jpg)
Polygon <polygon>
HTML5 56
SVG - Polygon
Attributs
points
<polygon points="450,300 455,310 470,330 490,380 500,390 550,400" fill="none" stroke="black" stroke-width="3" />
![Page 56: HTML5 / CSS3christophe.delagarde.free.fr/Formation/HTML5.pdf · HTML 5 Dernière version de HTML (28 oct. 2014) Rich Interface Applications Langage balisé Basé sur XHTML 2 HTML5](https://reader035.vdocuments.mx/reader035/viewer/2022062403/604f0c924368240fae6a6d51/html5/thumbnails/56.jpg)
Path <path>
HTML5 57
SVG - Path
Valeurs pour d
M <X> <Y> L <X> <Y> Q
C <X> <Y> H <X> <Y> T
S <X> <Y> V <X> <Y> A
Z
<path d="M 375 150 L 300 250 L 400 250 Z" />
![Page 57: HTML5 / CSS3christophe.delagarde.free.fr/Formation/HTML5.pdf · HTML 5 Dernière version de HTML (28 oct. 2014) Rich Interface Applications Langage balisé Basé sur XHTML 2 HTML5](https://reader035.vdocuments.mx/reader035/viewer/2022062403/604f0c924368240fae6a6d51/html5/thumbnails/57.jpg)
http://www.w3schools.com/svg/svg_filters_intro.asp
HTML5 58
SVG – Filter Effects
feBlend feComposite feDiffuseLighting
feOffset feColorMatrix feSpecularLighting
feFlood feConvolveMatrix feDistantLight
feGaussianBlur feTurbulence fePointLight
feImage feMorphology feSpotLight
feMerge feTile feComponentTransfer
feDisplacementMap
![Page 58: HTML5 / CSS3christophe.delagarde.free.fr/Formation/HTML5.pdf · HTML 5 Dernière version de HTML (28 oct. 2014) Rich Interface Applications Langage balisé Basé sur XHTML 2 HTML5](https://reader035.vdocuments.mx/reader035/viewer/2022062403/604f0c924368240fae6a6d51/html5/thumbnails/58.jpg)
HTML5 59
SVG – Filter Effects
<defs>
<filter id="f1" x="0" y="0" >
<feGaussianBlur in="SourceGraphic" stdDeviation="15" />
</filter>
</defs>
<rect x="600" y="0" width="100" height="100" stroke="green" stroke-width="3" fill="yellow" filter="url(#f1)" />
![Page 59: HTML5 / CSS3christophe.delagarde.free.fr/Formation/HTML5.pdf · HTML 5 Dernière version de HTML (28 oct. 2014) Rich Interface Applications Langage balisé Basé sur XHTML 2 HTML5](https://reader035.vdocuments.mx/reader035/viewer/2022062403/604f0c924368240fae6a6d51/html5/thumbnails/59.jpg)
HTML5 60
SVG – Filter Effects
<defs>
<filter id="f2" x="0" y="0" width="200%" height="200%" >
<feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
<feBlend in="SourceGraphic" in2="offOut" mode="normal" />
</filter>
</defs>
<rect x="750" y="0" width="100" height="100" stroke="green" stroke-width="3" fill="yellow" filter="url(#f2)" />
![Page 60: HTML5 / CSS3christophe.delagarde.free.fr/Formation/HTML5.pdf · HTML 5 Dernière version de HTML (28 oct. 2014) Rich Interface Applications Langage balisé Basé sur XHTML 2 HTML5](https://reader035.vdocuments.mx/reader035/viewer/2022062403/604f0c924368240fae6a6d51/html5/thumbnails/60.jpg)
HTML5 61
SVG – Filter Effects
<defs>
<filter id="f3" x="0" y="0" width="200%" height="200%" >
<feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
<feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
<feBlend in="SourceGraphic" in2="offOut" mode="normal" />
</filter>
</defs>
<rect x="750" y="150" width="100" height="100" stroke="green" stroke-width="3" fill="yellow" filter="url(#f3)" />
![Page 61: HTML5 / CSS3christophe.delagarde.free.fr/Formation/HTML5.pdf · HTML 5 Dernière version de HTML (28 oct. 2014) Rich Interface Applications Langage balisé Basé sur XHTML 2 HTML5](https://reader035.vdocuments.mx/reader035/viewer/2022062403/604f0c924368240fae6a6d51/html5/thumbnails/61.jpg)
HTML5 62
SVG – Filter Effects
<defs>
<filter id="f4" x="0" y="0" width="200%" height="200%" >
<feOffset result="offOut" in="SourceAlpha" dx="20" dy="20" />
<feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
<feBlend in="SourceGraphic" in2="offOut" mode="normal" />
</filter>
</defs>
<rect x="750" y="300" width="100" height="100" stroke="green" stroke-width="3" fill="yellow" filter="url(#f4)" />
![Page 62: HTML5 / CSS3christophe.delagarde.free.fr/Formation/HTML5.pdf · HTML 5 Dernière version de HTML (28 oct. 2014) Rich Interface Applications Langage balisé Basé sur XHTML 2 HTML5](https://reader035.vdocuments.mx/reader035/viewer/2022062403/604f0c924368240fae6a6d51/html5/thumbnails/62.jpg)
WebGL
http://codepen.io/dissimulate/full/KrAwx
http://madebyevan.com/webgl-water/
December 17, 2015 63
![Page 63: HTML5 / CSS3christophe.delagarde.free.fr/Formation/HTML5.pdf · HTML 5 Dernière version de HTML (28 oct. 2014) Rich Interface Applications Langage balisé Basé sur XHTML 2 HTML5](https://reader035.vdocuments.mx/reader035/viewer/2022062403/604f0c924368240fae6a6d51/html5/thumbnails/63.jpg)
Crédits
Auteur Christophe Delagarde
Sources Mickaël Martin Nevot ( www.mickael-martin-nevot.com )
w3schools ( http://www.w3schools.com/ )
HTML5 Canvas Tutorial (http://www.html5canvastutorials.com/)
HTML5 64