SlideShare une entreprise Scribd logo
1  sur  69
Télécharger pour lire hors ligne
HTML5
Pourquoi HTML5 ?

• Depuis 1999, les usages ont changés
• Applications web
• Sémantiser
Pour quoi HTML5 ?

• Structurer un document
• Créer des applications web
• Préparer l’avenir
Une nouvelle orientation


• Standardiser l’existant
• Spécification claire, dirigiste
• Repenser le contenu
Une nouvelle orientation


  Text
  Flow
Bodytext
Doctype

• HTML5 : <!DOCTYPE html>
• XHTML5 : pas de doctype, prologue XML
  <?xml version="1.0" encoding="UTF-8"?>
  <html xmlns="http://www.w3.org/1999/xhtml">
Encodage
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<meta charset="UTF-8">




   1.Header HTTP
   2.BOM du fichier
   3.<meta>
<section>

• Groupage thématique du contenu
        <section id="articles">…</section>

        <section id="twitter">…</section>


                       ≠
            <div id="sidebar">…</div>


• Les sections ont des headings indépendants
<header>/<footer>
•   <header> : Introduction, aide à la navigation

•   <footer> : Informations sur la section (meta)
          <body><header id="header">…</header>

          <section id="news"><header>…</header>



          <footer id="footer">…</footer></body>

              <footer>…</footer></section>
