1. Nouveaux APIs (HTML5, CSS3, JS)
23 février 2012 - Rémy Savard

2. Nouveaux APIs
• HTML5
• APIs
• Stratégie

3. HTML5
"This logo represents HTML5, the cornerstone for
modern Web applications."
W3C - http://www.w3.org/html/logo/faq.html#logo-represent

4. HTML5
"HTML5 is the next major revision of the HTML
standard, currently under development."
Wikipedia - http://en.wikipedia.org/wiki/HTML5

5. HTML5
HTML

6. HTML5
HTML + CSS

7. HTML5
HTML + CSS + JavaScript =

8. HTML5
HTML + CSS + JavaScript =

10. APIs

11. Microdata APIs

12. Web Storage
Microdata APIs

13. Offline Web applications
Web Storage
Microdata APIs

14. Offline Web applications
Web Storage Web Workers
Microdata APIs

15. Offline Web applications
Web Storage Web Workers
Microdata APIs Geolocation

16. Offline Web applications
Web Storage Web Workers
Microdata APIs Geolocation
Drag & Drop

17. Offline Web applications
Web Storage Web Workers
Microdata APIs Geolocation
Drag & Drop
Video/Audio

18. Offline Web applications
Web Storage Web Workers
Microdata APIs Geolocation
Drag & Drop
Video/Audio
Canvas

19. Offline Web applications
Web Storage Web Workers
Microdata APIs Geolocation
Drag & Drop
SVG Video/Audio
Canvas

20. Offline Web applications
Web Storage Web Workers
Microdata APIs Geolocation
CSS3 Drag & Drop
SVG Video/Audio
Canvas

21. Microdata
"[...] people understand when they read the web
pages. But search engines have a limited
understanding of what is being discussed [...]"
http://www.schema.org/docs/gs.html

22. Microdata

23. Microdata

24. Microdata

25. Microdata
Personnes
Événements
Applications
http://www.schema.org/docs/gs.html

27. Microdata
Auteurs, critiques, musique, recettes,
applications, produits, événements
personnes, etc.

28. Stockage
• Web Storage
• Offline Web
applications

29. Web Storage
"[...] used for storing data in a web browser. Web
storage supports persistent data storage, similar to
cookies, as well as window-local storage."
http://en.wikipedia.org/wiki/Web_Storage

30. Web Storage
• Stockage clé-valeur dans le navigateur
• 0 info stocké dans la requête HTTP
• 5 Mo de stockage (IE=10 Mo)
• Seulement les strings peuvent être
stocké (Conversion en JSON pour
stockage des objets JavaScript)

31. Web Storage
• Local Storage
• Données disponibles sur le domaine
• Persistées après fermer le navigateur
• Session Storage
• Durée de vie de la fenêtre/onlget

32. Web Storage

33. Web Storage

34. Offline Web
Applications
"[...] store resources to be used by the browser when
it’s offline, granting your users partial access to your
web site or application."
http://html5doctor.com/go-offline-with-application-cache/

35. Offline Web
Applications
• Méthodes pour fonctionner sans
connexion réseau
• Contrôlé par le fichier appelé manifeste

36. Offline Web
Applications
• CACHE
• Liste en cache (URLs externe compris)
• FALLBACK
• Tentative d'accès fichier pas en cache
• NETWORK
• Disponibles uniquement en ligne

37. Offline Web
Applications

38. Offline Web
Applications

39. Web Workers
"[...] API for running scripts, [...] in the background
independently of any user interface scripts. [...]"
http://en.wikipedia.org/wiki/Web_Workers

40. Web Workers
• Scripts de longue durée pas
interrompus par les scripts qui
réagissent aux autres interactions des
utilisateurs
• Coût élevé des performances de
démarrage et de la mémoire par
instance

41. Web Workers

42. Web Workers

43. Geolocation
"[...] interface to retrieve the geographical location
information for a client-side device.[...]"
http://en.wikipedia.org/wiki/Web_Workers

44. Geolocation
• Emplacement du
périphérique grâce
à la consultation de
serveurs
d'informations de
localisation
• Adresse IP, Wi-Fi,
Adresse MAC,
Bluetooth, etc.

