HTML5 - Nouveautés, possibilité d'innovation, perspectives économiques - 2011

M2 MIAGE – D511 – HTML5 – Yolande Larcher-Baroung – 26/11/2011 Page 1 sur 44
HTML5
Nouveautés,
Possibilités d’innovation,
Perspectives économiques
Décembre 2011
Yolande
LARCHER-BAROUNG

Table des matières
Introduction .....................................................................................................................................5
Nouveautés ....................................................................................................................................... 7
I - Généralités................................................................................................................................ 7
A. De nouveaux marqueurs. Pourquoi ? Comment ? ............................................................ 7
B. La structure d’une page ......................................................................................................8
II - Autres nouveautés................................................................................................................. 10
A. Contenteditable................................................................................................................. 10
B. La balise <A> .................................................................................................................... 10
III - Le multimédia.......................................................................................................................11
IV - Les formulaires .................................................................................................................... 13
Affichage ou non des nouveaux attributs du marqueur INPUT.............................................. 15
Possibilités d’innovation ................................................................................................................ 21
I - Les innovations dans l’internet mobile.................................................................................. 21
II - le mode deconnecte...............................................................................................................23
III - Les données en local............................................................................................................26
A. Le stockage web ................................................................................................................26
B. La base de données sql web..............................................................................................27
C. La géolocalisation..............................................................................................................33
Perspectives économiques..............................................................................................................37
I – 3 cas de ruée vers le HTML5 .................................................................................................37
A. Adobe Flash Player ...........................................................................................................37
B. Deezer ...............................................................................................................................38
C. Google Gears.....................................................................................................................39

II - Un autre marché autour de l’HTML5...................................................................................40
Conclusion ...................................................................................................................................... 41
I - Un bel avenir pour le web ...................................................................................................... 41
II - mais en attendant… .............................................................................................................. 41
References ......................................................................................................................................43
I - Adresses internet....................................................................................................................43
II - Livres.....................................................................................................................................44

Table des illustrations
Figure 1 - structure d'une page HTML4/HTML5 ............................................................................8
Figure 2 - Code de ma première page HTML5 ................................................................................9
Figure 3 - Comparaison des navigateurs sur l'affichage d’une vidéo ............................................ 12
Figure 4 - une page avec de la vidéo lue par Safari 5.1.1................................................................ 12
Figure 5 - Comparaison des navigateurs sur l'affichage des nouveaux attributs.......................... 15
Figure 6 - Extrait du CSS du formulaire ........................................................................................ 16
Figure 7 - Rendu CSS et attributs input chez Opéra...................................................................... 16
Figure 8 - Rendu de l'attribut date chez Opera...............................................................................17
Figure 9 - Rendu de l'attribut color chez Opera .............................................................................17
Figure 10 – Ici, le clavier de l'iPad s'adapte pour la saisie de numéros de téléphone .................. 18
Figure 11 – Ici, le clavier de l'iPad s'adapte pour la saisie d’une adresse email ............................ 19
Figure 12 – Ici, le clavier de l'iPad s'adapte pour la saisie d’une url ............................................. 19
Figure 13 - Code de mon formulaire HTML5 ................................................................................20
Figure 14 - Les fichiers du manifest ont été chargés dans le cache de Chrome ............................24
Figure 15 - Les ressources affichent des détails sur les fichiers en cache de Chrome...................24
Figure 16 - En mode déconnecté, les pages en cache sont chargés grâce au manifest et affichés 25
Figure 17 - L'objet sessionStorage avec quelques méthodes ; setitem, getitem et removeitem....27
Figure 18 - Ma base de données web local sur Safari mobile ........................................................29
Figure 19 - Chrome 15.0 en mode Debug affichant mes données en base web local ....................29
Figure 20 –Programme démontrant la gestion des données en local...........................................32
Figure 21 - Code de géolocalisation................................................................................................35

INTRODUCTION
HTML5, la nouvelle version de notre bon vieux langage HTML, est aujourd’hui la technologie
web qui est sur toutes les lèvres ! De nombreux acteurs et « grands » de l’internet l’ont déjà
adopté.
Nous allons, dans ce rapport, découvrir ensemble ce que cette nouvelle version nous apporte de
plus, et allons également tester quelques-unes de ses fonctionnalités.
La finalisation de HTML5 est prévue pour 2014 mais les nouveaux navigateurs intègrent déjà
(ou tentent d’intégrer) les spécifications validées du W3C (World Wide Web Consortium).
Dans HTML5, je note de nombreuses fonctionnalités nouvelles et surtout de nombreuses
facilités pour le bonheur des développeurs d’applications web. En effet, HTML5 est plus simple
à utiliser, multiplateforme, “ouvert”, et intégrant de nombreuses API (composants permettant à
des programmes de communiquer entre eux).
Dans ce rapport, en premier lieu, ne seront présentées que les nouveautés HTML5 qui m’ont
particulièrement plu tout au long de mes recherches et essais ainsi que celles qui me semblent
majeures dans l’avenir des nouvelles technologies.
Cependant, mon intérêt est particulièrement tourné vers le monde de la mobilité et c’est la
raison pour laquelle j’ai souhaité cadrer ce vaste sujet qu’est le HTML5 sur la partie offline
(mode déconnecté). Ce qui me permet également d’aborder les bases de données en local et la
géolocalisation.

