HTML5

Openstudio

Par Christophe Laffont / @touffies

Plan de la présentation

Historique
Structure et sémantiques
- Structure d'un document
- Structure du contenu
- Les Formulaires
CSS3
Et plus encore
- Mutlimédia / Graphique
- Accès aux Périphériques
- Framework CSS
Ressources
Atelier pratique
- Réalisons d'une page web ensemble

Un peu d'histoire

1990 à 2004

Création du HTML par le W3C (www.w3.org)
Standards Web pour XHTML et HTML

2004

W3C travail sur XHTML 2.0
Création du WHATWG (www.whatwg.org)

2006

W3C s'intéresse au développement d'HTML5

2007

W3C + WHATWG = HTML5
2 groupes; 2 spécifications

2008

Working Draft publique de la spécification d'HTML5

2009

W3C abandonne XHTML 2.0
Toutes les ressources travaillent maintenant sur l'implémentation des spécifications pour HTML5

caniuse.com

Structure et sémantiques

Structure d'un document

Doctype

La déclaration doctype^* indiquant la méthode de rendu du navigateur :


<!DOCTYPE html
          PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

est remplacé par :

<!DOCTYPE html>

^* La déclaration du Doctype est obligatoire.

Elément racine

L'élément racince <html> :

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr" dir="ltr">

est simplifié par :

<html lang="fr" dir="ltr">

Métadonnées du document

L'élément <head> englobe un certain nombre d'informations utiles pour l'affichage et le référencement :

<head>
	<meta charset="utf-8">
	<title>Titre de la page</title>
	<meta name="descritpion" content="">
	
	<base href="http://www.monsite.com">

	
	<link rel="stylesheet" href="css/style.css">
	<style></style>

	
	<script src="js/script.js"></script>
	<script></script>

</head>

Les éléments de type Metadata : base, link, meta, style, title.

Structure de base


<!doctype html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <meta name="descritpion" content="">
  </head>
  <body>
    
  </body>
</html>

Avec HTML5, le contenu est simplifié.

Tolérance


<img src="html5" alt="html5" />
<p class="html5">html5</p>

<img src="" alt="" />
<p class="">html5

<IMG src="" ALT="" />
<P class="">html5</P>

<img src=html5 alt=html5>
<p class=html5>html5</p>

HTML5 est plus permissif.

Structure du contenu

Abandons

Au profit de css :
<basefont>, <big>, <center>, <font>, <strike>, <tt>
Pour des raisons d'accessibilité :
<frame>, <frameset>, <noframe>
Et d'autres :
<acronym>, <applet>, <blink>, <tt>, etc.

Redéfinitions

<heading>
<div>
<a>
<cite>
<small>

<heading>

Toujours commencer les titres par <h1> (Maximum de 6 niveaux) et if faut évitez de sauter des niveaux de titre.
Il est recommendé d'avoir un seul titre de premier niveau sur chaque ~~document~~ section.

<div>

La balise <div> n'a pas de valeur sémantique, mais peut servir à structurer du contenu.

<a>

La balise <a> peut contenir tout type d’élément (titre, paragraphe, liste, table…) sauf les éléments d’interaction (lien, bouton, champs de formulaire).


<a href="chemin/produit">
	<h2>Titre du produit</h2>
	<p>Paragraphe du produit</p>
</a>

<cite>

En HTML5, l'utilisation de cet attribut pour marquer le nom d'une personne n'est plus considéré comme sémantiquement correct.
Il faut utiliser l'attribut <cite> d'un élément <blockquote> ou <q> pour fournir une ressource en ligne liée à une source.

<small>

La balise <small> a pour but de représenter des annotations et des petits caractères comme les informations légales ou liées au copyright.

Restructurations

<strong> et <b>
<em> et <i>

<strong>/<b>

La balise <strong> a une valeur sémantique et réprésente un texte d'une certaine importance.
La balise <b> n'a pas de valeur sémantique, elle représente un élément de présentation. (Il faut l'utiliser lorsque qu'aucun autre ne convient.)

<em>/<i>

