Actualités en HTML5 : Des nouvelles de la guerre des standards, version 2015
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 6 ans que c'est nouveau !!

W3C

  • HTML5 est une recommandation depuis 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 par Sergey Mavrody

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) - va mourrir de sa belle mort
  • Project Spartan : (fork de Trident, sera disponible avec Windows 10)
  • 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

Nouveau types input pour les dates

  • <input type="datetime">
  • <input type="datetime-local">
  • <input type="month">
  • <input type="week">
  • <input type="file" accept="image/*;capture=camera">
  • <input type="file" accept="video/*;capture=camcorder">
  • <input type="file" accept="audio/*;capture=microphone">
  • L'événement invalid est lancé lorsque la validation d'un formulaire est infructueuse en plus de ceux de ses champs
  • L'attribut spellcheck pour spécifier si l'élément doit être validé pour l'orthographe (pour contenteditable et les formulaires)

Images "responsives" : les éléments picture et source


            <picture>
                <source
                    media="(min-width: 800px)"
                    srcset="img/zei-normal.png">
                <source
                    media="(min-width: 600px)"
                    srcset="img/zei-surprised.png">
                <source
                    media="(min-width: 400px)"
                    srcset="img/zei-sad.png">
                <img
                    src="img/zei-normal.png"
                    alt="Zei, copyright Gabrielle Piette">
            </picture>
                    
Exemple de l'élément picture avec Zei (copyright Gabrielle Piette)

Images "responsives" : les éléments picture et source (exemple)

  • L'image de Zei change lorsque l'écran devient plus petit (Zei devient surpris et puis triste)
Zei, copyright Gabrielle Piette
Exemple de l'élément picture, avec Zei, créé par Gabrielle Piette (copyright Gabrielle Piette 2014)

Images "responsives" : l'attribut srcset (suite)


            <picture>
                <source
                    media="(min-width: 800px)"
                    srcset="img/zei-normal.png,
                          img/zei-normal-blink.png 2x">
                <source
                    media="(min-width: 600px)"
                    srcset="img/zei-surprised.png,
                          img/zei-surprised-blink 2x">
                <img
                    src="img/zei-normal.png"
                    srcset="img/zei-normal.png,
                                 img/zei-normal-blink.png 2x">
                    alt="Zei, copyright Gabrielle Piette">
            </picture>
                

Images "responsives" : l'attribut srcset (suite)

  • Zei aura les yeux fermé sur les écrans de type "retina"
Zei, copyright Gabrielle Piette
Exemple de l'élément picture, avec Zei, créé par Gabrielle Piette (copyright Gabrielle Piette 2014)

Images "responsives" : l'attribut type (suite)


            <picture>
                 <source
                     type="image/webp"
                     srcset="img/zei-normal.webm">
                 <img
                     src="img/zei-normal.png"
                     alt="Zei, copyright Gabrielle Piette">
            </picture>
                

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

Web Components

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

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

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

meta name referrer


         <meta name="referrer" value="no-referrer-when-downgrade">
                             
Exemple meta name referrer

Nouveautés CSS

CSS Multicolonnes

  • Sur un élément à l'intérieur duquel nous avons des éléments inline (texte)
  • Nombre de colonnes column-count:2
  • Largeur des colonnes column-width:20em
  • Espaces entres colonnes column-gap:2em
  • Ensemble columns:4 20em (maximum de colonnes et minimum de largeur)
  • Utiliser avec height et max-height pour retrouver l'effet recherché.

CSS Multicolonnes

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 !"

CSS Multicolonnes


                      .test-column {
                          columns:4 10em;
                          -webkit-columns:4 10em;
                          -moz-columns:4 10em;
                          -webkit-column-gap: 2em;
                          -moz-column-gap: 2em;
                          column-gap: 2em;
                          -webkit-column-rule: 1px dotted #F00;
                          -moz-column-rule: 1px dotted #F00;
                          column-rule: 1px dotted #F00;
                      }

                  
Exemple CSS Multicolonnes

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: sticky;
  top: 15px;
}

                    
Exemple CSS position:sticky