45. Geolocation

46. Geolocation

47. Drag & Drop
"[...] event-based mechanism, JavaScript API, and
additional markup for declaring [...] element be
draggable on a page."
http://www.html5rocks.com/en/tutorials/dnd/basics/

48. Drag & Drop
• Mécanisme basé sur des événements
• API JavaScript
• Balisage supplémentaire pour déclarer
qu'un élément est déplaçable

49. Drag & Drop

50. Drag & Drop

51. Video / Audio
"[...] Often presented as an alternative to flash in the
media, the video tag actually goes beyond that. [...]"
http://www.html5rocks.com/en/tutorials/video/basics/

52. Video / Audio
• Plug-in:
• Aide à combler les trous sur le web
• Ne sont pas ouverts
• Pas créés par la communauté
• Sous le contrôle des entreprises
• <video> et <audio> sont natifs de
votre navigateur

53. Video / Audio

54. Video / Audio

55. Canvas
"[...] dynamic, scriptable rendering of 2D shapes and
bitmap images. [...] Canvas consists of a drawable
region [...]"
http://en.wikipedia.org/wiki/Canvas_element

56. Canvas
• Région défini en HTML
• Rendus dynamiques d'images bitmap
via des scripts

57. Canvas

58. Canvas

59. Scalable Vector
Graphics
"[...] two-dimensional vector graphics, [...] they can
be searched, indexed, scripted and, if required,
compressed. [...]"
http://en.wikipedia.org/wiki/Scalable_Vector_Graphics

60. Scalable Vector
Graphics
• Décrit des graphiques vectoriels
• Basé sur XML
• Peuvent être dynamiques et interactifs
• Des modifications peuvent être décrites
dans le temps avec JavaScript

61. Scalable Vector
Graphics

62. Scalable Vector
Graphics

63. CSS3

64. CSS3
Media Queries

65. CSS3
Typograhpie

66. CSS3
Texte

67. CSS3
Couleurs

68. CSS3
Fonds et bordures

69. CSS3
Transitions, transformations 2D,
animations, système de colonnes,
dégradés, sélecteurs, etc.

70. APIs
Indexed Database, Forms, Device orientation,
WebSockets, Gestion de l'historique,
nouveaux sélecteurs JavaScript,
XMLHttpRequest2, etc.

71. Stratégie

72. Support
Stratégie

73. Support
Stratégie
Détection

74. Polyfills Support
Stratégie
Détection

75. Support

76. Support

77. Support

78. Support
"10 years ago a browser was born. Its name was
Internet Explorer 6. Now that we’re in 2012, in an
era of modern web standards, it’s time to say
goodbye."
Microsoft - http://www.theie6countdown.com/

79. Support

80. Support

81. Support

82. Support

83. Support
We, as developers, should be able to develop with
the HTML5 apis [...]. Developing in this future-
proof way means as users upgrade, your code
doesn't have to change but users will move to the
better, native experience cleanly."
Paul Irish - Google

84. Support
<!DOCTYPE HTML>

85. Support
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}

86. Support
caniuse.com

87. Détection

88. Détection
Créer chaque élément en JavaScript pour Internet
Explorer 6, 7 et 8

89. Détection

90. Polyfills
"So here we're collecting all the shims, fallbacks, and
polyfills in order to implant html5 functionality in
browsers that don't natively support them."
The All-In-One Entirely-Not-Alphabetical No-Bullshit Guide to HTML5 Fallbacks

91. Polyfills
The All-In-One
Entirely-Not-Alphabetical
No-Bullshit
Guide to
HTML5 Fallbacks
The All-In-One Entirely-Not-Alphabetical No-Bullshit Guide to HTML5 Fallbacks

92. Conclusion

93. caniuse
Conclusion

94. caniuse
Conclusion
Modernizr

95. Polyfills caniuse
Conclusion
Modernizr

96. Merci
• caniuse.com
• html5boilerplate.com
• html5rocks
• <html>5 doctor
• Dive into HTML5
• wikipedia (HTML5)

97. Nouveaux APIs (HTML5, CSS3, JS)
23 février 2012 - Rémy Savard