Designing for HTML5 APIs // An Event Apart Seattle

Designing for HTML5 APIs // An Event Apart Seattle

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

April 02, 2013
Tweet

Transcript

  1. HTML5 APIs @jensimmons Designing for

  2. flickr.com/photos/adactio/4742158560 photo by Jeremy Keith

  3. 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
  4. None
  5. None
  6. 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
  7. 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
  8. None
  9. None
  10. 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
  11. 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
  12. None
  13. photo by Austin Westphal, http://www.flickr.com/photos/30238123@N06/3276818122/

  14. New Things Are Possible

  15. Noah Sussman flickr.com/photos/thefangmonster/490423135/

  16. Users don’t need to be online to use your website.

  17. None
  18. None
  19. None
  20. None
  21. None
  22. None
  23. App Cache

  24. None
  25. People can use your website do work, and have it

    save locally, quickly.
  26. None
  27. *Item Description *Item Name  Country of Origin Select... *ID

    Number  All fields save automatically
  28. None
  29. None
  30. Local Storage Session Storage Index db

  31. Content can automatically & instantaneously update itself.

  32. None
  33. URL HTTP HTML

  34. URL

  35. http request

  36. HTML file

  37. another http request

  38. image or css file or javascript or something else

  39. None
  40. None
  41. None
  42. None
  43. None
  44. Web Socket

  45. None
  46. http://www.slideshare.net/pmoskovi/real-life-websocket-case-studies-and-demos Dave Combs Ultra Marathons

  47. None
  48. Multiple people can communicate with each other while on the

    same web page.
  49. Opera Chrome Firefox Safari

  50. None
  51. None
  52. None
  53. Demo: http://hackview.sdslabs.co.in Source: http://github.com/sdslabs/hackview

  54. 1 2 3 1 2 3 1 2 3

  55. Multiuser Sketchpad ricardocabello.com/blog/post/701

  56. softwareas.com/video-sync-with-websocket-and-node

  57. gist.github.com/mahemoff/443933

  58. Web Socket

  59. Web RTC

  60. One person can use your website while using two devices

    at the same time.
  61. None
  62. 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
  63. 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
  64. 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
  65. Your interface can give helpful feedback through sound.

  66. None
  67. None
  68. None
  69. Web Audio API

  70. Your website can open files, understand the information inside, and

    do stuff with it.
  71. None
  72. Edit your Image Drag File Here

  73. None
  74. Download Import

  75. Make a video of this html5-demos.appspot.com/static/a.download.html

  76. File API File Reader, Writer, System Blob URLs, Blob Builder

    Drag & Drop
  77. Your website can see your users. And hear them.

  78. Web RTC Media Stream

  79. .getUserMedia()

  80. Alex Komoroske http://www.youtube.com/watch?v=PNzmXDa1JLA

  81. Alex Komoroske http://www.youtube.com/watch?v=PNzmXDa1JLA

  82. None
  83. None
  84. None
  85. None
  86. None
  87. None
  88. None
  89. http://shinydemos.com/getusermedia/

  90. Speech Input

  91. None
  92. Your website can access super powers inside devices.

  93. Device APIS

  94. Contacts API Calendar API Tasks API Messaging API Battery Status

    API Network Information API Generic Sensor API Vibration API
  95. None
  96. But, is it ready?

  97. None
  98. caniuse.com

  99. None
  100. caniuse.com

  101. caniuse.com

  102. caniuse.com

  103. caniuse.com

  104. quirksmode.org/mobile

  105. html5please.com

  106. html5please.com

  107. modernizr.com

  108. Yes. It is ready.

  109. The New Reality 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 interface can give helpful feedback through sound. 7. Your website can open files, understand the information inside, and do stuff. 8. Your website can see your users. And hear them. 9. Your website can access super powers inside devices.
  110. The Educational Alliance, New York, www.edalliance.org/sculpture

  111. The Web Ahead 5by5.tv/webahead

  112. 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.
  113. Jen Simmons jensimmons.com The Web Ahead @jensimmons