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.

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
6. http://venusinfurs.net/2006/06/10/f-train/
8. DECISIONS STICK AROUND
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
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
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
45. WEB 1.0 Find something Read Look at images Click links to nd more things
46. WEB 2.0
48. WEB 2.0 Comment Sign in Add text, photos, video, audio Connect to other users Buy things Participate, not just read
50. WEB 3.0
52. STORAGE
53. Local Storage Session Storage key|value pairs WEB STORAGE
54. full-fledged client-side database also, WebSQL INDEX DB
56. APPLICATION CACHE
58. WEB SOCKETS
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
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
85. 5by5.tv/webahead
86. jensimmons.com twitter: jensimmons THANKS!