<nav>
• Sectionsite, dans la page, etc.)
  (dans le
           permettant de naviguer

  <nav>
    <h1>Navigation</h1>
    <ul>
      <li><a href="">Accueil</a></li>
      <li><a href="actualites">Actualités</a></li>
      …
    </ul>
  </nav>

  <nav id="prelude">
    <p>Aller au :</p>
    <ul>
      <li><a href="#contenu">contenu</a></li>
      <li><a href="#recherche">moteur de recherche</a></li>
      …
    </ul>
  </nav>
<article>
• Section représentant un contenu indépendant
  du reste du document


         <section id="articles">
         	 <article><h1>Article 1…
         	 <article><h1>Article 2…

         <section id="twitter">
         	 <article>Lorem ipsum…
         	 <article>Dolor sit amet…
<aside>


• Ce n’est pas une sidebar !
• Section de contenu tangentiellement relié
  au contenu l’entourant (?)
• Équivalent d’un encart en typographie
<hgroup>


     • Utilisé pour regrouper des headings
<hgroup>
	 <h1>Dr. Strangelove</h1>
	 <h2>Or: How I Learned to Stop Worrying and Love the Bomb</h2>
</hgroup>
<time>

         • Écrire des dates et heures
           <p>Rendez-vous le <time datetime="2010-10-05">5 octobre</time>.</p>

                     <p>On se fait un ciné <time>demain</time> ?</p>

<p>Dernière connexion le <time datetime="2010-02-05T10:42:00">5 février à 10:42</time></p>
<canvas>
• Dessiner du bitmap avec Javascript
• APIs 2D et 3D



  Raycasting (dev.opera)   Visualisation with processing.js
<audio>/<video>


• Insérer des éléments multimédia facilement
• Éviter d’avoir à utiliser un plugin
• Accessibilité, performance
Et d’autres…

  <bdi>, <command>, <datalist>,
  <details>, <dialog>, <embed>,
<figcaption>, <figure>, <keygen>,
   <mark>, <meter>, <output>,
 <progress>, <ruby>, <rp>, <rt>,
    <source>, <track>, <wbr>
Nouveaux attributs

•   data-* : Attributs personnalisés

•   draggable : Indique que le contenu est déplaçable

•   role, aria-* : Accessibilité

• Et d’autres…
Balises dépréciées
• Présentation : <basefont>, <big>, <center>,
    <font>, <strike>, <tt>, <u>

• Mauvaise utilisabilité/accessibilité : <frame>,
    <frameset>, <noframes>

• Prêtant à confusion, inutile : <acronym>,
    <applet>, <isindex>, <dir>

•   <noscript> (uniquement en XHTML5)
Attributs dépréciés


http://dev.w3.org/html5/html4-differences/#absent-attributes
    (Essentiellement des attributs à but présentationnels)
Balises redéfinies
•   <i> : Termes techniques, expressions
    idiomatiques, les pensées… Habituellement
    mis en italique en typographie.
•   <b> : Mots clés, nom de produit…
    Habituellement mis en gras en typographie.
•   <strong> : Ajoute de l’importance

•   <small> : Petites lignes
Attributs redéfinis


http://dev.w3.org/html5/html4-differences/#changed-attributes
Web Forms 2.0
Nouveaux type d’<input> :
 • datetime, datetime-local, date, time, month, week
 • number, range
 • email
 • url
 • search
 • tel
 • color
Web Forms 2.0

Nouveaux attributs pour les éléments de formulaires :
 • autofocus
 • placeholder
 • required
 • autocomplete, min, max, pattern, step
Quand l’utiliser ?

• Tout de suite
• Pour des projets non-critiques
• Si vous pouvez mettre l’accessibilité de côté
… et IE ?
Impossible de styler une balise inconnue (!)

<!--[if IE lt 9]>
	   <script>
	   	   document.createElement("header");
	   	   document.createElement("section");
	   </script>
<![endif]-->


(dans le <head>)
A vocabulary and
     associated APIs
for HTML and XHTML
API ?


    Application Programming Interface
Ensemble de fonctions mises à disposition
Web Forms 2.0
           Vérifier les contraintes des champs

         <form>
           <input type="number" value="coucou" />
           <input type="email" value="me@neovov.com" />
         </form>


var
  form = document.getElementsByTagName("form")[0],
  input = document.getElementsByTagName("input");

input[0].checkValidity(); // false ("coucou" n'est pas un nombre)
input[1].checkValidity(); // true
form.checkValidity(); // false
Web Forms 2.0
           Vérifier les contraintes des champs

         <form>
           <input type="number" value="1" />
           <input type="email" value="me@neovov.com" />
         </form>


var
  form = document.getElementsByTagName("form")[0],
  input = document.getElementsByTagName("input");

input[0].checkValidity(); // true
input[1].checkValidity(); // true
form.checkValidity(); // true
Selector API

$("#news article:nth-child(2n+1)")
                 =
$$("#news article:nth-child(2n+1)")
                  =
  document.querySelectorAll("#news
     article:nth-child(2n+1)")
Selector API
          Récupérer des éléments




•   querySelector() => Element || null

•   querySelectorAll() => NodeList
Selector API
                   feature detection




           !!document.querySelector


var $ = document.querySelectorAll || (function(selector) {
  // Code bien lourd (ou sizzle)
});
Canvas
Dessiner du bitmap




                     Excellent tutorial
Canvas
                feature detection




!!document.createElement("canvas").getContext
WebGL
Dessiner du bitmap dans un contexte 3D
WebGL
                  feature detection

var webgl = function() {
  var canvas = document.createElement("canvas");

  try {
    if (canvas.getContext("webgl")) return true;
  } catch(e) {}

  try {
    if (canvas.getContext("experimental-webgl"))
return true;
  } catch(e) {}

  return false;
}();
Media API
  Manipuler des éléments multimédia



                      •   controls
• play()
                      •   paused
• pause()
                      •   volume
• canPlayType()
                      •   currentTime

          • error
          • networkState
Jouons avec <video>

<object width="720" height="404" type="application/x-
shockwave-flash" data="player.swf?file=video.flv">
	 <param name="movie" value="player.swf?file=video.flv" />
</object>




<video width="720" height="404" src="video" controls></video>
Quel format ?

• Firefox et Opéra : Theora (OGG)
• Safari : H.264
• Le petit qui s’incruste :VP8 (WebM)
  (Chrome, Firefox, Opera, IE)
Quels outils d’encodage ?


• Pour Theora : Extension Firefogg,
  ffmpeg2theora (pour les courageux)
• Pour H.264 : HandBrake, autres…
• Pour WebM : ffmpeg
Jouons encore
<video width="720" height="404" controls>
	 <source type="video/mp4" src="video.mp4" />
	 <source type="video/ogg" src="video.ogg" />
</video>


<video width="720" height="404" controls>
	 <source type="video/mp4" src="video.mp4" />
	 <source type="video/ogg" src="video.ogg" />

	 <object width="720" height="404" type="application/x-
shockwave-flash" data="player.swf?file=video.mp4">
	 	 <param name="movie" value="player.swf?file=video.mp4" />
	 </object>
</video>
Jouons avec l’API
<video id="video" width="720" height="404" controls>
	   <source type="video/ogg" src="videos/demoreel-2009.ogg">
	   <source type="video/mp4" src="videos/demoreel-2009.mp4">
</video>

<div>
	   <button id="play">Lire</button>
	   <button id="stop">Stop</button>
</div>

<script>
	   var
	   	    video = document.getElementById("video"),
	   	    play = document.getElementById("play"),
	   	    stop = document.getElementById("stop");

	   video.controls = false; // Désactive les controles par défaut
	   play.addEventListener("click", function() { video.play() }, false);
	   stop.addEventListener("click", function() { video.pause() }, false);
</script>
Media API
                feature detection




!!document.createElement("video").canPlayType
Media API
            feature detection


var
  video   = document.createElement("video"),
  support = !!video.canPlayType,
  formats = (support) ? {
    mp4: video.canPlayType("video/mp4"),
    ogg: video.canPlayType("video/ogg"),
    webm: video.canPlayType("video/webm")
  } : null;
Media API
                      feature detection

var
  video   = document.createElement("video"),
  support = !!video.canPlayType,
  formats = (support) ? {
    mp4: video.canPlayType('video/mp4; codecs="avc1.42E01E,
mp4a.40.2"'),
    ogg: video.canPlayType('video/ogg; codecs="theora"'),
    webm: video.canPlayType('video/webm; codecs="vp8, vorbis"')
  } : null;
Media API
                feature detection




!!document.createElement("audio").canPlayType
Media API
            feature detection


var
  audio   = document.createElement("audio"),
  support = !!audio.canPlayType,
  formats = (support) ? {
    mp3: audio.canPlayType("audio/mpeg"),
    ogg: audio.canPlayType("audio/ogg"),
    aac: audio.canPlayType("audio/mp4")
  } : null;
Media API
                    feature detection


var
  audio   = document.createElement("audio"),
  support = !!audio.canPlayType,
  formats = (support) ? {
    mp3: audio.canPlayType("audio/mpeg;"),
    ogg: audio.canPlayType('audio/ogg; codecs="vorbis"'),
    aac: audio.canPlayType('audio/mp4; codecs="mp4a.40.2"')
  } : null;
(Media Capture API)
Offline API
            Mettre en cache




• Cache Manifest
• Base de donnée SQL (!)
Offline API
       Vérifier la connectivité

navigator.onLine

window.addEventListener(
   "online",
   function() { console.log("ONLINE"); },
   false
);

window.addEventListener(
   "offline",
   function() { console.log("OFFLINE"); },
   false
);
Offline API
      feature detection




!!window.applicationCache
Web Storage
          Cookies sous stéroïdes


• Association clé valeur
• Deux storages :
 • session (supprimé à la fermeture de l’onglet)
 • local (conservé, comme les cookies)
Web Storage
         Cookies sous stéroïdes


window.sessionStorage.setItem("test", "youpi");

// Actualisez

window.sessionStorage.getItem("test"); // youpi

// Fermez et ré-ouvrez l’onglet

window.sessionStorage.getItem("test"); // null
Web Storage
          feature detection



try {
  return ('sessionStorage' in window) &&
window.localStorage !== null;
} catch(e) {
  return false;
}
Web SQL Database
  Web Storage sous stéroïdes



            SQL !


     • openDatabase()
     • transaction()
     • executeSQL()
WebSocket API
Ouvrir une connexion TCP



         TCP !



     Temps réel !!!
Drag’n’drop
Déplacer des éléments, déposer des fichiers


• Navigateur → OS
• OS → Navigateur
• Éléments de la page
• UndoManager
File API


• Accéder aux fichiers, les lire
• Uploader plusieurs fichiers


                                  Excellent tutorial
Web Workers


Externaliser les traitements lourds
Web Workers
  feature detection




 !!window.Worker
Geolocation API
  Géolocaliser l’utilisateur




 • getCurrentPosition()
 • watchPosition()
 • clearWatch()
Geolocation API
     feature detection




!!navigator.geolocation
Et d’autres !
Ressources (W3C)

•   HTML5: The Markup Language http://dev.w3.org/html5/markup/

•   HTML5 Author Edition http://dev.w3.org/html5/spec-author-view/

•   Diff. http://dev.w3.org/html5/html4-differences/

•   Spec. http://dev.w3.org/html5/spec/Overview.html
Autres ressources
• Dive into HTML5 http://diveintohtml5.org
• Detecting HTML5 features
  http://diveintohtml5.org/detect.html
• Peeks, Poke and Pointers (cheats sheet)
  http://diveintohtml5.org/peeks-pokes-and-
  pointers.html
• HTML5 Doctor http://html5doctor.com
• HTML5 Gallery http://html5gallery.com
  (mais attention …)
Autres ressources

• html5shiv http://code.google.com/p/html5shiv/

• When can I use… http://caniuse.com
• HTML5 & CSS3 Support
  http://findmebyip.com/litmus
Contact


 Nicolas Le Gall
me@neovov.com

Contenu connexe

Tendances

La puissance des pseudo-éléments
La puissance des pseudo-élémentsLa puissance des pseudo-éléments
La puissance des pseudo-élémentsGeoffrey Croftє
 
La mobilité dans Drupal
La mobilité dans DrupalLa mobilité dans Drupal
La mobilité dans DrupalAdyax
 
Ajax et Accessibilite
Ajax et AccessibiliteAjax et Accessibilite
Ajax et Accessibilitemikeh
 
Jquery - introduction au langage
Jquery - introduction au langageJquery - introduction au langage
Jquery - introduction au langageStrasWeb
 
Vue, j’avais pas vu !
Vue, j’avais pas vu !Vue, j’avais pas vu !
Vue, j’avais pas vu !Bruno Bonnin
 
Les balises HTML
Les balises HTMLLes balises HTML
Les balises HTMLNeovov
 
Web Components & Shadow DOM
Web Components & Shadow DOMWeb Components & Shadow DOM
Web Components & Shadow DOMThomas Bassetto
 
Une visite guidée d’Internet Explorer 9 et HTML5 pour les développeurs Web
Une visite guidée d’Internet Explorer 9 et HTML5 pour les développeurs WebUne visite guidée d’Internet Explorer 9 et HTML5 pour les développeurs Web
Une visite guidée d’Internet Explorer 9 et HTML5 pour les développeurs WebFrédéric Harper
 
Création de Thème WordPress - Ghilas BELHADJ - Semaine du Web 2013
Création de Thème WordPress - Ghilas BELHADJ - Semaine du Web 2013Création de Thème WordPress - Ghilas BELHADJ - Semaine du Web 2013
Création de Thème WordPress - Ghilas BELHADJ - Semaine du Web 2013Ghilas BELHADJ
 
Introduction à la performance web
Introduction à la performance webIntroduction à la performance web
Introduction à la performance webRaphaël Goetter
 
Jquery
JqueryJquery
Jquerykrymo
 
Conversion de template HTML en thème WordPress
Conversion de template HTML en thème WordPressConversion de template HTML en thème WordPress
Conversion de template HTML en thème WordPressChi Nacim
 
Vive les tableaux de mise en page !
Vive les tableaux de mise en page !Vive les tableaux de mise en page !
Vive les tableaux de mise en page !Raphaël Goetter
 
Cours yeoman backbone box2d
Cours yeoman backbone box2dCours yeoman backbone box2d
Cours yeoman backbone box2dhugomallet
 
Création de themes WordPress
Création de themes WordPressCréation de themes WordPress
Création de themes WordPressChi Nacim
 
Intégrateurs, bousculez vos habitudes
Intégrateurs, bousculez vos habitudesIntégrateurs, bousculez vos habitudes
Intégrateurs, bousculez vos habitudesRaphaël Goetter
 

Tendances (20)

La puissance des pseudo-éléments
La puissance des pseudo-élémentsLa puissance des pseudo-éléments
La puissance des pseudo-éléments
 
La mobilité dans Drupal
La mobilité dans DrupalLa mobilité dans Drupal
La mobilité dans Drupal
 
Ajax et Accessibilite
Ajax et AccessibiliteAjax et Accessibilite
Ajax et Accessibilite
 
Apprenez le jQuery
Apprenez le jQueryApprenez le jQuery
Apprenez le jQuery
 
Jquery - introduction au langage
Jquery - introduction au langageJquery - introduction au langage
Jquery - introduction au langage
 
Jquery : les bases
Jquery : les basesJquery : les bases
Jquery : les bases
 
Vue, j’avais pas vu !
Vue, j’avais pas vu !Vue, j’avais pas vu !
Vue, j’avais pas vu !
 
HTML
HTMLHTML
HTML
 
Les balises HTML
Les balises HTMLLes balises HTML
Les balises HTML
 
jQuery
jQueryjQuery
jQuery
 
Web Components & Shadow DOM
Web Components & Shadow DOMWeb Components & Shadow DOM
Web Components & Shadow DOM
 
Une visite guidée d’Internet Explorer 9 et HTML5 pour les développeurs Web
Une visite guidée d’Internet Explorer 9 et HTML5 pour les développeurs WebUne visite guidée d’Internet Explorer 9 et HTML5 pour les développeurs Web
Une visite guidée d’Internet Explorer 9 et HTML5 pour les développeurs Web
 
Création de Thème WordPress - Ghilas BELHADJ - Semaine du Web 2013
Création de Thème WordPress - Ghilas BELHADJ - Semaine du Web 2013Création de Thème WordPress - Ghilas BELHADJ - Semaine du Web 2013
Création de Thème WordPress - Ghilas BELHADJ - Semaine du Web 2013
 
Introduction à la performance web
Introduction à la performance webIntroduction à la performance web
Introduction à la performance web
 
Jquery
JqueryJquery
Jquery
 
Conversion de template HTML en thème WordPress
Conversion de template HTML en thème WordPressConversion de template HTML en thème WordPress
Conversion de template HTML en thème WordPress
 
Vive les tableaux de mise en page !
Vive les tableaux de mise en page !Vive les tableaux de mise en page !
Vive les tableaux de mise en page !
 
Cours yeoman backbone box2d
Cours yeoman backbone box2dCours yeoman backbone box2d
Cours yeoman backbone box2d
 
Création de themes WordPress
Création de themes WordPressCréation de themes WordPress
Création de themes WordPress
 
Intégrateurs, bousculez vos habitudes
Intégrateurs, bousculez vos habitudesIntégrateurs, bousculez vos habitudes
Intégrateurs, bousculez vos habitudes
 

En vedette

Parnassus data recovery manager for oracle database user guide v0.3
Parnassus data recovery manager for oracle database user guide v0.3Parnassus data recovery manager for oracle database user guide v0.3
Parnassus data recovery manager for oracle database user guide v0.3maclean liu
 
07. b. salinan lampiran permendikbud no. 69 th 2013 ttg kurikulum sma ma
07. b. salinan lampiran permendikbud no. 69 th 2013 ttg kurikulum sma ma07. b. salinan lampiran permendikbud no. 69 th 2013 ttg kurikulum sma ma
07. b. salinan lampiran permendikbud no. 69 th 2013 ttg kurikulum sma maIrma Muthiara Sari
 
Property-based Access of RDF Data
Property-based Access of RDF DataProperty-based Access of RDF Data
Property-based Access of RDF DataGerd Groener
 
Overwhelming Numbers
Overwhelming NumbersOverwhelming Numbers
Overwhelming Numbersredskelington
 
New Zealand Franchising Confidence Index | April 2016
New Zealand Franchising Confidence Index | April 2016New Zealand Franchising Confidence Index | April 2016
New Zealand Franchising Confidence Index | April 2016Franchize Consultants
 
Prm dul is an oracle database recovery tool database
Prm dul is an oracle database recovery tool   databasePrm dul is an oracle database recovery tool   database
Prm dul is an oracle database recovery tool databasemaclean liu
 
Permen tahun2013 nomor81a_lampiran5
Permen tahun2013 nomor81a_lampiran5Permen tahun2013 nomor81a_lampiran5
Permen tahun2013 nomor81a_lampiran5Irma Muthiara Sari
 
Londens Business Presentation
Londens Business PresentationLondens Business Presentation
Londens Business PresentationShehryar Naqvi
 
New Zealand Franchising Confidence Index | January 2014
New Zealand Franchising Confidence Index | January 2014New Zealand Franchising Confidence Index | January 2014
New Zealand Franchising Confidence Index | January 2014Franchize Consultants
 
Validation of User Intentions in Process Models
Validation of User Intentions in Process ModelsValidation of User Intentions in Process Models
Validation of User Intentions in Process ModelsGerd Groener
 
Finanziamenti regione veneto
Finanziamenti regione venetoFinanziamenti regione veneto
Finanziamenti regione venetoEva Previti
 
Accessing Indiegogo Data | Academic Mindtrek 2015
Accessing Indiegogo Data | Academic Mindtrek 2015Accessing Indiegogo Data | Academic Mindtrek 2015
Accessing Indiegogo Data | Academic Mindtrek 2015Jukka Huhtamäki
 

En vedette (20)

Parnassus data recovery manager for oracle database user guide v0.3
Parnassus data recovery manager for oracle database user guide v0.3Parnassus data recovery manager for oracle database user guide v0.3
Parnassus data recovery manager for oracle database user guide v0.3
 
2
22
2
 
07. b. salinan lampiran permendikbud no. 69 th 2013 ttg kurikulum sma ma
07. b. salinan lampiran permendikbud no. 69 th 2013 ttg kurikulum sma ma07. b. salinan lampiran permendikbud no. 69 th 2013 ttg kurikulum sma ma
07. b. salinan lampiran permendikbud no. 69 th 2013 ttg kurikulum sma ma
 
Property-based Access of RDF Data
Property-based Access of RDF DataProperty-based Access of RDF Data
Property-based Access of RDF Data
 
Mauna Loa :D
Mauna Loa :DMauna Loa :D
Mauna Loa :D
 
Overwhelming Numbers
Overwhelming NumbersOverwhelming Numbers
Overwhelming Numbers
 
New Zealand Franchising Confidence Index | April 2016
New Zealand Franchising Confidence Index | April 2016New Zealand Franchising Confidence Index | April 2016
New Zealand Franchising Confidence Index | April 2016
 
Prm dul is an oracle database recovery tool database
Prm dul is an oracle database recovery tool   databasePrm dul is an oracle database recovery tool   database
Prm dul is an oracle database recovery tool database
 
Permen tahun2013 nomor81a_lampiran5
Permen tahun2013 nomor81a_lampiran5Permen tahun2013 nomor81a_lampiran5
Permen tahun2013 nomor81a_lampiran5
 
Londens Business Presentation
Londens Business PresentationLondens Business Presentation
Londens Business Presentation
 
Valentine 2012
Valentine 2012Valentine 2012
Valentine 2012
 
Fci apr 2012
Fci    apr 2012Fci    apr 2012
Fci apr 2012
 
New Zealand Franchising Confidence Index | January 2014
New Zealand Franchising Confidence Index | January 2014New Zealand Franchising Confidence Index | January 2014
New Zealand Franchising Confidence Index | January 2014
 
Gandhi Ultimate Marketing Guru1234 X5555
Gandhi  Ultimate Marketing Guru1234 X5555Gandhi  Ultimate Marketing Guru1234 X5555
Gandhi Ultimate Marketing Guru1234 X5555
 
Validation of User Intentions in Process Models
Validation of User Intentions in Process ModelsValidation of User Intentions in Process Models
Validation of User Intentions in Process Models
 
Finanziamenti regione veneto
Finanziamenti regione venetoFinanziamenti regione veneto
Finanziamenti regione veneto
 
4 sesons
4 sesons4 sesons
4 sesons
 
Accessing Indiegogo Data | Academic Mindtrek 2015
Accessing Indiegogo Data | Academic Mindtrek 2015Accessing Indiegogo Data | Academic Mindtrek 2015
Accessing Indiegogo Data | Academic Mindtrek 2015
 
The 4 seasons
The 4 seasonsThe 4 seasons
The 4 seasons
 
Jinnius Profile
Jinnius Profile Jinnius Profile
Jinnius Profile
 

Similaire à HTML5

Codedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
Codedarmor 2012 - 06/03 - HTML5, CSS3 et JavascriptCodedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
Codedarmor 2012 - 06/03 - HTML5, CSS3 et Javascriptcodedarmor
 
Symfony2 - Un Framework PHP 5 Performant
Symfony2 - Un Framework PHP 5 PerformantSymfony2 - Un Framework PHP 5 Performant
Symfony2 - Un Framework PHP 5 PerformantHugo Hamon
 
Présentation complète de l'HTML5
Présentation complète de l'HTML5Présentation complète de l'HTML5
Présentation complète de l'HTML5jverrecchia
 
Découverte du moteur de rendu du projet Spartan
Découverte du moteur de rendu du projet SpartanDécouverte du moteur de rendu du projet Spartan
Découverte du moteur de rendu du projet SpartanMicrosoft
 
Html5 2
Html5 2Html5 2
Html5 2TECOS
 
technologie web - part2
technologie web - part2technologie web - part2
technologie web - part2Benoît Simard
 
Atelier : Développement rapide d&rsquo;une application basée surXWiki
Atelier : Développement rapide d&rsquo;une application basée surXWikiAtelier : Développement rapide d&rsquo;une application basée surXWiki
Atelier : Développement rapide d&rsquo;une application basée surXWikiKorteby Farouk
 
Jug algeria x wiki-atelier
Jug algeria x wiki-atelierJug algeria x wiki-atelier
Jug algeria x wiki-atelierAlgeria JUG
 
Développement Web sur iPhone (iPhone+iPad DevCamp Québec)
Développement Web sur iPhone (iPhone+iPad DevCamp Québec)Développement Web sur iPhone (iPhone+iPad DevCamp Québec)
Développement Web sur iPhone (iPhone+iPad DevCamp Québec)Rémi Prévost
 
ENIB 2015-2016 - CAI Web - S01E01- Côté navigateur 2/3 - HTML5, CSS3, Twitte...
ENIB 2015-2016 - CAI Web -  S01E01- Côté navigateur 2/3 - HTML5, CSS3, Twitte...ENIB 2015-2016 - CAI Web -  S01E01- Côté navigateur 2/3 - HTML5, CSS3, Twitte...
ENIB 2015-2016 - CAI Web - S01E01- Côté navigateur 2/3 - HTML5, CSS3, Twitte...Horacio Gonzalez
 
Internationalisation du Front
Internationalisation du FrontInternationalisation du Front
Internationalisation du FrontYannick Croissant
 
HTML5 et Internet Explorer 9, est-ce réellement compatible?
HTML5 et Internet Explorer 9, est-ce réellement compatible?HTML5 et Internet Explorer 9, est-ce réellement compatible?
HTML5 et Internet Explorer 9, est-ce réellement compatible?Frédéric Harper
 
Enib cours c.a.i. web - séance #1 - html5 css3-js - 2
Enib   cours c.a.i. web - séance #1 - html5 css3-js - 2Enib   cours c.a.i. web - séance #1 - html5 css3-js - 2
Enib cours c.a.i. web - séance #1 - html5 css3-js - 2Horacio Gonzalez
 
Rich Desktop Applications
Rich Desktop ApplicationsRich Desktop Applications
Rich Desktop Applicationsgoldoraf
 
Comment évaluer la qualité d'un site web selon les techniques d'intégration w...
Comment évaluer la qualité d'un site web selon les techniques d'intégration w...Comment évaluer la qualité d'un site web selon les techniques d'intégration w...
Comment évaluer la qualité d'un site web selon les techniques d'intégration w...Renoir Boulanger
 
1-Introduction JQuery.pptx
1-Introduction JQuery.pptx1-Introduction JQuery.pptx
1-Introduction JQuery.pptxlaabid1
 

Similaire à HTML5 (20)

Codedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
Codedarmor 2012 - 06/03 - HTML5, CSS3 et JavascriptCodedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
Codedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
 
Symfony2 - Un Framework PHP 5 Performant
Symfony2 - Un Framework PHP 5 PerformantSymfony2 - Un Framework PHP 5 Performant
Symfony2 - Un Framework PHP 5 Performant
 
Présentation complète de l'HTML5
Présentation complète de l'HTML5Présentation complète de l'HTML5
Présentation complète de l'HTML5
 
HTML5, le nouveau buzzword
HTML5, le nouveau buzzwordHTML5, le nouveau buzzword
HTML5, le nouveau buzzword
 
Découverte du moteur de rendu du projet Spartan
Découverte du moteur de rendu du projet SpartanDécouverte du moteur de rendu du projet Spartan
Découverte du moteur de rendu du projet Spartan
 
Html5 2
Html5 2Html5 2
Html5 2
 
technologie web - part2
technologie web - part2technologie web - part2
technologie web - part2
 
Atelier : Développement rapide d&rsquo;une application basée surXWiki
Atelier : Développement rapide d&rsquo;une application basée surXWikiAtelier : Développement rapide d&rsquo;une application basée surXWiki
Atelier : Développement rapide d&rsquo;une application basée surXWiki
 
Html5 & ie
Html5 & ieHtml5 & ie
Html5 & ie
 
Jug algeria x wiki-atelier
Jug algeria x wiki-atelierJug algeria x wiki-atelier
Jug algeria x wiki-atelier
 
Développement Web sur iPhone (iPhone+iPad DevCamp Québec)
Développement Web sur iPhone (iPhone+iPad DevCamp Québec)Développement Web sur iPhone (iPhone+iPad DevCamp Québec)
Développement Web sur iPhone (iPhone+iPad DevCamp Québec)
 
ENIB 2015-2016 - CAI Web - S01E01- Côté navigateur 2/3 - HTML5, CSS3, Twitte...
ENIB 2015-2016 - CAI Web -  S01E01- Côté navigateur 2/3 - HTML5, CSS3, Twitte...ENIB 2015-2016 - CAI Web -  S01E01- Côté navigateur 2/3 - HTML5, CSS3, Twitte...
ENIB 2015-2016 - CAI Web - S01E01- Côté navigateur 2/3 - HTML5, CSS3, Twitte...
 
Internationalisation du Front
Internationalisation du FrontInternationalisation du Front
Internationalisation du Front
 
HTML5 et Internet Explorer 9, est-ce réellement compatible?
HTML5 et Internet Explorer 9, est-ce réellement compatible?HTML5 et Internet Explorer 9, est-ce réellement compatible?
HTML5 et Internet Explorer 9, est-ce réellement compatible?
 
Enib cours c.a.i. web - séance #1 - html5 css3-js - 2
Enib   cours c.a.i. web - séance #1 - html5 css3-js - 2Enib   cours c.a.i. web - séance #1 - html5 css3-js - 2
Enib cours c.a.i. web - séance #1 - html5 css3-js - 2
 
Rich Desktop Applications
Rich Desktop ApplicationsRich Desktop Applications
Rich Desktop Applications
 
Html5 now light
Html5 now lightHtml5 now light
Html5 now light
 
Comment évaluer la qualité d'un site web selon les techniques d'intégration w...
Comment évaluer la qualité d'un site web selon les techniques d'intégration w...Comment évaluer la qualité d'un site web selon les techniques d'intégration w...
Comment évaluer la qualité d'un site web selon les techniques d'intégration w...
 
Paris Web
Paris WebParis Web
Paris Web
 
1-Introduction JQuery.pptx
1-Introduction JQuery.pptx1-Introduction JQuery.pptx
1-Introduction JQuery.pptx
 

Dernier

Presentation de la plateforme Moodle - avril 2024
Presentation de la plateforme Moodle - avril 2024Presentation de la plateforme Moodle - avril 2024
Presentation de la plateforme Moodle - avril 2024Gilles Le Page
 
SciencesPo_Aix_InnovationPédagogique_Conférence_SK.pdf
SciencesPo_Aix_InnovationPédagogique_Conférence_SK.pdfSciencesPo_Aix_InnovationPédagogique_Conférence_SK.pdf
SciencesPo_Aix_InnovationPédagogique_Conférence_SK.pdfSKennel
 
Cours SE Le système Linux : La ligne de commande bash - IG IPSET
Cours SE Le système Linux : La ligne de commande bash - IG IPSETCours SE Le système Linux : La ligne de commande bash - IG IPSET
Cours SE Le système Linux : La ligne de commande bash - IG IPSETMedBechir
 
Cours SE Gestion des périphériques - IG IPSET
Cours SE Gestion des périphériques - IG IPSETCours SE Gestion des périphériques - IG IPSET
Cours SE Gestion des périphériques - IG IPSETMedBechir
 
Zotero avancé - support de formation doctorants SHS 2024
Zotero avancé - support de formation doctorants SHS 2024Zotero avancé - support de formation doctorants SHS 2024
Zotero avancé - support de formation doctorants SHS 2024Alain Marois
 
Principe de fonctionnement d'un moteur 4 temps
Principe de fonctionnement d'un moteur 4 tempsPrincipe de fonctionnement d'un moteur 4 temps
Principe de fonctionnement d'un moteur 4 tempsRajiAbdelghani
 
Bibdoc 2024 - Ecologie du livre et creation de badge.pdf
Bibdoc 2024 - Ecologie du livre et creation de badge.pdfBibdoc 2024 - Ecologie du livre et creation de badge.pdf
Bibdoc 2024 - Ecologie du livre et creation de badge.pdfBibdoc 37
 
Le Lean sur une ligne de production : Formation et mise en application directe
Le Lean sur une ligne de production : Formation et mise en application directeLe Lean sur une ligne de production : Formation et mise en application directe
Le Lean sur une ligne de production : Formation et mise en application directeXL Groupe
 
SciencesPo_Aix_InnovationPédagogique_Atelier_IA.pdf
SciencesPo_Aix_InnovationPédagogique_Atelier_IA.pdfSciencesPo_Aix_InnovationPédagogique_Atelier_IA.pdf
SciencesPo_Aix_InnovationPédagogique_Atelier_IA.pdfSKennel
 
PIE-A2-P 5- Supports stagiaires.pptx.pdf
PIE-A2-P 5- Supports stagiaires.pptx.pdfPIE-A2-P 5- Supports stagiaires.pptx.pdf
PIE-A2-P 5- Supports stagiaires.pptx.pdfRiDaHAziz
 
Bernard Réquichot.pptx Peintre français
Bernard Réquichot.pptx   Peintre françaisBernard Réquichot.pptx   Peintre français
Bernard Réquichot.pptx Peintre françaisTxaruka
 
Bibdoc 2024 - Les maillons de la chaine du livre face aux enjeux écologiques.pdf
Bibdoc 2024 - Les maillons de la chaine du livre face aux enjeux écologiques.pdfBibdoc 2024 - Les maillons de la chaine du livre face aux enjeux écologiques.pdf
Bibdoc 2024 - Les maillons de la chaine du livre face aux enjeux écologiques.pdfBibdoc 37
 
SciencesPo_Aix_InnovationPédagogique_Bilan.pdf
SciencesPo_Aix_InnovationPédagogique_Bilan.pdfSciencesPo_Aix_InnovationPédagogique_Bilan.pdf
SciencesPo_Aix_InnovationPédagogique_Bilan.pdfSKennel
 
SciencesPo_Aix_InnovationPédagogique_Atelier_EtudiantActeur.pdf
SciencesPo_Aix_InnovationPédagogique_Atelier_EtudiantActeur.pdfSciencesPo_Aix_InnovationPédagogique_Atelier_EtudiantActeur.pdf
SciencesPo_Aix_InnovationPédagogique_Atelier_EtudiantActeur.pdfSKennel
 
LA MONTÉE DE L'ÉDUCATION DANS LE MONDE DE LA PRÉHISTOIRE À L'ÈRE CONTEMPORAIN...
LA MONTÉE DE L'ÉDUCATION DANS LE MONDE DE LA PRÉHISTOIRE À L'ÈRE CONTEMPORAIN...LA MONTÉE DE L'ÉDUCATION DANS LE MONDE DE LA PRÉHISTOIRE À L'ÈRE CONTEMPORAIN...
LA MONTÉE DE L'ÉDUCATION DANS LE MONDE DE LA PRÉHISTOIRE À L'ÈRE CONTEMPORAIN...Faga1939
 
Annie Ernaux Extérieurs. pptx. Exposition basée sur un livre .
Annie   Ernaux  Extérieurs. pptx. Exposition basée sur un livre .Annie   Ernaux  Extérieurs. pptx. Exposition basée sur un livre .
Annie Ernaux Extérieurs. pptx. Exposition basée sur un livre .Txaruka
 
SciencesPo_Aix_InnovationPédagogique_Atelier_FormationRecherche.pdf
SciencesPo_Aix_InnovationPédagogique_Atelier_FormationRecherche.pdfSciencesPo_Aix_InnovationPédagogique_Atelier_FormationRecherche.pdf
SciencesPo_Aix_InnovationPédagogique_Atelier_FormationRecherche.pdfSKennel
 
PIE-A2-P4-support stagiaires sept 22-validé.pdf
PIE-A2-P4-support stagiaires sept 22-validé.pdfPIE-A2-P4-support stagiaires sept 22-validé.pdf
PIE-A2-P4-support stagiaires sept 22-validé.pdfRiDaHAziz
 

Dernier (19)

Presentation de la plateforme Moodle - avril 2024
Presentation de la plateforme Moodle - avril 2024Presentation de la plateforme Moodle - avril 2024
Presentation de la plateforme Moodle - avril 2024
 
SciencesPo_Aix_InnovationPédagogique_Conférence_SK.pdf
SciencesPo_Aix_InnovationPédagogique_Conférence_SK.pdfSciencesPo_Aix_InnovationPédagogique_Conférence_SK.pdf
SciencesPo_Aix_InnovationPédagogique_Conférence_SK.pdf
 
Cours SE Le système Linux : La ligne de commande bash - IG IPSET
Cours SE Le système Linux : La ligne de commande bash - IG IPSETCours SE Le système Linux : La ligne de commande bash - IG IPSET
Cours SE Le système Linux : La ligne de commande bash - IG IPSET
 
Cours SE Gestion des périphériques - IG IPSET
Cours SE Gestion des périphériques - IG IPSETCours SE Gestion des périphériques - IG IPSET
Cours SE Gestion des périphériques - IG IPSET
 
Zotero avancé - support de formation doctorants SHS 2024
Zotero avancé - support de formation doctorants SHS 2024Zotero avancé - support de formation doctorants SHS 2024
Zotero avancé - support de formation doctorants SHS 2024
 
Principe de fonctionnement d'un moteur 4 temps
Principe de fonctionnement d'un moteur 4 tempsPrincipe de fonctionnement d'un moteur 4 temps
Principe de fonctionnement d'un moteur 4 temps
 
Bibdoc 2024 - Ecologie du livre et creation de badge.pdf
Bibdoc 2024 - Ecologie du livre et creation de badge.pdfBibdoc 2024 - Ecologie du livre et creation de badge.pdf
Bibdoc 2024 - Ecologie du livre et creation de badge.pdf
 
Le Lean sur une ligne de production : Formation et mise en application directe
Le Lean sur une ligne de production : Formation et mise en application directeLe Lean sur une ligne de production : Formation et mise en application directe
Le Lean sur une ligne de production : Formation et mise en application directe
 
SciencesPo_Aix_InnovationPédagogique_Atelier_IA.pdf
SciencesPo_Aix_InnovationPédagogique_Atelier_IA.pdfSciencesPo_Aix_InnovationPédagogique_Atelier_IA.pdf
SciencesPo_Aix_InnovationPédagogique_Atelier_IA.pdf
 
PIE-A2-P 5- Supports stagiaires.pptx.pdf
PIE-A2-P 5- Supports stagiaires.pptx.pdfPIE-A2-P 5- Supports stagiaires.pptx.pdf
PIE-A2-P 5- Supports stagiaires.pptx.pdf
 
Bernard Réquichot.pptx Peintre français
Bernard Réquichot.pptx   Peintre françaisBernard Réquichot.pptx   Peintre français
Bernard Réquichot.pptx Peintre français
 
Bibdoc 2024 - Les maillons de la chaine du livre face aux enjeux écologiques.pdf
Bibdoc 2024 - Les maillons de la chaine du livre face aux enjeux écologiques.pdfBibdoc 2024 - Les maillons de la chaine du livre face aux enjeux écologiques.pdf
Bibdoc 2024 - Les maillons de la chaine du livre face aux enjeux écologiques.pdf
 
SciencesPo_Aix_InnovationPédagogique_Bilan.pdf
SciencesPo_Aix_InnovationPédagogique_Bilan.pdfSciencesPo_Aix_InnovationPédagogique_Bilan.pdf
SciencesPo_Aix_InnovationPédagogique_Bilan.pdf
 
SciencesPo_Aix_InnovationPédagogique_Atelier_EtudiantActeur.pdf
SciencesPo_Aix_InnovationPédagogique_Atelier_EtudiantActeur.pdfSciencesPo_Aix_InnovationPédagogique_Atelier_EtudiantActeur.pdf
SciencesPo_Aix_InnovationPédagogique_Atelier_EtudiantActeur.pdf
 
LA MONTÉE DE L'ÉDUCATION DANS LE MONDE DE LA PRÉHISTOIRE À L'ÈRE CONTEMPORAIN...
LA MONTÉE DE L'ÉDUCATION DANS LE MONDE DE LA PRÉHISTOIRE À L'ÈRE CONTEMPORAIN...LA MONTÉE DE L'ÉDUCATION DANS LE MONDE DE LA PRÉHISTOIRE À L'ÈRE CONTEMPORAIN...
LA MONTÉE DE L'ÉDUCATION DANS LE MONDE DE LA PRÉHISTOIRE À L'ÈRE CONTEMPORAIN...
 
Annie Ernaux Extérieurs. pptx. Exposition basée sur un livre .
Annie   Ernaux  Extérieurs. pptx. Exposition basée sur un livre .Annie   Ernaux  Extérieurs. pptx. Exposition basée sur un livre .
Annie Ernaux Extérieurs. pptx. Exposition basée sur un livre .
 
DO PALÁCIO À ASSEMBLEIA .
DO PALÁCIO À ASSEMBLEIA                 .DO PALÁCIO À ASSEMBLEIA                 .
DO PALÁCIO À ASSEMBLEIA .
 
SciencesPo_Aix_InnovationPédagogique_Atelier_FormationRecherche.pdf
SciencesPo_Aix_InnovationPédagogique_Atelier_FormationRecherche.pdfSciencesPo_Aix_InnovationPédagogique_Atelier_FormationRecherche.pdf
SciencesPo_Aix_InnovationPédagogique_Atelier_FormationRecherche.pdf
 
PIE-A2-P4-support stagiaires sept 22-validé.pdf
PIE-A2-P4-support stagiaires sept 22-validé.pdfPIE-A2-P4-support stagiaires sept 22-validé.pdf
PIE-A2-P4-support stagiaires sept 22-validé.pdf
 

HTML5

  • 2. Pourquoi HTML5 ? • Depuis 1999, les usages ont changés • Applications web • Sémantiser
  • 3. Pour quoi HTML5 ? • Structurer un document • Créer des applications web • Préparer l’avenir
  • 4. Une nouvelle orientation • Standardiser l’existant • Spécification claire, dirigiste • Repenser le contenu
  • 5. Une nouvelle orientation Text Flow Bodytext
  • 6. Doctype • HTML5 : <!DOCTYPE html> • XHTML5 : pas de doctype, prologue XML <?xml version="1.0" encoding="UTF-8"?> <html xmlns="http://www.w3.org/1999/xhtml">
  • 7. Encodage <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta charset="UTF-8"> 1.Header HTTP 2.BOM du fichier 3.<meta>
  • 8. <section> • Groupage thématique du contenu <section id="articles">…</section> <section id="twitter">…</section> ≠ <div id="sidebar">…</div> • Les sections ont des headings indépendants
  • 9. <header>/<footer> • <header> : Introduction, aide à la navigation • <footer> : Informations sur la section (meta) <body><header id="header">…</header> <section id="news"><header>…</header> <footer id="footer">…</footer></body> <footer>…</footer></section>
  • 10. <nav> • Sectionsite, dans la page, etc.) (dans le permettant de naviguer <nav> <h1>Navigation</h1> <ul> <li><a href="">Accueil</a></li> <li><a href="actualites">Actualités</a></li> … </ul> </nav> <nav id="prelude"> <p>Aller au :</p> <ul> <li><a href="#contenu">contenu</a></li> <li><a href="#recherche">moteur de recherche</a></li> … </ul> </nav>
  • 11. <article> • Section représentant un contenu indépendant du reste du document <section id="articles"> <article><h1>Article 1… <article><h1>Article 2… <section id="twitter"> <article>Lorem ipsum… <article>Dolor sit amet…
  • 12. <aside> • Ce n’est pas une sidebar ! • Section de contenu tangentiellement relié au contenu l’entourant (?) • Équivalent d’un encart en typographie
  • 13. <hgroup> • Utilisé pour regrouper des headings <hgroup> <h1>Dr. Strangelove</h1> <h2>Or: How I Learned to Stop Worrying and Love the Bomb</h2> </hgroup>
  • 14. <time> • Écrire des dates et heures <p>Rendez-vous le <time datetime="2010-10-05">5 octobre</time>.</p> <p>On se fait un ciné <time>demain</time> ?</p> <p>Dernière connexion le <time datetime="2010-02-05T10:42:00">5 février à 10:42</time></p>
  • 15. <canvas> • Dessiner du bitmap avec Javascript • APIs 2D et 3D Raycasting (dev.opera) Visualisation with processing.js
  • 16. <audio>/<video> • Insérer des éléments multimédia facilement • Éviter d’avoir à utiliser un plugin • Accessibilité, performance
  • 17. Et d’autres… <bdi>, <command>, <datalist>, <details>, <dialog>, <embed>, <figcaption>, <figure>, <keygen>, <mark>, <meter>, <output>, <progress>, <ruby>, <rp>, <rt>, <source>, <track>, <wbr>
  • 18. Nouveaux attributs • data-* : Attributs personnalisés • draggable : Indique que le contenu est déplaçable • role, aria-* : Accessibilité • Et d’autres…
  • 19. Balises dépréciées • Présentation : <basefont>, <big>, <center>, <font>, <strike>, <tt>, <u> • Mauvaise utilisabilité/accessibilité : <frame>, <frameset>, <noframes> • Prêtant à confusion, inutile : <acronym>, <applet>, <isindex>, <dir> • <noscript> (uniquement en XHTML5)
  • 20. Attributs dépréciés http://dev.w3.org/html5/html4-differences/#absent-attributes (Essentiellement des attributs à but présentationnels)
  • 21. Balises redéfinies • <i> : Termes techniques, expressions idiomatiques, les pensées… Habituellement mis en italique en typographie. • <b> : Mots clés, nom de produit… Habituellement mis en gras en typographie. • <strong> : Ajoute de l’importance • <small> : Petites lignes
  • 23. Web Forms 2.0 Nouveaux type d’<input> : • datetime, datetime-local, date, time, month, week • number, range • email • url • search • tel • color
  • 24. Web Forms 2.0 Nouveaux attributs pour les éléments de formulaires : • autofocus • placeholder • required • autocomplete, min, max, pattern, step
  • 25. Quand l’utiliser ? • Tout de suite • Pour des projets non-critiques • Si vous pouvez mettre l’accessibilité de côté
  • 26. … et IE ? Impossible de styler une balise inconnue (!) <!--[if IE lt 9]> <script> document.createElement("header"); document.createElement("section"); </script> <![endif]--> (dans le <head>)
  • 27. A vocabulary and associated APIs for HTML and XHTML
  • 28. API ? Application Programming Interface Ensemble de fonctions mises à disposition
  • 29. Web Forms 2.0 Vérifier les contraintes des champs <form> <input type="number" value="coucou" /> <input type="email" value="me@neovov.com" /> </form> var form = document.getElementsByTagName("form")[0], input = document.getElementsByTagName("input"); input[0].checkValidity(); // false ("coucou" n'est pas un nombre) input[1].checkValidity(); // true form.checkValidity(); // false
  • 30. Web Forms 2.0 Vérifier les contraintes des champs <form> <input type="number" value="1" /> <input type="email" value="me@neovov.com" /> </form> var form = document.getElementsByTagName("form")[0], input = document.getElementsByTagName("input"); input[0].checkValidity(); // true input[1].checkValidity(); // true form.checkValidity(); // true
  • 31. Selector API $("#news article:nth-child(2n+1)") = $$("#news article:nth-child(2n+1)") = document.querySelectorAll("#news article:nth-child(2n+1)")
  • 32. Selector API Récupérer des éléments • querySelector() => Element || null • querySelectorAll() => NodeList
  • 33. Selector API feature detection !!document.querySelector var $ = document.querySelectorAll || (function(selector) { // Code bien lourd (ou sizzle) });
  • 34. Canvas Dessiner du bitmap Excellent tutorial
  • 35. Canvas feature detection !!document.createElement("canvas").getContext
  • 36. WebGL Dessiner du bitmap dans un contexte 3D
  • 37. WebGL feature detection var webgl = function() { var canvas = document.createElement("canvas"); try { if (canvas.getContext("webgl")) return true; } catch(e) {} try { if (canvas.getContext("experimental-webgl")) return true; } catch(e) {} return false; }();
  • 38. Media API Manipuler des éléments multimédia • controls • play() • paused • pause() • volume • canPlayType() • currentTime • error • networkState
  • 39. Jouons avec <video> <object width="720" height="404" type="application/x- shockwave-flash" data="player.swf?file=video.flv"> <param name="movie" value="player.swf?file=video.flv" /> </object> <video width="720" height="404" src="video" controls></video>
  • 40. Quel format ? • Firefox et Opéra : Theora (OGG) • Safari : H.264 • Le petit qui s’incruste :VP8 (WebM) (Chrome, Firefox, Opera, IE)
  • 41. Quels outils d’encodage ? • Pour Theora : Extension Firefogg, ffmpeg2theora (pour les courageux) • Pour H.264 : HandBrake, autres… • Pour WebM : ffmpeg
  • 42. Jouons encore <video width="720" height="404" controls> <source type="video/mp4" src="video.mp4" /> <source type="video/ogg" src="video.ogg" /> </video> <video width="720" height="404" controls> <source type="video/mp4" src="video.mp4" /> <source type="video/ogg" src="video.ogg" /> <object width="720" height="404" type="application/x- shockwave-flash" data="player.swf?file=video.mp4"> <param name="movie" value="player.swf?file=video.mp4" /> </object> </video>
  • 43. Jouons avec l’API <video id="video" width="720" height="404" controls> <source type="video/ogg" src="videos/demoreel-2009.ogg"> <source type="video/mp4" src="videos/demoreel-2009.mp4"> </video> <div> <button id="play">Lire</button> <button id="stop">Stop</button> </div> <script> var video = document.getElementById("video"), play = document.getElementById("play"), stop = document.getElementById("stop"); video.controls = false; // Désactive les controles par défaut play.addEventListener("click", function() { video.play() }, false); stop.addEventListener("click", function() { video.pause() }, false); </script>
  • 44. Media API feature detection !!document.createElement("video").canPlayType
  • 45. Media API feature detection var video = document.createElement("video"), support = !!video.canPlayType, formats = (support) ? { mp4: video.canPlayType("video/mp4"), ogg: video.canPlayType("video/ogg"), webm: video.canPlayType("video/webm") } : null;
  • 46. Media API feature detection var video = document.createElement("video"), support = !!video.canPlayType, formats = (support) ? { mp4: video.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"'), ogg: video.canPlayType('video/ogg; codecs="theora"'), webm: video.canPlayType('video/webm; codecs="vp8, vorbis"') } : null;
  • 47. Media API feature detection !!document.createElement("audio").canPlayType
  • 48. Media API feature detection var audio = document.createElement("audio"), support = !!audio.canPlayType, formats = (support) ? { mp3: audio.canPlayType("audio/mpeg"), ogg: audio.canPlayType("audio/ogg"), aac: audio.canPlayType("audio/mp4") } : null;
  • 49. Media API feature detection var audio = document.createElement("audio"), support = !!audio.canPlayType, formats = (support) ? { mp3: audio.canPlayType("audio/mpeg;"), ogg: audio.canPlayType('audio/ogg; codecs="vorbis"'), aac: audio.canPlayType('audio/mp4; codecs="mp4a.40.2"') } : null;
  • 51. Offline API Mettre en cache • Cache Manifest • Base de donnée SQL (!)
  • 52. Offline API Vérifier la connectivité navigator.onLine window.addEventListener( "online", function() { console.log("ONLINE"); }, false ); window.addEventListener( "offline", function() { console.log("OFFLINE"); }, false );
  • 53. Offline API feature detection !!window.applicationCache
  • 54. Web Storage Cookies sous stéroïdes • Association clé valeur • Deux storages : • session (supprimé à la fermeture de l’onglet) • local (conservé, comme les cookies)
  • 55. Web Storage Cookies sous stéroïdes window.sessionStorage.setItem("test", "youpi"); // Actualisez window.sessionStorage.getItem("test"); // youpi // Fermez et ré-ouvrez l’onglet window.sessionStorage.getItem("test"); // null
  • 56. Web Storage feature detection try { return ('sessionStorage' in window) && window.localStorage !== null; } catch(e) { return false; }
  • 57. Web SQL Database Web Storage sous stéroïdes SQL ! • openDatabase() • transaction() • executeSQL()
  • 58. WebSocket API Ouvrir une connexion TCP TCP ! Temps réel !!!
  • 59. Drag’n’drop Déplacer des éléments, déposer des fichiers • Navigateur → OS • OS → Navigateur • Éléments de la page • UndoManager
  • 60. File API • Accéder aux fichiers, les lire • Uploader plusieurs fichiers Excellent tutorial
  • 61. Web Workers Externaliser les traitements lourds
  • 62. Web Workers feature detection !!window.Worker
  • 63. Geolocation API Géolocaliser l’utilisateur • getCurrentPosition() • watchPosition() • clearWatch()
  • 64. Geolocation API feature detection !!navigator.geolocation
  • 66. Ressources (W3C) • HTML5: The Markup Language http://dev.w3.org/html5/markup/ • HTML5 Author Edition http://dev.w3.org/html5/spec-author-view/ • Diff. http://dev.w3.org/html5/html4-differences/ • Spec. http://dev.w3.org/html5/spec/Overview.html
  • 67. Autres ressources • Dive into HTML5 http://diveintohtml5.org • Detecting HTML5 features http://diveintohtml5.org/detect.html • Peeks, Poke and Pointers (cheats sheet) http://diveintohtml5.org/peeks-pokes-and- pointers.html • HTML5 Doctor http://html5doctor.com • HTML5 Gallery http://html5gallery.com (mais attention …)
  • 68. Autres ressources • html5shiv http://code.google.com/p/html5shiv/ • When can I use… http://caniuse.com • HTML5 & CSS3 Support http://findmebyip.com/litmus
  • 69. Contact Nicolas Le Gall me@neovov.com