CSS scroll-behavior

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 !"

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 !"


                               .scroll-for {
                                 width: 100px;
                                 height: 100px;
                                 overflow-y: scroll;
                                 display:inline-block;
                               }

                               .auto {
                                 scroll-behavior: auto;
                               }

                               .smooth {
                                 scroll-behavior: smooth;
                               }

                           
Exemple CSS scroll-behavior

Variables CSS

TEST DE BACKGROUND

TEST DE BACKGROUND


                  <style>
                  body {
                    --ma-couleur-preferee: brown
                  }
                  .prefere {
                      background-color: var(--ma-couleur-preferee);
                  }
                  .plusprefere {
                      --ma-couleur-preferee: green
                  }
                  </style>
                  <div class="prefere">
                    <p>TEST DE BACKGROUND</p>
                    <div class="plusprefere prefere">
                        <p>TEST DE BACKGROUND</p>
                    </div>
                  </div>
              
Exemple Variables CSS

CSS Shapes

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 ? " À 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 !"

CSS Shapes


                .left {
                    shape-outside: circle();
                    float:left;
                    width:20%;
                    height:40%
                }
                .right {
                    shape-outside: circle();
                    float:right;
                    width:20%;
                    height:60%
                }

             
Exemple de Shapes 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 - Promises


        var aPromise = new Promise(function(resolve, reject) {
        // opérations asynchrones
             resolve("résultats");
        // erreur
             reject(Error("Erreur"));
        });

        aPromise().then(callBackResolve, callBackReject);

                    
Exemples Promises Javascript

EcmaScript 6 - Gabarit chaînes de caractères

EcmaScript 7 - Object.observe


     // Source :  http://www.html5rocks.com/fr/tutorials/es7/observe/
     // Disons qu’on a un modèle avec des données
     var model = {};

     // Observons-le à présent
     Object.observe(model, function(changes){

       // Ce callback asynchrone est exécuté et agrège les modifications
       changes.forEach(function(change) {

           // Ça nous permet de savoir ce qui s’est passé
           console.log(change.type, change.name, change.oldValue);
       });

     });

                    

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 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

Web Animation API


                var player =  characterPosition.animate(
                        [
                            {opacity: 0, transform: "translateX(-100%)"},
                            {opacity: 1, transform: "translateX(0%)"}
                        ],
                        {
                            duration: 1000,
                            iterations: 1,
                            delay: 0
                        });
                player.onfinish =  visualNovel.nextStep;

                    

Web Animation API


                        function pause()
                        {
                            player.pause();
                        }

                        function play()
                        {
                            player.play();
                        }

                        function stop()
                        {
                            player.cancel();
                        }

                    

API Gamepad

API Gamepad


window.addEventListener("gamepadconnected", function(e) {
  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);
}
                 

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

Autres APIs

Element.matches

Encoding API


                    // Encodage de chaînes de catactères UTF-8
                    var encoder = new TextEncoder("utf-8");
                    // encode en arraybuffer de int8
                    var encodedText = encoder.encode("Bonjour le monde ééé");
                    // Décode en chaînes de catactères iso-8859-1
                    var decoder = new TextDecoder("iso-8859-1");
                    var decodedText = decoder.decode(encodedText);
                
Texte en UTF-8
Bonjour le monde ééé
Texte encodé puis décodé en ISO-8859-1

Web Crypto API


                    var crypto = window.crypto || window.msCrypto;
                

Web Crypto API - Exemple Hash SHA-1



                function hashe() {
                    var encoder = new TextEncoder("utf-8");
                    // encode en arraybuffer de int8
                    var encodedText = encoder.encode(document.getElementById("el1").value);

                    window.crypto.subtle.digest(
                        {
                            name: "SHA-1"
                        }, encodedText

                    ).then(function(hash){
                        var encodedHash = new Uint8Array(hash);
                        var decoder = new TextDecoder("utf-8");
                        var decodedText = decoder.decode(encodedHash);
                        document.getElementById("hashed").innerHTML =  decodedText;

                    }).catch(function(err){
                        console.error(err);
                    });
                }
                

HTTP 2

Activer les fonctionalités expérimentales dans les navigateurs

Merci !!