Tout au long de ce rapport, j’affiche les codes utilisés lors de mes tests et copie d’écran du rendu.
Egalement, le lecteur est invité à se rendre sur le site http://sitedemo.10001mb.com que j’ai
ouvert pour cette occasion.
Les navigateurs utilisés pour mes tests ont été :
 Fixefox 8
 Chrome 15.0
 Safari 5.1 sur PC
 IE 9
 Opéra 11.50
 Safari mobile sur iPad 4.3.3 et sur iPhone 4.3.3.

NOUVEAUTES
I - GENERALITES
A. DE NOUVEAUX MARQUEURS. POURQUOI ? COMMENT ?
De nouvelles balises html apparaissent avec la version 5 de HTML. On remarque que ce sont
particulièrement des balises très souvent utilisées dans la structure d’un document HTML. En
effet suite à l’examen de plusieurs pages sur le web, des études réalisées par Google ont
démontré le hit d’utilisation de balises html.
Quelques études :
http://code.google.com/intl/fr/webstats/2005-12/classes.html
http://dev-files.moyopera.com/articles/572/idlist-url.htm
Ainsi, par exemple, dans les 3 premières positions, on obtient l’entête, le pied page et le contenu.
Ce constat a, alors, entraîné l’apparition des nouveaux marqueurs <header>, <footer>,
<content>, etc..... correspondant.
Ce sont des balises idéales pour les blogs, les CMS (systèmes de gestion de contenu tels que
joomla, wordpress, prestashop,…) et qui fournissent plus d’informations sémantiques qu’avec
l’élément <div> utilisé dans les versions antérieures de HTML.

B. LA STRUCTURE D’UNE PAGE
Alors qu’en HTML4, on a ce type de structure : En HTML5, on obtient cela :
Voici le code de la première page web que j’ai créée. Cet exemple peut être testé à l’adresse
suivante : http://sitedemo.10001mb.com/miage/annexe1/
div id= « header »
div id=
« sideba
r»
div id= « footer »
div class= « post »
div class= « post »
header
nav
footer
article
article
Figure 1 - structure d'une page HTML4/HTML5

<!DOCTYPE HTML>
<html lang=fr>
<head>
<title>Un super titre</title>
<link rel="stylesheet" href="../css/styleAnnexe1.css">
</head>
<body>
<header>
<h1>Blog à part !</h1>
</header>
<nav>
<h2>Mon menu</h2>
<ul>
<li><a href="http://www.google.fr">Google</a></li>
<li><a href="http://www.dep.u-picardie.fr/">D.E.P. Amiens</a></li>
</ul>
</nav>
<article>
<h3>Mon article 1 modifiable</h3>
<div contenteditable="true">
<p>Contenu article 1.</p>
<p>Cette zone est modifiable. On peut aussi y glisser-déposer des objets.
Grâce à l'attribut "contenteditable".</p>
</div>
</article>
<article>
<h3>Mon article 2 en lecture seule</h3>
<p> Contenu article 2.</p>
<p> Cette zone n'est pas modifiable. Elle est donc en lecture seule.</p>
</article>
<article>
<h3>Mon article 3 avec image déplaçable</h3>
<p> Contenu article 3.</p>
<div id="dd" draggable="true"><img src="../images/loupe.gif">
Vous pouvez glisser et déposer l'image ci-contre et ce texte grâce à l'attribut
"draggable".
</div>
</article>
<footer>
<p><a href='mailto:ylarcher@hotmail.com'>Mon pied de page contact</a></p>
</footer>
</body>
</html>
Figure 2 - Code de ma première page HTML5

II - AUTRES NOUVEAUTES
A. CONTENTEDITABLE
Comme le montre le code, ci-dessus, on voit que « Contenteditable » fait désormais
officiellement partie du langage et des spécifications de HTML.
B. LA BALISE <A>
Une autre nouveauté est la possibilité d’envelopper plusieurs éléments dans un lien (balise <a>).
C’est devenu une structure valide en HTML5. Ainsi le lien peut englober à la fois un titre, un
paragraphe et une image par exemple.

