Chargement...

http://goo.gl/o6t5L

Dites bonjour à

Sylvain Weber
Rich Media Technical Specialist
@sylvainw

Thierry Le Boulengé
Software Engineer
@tleboulenge

Sondage

HTML5, c'est quoi ?
  • Nouvelle version d’HTML
  • Plusieurs technologies : HTML5 + CSS3 + JS
  • Le futur du Web
Au programme
  • Idées reçues sur HTML5 (10min)
  • Zoom technique (20min)
  • Zoom créatif (15min)
  • Démos (10min)
  • Questions (5min)

Idées reçues sur HTML5

"Flash est installé sur 99% des ordinateurs, HTML5 est inutile."

Explosion des usages web sur mobile

"HTML5 ne sera pas utilisable
avant 2022."

Tout le monde est de la partie

Vers un langage universel
  • Philosophie open source
  • Partage des connaissances
  • Autoformez-vous
  • Devenez expert

Zoom technique

Markup sémantique

Quelques additions bienvenues !

HTML5 Semantics & Markup
HTML Nouveaux tags descriptifs
<body>
 
<header>
   
<hgroup>
     
<h1>Page title</h1>
     
<h2>Page subtitle</h2>
   
</hgroup>
 
</header>

 
<nav>
   
<ul>
     Navigation...
   
</ul>
 
</nav>
 
<section>
   
<article>
     
<header>
       
<h1>Title</h1>
     
</header>
     
<section>
       Content...
     
</section>
   
</article>
   
<article>
     
<header>
       
<h1>Title</h1>
     
</header>
     
<section>
       Content...
     
</section>
   
</article>
 
</section>

 
<aside>
   Top links...
 
</aside>

 
<figure>
   
<img src="..."/>
   
<figcaption>Chart 1.1</figcaption>
 
</figure>

 
<footer>
   Copyright ©
   
<time datetime="2010-11-08">2010</time>.
 
</footer>
</body>
HTML Markup applicatif
<input list="cars"/>
<datalist id="cars">
 
<option value="BMW"/>
 
<option value="Ford"/>
 
<option value="Volvo"/>
</datalist>


 

<menu>
 
<command type="command">Save as...</command>
</menu>

<details>
 
<summary>HTML 5</summary>
  This slide deck teaches you everything you need to know about HTML 5.
</details>
<meter min="0" max="100" low="40" high="90" optimum="100" value="91">A+</meter>
Your score is:
A+

<progress>working...</progress>
Download is:
working...

<progress value="75" max="100">3/4 complete</progress>
Goal is:
3/4 complete
HTML Nouveaux types de champs
<style>
 
:invalid {
    border
-color: #e88;
   
-webkit-box-shadow: 0 0 5px rgba(255, 0, 0, .8);
 
}
 
[required] {
    border
-color: #88a;
   
-webkit-box-shadow: 0 0 3px rgba(0, 0, 255, .5);
 
}
</style>
<input type="text" required />

<input type="email" value="some@email.com" />

<input type="date" min="2010-08-14" max="2011-08-14" value="2010-08-14"/>

<input type="range" min="0" max="50" value="10" />

<input type="search" results="10" placeholder="Search..." />

<input type="tel"  placeholder="(555) 555-5555"
         
pattern="^\(?\d{3}\)?[-\s]\d{3}[-\s]\d{4}.*?$" />

<input type="color" placeholder="e.g. #bbbbbb" />

<input type="number" step="1" min="-5" max="10" value="0" />
HTML Sur téléphone portable
type="text"
android keyboard on input type text
Android
type="number"
android keyboard on input type number
Android
type="email"
iphone keyboard on input type email
iPhone
type="tel"
iphone keyboard on input type tel
iPhone
HTML Microdata
<div itemscope itemtype="http://data-vocabulary.org/Person">
 
<p>Je suis <span itemprop="name">Thierry</span>.</p>
 
<p>Je travaille comme <span itemprop="title">Software Engineer</span>.</p>
 
<p>Je vis en <span itemprop="address.country-name">Suisse</span>.</p>
</div>
Google results without microdata
Résultat de recherche sans microdata
Google results without microdata
Résultat de recherche avec microdata

Rich Snippets Testing Tool : http://www.google.com/webmasters/tools/richsnippet

Le réseau sans réseau

Gérer les interruptions de service

HTML5 Offline & Storage
JS Données sur le client
// use localStorage for persistent storage
// use sessionStorage for per tab storage
textarea
.addEventListener('keyup', function () {
  window
.localStorage.setItem('value', area.value);
  window
.localStorage.setItem('timestamp', (new Date()).getTime());
}, false);
textarea
.value = window.localStorage.getItem('value');