La balise <em> a une valeur sémantique et sert à marquer un texte sur lequel on veut insister. (On ne doit pas seulement l'utiliser pour appliquer un style italique.)
La balise <i> n'a pas de valeur sémantique, elle représente un élément de présentation. (Un texte prononcé par quelqu'un d'autre)

Les nouvelles balises

Balises structurantes

<header>
<nav>
<main>
<section>
<article>
<aside>
<footer>

<header>

La balise <header> est utilisé pour le document mais aussi pour une <section> ou un <article>.
Il peut contenir des éléments de titre, mais aussi d'autres éléments tels qu'un logo, un formulaire de recherche, etc.

<nav>

La balise <nav> représente une section d'une page ayant des liens vers d'autres pages ou des fragments de cette page.
Un document peut avoir plusieurs éléments <nav>, par exemple un pour la navigation sur le site et un autre pour la navigation au sein de la page.
En revanche, l'élément <footer> possède souvent différents liens, il n'a pour autant pas besoin d'être dans un élément <nav>.

<main>

La balise <main> n'a pas de valeur sémantique et représente le contenu principal du <body>. (Il est unique dans un document).
Il ne doit pas être un enfant d'un élément <article>, <aside>, <footer>, <header> ou d'un élément <nav>

<section>

La balise <section> représente une section générique d'un document, c'est à dire un groupement thématique de contenu, généralement avec une en-tête.

<article>

La balise <article> représente du contenu autonome qui est prévu pour être distribué ou réutiliser indépendamment.
Un élément <article> peut-être imbriqué dans un autre. (Les commentaires d'une parution de blog peuvent être un élément <article> inclus dans l'<article> représentant la parution en elle-même)

<aside>

La balise <aside> est une section de la page dont le contenu est indirectement lié à ce qui l'entoure. (On pourrait y trouver un glossaire, des publicités, la biographie de l'auteur, ou, dans les applications web, des informations sur le profil ou des liens vers des blogs similaires.)

<footer>

