Actualités en HTML5 : Des nouvelles de la guerre des standards
HTML5 avec connectivité / temps réel, CSS3 / Styles, accès aux appareils, graphisme 3D & effets, multimédia, performance et intégration, sémantique et stockage local

La ligne de vie du HTML5

HTML5, ça fait 5 ans que c'est nouveau !!

W3C

  • HTML5 sera une recommandation en fin 2014
  • HTML5.1 sera une recommandation en fin 2016

WHATWG

  • HTML, le standard vivant !

Le W3C prend un "snapshot" et en fait une spécification standardisée.

L'écosystème HTML

Cette image n'est pas accessible, contient une liste d'API et fonctions HTML5, par Sergey Mavrody
Technologies HTML5

Modules CSS

Cette image n'est pas accessible, contient une liste de modules CSS, par Sergey Mavrody
Modules CSS3

Autres responsables de standards

  • WebGL : Chronos Group
  • Javascript : Ecma
  • HTTP : Collaboration entre l'IETF et le W3C

Marché des navigateurs- Statcounter

Cette image n'est pas accessible, contient un graphique du marché des navigateur selon Statcounter
Marché des navigateurs selon Statcounter

Marché des navigateurs bureau - NetApplications

Cette image n'est pas accessible, contient un graphique du marché des navigateura selon Net Market Share
Marché des navigateurs bureau selon Net Market Share

Marché des navigateurs mobiles - NetApplications

Cette image n'est pas accessible, contient un graphique du marché des navigateura mobiles selon Net Market Share
Marché des navigateurs mobiles selon Net Market Share

Les moteurs de rendu

  • Internet Explorer : Trident (depuis Internet Explorer 4)
  • Firefox : Gecko (depuis le début)
  • Safari : Webkit
  • Chrome : Blink (fork de Webkit)
  • Opera : Blink aussi depuis la version 15 (RIP Presto, et avec lui la prise en charge de très vieux postes de travail)

Nouveaux éléments et attributs
sémantiques, interactifs et formulaires

L'élément sémantique main


                       <body>
                        <header>
                            Entête, logo, ... <nav>Menu de la page</nav>
                        </header>
                        <main role="main" id="contenu">
                            <section>
                                 ...
                            </section>
                            <section>
                                 ...
                            </section>
                        </main>
                        <aside>
                            Autre information connexe
                        </aside>
                       </body>
                    
Exemple de l'élément main

custom elements

custom elements


            <script>
                var moduleClavardage = document.registerElement('module-clavardage', {
                    prototype: Object.create(HTMLElement.prototype)
                    });
                var conversationClavardage = document.registerElement('clavardage-conversation', {
                              prototype: Object.create(HTMLElement.prototype)
                    });
                var messageClavardage = document.registerElement('clavardage-message', {
                              prototype: Object.create(HTMLElement.prototype)
                    });
            </script>

            <module-clavardage>
                <clavardage-conversation>
                    <clavardage-message>Bonjour</clavardage-message>
                    <clavardage-message>Ça va bien et toi ?</clavardage-message>
                </clavardage-conversation>
            </module-clavardage>
                    
Exemple de custom elements

Formulaires, mode d'entrée inputmode


                    <form>
                        <label for="japonais">Texte japonais : </label>
                        <input id="japonais" type="text" inputmode="katakana" />
                    </form>
                    
Exemple de input mode

l'élément interactif, dialog

Texte du dialogue

l'élément interactif, dialog


                <article id="test-dialogue">
                    <dialog id="un-dialogue">
                         Texte du dialogue
                        <button id="fermer">Fermer</button>
                    </dialog>
                    <button id="montrer">Montrer la boîte de dialogue</button>
                    <script>
                        var dialog = document.querySelector('#un-dialogue');
                        document.querySelector('#montrer').onclick = function() {
                          dialog.showModal();
                        };
                        document.querySelector('#fermer').onclick = function() {
                          dialog.close();
                        };
                    </script>
                    <style>
                        #un-dialogue {
                            box-shadow: 0 10px 10px rgba(0, 0, 100, 0.8);
                        }
                        #un-dialogue::backdrop {
                          position: fixed;
                          top: 0;
                          left: 0;
                          right: 0;
                          bottom: 0;
                          background-color: rgba(50, 0, 0, 0.3);
                        }
                        #test-dialogue {
                            text-align:center
                        }
                    </style>
                </article>
                    
