Commençons à travailler en HTML5

HTML5 Powered with Connectivity / Realtime, CSS3 / Styling, Device Access, Graphics, 3D & Effects, Multimedia, Performance & Integration, Semantics, and Offline & Storage

Commençons à travailler en HTML5: Table des matières

  1. Rappel – Historique du HTML
  2. Stratégies d'adoption du HTML5
  3. Qu’est-ce que le HTML5 ? Le marketing et la réalité
  4. Les Doctypes et les sérialisations
  5. Nouveau dans HTML, mais « ancien » dans les navigateurs
  6. Les nouveaux éléments sémantiques
  7. Les éléments médias
  8. Graphisme Web
  9. Fonctionnement hors-ligne et stockage client
  10. Web Forms
  11. Extensions distribuées et Web sémantique
  12. Éléments interactifs
  13. Géolocalisation et plus !
  14. Un mot sur l’accessibilité
  15. Devons-nous commencer à utiliser HTML5 dans nos projets ?
  16. Pour en savoir plus : Ressources
  17. Créer une application Web en HTML5 : Démo et pratique

La petite histoire du HTML

1991:
HTML est né
1993:
Mosaic: le premier navigateur graphique
1995:
HTML 2, Javascript, Netscape 2.0 beta
1996:
CSS 1, Netscape 3, Internet Explorer 3
1997:
HTML 3.2, Netscape 4, Internet Explorer 4
1998:
HTML 4, CSS 2
1999:
Internet Explorer 5

La petite histoire du HTML

2000:
XHTML 1, Internet Explorer 5.5
2001
La fin de la guerre des navigateurs: Internet Explorer 6
2002-2007
Les années des évangéliste Web : N'utilisez pas les tables pour le visuel s.v.p.
2004
WHATWG (Initiative Web Forms 2.0 et Web Applications 1.0)
2005
Ajax!
2007
CSS 2.1
2009-2011
HTML5, Firefox 3 + Internet Explorer 9, Safari 4+, Chrome +, CSS 3

Pourquoi HTML5 ?

Les compétiteurs sur le marché

Technologies et courants déstabilisateurs

Les avantages d’utiliser HTML5

Les risques d’utiliser HTML5

Quelle sera votre stratégie ?

Quelques conseils

Que comprends HTML5 ? Marketing vs réalité

Définition réelle du HTML5 (Traduction libre de la spécification) :
Un vocabulaire et les interfaces de programmation d'application associés pour HTML et XHTML
Définition marketing
Toutes les nouvelles technologies de front-end Web populaires du jour, incluant CSS3, EmcaScript 5, Géolocalisation, SVG, WebGL, et j'en passe

Un nom a été proposé pour cela par Bruce Lawson : NEWT (New And Exciting Web Technologies)

Remarquez qu'avec la saga du logo HTML5, même le W3C est tombé dans le panneau...

Évolution ou révolution?

Mais qu'est-ce que HTML5 ?

Plus que des balises ?

Quelques principes derrière le HTML5

Exemples de ce qui a été déjà fait

La sérialisation HTML5

text/html
HTML5
application/xml+xhtml
XHTML5
  • XHTML 2 n'est peut-être plus maintenu, mais XHTML continue de survivre grâce à la sérialisation XHTML5
  • Plus d'appendice C (on ne peut plus envoyer du XHTML comme étant du text/html)
  • HTML accèpte maintenant la syntaxe XHTML pour éléments qui se ferment eux-mêmes (<br />) pour faciliter la transition à partir de XHTML 1.x
  • XHTML ne peut pas avoir la balise <noscript>, document.write en javascript, etc
  • Les documents polyglottes représentent un document identique peu importe la sérialisation

Style de codages

Doctype HTML5

<!DOCTYPE html>

Il est là seulement pour la rétrocompatibilité et faire passer les navigateur en mode standard plutôt qu'en mode Quirk

N'est pas nécessaire pour la sérialisation XHTML

