HTML 5
introduction
Qui suis-je ?
Arlo Borras
Architecte Logiciel, Manager technique, DT e-TF1
Utilisateur/contributeur de logiciels Open source
Notre métier
Développement de sites Web
Déclinaisons IPTV, mobiles, TV connectées
Plan
Un peu d'histoire
HTML5, la spec
HTML5, les technologies
Développement multi-support
Conclusion
Beaucoup de démos
Un peu d'histoire
1990
Tim Berners-Lee
Invente l'internet et HTML 1.0 au CERN
Premier site web
1991
création du W3C
1994 - Boston MIT
Netscape Navigator
1994
HTML 2
1995
HTML EARLY DAYS
- 1995 : HTML 2
- 1996 : HTML 3
- 1997 : HTML 4
- 2001 : XHTML 1.1
- 2002 : XHTML 2.0
- #FAIL
LA DECONFITURE XHTML
It is necessary to
evolve HTML incrementally
The attempt to switch to XML didn't work.
Tim Berners Lee, 2004
RENAISSANCE
- 2004
- Apple + Opera + Mozilla
- WHATWG dissidents group
- HTML5 FUTURE
W3C AGAIN
(2007)
HTML5 IS
A Working draft
What's NEW ?
Syntaxe HTML5
Nouveaux élements
<header> <footer> <section> <article> <nav>...
Attributs nouveaux ou améliorés
data-*, contenteditable, accesskey, draggable/dropzone, spellcheck...
Structure HTML5
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 Paris meetup</title>
</head>
<body>
<header>
<nav>
<a href='/home'>Home</a>
<a href='/contact'>Contact</a>
</nav>
</header>
<section>
<article>blablabla</article>
</section>
<footer>copyright 2012</footer>
</body>
</html>DEMO
Formulaire
<!doctype html>
<meta charset="utf-8">
<style>
// inputs styling
input[required] { background:#DDD; }
input[required]:invalid { border: 1px solid red; }
input[required]:valid { border: 3px solid green; }
// validation styling
::-webkit-validation-bubble-message{ border:2px solid green; }
</style>
<form>
<input type="text" placeholder="Nom & prénom" title="Nom ET Prénom SVP" pattern="\w+\s+\w+">
<br>
<input type="email" required placeholder="Votre email">
<br>
<input type="tel" placeholder="Téléphone" pattern="[\d\s\.]+">
<br>
<input type="range" min="1" max="100" value="28" >
<br>
<input type="submit" >
</form>DÉMO 1 - 2
Fin de la première partie
HTML5 AS
A set of technologies
Évolutions
Sémantique
Storage et mode deconnecté (mobile)
Device access
Communications
Multimedia
Graphiques
Performance
CSS3
Sémantique
Microdata (ex microformats)
Développés pour élaborer des vocabulaires spécifiques.
Facilite le référencement par les moteurs de recherche
<div itemscope itemtype="http://data-vocabulary.org/Person">
<img src="avatar.jpg" itemprop="photo">
My name is <span itemprop="name">John Cox</span>, and I am a <span itemprop="title">writer</span> for
<a href="http://net.tutsplus.com" itemprop="affliation">Nettuts+</a>.
I live in
<span itemprop="address" itemscope
itemtype="http://data-vocabulary.org/Address">
<span itemprop="locality">Louisville</span>,
<span itemprop="region">KY</span>
</span>
</div>
Offline & Storage
Une base de données dans votre navigateur
Web Storage
WebSQLStorage
IndexedDB
ApplicationCache
DÉMO
Device Access
DÉMO
Communications
communication web bidirectionnelle, client / serveur.
Long polling
Websockets
DÉMO
Multimédia
vidéo, version simple
<video src="myvideo.mp4" width="320" height="240"></video>
vidéo, version complète
<video width="320" height="240" poster="poster.jpg" controls="controls" preload="none">
<!-- MP4 for Safari, IE9, iPhone, iPad, Android, and Windows Phone 7 -->
<source type="video/mp4" src="myvideo.mp4" />
<!-- WebM/VP8 for Firefox4, Opera, and Chrome -->
<source type="video/webm" src="myvideo.webm" />
<!-- Ogg/Vorbis for older Firefox and Opera versions -->
<source type="video/ogg" src="myvideo.ogv" />
<!-- Optional: Add subtitles for each language -->
<track kind="subtitles" src="subtitles.srt" srclang="en" />
<!-- Optional: Add chapters -->
<track kind="chapters" src="chapters.srt" srclang="en" />
</video>Graphiques
Canvas, SVG, WebGL 2D/3D
DEMOPerformance
CSS3
Javascript APIs
- Canvas 2D/3D
- Geolocation
- Web Workers, Web Sockets
- PageVisibility History API
- Drag and Drop
- ...
10 secs geolocation
<script >
function geolocate() {
navigator.geolocation.getCurrentPosition(success, error);
}
function success(result) {
var co = result.coords;
document.getElementById('result').innerText = co.latitude + ',' + co.longitude;
}
function error(result) {
document.getElementById('result').innerHTML = "geolocation failed :/";
}
</script>
<h1>Geolocation example</h1>
<button onclick="geolocate()">geolocate me !</button>
<h3 id="result"></h3>
Technologies serveurs
TIOBE index
SMARTPHONES et TABLETTES
IPTV, TV Connectées
HTML5 examples
Apps
Offline gmail
Offline manifest, Web SQL Database, localStorage...
Youtube HTML5
Audio, Video, Fullscreen, localStorage
Body Browser
WebGL 3D
GlobeTweeter
WebGL 3D, WebSockets, geolocation
DÉMO
HTML5 examples
GAMES
Quake 2 GWT
WebGL, WebSockets, WebStorage...
MarbleSoccer
WebGL, Gyroscope, Fullscreen...
by @jetienne
Angry birds
Offline, Canvas, Storage
HTML5 QuickStart
- Essayer HTML5 Boilerplate pour le frontoffice
- Et Twitter bootstrap pour le backoffice
- Bonnes pratiques prêt à l'emploi