Designing for HTML5 APIs // An Event Apart Seattle

For the last twenty years, we have been creating websites from inside of a certain set of constraints—inside the limits of the technology that runs the web. We became so used to those constraints, we stopped thinking about them. But HTML5 changes many of these limits. The new HTML specs define a lot more than markup—there’s a lot about databases, communication protocols, and how websites & browsers talk to each other. It’s radical stuff that will redefine the creature formerly known as the “web page.” In this talk, Jen will walk us through the new possibilities created by HTML5’s APIs and how they will shape the web of the future.

Transcript

1. HTML5 APIs @jensimmons Designing for
2. flickr.com/photos/adactio/4742158560 photo by Jeremy Keith
3. Indexed Database Web Storage Web Socket Drag and Drop WebGL Web RTC: Media Streams, Peer Connection, Data Channels Indexed Database Web Storage WebGL Web MIDI Web Audio App cache File, File Reader, File System, File Writer, Blob MathML Navigation Timing Contacts API Device Orientation Animation Timing Calendar API Touch Events Media Capture Indexed Database Web Storage Web Socket Drag and Drop Web Workers WebGL Web RTC: Media Streams, Peer Connection, Data Channels Web SQL Indexed Database Web Storage WebGL Web MIDI Web Audio Fullscreen App cache File, File Reader, File System, File Writer, Blob Cross Document Messaging Cross Origin Resource Sharing Data URI Canvas SVG WAI-ARIA WOFF Microdata Responsive Images Geo Location Audio Video HTML5 Semantics Forms
6. HTML 2, 3, 4 navigation by hidden hot spots image maps styling via attributes <font> tags bugs browser wars Era of Wild Experimentation and Chaos 1989 1995 2001 2007 2013 2019 Jen’s Wildly Oversimplified Timeline of The Web
7. CMS LAMP stack massive websites user login custom experience commerce application APIs UX design job specialization 1989 1995 2001 2007 2013 2019 Era of Settling Down and Digging In Jen’s Wildly Oversimplified Timeline of The Web
10. 1989 1995 2001 2007 2013 2019 Era of Massive Change and Rethinking Jen’s Wildly Oversimplified Timeline of The Web Mobile HTML5 CSS3 Responsive Web Design Content APIs New Possibilities
11. Era of Massive Change and Rethinking Era of Settling Down and Digging In Era of Wild Experimentation and Chaos 1989 1995 2001 2007 2013 2019 Jen’s Wildly Oversimplified Timeline of The Web
13. photo by Austin Westphal, http://www.flickr.com/photos/30238123@N06/3276818122/
14. New Things Are Possible
15. Noah Sussman flickr.com/photos/thefangmonster/490423135/
16. Users don’t need to be online to use your website.
23. App Cache
25. People can use your website do work, and have it save locally, quickly.
27. *Item Description *Item Name
    Country of Origin Select... *ID Number
    All fields save automatically