Nouveau dans HTML5, mais existait / fonctionnait avant dans les navigateurs

Les nouveaux éléments sémantiques

Structure
<section>, <article>, <aside>, <figure>
Texte
<time>, <ruby>, <mark>, <i> , <b>

Facilite la maintenance, la réutilisation, l'accessibilité et le SEO (optimisation moteur de recherche), etc.

<section>


 <section>
	<h1> Section 1 </h1>
	<section>
		<h1> Section 1.1 </h1>
		<section>
			<h1> Section 1.1.1 </h1>
		</section>								
	</section>	
 </section>
 <section>
	<h1> Section 2 </h1>
	<section>
		<h1> Section 2.1 </h1>
		<p>Lorem Ipsum Dolor Sit Amet.<p>
	</section>
	<section>
		<h1> Section 2.2 </h1>
		<p>Lorem Ipsum Dolor Sit Amet.<p>
	</section>							
 </section>

<article>


 
 	<article>
		<h1> titre de l'article </h1>
		<section>
			<h1> Section 1 </h1>
			<section>
				<h1> Section 1.1 </h1>
			</section>								
		</section>	
 	</article>

<nav>


	
	<nav>
		<ul>
			<li><a href="#">Accueil</a></li>
			<li><a href="#">FAQ</a></li>
			<li><a href="#">À propos</a></li>
			<li><a href="#">Nos produits</a></li>
		</ul>
	</nav>

<header>


	<header>
		<h1><img src="logo.png" alt="Notre entreprise"></h1>
		<ul>
			<li><a href="#">Accueil</a></li>
			<li><a href="#">FAQ</a></li>
			<li><a href="#">À propos</a></li>
			<li><a href="#">Nos produits</a></li>
		</ul>
		<form action="search.do">
			<input type="search" placeholder="Recherche" value="Recherche">
			<input type="submit" value="Allez!">
		</form>
	</header>

<footer>


	<footer>
		<p>Cet article a été écrit par le 14e docteur
		Copyright © Theta Sigma Corp. La plupart des droits réserveés</p>
		<ul>
			<li><a href="#">Accueil</a></li>
			<li><a href="#">FAQ</a></li>
			<li><a href="#">À propos</a></li>
			<li><a href="#">Nos produits</a></li>
		</ul>
		<p>Partagez avec vos amis : </p>
		<ul>
			<li><a href="#">Twitter</a></li>
			<li><a href="#">Facebook</a></li>
			<li><a href="#">Friendfeed</a></li>
			<li><a href="#">Peu importe</a></li>
		</ul>	
	</footer>

<hgroup>


	<header>
		<hgroup>
			<h1><img src="logo.png" alt="Notre entreprise"></h1>
			<h2>Notre slogan le plus convainquant !</h2>
		<hgroup>
		<ul>
			<li><a href="#">Accueil</a></li>
			<li><a href="#">FAQ</a></li>
			<li><a href="#">À propos</a></li>
			<li><a href="#">Nos produits</a></li>
		</ul>
		<form action="search.do">
			<input type="search" placeholder="Recherche" value="Recherche">
			<input type="submit" value="Allez!">
		</form>
	</header>

<aside>


	<article>
		<h1>Titre de l'article</h1>
		<section>
			<h1>Section 1</h1>
		</section>
		<aside>
			<h1>Glossaire</h1>
			<dl>
				<dt>Tournevis sonique</dt>
				<dd>Lorem Ipsum Dolor Sit Amet</dd>
				<dt>La proclamation de l'ombre</dt>
				<dd>Lorem ipsum dolor sit amet</dd>
			</dl>
		</aside>
	</article>

<figure> et <figcaption>


	<figure>
		<img src="vacation1.png" alt="Famille à la plage">
		<img src="vacation2.png" alt="Famille dans la forêt">
		<img src="vacation3.png" alt="Famille dans le parc d'amusement">
		<figcaption>
			Nos meilleures photos de vacances
		<figcaption>		
	</figure>

