Le HTML5 & les API
-
Upload
willy-leloutre -
Category
Technology
-
view
933 -
download
5
description
Transcript of Le HTML5 & les API
& les API
willy leloutre - @wleloutresamedi 28 septembre 13
Préambule
• Le HTML5, c’est quoi ?
• Le saviez-vous ?
• Les nouveaux balisages
• Le HTML5 & les API
samedi 28 septembre 13
• HTML depuis 1989, par Tim Berners-Lee
1989 - 20xx
• HTML 2.0 en 1995
• HTML 3.2 et 4.0 en 1997
• D'après [email protected] HTML5 en tant que Recommandation fin 2014... 8 ans après XHTML
• XHTML de 2000 à 2006
samedi 28 septembre 13
Le HTML5 c’est quoi ?
samedi 28 septembre 13
Le HTML5 c’est historiquement un dérivé de
SGML !
samedi 28 septembre 13
Le HTML5 c’est plus permissif, ...Plus de balise auto-fermante, certaines balises fermantes sont optionnelles (html, head, body, li, …), plus de typage des scripts & css, intégration du caractères spéciaux en
utf-8 dans les attributs « id »
samedi 28 septembre 13
Le HTML5 c’est aussiune version sérialisée XMLLe XHTML5, très contraignant, toute erreur est
bloquante, et, comment dire, ... le content-type n'est pas compatible sous IE !
#pasdetrollmerci
samedi 28 septembre 13
Le HTML5 c’est ...
Tout ce que l'on veut bien regrouper sous ce terme, par facilité, raccourci ou marketing : CSS3, JavaScript, SVG,
XMLHttpRequest, JSON etc.
samedi 28 septembre 13
Le HTML5, c’est surtout tendance !
samedi 28 septembre 13
HTML5 POWER !
samedi 28 septembre 13
http://www.w3.org/html/logo/
samedi 28 septembre 13
Des icones pour chaques fonctionnalités.
samedi 28 septembre 13
Le saviez-vous ?
samedi 28 septembre 13
La sémantique par les <div>
La <div> n'a pas de valeure sémantique, mais peut servir à structurer du contenu dans un <article>
samedi 28 septembre 13
La sidebar avec <aside>
Un <aside> n'est pas forcément une sidebar ! C'est un contenu annexe, non requis pour comprendre
le contenu principal.
samedi 28 septembre 13
<a href=...> <h2>...</h2> <p>...</p></a>
Les liens <a> peuvent maintenant contenir des blocs.
samedi 28 septembre 13
<b> / <i> vs <strong> / <em>
<b> et <i> n'ont pas de valeur sémantique contrairement à <strong> et <em>
samedi 28 septembre 13
<hr class="clearfix">
<hr> Est un séparateur de sujet au sein d'un contenu, ça ne sert pas uniquement à réaliser vos clearfix !
samedi 28 septembre 13
Le double slash //Le double slash pour l'appel à une ressource externe
(type CDN) est autorisé. Il permet d'utiliser le protocole en cours de la page (http ou https) et éviter
les erreurs "warning".
samedi 28 septembre 13
Le petit nouveau : <main>
L'élément <main> n'a pas de valeur sémantique comme une <section> ou <article>
cf: http://html5doctor.com/the-main-element/
Exemple : un <h1> dans une <section> sera un <h2> sémantiquement, et un autre <h1> dans un <article> sera considéré comme un <h3> !
samedi 28 septembre 13
La compatibilité du HTML5
samedi 28 septembre 13
http://caniuse.com/#search=off
samedi 28 septembre 13
Le nouveau balisage
<section>, <article>, <header>, <footer>, <nav>,
<aside>, <main>, ...
samedi 28 septembre 13
http://html5doctor.com/downloads/h5d-sectioning-flowchart.pdf
samedi 28 septembre 13
Pensez au patch pour IE 8 : HTML5shiv ou HTML5shim
samedi 28 septembre 13
Les nouveaux attributs
contenteditable, draggable, dropzone, hidden, data-*, role, spellcheck, translate,
seamless, async, ...
samedi 28 septembre 13
Les webform
• Nouveaux types pour <input><input type="range" min="0" max="100" step="5">
• Nouveaux attributs<input type="number" min="10" max="30" step="5">
• Nouveaux éléments<input type="text" name="login" pattern="[0-9a-z]+">
samedi 28 septembre 13
Microdata
samedi 28 septembre 13
Les API
samedi 28 septembre 13
http://platform.html5.org/
• Canvas
• Audio / Vidéo
• Web storage
• Offline
• File API
• Géolocalisation
• Web GL
• Media Capture
• Device Orientation
• ...
samedi 28 septembre 13
La boite à outil
samedi 28 septembre 13
samedi 28 septembre 13
Liens utiles
• http://www.html5rocks.com
• http://html5doctor.com/
samedi 28 septembre 13
Conclusion
samedi 28 septembre 13
Le changement c’est pas maintenant, il a déjà eu lieu !
samedi 28 septembre 13
MERCI !
Willy Leloutre - @wleloutreDirecteur Technique - La Mygale à Chaussette
Digital agency
samedi 28 septembre 13