Exemple de l'élément dialog

Attribut global inert

On ne peut intéragir avec ce texte.


                <p inert>On ne peut intéragir avec ce texte.</p>
                    
Exemple de l'attribut inert

Éléments menu et menuitem

Éléments menu de type toolbar

  • 
    <menu type="toolbar" label="Fichier">
          <li><button type="button" onclick="alert('Nouveau')">Nouveau</button></li>
          <li><button type="button" onclick="alert('Ouvrir')">Ouvrir</button></li>
          <li><button type="button" onclick="alert('Sauvegarder')">Sauvegarder</button></li>
    </menu>
                        
    Exemple de l'élément menu

    Éléments menu de type popup

    Il est possible que l'exemple ci-dessous ne fonctionne pas très bien ...

  • 
    <menu label="Exemple de menu">
     <li>
      <button type=menu value="Fichier" menu="menu-fichier" />
      <menu id="menu-fichier" type="popup">
       <menuitem onclick="alert('Nouveau')" label="Nouveau" />
       <menuitem onclick="alert('Ouvrir')" label="Ouvrir" />
       <menuitem onclick="alert('Sauvegarder')" label="Sauvegarder" />
      </menu>
     </li>
     <li>
      <button type=menu value="Editer" menu="menu-editer" />
      <menu id="menu-editer" type="popup">
       <menuitem onclick="alert('Copier')" label="Copier" />
       <menuitem onclick="alert('Couper')" label="Couper" />
       <menuitem onclick="alert('Coller')" label="Coller" />
      </menu>
     </li>
    </menu>
                        
    Exemple de l'élément menu

    Éléments menu de type context

    Il est possible que l'exemple ci-dessous ne fonctionne pas très bien ...

    
    <menu type="context" id="menu-presentation">
      <menuitem label="Page suivante"      onclick="presentation.next();"
                            icon="img/HTML5_Logo_64.png"></menuitem>
      <menuitem label="Page précédente"    onclick="presentation.previous();"
                            icon="img/HTML5_Logo_64.png"></menuitem>
      <menuitem label="Table des matières" onclick="presentation.goTableOfContents();"
                            icon="img/HTML5_Logo_64.png"></menuitem>
    </menu>
                        
    Exemple de l'élément menu

    Attribut download de l'élément a et area

    Indique au navigateur que la cible doit être téléchargée et non pas affichée.

    Télécharger la source html de cette présentation !

    
    <p>
      <a download href="index.html">
          Télécharger la source <abbr>html</abbr> de cette présentation !
      </a>
    </p>
                        
    Exemple de l'attribut download

    Attribut ping de l'élément a et area

    Notifie d'autres URL que l'URL a été suivi (analytics)

    Télécharger la source html de cette présentation !

    
    <p>
      <a download href="index.html" ping="/analytics">
          Télécharger la source <abbr>html</abbr> de cette présentation !
      </a>
    </p>
                        
    Exemple de l'attribut ping

    L'élément data

    Permet de définir une version de données qui est utile pour un logiciel

    Cette pièce est dix par quinze pieds.

    
    <p>Cette pièce est <data value="10">dix</data>
                         par <data value="15">quinze</data> pieds.</p>
                        
    Exemple de l'élément data

    Autres nouveautés

    Nouveautés CSS

    CSS image-orientation

    • Sert à corriger une mauvaise orientation d'une image
    • Ne sert pas pour le changement d'orientation d'une tablette
    • Ne devrait pas être utilisé pour changer l'orientation d'une image
    • 90deg flip from-image
    • Firefox seulement pour le moment

    logo HTML5
    logo HTML5

    
    
                            <img src="img/HTML5_Logo_64.png" alt="logo HTML5"
                            style="image-orientation:90deg" />
    
                            <img src="img/HTML5_Logo_64.png" alt="logo HTML5"
                            style="image-orientation:90deg flip" / >
                        
    Exemple CSS image-orientation

    CSS border-image

    • Nouveau sur IE 11
    • border-image-source : URL de l'image
    • border-image-slice : % de l'image coupée (cardinal)
    • border-image-width
    • border-image-outset : dépassement de la bordure du box model
    • border-image-repeat stretched repeat round

    CSS border-image

    • background-image-repeat : round

    L'image est repétée et la partie répétée est décalée et arrondie

    
                     <style>
    #background-image1 {
       border: 30px solid transparent;
       -moz-border-image:url("img/HTML5_Logo_64.png") 25 20 round;
       -webkit-border-image:url("img/HTML5_Logo_64.png") 25 20 round;
       -o-border-image:url("img/HTML5_Logo_64.png") 25 20 round;
       border-image:url("img/HTML5_Logo_64.png") 25 20 round;
    }
                    </style>
    
    <p id="background-image1">L'image est repétée
                            et la partie répétée est décalée et arrondie</p>
                        
    Exemple CSS border-image

    CSS border-image

    • background-image-repeat : repeat

    L'image est repétée et la partie répétée est décalée, mais pas arrondie

    
            <style>
    #background-image1 {
       border: 30px solid transparent;
       -moz-border-image:url("img/HTML5_Logo_64.png") 25 20 stretch;
       -webkit-border-image:url("img/HTML5_Logo_64.png") 25 20 stretch;
       -o-border-image:url("img/HTML5_Logo_64.png") 25 20 stretch;
       border-image:url("img/HTML5_Logo_64.png") 25 20 stretch;
    }
                    </style>
    
    <p id="background-image1">L'image est repétée
                            et la partie répétée est décalée et arrondie</p>
                        
    Exemple CSS border-image

    CSS border-image

    • background-image-repeat : stretch

    L'image n'est pas repétée et est étirée

    
                     <style>
    #background-image1 {
       border: 30px solid transparent;
       -moz-border-image:url("img/HTML5_Logo_64.png") 25 20 stretch;
       -webkit-border-image:url("img/HTML5_Logo_64.png") 25 20 stretch;
       -o-border-image:url("img/HTML5_Logo_64.png") 25 20 stretch;
       border-image:url("img/HTML5_Logo_64.png") 25 20 stretch;
    }
                    </style>
    
    <p id="background-image1">L'image est repétée
                            et la partie répétée est décalée et arrondie</p>
                        
    Exemple CSS border-image

    CSS position: sticky

    Titre que l'on veut toujours garder sur la page

    Beaucoup de texte long avec des <br>























    Et oui, encore...






















    Vers la fin ..





















    C'est la fin

    
    .sticky {
      position: -webkit-sticky;
      position: -moz-sticky;
      position: -ms-sticky;
      position: -o-sticky;
      top: 15px;
    }
    
                        
    Exemple CSS position:sticky

    CSS Exclusion

    Il était une fois un écureuil stressé et angoissé nommé Morphi. Il avait une femme et des enfants. Il avait toujours peur que ses enfants se fassent écraser par une voiture et que sa femme se fasse manger par un chat. Il prennait toujours entre 10 et 15 cafés par jour. Il travaillait comme intégrateur HTML. Son patron restait toujours à côté de lui toute la journée et lui demandait sans cesse "As-tu fini ? As-tu fini ? As-tu fini ? As-tu fini ? As-tu fini ? As-tu fini ? As-tu fini ? As-tu fini ? As-tu fini ? As-tu fini ? As-tu fini ? As-tu fini ? As-tu fini ? As-tu fini ? As-tu fini ? As-tu fini ? As-tu fini ? As-tu fini ? As-tu fini ? As-tu fini ? As-tu fini ? As-tu fini ? As-tu fini ? As-tu fini ? As-tu fini ? As-tu fini ? As-tu fini ? As-tu fini ? As-tu fini ? As-tu fini ? As-tu fini ? As-tu fini ? As-tu fini ? As-tu fini ? " À chaque fois que Morphi revenait chez lui, il était sûr que la police serait là pour lui annoncer la mort de sa femme et de ses enfants. Mais il en était rien. À chaque journée, il recevait plein de calins de sa femme et de ses enfants qui lui disaient en coeur : "Tu es le meilleur papa du monde !"

    
    #exclusion {
           -webkit-shape-inside: circle(50%, 60%, 50%);
    }
    
                        
    Exemple d'exclusion en CSS

    Javascript, Ecmascript et autres APIs

    EcmaScript 6 - Structures de données

    EcmaScript 6 - for .. of, const et let

    EcmaScript 6 - for .. of, const et let

    
    <script  type="application/javascript;version=1.8">
    "use strict";
    const toto = "allo";
    let arr = [ 3, 5, 7 ];
    arr.tata = toto;
    
    console.log (arr.length);
    
    for (let i in arr) {
       console.log(i); // logs "0", "1", "2", "tata"
    }
    
    for (let i in arr) {
       console.log(arr[i]); // logs "3", "5", "7", "allo"
    }
    
    for (let i of arr) {
       console.log(i); // logs "3", "5", "7"
    }
                        
    Exemples Javascript

    EcmaScript 6 - for .. of, Map et let

    
    <script  type="application/javascript;version=1.8">
    "use strict";
    let maMap = new Map();
    maMap.set(0, "zéro");
    maMap.set(1, "un");
    console.log(maMap.keys());
    
    for (let i of maMap.keys()) {
       console.log("clé " + i); // logs "clé 0", "clé 1"
    }
    
    for (let i of maMap.values()) {
       console.log("valeur " + i); // logs "valeur zéro", "valeur un"
    }
                        
    Exemples Javascript

    EcmaScript 6 - Autres

    L'élément script

    APIs pour le développement mobile

    API battery

    API battery

    Statut de la pile :

    Chargement de la pile :

    
        let pile = navigator.battery || navigator.mozBattery || navigator.webkitBattery;
        let divPile = document.getElementById("statut-pile");
        let divCharge = document.getElementById("statut-chargement");
    
        function majStatutPile() {
          divPile.innerHTML =  pile.level * 100 + " %";
    
          if (pile.charging) {
            divCharge.innerHTML = "La pile se charge";
          } else {
            divCharge.innerHTML = "La pile ne se charge pas";
          }
        }
    
        pile.addEventListener("chargingchange", majStatutPile);
        pile.addEventListener("levelchange", majStatutPile);
        majStatutPile();
                        
    Exemple battery API

    API Network Information

    API Network Information

    Bande passante du réseau :

    Est-ce que l'utilisation du réseau doit être limitée ? :

    
        let reseau = navigator.battery || navigator.mozBattery || navigator.webkitBattery;
        let divReseau = document.getElementById("statut-reseau");
        let divReseau = document.getElementById("statut-reseau-limite");
        function majStatutReseau() {
          divReseau.innerHTML =  reseau.bandwidth + " Mb/sec";
    
          if (reseau.metered) {
            divReseau.innerHTML = "Oui";
          } else {
            divReseau.innerHTML = "Non";
          }
        }
    
        reseau.addEventListener("change", majStatutReseau);
        majStatutReseau();
                        
    Exemple Network API

    API basé tablette "touch"

    element.addEventListener("touchstart", touchstartfunction, false); element.addEventListener("touchmove", touchmovefunction, false); element.addEventListener("touchend", touchendfunction, false); element.addEventListener("touchcancel", touchcancelfunction, false);
    Créer des listeners pour des événements tactiles

    API basé tablette "touch"

    $('.page').bind('touchmove', function() { var touch = event.targetTouches[0]; $("#pointer")[0].style.display = "block"; $("#pointer")[0].style.top = touch.pageY +"px"; $("#pointer")[0].style.left = touch.pageX +"px"; event.preventDefault(); });
    Faire bouger un curseur sur l'écran tactile

    Pointer Events

    API orientation des appareils

    function handleOrientation(orientData) { var alpha = orientData.alpha; var beta = orientData.beta; var gamma = orientData.gamma; console.log("Alpha : " + alpha); console.log("Beta : " + beta); console.log("Gamma : " + gamma); } window.addEventListener("deviceorientation", handleOrientation, true);

    API vibration

    // Faire vibrer le téléphone pendant 2 secondes navigator.vibrate(2000); // Faire vibrer le téléphone 3 fois 2 secondes avec des pauses d'une seconde navigator.vibrate([2000, 1000, 2000, 1000, 2000]); // Arrêter la vibration du téléphone navigator.vibrate(0);

    Gaming et multimédia

    API Gamepad

    API Gamepad

    
    window.addEventListener("gamepadconnected", function(e) {
      console.log("Gamepad connected at index %d: %s. %d buttons, %d axes.",
      e.gamepad.index, e.gamepad.id,
      e.gamepad.buttons.length, e.gamepad.axes.length);
      gameLoop();
    });
    
    var lastButtonState = 0;
    
    function gameLoop() {
        var gp = navigator.getGamepads()[0];
        if(gp.buttons[0].value > 0 || gp.buttons[0].pressed == true) {
          if (lastButtonState === 0) {
            presentation.next();
            lastButtonState = 1;
          }
        } else {
            lastButtonState = 0;
        }
        var start = rAF(gameLoop);
    }
                     

    Web speech API

    Web speech API

    
        var recognition = new webkitSpeechRecognition();
        recognition.continuous = true;
        recognition.interimResults = true;
    
        recognition.onstart = function() {
            recognizing = true;
        };
        recognition.onresult = function(event) {
            for (var i = event.resultIndex; i < event.results.length; ++i) {
                final_transcript.value += event.results[i][0].transcript;
            }
        };
    
                     

    WebGL

    <canvas id="canvas3d" width="800" height="560"> Votre navigateur ne semble pas prendre en charge l'élément canvas. </canvas>
    function initWebGL(canvas) { try { // Acquérir le context 3D de canvas ou la version expérimentale gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl"); } catch(e) { console.log("Impossible d'acquérir le contexte canvas 3D"); } }

    WebGL

    Buffers
    Des mémoires tampon contiennent l'information sur les objets à dessiner
    Shaders (OpenGL ES Shading Language)
    Langage servant à donner des instructions de rendu à la carte graphique (éclairage, couleurs, etc). Fragment Shader : chaque pixel est un fragment. Vertex Shader : défini la position d'un vecteur.
    Sylverter.js
    Librairie JavaScript simplifiant les calculs avec matrice.
    Tutorials
    Tutorial WebGL chez Mozilla
    Learning WebGL
    SceneJS
    Moteur 3D open source API basé sur JSON et WebGL

    Appliquer les buffers et shaders sur le contexte 3D WebGL, faire les divers calculs et gérer les évènements en Javascript

    Exemples

    Exemples basés sur https://developer.mozilla.org/en/WebGL/Getting_started_with_WebGL

    Fullscreen API

    Fullscreen API

    
    
        document.getElementById('fullscreen').addEventListener('click', function() {
            if (movie.requestFullscreen) {
                movie.requestFullscreen();
            } else if (movie.mozRequestFullScreen) {
                movie.mozRequestFullScreen();
            } else if (movie.webkitRequestFullscreen) {
                movie.webkitRequestFullscreen();
            }
        }, false);
    
                     

    Sous-titres pour les vidéos

    
    <video id="monVideo" width="320" loop controls poster="videos/bigbuckbunny.png"
                         preload="none">
    <track kind="subtitles" label="Sous-titres québécois"
                         src="subtitles_fr.vtt" srclang="fr" default></track>
    <video>
                          
    Élément track
    
    WEBVTT FILE
    
    text1
    00:00:05.000 --> 00:00:12.500
    Texte en français sous-titre
    
    text2
    00:00:13.200 --> 00:00:25.900
    Texte en français sous-titre 2
                     
    Fichier WebVTT

    L'API Web Audio ?

    Exemples

    Les base de l'API Web Audio ?

    function getAudioContext() { var context = null; if (!Modernizr.webaudio) { console.log("Votre navigateur ne prends pas en charge l'API WebAudio"); } if (!!window.AudioContext) { context = new AudioContext(); } else { if (!!window.webkitAudioContext) { context = new webkiAudioContext(); } } return context; }
    Création d'un contexte audio

    Source, noeuds et destination

    Comment fonctionne un synthétiseur analogique ?

    Synthé modulaire analogique
    Source : Wikipedia

    Exemple : construisons un Theremin en HTML!

    Lien vers l'exemple

    Theremin
    Source : Wikipedia

    Activer les fonctionalités expérimentales dans les navigateurs

    Merci !!