M2 MIAGE – D511 – HTML5 – Yolande Larcher-Baroung – 26/11/2011 Page 1 sur 44
HTML5
Nouveautés,
Possibilités d’innovation,
...
M2 MIAGE – D511 – HTML5 – Yolande Larcher-Baroung – 26/11/2011 Page 2 sur 44
Table des matières
Introduction ................
M2 MIAGE – D511 – HTML5 – Yolande Larcher-Baroung – 26/11/2011 Page 3 sur 44
II - Un autre marché autour de l’HTML5..........
M2 MIAGE – D511 – HTML5 – Yolande Larcher-Baroung – 26/11/2011 Page 4 sur 44
Table des illustrations
Figure 1 - structure ...
M2 MIAGE – D511 – HTML5 – Yolande Larcher-Baroung – 26/11/2011 Page 5 sur 44
INTRODUCTION
HTML5, la nouvelle version de no...
M2 MIAGE – D511 – HTML5 – Yolande Larcher-Baroung – 26/11/2011 Page 6 sur 44
Tout au long de ce rapport, j’affiche les cod...
M2 MIAGE – D511 – HTML5 – Yolande Larcher-Baroung – 26/11/2011 Page 7 sur 44
NOUVEAUTES
I - GENERALITES
A. DE NOUVEAUX MAR...
M2 MIAGE – D511 – HTML5 – Yolande Larcher-Baroung – 26/11/2011 Page 8 sur 44
B. LA STRUCTURE D’UNE PAGE
Alors qu’en HTML4,...
M2 MIAGE – D511 – HTML5 – Yolande Larcher-Baroung – 26/11/2011 Page 9 sur 44
<!DOCTYPE HTML>
<html lang=fr>
<head>
<title>...
M2 MIAGE – D511 – HTML5 – Yolande Larcher-Baroung – 26/11/2011 Page 10 sur 44
II - AUTRES NOUVEAUTES
A. CONTENTEDITABLE
Co...
M2 MIAGE – D511 – HTML5 – Yolande Larcher-Baroung – 26/11/2011 Page 11 sur 44
III - LE MULTIMEDIA
HTML5 nous apportent tro...
M2 MIAGE – D511 – HTML5 – Yolande Larcher-Baroung – 26/11/2011 Page 12 sur 44
La possibilité de rattacher plusieurs source...
M2 MIAGE – D511 – HTML5 – Yolande Larcher-Baroung – 26/11/2011 Page 13 sur 44
Le code de cette page tient en peu de lignes...
M2 MIAGE – D511 – HTML5 – Yolande Larcher-Baroung – 26/11/2011 Page 14 sur 44
J’ai réalisé un formulaire simple contenant ...
M2 MIAGE – D511 – HTML5 – Yolande Larcher-Baroung – 26/11/2011 Page 15 sur 44
AFFICHAGE OU NON DES NOUVEAUX ATTRIBUTS DU M...
M2 MIAGE – D511 – HTML5 – Yolande Larcher-Baroung – 26/11/2011 Page 16 sur 44
Le navigateur Opéra, est donc le navigateur ...
M2 MIAGE – D511 – HTML5 – Yolande Larcher-Baroung – 26/11/2011 Page 17 sur 44
Figure 8 - Rendu de l'attribut date chez Ope...
M2 MIAGE – D511 – HTML5 – Yolande Larcher-Baroung – 26/11/2011 Page 18 sur 44
Testez ce formulaire à l’adresse suivante : ...
M2 MIAGE – D511 – HTML5 – Yolande Larcher-Baroung – 26/11/2011 Page 19 sur 44
Figure 11 – Ici, le clavier de l'iPad s'adap...
M2 MIAGE – D511 – HTML5 – Yolande Larcher-Baroung – 26/11/2011 Page 20 sur 44
Le code ainsi produit pour le formulaire est...
M2 MIAGE – D511 – HTML5 – Yolande Larcher-Baroung – 26/11/2011 Page 21 sur 44
POSSIBILITES D’INNOVATION
I - LES INNOVATION...
M2 MIAGE – D511 – HTML5 – Yolande Larcher-Baroung – 26/11/2011 Page 22 sur 44
Le mode déconnecté
les bases de données loca...
M2 MIAGE – D511 – HTML5 – Yolande Larcher-Baroung – 26/11/2011 Page 23 sur 44
II - LE MODE DECONNECTE
Il devient de plus e...
M2 MIAGE – D511 – HTML5 – Yolande Larcher-Baroung – 26/11/2011 Page 24 sur 44
Figure 14 - Les fichiers du manifest ont été...
M2 MIAGE – D511 – HTML5 – Yolande Larcher-Baroung – 26/11/2011 Page 25 sur 44
Figure 16 - En mode déconnecté, les pages en...
M2 MIAGE – D511 – HTML5 – Yolande Larcher-Baroung – 26/11/2011 Page 26 sur 44
III - LES DONNEES EN LOCAL
Aujourd’hui, pour...
M2 MIAGE – D511 – HTML5 – Yolande Larcher-Baroung – 26/11/2011 Page 27 sur 44
 Quant aux données à plus long terme, elles...
