présentation complète de l'html5

97
Présentation complète de l'HTML5

Upload: jverrecchia

Post on 15-Jan-2015

270.289 views

Category:

Technology


3 download

DESCRIPTION

Voici une présentation sur l’HTML5 que j’ai réalisé pour l’entreprise Sfeir dans laquelle je travaille. Bien que vous n’ayez pas accès à tout le contenu retranscrit à l’oral, elle peut déjà vous apporter une synthèse assez complète de ce que cette technologie apporte.

TRANSCRIPT

Page 1: Présentation complète de l'HTML5

Présentation complète de l'HTML5

Page 2: Présentation complète de l'HTML5

Objectif : Que chacun reparte avec une vision globale claire de l'HTML5

Page 3: Présentation complète de l'HTML5

"Qu'est-ce que je dois faire pour faire un site HTML5 ?"

Page 4: Présentation complète de l'HTML5

...l'HTML5 c'est quoi ?

Page 5: Présentation complète de l'HTML5

C'est très simple...

Page 6: Présentation complète de l'HTML5

contenteditable attribute, Drag and Drop, meta name="viewport" content="width=device-width, user-

scalable=no", Cross-document messaging, Notification API, Web Storage - name/value pairs, XmlHttpRequest 2,

querySelector/querySelectorAll, Microdata, Descriptive tags / rel, JSON parsing, WAI-ARIA Accessibility

features, Hashchange event, Data URLs, Canvas, SVG, Cross-Origin Resource

SharinggetElementsByClassName, Offline web applications, HTML5 history - onReplaceState -

onPushState, audio, Microformats, video, Text Api Canvas, web workers, geolocation, SVG effects for HTML, New semantic elements, File API, Web SQL

Database, , MathML, classList (DOMTokenList), SVG SMIL animation, Forms 2.0, Server-sent DOM events, Web

Sockets, Form validation,WebGL, IndexedDB

Page 7: Présentation complète de l'HTML5

Qui crée l'HTML5 ?

Page 8: Présentation complète de l'HTML5
Page 9: Présentation complète de l'HTML5

HTML JS+

HTML

Page 10: Présentation complète de l'HTML5

HTML JS

Les nouveautés pour le code HTML

Page 11: Présentation complète de l'HTML5

L’allégement du code

Page 12: Présentation complète de l'HTML5

<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <link rel="stylesheet" type="text/css" href="design.css" /> <script type=”text/javascript” src=script.js"></script></head><body></body></html>

HTML 4.01 / XHTML 1.0

Page 13: Présentation complète de l'HTML5
Page 14: Présentation complète de l'HTML5

<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <link rel="stylesheet" type="text/css" href="design.css" /> <script type=”text/javascript” src=script.js"></script></head><body></body></html>

HTML 4.01 / XHTML 1.0

Page 15: Présentation complète de l'HTML5

<!DOCTYPE html><html lang="fr"><head> <meta charset="utf-8" /> <link href="design.css" rel="stylesheet" /> <script src="script.js"></script></head>

HTML5

Page 16: Présentation complète de l'HTML5

Les nouvelles balises

Page 17: Présentation complète de l'HTML5

Balises sémantiques

Page 18: Présentation complète de l'HTML5

<header>, <footer>, <aside>, <nav>, <article>, <section>...

Page 19: Présentation complète de l'HTML5

<div id="header"> <h1>Mon super site</h1></div>

<div id="article"> <h2>Mon super article<h2>

<div id="intro"> <p>Un premier paragraphe</p> </div>

<div id="content"> <p>Un premier paragraphe</p> <p>Un deuxième paragraphe</p> </div>

<div id="conclusion"> <p>Un premier paragraphe</p> </div>

<div id="author">Ecrit par moi-même</div></div>

HTML 4.01 / XHTML 1.0

Page 20: Présentation complète de l'HTML5

<div id="header"> <h1>Mon super site</h1></div>

<div id="article"> <h2>Mon super article<h2>

<div id="intro"> <p>Un premier paragraphe</p> </div>

<div id="content"> <p>Un premier paragraphe</p> <p>Un deuxième paragraphe</p> </div>

<div id="conclusion"> <p>Un premier paragraphe</p> </div>

<div id="author">Ecrit par moi-même</div></div>

HTML 4.01 / XHTML 1.0

Page 21: Présentation complète de l'HTML5

<div id="header"> <h1>Mon super site</h1></div>

<div id="article"> <h2>Mon super article<h2>

<div id="intro"> <p>Un premier paragraphe</p> </div>

