HTML5 – Openstudio – Un peu d'histoire

View Github Repository Open presentation in a new window

touffies

See all presentation from touffies

HTML5 – Openstudio – Un peu d'histoire

0 0

html5-slides

Formation HTML5

On Github touffies / html5-slides

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

Voir : http://fr.slideshare.net/menasselyahia/html5-and-css3-16164929 W3C : World Wide Web Consortium est un organisme de normalisation à but non lucratif, fondé en octobre 1994 par Tim Berners Lee. WHATWG : Web Hypertext Application Technology Working Group (Opera, Mozilla, Apple) est une collaboration non officielle des différents développeurs de navigateurs web ayant pour but le développement de nouvelles technologies destinées à faciliter l'écriture et le déploiement d'applications à travers le Web.

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
HTML5 (HyperText Markup Language 5) est la nouvelle version du standard HTML. Il apporte non seulement l'utilisation de média riches (vidéo, audio, SVG, etc.) mais aussi des fonctionnalités permettant le développement d'applications web bien plus attractives et interactives.

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. Cela permet au navigateur ne supportant pas encore HTML5 de passer en mode standard et ainsi d'ignorer les balises inconnues. Il est beaucoup plus simple que les précédents doctypes, et plus court. Il est ainsi plus facile à retenir et réduit le nombre d'octets devant être téléchargés.

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">
En pratique, pour des sites ayant un contenu dans une langue européenne, nous omettons l'attribut dir

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. Le processus de détection de l'encodage s'effectue dans l'ordre :
  • Vérification de la présence d'un header HTTP "Content-Type"
  • Détection du BOM en début de fichier
  • Utilisation d'une balise meta spécifique ()
L'élément base fournit l'adresse de base de tous les fichiers utilisés dans la page

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é.
  • L'élément <body> peut être omis (pas pour IE8 et ses ancêtres)
  • L’enveloppement par l’élément <head> aussi

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.
  • Les éléments et les attributs sont insensibles à la casse.
  • Plus de balise auto-fermante, certaines balises fermantes sont optionnelles (html, head, body, li, ...)
  • Plus de typage de script & CSS
  • Intégration des caractères spéciaux en utf-8 dans les attributs ID
  • Mélanger majuscule et minuscule
  • Guillemets facultatifs dans les attributs

Structure du contenu

Voir : https://developer.mozilla.org/fr/docs/Web/HTML/Element

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 :

Tester Tester

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

Tester

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 :

EspagneFranceItalie

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)
Windows Trident Développé par Microsoft (1995) Opera Presto Développé par l'éditeur de logiciel norvégien Opera Software (1995) (Version mobile) Firefox Gecko Navigateur open-source, développé et distribué par la Mozilla Foundation (2002). Safari HTML WebKit Installé par défaut pour Mac OS X (Apple) depuis qu'Internet Explorer n'est plus développé par Microsoft sur Mac (2003). Chrome HTML WebKit Produit par Google, Chrome est le dernier navigateur né (septembre 2008).

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.75); background: rgba(255, 0, 0, 0.75);
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 :

Votre navigateur ne gère pas l'élément audio.

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

Votre navigateur ne gère pas l'élément video. Play Pause Chrome 3.0+ (Ogg, H264) Firefox 3.5+ (Ogg) Safari 3.2 (H264) Opera 10.5 (Ogg)

<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);
Show my location on Map

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

Merci !