III - LE MULTIMEDIA
HTML5 nous apportent trois nouvelles balises pour pouvoir écouter de la musique <audio>,
pour regarder des vidéos <video> et pour mettre des animations dans nos pages <canvas>.
Ce sont des éléments complètement inclus dans la page html, pris en charge par le navigateur
(donc natifs) alors que dans les précédentes versions de HTML, ils sont encore « enfouis » dans
des balises <embed> ou <objet> avec de nombreuses lignes de code.
L’élément vidéo de HTML5 permet aussi que ses données soient manipulées, modifiées, telles
que la modification de l'éclairage, l'ajout de fonctionnalités 3D,…etc.
Très simplement, le code utile pour intégrer de la vidéo dans une page HTML ne tient que sur
une ligne. « <video src= … » controls width=50px height=50px preload></video>”. Voir plus
loin une copie d’écran et le code source de ma page video.
Quelques attributs agrémentent, par exemple, la balise vidéo :
preload, qui permet de demander au navigateur de pré-charger le média dans un tampon
au moment du chargement de la page et avant que l’utilisateur n’active les contrôles.
controls pour activer l’affichage de l’interface de contrôle du média
loop pour lire le média en boucle
src pour fournir l’url, le type mime et le codec du fichier média à lire
poster, une image qui sera affichée si le navigateur ne supporte pas la balise "video"

La possibilité de rattacher plusieurs sources à une balise audio ou vidéo est une option très
intéressante. Un média peut être lu par différents matériels et ainsi une de ses sources pourra
être optée selon la configuration écran du matériel utilisé ou selon les codecs proposés, etc….
En testant ma page, intégrant une petite vidéo, seuls Safari 5.1.1 et Chrome 15.0 ont su lire son
contenu.
Avec la balise
<video>
IE 9 Firefox 8 Opéra
11.50
Chrome
15.0
Safari 5.1.1
PC
Safari
mobile
Lecture de la
vidéo ?
Non. L’encart
de la vidéo
est tout noir
avec une
croix rouge.
Non. Le
chargement
de la vidéo
tourne dans
le vide.
Non.
L’encart de
la vidéo est
vide
Oui Oui. Non. L’encart
de la vidéo est
tout noir.
Affichage des
boutons de
contrôles ?
Non Non Oui Oui Oui Non
Figure 3 - Comparaison des navigateurs sur l'affichage d’une vidéo
Figure 4 - une page avec de la vidéo lue par Safari 5.1.1

Le code de cette page tient en peu de lignes.
Comme c’est le navigateur qui intègre le player vidéo (ou audio), côté client, on peut donc
atteindre ce player, le modifier, le personnaliser, l’agrémenter avec du javascript.
Tester ce code à l’adresse suivante : http://sitedemo.10001mb.com/miage/annexe3/
IV - LES FORMULAIRES
Je me suis amusée à tester les formulaires et, qu’elle fut ma déception de constater qu’à ce jour,
très peu de nouveaux navigateurs affichent fidèlement les nouveaux marqueurs de formulaire !
De plus, à mon sens, les nouveautés dans les formulaires ne sont pas si extraordinaires que cela.
Mais, attardons-nous quand même sur quelques nouveaux attributs.
<!DOCTYPE HTML>
<html lang=fr>
<head>
<title>Ma page vidéo HTML5</title>
<link rel="stylesheet" href="../css/styleannexes.css">
</head>
<body>
<h2>3 secondes pour vous faire rire</h2>
<video src="../videos/3 seconds make you laugh.mp4" width="300px" height="300px" controls
preload></video>
</body>
</html>

J’ai réalisé un formulaire simple contenant les nouveaux attributs de la balise « input ». Dans le
tableau ci-dessous, je présente une comparaison des navigateurs selon leur façon d’afficher ces
nouveaux attributs.

AFFICHAGE OU NON DES NOUVEAUX ATTRIBUTS DU MARQUEUR
INPUT
Attributs de
input
IE 9 Firefox 8 Opéra 11.50 Chrome 15.0 Safari 5.1
Zone de texte
suggérée avec
placeholder
non oui oui oui oui
Zone de texte
affichant les
valeurs d’une
liste
(list et datalist)
non oui oui non non
Email Non. Pas de
contrôle du
format
Oui + contrôle
le format
lorsqu’on sort
de la zone de
saisie
Oui + contrôle
du format
Pas de contrôle
du format
Non. Pas de
contrôle du
format
url Non. Pas de
contrôle du
format
Oui + contrôle
le format
lorsqu’on sort
de la zone de
saisie
Oui + ajoute le
protocole
http://
Oui, contrôle le
format
Non. Pas de
contrôle du
format
date non non Format date +
fenêtre popup
calendrier
Oui. Il n’y a pas
de fenêtre
popup
calendrier mais
une liste
déroulante de
dates
Oui. Il n’y a pas
de fenêtre
popup
calendrier mais
une liste
déroulante de
dates
number non non Oui. Min, max
et step respecté
Oui. Min, max
et step respecté
Oui. Min, max
et step respecté
range non non Oui avec
marqueur
d’échelle
Oui. Pas de
marqueur
d’échelle
Oui. Pas de
marqueur
d’échelle.
color non non Oui non non
Figure 5 - Comparaison des navigateurs sur l'affichage des nouveaux attributs