<div id="content"> <p>Un premier paragraphe</p> <p>Un deuxième paragraphe</p> </div>

<div id="conclusion"> <p>Un premier paragraphe</p> </div>

<div id="author">Ecrit par moi-même</div></div>

HTML 4.01 / XHTML 1.0

Page 22: Présentation complète de l'HTML5

<header> <h1>Mon super site</h1><header>

<article> <h1>Mon super article<h1>

<section> <p>Un premier paragraphe</p> </section>

<section> <p>Un premier paragraphe</p> <p>Un deuxième paragraphe</p> </section>

<section> <p>Un premier paragraphe</p> </section>

<footer>Ecrit par moi-même</footer></article>

HTML5

Page 23: Présentation complète de l'HTML5

Les balises <b>, <i>et quelques autres vieilleries...

Page 24: Présentation complète de l'HTML5

...ont été recyclées !

Page 25: Présentation complète de l'HTML5

<em> = Texte prononcé avec emphase<i> = Texte prononcé par quelqu'un d'autre

Page 26: Présentation complète de l'HTML5

<strong> = Texte important<b> = Texte visuellement différent

Page 27: Présentation complète de l'HTML5

WAI-ARIA

Page 28: Présentation complète de l'HTML5
Page 29: Présentation complète de l'HTML5

<header role="banner">

<form role="search">

<nav role="navigation">

<section role="main">

Page 30: Présentation complète de l'HTML5

Les balises fun

Page 31: Présentation complète de l'HTML5

<audio> & <video>

Page 32: Présentation complète de l'HTML5

<video>

Page 33: Présentation complète de l'HTML5

http://www.craftymind.com/factory/html5video/CanvasVideo.htmlBon, ok c'est du canvas...

Page 34: Présentation complète de l'HTML5

<audio>

Page 35: Présentation complète de l'HTML5
Page 36: Présentation complète de l'HTML5

<video>

<source src="video.mp4" type="video/mp4" />

<source src="video.ogv" type="video/ogg" />

</video>

<audio>

<source src="song.ogg" type="video/ogg" />

<source src="song.mp3" type="video/mp3" />

</audio>

Page 37: Présentation complète de l'HTML5

<canvas>

Page 38: Présentation complète de l'HTML5

Pas tout de suite :)

Page 39: Présentation complète de l'HTML5

Les formulaires 2.0

Page 40: Présentation complète de l'HTML5
Page 41: Présentation complète de l'HTML5

<input type="text">

searchtelmailurldatenumberrangecolor...etc

Page 42: Présentation complète de l'HTML5
Page 43: Présentation complète de l'HTML5
Page 44: Présentation complète de l'HTML5

ContentEditable

http://html5demos.com/contenteditablehttp://aloha-editor.org/

Page 45: Présentation complète de l'HTML5

JS HTML

Les nouveautés Javascript

Page 46: Présentation complète de l'HTML5

"Javascript c'est mal"

Page 47: Présentation complète de l'HTML5

Ca, c'est mal

Page 48: Présentation complète de l'HTML5

"Javascript c'est compliqué"

Page 49: Présentation complète de l'HTML5
Page 50: Présentation complète de l'HTML5

$.getJSON("http://api.truc.com/getUser", function(user){ alert(user.name);});

$("#content").load("http://www.truc.com/members.html");

Page 51: Présentation complète de l'HTML5

GWT

Page 52: Présentation complète de l'HTML5

http://www.youtube.com/watch?v=fyfu4OwjUEI

Page 53: Présentation complète de l'HTML5

Le Drag and Drop

Page 54: Présentation complète de l'HTML5

La File API

http://demos.hacks.mozilla.org/openweb/FileAPI/

Page 55: Présentation complète de l'HTML5

XmlHttpRequest Level 2 (XHR2 pour les intimes)

Page 56: Présentation complète de l'HTML5

XmlHttpRequest Level 2 (XHR2 pour les intimes)

Cross domain<?phpheader("Access-Control-Allow-Origin: *");

Page 57: Présentation complète de l'HTML5

XmlHttpRequest Level 2 (XHR2 pour les intimes)

Cross domain<?phpheader("Access-Control-Allow-Origin: *");

