fletch1's picture
From fletch1 rss RSS  subscribe Subscribe

HTML5 

HTML5

 

 
 
Tags:  html5  cours 
Views:  101
Published:  November 03, 2011
 
0
download

Share plick with friends Share
save to favorite
Report Abuse Report Abuse
 
Related Plicks
No related plicks found
 
More from this user
Computers without Hard Drives – Flash Makes It Possible

Computers without Hard Drives – Flash Makes It Possible

From: fletch1
Views: 121
Comments: 0

Buy order purchase betaxolol hydrochloride online cheap discount without prescription

Buy order purchase betaxolol hydrochloride online cheap discount without prescription

From: fletch1
Views: 16
Comments: 0

Language   Book 2

Language Book 2

From: fletch1
Views: 173
Comments: 0

The Power of Promotional Products

The Power of Promotional Products

From: fletch1
Views: 350
Comments: 0

P Eor

P Eor

From: fletch1
Views: 19
Comments: 0

 
See all 
 
 
 URL:          AddThis Social Bookmark Button
Embed Thin Player: (fits in most blogs)
Embed Full Player :
 
 

Name

Email (will NOT be shown to other users)

 

 
 
Comments: (watch)
 
 
Notes:
 
Slide 1: HTML5
Slide 2: Pourquoi HTML5 ? • Depuis 1999, les usages ont changés • Applications web • Sémantiser
Slide 3: Pour quoi HTML5 ? • Structurer un document • Créer des applications web • Préparer l’avenir
Slide 4: Une nouvelle orientation • Standardiser l’existant • Spécification claire, dirigiste • Repenser le contenu
Slide 5: Une nouvelle orientation Text Flow Bodytext
Slide 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">
Slide 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>
Slide 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
Slide 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>
Slide 10: <nav> permettant de naviguer • Sectionsite, dans la page, etc.) (dans le <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>
Slide 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…
Slide 12: <aside> • Ce n’est pas une sidebar ! • Section de contenu tangentiellement relié au contenu l’entourant (?) • Équivalent d’un encart en typographie
Slide 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>
Slide 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>
Slide 15: <canvas> • Dessiner du bitmap avec Javascript • APIs 2D et 3D Raycasting (dev.opera) Visualisation with processing.js
Slide 16: <audio>/<video> • Insérer des éléments multimédia facilement • Éviter d’avoir à utiliser un plugin • Accessibilité, performance
Slide 17: Et d’autres… <bdi>, <command>, <datalist>, <details>, <dialog>, <embed>, <figcaption>, <figure>, <keygen>, <mark>, <meter>, <output>, <progress>, <ruby>, <rp>, <rt>, <source>, <track>, <wbr>
Slide 18: Nouveaux attributs • • • data-* : Attributs personnalisés draggable : Indique que le contenu est déplaçable role, aria-* : Accessibilité • Et d’autres…
Slide 19: Balises dépréciées • Présentation : <basefont>, <big>, <center>, <font>, <strike>, <tt>, <u> <frameset>, <noframes> • Mauvaise utilisabilité/accessibilité : <frame>, • Prêtant à confusion, inutile : <acronym>, <applet>, <isindex>, <dir> • <noscript> (uniquement en XHTML5)
Slide 20: Attributs dépréciés http://dev.w3.org/html5/html4-differences/#absent-attributes (Essentiellement des attributs à but présentationnels)
Slide 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
Slide 22: Attributs redéfinis http://dev.w3.org/html5/html4-differences/#changed-attributes
Slide 23: Web Forms 2.0 Nouveaux type d’<input> : • datetime, datetime-local, date, time, month, week • number, range • email • url • search • tel • color
Slide 24: Web Forms 2.0 Nouveaux attributs pour les éléments de formulaires : • autofocus • placeholder • required • autocomplete, min, max, pattern, step
Slide 25: Quand l’utiliser ? • Tout de suite • Pour des projets non-critiques • Si vous pouvez mettre l’accessibilité de côté
Slide 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>)
Slide 27: A vocabulary and associated APIs for HTML and XHTML
Slide 28: API ? Application Programming Interface Ensemble de fonctions mises à disposition
Slide 29: Vérifier les contraintes des champs <form> <input type="number" value="coucou" /> <input type="email" value="me@neovov.com" /> </form> Web Forms 2.0 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
Slide 30: Vérifier les contraintes des champs <form> <input type="number" value="1" /> <input type="email" value="me@neovov.com" /> </form> Web Forms 2.0 var form = document.getElementsByTagName("form")[0], input = document.getElementsByTagName("input"); input[0].checkValidity(); // true input[1].checkValidity(); // true form.checkValidity(); // true
Slide 31: Selector API $("#news article:nth-child(2n+1)") = $$("#news article:nth-child(2n+1)") = document.querySelectorAll("#news article:nth-child(2n+1)")
Slide 32: Selector API Récupérer des éléments • • querySelector() => Element || null querySelectorAll() => NodeList
Slide 33: Selector API feature detection !!document.querySelector var $ = document.querySelectorAll || (function(selector) { // Code bien lourd (ou sizzle) });
Slide 34: Canvas Dessiner du bitmap Excellent tutorial
Slide 35: Canvas feature detection !!document.createElement("canvas").getContext
Slide 36: WebGL Dessiner du bitmap dans un contexte 3D
Slide 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; }();
Slide 38: Manipuler des éléments multimédia Media API • • • • • play() • pause() • canPlayType() controls paused volume currentTime • error • networkState
Slide 39: Jouons avec <video> <object width="720" height="404" type="application/xshockwave-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>
Slide 40: Quel format ? • Firefox et Opéra : Theora (OGG) • Safari : H.264 • Le petit qui s’incruste :VP8 (WebM) (Chrome, Firefox, Opera, IE)
Slide 41: Quels outils d’encodage ? • Pour Theora : Extension Firefogg, ffmpeg2theora (pour les courageux) • Pour H.264 : HandBrake, autres… • Pour WebM : ffmpeg
Slide 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/xshockwave-flash" data="player.swf?file=video.mp4"> <param name="movie" value="player.swf?file=video.mp4" /> </object> </video>
Slide 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>
Slide 44: Media API feature detection !!document.createElement("video").canPlayType
Slide 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;
Slide 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;
Slide 47: Media API feature detection !!document.createElement("audio").canPlayType
Slide 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;
Slide 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;
Slide 50: (Media Capture API)
Slide 51: Offline API Mettre en cache • Cache Manifest • Base de donnée SQL (!)
Slide 52: Vérifier la connectivité navigator.onLine window.addEventListener( "online", function() { console.log("ONLINE"); }, false ); window.addEventListener( "offline", function() { console.log("OFFLINE"); }, false ); Offline API
Slide 53: Offline API feature detection !!window.applicationCache
Slide 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)
Slide 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
Slide 56: Web Storage feature detection try { return ('sessionStorage' in window) && window.localStorage !== null; } catch(e) { return false; }
Slide 57: Web SQL Database Web Storage sous stéroïdes SQL ! • openDatabase() • transaction() • executeSQL()
Slide 58: WebSocket API Ouvrir une connexion TCP TCP ! Temps réel !!!
Slide 59: Déplacer des éléments, déposer des fichiers Drag’n’drop • Navigateur → OS • OS → Navigateur • Éléments de la page • UndoManager
Slide 60: File API • Accéder aux fichiers, les lire • Uploader plusieurs fichiers Excellent tutorial
Slide 61: Web Workers Externaliser les traitements lourds
Slide 62: Web Workers feature detection !!window.Worker
Slide 63: Geolocation API Géolocaliser l’utilisateur • getCurrentPosition() • watchPosition() • clearWatch()
Slide 64: Geolocation API feature detection !!navigator.geolocation
Slide 65: Et d’autres !
Slide 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
Slide 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-andpointers.html • HTML5 Doctor http://html5doctor.com • HTML5 Gallery http://html5gallery.com (mais attention …)
Slide 68: Autres ressources • html5shiv http://code.google.com/p/html5shiv/ • When can I use… http://caniuse.com • HTML5 & CSS3 Support http://findmebyip.com/litmus
Slide 69: Contact Nicolas Le Gall me@neovov.com

   
Time on Slide Time on Plick
Slides per Visit Slide Views Views by Location