HTML5 est une évolution de HTML qui regroupe et enrichit les spécifications précédentes, apportant de nouveaux éléments sémantiques et des améliorations pour les formulaires, l'accessibilité et le stockage côté client. Il permet de créer des applications web plus interactives et performantes, tout en s'approchant de l'ergonomie des applications de bureau. Les nouvelles API et fonctionnalités facilitent la communication, l'interaction avec l'utilisateur et l'adaptation aux différents périphériques d'affichage.

1. HTML 5 <en_entreprise/>

2. Historique HTML, à la base du Web, est un standard dont la dernière version (4.0) remonte à 1998. Internet et les intranets ont évolués vers le Web 2.0 : Web Applications, partage d’information, collaboration… Depuis 2006, le WHATWG travail sur une évolution de HTML pour fournir un standard ouvert (alternative à Flash, Silverlight, JavaFX) . Ces travaux ont été repris pour les spécifications HTML 5.

3. Que recouvre HTML 5 Juste une histoire de balises ? Non, cela impacte aussi CSS et les API JavaScript Intègre les spécifications SVG et MathML Regroupe les spécifications HTML, XHTML et DOM2HTML

4. Tags sémantiques Formulaires Accessibilité, Métadonnées, Auditing Liens typés Multimédia Dessin 2D & 3D HTML

5. Tags sémantiques HTML5 fournit des nouveaux tags permettant de mieux structurer l’information. Structure : header, aside, footer, nav, article / section, details / summary, figure / figcaption : cascadables <div id=“header” /> <div id=“footer” /> <div id= “ aside”/> <div id=“nav” /> <header /> <footer /> <aside /> <nav /> HTML <aside />

6. Tags sémantiques Structure de l’information : menus : toolbar et contextuel datalist : permet de séparer les données d’un contrôle associé output : résultat d’une soumission de formulaire progress : représente la progression dans une suite d’étapes meter : représente visuellement une quantité keygen : conserve la clé privée côté client et envoie la clé publique Abstraction pour les Actions command : abstraction commune aux boutons, liens et menus HTML

7. Formulaires Nouveaux types de champs de saisie : dates / heures couleurs échelles de valeurs url, tel, email, week, month, range, number… Assistants de sélection (date/heure, couleurs…) fourni par le navigateur. Le navigateur valide la saisie attributs : pattern , min / max / step , required pseudo-classes CSS :invalid , :valid , :out-of-range HTML

8. Formulaires Nouveaux attributs pour les champs de saisie : autocomplete : désactive la suggestion proposée par le navigateur autofocus : positionne le focus après le chargement de la page multiple : autorise la présence de plusieurs valeurs list : relie un contrôle à une liste de suggestions <datalist /> Gestionnaire d’Undo Le navigateur enregistre les modifications qui ont lieu dans la page Il offre une API pour défaire/refaire les modifications. HTML

9. Et encore… Modifier du contenu : L’attribut contentEditable rend le contenu modifiable pour des éléments statiques (<p>, <span>, …) Metadonnées (Microdata) L’attribut item-prop permet de définir une entrée clé-valeur dans les métadonnées du document Nouveaux attributs pour l’accessibilité ARIA : Offre des informations complémentaires pour les technologies d’accessibilité Fonctionnalité d’auditing : Les liens ont un attribut ping qui contient une URL à invoquer en arrière-plan HTML

10. Intérêt pour les applications d’entreprise : Le code des pages HTML est plus lisible et plus structuré Améliorer les interfaces de saisie de données via les assistants et la validation côté client Utilisation de Canvas et SVG pour remplacer les images générées côté serveur Il manque toujours un élément Tableau triable. HTML

11. Sélecteurs Stockage côté client Communications Interface Utilisateur Géolocalisation APIs JavaScript

12. Sélecteurs Extension de l’API de sélection d’éléments dans le DOM : Après getElementById() et getElementsByTagName() : document.getElementsByClassName(&quot; panel&quot; ) document.querySelector( &quot;#toto&quot; ); document.querySelectorAll( &quot;table.tata > tr > td titi&quot; ); Déjà utilisés via les librairies JavaScript (jQuery, Mootools) API JS

13. Stockage Stockage SessionStorage : clés-valeurs, isolée par onglet LocalStorage : clés-valeurs, persistant SQL Database : BD relationnelle embarquée Cache Une API permet de définir les fichiers qui doivent être cachés côté client Ainsi même déconnecté, un « rafraichissement » de la page fonctionnera. API JS

14. Communications Multi-threading « a sort of » WebWorkers : Les WebWorkers sont un mécanisme pour exécuter du JavaScript en arrière plan, sans bloquer l’affichage dans le navigateur. WebSockets : Moyen de communication bi-directionnel entre un client et un serveur (AJAX amélioré) Messaging : Transmettre des données entre deux pages web de deux onglets différents API JS

15. Expérience utilisateur Drag’n’Drop Une API standardisée offre le support du Drag’n’Drop dans la fenêtre du navigateur Notifications Elles permettent d’afficher des notifications de type instant-messaging sur le « bureau » de l’utilisateur Géolocalisation Obtenir la position géographique d’un utilisateur (WGS84) API JS

16. Intérêt pour les applications d’entreprise : Stockage de données côté client, mode déconnecté Nouveaux paradigmes de communication pour sortir du mode requête/réponse Interaction avec l’utilisateur : notifications, géolocalisation APIs JavaScript

17. Sélecteurs Typographie Décoration Transformations, Transitions et Animations Media-Queries CSS

18. Sélecteurs Pour cibler plus précisément les éléments :first-child :nth-child(odd) :not() CSS

19. Typographie Standardisation des polices de caractères Un format commun : WOFF @font-face Disposition text-overflow : cache , renvoie à la ligne ou tronque (…) le texte paragraphe en colonnes Décoration du texte ombre détourage CSS

20. Décoration Opacité Permet de jouer sur la transparence Bordures border-radius : arrondir les angles border-image : définir une image pour chaque côté et angle Dégradés Remplissage des éléments sans images CSS

21. T. T. A. Les T ransformations Applique des rotations ou des translations aux éléments Sur les 3 axes Les T ransitions Définit la transition d’un style CSS à un autre Les A nimations Permet de définir une animation CSS

22. Media-Queries Les liens vers les feuilles de styles sont flexibles On peut spécifier des filtres avancés pour la sélection d’une feuille de style Orientation Largeur Résolution … Et des opérateurs <link media=“screen, print and (color)“ … /> CSS

23. Intérêt pour les applications d’entreprise : Media-Queries : une même page HTML cible plusieurs types de périphérique d’affichage Simplifie la réalisation des chartes graphiques Allège le code JavaScript de décoration et d’animation, le code des pages HTML CSS

24. S’y préparer dès maintenant Des balises dépréciées peuvent déjà être supprimées : applet et frameset Support par les navigateurs (04/2010) ? Opera, Safari, Chrome Navigateurs mobiles (basés sur WebKit) ChromeFrame pour Internet Explorer Evaluer la compatibilité HTML5 d‘un navigateur http://www.html5test.com http://html5readiness.com

25. En conclusion HTML5 permet de R éaliser des Applications Web plus performantes et plus évoluées qu’une suite d’allers-retours serveurs. Se rapprocher de l’ergonomie des Applications Desktop tout en simplifiant la complexité HTML des interfaces graphiques. Offrir des solutions aux situations de mobilité.

26. Questions ? le.genie.logiciel 2010