HTML5 APIs Will Change the Web — and Your Designs

Click here to load reader

  • date post

    04-Dec-2014
  • Category

    Technology

  • view

    3.141
  • download

    0

Embed Size (px)

description

Listen to the audio recording of this presentation, while reading slides, at: http://lanyrd.com/2012/sxsw-interactive/spmyp 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.

Transcript of HTML5 APIs Will Change the Web — and Your Designs

  • 1. W ill a ndCh an ge Your th e De signs W eb A PIs #html5apis
  • 2. Jen Simmons @jensimmons #html5apis
  • 3. 5by5.tv/webahead
  • 4. WEB SOCKET
  • 5. The World-Wide Web (W3) was developed tobe a pool of human knowledge, which wouldallow collaborators in remote sites to share theirideas and all aspects of a common project Theidea of the Web was prompted by positiveexperience of a small home-brew personalhypertext system used for keeping track ofpersonal information on a distributed project. Tim Berners-Lee, 1994
  • 6. URLHTTPHTML
  • 7. URL
  • 8. HTTP request URL
  • 9. HTML
  • 10. HTTP requestanother URL
  • 11. image orcss le orjavascript le orsomething else
  • 12. Etherpad
  • 13. WEB SOCKET
  • 14. Truly bidirectional,full duplexAlways open connection
  • 15. video at vimeo.com/36676406
  • 16. video at vimeo.com/31266606
  • 17. video at vimeo.com/32956007
  • 18. kaazing.com/demo
  • 19. spacewords.gamesforlanguage.com
  • 20. What to do?Real-time updates of contenton a single web pageMultiple people using single page, seeingeach others activity immediatelyOne person using multiple web windowson multiple devices at the same time
  • 21. WEB SOCKET
  • 22. The Web Ahead #5
  • 23. STORAGE
  • 24. Web storageLocal StorageSession Storagekey|value pairs
  • 25. Index DBfull-edged client-side databasealso, WebSQL
  • 26. APPLICATION CACHE
  • 27. Assumption of the web:you have to be online touse a website, right?Nope.
  • 28. The Web Ahead #1
  • 29. FILES
  • 30. FilesFile APIFile Reader / Writer / SystemBlob URLs / Blob BuilderDrag & Drop
  • 31. The Web Ahead #14
  • 32. DEVICE APIs
  • 33. Vibration API
  • 34. Device API Roadmap w3.org/2009/dap
  • 35. WebGL
  • 36. code.google.com/p/webglsamples video of this aquarium demo at youtube.com/watch?v=64TcBiqmVko
  • 37. [ TBA ]
  • 38. ?
  • 39. WEB SOCKET STORAGEAPPLICATION CACHE FILES DEVICE APIs WebGL [TBA]
  • 40. An innovator is not someonewho creates somethingamazing out of nothing.An innovator is someone whowakes up to the constraintscaused by false assumptions,and breaks out of them.
  • 41. 5by5.tv/webahead
  • 42. Thanks! Jen SimmonsSend Questions to me at @jensimmons