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

Designing for HTML5 APIs // Future of Web Design NYC

D83926c323d4f9289f947b4b4e76b939?s=47 Jen Simmons
October 09, 2013

Designing for HTML5 APIs // Future of Web Design NYC

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. There are radical changes that 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

October 09, 2013
Tweet

More Decks by Jen Simmons

Other Decks in Technology

Transcript

  1. HTML5 @jensimmons Designing for

  2. HTML5 @jensimmons Designing for

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

  4. Geo Location Audio Video HTML5 Semantics Forms

  5. Canvas SVG WAI-ARIA WOFF Microdata Responsive Images Geo Location Audio

    Video HTML5 Semantics Forms
  6. 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
  7. 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
  8. None
  9. None
  10. 1989 1995 2001 2007 2013 2019 Jen’s Wildly Oversimplified Timeline

    of The Web
  11. 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
  12. 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
  13. None
  14. None
  15. 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
  16. 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
  17. None
  18. photo by Austin Westphal, http://www.flickr.com/photos/30238123@N06/3276818122/

  19. New Things  Are Possible

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

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

  22. None
  23. None
  24. None
  25. None
  26. None
  27. App Cache

  28. None
  29. Users don’t need to be online to use your website.

  30. People can use your website do work, and have it

    save locally, quickly.
  31. None
  32. *Item Description *Item Name  Country of Origin Select... *ID

    Number  All fields save automatically
  33. None
  34. None
  35. Local Storage Session Storage Index db

  36. People can use your website do work, and have it

    save locally, quickly.
  37. Content can automatically  & instantaneously update itself.

  38. None
  39. URL HTTP HTML

  40. None
  41. URL

  42. http request

  43. HTML file

  44. another http request

  45. image or css file or javascript or something else

  46. None
  47. None
  48. None
  49. None
  50. None
  51. None
  52. None
  53. None
  54. None
  55. None
  56. None
  57. None
  58. None
  59. None
  60. None
  61. None
  62. None
  63. None
  64. None
  65. None
  66. None
  67. None
  68. None
  69. None
  70. None
  71. None
  72. Web Socket

  73. None
  74. None
  75. Content can automatically  & instantaneously update itself.

  76. Multiple people  can communicate  with each other 

    while on the  same web page.
  77. Opera Chrome Firefox Safari

  78. None
  79. None
  80. None
  81. Demo: http://hackview.sdslabs.co.in Source: http://github.com/sdslabs/hackview

  82. 1 2 3 1 2 3 1 2 3

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

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

  85. gist.github.com/mahemoff/443933

  86. Web Socket

  87. Web RTC

  88. Multiple people  can communicate  with each other 

    while on the  same web page.
  89. One person can  use your website while using 

    two devices  at the same time.
  90. None
  91. 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
  92. 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
  93. 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
  94. One person can  use your website while using 

    two devices  at the same time.
  95. Your website can see your users.  And hear them.

  96. Web RTC Media Stream

  97. .getUserMedia()

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

  99. None
  100. None
  101. None
  102. http://shinydemos.com/getusermedia/

  103. Speech Input

  104. None
  105. Your website can see your users.  And hear them.

  106. Your website  can access  super powers  inside

    devices.
  107. Device APIS

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

    API Network Information API Generic Sensor API Vibration API Geolocation
  109. None
  110. Your website  can access  super powers  inside

    devices.
  111. But, is it ready?

  112. caniuse.com

  113. caniuse.com

  114. caniuse.com

  115. caniuse.com

  116. caniuse.com

  117. quirksmode.org/mobile

  118. html5please.com

  119. html5please.com

  120. modernizr.com

  121. Yes. It is ready.

  122. 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 website can see your users. And hear them. 7. Your website can access super powers inside devices.
  123. The Educational Alliance, New York, www.edalliance.org/sculpture

  124. The Web Ahead 5by5.tv/webahead

  125. None
  126. 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.
  127. Jen Simmons jensimmons.com The Web Ahead @jensimmons speakerdeck.com/jensimmons