La balise <footer> représente le pied de page, ou le pied de la section, ou de la racine de sectionnement la plus proche (c'est à dire, son parent <article>, <aside>, <nav>, <section>, <blockquote>, <body>, <details>, <fieldset>, <figure>, <td> le plus proche).

<hgroup>

La balise <hgroup> a été retiré du HTML5 (W3C), mais est resté dans la version HTML du WHATWG. Son avenir est incertain, il est fortement conseillé d'éviter de l'utiliser.

Exemple de structure

<header>Titre de page</header>
<nav>Menu principal</nav>	
<main>
    <article>
        <header>
	    	<h1>Titre de l'Article</h1>
	    	<p>Publié le <time datetime="2013-12-22T16:31:24+01:00">22 décembre 2013</time></p>
        </header>
        <section>
        		<h1>Titre de la Section</h1>
        		<div class="content">Contenu de l'Article</div>
        </section>
        <footer>Une note de fin de page</footer>
    </article>
    <aside>Contenu complémentaire</aside>
</main>
<footer>Copyright © 2013</footer>

Les autres balises

<figure>
<mark>
<time>
<details>
<summary>
<meter>
<datalist>

<figure>

La balise <figure> représente un contenu indépendant, habituellement accompagné d'une légende grâce à l'élément <figcaption>.


<figure>
	<img src="img/logo.png" alt="description de l'image">
	<img src="img/partenaire.png" alt="description de l'image">
	<figcaption>Image de Openstudio.fr</figcaption>
</figure>

<mark>

La balise <mark> représente du texte surligné et est utilisé pour mettre en avant des blocs de textes d'une certaine pertinence.

<time>

La balise <time> représente soit une heure sur une horloge fonctionnant sur 24 heures ou une date précise du calendrier grégorien.


<time datetime="2013-12-22T16:31:24+01:00">22 décembre 2013</time>
<time datetime="2013-12-22">Aujourd'hui</time>
<time datetime="2013-12-22" pubdate>22 décembre 2013</time>

<details>

La balise <details> est utilisé comme outil de communication à partir duquel l'utilisateur récupère des informations supplémentaires.


<details>
  <summary>Démo détails</summary>
  <p>Plus d'infos à propos des détails.</p>
</details>

Résultats :

Démo détails

Plus d'infos à propos des détails.

<summary>

La balise <summary> est utilisé comme un sommaire, une légende ou la légende du contenu d'un élément <details>.

Les Formulaires

Nouveaux types de champs


<input type="text" value="">

color
date
datetime
email
month
number
range
tel
time
url
week
zip

<emal>

La type <email> représente une adresse email.


<input type="email" name="email">

<input type="email" name="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$">

Résultats :

<color>

La type <color> est utilisé pour faciliter la sélection d'une couleur.


<label for="color">Sélectionner une couleur :</label>
<input type="color" name="color" id="color" value="ff0000">

Résultats :

Sélectionner une couleur :

<date>

La type <date> est utilisé pour faciliter la sélection d'une date.


<input type="date" name="date" id="date" value="2013-12-24">

Résultats :

<range>

La type <range> est utilisé pour afficher un slider.


<input type="range" name="range" id="range" min="0" max="20" step="1" value="0">

Résultats :

Placeholder

Donne une indication à l'utilisateur sur ce qui peut être entré dans le champ.


<input type="text" name="firstame" placeholder="Nom de famille">

Résultats :

Autofocus

Au chargement du document, celui-ci est sélectionné.


<input type="text" name="firstame" autofocus>

Résultats :

Auto-complete

Empêche le navigateur de se souvenirs des informations entrés dans le formulaire/champ.


<form action="/" autocomplete="off">

<input type="text" name="firstame" autocomplete="off">

Required

Previent la soumission du formulaire si les champs requis non pas été complétés.

<style>
	input:valid { border-color: green; }
	input:invalid { border-color: red; }
</style>						
<input type="text" name="firstame" required>

Résultats :

Datalist

Afficher une liste de choix pour un champ.


<input type="text" name="country" list="country" >
<datalist id="country">
	<option value="Espagne">Espagne</option>
	<option value="France">France</option>
	<option value="Italie">Italie</option>
</datalist>

Résultats :

CSS 3

Les préfixes

Les spécifications recensent une douzaine de préfixes propriétaires (appelés aussi préfixes vendeurs) dont les plus fréquemment rencontrés sont attribués aux navigateurs web principaux, à savoir :


[prefix][propriété CSS] ==> -webkit-border-radius: 10px;

-moz- : Firefox ou Thunderbird (Moteur de rendu Gecko)
-ms- : Microsoft Internet Explorer
-o- : Opera
-webkit- : Safari et Chrome (Moteur de rendu WebKit)
-khtml- : Linux KDE (Moteur de rendu KHTML)

Bordure arrondie


.round {
background: #ccc;
-webkit-border-radius: 20px; /* Android ≤ 1.6, iOS 1-3.2, Safari 3-4 */
border-radius: 20px; /* Android 2.1+, Chrome, Firefox 4+, IE 9+, iOS 4+, Opera 10.50+, Safari 5+ */
}

Résultats :

Colonne

-webkit-column-count: 3;
-webkit-column-rule: 1px solid #bbb;
-webkit-column-gap: 2em;

In March 1936, an unusual confluence of forces occurred in Santa Clara County.

A long cold winter delayed the blossoming of the millions of cherry, apricot, peach, and prune plum trees covering hundreds of square miles of the Valley floor. Then, unlike many years, the rains that followed were light and too early to knock the blossoms from their branches.

Instead, by the billions, they all burst open at once. Seemingly overnight, the ocean of green that was the Valley turned into a low, soft, dizzyingly perfumed cloud of pink and white. Uncounted bees and yellow jackets, newly born, raced out of their hives and holes, overwhelmed by this impossible banquet.

Then came the wind.

It roared off the Pacific Ocean, through the nearly uninhabited passes of the Santa Cruz Mountains and then, flattening out, poured down into the great alluvial plains of the Valley. A tidal bore of warm air, it tore along the columns of trees, ripped the blossoms apart and carried them off in a fluttering flood of petals like foam rolling up a beach.

This perfumed blizzard hit Stevens Creek Boulevard, a two-lane road with a streetcar line down its center, that was the main road in the West Valley. It froze traffic, as drivers found themselves lost in a soft, muted whiteout. Only the streetcar, its path predetermined, passed on...

Opacité

color: rgba(255, 0, 0, 0.68);
background: rgba(255, 0, 0, 0.68);

Démo opacité

Media Queries

L'intérêt est de pouvoir satisfaire des contraintes de dimensions, de résolutions et d'autres critères variés pour améliorer l'apparence graphique et la lisibilité (voire l'utilisabilité) d'un site web

/* Type */
	@media screen, projection { ... }

	/* Dimension */
	@media (min-width: 780px) { ... }
	@media (min-device-width: 640px) { ... }

	/* Orientation */ 
	@media (orientation: portrait) { ... }

	/* Couleur */ 
	@media (color) { /* Screen is in color */ }
	@media (min-color-index: 256) { /* At least 256 colors */ }
	@media (monochrome) { /* Screen is monochrome */ }

Et plus encore

Mutlimédia / Graphique

<audio>

La balise <audio> désigne du contenu sonore présent dans un document.


<audio controls="controls">
  <source src="assets/audio/cheval.ogg" type="audio/ogg">
  <source src="assets/audio/cheval.mp3" type="audio/mpeg">
	Votre navigateur ne gère pas l'élément audio
