HTML5 W3C Conference Euratechnologie

  • 3,261 views
Uploaded on

HTML5 Conference with W3C, Wygwam, Inria, Euratechnologie

HTML5 Conference with W3C, Wygwam, Inria, Euratechnologie

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
3,261
On Slideshare
0
From Embeds
0
Number of Embeds
3

Actions

Shares
Downloads
26
Comments
0
Likes
2

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

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

Transcript

  • 1. Aurélien Verla Giovanni ClémentDirecteur Technique Expert .NETWygwam Wygwam
  • 2. Emplacement éventuel pour votre logo
  • 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. Pour plus d’informations : info@wygwam.com www.wygwam.com formation.wygwam.com
  • 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. 20041. Création du WHATWG  Web Hypertext Application Technology Working Group2. Principaux acteurs  Apple  Mozilla Foundation  Opera Software  Google3. http://www.whatwg.org/
  • 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. 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. 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. Le rêve des développeursHTML5, le Messie ?
  • 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. HTML5, c’est :  Un Terme utilisé comme fourre-tout
  • 13. Une multitude de spécifications, standardisant lescontenus et interactions Web, d’aujourd’hui et demain.
  • 14. Le rêve des développeurs • Nous ne sommes pas en 2014 !
  • 15. Un problème vieux comme le monde !
  • 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. Un problème vieux comme le monde ! Différences de comportements des markups uniques Différents statuts des spécifications Standards évoluant !
  • 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. 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. Un nouveau DOCTYPE  Avant  Après
  • 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. Standardisation de la structure d’unepage Web  <header>  <nav>  <article>  <section>  <aside>  <footer>
  • 23. Avant en HTML4 Après en HTML5 HTML4 : HTML5 :
  • 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. 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. 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. <audio /> Codecs SupportBrowser Ogg MP3 AAC WavInternet Explorer x xFirefox x xChrome x x x xSafari x x xOpera x x
  • 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. Standardisation des lecteurs médias Source : AlsaCreations.
  • 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. 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. Ajout de balises de rendus dynamiques
  • 33. Standardisation des formulaires Nouveaux types de champs :  Tel  Search  url  Email  Datetime, date, month, week, time  Number  Range  Color
  • 34. Standardisation des formulaires Nouveaux attributs de champs :  Autofocus  Placeholder Validation du formulaire :  Required  Range  Etc.
  • 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. 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. Nouvelles APIs : Les plus utilisées
  • 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. Nouvelles APIs : Les plus utilisées Local storage ou WebStorage
  • 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. Nouvelles APIs : Les plus utilisées Application déconnectée (manifest)
  • 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. Nouvelles APIs : Les plus utilisées
  • 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. 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. 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. Problématique des testsNe pas tester uniquement la détection deFeature mais aussi son implémentation !!
  • 48. Exemple ici pour le border-radius CSS3
  • 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. 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. 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