HTML5 en Entreprise

26
HTML 5 <en_entreprise/>

description

Quelques pistes sur ce que va apporter HTML5 dans l'informatique d'entreprise.

Transcript of HTML5 en Entreprise

Page 1: HTML5 en Entreprise

HTML 5<en_entreprise/>

Page 2: HTML5 en Entreprise

2

HistoriqueHistorique

• 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.

Page 3: HTML5 en Entreprise

3

Que recouvre HTML 5Que recouvre HTML 5

• Juste une histoire de balises ?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

Page 4: HTML5 en Entreprise

4

• Tags sémantiques

• Formulaires

• Accessibilité, Métadonnées, Auditing

• Liens typés

• Multimédia

• Dessin 2D & 3D

HTML

Page 5: HTML5 en Entreprise

5

Tags sémantiquesTags 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 />

Page 6: HTML5 en Entreprise

6

Tags sémantiquesTags 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

Page 7: HTML5 en Entreprise

7

FormulairesFormulaires

• 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

Page 8: HTML5 en Entreprise

8

FormulairesFormulaires

• 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

Page 9: HTML5 en Entreprise

9

Et encore…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

Page 10: HTML5 en Entreprise

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

Page 11: HTML5 en Entreprise

11

• Sélecteurs

• Stockage côté client

• Communications

• Interface Utilisateur

• Géolocalisation

APIs JavaScript

Page 12: HTML5 en Entreprise

12

SélecteursSélecteursAPI JS

• Extension de l’API de sélection d’éléments dans le DOM :– Après getElementById() et getElementsByTagName() :

• document.getElementsByClassName(" panel" )• document.querySelector( "#toto" );• document.querySelectorAll( "table.tata > tr > td titi" );

• Déjà utilisés via les librairies JavaScript(jQuery, Mootools)

Page 13: HTML5 en Entreprise

13

StockageStockage

• 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

Page 14: HTML5 en Entreprise

14

CommunicationsCommunications

• 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

Page 15: HTML5 en Entreprise

15

Expérience utilisateurExpé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

Page 16: HTML5 en Entreprise

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

Page 17: HTML5 en Entreprise

17

• Sélecteurs

• Typographie

• Décoration

• Transformations, Transitions et Animations

• Media-Queries

CSS

Page 18: HTML5 en Entreprise

18

SélecteursSélecteurs

• Pour cibler plus précisément les éléments– :first-child– :nth-child(odd)– :not()

CSS

Page 19: HTML5 en Entreprise

19

TypographieTypographie

• 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

Page 20: HTML5 en Entreprise

20

DécorationDé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

Page 21: HTML5 en Entreprise

21

T. T. A.T. T. A.

• Les Transformations• Applique des rotations ou des translations aux éléments• Sur les 3 axes

• Les Transitions• Définit la transition d’un style CSS à un autre

• Les Animations• Permet de définir une animation

CSS

Page 22: HTML5 en Entreprise

22

Media-QueriesMedia-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

Page 23: HTML5 en Entreprise

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

Page 24: HTML5 en Entreprise

24

S’y préparer dès maintenantS’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

Page 25: HTML5 en Entreprise

25

En conclusionEn conclusion

• HTML5 permet deHTML5 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é.

Page 26: HTML5 en Entreprise

26

le.genie.logiciel 2010