Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

D83926c323d4f9289f947b4b4e76b939?s=47 Jen Simmons
November 12, 2012

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.

D83926c323d4f9289f947b4b4e76b939?s=128

Jen Simmons

November 12, 2012
Tweet

More Decks by Jen Simmons

Other Decks in Technology

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

  3. None
  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
  6. None
  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
  8. None
  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
  10. None
  11. None
  12. None
  13. None
  14. None
  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
  16. None
  17. None
  18. None
  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
  21. None
  22. None
  23. None
  24. None
  25. http://www.flickr.com/photos/alonzo/113658733

  26. None
  27. None
  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
  29. None
  30. None
  31. None
  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

  38. None
  39. None
  40. None
  41. None
  42. web socket

  43. Truly bidirectional, full duplex Always open connection

  44. None
  45. None
  46. None
  47. None
  48. demo.kaazing.com/racer

  49. spacewords.gamesforlanguage.com

  50. None
  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

  54. None
  55. None
  56. None
  57. None
  58. Local Storage Session Storage Index db Web SQL

  59. None
  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
  67. None
  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

  75. None
  76. Web Audio

  77. None
  78. None
  79. The Web Ahead #32

  80. device APIs

  81. None
  82. w3.org/2009/dap

  83. Vibration API

  84. Canvas

  85. None
  86. None
  87. None
  88. The Web Ahead #31

  89. WebGL

  90. chromeexperiments.com/bookcase

  91. chromeexperiments.com/bookcase

  92. 3dtin.com

  93. controllers

  94. None
  95. console.maban.co.uk

  96. The Web Ahead #38

  97. Web MIDI API

  98. new kinds of content

  99. None
  100. None
  101. Photo by Inga Sarda-Sorensen, https://twitter.com/isardasorensen/status/249660321608912897

  102. None
  103. Is the medium the message?

  104. [ tba ]

  105. None
  106. Web Socket Storage Application Cache Files Media Stream Web Audio

    Device APIs WebGL Controllers New kinds of content [tba]
  107. ?

  108. None
  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.
  110. None
  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