Le navigateur Opéra, est donc le navigateur qui supporte le mieux ces nouveaux types du
marqueur input. Voir ci-dessous quelques copies d’écran de mon formulaire chez Opéra.
Au niveau CSS, j’ai intégré quelques lignes permettant de repérer, sur le formulaire :
 les champs requis (en orange),
 les champs valides (en vert)
 et les champs non valides au cours de la saisie dans le contrôle (en rouge).
Le CSS appliqué aux champs obligatoires, valides ou non est le suivant :
Figure 6 - Extrait du CSS du formulaire
Figure 7 - Rendu CSS et attributs input chez Opéra

Figure 8 - Rendu de l'attribut date chez Opera
Figure 9 - Rendu de l'attribut color chez Opera

Testez ce formulaire à l’adresse suivante : http://sitedemo.10001mb.com/miage/annexe2/
L’affichage de ce même formulaire sur l’iPad démontre un tout autre comportement : Le clavier
de l’Ipad, non seulement reconnait les nouveaux attributs mais aussi, change selon le type de
données à recevoir dans l’élément.
Figure 10 – Ici, le clavier de l'iPad s'adapte pour la saisie de numéros de téléphone

Figure 11 – Ici, le clavier de l'iPad s'adapte pour la saisie d’une adresse email
Figure 12 – Ici, le clavier de l'iPad s'adapte pour la saisie d’une url

Le code ainsi produit pour le formulaire est de la forme suivante :
<!DOCTYPE HTML>
<html lang=fr>
<head>
<title>Mon formulaire HTML5</title>
<link rel="stylesheet" href="../css/styleannexes.css">
</head>
<body>
<form name=MyForm>
<br>Exemple d'une zone de saisie avec texte suggéré et présentant une liste déroulante<br>
<label for="text">un prénom</label>
<input type="text" placeholder="saisir un prénom ici" name="text" list="mylist" /><br>
<datalist id="mylist">
<option value="Maxime">
<option value="Catherine">
<option value="Marie">
<option value="Sylvain">
</datalist>
<br>
<br>Exemple d'une zone de saisie de type adresse email<br>
<label for="email">une adresse email</label><input type="Email" name="email" required
/><br>
<br>Exemple d'une zone de saisie de type url<br>
<label for="url">une adresse internet</label><input type="url" name="url" required /><br>
<br>Exemple d'une zone de saisie d'une date avec calendrier suggéré<br>
<label for="date">une date</label><input type="date" name="date" /><br>
<br>Exemple d'une zone de saisie de numéros de téléphone<br>
<label for="tel">un numéro de téléphone</label><input type="tel" name="tel" required
/><br>
<br>Exemple d'une zone de saisie des couleurs<br>
<label for="color">une couleur</label><input type="color" name="color" /><br>
<br>Exemple d'une zone de saisie d'un nombre entre 10 et 50<br>
<label for="number">un nombre</label><input type="number" min =10 max=50 step=10
name="number" /><br>
<br>Exemple d'une zone de saisie de type range<br>
<label for="range">une valeur</label><input type="range" name="range" /><br>
<br><output name="oo" for="number+range">
</form>
</body>
</html>
Figure 13 - Code de mon formulaire HTML5

POSSIBILITES D’INNOVATION
I - LES INNOVATIONS DANS L’INTERNET MOBILE
Une des missions du W3C est de s'assurer que le Web soit disponible autant que possible sur
tout type d’appareils. Et ces dernières années, les appareils mobiles sont devenus de plus en plus
nombreux (téléphone, pda, tablette, ordinateur portable…) et deviennent de plus en plus
puissants. Le rôle du Web, et par conséquent des navigateurs, a changé pour devenir comme
une sorte de plateforme pour les contenus. Et les applications et les services sur ces appareils
mobiles sont donc maintenant très importants.
Nous avons vu dans le chapitre des nouveautés multimédia que, grâce à HTML5, le développeur
peut embarquer l’audio et la vidéo dans des applications, et aussi réaliser des manipulations
intéressantes, telles que la modification de l'éclairage, l'ajout de fonctionnalités 3D et la
reconnaissance d'objet ou de visages.
Avec de telles possibilités de contrôle du média, le développeur est en mesure de concevoir des
applications mobiles réellement innovantes, pouvant piloter et personnaliser les données vidéo
en mobilité.
Il peut, par exemple, combiner la géolocalisation aux images captées grâce à l'appareil photo-
numérique intégré, et ainsi proposer un service totalement personnalisé et localisé.
L’internet mobile est un monde avec tellement de possibilités que j’ai choisi de centrer cette
partie du rapport sur cet univers. Trois fonctionnalités HTML5 me paraissent particulièrement
intéressantes à aborder :

