Présentation complète de l'HTML5
97
Présentation complète de l'HTML5
-
Upload
jverrecchia -
Category
Technology
-
view
270.289 -
download
3
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 of Présentation complète de l'HTML5
Présentation complète de l'HTML5
Objectif : Que chacun reparte avec une vision globale claire de l'HTML5
"Qu'est-ce que je dois faire pour faire un site HTML5 ?"
...l'HTML5 c'est quoi ?
C'est très simple...
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
Qui crée l'HTML5 ?
HTML JS+
HTML
HTML JS
Les nouveautés pour le code HTML
L’allégement du code
<!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
<!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
<!DOCTYPE html><html lang="fr"><head> <meta charset="utf-8" /> <link href="design.css" rel="stylesheet" /> <script src="script.js"></script></head>
HTML5
Les nouvelles balises
Balises sémantiques
<header>, <footer>, <aside>, <nav>, <article>, <section>...
<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
<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
<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
<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
Les balises <b>, <i>et quelques autres vieilleries...
...ont été recyclées !
<em> = Texte prononcé avec emphase<i> = Texte prononcé par quelqu'un d'autre
<strong> = Texte important<b> = Texte visuellement différent
WAI-ARIA
<header role="banner">
<form role="search">
<nav role="navigation">
<section role="main">
Les balises fun
<audio> & <video>
<video>
http://www.craftymind.com/factory/html5video/CanvasVideo.htmlBon, ok c'est du canvas...
<audio>
<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>
<canvas>
Pas tout de suite :)
Les formulaires 2.0
<input type="text">
searchtelmailurldatenumberrangecolor...etc
ContentEditable
http://html5demos.com/contenteditablehttp://aloha-editor.org/
JS HTML
Les nouveautés Javascript
"Javascript c'est mal"
Ca, c'est mal
"Javascript c'est compliqué"
$.getJSON("http://api.truc.com/getUser", function(user){ alert(user.name);});
$("#content").load("http://www.truc.com/members.html");
GWT
Le Drag and Drop
La File API
http://demos.hacks.mozilla.org/openweb/FileAPI/
XmlHttpRequest Level 2 (XHR2 pour les intimes)
XmlHttpRequest Level 2 (XHR2 pour les intimes)
Cross domain<?phpheader("Access-Control-Allow-Origin: *");
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
Les applications Offline
Le localStorage
localStorage["key"] = "value";localStorage.setitem("key", "value");
var key = localStorage["key"];var key = localStorage.getitem["key"];
Base de données locale : IndexedDB
Le fichier manifest
<!DOCTYPE html><html>
<!DOCTYPE html><html manifest="site.appcache">
<!DOCTYPE html><html manifest="site.appcache">
CACHE MANIFEST # Version 0.1 index.htmllogo.png
<!DOCTYPE html><html manifest="site.appcache">
CACHE MANIFEST # Version 0.1 index.htmllogo.png
AddType text/cache-manifest .appcache
<link rel="apple-touch-icon" href="apple-touch-icon.png"/>
Pas de marketplacePas intuitif
History API
history.back();history.forward();
history.pushState();history.replaceState();
history.back();history.forward();
history.pushState();history.replaceState();
Plus besoin d'utiliser le # pour naviguer dans les applications AJAX
Les Websockets
Permet le full duplex entre le navigateur et le serveur
Push de données vers le navigateur
Permet de communiquer sans le protocole HTTP
3 fois plus rapide (150ms > 50ms)Cross DomainTraverse les firewalls et proxys
La géolocalisation
navigator.geolocation.getCurrentPosition(function(pos){ alert(position.coords.latitude + " " + pos.coords.longitude);});
navigator.geolocation.getCurrentPosition(function(pos){ alert(position.coords.latitude + " " + pos.coords.longitude);});
navigator.geolocation.getCurrentPosition(function(pos){ alert(position.coords.latitude + " " + pos.coords.longitude);});
En quelques lignes on obtient très facilement :
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
"Ca sort quand ?"
Spécification finalisée en 2014
Candidate recommendation : 2022
Support des navigateurs
CanIUse.com
FindMeByIp.com
IE9 le sauveur ?
On peut commencer dès maintenant !
Outils :ModernizrHTML5shivHTML5 Boilerplate...et Initializr!
Le canvas sur le gâteau
http://videos.mozilla.org/serv/mozhacks/flight-of-the-navigator/
