Présentation de HTML5

Dimension: px

Commencer à balayer dès la page:

Download "Présentation de HTML5"

Claude Lortie
il y a 8 ans
Total affichages :

1 Présentation de HTML5 Option Web Multimédia Polytech Paris-Sud cycle préparatoire 2e année Claude Barras Université Paris-Sud & LIMSI-CNRS 22 septembre 2014

année Claude Barras (claude.barras@u-psud.

2 Introduction HTML5 remplace HTML4 (recommendation W3C en 1997) XHTML1 (sérialisation XML de HTML) le DOM associé Objectifs compatibilité ascendante séparation navigation web/génération de code syntaxe simplifiée (abandonne la DTD héritée de SGML) Etat en cours d élaboration, implémentation progressive dans les navigateurs groupe de travail "autonome" du W3C 2/22

de code syntaxe simplifiée (abandonne la DTD héritée de SGML) Etat en cours d élaboration,

3 Exemple de HTML5 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>...</title> </head> <body>... </body> </html> 3/22

4 Modifications Nouvelles balises et attributs structuration sémantique formulaires améliorés graphique et multimedia inclusion de SVG et MathML CSS3 formatage, typographie, gestion des polices de caractères améliorés texte multi-colonnes affichage multimédia, animations JavaScript et DOM étendus 4/22

CSS3 formatage, typographie, gestion des polices de caractères améliorés

5 Structuration sémantique Nouvelles balises et attributs (au lieu de <div class="...">) <section> : bloc de contenu <article> <aside> : encart <header> : entête de la section <footer> : pied de page <nav> : menu <figure> : associe contenu et légende Suppression d éléments obsolètes éléments et attributs de présentation (utiliser CSS à la place): <big>, <center>, <font>, <s>, <tt>, <u> frames (obstacles à l accessibilité) 5/22

pied de page <nav> : menu <figure> : associe contenu et légende Suppression d éléments obsolètes éléments

6 Formulaires Amélioration des formulaires (Web Forms 2.0) nouveaux types d éléments de dialogue: , url, number, slider, color, date (date, month, week, time...), search texte d invitation (placeholder) autofocus dans un champ particulier validation automatique Exemple <input type="number" min="0" max="12" step="4" value="8"> le rendu dépendra du navigateur 6/22

7 JavaScript et DOM Nouvelles API en JavaScript dessin 2D dans l élément canvas contrôle multimédia stockage persistant (clé/valeur ou base de données SQL) applications offline peer2peer (WebSockets) édition avancée, drag & drop... DOM: getelementsbyclassname(), innerhtml 7/22

ou base de données SQL) applications offline peer2peer (WebSockets)

8 Stockage persistant Objets pour le stockage : tableaux associatifs sessionstorage : limité à la session localstorage : sans limitation de durée Exemple <script> if (localstorage) localstorage["name"]="john"; </script>} Limitations enregistre uniquement des chaînes de caractères on peut utiliser JSON pour des sérialiser (=convertir en chaîne de caractères) des objets complexes l accès aux données est contrôlé par l URI du serveur (sécurité) fonctionnement en local pas garanti 8/22

enregistre uniquement des chaînes de caractères on peut utiliser JSON pour des sérialiser (=convertir en chaîne de

9 Extensions multimédia Formats supportés dépendant du navigateur et aussi de la plate-forme pour l audio: MP3 et AAC (IE, ios), Vorbis (Firefox et Chrome), Wav (pas IE) pas de consensus pour un codec vidéo de base pour des raisons de licence MPEG4 avec video H.264 et audio AAC: Safari/iOS, IE Theora (dérivé du codec VP3 de On2): Chrome, Firefox, Opera WebM avec codec video VP8 et audio Vorbis: idem Possibilité de fournir le media dans plusieurs formats container: type=mp4, 3gpp, ogg... codec: h264, mpeg-4, theora... 9/22

H.264 et audio AAC: Safari/iOS, IE Theora (dérivé du codec VP3 de On2): Chrome, Firefox, Opera WebM avec codec video VP8 et audio

10 Eléments multimédia Elément <video> code HTML: <video id="vid" src="sample.mov"/> contrôle JavaScript: vid=document.getelementbyid("vid"); if (vid.paused) vid.play(); else vid.pause(); Elément <audio> code HTML: <audio src="sample.wav"> JavaScript: a = new Audio("sample.wav"); a.addeventlistener("ended", msgfin(), false); a.play(); 10/22

play(); else vid.pause(); Elément <audio> code HTML: <audio src="sample.

11 Attributs multimédia Attributs des éléments <audio> et <video> src: adresse de la ressource multimédia (URL) autoplay: commence la lecture dès que possible autobuffer: chargement du média probable (booléen) loop: lecture en boucle (booléen) controls: affichage de contrôles par le navigateur si false Attributs spécifiques des éléments <video> poster: image représentative de la vidéo width/height: dimensions d affichage souhaitées (pixels CSS) 11/22

en boucle (booléen) controls: affichage de contrôles par le navigateur si false Attributs spécifiques des

12 DOM multimédia Propriétés DOM état a.paused/a.ended a.play()/a.pause() a.playbackrate[=value]: 1.0 vitesse normale position dans l audio ou la vidéo a.duration (en secondes) a.currenttime[=value] (secondes) contrôles a.volume[=value] entre 0.0 et 1.0 a.muted[=value] (booléen) événements playing, ended, play, pause, waiting... 12/22

duration (en secondes) a.currenttime[=value] (secondes) contrôles a.

13 Canvas Principes l élément <canvas> définit un espace de dessin attributs: height/weight (pixels CSS) dessin bitmap (à la différence du format vectoriel XML SVG) le tracé se fait en JavaScript par l intermédiaire d un contexte de dessin Contexte graphique en standard, permet le dessin en 2D espace cartésien (0,0) = coin supérieur gauche extension au 3D basée sur OpenGL (WebGL) 13/22

par l intermédiaire d un contexte de dessin Contexte graphique en standard, permet le dessin en

14 Canvas - exemple HTML <canvas width="500" height="300" id="cnv1"> </canvas> JavaScript window.onload = function() { } var canvas = document.getelementbyid( cnv1 ); // on peut verifier ici la compatibilite du navigateur var context = canvas.getcontext( 2d ); // idem 14/22

15 Canvas - configuration Etat du contexte graphique c matrice de transformation courante clipping region (limite le tracé) attributs courants de dessin (couleur de trait et de remplissage, police, transparence...) conserve un état graphique: c.save()/c.restore() Transformations facteur d échelle: c.scale(x,y) rotation: c.rotate(r) translation: c.translate(x,y) matrice de transformation: c.transform(m11,m12,m21,m22,dx,dy) 15/22

..) conserve un état graphique: c.save()/c.restore() Transformations facteur d échelle: c.

