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

HTML5 APIs Will Change the Web — and Your Designs // SXSW Interactive

HTML5 APIs Will Change the Web — and Your Designs // SXSW Interactive

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.

Presented at SXSW 2012: http://schedule.sxsw.com/2012/events/event_IAP11512

Audio download available at: http://lanyrd.com/2012/sxsw-interactive/spmyp/

D83926c323d4f9289f947b4b4e76b939?s=128

Jen Simmons

March 09, 2012
Tweet

More Decks by Jen Simmons

Other Decks in Technology

Transcript

  1. Will Change the Web and Your Designs APIs #html5apis

  2. Jen Simmons @jensimmons #html5apis

  3. 5by5.tv/webahead

  4. None
  5. None
  6. None
  7. None
  8. None
  9. None
  10. None
  11. None
  12. None
  13. None
  14. None
  15. None
  16. None
  17. None
  18. None
  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
  21. None
  22. URL HTTP HTML

  23. None
  24. URL

  25. URL HTTP request

  26. HTML

  27. another URL HTTP request

  28. image or css file or javascript file or something else

  29. None
  30. None
  31. None
  32. None
  33. Etherpad

  34. None
  35. None
  36. None
  37. WEB SOCKET

  38. Truly bidirectional, full duplex Always open connection

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

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

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

  63. None
  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. File API File Reader / Writer / System Blob URLs

    / Blob Builder Drag & Drop Files
  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 ]

  76. None
  77. ?

  78. None
  79. None
  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