Aurélien Verla        Giovanni ClémentDirecteur Technique        Expert .NETWygwam                       Wygwam
Emplacement éventuel pour votre logo
Conseil / Expertise                 Projets          Formation•   Etudes préalables      •   Prototypage    •   Session in...
Pour plus d’informations :   info@wygwam.com   www.wygwam.com formation.wygwam.com
• Le W3C prend la                       2000              • Apparition du draft  décision de ne plus faire                ...
20041.   Création du WHATWG       Web Hypertext Application Technology Working Group2.   Principaux acteurs         Appl...
• Création du                        2006         • Mise en place du  WHATWG                               groupe de trava...
W3C Working Draft 25 May 20111.   http://www.w3.org/TR/html5/2.   Actuellement au statut Last Call447 membres1.   220 pers...
ENISA1.   European Network and Information Security Agency31 Juillet 20111.   Rapport faisant état de 51 failles potentiel...
Le rêve des développeursHTML5, le Messie ?
Le rêve des développeurs    Ecrire l’application, une seule fois, avec le même     outillage cross browser    Eviter de ...
HTML5, c’est :    Un Terme utilisé comme fourre-tout
Une multitude de spécifications, standardisant lescontenus et interactions Web, d’aujourd’hui et demain.
Le rêve des développeurs                  •    Nous ne sommes                           pas en 2014 !
Un problème vieux comme le monde !
Un problème vieux comme le monde !     Oui HTML5, est de plus en plus supporté.     Tous les browsers « Next Gen » le su...
Un problème vieux comme le monde !    Différences de comportements des markups uniques    Différents statuts des spécifi...
Un problème vieux comme le monde !    Différences d’implémentations par les browsers    Implique des performances différ...
1.   HTML5 : pour Hypertext Markup Language, Le     markup de la prochaine génération d’applications web2.   CSS3 : pour C...
Un nouveau DOCTYPE   Avant   Après
Standardisation de la structure d’unepage Web   Instaure un squelette standard d’une page web.   Structure sémantique un...
Standardisation de la structure d’unepage Web    <header>    <nav>    <article>    <section>    <aside>    <footer>
Avant en HTML4   Après en HTML5    HTML4 :         HTML5 :
<canvas />  -   Permet de « dessiner »  -   « Fire & Forget »  -   Impression dans une bitmap  -   Contrôlé à l’aide de l’...
Ajout de balises de rendus dynamiques  - Oui IE, est encore le mauvais    élève, mais il reste de loin le plus    performa...
Standardisation des lecteurs médias  <audio />                • Supporté par la plupart des                  browsers next...
<audio /> Codecs SupportBrowser                       Ogg       MP3   AAC   WavInternet Explorer                         x...
Standardisation des lecteurs médias  <video />   Pas de plugin requis   Pas de DRM   Supporté par la plupart des browse...
Standardisation des lecteurs médias     Source : AlsaCreations.
WebGL1.   Standardisation de la 3D pour le Web sur base d’OpenGL2.   N’est pas une recommandation du W3CPrincipaux acteurs...
Ajout de balises de rendusdynamiques  <svg>   Format de représentation    vectoriel   Descendant du VML, bien connu    d...
Ajout de balises de rendus dynamiques
Standardisation des formulaires  Nouveaux types de champs :     Tel     Search     url     Email     Datetime, date, ...
Standardisation des formulaires  Nouveaux attributs de champs :     Autofocus     Placeholder  Validation du formulaire ...
Ajout de nouvelles APIs indispensables   File API   Workers et Messaging   Web Storage   Offline Web Application   Ge...
Nouvelles APIs : Les plusutilisées   Géolocation    API Javascript utilisable facilement - 2 méthodes    Les information...
Nouvelles APIs : Les plus utilisées
Nouvelles APIs : Les plus utilisées   Local storage ou WebStorage    Permet de stocker de facon élégante, de la donnée co...
Nouvelles APIs : Les plus utilisées   Local storage ou WebStorage
Nouvelles APIs : Les plus utilisées   Application déconnectée (manifest)    Utilisé principalement pour les mobiles    P...
Nouvelles APIs : Les plus utilisées   Application déconnectée (manifest)
Nouvelles APIs :Les plus utilisées   WebSocket    Permet la     communication en     duplex entre le     serveur web et l...
Nouvelles APIs : Les plus utilisées
Nouvelle norme CSS : CSS3  Fidèle descendant de CSS2.  - Apporte de nombreuses améliorations, et    « simplifications » po...
CSS3 Media queries   Permet de s’adapter aux différentes résolutions/périphériques    par style :      Résolution limité...
CSS3 Animations   Permet d’animer les éléments du DOM via CSS   Différents types : Rotation, Translation …   Evite l’ut...
Problématique des testsNe pas tester uniquement la détection deFeature mais aussi son implémentation !!
Exemple ici pour le border-radius CSS3
J’aimerais garder un minimum ma nouvelle expérienceutilisateur avec les anciens navigateurs    Progressive enhancement   ...
J’aimerais garder un minimum ma nouvelle expérienceutilisateur avec les anciens navigateurs    Coût de développement asse...
Aucun soucis dans le cadre d’un site ciblé1.   A destination des navigateurs Next Gen2.   Sans adaptation pour les « ancêt...
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
Prochain SlideShare
Chargement dans…5
×

HTML5 W3C Conference Euratechnologie

4 163 vues

Publié le

HTML5 Conference with W3C, Wygwam, Inria, Euratechnologie

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

Aucun téléchargement
Vues
Nombre de vues
4 163
Sur SlideShare
0
Issues des intégrations
0
Intégrations
1 643
Actions
Partages
0
Téléchargements
40
Commentaires
0
J’aime
2
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive
  • 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

    ×