Le HTML5 & les API

& les API
willy leloutre - @wleloutre
samedi 28 septembre 13

Préambule
• Le HTML5, c’est quoi ?
• Le saviez-vous ?
• Les nouveaux balisages
• Le HTML5 & les API

• 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 ﬁn 2014... 8 ans après
XHTML
• XHTML de 2000 à 2006

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 aussi
une version sérialisée XML
Le 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="clearﬁx">
<hr> Est un séparateur de sujet au sein d'un contenu, ça
ne sert pas uniquement à réaliser vos clearﬁx !

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

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-ﬂowchart.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
• Ofﬂine
• File API
• Géolocalisation
• Web GL
• Media Capture
• Device Orientation
• ...

La boite à outil

Liens utiles
• http://www.html5rocks.com
• http://html5doctor.com/

Conclusion

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

MERCI !
Willy Leloutre - @wleloutre
Directeur Technique - La Mygale à Chaussette
Digital agency

Le HTML5 & les API

Recomendados

Recomendados

Mais conteúdo relacionado

Destaque

Destaque (20)

Semelhante a Le HTML5 & les API

Semelhante a Le HTML5 & les API (20)

Mais de Willy Leloutre

Mais de Willy Leloutre (6)

Le HTML5 & les API