Listen to the audio recording of this presentation, while reading slides, at: http://lanyrd.com/2012/sxsw-interactive/spmyp 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.

1. W ill a nd
Ch an ge Your
th e De signs
W eb
A PIs #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. HTTP request
URL

26. HTML

27. HTTP request
another URL

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. Web storage
Local Storage
Session Storage
key|value pairs

62. Index DB
full-fledged client-side database
also, WebSQL

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. Files
File API
File Reader / Writer / System
Blob URLs / Blob Builder
Drag & Drop

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