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

Designing for HTML5 APIs // Do It With Drupal

Designing for HTML5 APIs // Do It With Drupal

Presented at Lullabot's 2011 Do It With Drupal conference, in Brooklyn New York. Video at: http://drupalize.me/videos/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.

D83926c323d4f9289f947b4b4e76b939?s=128

Jen Simmons

October 13, 2011
Tweet

More Decks by Jen Simmons

Other Decks in Technology

Transcript

  1. DESIGNING FOR HTML5 APIS IT'S NOT YOUR PARENT'S WEB ANYMORE

  2. JEN SIMMONS jensimmons.com twitter: jensimmons

  3. Bartik for Drupal 7

  4. 5by5.tv/webahead

  5. None
  6. http://venusinfurs.net/2006/06/10/f-train/

  7. None
  8. DECISIONS STICK AROUND

  9. None
  10. None
  11. None
  12. None
  13. None
  14. None
  15. None
  16. None
  17. 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.
  18. INTERNET

  19. None
  20. None
  21. FTP BBS eMail Usenet LISTSERV IRC Gopher 1971 1973 1973

    1979 1986 1988 1991
  22. CompuServ The Source Delphi GEnie AppleLink eWorld America OnLine

  23. HYPERTEXT

  24. None
  25. None
  26. None
  27. None
  28. None
  29. None
  30. None
  31. None
  32. WEB 1.0

  33. 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. The Web was designed so that if it was used independently for two projects, then no major centralized changes would have to be made, but the information could smoothly reshape to represent the new state of knowledge. — Tim Berners-Lee, 1994
  34. LINK HTML HTTP

  35. None
  36. None
  37. None
  38. None
  39. None
  40. None
  41. None
  42. None
  43. None
  44. None
  45. WEB 1.0 Find something Read Look at images Click links

    to nd more things
  46. WEB 2.0

  47. None
  48. WEB 2.0 Comment Sign in Add text, photos, video, audio

    Connect to other users Buy things Participate, not just read
  49. None
  50. WEB 3.0

  51. None
  52. STORAGE

  53. Local Storage Session Storage key|value pairs WEB STORAGE

  54. full-fledged client-side database also, WebSQL INDEX DB

  55. None
  56. APPLICATION CACHE

  57. None
  58. WEB SOCKETS

  59. None
  60. None
  61. demo.kaazing.com/forex

  62. CROSS ORIGIN COMMUNICATION

  63. RESPONSIVE DESIGN

  64. •28.8k modem •600x 480 •keyboard & mouse

  65. •56.6k •800x 680 •keyboard & mouse

  66. •dsl •1024x768 •keyboard & mouse

  67. • os •1024x768+ •keyboard & mouse •3g •320x480 •touch screen

  68. • 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
  69. None
  70. None
  71. None
  72. None
  73. SO WHAT? OR, ER, WHY?

  74. LEARN MORE

  75. Pro HTML5 Programming Peter Lubbers, Brian Albers, and Frank Salim

    prohtml5.com coupon code at 5by5.tv/webahead/1
  76. Ethan Marcotte's Responsive Web Design abookapart.com

  77. dev.w3.org/html5/spec/Overview.html THE SPEC ITSELF

  78. THE SPEC ITSELF whatwg.org/html5

  79. • html5rocks.com

  80. netmagazine.com/features/ ethan-marcottes-20-favourite-responsive-sites

  81. caniuse.com

  82. quirksmode.org/mobile

  83. None
  84. None
  85. 5by5.tv/webahead

  86. jensimmons.com twitter: jensimmons THANKS!