HTML 5 <en_entreprise/>
Historique <ul><li>HTML, à la base du Web, est un standard  dont la dernière version (4.0) remonte  à 1998. </li></ul><ul>...
Que recouvre HTML 5 <ul><li>Juste une histoire de balises ? </li></ul><ul><ul><li>Non, cela impacte aussi  CSS  et les  AP...
<ul><li>Tags sémantiques </li></ul><ul><li>Formulaires </li></ul><ul><li>Accessibilité, Métadonnées, Auditing </li></ul><u...
Tags sémantiques <ul><li>HTML5 fournit des nouveaux tags permettant de mieux structurer l’information. </li></ul><ul><li>S...
Tags sémantiques <ul><li>Structure de l’information : </li></ul><ul><ul><li>menus : toolbar et contextuel </li></ul></ul><...
Formulaires <ul><li>Nouveaux types de champs de saisie : </li></ul><ul><ul><ul><li>dates / heures </li></ul></ul></ul><ul>...
Formulaires <ul><li>Nouveaux attributs pour les champs de saisie : </li></ul><ul><ul><li>autocomplete : désactive la sugge...
Et encore… <ul><li>Modifier du contenu : </li></ul><ul><ul><li>L’attribut  contentEditable  rend le contenu modifiable pou...
<ul><li>Intérêt pour les applications d’entreprise : </li></ul><ul><ul><li>Le code des pages HTML est plus lisible et plus...
<ul><li>Sélecteurs </li></ul><ul><li>Stockage côté client </li></ul><ul><li>Communications </li></ul><ul><li>Interface Uti...
Sélecteurs <ul><li>Extension de l’API de sélection d’éléments dans le DOM : </li></ul><ul><ul><li>Après  getElementById() ...
Stockage <ul><li>Stockage </li></ul><ul><ul><li>SessionStorage : clés-valeurs, isolée par onglet </li></ul></ul><ul><ul><l...
Communications <ul><li>Multi-threading « a sort of » WebWorkers : </li></ul><ul><ul><li>Les WebWorkers sont un mécanisme p...
Expérience utilisateur <ul><li>Drag’n’Drop </li></ul><ul><ul><li>Une  API standardisée  offre le support du Drag’n’Drop da...
<ul><li>Intérêt pour les applications d’entreprise : </li></ul><ul><ul><li>Stockage de données côté client, mode déconnect...
<ul><li>Sélecteurs </li></ul><ul><li>Typographie </li></ul><ul><li>Décoration </li></ul><ul><li>Transformations, Transitio...
Sélecteurs <ul><li>Pour cibler plus précisément les éléments </li></ul><ul><ul><li>:first-child </li></ul></ul><ul><ul><li...
Typographie <ul><li>Standardisation des polices de caractères </li></ul><ul><ul><ul><li>Un format commun : WOFF </li></ul>...
Décoration <ul><li>Opacité </li></ul><ul><ul><ul><li>Permet de jouer sur la transparence </li></ul></ul></ul><ul><li>Bordu...
T. T. A. <ul><li>Les  T ransformations </li></ul><ul><ul><ul><li>Applique des rotations ou des translations aux éléments <...
Media-Queries <ul><li>Les liens vers les feuilles de styles sont flexibles </li></ul><ul><ul><li>On peut spécifier des fil...
<ul><li>Intérêt pour les applications d’entreprise : </li></ul><ul><ul><li>Media-Queries : une même page HTML cible plusie...
S’y préparer dès maintenant <ul><li>Des balises dépréciées peuvent déjà être supprimées : applet et frameset </li></ul><ul...
En conclusion <ul><li>HTML5 permet de </li></ul><ul><ul><li>R éaliser des Applications Web plus performantes et plus évolu...
Questions ? le.genie.logiciel 2010
Prochain SlideShare
Chargement dans…5
×

HTML5 en Entreprise

1 960 vues

Publié le

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

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

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

Aucune remarque pour cette diapositive