Le mode déconnecté
les bases de données locales
la géolocalisation
Pour trois raisons :
1 Ce sont les nouveautés les plus marquantes du langage HTML5,
2 Ce sont les navigateurs web mobiles (nécessitant donc ces 3 points) qui implémentent
le mieux aujourd’hui les spécifications du HTML5
3 HTML5 est adopté par la quasi-totalité des constructeurs et éditeurs d’OS mobiles. On
est donc, justement, dans le cœur de l’objectif de HTML5 qui cherche à unifier.

II - LE MODE DECONNECTE
Il devient de plus en plus important de pouvoir continuer à utiliser une application web même
sans connexion 3G, sans connexion wifi, ou tout simplement en cas de connexion trop lente
voire défaillante.
C’est un changement dans nos habitudes mais cela devient de plus en plus incontournable car
on est habitué à travailler avec des navigateurs ouverts sur le web.
De plus en plus, c’est le navigateur qui va gérer en local (en cache) l’application web, pour que
cette dernière puisse continuer à fonctionner.
Pour fonctionner en mode déconnecté :
1. L’application a besoin d’un fichier qu’on appelle « le manifeste » et qui liste les
fichiers que le navigateur doit ou ne doit pas mettre en cache.
2. Le navigateur remplit son cache de fichiers CSS, PHP et images.
Dans l’exemple qui suit, j’ai créé une page simple incluant une image verte, la date et l’heure en
cours et un message informant le visiteur qu’il est en mode connecté. Hors connexion, j’ai opté
pour que la page affiche une image rouge ainsi qu’un message complètement différent.
Un fichier .manifest récupère les fichiers à mettre en cache. La copie d’écran ci-dessous montre
bien que Google Chrome 15.0 a bien intégré dans son AppCache les fichiers demandés.

Figure 14 - Les fichiers du manifest ont été chargés dans le cache de Chrome
Figure 15 - Les ressources affichent des détails sur les fichiers en cache de Chrome

Figure 16 - En mode déconnecté, les pages en cache sont chargés grâce au manifest et affichés
Vous pouvez tester ce code à l’adresse suivante :
http://sitedemo.10001mb.com/miage/annexe4/

III - LES DONNEES EN LOCAL
Aujourd’hui, pour conserver des données, on les place dans une base de données sur serveur ou
encore dans des cookies pour le côté client.
Pour le côté client, HTML5 offre non seulement une API permettant de configurer, récupérer et
supprimer les données conservées, mais en plus, offre deux façons de les stocker :
1. Le stockage Web (Web Storage)
2. La base de données SQL Web (Web SQL Database)
A. LE STOCKAGE WEB
Le stockage web consiste à associer une valeur à une clé. Aucune nécessité de langage SQL. Il est
limité à 5 Mo par défaut, et sépare proprement les données de session et les données à plus long
terme. L’API, identique pour les deux objets, est fournie pour accéder en lecture et en écriture
aux données stockées. Les deux objets, sessionStorage et localStorage sont plutôt utilisés pour
faire persister des données utilisateurs, pour la mémorisation d’identifiants de sessions.
 Pour les données de session, il n’y a pas de date d’expiration. Par conséquent, les données
expirent à la fermeture de la fenêtre (sessionStorage). L'objet sessionStorage est
surtout utile pour conserver des données temporaires qui doivent être enregistrées et
restaurées si la fenêtre du navigateur est accidentellement ou volontairement rafraichie.

 Quant aux données à plus long terme, elles sont conservées dans l’objet
« localStorage ». Elles sont disponibles même après la fermeture du navigateur tant
qu’elles ne sont pas détruites explicitement par l’utilisateur.
Chrome et Safari disposent tous les deux d'outils intégrés qui permettent de voir les données
enregistrées dans localStorage. Cela est très utile pour débugger les applications qui
l'utilisent.
B. LA BASE DE DONNEES SQL WEB
Ici, il s’agit d’une vraie base de données qui ajoute au navigateur la capacité de stocker et
d’organiser des données en local.
Une API est fournie afin de créer la base, les tables et de pouvoir manipuler les données. Ce
moyen de stocker les données est très utilisé dans le web mobile (téléphone et tablette). Il est
surtout employé pour la mémorisation de grandes quantités de données sans devoir exploiter
les cookies ou le dialogue constant avec une base de données distante, en Ajax par exemple.
//écriture
window.sessionStorage.setItem(‘LaDateAujourdhui’, new Date());
window.sessionStorage.setItem(‘Login’, ‘Yolande’);
window.sessionStorage.setItem(‘Password’, 12345678);
//lecture
for (var i = 0; i < sessionStorage.length; i++)
{
alert(sessionStorage.key(i) + '=' + sessionStorage.getItem(sessionStorage.key(i)));
}
//suppression
sessionStorage.removeItem('OpenLayers');
Figure 17 - L'objet sessionStorage avec quelques méthodes ; setitem, getitem et removeitem