M2 MIAGE – D511 – HTML5 – Yolande Larcher-Baroung – 26/11/2011 Page 28 sur 44
B1 - LA CREATION DE LA BASE
La première inst...
M2 MIAGE – D511 – HTML5 – Yolande Larcher-Baroung – 26/11/2011 Page 29 sur 44
Ci-dessous une copie de l’écran de Safari mo...
M2 MIAGE – D511 – HTML5 – Yolande Larcher-Baroung – 26/11/2011 Page 30 sur 44
Le code détaillé, ci-après, permet de compre...
M2 MIAGE – D511 – HTML5 – Yolande Larcher-Baroung – 26/11/2011 Page 31 sur 44
Application.webdb.getAllTodoItems = function...
M2 MIAGE – D511 – HTML5 – Yolande Larcher-Baroung – 26/11/2011 Page 32 sur 44
Vous pouvez tester ce code à l’adresse suiva...
M2 MIAGE – D511 – HTML5 – Yolande Larcher-Baroung – 26/11/2011 Page 33 sur 44
C. LA GEOLOCALISATION
En pratique => www.htm...
M2 MIAGE – D511 – HTML5 – Yolande Larcher-Baroung – 26/11/2011 Page 34 sur 44
Voici un exemple de code, tiré du site HTML5...
M2 MIAGE – D511 – HTML5 – Yolande Larcher-Baroung – 26/11/2011 Page 35 sur 44
if (navigator.geolocation)
var watchId = nav...
M2 MIAGE – D511 – HTML5 – Yolande Larcher-Baroung – 26/11/2011 Page 36 sur 44
M2 MIAGE – D511 – HTML5 – Yolande Larcher-Baroung – 26/11/2011 Page 37 sur 44
PERSPECTIVES ECONOMIQUES
I – 3 CAS DE RUEE V...
M2 MIAGE – D511 – HTML5 – Yolande Larcher-Baroung – 26/11/2011 Page 38 sur 44
C’est le cas du logiciel Flash qui comblaien...
M2 MIAGE – D511 – HTML5 – Yolande Larcher-Baroung – 26/11/2011 Page 39 sur 44
Deezer, par exemple, a conçu un nouveau site...
M2 MIAGE – D511 – HTML5 – Yolande Larcher-Baroung – 26/11/2011 Page 40 sur 44
II - UN AUTRE MARCHE AUTOUR DE L’HTML5
Il es...
M2 MIAGE – D511 – HTML5 – Yolande Larcher-Baroung – 26/11/2011 Page 41 sur 44
CONCLUSION
I - UN BEL AVENIR POUR LE WEB
Tou...
M2 MIAGE – D511 – HTML5 – Yolande Larcher-Baroung – 26/11/2011 Page 42 sur 44
Mais comme ces nouveaux navigateurs, devant ...
M2 MIAGE – D511 – HTML5 – Yolande Larcher-Baroung – 26/11/2011 Page 43 sur 44
REFERENCES
I - ADRESSES INTERNET
W3C – le we...
M2 MIAGE – D511 – HTML5 – Yolande Larcher-Baroung – 26/11/2011 Page 44 sur 44
II - LIVRES
● INTRODUCTION A HTML5
Bruce Law...
Prochain SlideShare
Chargement dans…5
×

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

799 vues

Publié le

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.

Publié dans : Internet
0 commentaire
1 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
799
Sur SlideShare
0
Issues des intégrations
0
Intégrations
3
Actions
Partages
0
Téléchargements
33
Commentaires
0
J’aime
1
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

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

  1. 1. 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
  2. 2. 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
  3. 3. 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
  4. 4. 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
  5. 5. 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.
  6. 6. 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.
  7. 7. 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.
  8. 8. 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 r» div id= « footer » div class= « post » div class= « post » header nav footer article article Figure 1 - structure d'une page HTML4/HTML5
  9. 9. 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:ylarcher@hotmail.com'>Mon pied de page contact</a></p> </footer> </body> </html> Figure 2 - Code de ma première page HTML5
  10. 10. 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.
  11. 11. 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"
  12. 12. 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
  13. 13. 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>
  14. 14. 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.
  15. 15. 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
  16. 16. 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
  17. 17. 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
  18. 18. 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
  19. 19. 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
  20. 20. 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
  21. 21. 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 :
  22. 22. 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.
  23. 23. 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.
  24. 24. 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
  25. 25. 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/
  26. 26. 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.
  27. 27. 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
  28. 28. 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); }); }
  29. 29. 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
  30. 30. 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); }); }
  31. 31. 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 = ''; } }
  32. 32. 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
  33. 33. 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/
  34. 34. 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 }); }
  35. 35. 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
  36. 36. M2 MIAGE – D511 – HTML5 – Yolande Larcher-Baroung – 26/11/2011 Page 36 sur 44
  37. 37. 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 ?
  38. 38. 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.
  39. 39. 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.
  40. 40. 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.
  41. 41. 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.
  42. 42. 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.
  43. 43. 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
  44. 44. 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

×