HTML5 en Entreprise

  1. 1. HTML 5 <en_entreprise/>
  2. 2. Historique <ul><li>HTML, à la base du Web, est un standard dont la dernière version (4.0) remonte à 1998. </li></ul><ul><li>Internet et les intranets ont évolués vers le Web 2.0 : Web Applications, partage d’information, collaboration… </li></ul><ul><li>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. </li></ul>
  3. 3. Que recouvre HTML 5 <ul><li>Juste une histoire de balises ? </li></ul><ul><ul><li>Non, cela impacte aussi CSS et les API JavaScript </li></ul></ul><ul><ul><li>Intègre les spécifications SVG et MathML </li></ul></ul><ul><ul><li>Regroupe les spécifications HTML, XHTML et DOM2HTML </li></ul></ul>
  4. 4. <ul><li>Tags sémantiques </li></ul><ul><li>Formulaires </li></ul><ul><li>Accessibilité, Métadonnées, Auditing </li></ul><ul><li>Liens typés </li></ul><ul><li>Multimédia </li></ul><ul><li>Dessin 2D & 3D </li></ul>HTML
  5. 5. Tags sémantiques <ul><li>HTML5 fournit des nouveaux tags permettant de mieux structurer l’information. </li></ul><ul><li>Structure : </li></ul><ul><ul><li>header, aside, footer, nav, article / section, details / summary, figure / figcaption : cascadables </li></ul></ul><div id=“header” /> <div id=“footer” /> <div id= “ aside”/> <div id=“nav” /> <header /> <footer /> <aside /> <nav /> HTML <aside />
  6. 6. Tags sémantiques <ul><li>Structure de l’information : </li></ul><ul><ul><li>menus : toolbar et contextuel </li></ul></ul><ul><ul><li>datalist : permet de séparer les données d’un contrôle associé </li></ul></ul><ul><ul><li>output : résultat d’une soumission de formulaire </li></ul></ul><ul><ul><li>progress : représente la progression dans une suite d’étapes </li></ul></ul><ul><ul><li>meter : représente visuellement une quantité </li></ul></ul><ul><ul><li>keygen : conserve la clé privée côté client et envoie la clé publique </li></ul></ul><ul><li>Abstraction pour les Actions </li></ul><ul><ul><li>command : abstraction commune aux boutons, liens et menus </li></ul></ul>HTML
  7. 7. Formulaires <ul><li>Nouveaux types de champs de saisie : </li></ul><ul><ul><ul><li>dates / heures </li></ul></ul></ul><ul><ul><ul><li>couleurs </li></ul></ul></ul><ul><ul><ul><li>échelles de valeurs </li></ul></ul></ul><ul><ul><ul><li>url, tel, email, week, month, range, number… </li></ul></ul></ul><ul><ul><li>Assistants de sélection (date/heure, couleurs…) fourni par le navigateur. </li></ul></ul><ul><li>Le navigateur valide la saisie </li></ul><ul><ul><li>attributs : pattern , min / max / step , required </li></ul></ul><ul><ul><li>pseudo-classes CSS :invalid , :valid , :out-of-range </li></ul></ul>HTML
  8. 8. Formulaires <ul><li>Nouveaux attributs pour les champs de saisie : </li></ul><ul><ul><li>autocomplete : désactive la suggestion proposée par le navigateur </li></ul></ul><ul><ul><li>autofocus : positionne le focus après le chargement de la page </li></ul></ul><ul><ul><li>multiple : autorise la présence de plusieurs valeurs </li></ul></ul><ul><ul><li>list : relie un contrôle à une liste de suggestions <datalist /> </li></ul></ul><ul><li>Gestionnaire d’Undo </li></ul><ul><ul><li>Le navigateur enregistre les modifications qui ont lieu dans la page </li></ul></ul><ul><ul><li>Il offre une API pour défaire/refaire les modifications. </li></ul></ul>HTML
  9. 9. Et encore… <ul><li>Modifier du contenu : </li></ul><ul><ul><li>L’attribut contentEditable rend le contenu modifiable pour des éléments statiques (<p>, <span>, …) </li></ul></ul><ul><li>Metadonnées (Microdata) </li></ul><ul><ul><li>L’attribut item-prop permet de définir une entrée clé-valeur dans les métadonnées du document </li></ul></ul><ul><li>Nouveaux attributs pour l’accessibilité ARIA : </li></ul><ul><ul><li>Offre des informations complémentaires pour les technologies d’accessibilité </li></ul></ul><ul><li>Fonctionnalité d’auditing : </li></ul><ul><ul><li>Les liens ont un attribut ping qui contient une URL à invoquer en arrière-plan </li></ul></ul>HTML
  10. 10. <ul><li>Intérêt pour les applications d’entreprise : </li></ul><ul><ul><li>Le code des pages HTML est plus lisible et plus structuré </li></ul></ul><ul><ul><li>Améliorer les interfaces de saisie de données via les assistants et la validation côté client </li></ul></ul><ul><ul><li>Utilisation de Canvas et SVG pour remplacer les images générées côté serveur </li></ul></ul><ul><ul><li>Il manque toujours un élément Tableau triable. </li></ul></ul>HTML
  11. 11. <ul><li>Sélecteurs </li></ul><ul><li>Stockage côté client </li></ul><ul><li>Communications </li></ul><ul><li>Interface Utilisateur </li></ul><ul><li>Géolocalisation </li></ul>APIs JavaScript
  12. 12. Sélecteurs <ul><li>Extension de l’API de sélection d’éléments dans le DOM : </li></ul><ul><ul><li>Après getElementById() et getElementsByTagName() : </li></ul></ul><ul><ul><ul><li>document.getElementsByClassName(&quot; panel&quot; ) </li></ul></ul></ul><ul><ul><ul><li>document.querySelector( &quot;#toto&quot; ); </li></ul></ul></ul><ul><ul><ul><li>document.querySelectorAll( &quot;table.tata > tr > td titi&quot; ); </li></ul></ul></ul><ul><li>Déjà utilisés via les librairies JavaScript (jQuery, Mootools) </li></ul>API JS
  13. 13. Stockage <ul><li>Stockage </li></ul><ul><ul><li>SessionStorage : clés-valeurs, isolée par onglet </li></ul></ul><ul><ul><li>LocalStorage : clés-valeurs, persistant </li></ul></ul><ul><ul><li>SQL Database : BD relationnelle embarquée </li></ul></ul><ul><li>Cache </li></ul><ul><ul><li>Une API permet de définir les fichiers qui doivent être cachés côté client </li></ul></ul><ul><ul><li>Ainsi même déconnecté, un « rafraichissement » de la page fonctionnera. </li></ul></ul>API JS
  14. 14. Communications <ul><li>Multi-threading « a sort of » WebWorkers : </li></ul><ul><ul><li>Les WebWorkers sont un mécanisme pour exécuter du JavaScript en arrière plan, sans bloquer l’affichage dans le navigateur. </li></ul></ul><ul><li>WebSockets : </li></ul><ul><ul><li>Moyen de communication bi-directionnel entre un client et un serveur (AJAX amélioré) </li></ul></ul><ul><li>Messaging : </li></ul><ul><ul><li>Transmettre des données entre deux pages web de deux onglets différents </li></ul></ul>API JS
  15. 15. Expérience utilisateur <ul><li>Drag’n’Drop </li></ul><ul><ul><li>Une API standardisée offre le support du Drag’n’Drop dans la fenêtre du navigateur </li></ul></ul><ul><li>Notifications </li></ul><ul><ul><li>Elles permettent d’afficher des notifications de type instant-messaging sur le « bureau » de l’utilisateur </li></ul></ul><ul><li>Géolocalisation </li></ul><ul><ul><li>Obtenir la position géographique d’un utilisateur (WGS84) </li></ul></ul>API JS
  16. 16. <ul><li>Intérêt pour les applications d’entreprise : </li></ul><ul><ul><li>Stockage de données côté client, mode déconnecté </li></ul></ul><ul><ul><li>Nouveaux paradigmes de communication pour sortir du mode requête/réponse </li></ul></ul><ul><ul><li>Interaction avec l’utilisateur : notifications, géolocalisation </li></ul></ul>APIs JavaScript
  17. 17. <ul><li>Sélecteurs </li></ul><ul><li>Typographie </li></ul><ul><li>Décoration </li></ul><ul><li>Transformations, Transitions et Animations </li></ul><ul><li>Media-Queries </li></ul>CSS
  18. 18. Sélecteurs <ul><li>Pour cibler plus précisément les éléments </li></ul><ul><ul><li>:first-child </li></ul></ul><ul><ul><li>:nth-child(odd) </li></ul></ul><ul><ul><li>:not() </li></ul></ul>CSS
  19. 19. Typographie <ul><li>Standardisation des polices de caractères </li></ul><ul><ul><ul><li>Un format commun : WOFF </li></ul></ul></ul><ul><ul><ul><li>@font-face </li></ul></ul></ul><ul><li>Disposition </li></ul><ul><ul><ul><li>text-overflow : cache , renvoie à la ligne ou tronque (…) le texte </li></ul></ul></ul><ul><ul><ul><li>paragraphe en colonnes </li></ul></ul></ul><ul><li>Décoration du texte </li></ul><ul><ul><ul><li>ombre </li></ul></ul></ul><ul><ul><ul><li>détourage </li></ul></ul></ul>CSS
  20. 20. Décoration <ul><li>Opacité </li></ul><ul><ul><ul><li>Permet de jouer sur la transparence </li></ul></ul></ul><ul><li>Bordures </li></ul><ul><ul><ul><li>border-radius : arrondir les angles </li></ul></ul></ul><ul><ul><ul><li>border-image : définir une image pour chaque côté et angle </li></ul></ul></ul><ul><li>Dégradés </li></ul><ul><ul><ul><li>Remplissage des éléments sans images </li></ul></ul></ul>CSS
  21. 21. T. T. A. <ul><li>Les T ransformations </li></ul><ul><ul><ul><li>Applique des rotations ou des translations aux éléments </li></ul></ul></ul><ul><ul><ul><li>Sur les 3 axes </li></ul></ul></ul><ul><li>Les T ransitions </li></ul><ul><ul><ul><li>Définit la transition d’un style CSS à un autre </li></ul></ul></ul><ul><li>Les A nimations </li></ul><ul><ul><ul><li>Permet de définir une animation </li></ul></ul></ul>CSS
  22. 22. Media-Queries <ul><li>Les liens vers les feuilles de styles sont flexibles </li></ul><ul><ul><li>On peut spécifier des filtres avancés pour la sélection d’une feuille de style </li></ul></ul><ul><ul><ul><li>Orientation </li></ul></ul></ul><ul><ul><ul><li>Largeur </li></ul></ul></ul><ul><ul><ul><li>Résolution </li></ul></ul></ul><ul><ul><ul><li>… </li></ul></ul></ul><ul><ul><li>Et des opérateurs </li></ul></ul><ul><ul><ul><li><link media=“screen, print and (color)“ … /> </li></ul></ul></ul>CSS
  23. 23. <ul><li>Intérêt pour les applications d’entreprise : </li></ul><ul><ul><li>Media-Queries : une même page HTML cible plusieurs types de périphérique d’affichage </li></ul></ul><ul><ul><li>Simplifie la réalisation des chartes graphiques </li></ul></ul><ul><ul><li>Allège le code JavaScript de décoration et d’animation, le code des pages HTML </li></ul></ul>CSS
  24. 24. S’y préparer dès maintenant <ul><li>Des balises dépréciées peuvent déjà être supprimées : applet et frameset </li></ul><ul><li>Support par les navigateurs (04/2010) ? </li></ul><ul><ul><li>Opera, Safari, Chrome </li></ul></ul><ul><ul><li>Navigateurs mobiles (basés sur WebKit) </li></ul></ul><ul><ul><li>ChromeFrame pour Internet Explorer </li></ul></ul><ul><li>Evaluer la compatibilité HTML5 d‘un navigateur </li></ul><ul><ul><li>http://www.html5test.com </li></ul></ul><ul><ul><li>http://html5readiness.com </li></ul></ul>
  25. 25. En conclusion <ul><li>HTML5 permet de </li></ul><ul><ul><li>R éaliser des Applications Web plus performantes et plus évoluées qu’une suite d’allers-retours serveurs. </li></ul></ul><ul><ul><li>Se rapprocher de l’ergonomie des Applications Desktop tout en simplifiant la complexité HTML des interfaces graphiques. </li></ul></ul><ul><ul><li>Offrir des solutions aux situations de mobilité. </li></ul></ul>
  26. 26. Questions ? le.genie.logiciel 2010

×