HTML5 APIs Will Change the Web — and Your Designs // SXSW Interactive

HTML5. It's more than paving the cowpaths. It's more than markup. There's a lot of stuff in the spec about databases and communication protocols and blahdiblah backend juju. Some of that stuff is pretty radical. And it will change how you design websites. Why? Because for the last twenty years, web designers have been creating inside of a certain set of constraints. We've been limited in what's possible by the technology that runs the web. We became so used to those limits, we stopped thinking about them. They became invisible. They Just Are. Of course the web works this certain way. Of course a user clicks and waits, the page loads, like this… but guess what? That's not what the web will look like in the future. The constrains have changed. Come hear a non-nerd explanation of the new possibilities created by HTML5’s APIs. Don't just wait around to see how other people implement these technologies. Learn about HTML APIs yourself, so you can design for and create the web of the future.

Presented at SXSW 2012: http://schedule.sxsw.com/2012/events/event_IAP11512

Audio download available at: http://lanyrd.com/2012/sxsw-interactive/spmyp/

Transcript

1. Will Change the Web and Your Designs APIs #html5apis
2. Jen Simmons @jensimmons #html5apis
3. 5by5.tv/webahead
19. WEB SOCKET
20. The World-Wide Web (W3) was developed to be a pool of human knowledge, which would allow collaborators in remote sites to share their ideas and all aspects of a common project… The idea of the Web was prompted by positive experience of a small “home-brew” personal hypertext system used for keeping track of personal information on a distributed project. — Tim Berners-Lee, 1994
22. URL HTTP HTML
24. URL
25. URL HTTP request
26. HTML
27. another URL HTTP request
28. image or css file or javascript file or something else
33. Etherpad
37. WEB SOCKET
38. Truly bidirectional, full duplex Always open connection
40. video at vimeo.com/36676406
41. video at vimeo.com/31266606
42. video at vimeo.com/32956007
43. kaazing.com/demo
44. spacewords.gamesforlanguage.com
45. What to do? Real-time updates of content on a single web page Multiple people using single page, seeing each others activity immediately One person using multiple web windows on multiple devices at the same time
46. WEB SOCKET
47. The Web Ahead #5
48. STORAGE
61. Local Storage Session Storage key|value pairs Web storage
62. full-fledged client-side database also, WebSQL Index DB
64. APPLICATION CACHE
65. Assumption of the web: you have to be online to use a website, right? Nope.
66. The Web Ahead #1
67. FILES
68. File API File Reader / Writer / System Blob URLs / Blob Builder Drag & Drop Files
69. The Web Ahead #14
70. DEVICE APIs
71. Vibration API
72. Device API Roadmap w3.org/2009/dap
73. WebGL
74. code.google.com/p/webglsamples video of this aquarium demo at youtube.com/watch?v=64TcBiqmVko
75. [ TBA ]
77. ?
80. WEB SOCKET STORAGE APPLICATION CACHE FILES DEVICE APIs WebGL [TBA]
81. 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.
82. 5by5.tv/webahead
83. Thanks! Jen Simmons Send Questions to me at @jensimmons