HTML5 W3C Conference Euratechnologie

4,117 views

Published on

HTML5 Conference with W3C, Wygwam, Inria, Euratechnologie

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,117
On SlideShare
0
From Embeds
0
Number of Embeds
1,630
Actions
Shares
0
Downloads
40
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide
  • Derrière chaque spécification se cachent des éditeurs !!
  • DemoZygoteBody
  • Demo http://people.opera.com/howcome/2010/forms/DemoGioGracefullDegradation
  • HTML5 W3C Conference Euratechnologie

    1. 1. Aurélien Verla Giovanni ClémentDirecteur Technique Expert .NETWygwam Wygwam
    2. 2. Emplacement éventuel pour votre logo
    3. 3. Conseil / Expertise Projets Formation• Etudes préalables • Prototypage • Session inter et intra entreprises• Accompagnement • Régie méthodologique • Coaching on the job • Projet• Assistance technique • Transfert de • Intégration compétences• Expertise• Support Ponctuel
    4. 4. Pour plus d’informations : info@wygwam.com www.wygwam.com formation.wygwam.com
    5. 5. • Le W3C prend la 2000 • Apparition du draft décision de ne plus faire XHTML 2.0 évoluer HTML 4.01 et • Apparition de la de se concentrer sur spécification XHTML 1.0 l’utilisation de XML 1998 2002
    6. 6. 20041. Création du WHATWG  Web Hypertext Application Technology Working Group2. Principaux acteurs  Apple  Mozilla Foundation  Opera Software  Google3. http://www.whatwg.org/
    7. 7. • Création du 2006 • Mise en place du WHATWG groupe de travail • XHTML 2.0 ne HTML5 au sein du deviendra pas un W3C sur base des standard spécifications WHATWG 2004 2007
    8. 8. W3C Working Draft 25 May 20111. http://www.w3.org/TR/html5/2. Actuellement au statut Last Call447 membres1. 220 personnes de 64 sociétés différentes2. 227 experts invités3. http://www.w3.org/2000/09/dbwg/details?group=40318&public=1
    9. 9. ENISA1. European Network and Information Security Agency31 Juillet 20111. Rapport faisant état de 51 failles potentielles de sécuritéhttp://www.enisa.europa.eu/act/application-security/web-security/a-security-analysis-of-next-generation-web-standards
    10. 10. Le rêve des développeursHTML5, le Messie ?
    11. 11. Le rêve des développeurs  Ecrire l’application, une seule fois, avec le même outillage cross browser  Eviter de tester le rendu sur chaque plateforme  Exécution cross plateforme pour augmenter la rentabilité
    12. 12. HTML5, c’est :  Un Terme utilisé comme fourre-tout
    13. 13. Une multitude de spécifications, standardisant lescontenus et interactions Web, d’aujourd’hui et demain.
    14. 14. Le rêve des développeurs • Nous ne sommes pas en 2014 !
    15. 15. Un problème vieux comme le monde !
    16. 16. Un problème vieux comme le monde !  Oui HTML5, est de plus en plus supporté.  Tous les browsers « Next Gen » le supporte à leur façon !  Oui, à terme, nous aurons une couverture de support très complète … à terme.Mais ce n’est pas la même implémentation HTML5 !
    17. 17. Un problème vieux comme le monde ! Différences de comportements des markups uniques Différents statuts des spécifications Standards évoluant !
    18. 18. Un problème vieux comme le monde ! Différences d’implémentations par les browsers Implique des performances différentes Attention aux devices mobiles !
    19. 19. 1. HTML5 : pour Hypertext Markup Language, Le markup de la prochaine génération d’applications web2. CSS3 : pour Cascading Style Sheets, Permet d’appliquer des styles aux documents3. SVG 1.1 : pour Scalable Vector Graphics, Un moteur de dessin vectoriel)
    20. 20. Un nouveau DOCTYPE  Avant  Après
    21. 21. Standardisation de la structure d’unepage Web  Instaure un squelette standard d’une page web.  Structure sémantique uniformisée.  Pas encore supportés par les technologies d’assistance
    22. 22. Standardisation de la structure d’unepage Web  <header>  <nav>  <article>  <section>  <aside>  <footer>
    23. 23. Avant en HTML4 Après en HTML5 HTML4 : HTML5 :
    24. 24. <canvas /> - Permet de « dessiner » - « Fire & Forget » - Impression dans une bitmap - Contrôlé à l’aide de l’API JavaScript lié au contexte - Léger pour le DOM ( 1 – 1) - Profite de l’accélération matérielle … ou pas …
    25. 25. Ajout de balises de rendus dynamiques - Oui IE, est encore le mauvais élève, mais il reste de loin le plus performant pour le rendu.
    26. 26. Standardisation des lecteurs médias <audio /> • Supporté par la plupart des browsers next-gen • Support des codecs de bases différents selon les browsers
    27. 27. <audio /> Codecs SupportBrowser Ogg MP3 AAC WavInternet Explorer x xFirefox x xChrome x x x xSafari x x xOpera x x
    28. 28. Standardisation des lecteurs médias <video />  Pas de plugin requis  Pas de DRM  Supporté par la plupart des browsers next-gen  Pas de norme de codecs imposée  Implique une certaine vigilance sur la publication de video
    29. 29. Standardisation des lecteurs médias Source : AlsaCreations.
    30. 30. WebGL1. Standardisation de la 3D pour le Web sur base d’OpenGL2. N’est pas une recommandation du W3CPrincipaux acteurs1. Google2. Mozilla Fundation3. Apple4. Nokia
    31. 31. Ajout de balises de rendusdynamiques <svg>  Format de représentation vectoriel  Descendant du VML, bien connu des IE x.  Très utile pour cibler, styler, animer à l’aide de CSS3, des composants
    32. 32. Ajout de balises de rendus dynamiques
    33. 33. Standardisation des formulaires Nouveaux types de champs :  Tel  Search  url  Email  Datetime, date, month, week, time  Number  Range  Color
    34. 34. Standardisation des formulaires Nouveaux attributs de champs :  Autofocus  Placeholder Validation du formulaire :  Required  Range  Etc.
    35. 35. Ajout de nouvelles APIs indispensables  File API  Workers et Messaging  Web Storage  Offline Web Application  Geolocation  WebSocket  Web SQL Database  Drag’ndrop  Et bien d’autres ….
    36. 36. Nouvelles APIs : Les plusutilisées Géolocation  API Javascript utilisable facilement - 2 méthodes  Les informations peuvent être directement consommées par d’autres API Maps : Bings, Google  Plusieurs niveaux de précisions : minimum 10m  Possibilité de Geotrackage  Supporté par la plupart des navigateurs next- gen, mobiles y compris.
    37. 37. Nouvelles APIs : Les plus utilisées
    38. 38. Nouvelles APIs : Les plus utilisées Local storage ou WebStorage  Permet de stocker de facon élégante, de la donnée coté client side.  Données persistantes, même après fermeture du navigateur  Structuration par dictionnaire, la valeur est un objet générique
    39. 39. Nouvelles APIs : Les plus utilisées Local storage ou WebStorage
    40. 40. Nouvelles APIs : Les plus utilisées Application déconnectée (manifest)  Utilisé principalement pour les mobiles  Permet le fonctionnement permanent d’une application web ( même sans connexion internet)  Gestion de versionning applicatif
    41. 41. Nouvelles APIs : Les plus utilisées Application déconnectée (manifest)
    42. 42. Nouvelles APIs :Les plus utilisées WebSocket  Permet la communication en duplex entre le serveur web et le client web.  Le serveur peut maintenant envoyer de l’information vers le client, sans demande.
    43. 43. Nouvelles APIs : Les plus utilisées
    44. 44. Nouvelle norme CSS : CSS3 Fidèle descendant de CSS2. - Apporte de nombreuses améliorations, et « simplifications » pour vos intégrations - Radius, gradient, transformation… gérés nativement
    45. 45. CSS3 Media queries Permet de s’adapter aux différentes résolutions/périphériques par style :  Résolution limitée pour les Smartphones  Résolution normale pour les netbooks  Large et haute résolution sur PC/Mac Permet aussi de s’adapter à l’orientation, au ratio, etc. Très utilisé pour les développements mobiles Supporté par les nouveaux browsers (mobiles) next-gen.
    46. 46. CSS3 Animations Permet d’animer les éléments du DOM via CSS Différents types : Rotation, Translation … Evite l’utilisation d’une librairie externe JavaScript Attention aux différences d’implémentations !
    47. 47. Problématique des testsNe pas tester uniquement la détection deFeature mais aussi son implémentation !!
    48. 48. Exemple ici pour le border-radius CSS3
    49. 49. J’aimerais garder un minimum ma nouvelle expérienceutilisateur avec les anciens navigateurs  Progressive enhancement  Graceful degradation  Feature detection => ModernizR  Des Polyfills / fallbacks sont disponibles, principalement en Javascript, utilisant des plugins externes  ATTENTION : ces « hacks » ne sont pas supportés !
    50. 50. J’aimerais garder un minimum ma nouvelle expérienceutilisateur avec les anciens navigateurs  Coût de développement assez conséquent  Il faut tester chaque spécifications HTML5 utilisée, mais aussi chaque Polyfills/ Fallbacks, sur chaque ancien navigateur !  Non conseillé en production, généralement pas de support, ni d’updates … et souvent instable !
    51. 51. Aucun soucis dans le cadre d’un site ciblé1. A destination des navigateurs Next Gen2. Sans adaptation pour les « ancêtres »3. Sans utiliser l’ensemble des fonctionnalités rêvées

    ×