Enregistrer ce texte sur le client (récupérable)

JS Cache applicatif
<html manifest="cache.manifest">
window.
applicationCache.addEventListener('checking', updateCacheStatus, false);

cache.manifest :

CACHE MANIFEST

# version 1

CACHE
:
/html5/src/refresh.png
/html5/src/logic.js
/html5/src/style.css
/html5/src/background.png
Accès disque et hardware locaux

Intégration d'éléments du système d'exploitation

HTML5 Performance & Integration
JS Evènements Drag & Drop
document.addEventListener('dragstart', function(event) {
 
event.dataTransfer.setData('text', 'Customized text');
 
event.dataTransfer.effectAllowed = 'copy';
}, false);
  1. Sélectionner le texte et le glisser (le texte original sera copié)
  2. Sélectionner-le et glisser (le texte original sera modifié)
Données sources
Zone de dépôt
JS Glisser-déposer du bureau (File API)

Glissez des fichiers à partir du bureau :

document.querySelector('#dropzone').addEventListener('drop', function(e) {
 
var reader = new FileReader();
  reader
.onload = function(evt) {
    document
.querySelector('img').src = evt.target.result;
 
};

  reader
.readAsDataURL(evt.dataTransfer.files[0]);
}, false);
Déposer une image du bureau
JS Glisser-déposer vers le bureau
<a href="src/star.mp3" draggable="true" class="dragout"
   
data-downloadurl="MIMETYPE:FILENAME:ABSOLUTE_URI_TO_FILE">download</a>
var files = document.querySelectorAll('.dragout');
for (var i = 0, file; file = files[i]; ++i) {
  file
.addEventListener('dragstart', function(e) {
    e
.dataTransfer.setData('DownloadURL', this.dataset.downloadurl);
 
}, false);
}
Glissez ces fichiers vers le bureau : .pdf file .mp3 file

(actuellement seulement disponible sur Google Chrome)

JS Geolocalisation
if (navigator.geolocation) {
 
navigator.geolocation.getCurrentPosition(function(position) {
   
var latLng = new google.maps.LatLng(
        position
.coords.latitude, position.coords.longitude);
   
var marker = new google.maps.Marker({position: latLng, map: map});
    map
.setCenter(latLng);
 
}, errorHandler);
}
Et encore bien plus !
  • JS Notifications, Web Workers, WebSockets...
  • JS WebSQL
  • HTML Commande vocale
  • HTML ARIA (par ex. web pour mal-voyants)
  • CSS Mise en page: colonnes...

Zoom créatif

Utilisation dans un contexte créatif
  • Styles et animations CSS3
  • Canvas / SVG
  • Vidéo et Son
  • Accéléromètre
  • WebGL
  • Et bien d'autres...
Webfonts
@font-face {
  font-family: 'Cabin Sketch';
  src: url(CabinSketch.otf);
}
 
header {
  font-family: 'Cabin Sketch';
}
Cabin Sketch
Canvas
<canvas id="canvas" width="838" height="220"></canvas>

<script>
  var canvasContext = document.getElementById("canvas").getContext("2d");
  canvasContext.fillRect(250, 25, 150, 100);
  canvasContext.beginPath();
  canvasContext.arc(450, 110, 100, Math.PI * 1/2, Math.PI * 3/2);
  canvasContext.lineWidth = 15;
  canvasContext.lineCap = 'round';
  canvasContext.strokeStyle = 'rgba(255, 127, 0, 0.5)';
  canvasContext.stroke();
</script> 
Canvas
SVG
<html>
  <svg>
    <circle id="myCircle" class="important" cx="50%" cy="50%" r="100" 
        fill="url(#myGradient)"
        onmousedown="alert('hello');"/>
  </svg>
</html>
SVG (Scalable Vector Graphics)
Vidéo et son
<video id="video" src="movie.webm" autoplay controls></video>
document.getElementById("video").play();

<audio id="audio" src="sound.mp3" controls></audio>
document.getElementById("audio").muted = false;
Vidéo magique
window.addEventListener('deviceorientation', function(event) {
  var a = event.alpha;
  var b = event.beta;
  var g = event.gamma;
}, false);
WebGL
<canvas id="canvas"></canvas>
<script>
var gl = document.getElementById("canvas").getContext("experimental-webgl");
gl.viewport(0, 0, canvas.width, canvas.height);
</script>

DEMO

Merci !

Sylvain Weber
Rich Media Technical Specialist
@sylvainw

Thierry Le Boulengé
Software Engineer
@tleboulenge