HTML5 APIs Will Change the Web… And Your Designs // An Event Apart San Francisco

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 will change the web and your designs Jen Simmons An Event Apart San Francisco 2012
2. flickr.com/photos/adactio/4742158560 photo by Jeremy Keith
4. Sergey Mavrody 2011
5. Life Magazine, 1969 Ralph Crane— Time & Life Pictures / Getty Images http://life.time.com/history/new-york-city-subway-photos-from-the-1940s-1950s-and-1960s/#13
7. Bowling Green Bowling Green 4 4• •5 5 Broad St Broad St J J• •Z Z Rector St Rector St R R World Trade World Trade Center Center E Clark S Broad St J•Z City Hall R Rector St R Franklin St 1 Canal St 1 N•R 1 Canal St J•N•Q R• Z• 6 Canal St A•C•E Spring St 6 Spring St C•E Bowery J• Z East Broadway F Ess F• Grand St B•D Whitehall St South Ferry R Bowling Green 4•5 Wall St 4•5 Wall St 2•3 Fulton St Chambers St 1•2•3 Park Place 2• 3 Chambers St J•Z Brooklyn Bridge City Hall 4•5•6 Chambers St A•C A•C•J•Z 2•3•4•5 Rector St 1 Cortlandt St 1 Cortlandt St R South Ferry 1 World Trade Center E Ferry s BROOKLYN-BATTERY TUNNEL MANHATTAN BRIDGE BROOKLYN BRIDGE ARICK ST DELANCEY ST R U TGERS ST CHURCH ST V BROADWAY BROADWAY LLEN ST GRAND ST E BWAY SO U TH ST W ATER ST H CANAL ST NAL ST RING ST WTC WTC Site 9/11 Memorial BROOKLYN BRIDGE PARK 6 FINANCIAL DISTRICT CHINATOWN LITTLE ITALY SOHO BECA BROOKLYN HEIGHTS DUMBO
9. Broad St Broad St J J• •Z Z St St DeKal B•Q• Hoyt St 2•3 Clark St 2 •3 U Carroll St F• G Bergen St F• G Broad St J•Z York St F City Hall R St Canal St J•N•Q R• Z• 6 6 Bowery J• Z East Broadway F Grand St B•D Jay St Jay St MetroTech MetroTech A A• •C C• •F F• •R R Jay St MetroTech A•C•F•R Sm ith 9 Sts F• G Av Hoyt Schermerho A•C•G High St A•C Whitehall St South Ferry R Wall St 4•5 Wall St 2•3 Fulton St Chambers St J•Z Brooklyn Bridge City Hall 4•5•6 St Atlantic Av–Barc D• Nevins S 2•3•4• Borough Hall 2 •3 •4 •5 Court St R A•C•J•Z 2•3•4•5 St ry 1 nd Ferry summer on BROOKLYN-BATTERY TUNNEL MANHATTAN BRIDGE BROOKLYN BRIDGE DELANCEY ST R U TGERS ST JAY ST SMITH ST FLATBUSH AV BROADWAY ST E BWAY SO U TH ST W ATER ST FLUSHING AV MYRT BERGEN ST HICKS ST HENRY ST 9 ST UNION ST W ASH CANAL ST FORT G PA BROOKLYN BRIDGE PARK NEW YORK TRANSIT MUSEUM 6 FINANCIAL DISTRICT CHINATOWN LITTLE ITALY HO RED HOOK CARROLL GARDENS BROOKLYN HEIGHTS FORT GREENE DUMBO NAVY YARD
15. Life Magazine, 1958 Stan Wayman— Time & Life Pictures / Getty Images http://life.time.com/history/new-york-city-subway-photos-from-the-1940s-1950s-and-1960s/#20
19. flickr.com/photos/mtaphotos (photos from last four slides)
20. Life Magazine, 1944 Peter Stackpole — Time & Life Pictures / Getty Images http://life.time.com/history/new-york-city-subway-photos-from-the-1940s-1950s-and-1960s/#21
25. http://www.flickr.com/photos/alonzo/113658733
28. 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… 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
32. web socket
33. URL HTTP HTML
34. URL HTTP request
35. HTML
36. another URL HTTP request
37. image or css file or javascript file or something else
42. web socket
43. Truly bidirectional, full duplex Always open connection
48. demo.kaazing.com/racer
49. spacewords.gamesforlanguage.com
51. What to do with it? Real-time updates of content on a single web page Multiple people using single page, seeing each others activity One person using multiple web windows on multiple devices at the same time
52. The Web Ahead #5
53. Storage
58. Local Storage Session Storage Index db Web SQL
60. The Web Ahead #1
61. Application Cache
62. You don’t have to be online to use a website.
63. Manifest file
64. The Web Ahead #1
65. Files
66. File API File Reader / Writer / System Blob URLs / Blob Builder Drag & Drop Files
68. The Web Ahead #14
69. Media Stream
70. getUserMedia()
71. shinydemos.com
72. shinydemos.com/warholiser
73. shinydemos.com/warholiser
74. shinydemos.com/color-picker
76. Web Audio
79. The Web Ahead #32
80. device APIs
82. w3.org/2009/dap
83. Vibration API
84. Canvas
88. The Web Ahead #31
89. WebGL
90. chromeexperiments.com/bookcase
91. chromeexperiments.com/bookcase
92. 3dtin.com
93. controllers
95. console.maban.co.uk
96. The Web Ahead #38
97. Web MIDI API
98. new kinds of content
101. Photo by Inga Sarda-Sorensen, https://twitter.com/isardasorensen/status/249660321608912897
103. Is the medium the message?
104. [ tba ]
106. Web Socket Storage Application Cache Files Media Stream Web Audio Device APIs WebGL Controllers New kinds of content [tba]
107. ?
109. *this drawing is totally stolen from Luke Wroblewski. See last hour. Well, and I changed it. Unlike Tomi Ahone, I don’t think mobile is the 7th mass media, I think the internet (in all forms) is the 6th. We just misunderstood it for a while.
111. 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.
112. Thanks! @jensimmons 5by5.tv/webahead