oXHR.onprogress = function(e) { // (e.loaded / e.total) * 100); };

<progress max="100">

Progression

Page 58: Présentation complète de l'HTML5

Les applications Offline

Page 59: Présentation complète de l'HTML5

Le localStorage

Page 60: Présentation complète de l'HTML5

localStorage["key"] = "value";localStorage.setitem("key", "value");

var key = localStorage["key"];var key = localStorage.getitem["key"];

Page 61: Présentation complète de l'HTML5
Page 62: Présentation complète de l'HTML5

Base de données locale : IndexedDB

Page 63: Présentation complète de l'HTML5

Le fichier manifest

Page 64: Présentation complète de l'HTML5

<!DOCTYPE html><html>

Page 65: Présentation complète de l'HTML5

<!DOCTYPE html><html manifest="site.appcache">

Page 66: Présentation complète de l'HTML5

<!DOCTYPE html><html manifest="site.appcache">

CACHE MANIFEST # Version 0.1 index.htmllogo.png

Page 67: Présentation complète de l'HTML5

<!DOCTYPE html><html manifest="site.appcache">

CACHE MANIFEST # Version 0.1 index.htmllogo.png

AddType text/cache-manifest .appcache

Page 68: Présentation complète de l'HTML5
Page 69: Présentation complète de l'HTML5

<link rel="apple-touch-icon" href="apple-touch-icon.png"/>

Page 70: Présentation complète de l'HTML5

Pas de marketplacePas intuitif

Page 71: Présentation complète de l'HTML5
Page 72: Présentation complète de l'HTML5

History API

Page 73: Présentation complète de l'HTML5

history.back();history.forward();

history.pushState();history.replaceState();

Page 74: Présentation complète de l'HTML5

history.back();history.forward();

history.pushState();history.replaceState();

Plus besoin d'utiliser le # pour naviguer dans les applications AJAX

Page 75: Présentation complète de l'HTML5

Les Websockets

Page 76: Présentation complète de l'HTML5

Permet le full duplex entre le navigateur et le serveur

Page 77: Présentation complète de l'HTML5

Push de données vers le navigateur

Page 78: Présentation complète de l'HTML5

Permet de communiquer sans le protocole HTTP

Page 79: Présentation complète de l'HTML5

3 fois plus rapide (150ms > 50ms)Cross DomainTraverse les firewalls et proxys

Page 80: Présentation complète de l'HTML5
Page 81: Présentation complète de l'HTML5

La géolocalisation

Page 82: Présentation complète de l'HTML5

navigator.geolocation.getCurrentPosition(function(pos){ alert(position.coords.latitude + " " + pos.coords.longitude);});

Page 83: Présentation complète de l'HTML5

navigator.geolocation.getCurrentPosition(function(pos){ alert(position.coords.latitude + " " + pos.coords.longitude);});

Page 84: Présentation complète de l'HTML5

navigator.geolocation.getCurrentPosition(function(pos){ alert(position.coords.latitude + " " + pos.coords.longitude);});

Page 85: Présentation complète de l'HTML5

En quelques lignes on obtient très facilement :

Page 86: Présentation complète de l'HTML5

Drag and Drop, meta name="viewport" content="width=device-width, user-scalable=no", Cross-document messaging, Notification API, Web Storage - name/value

pairs, XmlHttpRequest 2, contenteditable attribute, querySelector/querySelectorAll, Microdata, Descri

ptive tags / rel, JSON parsing, WAI-ARIA Accessibility features, Hashchange event, Data

URLs, Canvas, SVG, Cross-Origin Resource Sharing, getElementsByClassName, Offline web applications, HTML5 history - onReplaceState -

onPushState, audio, Microformats, video, Text Api Canvas, web workers, geolocation, SVG effects for HTML, New semantic elements, File API, Web SQL

Database, MathML, classList (DOMTokenList), SVG SMIL animation, Forms 2.0, Server-sent DOM events, Web

Sockets, Form validation,WebGL, IndexedDB

Page 87: Présentation complète de l'HTML5

"Ca sort quand ?"

Page 88: Présentation complète de l'HTML5

Spécification finalisée en 2014

Page 89: Présentation complète de l'HTML5

Candidate recommendation : 2022

Page 90: Présentation complète de l'HTML5
Page 91: Présentation complète de l'HTML5

Support des navigateurs

Page 92: Présentation complète de l'HTML5

CanIUse.com

FindMeByIp.com

Page 93: Présentation complète de l'HTML5

IE9 le sauveur ?

Page 94: Présentation complète de l'HTML5

On peut commencer dès maintenant !

Page 95: Présentation complète de l'HTML5

Outils :ModernizrHTML5shivHTML5 Boilerplate...et Initializr!

Page 96: Présentation complète de l'HTML5
Page 97: Présentation complète de l'HTML5

Le canvas sur le gâteau

http://videos.mozilla.org/serv/mozhacks/flight-of-the-navigator/