HTML5 Conference with W3C, Wygwam, Inria, Euratechnologie

1. Aurélien Verla Giovanni Clément
Directeur Technique Expert .NET
Wygwam 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

5. Pour plus d’informations :
info@wygwam.com
www.wygwam.com
formation.wygwam.com

7. • 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

8. 2004
1. Création du WHATWG
 Web Hypertext Application Technology Working Group
2. Principaux acteurs
 Apple
 Mozilla Foundation
 Opera Software
 Google
3. http://www.whatwg.org/

9. • 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

10. W3C Working Draft 25 May 2011
1. http://www.w3.org/TR/html5/
2. Actuellement au statut Last Call
447 membres
1. 220 personnes de 64 sociétés différentes
2. 227 experts invités
3. http://www.w3.org/2000/09/dbwg/details?group=40318&public=1

11. ENISA
1. European Network and Information Security Agency
31 Juillet 2011
1. 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

13. Le rêve des développeurs
HTML5, le Messie ?

14. 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é

15. HTML5, c’est :
 Un Terme utilisé comme fourre-tout

16. Une multitude de spécifications, standardisant les
contenus et interactions Web, d’aujourd’hui et demain.

18. Le rêve des développeurs
• Nous ne sommes
pas en 2014 !

19. Un problème vieux comme le monde !

20. 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 !

21. Un problème vieux comme le monde !
 Différences de comportements des markups uniques
 Différents statuts des spécifications
 Standards évoluant !

22. Un problème vieux comme le monde !
 Différences d’implémentations par les browsers
 Implique des performances différentes
 Attention aux devices mobiles !

23. 1. HTML5 : pour Hypertext Markup Language, Le
markup de la prochaine génération d’applications web
2. CSS3 : pour Cascading Style Sheets, Permet
d’appliquer des styles aux documents
3. SVG 1.1 : pour Scalable Vector Graphics, Un moteur
de dessin vectoriel)

25. Un nouveau DOCTYPE
 Avant
 Après

26. Standardisation de la structure d’une
page Web
 Instaure un squelette standard d’une page web.
 Structure sémantique uniformisée.
 Pas encore supportés par les technologies
d’assistance

27. Standardisation de la structure d’une
page Web
 <header>
 <nav>
 <article>
 <section>
 <aside>
 <footer>

28. Avant en HTML4 Après en HTML5
HTML4 : HTML5 :

29. <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 …

31. 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.

32. Standardisation des lecteurs médias
<audio />
• Supporté par la plupart des
browsers next-gen
• Support des codecs de bases
différents selon les browsers

33. <audio /> Codecs Support
Browser Ogg MP3 AAC Wav
Internet Explorer x x
Firefox x x
Chrome x x x x
Safari x x x
Opera x x

34. 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

35. Standardisation des lecteurs médias
Source : AlsaCreations.

36. WebGL
1. Standardisation de la 3D pour le Web sur base d’OpenGL
2. N’est pas une recommandation du W3C
Principaux acteurs
1. Google
2. Mozilla Fundation
3. Apple
4. Nokia

38. Ajout de balises de rendus
dynamiques
<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

40. Ajout de balises de rendus dynamiques

41. Standardisation des formulaires
Nouveaux types de champs :
 Tel
 Search
 url
 Email
 Datetime, date, month, week, time
 Number
 Range
 Color

42. Standardisation des formulaires
Nouveaux attributs de champs :
 Autofocus
 Placeholder
Validation du formulaire :
 Required
 Range
 Etc.

44. Ajout de nouvelles APIs indispensables
 File API
 Workers et Messaging
 Web Storage
 Offline Web Application
 Geolocation
 WebSocket
 Web SQL Database
 Drag’n'drop
 Et bien d’autres ….

45. Nouvelles APIs : Les plus
utilisé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.

47. Nouvelles APIs : Les plus utilisées

48. 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

49. Nouvelles APIs : Les plus utilisées
Local storage ou WebStorage

50. 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

51. Nouvelles APIs : Les plus utilisées
Application déconnectée (manifest)

52. 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.

53. Nouvelles APIs : Les plus utilisées

54. 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

55. 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.

57. 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 !

59. Problématique des tests
Ne pas tester uniquement la détection de
Feature mais aussi son implémentation !!

61. Exemple ici pour le border-radius CSS3

65. J’aimerais garder un minimum ma nouvelle expérience
utilisateur 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 !

66. J’aimerais garder un minimum ma nouvelle expérience
utilisateur 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 !

67. Aucun soucis dans le cadre d’un site ciblé
1. A destination des navigateurs Next Gen
2. Sans adaptation pour les « ancêtres »
3. Sans utiliser l’ensemble des fonctionnalités rêvées