Karine Vallin - Dorian Baysset

Présentation au sujet: "Karine Vallin - Dorian Baysset"— Transcription de la présentation:

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

2 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

3 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é

4 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

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

6 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

7 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

8 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)

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

10 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

11 III. Nouvelles balises et nouveaux attributs : les plus

12 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

13 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 ?

14 Webographie http://www.la-grange.net/ http://www.commentcamarche.net/