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.

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 1971
BBS 1973
eMail 1973
Usenet 1979
LISTSERV 1986
IRC 1988
Gopher 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. WEB STORAGE
Local Storage
Session Storage
key|value pairs

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

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 • 3g
• 1024x768+ • 320x480
• keyboard • touch screen
& mouse

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. THE SPEC ITSELF
dev.w3.org/html5/spec/Overview.html

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. THANKS!
jensimmons.com
twitter: jensimmons