</audio>

Résultats :

<video>

La balise <video> est utilisé pour intégrer des vidéo.


<video id="video" width="320" height="240" controls="controls">
  <source src="assets/video/film.mp4" type="video/mp4">
  <source src="assets/video/film.ogg" type="video/ogg">
	Votre navigateur ne gère pas l'élément video
</video>
<script>var video = document.getElementById("video");</script>
<button type="button" onclick="video.play();">Play</button>
<button type="button" onclick="video.pause();">Pause</button>

Résultats :

<canvas>

La balise <canvas> permet de modifier une zone graphique via un script.

<canvas id="canvas" width="800" height="200"></canvas>
<script>
    var canvas = document.getElementById('canvas');
    var context = canvas.getContext('2d');
    context.fillRect(250, 25, 150, 100);
    context.beginPath();
    context.arc(450, 110, 100, Math.PI * 1/2, Math.PI * 3/2);
    context.lineWidth = 15;
    context.lineCap = 'round';
    context.strokeStyle = 'rgba(255, 127, 0, 0.5)';
    context.stroke();
</script>

Résultats :

<svg>

<svg>
    <defs>
    	<linearGradient id="myGradient" x1="0%" y1="100%" x2="100%" y2="0%">
    		<stop offset="5%" stop-color="red"></stop>
    		<stop offset="95%" stop-color="blue" stop-opacity="0.5"></stop>
    	</linearGradient>
    </defs>
    <circle id="myCircle" class="important" cx="50%" cy="50%" r="100" fill="url(#myGradient)">
</svg>

Résultats :

Accès aux Périphériques

API de Géolocalisation

L'API de Géolocalisation permet aux utilisateurs de donner leur localisation si ils le désirent.

if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(function(position) {
    var latLng = new google.maps.LatLng(
        position.coords.latitude, position.coords.longitude);
    var marker = new google.maps.Marker({position: latLng, map: map});
    map.setCenter(latLng);
  }, errorHandler);

Drag & Drop

<script>
document.querySelector('#dropzone').addEventListener('drop', function(e) {
	var reader = new FileReader();
	reader.onload = function(evt) {
		document.querySelector('img').src = evt.target.result;
	};
	reader.readAsDataURL(e.dataTransfer.files[0]);
}, false);
</script>

Déplacer un fichier depuis son ordinateur.

Outils

Amélioration progressive

Utiliser Modernizr pour détecter si le navigateur supporte une propriété.

.element { /* Pour les navigateurs ne reconnaissant pas CSS3 border-image */  
   border: 1px inset #666;
}
.borderimage .element {  /* Pour les navigateurs reconnaissant border-image */ 
   border: none;
   -webkit-border-image: url(border.png) 0 5 0 5 stretch; -moz-border-image: url(border.png) 0 5 0 5 stretch; border-image: url(border.png) 0 5 0 5 stretch;
}

if(!Modernizr.input.placeholder){
	// Javascript alternative
}

Anciens Navigateurs

Utilisation des commentaires conditionnels pour cibler les anciens navigateurs.


<!--[if lt IE 7 ]><html class="no-js oldie ie6" lang="fr"> <![endif]-->
<!--[if IE 7 ]><html class="no-js oldie ie7" lang="fr"> <![endif]-->
<!--[if IE 8 ]><html class="no-js oldie ie8" lang="fr"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="fr" class="no-js"> <!--<![endif]-->

HTML5

Openstudio

Plan de la présentation

Un peu d'histoire

caniuse.com

Structure et sémantiques

Structure d'un document

Doctype

Elément racine

Métadonnées du document

Structure de base

Tolérance

Structure du contenu

Abandons

Redéfinitions

<heading>

<div>

<a>

<cite>

<small>

Restructurations

<strong>/<b>

<em>/<i>

Les nouvelles balises

Balises structurantes

<header>

<nav>

<main>

<section>

<article>

<aside>

<footer>

<hgroup>

Exemple de structure

Les autres balises

<figure>

<mark>

<time>

<details>

<summary>

Les Formulaires

Nouveaux types de champs

<emal>

<color>

<date>

<range>

Placeholder

Autofocus

Auto-complete

Required

Datalist

CSS 3

Les préfixes

Bordure arrondie

Colonne

Opacité

Media Queries

Et plus encore

Mutlimédia / Graphique

<audio>

<video>

<canvas>

<svg>

Accès aux Périphériques

API de Géolocalisation

Drag & Drop

Outils

Amélioration progressive

Anciens Navigateurs

Merci !