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

44
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

description

A l'heure où les recommandations officielles du HTML5 par W3C doivent sortir au 4ème trimestre 2014 (et celles de HTML5.1 au 4ème trimestre 2016), petit retour en arrière sur les nouveautés que nous a apporté HTML5 depuis son apparition.

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

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

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

M2 MIAGE – D511 – HTML5 – Yolande Larcher-Baroung – 26/11/2011 Page 2 sur 44

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

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

M2 MIAGE – D511 – HTML5 – Yolande Larcher-Baroung – 26/11/2011 Page 3 sur 44

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

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

M2 MIAGE – D511 – HTML5 – Yolande Larcher-Baroung – 26/11/2011 Page 4 sur 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

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

M2 MIAGE – D511 – HTML5 – Yolande Larcher-Baroung – 26/11/2011 Page 5 sur 44

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.

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

M2 MIAGE – D511 – HTML5 – Yolande Larcher-Baroung – 26/11/2011 Page 6 sur 44

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.

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

M2 MIAGE – D511 – HTML5 – Yolande Larcher-Baroung – 26/11/2011 Page 7 sur 44

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.

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

M2 MIAGE – D511 – HTML5 – Yolande Larcher-Baroung – 26/11/2011 Page 8 sur 44

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

div id= « footer »

div class= « post »

div class= « post »

header

nav

footer

article

article

Figure 1 - structure d'une page HTML4/HTML5

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

M2 MIAGE – D511 – HTML5 – Yolande Larcher-Baroung – 26/11/2011 Page 9 sur 44

<!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:[email protected]'>Mon pied de page contact</a></p> </footer> </body> </html>

Figure 2 - Code de ma première page HTML5

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

M2 MIAGE – D511 – HTML5 – Yolande Larcher-Baroung – 26/11/2011 Page 10 sur 44

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.

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

M2 MIAGE – D511 – HTML5 – Yolande Larcher-Baroung – 26/11/2011 Page 11 sur 44

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"

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

M2 MIAGE – D511 – HTML5 – Yolande Larcher-Baroung – 26/11/2011 Page 12 sur 44

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

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

M2 MIAGE – D511 – HTML5 – Yolande Larcher-Baroung – 26/11/2011 Page 13 sur 44

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>

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

M2 MIAGE – D511 – HTML5 – Yolande Larcher-Baroung – 26/11/2011 Page 14 sur 44

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.

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

M2 MIAGE – D511 – HTML5 – Yolande Larcher-Baroung – 26/11/2011 Page 15 sur 44

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

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

M2 MIAGE – D511 – HTML5 – Yolande Larcher-Baroung – 26/11/2011 Page 16 sur 44

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

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

M2 MIAGE – D511 – HTML5 – Yolande Larcher-Baroung – 26/11/2011 Page 17 sur 44

Figure 8 - Rendu de l'attribut date chez Opera

Figure 9 - Rendu de l'attribut color chez Opera

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

M2 MIAGE – D511 – HTML5 – Yolande Larcher-Baroung – 26/11/2011 Page 18 sur 44

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

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

M2 MIAGE – D511 – HTML5 – Yolande Larcher-Baroung – 26/11/2011 Page 19 sur 44

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

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

M2 MIAGE – D511 – HTML5 – Yolande Larcher-Baroung – 26/11/2011 Page 20 sur 44

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

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

M2 MIAGE – D511 – HTML5 – Yolande Larcher-Baroung – 26/11/2011 Page 21 sur 44

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 :

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

M2 MIAGE – D511 – HTML5 – Yolande Larcher-Baroung – 26/11/2011 Page 22 sur 44

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.

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

M2 MIAGE – D511 – HTML5 – Yolande Larcher-Baroung – 26/11/2011 Page 23 sur 44

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.

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

M2 MIAGE – D511 – HTML5 – Yolande Larcher-Baroung – 26/11/2011 Page 24 sur 44

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

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

M2 MIAGE – D511 – HTML5 – Yolande Larcher-Baroung – 26/11/2011 Page 25 sur 44

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/

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

M2 MIAGE – D511 – HTML5 – Yolande Larcher-Baroung – 26/11/2011 Page 26 sur 44

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.

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

M2 MIAGE – D511 – HTML5 – Yolande Larcher-Baroung – 26/11/2011 Page 27 sur 44

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

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

M2 MIAGE – D511 – HTML5 – Yolande Larcher-Baroung – 26/11/2011 Page 28 sur 44

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); }); }

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

M2 MIAGE – D511 – HTML5 – Yolande Larcher-Baroung – 26/11/2011 Page 29 sur 44

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

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

M2 MIAGE – D511 – HTML5 – Yolande Larcher-Baroung – 26/11/2011 Page 30 sur 44

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() { Application.webdb.db.transaction(function(tx) { 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.onError); }); }

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

M2 MIAGE – D511 – HTML5 – Yolande Larcher-Baroung – 26/11/2011 Page 31 sur 44

Application.webdb.getAllTodoItems = function(renderFunc) { Application.webdb.db.transaction(function(tx) { tx.executeSql('SELECT * FROM Person', [], renderFunc, Application.webdb.onError); }); } 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) { Application.webdb.db.transaction(function(tx) { 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 = ''; } }

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

M2 MIAGE – D511 – HTML5 – Yolande Larcher-Baroung – 26/11/2011 Page 32 sur 44

Vous pouvez tester ce code à l’adresse suivante :

http://sitedemo.10001mb.com/miage/annexe5/

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

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

M2 MIAGE – D511 – HTML5 – Yolande Larcher-Baroung – 26/11/2011 Page 33 sur 44

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 :

http://sitedemo.10001mb.com/miage/annexe6/

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

M2 MIAGE – D511 – HTML5 – Yolande Larcher-Baroung – 26/11/2011 Page 34 sur 44

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

});

}

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

M2 MIAGE – D511 – HTML5 – Yolande Larcher-Baroung – 26/11/2011 Page 35 sur 44

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

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

M2 MIAGE – D511 – HTML5 – Yolande Larcher-Baroung – 26/11/2011 Page 36 sur 44

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

M2 MIAGE – D511 – HTML5 – Yolande Larcher-Baroung – 26/11/2011 Page 37 sur 44

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 ?

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

M2 MIAGE – D511 – HTML5 – Yolande Larcher-Baroung – 26/11/2011 Page 38 sur 44

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.

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

M2 MIAGE – D511 – HTML5 – Yolande Larcher-Baroung – 26/11/2011 Page 39 sur 44

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.

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

M2 MIAGE – D511 – HTML5 – Yolande Larcher-Baroung – 26/11/2011 Page 40 sur 44

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.

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

M2 MIAGE – D511 – HTML5 – Yolande Larcher-Baroung – 26/11/2011 Page 41 sur 44

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.

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

M2 MIAGE – D511 – HTML5 – Yolande Larcher-Baroung – 26/11/2011 Page 42 sur 44

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.

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

M2 MIAGE – D511 – HTML5 – Yolande Larcher-Baroung – 26/11/2011 Page 43 sur 44

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

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

M2 MIAGE – D511 – HTML5 – Yolande Larcher-Baroung – 26/11/2011 Page 44 sur 44

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