30. Local Storage Session Storage Index db
31. Content can automatically & instantaneously update itself.
33. URL HTTP HTML
34. URL
35. http request
36. HTML file
37. another http request
38. image or css file or javascript or something else
44. Web Socket
46. http://www.slideshare.net/pmoskovi/real-life-websocket-case-studies-and-demos Dave Combs Ultra Marathons
48. Multiple people can communicate with each other while on the same web page.
49. Opera Chrome Firefox Safari
53. Demo: http://hackview.sdslabs.co.in Source: http://github.com/sdslabs/hackview
54. 1 2 3 1 2 3 1 2 3
55. Multiuser Sketchpad ricardocabello.com/blog/post/701
56. softwareas.com/video-sync-with-websocket-and-node
57. gist.github.com/mahemoff/443933
58. Web Socket
59. Web RTC
60. One person can use your website while using two devices at the same time.
62. MeTV I pity you fool. jibbajabba said Car chases are interesting, but spelling is more importanter Please take a moment to ask yourself this question before reading this web log: “Am I a stupid person that can’t spell?” If yes, then answer this question: “Will I be offended if somebody, namely Dwight K. Schrute. dwight said I pity you fool. jibbajabba said Car chases are interesting, but spelling is more importanter Please take a moment to ask yourself this question before reading this web log: “Am I a stupid person that can’t spell?” If yes, then answer this question: “Will I be offended if somebody, namely Dwight K. Schrute. dwight said I pity you fool. jibbajabba said Car chases are interesting, but spelling is more importanter Please take a moment to ask yourself this question before reading this web log: “Am I a stupid person that can’t spell?” If yes, then answer this question: “Will I be offended if somebody, namely Dwight K. Schrute. dwight said MeTV 0:00 / 4:59 MeTV MeTV
63. MeTV I pity you fool. jibbajabba said Car chases are interesting, but spelling is more importanter Please take a moment to ask yourself this question before reading this web log: “Am I a stupid person that can’t spell?” If yes, then answer this question: “Will I be offended if somebody, namely Dwight K. Schrute. dwight said I pity you fool. jibbajabba said Car chases are interesting, but spelling is more importanter Please take a moment to ask yourself this question before reading this web log: “Am I a stupid person that can’t spell?” If yes, then answer this question: “Will I be offended if somebody, namely Dwight K. Schrute. dwight said I pity you fool. jibbajabba said Car chases are interesting, but spelling is more importanter Please take a moment to ask yourself this question before reading this web log: “Am I a stupid person that can’t spell?” If yes, then answer this question: “Will I be offended if somebody, namely Dwight K. Schrute. dwight said MeTV
64. MeTV I pity you fool. jibbajabba said Car chases are interesting, but spelling is more importanter Please take a moment to ask yourself this question before reading this web log: “Am I a stupid person that can’t spell?” If yes, then answer this question: “Will I be offended if somebody, namely Dwight K. Schrute. dwight said I pity you fool. jibbajabba said Car chases are interesting, but spelling is more importanter Please take a moment to ask yourself this question before reading this web log: “Am I a stupid person that can’t spell?” If yes, then answer this question: “Will I be offended if somebody, namely Dwight K. Schrute. dwight said I pity you fool. jibbajabba said Car chases are interesting, but spelling is more importanter Please take a moment to ask yourself this question before reading this web log: “Am I a stupid person that can’t spell?” If yes, then answer this question: “Will I be offended if somebody, namely Dwight K. Schrute. dwight said
65. Your interface can give helpful feedback through sound.
69. Web Audio API
70. Your website can open files, understand the information inside, and do stuff with it.
72. Edit your Image Drag File Here
74. Download Import
75. Make a video of this html5-demos.appspot.com/static/a.download.html
76. File API File Reader, Writer, System Blob URLs, Blob Builder Drag & Drop
77. Your website can see your users. And hear them.
78. Web RTC Media Stream
79. .getUserMedia()
80. Alex Komoroske http://www.youtube.com/watch?v=PNzmXDa1JLA
81. Alex Komoroske http://www.youtube.com/watch?v=PNzmXDa1JLA
89. http://shinydemos.com/getusermedia/
90. Speech Input
92. Your website can access super powers inside devices.
93. Device APIS
94. Contacts API Calendar API Tasks API Messaging API Battery Status API Network Information API Generic Sensor API Vibration API
96. But, is it ready?
98. caniuse.com
100. caniuse.com
101. caniuse.com
102. caniuse.com
103. caniuse.com
104. quirksmode.org/mobile
105. html5please.com
106. html5please.com
107. modernizr.com
108. Yes. It is ready.
109. The New Reality 1. Users don’t need to be online to use your website. 2. People can use your website do work, and have it save locally, quickly. 3. Content can automatically & instantaneously update itself. 4. Multiple people can communicate with each other while on the same page. 5. One person can use your website while using two devices at the same time. 6. Your interface can give helpful feedback through sound. 7. Your website can open files, understand the information inside, and do stuff. 8. Your website can see your users. And hear them. 9. Your website can access super powers inside devices.
110. The Educational Alliance, New York, www.edalliance.org/sculpture
111. The Web Ahead 5by5.tv/webahead
112. An innovator is not someone who creates something amazing out of nothing. An innovator is someone who wakes up to the constraints caused by false assumptions, and breaks out of them.
113. Jen Simmons jensimmons.com The Web Ahead @jensimmons