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);
  2. Sélectionner le texte et le glisser (le texte original sera copié)
  3. 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

Démos
Prolongez l'expérience HTML5

Démarrez maintenant : http://html5rocks.com

Merci !

Sylvain Weber
Rich Media Technical Specialist
@sylvainw

Thierry Le Boulengé
Software Engineer
@tleboulenge