HTML5 vu par Ekino

3 249 vues

Publié le

Une présentation rapide par Florian Harmel du HTML5 et des technologies associées. Les principales innovations du point de vue d'un intégrateur.

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

Aucun téléchargement
Vues
Nombre de vues
3 249
Sur SlideShare
0
Issues des intégrations
0
Intégrations
402
Actions
Partages
0
Téléchargements
74
Commentaires
0
J’aime
4
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

HTML5 vu par Ekino

  1. 1. PARLONS-EN
  2. 2. PASENCORELe est encoreen cours despécification, il esttoujours pressenti pourêtre en
  3. 3. OUI ET NON A partir de , a commencé à implémenter certaines nouveautés du , notamment la . Pour le reste, des existent.
  4. 4. EFFECTIVEMENT Le est souvent un « » pour définir plusieurs qui l’entourent.
  5. 5. OUI Il est d’implémenter des nouveautés dans des documents respectant les standards. Les en sont un bon exemple.
  6. 6. NONLe apporteaussi une permettantune etun
  7. 7. PARFOIS Le recense Certaines sont à appréhender que . La est simple alors que certaines comme sont à comprendre.
  8. 8. OFFLINE & STOCKAGEDes applications qui démarrent plus vite et quifonctionnent même sans connexion Internet APPCACHE APPCACHE INDEXEDDB INDEXEDDB LOCAL STORAGE LOCAL STORAGE } FILE API
  9. 9. APP CACHE Stockage en fonction d’une liste de fichiers dans un fichier de configuration : Manifest Permet de stocker une partie du site sur le poste client  Les éléments statiques (JS/CSS/Images)  Les éléments nécessaires à l’application en offline Une « notification » informe l’utilisateur qu’une nouvelle version de la WebApp est disponible
  10. 10. LOCALSTORAGE Permet de stocker des données localement  Accessible par domaine  Un remplacement des cookies  Une espace de stockage d’environ 5MB Le client seul peut accéder aux données  Plus sûr que les cookies Stockage de « string » ou d’objets « simples »
  11. 11. INDEXED DB Création d’une base de donnée locale  Zone de stockage dédiée  Format JSON  Sans syntaxe SQL Un fonctionnement asynchrone afin de préserver la fluidité de l’interface. Stockage d’objets complexes
  12. 12. LIMITES & USAGES APP CACHE LOCALSTORAGE INDEXED DB STOCKAGE DE MISE EN CACHE STOCKAGE DONNÉES ENTRE D’ÉLÉMENTS STRUCTURÉ SESSIONSOPTIMISATION DU STOCKAGE DE REMPLACEMENTCHARGEMENT DES DONNÉES DES COOKIES PAGES COMPLEXESCONFIGURATION STOCKAGE TEMPS D’ACCÈS + DES PAGES À D’OBJETS SIMPLES LONGS (> 300ms) CACHER SUPPRESSIONCACHE PAR MODIF INCOMPATIBLE iOS MANIFEST
  13. 13. FILE API Lire les fichiers locaux  Upload de fichiers depuis le contrôle « Parcourir… » natif  Accessible aussi par Drag’n’Drop depuis le bureau  Lecture des informations de fichiers locaux  Accès aux informations binaires (Ex: Exif des images) Écrire des fichiers localement  Traitement d’images et de fichiers
  14. 14. CONNECTIVITÉDes sites Web qui « écoutent » le serveur, desapplications multi-utilisateurs, du push WEB SOCKETS SERVER-SENT EVENTS
  15. 15. SERVER-SENT EVENTS API Javascript Basé sur le protocole HTTP Communication uni-directionnelle entre le serveur et le client Reconnexion automatique Événements personalisés
  16. 16. WEB SOCKETS Protocole + API Javascript Communication bi-directionnelle entre le client et le serveur
  17. 17. SERVER-SENT WEBSOCKETS EVENTSMISE À JOUR DE STATUTS JEUX MULTI-JOUEURS NOTIFICATIONS CHATS EN TEMPS RÉELMISE À JOUR DE STOCK MESSAGERIE PRODUITS TÉLÉCOMMANDE ENTRE DEVICES
  18. 18. PERFORMANCEDes sites Web plus rapides et plusdynamiques grâce à des nouvelles techniqueset technologiesVos utilisateurs ne devraient jamais attendre. WEB WORKERS XMLHTTPREQUEST 2
  19. 19. WEB WORKERS Script exécuté en tâche de fond Aucune interférence avec l’interface Permet à la page de ne pas se bloquer pendant l’exécution de lourdes tâches de fond Communication avec le Worker via des évènements Possibilité pour plusieurs scripts de partager un worker : SharedWorkers Le script ne peut pas interagir avec le DOM
  20. 20. XMLHTTPREQUEST 2 Permet les requêtes cross-domain Prévoit des évènements de progression de transferts Supporte l’upload et le download de données binaires Permet de travailler de concert avec d’autres nouveautés telles que File API / Web Audio API
  21. 21. SÉMANTIQUEPlus de balises pour plus de sensPlus de sens pour les utilisateurs mais aussipour Google« Notre travail, notre vie entière sont une question de sémantique, parce que lesmots sont les outils avec lesquels nous travaillons, le matériel à partir duquel leslois sont faites, à partir de laquelle la Constitution a été écrite. Tout dépend denotre compréhension de ces mots. » (Felix Frankfurter / Avocat)
  22. 22. SÉMANTIQUE Des nouvelles balises HTML5 :  Header – Footer – Aside – Section – Nav  Article – Time – Figure Microdatas Microformats RDFa WebForms : Des nouveaux éléments de formulaires
  23. 23. UN PEU DE CODENouvelles balises :Avant : Après : <body> <body> <div id="container"> <div id="container"> <div id="head"> <header> <div id="menu"> <nav data-role="menu"> <ul> <ul> <li>Menu 1</li> <li>Menu 1</li> <li>Menu 2</li> <li>Menu 2</li> </ul> </ul> </div> </nav> </div> </header> <div id="body"> <div id="body"> <div id="navigation"> <aside> <ul> <ul> <li>Navi 1</li> <li>Navi 1</li> <li>Navi 2</li> <li>Navi 2</li> </ul> </ul> </div> </aside> <div id="body_container"> <section id="body_container"> <div class="block"> <article> <div class="image"> <figure> <img src="__mon__url__" /> <img src="__mon__url__" /> </div> </figure> <div class="text"> <p> Texte Texte </div> </p> </div> </article> </div> </section> </div> </div> <div id="foot"> <footer> Mon pied de page Mon pied de page </div> </footer> </div> </div> </body> </body>
  24. 24. UN PEU DE CODEMicrodatas :<div itemscope itemtype="http://schema.org/Person"> <a itemprop="url" href="www.ekino.com"> <div itemprop="name"><strong>Florian Harmel</strong></div> </a> <div itemscope itemtype="http://schema.org/Organization"> <span itemprop="name">Ekino</span> </div> <div itemprop="jobtitle">Consultant UI</div> <div itemprop="description">Rendre votre expérience Web plus attractive</div> <div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress"> <div itemprop="streetAddress">157 rue Anatole France</div> <div> <span itemprop="addressLocality">Levallois-Perret</span> </div> <div itemprop="postalCode">92300</div> <div itemprop="addressCountry">France</div> </div> <div itemprop="email">harmel@ekino.com</div> <div itemprop="telephone">0149687368</div> <div> <meta itemprop="birthDate" content="2012-06-19">DOB: 06/19/2012 </div></div>
  25. 25. UN PEU DE CODEMicroformats :Sans microformats : Avec microformat hCard : <address> <address class="vcard"> <p> <p> Jean Bout<br/> <span class="fn">Jean Bout</span><br/> <span class="org">Société Exemple</span><br/> Société Exemple<br/> <span class="tel">604-555-1234</span><br/> 604-555-1234<br/> <a class="url" <a href="http://exemple.com/">http://exemple.com/</a> href="http://exemple.com/">http://exemple.com/</a </p> > </address> </p> </address>
  26. 26. WEBFORMS Des nouveaux contrôles Des attributs prenant en charge les nouveaux périphériques Une prise en charge de la validation côté client Des nouveautés adaptées aux besoins des développeurs
  27. 27. NOUVEAUX CONTRÔLESINPUT TEL EMAIL RANGE URL SEARCH DATE/TIME NUMBER COLOR MONTH/WEEKAUTRES PROGRESS OUTPUT KEYGEN
  28. 28. NOUVEAUX ATTRIBUTSFORM INPUTAUTOCOMPLETE AUTOCOMPLETE PLACEHOLDER MIN NOVALIDATE AUTOFOCUS REQUIRED MAX PATTERN STEP
  29. 29. STYLES CSS3Sans sacrifier la structure et la performancesde vos pages, la CSS3 vous offre enfin unevaste gamme de styles et d’effets.
  30. 30. Rem (root em) Media Queries Border-radius Border images Transforms Font-face Table display Word-wrap Animation Inline-block Calc() as CSS min/max- Counters Box-shadows 3D Transforms unit value width/height Multiple2.1 selectors Colors Gradients Hyphenation Backgrounds Generated object-fit/object- Opacity Regions position:fixed Content position Background- Multiple ColumnText-Overflow Grid Layout Masks image options LayoutText-shadows Text-stroke
  31. 31. Rem (root em) Media Queries Border-radius Border images Transforms Font-face Table display Word-wrap Animation Inline-block Calc() as CSS min/max- Counters Box-shadows 3D Transforms unit value width/height Multiple2.1 selectors Colors Gradients Hyphenation Backgrounds Generated object-fit/object- Opacity Regions position:fixed Content position Background- Multiple ColumnText-Overflow Grid Layout Masks image options LayoutText-shadows Text-stroke
  32. 32. FONT-FACE Toutes les polices sur votre site Compatibilité multi-périphériques Fonctionnement natif
  33. 33. PAR L’EXEMPLEAvant :
  34. 34. PAR L’EXEMPLEAprès :
  35. 35. GRID LAYOUT Nouvelle solution de positionnement des éléments Grille virtuelle avec colonnes et lignes Adapté à la problématique de Responsive Webdesign Positionnement intuitif Permet un allégement substantiel du DOM
  36. 36. UN PEU DE CODEImplémentation d’une grille complexe :body { display: -ms-grid; grid-columns: 1fr 1fr 1fr; grid-rows: 1fr 1fr 1fr 1fr 1fr1fr;}.bloc1 { Bloc 1 Bloc 4 grid-column: 1; grid-row: 1; grid-row-span: 3;}.bloc2 { grid-column: 1; grid-row: 4; grid-row-span: 3; Bloc 3 Bloc 5}.bloc3 { grid-column: 2; grid-row: 1; grid-row-span: 6;} Bloc 2.bloc4 { grid-column: 3; Bloc 6 grid-row: 1; grid-row-span: 2;}…
  37. 37. NOUVEAUX SÉLECTEURS CSS Des éléments atteints plus vite, sans multiplier les classes CSS Un code HTML allégé et plus compréhensible Des feuilles de style optimisées Une logique de rendu déplacée du back et du JS vers la CSS
  38. 38. CÔTÉ CODEDes CSS moins complexes avec une nouvelle logiqueli { li { background:#0990b2; background:#0990b2; margin-bottom:5px; margin-bottom:5px; padding:2px 0 2px 5px; padding:2px 0 2px 5px; border-bottom:2px solid #ffec19; border-bottom:2px solid #ffec19; list-style:none; list-style:none;} }li.first { li:first-child { text-transform:uppercase; text-transform:uppercase;} }li.odd { li:nth-child(odd){ background:#12a6cc; background:#12a6cc;} }li.last { li:last-of-type { border:none; border:none;} }li.oneBeforeLast { li:nth-last-of-type(2) { margin-left:15px; margin-left:15px;} }li li { background:#b31048; li li {} background:#b31048;li li.odd { } background:#ff0057; li li:nth-child(odd) {} background:#ff0057;li.open { } padding-right:5px; li.open {} padding-right:5px;li.afterOpen { } margin-top: 15px; li.open + li {} margin-top: 15px;li.open .firstLetter { } color:#000; li.open::first-letter { width:50px; color:#000; text-decoration:underline; display:block;} width:50px; text-decoration:underline; }
  39. 39. CÔTÉ CODEDu côté du HTML, une différence flagrante<ul> <ul> <li class="first odd">Nav 1</li> <li>Nav 1</li> <li>Nav 1</li> <li>Nav 1</li> <li class="open odd"> <li class="open"> <span Nav 1class="firstLetter">N</span>av 1 <ul> <ul> <li>Nav2</li> <li class="oneBeforeLast odd <li>Nav2</li>first">Nav2</li> </ul> <li class="last">Nav2</li> </li> </ul> <li>Nav 1</li> </li> <li>Nav 1</li> <li class="afterOpen">Nav 1</li> <li>Nav 1</li> <li class="odd">Nav 1</li> <li>Nav 1</li> <li class="oneBeforeLast">Nav </ul>1</li> <li class="odd last">Nav 1</li></ul>
  40. 40. TRANSITIONS / ANIMATIONS Possibilité de mettre des transitions entre chaque propriété CSS Le rendu n’est plus à la charge du JavaScript Des animations plus fluides Des interfaces plus riches
  41. 41. TRANSFORMATIONS Transformations 2D et 3D Interpolations Les transformations peuvent être faites avec des transitions/animations Permet d’éviter d’utiliser des images pour créer des formes géométriques
  42. 42. MÉDIASDes médias qui vivent en harmonie avec vospages Web, le tout sans plugins VIDÉO AUDIO
  43. 43. BALISE VIDÉO Une nouvelle balise HTML5 Une API permettant de contrôler la vidéo en Javascript Possibilité de récupérer le Flux vidéo dans un canvas
  44. 44. BALISE AUDIO Une nouvelle balise HTML5 Une API permettant de contrôler le flux audio en Javascript Possibilité de récupérer le Flux audio et de l ’analyser en Javascript Fonctionnement identique à la balise Vidéo
  45. 45. LIMITES / RESTRICTIONS Pas de DRM Difficile d’implémenter du streaming Multiplicité des formats / navigateur  OGG  MP4  WEBM
  46. 46. PORTABILITÉUn site, une application, pour tous, partout… MEDIA-QUERIES ORIENTATION / LOCALISATION ACCÈS AUX DONNÉES DES PÉRIPHÉRIQUES
  47. 47. MEDIA-QUERIES Application de feuilles de styles en fonction des périphériques Adapter dynamiquement le design avec CSS aux différents supports 1 site avec 1 contenu pour tous les écrans L’utilisation des CSS média-queries permet le
  48. 48. LE EN IMAGE
  49. 49. ORIENTATION ET LOCALISATION Accès aux informations de géolocalisation  Par IP pour les browsers d’ordinateurs de bureau  Par IP + triangulation + GPS pour les mobiles et tablettes Accès aux données d’accélération et d’orientation pour les périphériques le supportant  Boussole  Accéléromètre  Gyroscope
  50. 50. DEVICE API L’API prévoit un accès (avec l’accord de l’utilisateur) aux éléments suivants :  Tâches  Contacts  Rendez-vous  Appareil Photo  Microphone  Service de messagerie  Journal d’appel  Informations système Aucun support pour le moment
  51. 51. EFFETS & 3DVous êtes désormais sûrs de surprendre vosutilisateurs avec des visuels et animationsrendus nativement par le navigateur CANVAS SVG WEB GL
  52. 52. CANVAS Surface de pixels contrôlée par JS Permet de dessiner dans une image Des APIs JS de dessin à disposition  Courbes de Bézier  Lignes  Etc… Boîte noire, pas d’accessibilité
  53. 53. SVG Dessiner en 2D vectorielle via XML Accès aux éléments SVG depuis le DOM Les éléments SVG peuvent être stylés par CSS SVG peut être chargé depuis un fichier externe ou en ligne dans un document HTML L’arbre des données est conservé en mémoire
  54. 54. CANVAS VS. SVGJEUX COMPLEXESTRAITEMENTS D’IMAGESCÈNES COMPLEXES CANVASJEUX VIDÉO 2DGRAPHIQUESCARTOGRAPHIE SVGDOC IMPRIMABLEIMAGES STATIQUES
  55. 55. WEB GL Utiliser le standard Open GL depuis Javascript Permet de faire de la 3D Le rendu est obtenu grâce à l’accéleration matérielle de la carte graphique Beaucoup de cartes graphiques sont « blacklistées » à cause de défaillances de pilotes Peu de projets actuellement
  56. 56. FLASH N’EST PAS MORTJEUX 3DVIDÉOS AVEC DRM OU PUB3D FLASHAPPLICATIONS LOURDESVIDÉO & SON HTML5SITES MOBILESSITES WEB APPLICATIFS HTMLSITES ECOMMERCE & B2B
  57. 57. HTML5  Un « buzzword » qui prend tout son sens tant les nouveautés sont nombreuses  Une norme basée sur l’usage  Aucune limite du HTML5 ne semble insurmontable  De nouvelles possibilités pour des interfaces innovantes  Une voie grande ouverte vers l’applicatif  Le HTML5 est en perpétuelle évolution « Le HTML5 n’est pas encore prêt, ne le sera jamais (et c’est une bonne chose) » (Christian Heilmann / Yahoo)
  58. 58. LES CHALLENGES Des développeurs sensibilisés et qui ont l’expérience du support  Motion design  3D Des IDE utilisables et plus performants  Système de timeline  Génération propre de CSS multi-navigateurs (préfixes) Frameworks HTML5 à tester et éprouver  Joshfire  …
  59. 59. ‘‘ OUI ’’
  60. 60. SOURCES http://caniuse.com/ http://www.w3schools.com/html5/ http://www.html5rocks.com/en/features/presentation http://slides.html5rocks.com/ http://www.w3.org/html/logo/ http://www.alsacreations.com/article/lire/750-HTML5- nouveautes.html http://www.w3.org/TR/html5/ http://goetter.fr/ http://www.abookapart.com/products/html5-for-web-designers http://www.abookapart.com/products/responsive-web-design http://fr.wikipedia.org/wiki/Websocket http://microformats.org/ http://www.sitepoint.com/javascript-shared-web-workers- html5/ Et plein d’autres joyeusetés glanées ici et là …
  61. 61. DEMOS Les démos sont accessibles ici : LIEN
  62. 62. LE SUPPORT DU HTML5 DANS LE MONDE Très bon Très bon support support 50.81 62.02 Bon support 26.48 Bon support 26.48 Mauvais Mauvais Support Support 22.71 11.5 FRANCE MONDE « Votre responsabilité est de ne plus développer pour IE6 » (Daniel Glazman / W3C)

×