SlideShare une entreprise Scribd logo
1  sur  58
Télécharger pour lire hors ligne
Développement Web 
HTML5, CSS3, APIs W3C
A propos 
Yoann Gotthilf, CTO d’une startup et freelance Web/Mobile 
•développeur Web depuis 13 ans 
•développeur Fullstack JS depuis 1 ans 
•consultant sécurité pendant 6 ans 
•développeur Android depuis 6 ans 
yoann.gotthilf atgmail.com •@ygotthilf
Références 
•Site officiel du w3c : http://www.w3.org/ 
•Site d’éducation non officiel : http://www.w3schools.com/ 
•En français : http://www.alsacreations.com/ 
•Vérifier la compatibilité : http://caniuse.com/ 
•Editeurs en ligne : CodePen, JS Bin, JS Fiddle, ...
Les navigateurs
Histoire sans grand H 
•1990: Tim Berners-Lee développe HTML (+ URL, HTTP) 
•1994: Fondation du W3C 
•2000: XHTML côtoie HTML 4.01 
•2007: W3C développe HTML5(propulsé par WHATWG) 
•2008: Working Draft HTML5 
•2010: XHTML abondonné 
•2012: Candidate Recommendation HTML5
Syntaxe 
•HTML est dérivé du SGML et non du XML 
<a href="#">Home</a> 
<input type="text" value="John Doe" disabled> 
<input type="text" value=John> 
<input type="text" value="John Doe"> 
<input type="text" value='John Doe'>
DTD 
<!DOCTYPE html> 
•Pour les validateurs W3C 
•Avant : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Meta 
<meta charset="utf-8"> 
•Pour le navigateur 
•Avant : <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
•Meta «keywords» obselète
Language 
<html lang="en" > ... </html> 
•pour les moteurs de recherche, navigateurs, synthétiseurs vocaux, ... 
•avant : <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
Script 
<script src="javascript.js"></script> 
•nouvel attribut : async 
•avant : <script type="text/javascript" src="javascript.js"></script>
Elements supprimés 
•<acronym> 
•<applet> 
•<basefont> 
•<big> 
•<center> 
•<dir> 
•<font> 
•<frame> 
•<frameset> 
•<noframes> 
•<strike> 
•<tt>
Structure 
<header> 
<footer> 
<aside> 
<section> 
<nav> 
Favorise : 
•Lisibilité 
•Accessibilité 
•Personnalisation 
•Optimisation indexation 
•Générateur auto table des matières 
<article> 
<article> 
<section>
Figure 
<figure> 
Content (image, video, ...) 
Legend
Compatibilité IE 8/9 
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, summary { 
display: block; 
} 
<!--[if lt IE 9]> 
<script src="bower_components/html5shiv/dist/html5shiv.js"></script> 
<![endif]--> 
Forcer la CSS 
Créer les élements HTML
Formulaire : types d’input 
•text 
•number 
•submit 
•File 
•range 
•search IE, FF, Opera 
•email Safari 
•url Safari 
•color IE, Safari 
•date, datetime, datetime-local, time, month, week IE, FF 
•tel aucun support
Formulaire : attributs 
•placeholder 
•autofocus 
•autocomplete="off" Opera 
•disabled 
•size
Formulaire : validation 
•required Safari, iOS, Android 
•pattern Safari 
•min, max, step FF 
•novalidate Safari
Formulaire : compatibilité IE 8/9 
A oublier...
Formulaire : vérifier la compatibilité 
En natif : 
•Attribut : var compatible = ‘placeholder' in document.createElement(‘input'); 
•Input Type : var el = document.createElement('input'); el.setAttribute('type', 'datetime'); var compatible = el.type !== 'text‘; 
Avec Modernizr : 
•Attribut : var compatible = Modernizr.input.placeholder ; 
•Input Type : var compatible = Modernizr.inputtypes.datetime ;
Label 1/2 
<!--#1 --> 
<input type="checkbox"> 
<label>Nom 1</label> 
<!--#2 --> 
<label> 
<input type="checkbox"> Nom 2 
</label> 
<!--#3 --> 
<input type="checkbox" id="name"> 
<label for="name">Nom 3</label>
Label 2/2 
<!--Bad --> 
<input type="checkbox"> 
<label>Nom 1</label> 
<!--Good --> 
<label> 
<input type="checkbox"> Nom 2 
</label> 
<!--Good --> 
<input type="checkbox" id="name"> 
<label for="name">Nom 3</label>
Multimédia 1/2 
<audio autoplay="autoplay" controls="controls"> 
<source src="file.ogg" /> 
<source src="file.mp3" /> 
<a>Download this file.</a> 
</audio> 
<videocontrolspreload> 
<sourcesrc="cohagenPhoneCall.ogv"type="video/ogg; codecs='vorbis, theora'"/> 
<sourcesrc="cohagenPhoneCall.mp4"type="video/mp4; 'codecs='avc1.42E01E, mp4a.40.2'"/> 
<p>Your browser is old</p> 
</video>
Multimédia 2/2 
•Sur un élement DOM <audio> ou <video> : 
•play() 
•pause() 
•load() 
•canPlayType() 
•src 
•currentTime 
•Played 
•timeupdate(fn) 
•seeking(fn) 
•... 
// Exemple 
myVid=document.getElementById("video1"); 
myVid.src="movie.ogg"; 
myVid.play();
Drag and Drop (DnD) : Exemple 1/3 
http://codepen.io/ygotthilf/pen/arCdF 
<div id="todrag" class="col-25 left"> 
<span draggable="true">Draggable n°1</span> 
<span draggable="true">Draggable n°2</span> 
<span draggable="true">Draggable n°3</span> 
<span draggable="true">Draggable n°4</span> 
</div> 
<div class="col-50 left"> 
<h2>Lâchez ici &darr;</h2> 
<div id="mydropzone" > 
</div> 
</div> 
<div class="col-25 right"> 
<div id="mylist" class="hidden"> 
</div> 
</div>
Drag and Drop (DnD) : Exemple 2/3 
http://codepen.io/ygotthilf/pen/arCdF 
<div id="todrag" class="col-25 left"> 
<span draggable="true" ondragstart="dragStart(event)">Draggable n°1</span> 
<span draggable="true" ondragstart="dragStart(event)">Draggable n°2</span> 
<span draggable="true" ondragstart="dragStart(event)">Draggable n°3</span> 
<span draggable="true" ondragstart="dragStart(event)">Draggable n°4</span> 
</div> 
<div class="col-50 left"> 
<h2>Lâchez ici &darr;</h2> 
<div id="mydropzone" ondragover="dragOver(event)" ondrop="drop(event)"> 
</div> 
</div> 
<div class="col-25 right"> 
<div id="mylist" class="hidden"> 
</div> 
</div> 
var dndDone = false; 
function dragStart (event){ 
event.target.style.background = "green"; 
event.dataTransfer.setData("text/plain", event.target.innerText); 
dndDone = false; 
} 
function drop (event) { 
var mylist = document.getElementById('mylist'); 
mylist.classList.remove("hidden"); 
var span = document.createElement('span'); 
span.innerHTML = event.dataTransfer.getData("text/plain"); 
mylist.appendChild(span); 
event.target.style.background = 'white'; 
dndDone = true; 
event.preventDefault(); 
} 
function dragOver (event){ 
event.preventDefault(); 
} 
[...]
Drag and Drop (DnD) : Exemple 3/3 
http://codepen.io/ygotthilf/pen/arCdF 
<div id="todrag" class="col-25 left"> 
<span draggable="true" ondragstart="dragStart(event)" ondragend="dropEnd(event)"> 
Draggable n°1 
</span> 
<span draggable="true" ondragstart="dragStart(event)" ondragend="dropEnd(event)"> 
Draggable n°2 
</span> 
<span draggable="true" ondragstart="dragStart(event)" ondragend="dropEnd(event)"> 
Draggable n°3 
</span> 
<span draggable="true" ondragstart="dragStart(event)" ondragend="dropEnd(event)"> 
Draggable n°4 
</span> 
</div> 
<div class="col-50 left"> 
<h2>Lâchez ici &darr;</h2> 
<div id="mydropzone" ondragenter="dragEnter(event)" ondragleave="dragLeave(event)" 
ondragover="dragOver(event)" ondrop="drop(event)"></div> 
</div> 
<div class="col-25 right"> <div id="mylist" class="hidden"></div> </div> 
[...] 
function dropEnd (event) { 
if(dndDone) { 
event.target.parentNode.removeChild(event.target); 
} 
else { 
event.target.style.background = 'white' 
} 
} 
function dragEnter (event){ 
event.target.style.background = "#CCCCCC"; 
event.preventDefault(); 
} 
function dragLeave (event){ 
event.target.style.background = "white"; 
event.preventDefault(); 
}
Drag and Drop (DnD) : Résumé 
•Attribut draggable="true" 
•Evenements : 
•dragstart 
•drag 
•dragend 
•dragenter 
•dragover 
•dragleave 
•drop 
•event.dataTransfer 
•files (FileList) 
•dropEffect 
•effectAllowed 
•setData(type, data) 
•setDragImage(image, x, y) 
•clearData()
Canvas : présentation 
Element HTML pour dessiner en JavaScript 
•Bien supporté (sauf IE8) 
•Trois étapes à chaque fois : 
1.<canvas id="mon_canvas" height="400px" width="400px"></canvas> 
2.var c = document.getElementById('mon_canvas'); 
3.var ctx = c.getContext("2d"); 
•Librairies tierces : 
•Paper.js 
•Sketch.js 
•KineticJS 
•MelonJS 
•Processing.js 
•Fabric.js 
•...
Canvas : exemple 
var c = document.getElementById('mon_canvas'); 
var ctx = c.getContext("2d"); 
// Gouvernail 
ctx.fillStyle = "sienna"; 
ctx.fillRect(275,250,25,70); 
// Coque du bâteau 
ctx.beginPath(); // Début d'un autre chemin 
ctx.moveTo(50,250); 
ctx.lineTo(100,300); 
ctx.lineTo(250,300); 
ctx.lineTo(300,250); 
ctx.fillStyle = "peru"; 
ctx.strokeStyle = "sienna"; // Définition du contour 
ctx.lineWidth = 5; // Définition de la largeur de ligne 
ctx.fill(); // Application du remplissage 
ctx.stroke(); // Application du contour 
// Mât 
ctx.beginPath(); 
ctx.moveTo(140,50); 
ctx.lineTo(140,250); 
ctx.lineWidth = 10; 
ctx.stroke(); 
// Voile du bateau 
ctx.beginPath(); 
ctx.moveTo(150,80); 
ctx.lineTo(300,230); 
ctx.lineTo(150,230); 
ctx.closePath(); 
ctx.fillStyle = "lightblue"; 
ctx.fill(); 
// boule du mât 
ctx.beginPath(); 
ctx.arc(140,50,10,0,Math.PI*2); 
ctx.fillStyle = "sienna"; 
ctx.fill(); 
// Mer 
var gradient = ctx.createLinearGradient(0,280,0,400); 
gradient.addColorStop(0,"rgba(0,0,255,0.2)"); // Départ 
gradient.addColorStop(1,"rgba(0,0,255,1)"); // Arrivée 
ctx.fillStyle = gradient; // Affectation au remplissage 
ctx.fillRect(0,280,400,120); 
http://codepen.io/ygotthilf/pen/hKoDn 
x 
y
APIs Web
SVG 
Afficher des dessins vectoriels dans le DOM 
•Bien supporté (sauf IE8) 
•Librairies tierces : 
•D3.js 
•Snag.svg 
•Processing.js 
•... 
•Exemple : 
<svg width="300" height="200"> 
<polygon points="100,10 40,198 190,78 10,78 160,198" 
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" /> 
</svg>
SVG vs Canvas 
SVG 
Canvas 
Indépendant de la résolution 
Manipulationd’événements 
Performance dégradé sidessin complexe 
Pas adapté au jeu 
Dépendant de la résolution 
Pas de gestion desévénements 
Peuadapté au rendu de texte 
Sauvegardedu dessin en .PNG ou .JPG 
Adapté au jeu 
http://www.w3schools.com/html/html5_svg.asp
Géolocalisation : l’API 1/2 
•Bien supporté (sauf IE8, forcément...) 
•Obtenir la localisation une seule fois : 
•navigator.geolocation.getCurrentPosition (positionCb, errorCb, options) 
•Obtenir la localisation en continu : 
•navigator.geolocation.watchPosition (positionCb, errorCb, options) 
•retourne l’id d’«abonnement» 
•s’annule via la méthode : clearWatch(id) 
•Options possibles : 
•enableHighAccuracy 
•timeout 
•maximumAge
Géolocalisation : l’API 2/2 
•Le callback de succès retourne un objet contenant : 
•timestamp 
•coordonnées : 
•latitude 
•longitude 
•altitude 
•accuracy 
•altitudeAccuracy 
•heading 
•speed 
•Le callback d’erreur retourne : 
•code : error.PERMISSION_DENIED, error.POSITION_UNAVAILABLE, error.TIMEOUT, error.UNKNOWN_ERROR 
•message
Géolocalisation : exemple 
varx =document.getElementById("demo"); 
functiongetLocation() { 
if(navigator.geolocation) { 
navigator.geolocation.getCurrentPosition( 
showPosition, 
function(error) { 
x.innerHTML ="Geolocation failed : "+error.message +" (code "+error.code +")"; 
}, 
{ 
enableHighAccuracy:true, 
timeout:10000 
}); 
} else{ 
x.innerHTML ="Geolocation is not supported by this browser."; 
} 
} 
functionshowPosition(position) { 
x.innerHTML ="Latitude: "+position.coords.latitude +"<br>Longitude: "+position.coords.longitude; 
}
Web Storage : présentation 
Stocker des données clés/valeurs dans le navigateur 
•Compatible avec navigateur récent (et oui...) 
•Deux types de stockage : 
•permanent : localStorage 
•temporaire (suppprimé à la fermeture de l’onglet) : sessionStorage
Web Storage : l’API 
•Lire des données 
•getItem(clé) 
•Ou directement : localStorage.ma_clé 
•length 
•key(index) 
•Ecrire des données 
•setItem(clé, valeur) 
•removeItem(clé) 
•clear() 
if(typeof(Storage) !== "undefined") { 
// Code for localStorage/sessionStorage. 
localStorage.setItem("lastname", "Smith"); 
var lastname = localStorage.getItem("lastname"); 
} else { 
// Sorry! No Web Storage support.. 
}
Web Storage : limitations 
•Limité à au moins 5Mo 
•Protégé par nom de domaine (comme les cookies) 
•Stocke uniquement des chaînes de caractères : 
•Caster la lecture d’un nombre 
•Utiliser JSON pour stocker/lire un objet 
if (localStorage.clickcount) { 
localStorage.clickcount = Number(localStorage.clickcount) + 1; 
} else{ 
localStorage.clickcount = 1; 
} 
var user = { 
firstname : "Obi-Wan", 
lastname : "Kenoby" 
}; 
var userJson = JSON.stringify(user); 
sessionStorage.setItem("user",userJson); 
// ... 
var userJson = sessionStorage.getItem("user"); 
var user = JSON.parse(userJson);
Web Storage : déboguage 
Dans la console de développement du navigateur 
Chrome
Web Socket : présentation 
Communication bidirectionnelle 
•Incompatibe avec IE8/9 et navigrateur Android 4.3 
•web socket ≠long polling (ajax) 
•Librairies tierces : 
•Socket.IO 
•SignalR (ASP.NET) 
•Meteor (fullstack JS Framework) 
•Firebase (BaaS) 
•...
Web Socket : l’API 
Créer la websocket : 
•var ws= new WebSocket("ws://websocketUrl"); 
Intéragir avec les messages reçus : 
•ws.onopen = function(evt) { alert("Connection open ..."); }; 
•ws.onmessage= function(evt) { alert( "Received Message: " + evt.data); }; 
•ws.onclose = function(evt) { alert("Connection closed."); }; 
•ws.onerror = function(evt) { alert("WebSocket error : " + e.data) }; 
Envoyer un message 
•ws.send(MyMessage); 
Fermer la websocket : 
•ws.close();
Autres API 
•Offline : rendre une application hors ligne (incompatibe IE8/9) 
•Web Worker : lancer des tâches JavaScript isolées en parralèle(incompatibe IE8/9, Android 4.3) 
•Server-Sent Events : mise à jour automatique d’une page grâce à des push server (incompatible IE) 
•Web notification : notifier l’utilisateur en dehors du navigateur (uniquement FF, Chrome, Safari) 
•Web RTC : Communication pair à pair (uniquement FF, Chome, Opéra) 
•...
Transformation 
Effet pour changer la forme, taille, position d’un élément 
•Propriété css : transform(-ms-, -webkit-, -moz-, -o-) 
•Exemple : 
.content { 
transform: rotate(45deg); 
} 
http://codepen.io/ygotthilf/pen/asKnk
Transformations 2D 
•translate(x,y) translateX, translateY 
•rotate(deg) 
•scale(ratioX, ratioY) scaleX, scaleY 
•skew(degX, degY) skewX, skexY 
•matrix(n,n,n,n,n,n)
Transformation 3D 
•translate3d(x,y,z) 
•rotate3d(x,y,z,angle) 
•scale3d(x,y,z) 
•matrix3d (n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 
•perspective(n) 
<div class="container"> 
<div class="content rotate3d">Hello world</div> 
</div> 
<div class="container perspective"> 
<div class="content rotate3d">Hello world</div> 
</div> 
.perspective { 
perpective : 200px; 
-webkit-perspective : 200px; 
} 
.rotate3d { 
transform : rotateY(45deg); 
} 
http://codepen.io/ygotthilf/pen/asKnk
Transition 
Effet appliqué à un changement de style d’un élement 
•Propriété css globale : transition 
•4 propriétés possibles : 
•Propriété impactée 
•Délai 
•Durée 
•Timing function 
.hide-on-hover { 
opacity : 1; 
transition : opacity 1s ease-in-out 500ms; 
} 
.hide-on-hover:hover { 
opacity : 0; 
}
Transition : propriété impactée 
Les priorités impactés par l’effet de transition 
•Propriété : transition-property 
•Valeur par défaut : all 
•Possible d’ajouter plusieurs propriété, Exemple : 
div { 
transition-property: width, opacity; 
}
Transition : délai et durée 
•Délai : quand la transition démarre 
•Durée : combien de temps la transition dure 
•Propriété délai : transition-delay 
•Propriété durée : transition-duration 
•Valeurs acceptées : seconde (s) ou milliseconde (ms) 
•Exemple : 
div { 
transition-delay: 2s; 
transition-duration: 500ms; 
}
Transition : timing function 
La courbe de vitesse de l’effet 
•Propriété : transition-timing-function 
•Valeurs acceptées : 
•ease 
•linear 
•ease-in 
•ease-out 
•ease-int-out 
•cubic-bezier(n,n,n,n) 
Timing function 
(source : Alsacréation)
Animation 
Créer une animation sur un élément 
/* Chrome, Safari, Opera */ 
@-webkit-keyframes disco { 
0% {background: red;} 
25% {background: yellow;} 
50% {background: blue;} 
100% {background: green;} 
} 
/* Standard syntax */ 
@keyframes disco { 
0% {background: red;} 
25% {background: yellow;} 
50% {background: blue;} 
100% {background: green;} 
} 
.disco { 
-webkit-animation: disco 5s infinite; /* Chrome, Safari, Opera */ 
animation: disco 5s infinite; 
} 
http://codepen.io/ygotthilf/pen/asKnk
Animation : @keyframes 
Définir une animation 
•Règle CSS : @keyframes 
•Proprités : 
•fromet to 
•pourcentage 
@-webkit-keyframes myfirst { 
from {background: red;} 
to {background: yellow;} 
} 
/* Standard syntax */ 
@keyframes myfirst { 
from {background: red;} 
to {background: yellow;} 
} 
/* Chrome, Safari, Opera */ 
@-webkit-keyframes myfirst { 
0% {background: red;} 
25% {background: yellow;} 
50% {background: blue;} 
100% {background: green;} 
} 
/* Standard syntax */ 
@keyframes myfirst { 
0% {background: red;} 
25% {background: yellow;} 
50% {background: blue;} 
100% {background: green;} 
}
Animation : comportement 
•Prorité globale dans l’élement : animation 
•Proriétés 
•animation-name (spécifié @keyframes) 
•animation-duration 
•animation-timing-function 
•animation-delay 
•animation-iteration-count (infinite ou nombre) 
•animation-direction (alternate, reverse, alternate-reverse, normal) 
•animation-play-state(paused ou running)
Media queries 
Application une feuille de style en fonction du terminal 
.bloc { 
background :black; 
} 
@media screen and (min-width: 200px) and (max-width: 640px) { 
.bloc { 
background :white; 
} 
}
Media queries : type de terminal 
Appliquer une CSS en fonction du type de terminal : 
•screen: Écrans 
•handheld : Périphériques mobiles ou de petite taille 
•print: Impression 
•speech :Synthèses vocales 
•braille : Plages braille 
•embossed :Imprimantes braille 
•projection :Projecteurs (ou présentations avec slides) 
•tty :Terminal/police à pas fixe 
•tv :Téléviseur 
•all :Tous les précédents
Media queries : propriétés du terminal 
Les propriétés (à préfixer par min-ou max-) : 
•color : support de la couleur (bits/pixel) 
•color-index : périphérique utilisant une table de couleurs indexées 
•device-aspect-ratio : ratio du périphérique de sortie (par exemple 16/9) 
•aspect-ratio : ratio de la zone d'affichage 
•device-height : dimension en hauteur du périphérique 
•device-width : dimension en largeur du périphérique 
•grid : périphérique bitmap ou grille (ex : lcd) 
•height: dimension en hauteur de la zone d'affichage 
•monochrome : périphérique monochrome ou niveaux de gris (bits/pixel) 
•orientation: orientation du périphérique (portait ou landscape) 
•resolution :résolution du périphérique (en dpi, dppx, ou dpcm) 
•scan : type de balayage des téléviseurs (progressive ou interlace) 
•width: dimension en largeur de la zone d'affichage

Contenu connexe

Tendances

Enib cours c.a.i. web - séance #1 - html5 css3-js - 2
Enib   cours c.a.i. web - séance #1 - html5 css3-js - 2Enib   cours c.a.i. web - séance #1 - html5 css3-js - 2
Enib cours c.a.i. web - séance #1 - html5 css3-js - 2
Horacio Gonzalez
 

Tendances (20)

Introduction a jQuery
Introduction a jQueryIntroduction a jQuery
Introduction a jQuery
 
Présentation jQuery pour débutant
Présentation jQuery pour débutantPrésentation jQuery pour débutant
Présentation jQuery pour débutant
 
Inclure du Javascript de manière performante
Inclure du Javascript de manière performanteInclure du Javascript de manière performante
Inclure du Javascript de manière performante
 
Introduction à la performance web
Introduction à la performance webIntroduction à la performance web
Introduction à la performance web
 
Optimiser son référencement WordPress - QueDuWeb 2016
Optimiser son référencement WordPress - QueDuWeb 2016Optimiser son référencement WordPress - QueDuWeb 2016
Optimiser son référencement WordPress - QueDuWeb 2016
 
Intégrateurs, bousculez vos habitudes
Intégrateurs, bousculez vos habitudesIntégrateurs, bousculez vos habitudes
Intégrateurs, bousculez vos habitudes
 
Codedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
Codedarmor 2012 - 06/03 - HTML5, CSS3 et JavascriptCodedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
Codedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
 
Formation PHP avancé - Cake PHP
Formation PHP avancé - Cake PHPFormation PHP avancé - Cake PHP
Formation PHP avancé - Cake PHP
 
HTML5 / CSS3 : Mythes et realite
HTML5 / CSS3 : Mythes et realiteHTML5 / CSS3 : Mythes et realite
HTML5 / CSS3 : Mythes et realite
 
Bootstrap 3
Bootstrap 3Bootstrap 3
Bootstrap 3
 
Cours JavaScript
Cours JavaScriptCours JavaScript
Cours JavaScript
 
Php 2 - Approfondissement MySQL, PDO et MVC
Php 2 - Approfondissement MySQL, PDO et MVCPhp 2 - Approfondissement MySQL, PDO et MVC
Php 2 - Approfondissement MySQL, PDO et MVC
 
Un site mobile en une heure ? Top chrono ! (Barcamp-Bordeaux 2011)
Un site mobile en une heure ? Top chrono ! (Barcamp-Bordeaux 2011)Un site mobile en une heure ? Top chrono ! (Barcamp-Bordeaux 2011)
Un site mobile en une heure ? Top chrono ! (Barcamp-Bordeaux 2011)
 
Comment se charge WordPress ? Le loading du core.
Comment se charge WordPress ? Le loading du core.Comment se charge WordPress ? Le loading du core.
Comment se charge WordPress ? Le loading du core.
 
Sécuriser un site WordPress - Semaine du web
Sécuriser un site WordPress - Semaine du webSécuriser un site WordPress - Semaine du web
Sécuriser un site WordPress - Semaine du web
 
Html 5
Html 5Html 5
Html 5
 
Cours php & Mysql - 1ére partie
Cours php & Mysql - 1ére partieCours php & Mysql - 1ére partie
Cours php & Mysql - 1ére partie
 
ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 1/3 - HTTP, HTML, CSS JS
ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 1/3 - HTTP, HTML, CSS JSENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 1/3 - HTTP, HTML, CSS JS
ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 1/3 - HTTP, HTML, CSS JS
 
OWASP Top Ten 2007 - Sommaire executif - French version
OWASP Top Ten 2007 - Sommaire executif - French versionOWASP Top Ten 2007 - Sommaire executif - French version
OWASP Top Ten 2007 - Sommaire executif - French version
 
Enib cours c.a.i. web - séance #1 - html5 css3-js - 2
Enib   cours c.a.i. web - séance #1 - html5 css3-js - 2Enib   cours c.a.i. web - séance #1 - html5 css3-js - 2
Enib cours c.a.i. web - séance #1 - html5 css3-js - 2
 

Similaire à Développement Web - HTML5, CSS3, APIs Web

Similaire à Développement Web - HTML5, CSS3, APIs Web (20)

HTML5, le nouveau buzzword
HTML5, le nouveau buzzwordHTML5, le nouveau buzzword
HTML5, le nouveau buzzword
 
ENIB 2015-2016 - CAI Web - S01E01- Côté navigateur 2/3 - HTML5, CSS3, Twitte...
ENIB 2015-2016 - CAI Web -  S01E01- Côté navigateur 2/3 - HTML5, CSS3, Twitte...ENIB 2015-2016 - CAI Web -  S01E01- Côté navigateur 2/3 - HTML5, CSS3, Twitte...
ENIB 2015-2016 - CAI Web - S01E01- Côté navigateur 2/3 - HTML5, CSS3, Twitte...
 
technologie web - part2
technologie web - part2technologie web - part2
technologie web - part2
 
Internationalisation du Front
Internationalisation du FrontInternationalisation du Front
Internationalisation du Front
 
L'Open Web en tant que pierre angulaire du développement multi-objets
L'Open Web en tant que pierre angulaire du développement multi-objetsL'Open Web en tant que pierre angulaire du développement multi-objets
L'Open Web en tant que pierre angulaire du développement multi-objets
 
HTML5 maintenant partie 1 : la sémantique
HTML5 maintenant partie 1 : la sémantiqueHTML5 maintenant partie 1 : la sémantique
HTML5 maintenant partie 1 : la sémantique
 
Accélérez le développement de vos interfaces web
Accélérez le développement de vos interfaces webAccélérez le développement de vos interfaces web
Accélérez le développement de vos interfaces web
 
Javascript proprement
Javascript proprementJavascript proprement
Javascript proprement
 
Html5 2
Html5 2Html5 2
Html5 2
 
Intégrer correctement un e-mail, c'est possible ! Démonstration en 1h30
Intégrer correctement un e-mail, c'est possible ! Démonstration en 1h30Intégrer correctement un e-mail, c'est possible ! Démonstration en 1h30
Intégrer correctement un e-mail, c'est possible ! Démonstration en 1h30
 
HTML5 et Internet Explorer 9, est-ce réellement compatible?
HTML5 et Internet Explorer 9, est-ce réellement compatible?HTML5 et Internet Explorer 9, est-ce réellement compatible?
HTML5 et Internet Explorer 9, est-ce réellement compatible?
 
ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 2/3 - HTML5 / CSS3 / Twitter...
ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 2/3 - HTML5 / CSS3 / Twitter...ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 2/3 - HTML5 / CSS3 / Twitter...
ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 2/3 - HTML5 / CSS3 / Twitter...
 
Présentation complète de l'HTML5
Présentation complète de l'HTML5Présentation complète de l'HTML5
Présentation complète de l'HTML5
 
La mobilité dans Drupal
La mobilité dans DrupalLa mobilité dans Drupal
La mobilité dans Drupal
 
[JDLL 2018] Templer, Git, Bootstrap, PHP : des outils libres pour concevoir l...
[JDLL 2018] Templer, Git, Bootstrap, PHP : des outils libres pour concevoir l...[JDLL 2018] Templer, Git, Bootstrap, PHP : des outils libres pour concevoir l...
[JDLL 2018] Templer, Git, Bootstrap, PHP : des outils libres pour concevoir l...
 
Html5 now light
Html5 now lightHtml5 now light
Html5 now light
 
Authentification sociale en angular 1.pptx
Authentification sociale en angular 1.pptxAuthentification sociale en angular 1.pptx
Authentification sociale en angular 1.pptx
 
HTML5... La révolution maintenant!
HTML5... La révolution maintenant!HTML5... La révolution maintenant!
HTML5... La révolution maintenant!
 
HTML5... La révolution maintenant!
HTML5... La révolution maintenant!HTML5... La révolution maintenant!
HTML5... La révolution maintenant!
 
Devoxx France 2015 - Développement web en 2015
Devoxx France 2015 - Développement web en 2015Devoxx France 2015 - Développement web en 2015
Devoxx France 2015 - Développement web en 2015
 

Plus de Yoann Gotthilf (6)

Introduction to AngularJS
Introduction to AngularJSIntroduction to AngularJS
Introduction to AngularJS
 
Most Common JavaScript Mistakes
Most Common JavaScript MistakesMost Common JavaScript Mistakes
Most Common JavaScript Mistakes
 
Introduction to REST API with Node.js
Introduction to REST API with Node.jsIntroduction to REST API with Node.js
Introduction to REST API with Node.js
 
Introduction to the MEAN stack
Introduction to the MEAN stackIntroduction to the MEAN stack
Introduction to the MEAN stack
 
Web development - technologies and tools
Web development - technologies and toolsWeb development - technologies and tools
Web development - technologies and tools
 
Introduction à Android
Introduction à AndroidIntroduction à Android
Introduction à Android
 

Dernier

Dernier (11)

Fiche de vocabulaire pour faire une appréciation
Fiche de vocabulaire pour faire une appréciationFiche de vocabulaire pour faire une appréciation
Fiche de vocabulaire pour faire une appréciation
 
GHASSOUB _Seance 4_ measurement and evaluation in education_-.pptx
GHASSOUB _Seance 4_ measurement and evaluation in education_-.pptxGHASSOUB _Seance 4_ measurement and evaluation in education_-.pptx
GHASSOUB _Seance 4_ measurement and evaluation in education_-.pptx
 
rapport de stage gros oeuvre_compressed.pdf
rapport de stage gros oeuvre_compressed.pdfrapport de stage gros oeuvre_compressed.pdf
rapport de stage gros oeuvre_compressed.pdf
 
Nathanaëlle Herbelin.pptx Peintre française
Nathanaëlle Herbelin.pptx Peintre françaiseNathanaëlle Herbelin.pptx Peintre française
Nathanaëlle Herbelin.pptx Peintre française
 
GHASSOUB _Seance 3_ measurement and evaluation in education.pptx
GHASSOUB _Seance 3_ measurement and evaluation in education.pptxGHASSOUB _Seance 3_ measurement and evaluation in education.pptx
GHASSOUB _Seance 3_ measurement and evaluation in education.pptx
 
Réunion des directeurs de Jonzac - 15 mai 2024
Réunion des directeurs de Jonzac - 15 mai 2024Réunion des directeurs de Jonzac - 15 mai 2024
Réunion des directeurs de Jonzac - 15 mai 2024
 
CALENDRIER ET COMPTE RENDU REUNION DIRECTION
CALENDRIER ET COMPTE RENDU REUNION DIRECTIONCALENDRIER ET COMPTE RENDU REUNION DIRECTION
CALENDRIER ET COMPTE RENDU REUNION DIRECTION
 
Les débuts de la collection "Le livre de poche"
Les débuts de la collection "Le livre de poche"Les débuts de la collection "Le livre de poche"
Les débuts de la collection "Le livre de poche"
 
Un petit coin etwinning- Au fil des cultures urbaines
Un petit coin  etwinning- Au fil des cultures urbainesUn petit coin  etwinning- Au fil des cultures urbaines
Un petit coin etwinning- Au fil des cultures urbaines
 
Àma Gloria.pptx Un film tourné au Cap Vert et en France
Àma Gloria.pptx   Un film tourné au Cap Vert et en FranceÀma Gloria.pptx   Un film tourné au Cap Vert et en France
Àma Gloria.pptx Un film tourné au Cap Vert et en France
 
Texte avec différentes critiques positives, négatives ou mitigées
Texte avec différentes critiques positives, négatives ou mitigéesTexte avec différentes critiques positives, négatives ou mitigées
Texte avec différentes critiques positives, négatives ou mitigées
 

Développement Web - HTML5, CSS3, APIs Web

  • 1. Développement Web HTML5, CSS3, APIs W3C
  • 2. A propos Yoann Gotthilf, CTO d’une startup et freelance Web/Mobile •développeur Web depuis 13 ans •développeur Fullstack JS depuis 1 ans •consultant sécurité pendant 6 ans •développeur Android depuis 6 ans yoann.gotthilf atgmail.com •@ygotthilf
  • 3. Références •Site officiel du w3c : http://www.w3.org/ •Site d’éducation non officiel : http://www.w3schools.com/ •En français : http://www.alsacreations.com/ •Vérifier la compatibilité : http://caniuse.com/ •Editeurs en ligne : CodePen, JS Bin, JS Fiddle, ...
  • 5.
  • 6. Histoire sans grand H •1990: Tim Berners-Lee développe HTML (+ URL, HTTP) •1994: Fondation du W3C •2000: XHTML côtoie HTML 4.01 •2007: W3C développe HTML5(propulsé par WHATWG) •2008: Working Draft HTML5 •2010: XHTML abondonné •2012: Candidate Recommendation HTML5
  • 7. Syntaxe •HTML est dérivé du SGML et non du XML <a href="#">Home</a> <input type="text" value="John Doe" disabled> <input type="text" value=John> <input type="text" value="John Doe"> <input type="text" value='John Doe'>
  • 8. DTD <!DOCTYPE html> •Pour les validateurs W3C •Avant : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  • 9. Meta <meta charset="utf-8"> •Pour le navigateur •Avant : <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> •Meta «keywords» obselète
  • 10. Language <html lang="en" > ... </html> •pour les moteurs de recherche, navigateurs, synthétiseurs vocaux, ... •avant : <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  • 11. Script <script src="javascript.js"></script> •nouvel attribut : async •avant : <script type="text/javascript" src="javascript.js"></script>
  • 12.
  • 13. Elements supprimés •<acronym> •<applet> •<basefont> •<big> •<center> •<dir> •<font> •<frame> •<frameset> •<noframes> •<strike> •<tt>
  • 14. Structure <header> <footer> <aside> <section> <nav> Favorise : •Lisibilité •Accessibilité •Personnalisation •Optimisation indexation •Générateur auto table des matières <article> <article> <section>
  • 15. Figure <figure> Content (image, video, ...) Legend
  • 16. Compatibilité IE 8/9 article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, summary { display: block; } <!--[if lt IE 9]> <script src="bower_components/html5shiv/dist/html5shiv.js"></script> <![endif]--> Forcer la CSS Créer les élements HTML
  • 17. Formulaire : types d’input •text •number •submit •File •range •search IE, FF, Opera •email Safari •url Safari •color IE, Safari •date, datetime, datetime-local, time, month, week IE, FF •tel aucun support
  • 18. Formulaire : attributs •placeholder •autofocus •autocomplete="off" Opera •disabled •size
  • 19. Formulaire : validation •required Safari, iOS, Android •pattern Safari •min, max, step FF •novalidate Safari
  • 20. Formulaire : compatibilité IE 8/9 A oublier...
  • 21. Formulaire : vérifier la compatibilité En natif : •Attribut : var compatible = ‘placeholder' in document.createElement(‘input'); •Input Type : var el = document.createElement('input'); el.setAttribute('type', 'datetime'); var compatible = el.type !== 'text‘; Avec Modernizr : •Attribut : var compatible = Modernizr.input.placeholder ; •Input Type : var compatible = Modernizr.inputtypes.datetime ;
  • 22. Label 1/2 <!--#1 --> <input type="checkbox"> <label>Nom 1</label> <!--#2 --> <label> <input type="checkbox"> Nom 2 </label> <!--#3 --> <input type="checkbox" id="name"> <label for="name">Nom 3</label>
  • 23. Label 2/2 <!--Bad --> <input type="checkbox"> <label>Nom 1</label> <!--Good --> <label> <input type="checkbox"> Nom 2 </label> <!--Good --> <input type="checkbox" id="name"> <label for="name">Nom 3</label>
  • 24. Multimédia 1/2 <audio autoplay="autoplay" controls="controls"> <source src="file.ogg" /> <source src="file.mp3" /> <a>Download this file.</a> </audio> <videocontrolspreload> <sourcesrc="cohagenPhoneCall.ogv"type="video/ogg; codecs='vorbis, theora'"/> <sourcesrc="cohagenPhoneCall.mp4"type="video/mp4; 'codecs='avc1.42E01E, mp4a.40.2'"/> <p>Your browser is old</p> </video>
  • 25. Multimédia 2/2 •Sur un élement DOM <audio> ou <video> : •play() •pause() •load() •canPlayType() •src •currentTime •Played •timeupdate(fn) •seeking(fn) •... // Exemple myVid=document.getElementById("video1"); myVid.src="movie.ogg"; myVid.play();
  • 26. Drag and Drop (DnD) : Exemple 1/3 http://codepen.io/ygotthilf/pen/arCdF <div id="todrag" class="col-25 left"> <span draggable="true">Draggable n°1</span> <span draggable="true">Draggable n°2</span> <span draggable="true">Draggable n°3</span> <span draggable="true">Draggable n°4</span> </div> <div class="col-50 left"> <h2>Lâchez ici &darr;</h2> <div id="mydropzone" > </div> </div> <div class="col-25 right"> <div id="mylist" class="hidden"> </div> </div>
  • 27. Drag and Drop (DnD) : Exemple 2/3 http://codepen.io/ygotthilf/pen/arCdF <div id="todrag" class="col-25 left"> <span draggable="true" ondragstart="dragStart(event)">Draggable n°1</span> <span draggable="true" ondragstart="dragStart(event)">Draggable n°2</span> <span draggable="true" ondragstart="dragStart(event)">Draggable n°3</span> <span draggable="true" ondragstart="dragStart(event)">Draggable n°4</span> </div> <div class="col-50 left"> <h2>Lâchez ici &darr;</h2> <div id="mydropzone" ondragover="dragOver(event)" ondrop="drop(event)"> </div> </div> <div class="col-25 right"> <div id="mylist" class="hidden"> </div> </div> var dndDone = false; function dragStart (event){ event.target.style.background = "green"; event.dataTransfer.setData("text/plain", event.target.innerText); dndDone = false; } function drop (event) { var mylist = document.getElementById('mylist'); mylist.classList.remove("hidden"); var span = document.createElement('span'); span.innerHTML = event.dataTransfer.getData("text/plain"); mylist.appendChild(span); event.target.style.background = 'white'; dndDone = true; event.preventDefault(); } function dragOver (event){ event.preventDefault(); } [...]
  • 28. Drag and Drop (DnD) : Exemple 3/3 http://codepen.io/ygotthilf/pen/arCdF <div id="todrag" class="col-25 left"> <span draggable="true" ondragstart="dragStart(event)" ondragend="dropEnd(event)"> Draggable n°1 </span> <span draggable="true" ondragstart="dragStart(event)" ondragend="dropEnd(event)"> Draggable n°2 </span> <span draggable="true" ondragstart="dragStart(event)" ondragend="dropEnd(event)"> Draggable n°3 </span> <span draggable="true" ondragstart="dragStart(event)" ondragend="dropEnd(event)"> Draggable n°4 </span> </div> <div class="col-50 left"> <h2>Lâchez ici &darr;</h2> <div id="mydropzone" ondragenter="dragEnter(event)" ondragleave="dragLeave(event)" ondragover="dragOver(event)" ondrop="drop(event)"></div> </div> <div class="col-25 right"> <div id="mylist" class="hidden"></div> </div> [...] function dropEnd (event) { if(dndDone) { event.target.parentNode.removeChild(event.target); } else { event.target.style.background = 'white' } } function dragEnter (event){ event.target.style.background = "#CCCCCC"; event.preventDefault(); } function dragLeave (event){ event.target.style.background = "white"; event.preventDefault(); }
  • 29. Drag and Drop (DnD) : Résumé •Attribut draggable="true" •Evenements : •dragstart •drag •dragend •dragenter •dragover •dragleave •drop •event.dataTransfer •files (FileList) •dropEffect •effectAllowed •setData(type, data) •setDragImage(image, x, y) •clearData()
  • 30. Canvas : présentation Element HTML pour dessiner en JavaScript •Bien supporté (sauf IE8) •Trois étapes à chaque fois : 1.<canvas id="mon_canvas" height="400px" width="400px"></canvas> 2.var c = document.getElementById('mon_canvas'); 3.var ctx = c.getContext("2d"); •Librairies tierces : •Paper.js •Sketch.js •KineticJS •MelonJS •Processing.js •Fabric.js •...
  • 31. Canvas : exemple var c = document.getElementById('mon_canvas'); var ctx = c.getContext("2d"); // Gouvernail ctx.fillStyle = "sienna"; ctx.fillRect(275,250,25,70); // Coque du bâteau ctx.beginPath(); // Début d'un autre chemin ctx.moveTo(50,250); ctx.lineTo(100,300); ctx.lineTo(250,300); ctx.lineTo(300,250); ctx.fillStyle = "peru"; ctx.strokeStyle = "sienna"; // Définition du contour ctx.lineWidth = 5; // Définition de la largeur de ligne ctx.fill(); // Application du remplissage ctx.stroke(); // Application du contour // Mât ctx.beginPath(); ctx.moveTo(140,50); ctx.lineTo(140,250); ctx.lineWidth = 10; ctx.stroke(); // Voile du bateau ctx.beginPath(); ctx.moveTo(150,80); ctx.lineTo(300,230); ctx.lineTo(150,230); ctx.closePath(); ctx.fillStyle = "lightblue"; ctx.fill(); // boule du mât ctx.beginPath(); ctx.arc(140,50,10,0,Math.PI*2); ctx.fillStyle = "sienna"; ctx.fill(); // Mer var gradient = ctx.createLinearGradient(0,280,0,400); gradient.addColorStop(0,"rgba(0,0,255,0.2)"); // Départ gradient.addColorStop(1,"rgba(0,0,255,1)"); // Arrivée ctx.fillStyle = gradient; // Affectation au remplissage ctx.fillRect(0,280,400,120); http://codepen.io/ygotthilf/pen/hKoDn x y
  • 33. SVG Afficher des dessins vectoriels dans le DOM •Bien supporté (sauf IE8) •Librairies tierces : •D3.js •Snag.svg •Processing.js •... •Exemple : <svg width="300" height="200"> <polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" /> </svg>
  • 34. SVG vs Canvas SVG Canvas Indépendant de la résolution Manipulationd’événements Performance dégradé sidessin complexe Pas adapté au jeu Dépendant de la résolution Pas de gestion desévénements Peuadapté au rendu de texte Sauvegardedu dessin en .PNG ou .JPG Adapté au jeu http://www.w3schools.com/html/html5_svg.asp
  • 35. Géolocalisation : l’API 1/2 •Bien supporté (sauf IE8, forcément...) •Obtenir la localisation une seule fois : •navigator.geolocation.getCurrentPosition (positionCb, errorCb, options) •Obtenir la localisation en continu : •navigator.geolocation.watchPosition (positionCb, errorCb, options) •retourne l’id d’«abonnement» •s’annule via la méthode : clearWatch(id) •Options possibles : •enableHighAccuracy •timeout •maximumAge
  • 36. Géolocalisation : l’API 2/2 •Le callback de succès retourne un objet contenant : •timestamp •coordonnées : •latitude •longitude •altitude •accuracy •altitudeAccuracy •heading •speed •Le callback d’erreur retourne : •code : error.PERMISSION_DENIED, error.POSITION_UNAVAILABLE, error.TIMEOUT, error.UNKNOWN_ERROR •message
  • 37. Géolocalisation : exemple varx =document.getElementById("demo"); functiongetLocation() { if(navigator.geolocation) { navigator.geolocation.getCurrentPosition( showPosition, function(error) { x.innerHTML ="Geolocation failed : "+error.message +" (code "+error.code +")"; }, { enableHighAccuracy:true, timeout:10000 }); } else{ x.innerHTML ="Geolocation is not supported by this browser."; } } functionshowPosition(position) { x.innerHTML ="Latitude: "+position.coords.latitude +"<br>Longitude: "+position.coords.longitude; }
  • 38. Web Storage : présentation Stocker des données clés/valeurs dans le navigateur •Compatible avec navigateur récent (et oui...) •Deux types de stockage : •permanent : localStorage •temporaire (suppprimé à la fermeture de l’onglet) : sessionStorage
  • 39. Web Storage : l’API •Lire des données •getItem(clé) •Ou directement : localStorage.ma_clé •length •key(index) •Ecrire des données •setItem(clé, valeur) •removeItem(clé) •clear() if(typeof(Storage) !== "undefined") { // Code for localStorage/sessionStorage. localStorage.setItem("lastname", "Smith"); var lastname = localStorage.getItem("lastname"); } else { // Sorry! No Web Storage support.. }
  • 40. Web Storage : limitations •Limité à au moins 5Mo •Protégé par nom de domaine (comme les cookies) •Stocke uniquement des chaînes de caractères : •Caster la lecture d’un nombre •Utiliser JSON pour stocker/lire un objet if (localStorage.clickcount) { localStorage.clickcount = Number(localStorage.clickcount) + 1; } else{ localStorage.clickcount = 1; } var user = { firstname : "Obi-Wan", lastname : "Kenoby" }; var userJson = JSON.stringify(user); sessionStorage.setItem("user",userJson); // ... var userJson = sessionStorage.getItem("user"); var user = JSON.parse(userJson);
  • 41. Web Storage : déboguage Dans la console de développement du navigateur Chrome
  • 42. Web Socket : présentation Communication bidirectionnelle •Incompatibe avec IE8/9 et navigrateur Android 4.3 •web socket ≠long polling (ajax) •Librairies tierces : •Socket.IO •SignalR (ASP.NET) •Meteor (fullstack JS Framework) •Firebase (BaaS) •...
  • 43. Web Socket : l’API Créer la websocket : •var ws= new WebSocket("ws://websocketUrl"); Intéragir avec les messages reçus : •ws.onopen = function(evt) { alert("Connection open ..."); }; •ws.onmessage= function(evt) { alert( "Received Message: " + evt.data); }; •ws.onclose = function(evt) { alert("Connection closed."); }; •ws.onerror = function(evt) { alert("WebSocket error : " + e.data) }; Envoyer un message •ws.send(MyMessage); Fermer la websocket : •ws.close();
  • 44. Autres API •Offline : rendre une application hors ligne (incompatibe IE8/9) •Web Worker : lancer des tâches JavaScript isolées en parralèle(incompatibe IE8/9, Android 4.3) •Server-Sent Events : mise à jour automatique d’une page grâce à des push server (incompatible IE) •Web notification : notifier l’utilisateur en dehors du navigateur (uniquement FF, Chrome, Safari) •Web RTC : Communication pair à pair (uniquement FF, Chome, Opéra) •...
  • 45.
  • 46. Transformation Effet pour changer la forme, taille, position d’un élément •Propriété css : transform(-ms-, -webkit-, -moz-, -o-) •Exemple : .content { transform: rotate(45deg); } http://codepen.io/ygotthilf/pen/asKnk
  • 47. Transformations 2D •translate(x,y) translateX, translateY •rotate(deg) •scale(ratioX, ratioY) scaleX, scaleY •skew(degX, degY) skewX, skexY •matrix(n,n,n,n,n,n)
  • 48. Transformation 3D •translate3d(x,y,z) •rotate3d(x,y,z,angle) •scale3d(x,y,z) •matrix3d (n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) •perspective(n) <div class="container"> <div class="content rotate3d">Hello world</div> </div> <div class="container perspective"> <div class="content rotate3d">Hello world</div> </div> .perspective { perpective : 200px; -webkit-perspective : 200px; } .rotate3d { transform : rotateY(45deg); } http://codepen.io/ygotthilf/pen/asKnk
  • 49. Transition Effet appliqué à un changement de style d’un élement •Propriété css globale : transition •4 propriétés possibles : •Propriété impactée •Délai •Durée •Timing function .hide-on-hover { opacity : 1; transition : opacity 1s ease-in-out 500ms; } .hide-on-hover:hover { opacity : 0; }
  • 50. Transition : propriété impactée Les priorités impactés par l’effet de transition •Propriété : transition-property •Valeur par défaut : all •Possible d’ajouter plusieurs propriété, Exemple : div { transition-property: width, opacity; }
  • 51. Transition : délai et durée •Délai : quand la transition démarre •Durée : combien de temps la transition dure •Propriété délai : transition-delay •Propriété durée : transition-duration •Valeurs acceptées : seconde (s) ou milliseconde (ms) •Exemple : div { transition-delay: 2s; transition-duration: 500ms; }
  • 52. Transition : timing function La courbe de vitesse de l’effet •Propriété : transition-timing-function •Valeurs acceptées : •ease •linear •ease-in •ease-out •ease-int-out •cubic-bezier(n,n,n,n) Timing function (source : Alsacréation)
  • 53. Animation Créer une animation sur un élément /* Chrome, Safari, Opera */ @-webkit-keyframes disco { 0% {background: red;} 25% {background: yellow;} 50% {background: blue;} 100% {background: green;} } /* Standard syntax */ @keyframes disco { 0% {background: red;} 25% {background: yellow;} 50% {background: blue;} 100% {background: green;} } .disco { -webkit-animation: disco 5s infinite; /* Chrome, Safari, Opera */ animation: disco 5s infinite; } http://codepen.io/ygotthilf/pen/asKnk
  • 54. Animation : @keyframes Définir une animation •Règle CSS : @keyframes •Proprités : •fromet to •pourcentage @-webkit-keyframes myfirst { from {background: red;} to {background: yellow;} } /* Standard syntax */ @keyframes myfirst { from {background: red;} to {background: yellow;} } /* Chrome, Safari, Opera */ @-webkit-keyframes myfirst { 0% {background: red;} 25% {background: yellow;} 50% {background: blue;} 100% {background: green;} } /* Standard syntax */ @keyframes myfirst { 0% {background: red;} 25% {background: yellow;} 50% {background: blue;} 100% {background: green;} }
  • 55. Animation : comportement •Prorité globale dans l’élement : animation •Proriétés •animation-name (spécifié @keyframes) •animation-duration •animation-timing-function •animation-delay •animation-iteration-count (infinite ou nombre) •animation-direction (alternate, reverse, alternate-reverse, normal) •animation-play-state(paused ou running)
  • 56. Media queries Application une feuille de style en fonction du terminal .bloc { background :black; } @media screen and (min-width: 200px) and (max-width: 640px) { .bloc { background :white; } }
  • 57. Media queries : type de terminal Appliquer une CSS en fonction du type de terminal : •screen: Écrans •handheld : Périphériques mobiles ou de petite taille •print: Impression •speech :Synthèses vocales •braille : Plages braille •embossed :Imprimantes braille •projection :Projecteurs (ou présentations avec slides) •tty :Terminal/police à pas fixe •tv :Téléviseur •all :Tous les précédents
  • 58. Media queries : propriétés du terminal Les propriétés (à préfixer par min-ou max-) : •color : support de la couleur (bits/pixel) •color-index : périphérique utilisant une table de couleurs indexées •device-aspect-ratio : ratio du périphérique de sortie (par exemple 16/9) •aspect-ratio : ratio de la zone d'affichage •device-height : dimension en hauteur du périphérique •device-width : dimension en largeur du périphérique •grid : périphérique bitmap ou grille (ex : lcd) •height: dimension en hauteur de la zone d'affichage •monochrome : périphérique monochrome ou niveaux de gris (bits/pixel) •orientation: orientation du périphérique (portait ou landscape) •resolution :résolution du périphérique (en dpi, dppx, ou dpcm) •scan : type de balayage des téléviseurs (progressive ou interlace) •width: dimension en largeur de la zone d'affichage