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


mailto:[email protected]

mailto:[email protected]

Le HTML5 c’est quoi ?


Le HTML5 c’est historiquement un dérivé de

SGML !


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 »


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


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.


Le HTML5, c’est surtout tendance !


HTML5 POWER !


http://www.w3.org/html/logo/




Des icones pour chaques fonctionnalités.


Le saviez-vous ?


La sémantique par les <div>

La <div> n'a pas de valeure sémantique, mais peut servir à structurer du contenu dans un <article>


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.


<a href=...> <h2>...</h2> <p>...</p></a>

Les liens <a> peuvent maintenant contenir des blocs.


<b> / <i> vs <strong> / <em>

<b> et <i> n'ont pas de valeur sémantique contrairement à <strong> et <em>


<hr class="clearfix">

<hr> Est un séparateur de sujet au sein d'un contenu, ça ne sert pas uniquement à réaliser vos clearfix !


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


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


http://html5doctor.com/the-main-element/

http://html5doctor.com/the-main-element/

La compatibilité du HTML5


http://mobilehtml5.org/




http://caniuse.com/#search=off




Le nouveau balisage

<section>, <article>, <header>, <footer>, <nav>,

<aside>, <main>, ...


http://html5doctor.com/downloads/h5d-sectioning-flowchart.pdf




Pensez au patch pour IE 8 : HTML5shiv ou HTML5shim


Les nouveaux attributs

contenteditable, draggable, dropzone, hidden, data-*, role, spellcheck, translate,

seamless, async, ...


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]+">


Microdata


Les API


http://platform.html5.org/

• Canvas

• Audio / Vidéo

• Web storage

• Offline

• File API

• Géolocalisation

• Web GL

• Media Capture

• Device Orientation

• ...




La boite à outil



Liens utiles

• http://www.html5rocks.com

• http://html5doctor.com/


http://www.html5rocks.com

http://www.html5rocks.com

http://html5doctor.com

http://html5doctor.com

Conclusion


Le changement c’est pas maintenant, il a déjà eu lieu !


MERCI !

Willy Leloutre - @wleloutreDirecteur Technique - La Mygale à Chaussette

Digital agency


Technology

Le HTML5 & les API