16 Canvas - configuration et utilisation Couleur et style style de tracé : c.strokestyle[=value] style de remplissage : c.fillstyle[=value] valeur: couleur, gradient, pattern, ombrages... valeur RGB : "#80FF00" nom standard : "black", "cyan", "orange"... pour les lignes: c.linewidth, c.linecap... Formes rectangles: c.clearrect(x,y,w,h), c.fillrect(...), c.strokerect(...) formes plus complexes (arcs...): path Texte police, alignement... c.filltext(string, x, y) 16/22

.. valeur RGB : "#80FF00" nom standard : "black", "cyan", "orange"... pour les lignes: c.linewidth, c.linecap.

17 Canvas - exemple de tracé var canvas = document.getelementbyid( cnv1 ); var c2d = canvas.getcontext( 2d ); // rectangle vert plein c2d.fillstyle = "green"; c2d.fillrect(10, 10, 20, 40); // rectangle rouge vide c2d.strokestyle = "red"; c2d.linewidth = 3; c2d.strokerect(100, 100, 30, 30); // on efface tout alert( on va effacer ); c2d.clearrect(0, 0, canvas.width, canvas.height); 17/22

fillrect(10, 10, 20, 40); // rectangle rouge vide c2d.strokestyle = "red"; c2d.

18 Canvas - affichage d une image drawimage(image, x, y) affichage de l image à la position (x,y) possibilité d extraire une partie de l image source (paramètres supplémentaires) attention, le chargement d une image n est pas immédiat Exemple var img = new Image(); img.src = "balle.png"; img.onload = function() { c.drawimage(img, 10, 20); } 18/22

supplémentaires) attention, le chargement d une image n est pas immédiat Exemple var

19 Canvas - exemple de préchargement d image HTML <img id="im1" src="logo.jpg" style="visibility:hidden"> <canvas id="can" width="300" height="200"></canvas> JavaScript window.onload = function() { var canvas = document.getelementbyid( can ); var c2d = canvas.getcontext( 2d ); } i = document.getelementbyid( im1 ); c2d.drawimage(i, 50, 50); 19/22

JavaScript window.onload = function() { var canvas = document.

20 Canvas - manipulation du bitmap Exemple img = c.getimagedata(x,y,width,height); pix = img.data; for (i = 0; i < pix.length; i+=4) { pix[i] =... // red (0-255); pix[i+1] =... // green; pix[i+2] =... // blue; pix[i+3] =... // alpha; } c.putimagedata(img,x,y); NB: Limitation à l accès des fichiers locaux sous Firefox Variables de configuration: ouvrir la pseudo-url about:config security.fileuri.strict_origin_policy à false 20/22

.. // blue; pix[i+3] =... // alpha; } c.

21 Faire une animation Ce qui ne marche pas while (true) { // lecture du clavier // déplace les éléments // dessine l image // pause 20ms }...l affichage n est jamais mis à jour Ce qui marche programmer un timer à appels par seconde pour afficher une animation la fonction appelée re-dessine complètement la scène si besoin, enregistrer les événements clavier à part 21/22

22 Mise en pratique Pong Gérer la trajectoire d une balle qui rebondit sur les murs suivre le tutoriel sur la balise <canvas> du site du zéro la-balise-canvas-avec-javascript Afficher un pingouin et contrôler son déplacement au clavier les images sont données sur le site Associer les deux éléments dans un jeu de tennis (pong) la balle rebondit sur la tête du pingouin Autres liens Dive into HTML /22

Documents pareils

Formation : WEbMaster

Formation : WEbMaster Objectif et Description : Centre Eclipse vous propose une formation complète WebMaster, vous permettant de : Utiliser dès maintenant les nouveautés du web2, ainsi alléger les besoins