Travailler en HTML5!!!

Le Remix - Unlimited

HTML5 - Le logo

Commençons à travailler en HTML5 - Addenda: Table des matières

  1. Liste de librairies et outils pour gérer les vidéos
  2. WebIDL
  3. Un peu plus avec WAI-ARIA
  4. Attribut hidden
  5. L'élément <datalist>
  6. L'élément <output>
  7. API messagerie entre fenêtres
  8. API historique du navigateur

Liste de librairies et outils pour gérer les vidéos

Source : http://www.templates.com/blog/10-html5-video-players/

WebIDL


interface HTMLMediaElement : HTMLElement {

  // error state
  readonly attribute MediaError error;

  // network state
           attribute DOMString src;
  readonly attribute DOMString currentSrc;
  const unsigned short NETWORK_EMPTY = 0;
  const unsigned short NETWORK_IDLE = 1;
  const unsigned short NETWORK_LOADING = 2;
  const unsigned short NETWORK_NO_SOURCE = 3;
  readonly attribute unsigned short networkState;
           attribute DOMString preload;
  readonly attribute TimeRanges buffered;
  void load();
  DOMString canPlayType(in DOMString type);

  // ready state
  const unsigned short HAVE_NOTHING = 0;
  const unsigned short HAVE_METADATA = 1;
  const unsigned short HAVE_CURRENT_DATA = 2;
  const unsigned short HAVE_FUTURE_DATA = 3;
  const unsigned short HAVE_ENOUGH_DATA = 4;
  readonly attribute unsigned short readyState;
  readonly attribute boolean seeking;

  // playback state
           attribute double currentTime;
  readonly attribute double initialTime;
  readonly attribute double duration;
  readonly attribute Date startOffsetTime;
  readonly attribute boolean paused;
           attribute double defaultPlaybackRate;
           attribute double playbackRate;
  readonly attribute TimeRanges played;
  readonly attribute TimeRanges seekable;
  readonly attribute boolean ended;
           attribute boolean autoplay;
           attribute boolean loop;
  void play();
  void pause();

  // controls
           attribute boolean controls;
           attribute double volume;
           attribute boolean muted;

  // text tracks
  readonly attribute TextTrack[] tracks;
  MutableTextTrack addTrack(in DOMString kind, in optional DOMString label, in optional DOMString language);

};

http://www.whatwg.org/specs/web-apps/current-work/multipage/video.html

Un peu plus avec WAI-ARIA

Quelques exemples :

Élément HTML Rôle équivalent ARIA Description du rôle (si pas déjà défini) Peut prendre d'autre valeurs ?
a link Lien Oui ? (Il y a plusieurs débats, button ?)
article article Contenu automone, réutilisable, indépendant ?
aside complementary Contenu additinel relié au contenu principal, qui peut exister par lui-même Non
section region Section de contenu structuré Oui (ex: main)
ul list Liste ?
output status Élément de suivi Non

Attribut hidden

L'élément <datalist>


  <label for="pays">Choisissez votre pays</label>
  <input list="pays" name="pays">
  <datalist id="pays">
    <option value="Canada"></option>
    <option value="États-Unis"></option>
    <option value="France"></option>
  </datalist>

L'élément <output>





        <script>
            function concat() {
                document.getElementById("concatenation").value = document.getElementById("el1").value + document.getElementById("el2").value
            }
        </script>
        <form id="outputExemple">
            <label for="el1">Premier élément</label>
            <input type="text" id="el1">
            <label for="el2">Deuxième élément</label>
            <input type="text" id="el2">
            <input type="submit" value="Calcule" onclick="concat();return false">
            <label for="concatenation">Concaténation :</label>
            <output id="concatenation" form="outputExemple" ></output>
        </form>

API messagerie entre fenêtres

Dans la fenêtre appelante : 


        window.name ="Moi";
        function postMessageTest() {
            var value = document.getElementById("messageAPoster").value;
            var iframeWindow = document.getElementById("iframeToPostTo").contentWindow;
            iframeWindow.postMessage(value, "http://localhost");
        }

