Designing for HTML5 APIs // Future of Web Design NYC

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. There are radical changes that 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 @jensimmons Designing for
2. HTML5 @jensimmons Designing for
3. flickr.com/photos/adactio/4742158560 photo by Jeremy Keith
4. Geo Location Audio Video HTML5 Semantics Forms
5. Canvas SVG WAI-ARIA WOFF Microdata Responsive Images Geo Location Audio Video HTML5 Semantics Forms
6. 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
7. 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
10. 1989 1995 2001 2007 2013 2019 Jen’s Wildly Oversimplified Timeline of The Web
11. 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
12. 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
15. 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
16. 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
18. photo by Austin Westphal, http://www.flickr.com/photos/30238123@N06/3276818122/
19. New Things
    Are Possible
20. Noah Sussman flickr.com/photos/thefangmonster/490423135/
21. Users don’t need to be online to use your website.
27. App Cache
29. Users don’t need to be online to use your website.
30. People can use your website do work, and have it save locally, quickly.
32. *Item Description *Item Name
    Country of Origin Select... *ID Number
    All fields save automatically
35. Local Storage Session Storage Index db
36. People can use your website do work, and have it save locally, quickly.
37. Content can automatically
    & instantaneously update itself.
39. URL HTTP HTML
41. URL
42. http request
43. HTML file
44. another http request
45. image or css file or javascript or something else
72. Web Socket
75. Content can automatically
    & instantaneously update itself.
76. Multiple people
    can communicate
    with each other
    while on the
    same web page.
77. Opera Chrome Firefox Safari
81. Demo: http://hackview.sdslabs.co.in Source: http://github.com/sdslabs/hackview
82. 1 2 3 1 2 3 1 2 3
83. Multiuser Sketchpad ricardocabello.com/blog/post/701
84. softwareas.com/video-sync-with-websocket-and-node
85. gist.github.com/mahemoff/443933
86. Web Socket
87. Web RTC
88. Multiple people
    can communicate
    with each other
    while on the
    same web page.
89. One person can
    use your website while using
    two devices
    at the same time.
91. 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
92. 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
93. 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
94. One person can
    use your website while using
    two devices
    at the same time.
95. Your website can see your users.
    And hear them.
96. Web RTC
    Media Stream
97. .getUserMedia()
98. Alex Komoroske http://www.youtube.com/watch?v=PNzmXDa1JLA
102. http://shinydemos.com/getusermedia/
103. Speech Input
105. Your website can see your users.
     And hear them.
106. Your website
     can access
     super powers
     inside devices.
107. Device APIS
108. Contacts API Calendar API Tasks API Messaging API Battery Status API Network Information API Generic Sensor API Vibration API Geolocation
110. Your website
     can access
     super powers
     inside devices.
111. But,
     is it ready?
112. caniuse.com
113. caniuse.com
114. caniuse.com
115. caniuse.com
116. caniuse.com
117. quirksmode.org/mobile
118. html5please.com
119. html5please.com
120. modernizr.com
121. Yes.
     It is ready.
     
122. 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 website can see your users. And hear them. 7. Your website can access super powers inside devices.
123. The Educational Alliance, New York, www.edalliance.org/sculpture
124. The Web Ahead 5by5.tv/webahead
126. 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.
127. Jen Simmons
     jensimmons.com
     The Web Ahead
     @jensimmons speakerdeck.com/jensimmons