<time>


	<article>
		<header>
			<h1> Titre de l'article </h1>
			<p>Publié le : 
			  <time pubdate datetime="2010-05-27">Le 27 mai 2010</time></p>
		<header>
		<section>
			<h1> Section 1 </h1>	
			<section>
				<h1> Section 1.1 </h1>		
			</section>
		</section>	
	</article>

<mark>


	<p>Vous avez recherché le terme <mark>test</mark> dans ce document : </p>
	<section>
		<h1> Titre de section </h1>
		Cette page est un <mark>test</mark>. 
		Puisque c'est bien mieux de faire un <mark>test</mark>
		avant d'aller en production!
	</section>

Nouvelles signification pour <i>, <b>, <small> et <hr>

<i>:
voix alternative (ex: mots d'une différente langue pour la prononciation, termes techniques)
<b>:
texte mis en valeur par rapport au reste du texte sans pourtant lui donner plus d'importance
(ex: mots clé, nom de produits)
<small>:
commentaires et texte en petits caractères
<hr>:
séparation par thème au niveau des paragraphes

<ruby>, <rt> and <rp>

Guides de prononciation et annotations utilisés en chinois, japonais et en cooréen

Éléments médias

Plus de plugiciels ! Yé !

Vraiment ? Pour de vrai ?Il faut lire les petits caractères par contre...

<video>

<video>

La bande annonce de Big Buck Bunny (en anglais)

<video>

Suite...


  <article id="bigbuckbunny">
	<h1>Bande annonce de <i lang="en">Big Buck Bunny</i> (en anglais) avec l'élément video </h1>
	<video controls>
		<source src="http://mirror.cessen.com/blender.org/peach/trailer/trailer_iphone.m4v">
		<source src="http://download.blender.org/peach/trailer/trailer_400p.ogg">
	</video>
	<footer>
		<p>(c) copyright Blender Foundation |
			<a href="http://www.bigbuckbunny.org">www.bigbuckbunny.org</a></p>
	</footer>
  </article>

<audio>

J'ai déjà essayé de faire de la musique et j'ai échoué!

© Copyright Moi 1997

	<article>
		<h1>J'ai déjà essayé de faire de la musique et j'ai échoué!</h1>
		<audio controls>
			<source src="..media/minedenuit.ogg">
		</audio>
		<footer>© Copyright Moi 1997</footer>
	</article>

Le débat des codecs

Et le DRM ?

Apple, Google, Adobe, Microsoft, Opera et Mozilla

Application de type App store, le Web ouvert et quelque chose entre les deux

Graphisme sur le Web

L'élément canvas et l'API 2D


	<canvas id="myCanvas" width="400" height="120">
	</canvas>
	<script type="text/javascript">
		if (Modernizr.canvas) {
			var canvasCtx = document.getElementById("myCanvas").getContext("2d");
			canvasCtx.fillStyle = "rgb(0,100,0)";
			canvasCtx.translate(150, 50);						
			canvasCtx.rotate(45 * Math.PI / 180);  	
			canvasCtx.fillRect(0,0,50,50);
		}
	</script>

SVG dans le HTML


	<?xml version="1.0" standalone="no"?>
	<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
		"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
	<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
	<g transform="translate(50, 0)">
		<g transform="rotate(45)">
			<rect width="50" height="50" style="fill:rgb(0,100,0);"/>
		</g>
	</g>
	</svg>

Stockage local et hors ligne

Stockage de session
Accessible lors d'une même session dans une fenêtre ou un onglet/dd>
sessionStorage.setItem(key, stringValue); //sauvegarder un item dans le stockage, la valeur doit être une chaîne de caractère, alors sérialiser vos objets avec JSON
sessionStorage.getItem(key); // rechercher un item dans le stockage , la clé est une chaîne de caractères
sessionStorage.removeItem(key); // retirer un item du stockage
Stockage local
Accessible pour le domaine courant
localStorage.setItem(key, stringValue);
localStorage.getItem(key);
localStorage.removeItem(key);
IndexedDB / Web SQL Database
Base de données disponible dans le navigateur (avec SQL et transactions)

Cache hors ligne pour les applications


				CACHE MANIFEST
				/images/spacer.gif
				
				NETWORK:
				ajaxresponder.cgi
				
				FALLBACK
				dynamicimage.cgi staticimage.png

Web Forms / formulaires Web : Nouveaux types pour l'élément input

  • <input type="search">
  • <input type="number">
  • <input type="range">
  • <input type="color">
  • <input type="tel">
  • <input type="url">
  • <input type="email">
  • <input type="date">
  • <input type="time">
  • <input type="datetime">
  • <input type="datetime-local">
  • <input type="month">
  • <input type="week">
  • Nouveaux attributs : placeholder, autocomplete, autofocus, list, pattern, required
  • Détection: créer un élement, et vérifier ensuite son type (disponible si le type n'est pas text)
  • Téléversement de plusieurs fichiers à la fois! (attribut multiple sur un <input type="file">)

<progress>

Représente la progression d'une tâche (ex: formulaire à plusieurs pages, appels ajax multiples) 


		<section>
			<h1>% du formulaire de complété </h1>
			<p><progress value="10" max="100">10%</progress></p>
		</section>

<meter>


	<meter min="-100" max="100" value="50">50 degré celsius, cette piscine est trop froide!</meter>

Web sémantique et extensibilité distribuée

Microdata


  <section itemscope itemtype="http://programmeurspolyglottes.net/sociallinks>
    <h1>Liens vers les profils de médias sociaux</h1>
    <section>
      <h1 itemprop="name">Benoit Piette</h1>
      <ul>
        <li><a itemprop="twitter" href="http://twitter.com/benoitpiette">Twitter</a>
        <li><a itemprop="identi.ca" href="http://identi.ca/benoitpiette">Identi.ca</a>
        <li><a itemprop="facebook" href="http://www.facebook.com/benoitpiette">Facebook</a>
        <li><a itemprop="linkedin" 
                          href="http://ca.linkedin.com/pub/benoit-piette/6/2aa/571">LinkedIn</a>
      </ul>
    </section>
  </section>

HTML5 + RDFa


  <section typeof="sl:Profiles" xmlns:sl="http://programmeurspolyglottes.net/sociallinks>
     <h1>Liens vers les profils de médias sociaux</h1>
     <section>
       <h1 property="sl:name">Benoit Piette</h1&>
       <ul>
         <li><a rel="sl:twitter" href="http://twitter.com/benoitpiette">Twitter</a>
         <li><a rel="sl:identi.ca" href="http://identi.ca/benoitpiette">Identi.ca</a>
         <li><a rel="sl:facebook" href="http://www.facebook.com/benoitpiette">Facebook</a>
         <li><a rel="sl:linkedin" 
              href="http://ca.linkedin.com/pub/benoit-piette/6/2aa/571">LinkedIn</a>
       </ul>
     </section>
  </section>

Attributs data- 


	<p>Le jeu de la courte paille?</p>
	<ul>
		<li data-length="12">Le brin d'herbe de Ben
		<li data-length="5">Le brin d'herbe de Dave
		<li data-length="10">le brin d'herbe de Ken
	</ul>

Éléments interactifs

<details> et <summary>


	<details>
		<summary>Plus d'info:</summary>
		<p>L'information plus spécifique</p>
	</details>

<command> et <menu>

L'élément <command> définit un composant d'activation / commande dans une application Web, similaire à un bouton ou un lien, mais spécifique à la partie client d'une application (n'envoie pas le résultat d'un formulaire au serveur et n'accède pas une ressource par url)

L'élément <menu> définit une liste de commandes, comme une barre d'outils, un menu contextuel ou une liste d'actions. Ne pas confondre avec <nav> (qui englobe des liens) 


	<menu type="toolbar">
		<command type="command" label="Nouveau" icon="nouveau.png">
		<command type="command" label="Sauvegarder" icon="sauve.png">
		<command type="command" label="Ouvrir" icon="ouvre.png">
	</menu>

Géolocalisation


	<script type="text/javascript">
		function showCoords(position) {
			document.getElementById("coordtest").innerHTML = 
				("<p>Coords: " + position.coords.latitude + 
					", " + position.coords.longitude + "</p>"); 
		}
		if (navigator.geolocation != undefined) {
			navigator.geolocation.getCurrentPosition(showCoords);
		} else {
			document.getElementById("coordtest").innerHTML = 
					"<p>Geolocation not available</p>";
		}
	</script>

Web Sockets

Web Workers


	var myWorker = new Worker("worker-test.js");
	
	myWorker.onmessage = function(evt) {
		document.getElementById("myID").innerHTML = evt.data;
	}	
			
	myWorker.postMessage(500);

From worker-test.js : 


	onmessage = function (evt) {
		// faire qqch d'intensif avec evt.data
		// envoie un message avec les résultats
		postMessage(result);
	}

Glisser-déposer et l'API File

Glisser-déposer un fichier texte ici (Firefox 3.6+)

Accessibilité et WAI-ARIA

roles ARIA

Quelques exemples de rôles ARIA :

main
définit le contenu principal du site
navigation
définit en ensemble de liens
tree et treeitem
définit des arbres (ex: le panneau gauche d'une interface de type explorer Windows)

	<section role="main">
		Lorem ipsum dolor sit amet
	</section>

États et propriétés ARIA

Les états et propriétes ARIA rendent disponible de l'information spécifique sur un objet (États et propriétés WAI-ARIA prises en charge)

Voici quelques exemples d'états et propriétés

aria-describedby
Spécifie des détails additionnels ou une description à un élément
aria-labeledby
Rend disponible de l'informtation sur ce que fait l'élément
aria-live
Spécifie qu'un élément peut être mis à jour (ex: par AJAX
aria-grabbed
Lorsque vrai, signifie qu'un élément a été attrapé (lors d'un glisser-déposer, sa valeur sera fausse lorsque déposé)

	<!-- Le div est mis à jour par un script / ajax et les outils d'adaptation
                     devraient annoncer la mise à jour -->
	<div id="updatedInfo" aria-live="polite">
	</div>

Autres éléments d'intérêt

Un moment de silence pour les disparus dans le HTML

Un mot sur le CSS3

Des coins ronds !!!
padding:5px;
width:50%;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius:10px;
Ombrage pour le texte
text-shadow: 4px 4px 4px #555;
Polices Web
@font-face {font-family: 'FuroreRegular'; src: url('Furore-webfont.eot');}
Sélecteurs
Sélecteur par attributs ([attribute^=value], [attribute$=value], [attribute*=value])
Ombrage de bloc
box-shadow: 15px 15px 15px #555; + (don't forget prefix for browser -webkit, -moz, etc)

Colonnes multiples, contenu généré, overflow-x, overflow-y

Extensions, futur

Qu'est-ce que je peux utiliser dès maintenant ?

Sur tous les navigateurs qui possèdent une part de marché significative
Ce qui se dégrade bien (coins ronds CSS), ARIA, attributs data-, liens de niveau blocs, doctype, notation de type xhtml
Internet Explorer 8 et plus
Stockage local, un peu plus de CSS
Internet Explorer 9+
CSS3, SVG et plus
Web mobile basé Webkit (derniers Android, iOS)
Stockage local, canvas, géolocalisation
Sur votre blogue technique
Éléments sémantiques
Si votre application demande une nouvelle caractéristique de HTML5?
Utilisez des PolyFills

Pour continuer

Commentaires? Questions?

Merci!

C'est le temps d'une démo: Canvas, Contenteditable, Web Worker, getElementsByClassName et stockage local