Dans la fenêtre appelée : 


        window.addEventListener("message", function(event) {
              var divInfo = document.getElementById("test");
              divInfo.hidden = false;
              divInfo.innerHTML = '<dl><dt>Data :</dt><dd id="thedata"></dd>' +
                                      '<dt>Origin :</dt><dd> ' + event.origin + '</dd>' +
                                      '<dt>Source : </dt><dd>' + event.source.name + '</dd></dl>';
              var ddInfo = document.getElementById("thedata");
              ddInfo.textContent = event.data;
        }, false);

API messagerie entre fenêtres (exemple)

API historique du navigateur

L'objectif est de pouvoir ajouter des éléments dans l'historique du navigateur pour respecter un identifiant unique (URL) par représentation (ressource) qui pourraient être modifié par l'addresse ou en AJAX.

L'outil actuel de présentation pourrait utiliser un code semblable pour gérer le changement des diapos:



        history.pushState(currentPage, document.title, '#page=' + currentPage);

        window.addEventListener("popstate", function(event) {
           // remettre le document comme il était avec l'information dans event.state (qui est le numéro de la page)
        }, false);

Un peu plus avec Canvas

Un peu plus avec Canvas (2)



    if (Modernizr.canvas) {
        var canvasCtx = document.getElementById("myCanvas").getContext("2d");
        canvasCtx.save();
        canvasCtx.fillStyle = "rgb(0,100,0)";
        canvasCtx.translate(150, 25);
        canvasCtx.rotate(45 * Math.PI / 180);
        canvasCtx.fillRect(0,0,50,50);
        canvasCtx.restore();
        canvasCtx.fillStyle = "rgba(100,0,0, 0.5)";
        canvasCtx.translate(125, 0);
        canvasCtx.scale(0.75, 1);
        canvasCtx.fillRect(0,0,50,50);
        canvasCtx.save();
    }

Un peu plus avec Canvas (3)

Un peu plus avec Canvas (4)



    if (Modernizr.canvas) {
        var canvasCtx = document.getElementById("myCanvas3").getContext("2d");
        canvasCtx.fillStyle = "rgb(0,100,0)";
        canvasCtx.strokeStyle = "rgb(0,0,100)";
        canvasCtx.beginPath();
        canvasCtx.moveTo(150, 25);
        canvasCtx.lineTo(200, 0);
        canvasCtx.lineTo(250, 20);
        canvasCtx.stroke();
        canvasCtx.beginPath();
        canvasCtx.moveTo(100, 25);
        canvasCtx.lineTo(100, 100);
        canvasCtx.lineTo(50, 100);
        canvasCtx.fill();
        canvasCtx.beginPath();
        canvasCtx.arc(250,10,75, 0, 90/180*Math.PI, false);
        canvasCtx.fill();
        canvasCtx.beginPath();
        canvasCtx.moveTo(350, 25);
        canvasCtx.quadraticCurveTo(370, 5, 450, 100);
        canvasCtx.bezierCurveTo(370, 150, 110, 110, 250, 160);
        canvasCtx.stroke();
    }

Un peu plus avec Canvas (5)

Un peu plus avec Canvas (6)


    var imageForCanvas = new Image();
    imageForCanvas.src = "images/HTML5_Badge_128.png";
    imageForCanvas.onload = function() {
        if (Modernizr.canvas) {
            var canvasCtx = document.getElementById("myCanvas5").getContext("2d");
            canvasCtx.beginPath();
            canvasCtx.arc(60,60,60,0,Math.PI*2,true);
            canvasCtx.clip();
            canvasCtx.drawImage(imageForCanvas, 10,10);
            canvasCtx.font = "normal 14px sans-serif";
            canvasCtx.fillStyle = "black";
            canvasCtx.fillText("DU TEXTE", 60, 60);
        }
    };

XMLHTTPRequest 2

WebSocket et NodeJS

WebGL

Extension Microsoft : Pinned Sites

Extension Firefox : Audio API

Détection avec Modernizr

D'autres ressources