DESIGNING FOR  HTML5 APISITS NOT YOUR PARENTS     WEB ANYMORE
JEN SIMMONS  jensimmons.comtwitter: jensimmons
Bartik for Drupal 7
5by5.tv/webahead
http://venusinfurs.net/2006/06/10/f-train/
DECISIONS  STICK AROUND
An innovator is not someonewho creates something amazingout of nothing.An innovator is someone whowakes up to the constrai...
INTERNET
FTP        1971BBS        1973eMail      1973Usenet     1979LISTSERV   1986IRC        1988Gopher     1991
CompuServ The Source   Delphi    GEnie  AppleLink   eWorldAmerica OnLine
HYPERTEXT
WEB 1.0
The World-Wide Web (W3) was developed to be a pool ofhuman knowledge, which would allow collaborators in remotesites to sh...
LINKHTMLHTTP
WEB 1.0Find somethingReadLook at imagesClick links to nd more things
WEB 2.0
WEB 2.0CommentSign inAdd text, photos, video, audioConnect to other usersBuy thingsParticipate, not just read
WEB 3.0
STORAGE
WEB STORAGE   Local Storage  Session Storage  key|value pairs
INDEX DBfull-fledged client-side database         also, WebSQL
APPLICATION  CACHE
WEB SOCKETS
demo.kaazing.com/forex
CROSS ORIGINCOMMUNICATION
RESPONSIVE  DESIGN
• 28.8k modem• 600x 480• keyboard & mouse
• 56.6k• 800x 680• keyboard & mouse
• dsl• 1024x768• keyboard & mouse
• os          • 3g• 1024x768+   • 320x480• keyboard    • touch screen & mouse
•    os, cable, dsl, satellite, dial-up,    4g, 3g, 3g in certain cities, edge• widths: 320, 480, 600, 768, 1024,    1200,...
SO WHAT?OR, ER, WHY?
LEARN MORE
Pro HTML5ProgrammingPeter Lubbers,Brian Albers,and Frank Salimprohtml5.comcoupon code at5by5.tv/webahead/1
Ethan Marcottes Responsive Web Design           abookapart.com
THE SPEC ITSELFdev.w3.org/html5/spec/Overview.html
THE SPEC ITSELF   whatwg.org/html5
•   html5rocks.com
netmagazine.com/features/ethan-marcottes-20-favourite-responsive-sites
caniuse.com
quirksmode.org/mobile
5by5.tv/webahead
THANKS!  jensimmons.comtwitter: jensimmons
Designing for HTML5 APIs
Designing for HTML5 APIs
Designing for HTML5 APIs
Designing for HTML5 APIs
Designing for HTML5 APIs
Designing for HTML5 APIs
Designing for HTML5 APIs
Designing for HTML5 APIs
Designing for HTML5 APIs
Designing for HTML5 APIs
Designing for HTML5 APIs
Designing for HTML5 APIs
Designing for HTML5 APIs
Designing for HTML5 APIs
Designing for HTML5 APIs
Designing for HTML5 APIs
Designing for HTML5 APIs
Designing for HTML5 APIs
Designing for HTML5 APIs
Designing for HTML5 APIs
Designing for HTML5 APIs
Designing for HTML5 APIs
Designing for HTML5 APIs
Designing for HTML5 APIs
Designing for HTML5 APIs
Designing for HTML5 APIs
Designing for HTML5 APIs
Designing for HTML5 APIs
Designing for HTML5 APIs
Designing for HTML5 APIs
Designing for HTML5 APIs
Designing for HTML5 APIs
Designing for HTML5 APIs
Designing for HTML5 APIs
Designing for HTML5 APIs
Designing for HTML5 APIs
Designing for HTML5 APIs
Designing for HTML5 APIs
Designing for HTML5 APIs
Designing for HTML5 APIs
Designing for HTML5 APIs
Designing for HTML5 APIs
Designing for HTML5 APIs
Upcoming SlideShare
Loading in …5
×

Designing for HTML5 APIs

1,124 views

Published on

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.

Published in: Technology, Design
1 Comment
1 Like
Statistics
Notes
No Downloads
Views
Total views
1,124
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
18
Comments
1
Likes
1
Embeds 0
No embeds

No notes for slide

Designing for HTML5 APIs

  1. 1. DESIGNING FOR HTML5 APISITS NOT YOUR PARENTS WEB ANYMORE
  2. 2. JEN SIMMONS jensimmons.comtwitter: jensimmons
  3. 3. Bartik for Drupal 7
  4. 4. 5by5.tv/webahead
  5. 5. http://venusinfurs.net/2006/06/10/f-train/
  6. 6. DECISIONS STICK AROUND
  7. 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. 8. INTERNET
  9. 9. FTP 1971BBS 1973eMail 1973Usenet 1979LISTSERV 1986IRC 1988Gopher 1991
  10. 10. CompuServ The Source Delphi GEnie AppleLink eWorldAmerica OnLine
  11. 11. HYPERTEXT
  12. 12. WEB 1.0
  13. 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. 14. LINKHTMLHTTP
  15. 15. WEB 1.0Find somethingReadLook at imagesClick links to nd more things
  16. 16. WEB 2.0
  17. 17. WEB 2.0CommentSign inAdd text, photos, video, audioConnect to other usersBuy thingsParticipate, not just read
  18. 18. WEB 3.0
  19. 19. STORAGE
  20. 20. WEB STORAGE Local Storage Session Storage key|value pairs
  21. 21. INDEX DBfull-fledged client-side database also, WebSQL
  22. 22. APPLICATION CACHE
  23. 23. WEB SOCKETS
  24. 24. demo.kaazing.com/forex
  25. 25. CROSS ORIGINCOMMUNICATION
  26. 26. RESPONSIVE DESIGN
  27. 27. • 28.8k modem• 600x 480• keyboard & mouse
  28. 28. • 56.6k• 800x 680• keyboard & mouse
  29. 29. • dsl• 1024x768• keyboard & mouse
  30. 30. • os • 3g• 1024x768+ • 320x480• keyboard • touch screen & mouse
  31. 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. 32. SO WHAT?OR, ER, WHY?
  33. 33. LEARN MORE
  34. 34. Pro HTML5ProgrammingPeter Lubbers,Brian Albers,and Frank Salimprohtml5.comcoupon code at5by5.tv/webahead/1
  35. 35. Ethan Marcottes Responsive Web Design abookapart.com
  36. 36. THE SPEC ITSELFdev.w3.org/html5/spec/Overview.html
  37. 37. THE SPEC ITSELF whatwg.org/html5
  38. 38. • html5rocks.com
  39. 39. netmagazine.com/features/ethan-marcottes-20-favourite-responsive-sites
  40. 40. caniuse.com
  41. 41. quirksmode.org/mobile
  42. 42. 5by5.tv/webahead
  43. 43. THANKS! jensimmons.comtwitter: jensimmons

×