Designing for HTML5 APIs

  • 854 views
Uploaded on

Presented at Lullabot's 2011 Do It With Drupal conference, in Brooklyn New York. …

Presented at Lullabot's 2011 Do It With Drupal conference, in Brooklyn New York.

http://2011.doitwithdrupal.com/2011/sessions/its-not-your-fathers-web-designing-html-apis

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. Radical stuff that will redefine the creature formerly-known as the "web page". Come hear a non-nerd explanation of the specific possibilities created by the new HTML. Don't just wait around to see how other people implement these technologies. Learn about HTML5 APIs yourself, and envision the web of the future.

More in: Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
854
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
14
Comments
1
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. DESIGNING FOR HTML5 APISITS NOT YOUR PARENTS WEB ANYMORE
  • 2. JEN SIMMONS jensimmons.comtwitter: jensimmons
  • 3. Bartik for Drupal 7
  • 4. 5by5.tv/webahead
  • 5. http://venusinfurs.net/2006/06/10/f-train/
  • 6. DECISIONS STICK AROUND
  • 7. An innovator is not someonewho creates something amazingout of nothing.An innovator is someone whowakes up to the constraintscaused by false assumptions,and breaks out of them.
  • 8. INTERNET
  • 9. FTP 1971BBS 1973eMail 1973Usenet 1979LISTSERV 1986IRC 1988Gopher 1991
  • 10. CompuServ The Source Delphi GEnie AppleLink eWorldAmerica OnLine
  • 11. HYPERTEXT
  • 12. WEB 1.0
  • 13. The World-Wide Web (W3) was developed to be a pool ofhuman knowledge, which would allow collaborators in remotesites to share their ideas and all aspects of a common project…The idea of the Web was prompted by positive experience ofa small “home-brew” personal hypertext system used forkeeping track of personal information on a distributed project.The Web was designed so that if it was used independentlyfor two projects, then no major centralized changes wouldhave to be made, but the information could smoothly reshapeto represent the new state of knowledge. — Tim Berners-Lee, 1994
  • 14. LINKHTMLHTTP
  • 15. WEB 1.0Find somethingReadLook at imagesClick links to nd more things
  • 16. WEB 2.0
  • 17. WEB 2.0CommentSign inAdd text, photos, video, audioConnect to other usersBuy thingsParticipate, not just read
  • 18. WEB 3.0
  • 19. STORAGE
  • 20. WEB STORAGE Local Storage Session Storage key|value pairs
  • 21. INDEX DBfull-fledged client-side database also, WebSQL
  • 22. APPLICATION CACHE
  • 23. WEB SOCKETS
  • 24. demo.kaazing.com/forex
  • 25. CROSS ORIGINCOMMUNICATION
  • 26. RESPONSIVE DESIGN
  • 27. • 28.8k modem• 600x 480• keyboard & mouse
  • 28. • 56.6k• 800x 680• keyboard & mouse
  • 29. • dsl• 1024x768• keyboard & mouse
  • 30. • os • 3g• 1024x768+ • 320x480• keyboard • touch screen & mouse
  • 31. • os, cable, dsl, satellite, dial-up, 4g, 3g, 3g in certain cities, edge• widths: 320, 480, 600, 768, 1024, 1200, 1330, 1440, 1900...• keyboard, mouse, touch, screenreader, large text
  • 32. SO WHAT?OR, ER, WHY?
  • 33. LEARN MORE
  • 34. Pro HTML5ProgrammingPeter Lubbers,Brian Albers,and Frank Salimprohtml5.comcoupon code at5by5.tv/webahead/1
  • 35. Ethan Marcottes Responsive Web Design abookapart.com
  • 36. THE SPEC ITSELFdev.w3.org/html5/spec/Overview.html
  • 37. THE SPEC ITSELF whatwg.org/html5
  • 38. • html5rocks.com
  • 39. netmagazine.com/features/ethan-marcottes-20-favourite-responsive-sites
  • 40. caniuse.com
  • 41. quirksmode.org/mobile
  • 42. 5by5.tv/webahead
  • 43. THANKS! jensimmons.comtwitter: jensimmons