Karine Vallin - Dorian Baysset HTML 5.0 Karine Vallin - Dorian Baysset

Introduction 2 Groupes de travail : le W3C et le WHATWG - HTML 5 : rétro compatible avec les versions antérieures - Mort du XHTML 2.0 fin 2009

I. Historique Les différentes versions du langage HTML : HTML 1.0 (1989) : Langage hypertexte très simple et quelques éléments de structuration HTML 2.0 (1995) : Mise en page plus complexe, création des images et des formulaires HTML 3.2 (1977) : Tableaux, images cliquables, applets JavaScript HTML 4.0 (1998) : Nombreuses nouveautés sont à relever - Objets multimédias - Langages de script - Feuilles de style - Meilleure accessibilité - Système des cadres (« frame ») HTML 4.01 (1998) : Utilisation de plug-ins pour une plus forte interactivité

II. Contexte Le web 2.0 : idéologie d’un « web social » porté par les systèmes de gestion de contenu L’utilisateur est replacé au cœur même du processus Deux points de vue du web 2.0 : Technique : partage des contenus, forte accessibilité Graphique : pages web plus ergonomiques et attractives Les CMS Plus besoin d’être développeur pour créer du contenu Outils d’édition, de création de supports (textes, images etc.) Mise à jour dynamique des pages

II. Contexte lnterface d’édition d’un article sous Spip

II. Contexte Les interfaces riches (ou Rich Internet Application) Qualité de l’ergonomie, de l’interactivité et de la vitesse d’exécution Développent des offres de services pour les internautes - Crées par des applications web orientées ‘animation & média’ AJAX Flash JavaFx Silverlight Flex Exemple : - Calculs de taux d’intérêts Gestion des photos sur Flickr Comparateur de produits sur Fnac.com

III. Nouvelles balises et nouveaux attributs : les plus Au niveau de la structuration de la page Mise en page commune avec une même composition générale Organisation des contenus plus claire, facilité de mises à jour, nouvelles mesures d’accessibilité <Header> : en-tête <Footer> : pied de page <Nav> : menu Bloc central pour le contenu <article> : contenu extérieur à la page

III. Nouvelles balises et nouveaux attributs : les plus Au niveau de la mise en page <section> : définir différentes parts sémantiques (chapitres, plan) <figure> : regroupe des éléments avec leur légende Exemple: <figure> <img src="/images/goal.jpg"/> <legend>Ceci est un ballon</legend> </figure> <aside> : contenu ayant peu de rapport avec la page (archives)

III. Nouvelles balises et nouveaux attributs : les plus Au niveau des applications web (API) HTML 5 : plus de dynamisme et d’interactivité tout en se passant de l’installation de plug-ins (flash notamment) <audio> : contenu sonore <video> : intégration d’une video <canvas> : graphisme 2D voire 3D géré directement par le navigateur https://developer.mozilla.org/samples/raycaster/RayCaster.html <draggable> : permet de rendre des éléments déplaçable <contenteditable> : zone de page éditable par l’utilisateur <dialog> : retranscrire une conversation D’autres API : Connection off-line (à l’image de Google Gears) Web Storage : stockage des données plus puissant que les cookies GeoLocalisation : localisation de l’utilisateur par le navigateur

III. Nouvelles balises et nouveaux attributs : les plus Un meilleur référencement - Chaque élément est maintenant précisé dans sa propre balise Meilleure indexation des contenus sur Google grâce au référencement universel - Mots clés dissimulés dans les balises Il faut néanmoins attendre que les moteurs de recherche adaptent leurs algorithmes aux solutions du HTML 5 résultats plus rapide et pertinents

III. Nouvelles balises et nouveaux attributs : les plus

IV. Implémentation des nouvelles applications par navigateurs et guerre entres les éditeursurs - HTML 5 soutenu par les acteurs majeurs du web (Apple, Mozilla, Google) - Enjeux financiers : guerre des éditeurs au sujet des codecs multimédias à adopter pour la version 5 - HTML 5 partiellement implémenté dans les navigateurs - Firefox 3.5 conçue selon ses spécifications - Microsoft > Silverlight Effort des éditeurs de navigateurs dans l’implémentation des éléments aidant à la création d’applications web - Forte concurrence en place : Flash, Silverlight, JavaFx, Flex

Conclusion Améliorations notables au profit du multimédia et de la sémantique Adapté aux besoins actuels des utilisateurs Webmestre éditorial directement concerné : prédispositions pour la recherche et la présentation de l’information Standard d’ici une dizaine d’années Ouverture : les prémices du web 3.0, pour quelles utilisations ?

Webographie http://www.la-grange.net/ http://www.commentcamarche.net/ http://www.pcworld.fr/ http://www.sosign.com/ http://blog.homo-numericus.net/ http://fr.wikipedia.org http://documentaliste.ac-rouen.fr http://www.scriptol.fr http://www.miximum.fr http://www.clever-age.com/ http://www.webrankinfo.com https://developer.mozilla.org/fr/Tutoriel_canvas http://www.alsacreations.com/ http://www.developpez.net/forums/