B1 - LA CREATION DE LA BASE
La première instruction à fournir est la création de la base avec la commande OpenDatabase et
ses paramètres :Nom de la base, version, description de la base, taille de la base.
B2 - LA CREATION DE TABLES
La création de tables se fait en utilisant la méthode executeSql d’une transaction. Elle nécessite
4 paramètres qui sont l’instruction SQL, les paramètres de l’instruction, la fonction appelée en
cas de succès de la transaction, la fonction appelée en cas d’erreur.
B3 - LA MANIPULATION DE DONNEES
L’affichage des données et les actions sur les données sont gérés par la commande executeSql
d’une transaction
J’ai réalisé un programme dont l’objectif est d’insérer et de supprimer des données en base local
via un formulaire (grâce aux commandes SQL Insert et Delete incluses). De plus, le formulaire
affiche le texte fraîchement saisi (grâce à la commande SQL Select).
Application.webdb.open = function() {
var dbSize = 5 * 1024 * 1024; // 5MB
Application.webdb.db = openDatabase(‘BDDYL’, '1.0', ‘ma base de
données en local’,dbSize);
Application.webdb.getAllTodoItems = function(renderFunc) {
Application.webdb.db.transaction(function(tx) {
tx.executeSql('SELECT * FROM Person', [], renderFunc,
Application.webdb.onError);
});
}

Ci-dessous une copie de l’écran de Safari mobile (sur mon iPhone) testant à merveille
l’utilisation de ces données en local, ainsi qu’une copie écran du comportement de Chrome 15.0.
Figure 18 - Ma base de données web local sur Safari mobile
Figure 19 - Chrome 15.0 en mode Debug affichant mes données en base web local

Le code détaillé, ci-après, permet de comprendre l’utilisation du webdb.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title> Ma base de données en local </title>
<script type="text/javascript">
var self = this;
/** Initialisation de la base de donnée **/
var Application = {};
Application.webdb = {};
Application.webdb.db = null;
Application.webdb.open = function() {
var dbSize = 5 * 1024 * 1024; // 5MB
Application.webdb.db = openDatabase('BDDYL', '1.0', ‘ma base de
données en local',dbSize);
}
/** Gestion des erreurs OnSuccess OnError ***/
Application.webdb.onError = function(tx, e) {
alert('Something unexpected happened: ' + e.message );
}
Application.webdb.onSuccess = function(tx, r) {
// re-render all the data
// loadTodoItems is defined in Step 4a
Application.webdb.getAllTodoItems(self.loadTodoItems);
}
Application.webdb.createTable = function() {
tx.executeSql('CREATE TABLE IF NOT EXISTS ' +
'Person(ID INTEGER PRIMARY KEY ASC,
Name TEXT, added_on DATETIME)', []);
});
}
Application.webdb.addTodo = function(todoText) {
Application.webdb.db.transaction(function(tx){
var addedOn = new Date();
tx.executeSql('INSERT INTO Person(Name, added_on) VALUES
(?,?)',
[todoText, addedOn],
Application.webdb.onSuccess,
});
}

Application.webdb.getAllTodoItems = function(renderFunc) {
tx.executeSql('SELECT * FROM Person', [], renderFunc,
});
}
self.loadTodoItems = function(tx, rs) {
var rowOutput = "";
for (var i=0; i < rs.rows.length; i++) {
rowOutput += self.renderTodo(rs.rows.item(i));
}
var todoItems = document.getElementById('todoItems');
todoItems.innerHTML = rowOutput;
}
self.renderTodo = function (row) {
return '<li>' + row.Name + ' [<img src="bt_supprimer.gif"
onclick="Application.webdb.deleteTodo(' + row.ID + ');"/>]</li>';
}
Application.webdb.deleteTodo = function(id) {
tx.executeSql('DELETE FROM Person WHERE ID=?',
[id],Application.webdb.onSuccess, Application.webdb.onError);
});
}
function initApplication() {
if(window.openDatabase) {
Application.webdb.open();
Application.webdb.createTable();
Application.webdb.getAllTodoItems(self.loadTodoItems);
}
}
function addName() {
var tfName = document.getElementById('tfName');
if(tfName.value != '') {
Application.webdb.addTodo(tfName.value);
tfName.value = '';
}
}

Vous pouvez tester ce code à l’adresse suivante :
</script>
</head>
<body onload="initApplication();">
<h1> WebDataBases example </h1>
<div id="todoItems"></div>
<input type="text" id="tfName">
<button type="button" onclick="addName()">Ajouter</button>
</body>
</html>
Figure 20 –Programme démontrant la gestion des données en local

