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 public-html@w3.org 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://mobilehtml5.org/

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