Your SlideShare is downloading. ×
HTML5 W3C Conference Euratechnologie
HTML5 W3C Conference Euratechnologie
HTML5 W3C Conference Euratechnologie
HTML5 W3C Conference Euratechnologie
HTML5 W3C Conference Euratechnologie
HTML5 W3C Conference Euratechnologie
HTML5 W3C Conference Euratechnologie
HTML5 W3C Conference Euratechnologie
HTML5 W3C Conference Euratechnologie
HTML5 W3C Conference Euratechnologie
HTML5 W3C Conference Euratechnologie
HTML5 W3C Conference Euratechnologie
HTML5 W3C Conference Euratechnologie
HTML5 W3C Conference Euratechnologie
HTML5 W3C Conference Euratechnologie
HTML5 W3C Conference Euratechnologie
HTML5 W3C Conference Euratechnologie
HTML5 W3C Conference Euratechnologie
HTML5 W3C Conference Euratechnologie
HTML5 W3C Conference Euratechnologie
HTML5 W3C Conference Euratechnologie
HTML5 W3C Conference Euratechnologie
HTML5 W3C Conference Euratechnologie
HTML5 W3C Conference Euratechnologie
HTML5 W3C Conference Euratechnologie
HTML5 W3C Conference Euratechnologie
HTML5 W3C Conference Euratechnologie
HTML5 W3C Conference Euratechnologie
HTML5 W3C Conference Euratechnologie
HTML5 W3C Conference Euratechnologie
HTML5 W3C Conference Euratechnologie
HTML5 W3C Conference Euratechnologie
HTML5 W3C Conference Euratechnologie
HTML5 W3C Conference Euratechnologie
HTML5 W3C Conference Euratechnologie
HTML5 W3C Conference Euratechnologie
HTML5 W3C Conference Euratechnologie
HTML5 W3C Conference Euratechnologie
HTML5 W3C Conference Euratechnologie
HTML5 W3C Conference Euratechnologie
HTML5 W3C Conference Euratechnologie
HTML5 W3C Conference Euratechnologie
HTML5 W3C Conference Euratechnologie
HTML5 W3C Conference Euratechnologie
HTML5 W3C Conference Euratechnologie
HTML5 W3C Conference Euratechnologie
HTML5 W3C Conference Euratechnologie
HTML5 W3C Conference Euratechnologie
HTML5 W3C Conference Euratechnologie
HTML5 W3C Conference Euratechnologie
HTML5 W3C Conference Euratechnologie
HTML5 W3C Conference Euratechnologie
HTML5 W3C Conference Euratechnologie
HTML5 W3C Conference Euratechnologie
HTML5 W3C Conference Euratechnologie
HTML5 W3C Conference Euratechnologie
HTML5 W3C Conference Euratechnologie
HTML5 W3C Conference Euratechnologie
HTML5 W3C Conference Euratechnologie
HTML5 W3C Conference Euratechnologie
HTML5 W3C Conference Euratechnologie
HTML5 W3C Conference Euratechnologie
HTML5 W3C Conference Euratechnologie
HTML5 W3C Conference Euratechnologie
HTML5 W3C Conference Euratechnologie
HTML5 W3C Conference Euratechnologie
HTML5 W3C Conference Euratechnologie
HTML5 W3C Conference Euratechnologie
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

HTML5 W3C Conference Euratechnologie

3,464

Published on

HTML5 Conference with W3C, Wygwam, Inria, Euratechnologie

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
3,464
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
29
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

    ×