C. LA GEOLOCALISATION
En pratique => www.html5-css3.fr/html5/turoriel-geolocalisation-html5
GeoLocation, l'API de géolocalisation, a été implémentée dans plusieurs appareils mobiles
dont l'iPhone, offrant aux développeurs un accès direct aux coordonnées GPS via le
navigateur.
L’API de géolocalisation permet de trouver la position exacte d’un visiteur . De nombreuses
applications l’utilisent déjà en cartographie, dans les réseaux sociaux, dans de nombreuses
applications iPhone téléchargeables.
L’API présente deux méthodes : getCurrent et watchPosition. Comme leur nom l’indique,
l’un pour obtenir la position courante de l’utilisateur, l’autre pour surveiller la position de
l’utilisateur .
J’ai emprunté au site http://www.html5-css3.fr/html5, le code de géolocalisation ci-dessous
et que j’ai voulu testé sur les différents navigateurs de dernières générations et sur l’iPhone.
Vous pouvez voir en œuvre ce code à l’adresse suivante :

Voici un exemple de code, tiré du site HTML5 et CSS3, pour géolocaliser
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map_canvas { height: 100% ; width:100%;}
</style>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript">
var previousPosition = null;
function initialize() {
map = new google.maps.Map(document.getElementById("map_canvas"), {
zoom: 19,
center: new google.maps.LatLng(48.858565, 2.347198),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
}

if (navigator.geolocation)
var watchId = navigator.geolocation.watchPosition(successCallback, null,
{enableHighAccuracy:true});
else
alert("Votre navigateur ne prend pas en compte la géolocalisation HTML5");
function successCallback(position){
map.panTo(new google.maps.LatLng(position.coords.latitude, position.coords.longitude));
var marker = new google.maps.Marker({
position: new google.maps.LatLng(position.coords.latitude, position.coords.longitude),
map: map
});
if (previousPosition){
var newLineCoordinates = [
new google.maps.LatLng(previousPosition.coords.latitude,
previousPosition.coords.longitude),
new google.maps.LatLng(position.coords.latitude, position.coords.longitude)];
var newLine = new google.maps.Polyline({
path: newLineCoordinates,
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 2
});
newLine.setMap(map);
}
previousPosition = position;
};
</script>
</head>
<body onload="initialize()">
<div id="map_canvas"></div>
</body>
</html>
Figure 21 - Code de géolocalisation

PERSPECTIVES ECONOMIQUES
I – 3 CAS DE RUEE VERS LE HTML5
« Plus c’est simple à mettre en place et plus c’est utilisé par les développeurs ». Cette phrase
empruntée sur le blog des geeks et des lettres (http://desgeeksetdeslettres.com/blog/), prend
tout son sens !
Il en est une autre que j’ai retenue où Pierre-Olivier Carles (http://www.pocarles.com), sur son
billet intitulé « le temps des hybrides », dit que : « [….] HTML5 est extrêmement puissant,
prometteur [….] En gros, on sait que ce sera génial, on voit que ce sera génial, parfois c’est même
déjà génial là tout de suite [….] ».
Ces deux phrases montrent à quel point HTML5 est aujourd’hui important dans l’avenir du web
et expliquent pourquoi beaucoup d’acteurs du web se sont déjà centrés ou ont mis leur priorité
sur le HTML5, alors que certaines fonctions, qu’une application native pourrait offrir, sont
encore impossibles à développer en HTML5.
A. ADOBE FLASH PLAYER
Face à cet engouement pour le HTML5, quel est donc l’avenir de certains produits ou de
certaines marques qui jusqu’à « hier » se positionnaient sur une part de marché très importante
dans le monde des développements web ?

C’est le cas du logiciel Flash qui comblaient nos besoins en animation et multimédia.
Aujourd’hui, HTML5 marche de plus en plus sur ses plates-bandes en intégrant de très simples
balises audio, vidéo ou canvas, en mode natif.
Adobe, constatant bien une perte de vitesse du Flash, a tout récemment décidé d’arrêter le
développement de Flash Player Mobile (source Zdnet :
http://www.zdnet.com/blog/perlow/exclusive-adobe-ceases-development-on-mobile-browser-
flash-refocuses-efforts-on-html5-updated/19226).
En se concentrant sur le HTML5, il propose un nouveau logiciel : « Adobe Edge »,
(http://labs.adobe.com/technologies/edge/) en version preview pour le moment. Ce dernier
permet de créer facilement, à la manière un peu de flash, des animations et de les enregistrer au
format HTML5, CSS3 et Javascript. Les animations créées sont en plus compatibles iPhone,
iPad et navigateurs récents, etc…
Ainsi de nombreux acteurs de l’internet, de nombreuses marques cherchent à se distinguer en
créant de nouvelles applications web HTML5, en abandonnant leurs applications plus
anciennes. Il en va de l’avenir d’une société, d’une marque afin d’atteindre les objectifs. Ceci est
fait, parfois, en concurrence avec plusieurs autres applications natives déjà existantes sur le
marché, et proposant les mêmes fonctionnalités !
Notons, au passage, qu’Apple a fait le choix de ne pas prendre en charge Flash dans ses produits
de dernières générations (iPod, iPhone, iPad).
B. DEEZER
Enfin, on voit aussi, certaines situations où de plus en plus de sites de grande audience, tels que
YouTube, Dailymotion, proposent, ou ont proposé, une version HTML5 de leur site pour une
utilisation plus fluide, plus rapide de leur contenu multimédia.

Deezer, par exemple, a conçu un nouveau site en HTML5 (communiqué de presse de juin 2011 :
http://cdn-files.deezer.com/pdf/press/CP_nouvelle_version_Deezer_06_06_11.pdf). Cette
nouvelle version du site permet à Deezer d’améliorer son service qui, paraît-il, est maintenant 5
fois plus rapide que celui d’avant.
Deezer a maintenu toutes ses fonctionnalités et en plus, en a profité pour s’infiltrer sur le
marché des réseaux sociaux. Cela permet alors à ses clients (dont moi) d’écouter les chansons
préférées de ses contacts.
Tout ceci a un coût. Développer en HTML5 est probablement moins coûteux. Mais les
entreprises, s’engouffrent dans les développements qui leur semblent légitimes, utiles sans
forcément savoir faire la différence entre la nécessité de développer une application native et la
nécessité de développer une application HTML5.
C. GOOGLE GEARS
Google Gears, logiciel de Google venant en extension dans les navigateurs FireFox et Internet
Explorer, permet l’accès en offline à des services.
Le fait que Google a souhaité arrêter Gears et par la suite préférant donner la priorité au
HTML5, est un signe fort, un pari certain, que les capacités de stockage en local seront
suffisantes pour répondre aux besoins des développeurs, quels qu’ils soient.

II - UN AUTRE MARCHE AUTOUR DE L’HTML5
Il est possible de faire tant de choses avec les applications web HTML5 que cela a entraîné :
l’arrivée de nombreux services (créer des templates HTML5, convertir des fichiers en
HTML5 en ligne,….)
mais aussi l’ouverture de nombreux « stores » (Apple Store, Chrome Web Store) via les
navigateurs, pour acheter et télécharger les applications (mobiles) de son choix.

CONCLUSION
I - UN BEL AVENIR POUR LE WEB
Toute cette recherche nous amène à un même point et nous confirme que ce sont les navigateurs
qui vont devoir, demain, tout gérer, tout intégrer, tout prévoir, pour que les applications web
soient légères, rapides dans les exécutions et aussi simples dans la réalisation.
Tout comme les CMS (système de gestion de contenu), HTML5 va permettre au développeur de
se concentrer sur le contenu de son site, sur son optimisation indépendamment de son système
d’exploitation ou de son navigateur.
Et c’est ainsi qu’avec plus de concentration sur les contenus que la cinquième version de HTML
ouvre en effet la voie à une nouvelle génération d’applications et de services en ligne.
Mais ne nous leurrons pas, de nombreux inconvénients sont présents et persisteront tant que la
finalisation de HTML5, prévue dans 3 ans, ne sera pas aboutie.
II - MAIS EN ATTENDANT…
Dans ce rapport, j’ai présenté des fonctionnalités ne pouvant être testées qu’en utilisant
uniquement les navigateurs de dernières générations.

Mais comme ces nouveaux navigateurs, devant constamment se mettre à jour tant bien que mal,
n’intègrent pas encore l’ensemble des nouvelles spécifications du W3C, vous pourrez constater
que les applications développées ne réagissent pas, à l’heure actuelle, comme on le souhaiterait.
Aujourd’hui, le développeur est dans l’obligation d’intégrer dans son code des alternatives, ou de
réécrire tout ou partie de son code, afin de prendre en compte l’éventuelle incompréhension de
ces nouveaux navigateurs mais aussi l’utilisation actuelle des navigateurs moins récents.

REFERENCES
I - ADRESSES INTERNET
W3C – le web et les appareils mobiles
http://www.w3.org/Mobile/
Adobe Edge
http://labs.adobe.com/technologies/edge/
HTML5 – CSS3.fr – Tutoriels et démonstrations HTML5 et CSS3
http://html5-css3.fr
Blog des geeks et des lettres
http://desgeeksetdeslettres.com/blog
blog de Pierre-Olivier Carles
http://www.pocarles.com

II - LIVRES
● INTRODUCTION A HTML5
Bruce Lawson, Remy Sharp
Edition Pearson – Janvier 2011
● HTLM5 : DE LA PAGE WEB A L’APPLICATION WEB
Jean-Pierre Vincent, Jonathan Verrecchia
Edition Dunod – juillet 2011

HTML5 - Nouveautés, possibilité d'innovation, perspectives économiques - 2011

Recommandé

Recommandé

Contenu connexe

Similaire à HTML5 - Nouveautés, possibilité d'innovation, perspectives économiques - 2011

Similaire à HTML5 - Nouveautés, possibilité d'innovation, perspectives économiques - 2011 (20)

HTML5 - Nouveautés, possibilité d'innovation, perspectives économiques - 2011