Designing for HTML5 APIs

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

description

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.

Transcript of Designing for HTML5 APIs

Page 1: Designing for HTML5 APIs

DESIGNING FOR HTML5 APIS

IT'S NOT YOUR PARENT'S WEB ANYMORE

Page 2: Designing for HTML5 APIs

JEN SIMMONSjensimmons.com

twitter: jensimmons

Page 3: Designing for HTML5 APIs

Bartik for Drupal 7

Page 4: Designing for HTML5 APIs

5by5.tv/webahead

Page 5: Designing for HTML5 APIs
Page 7: Designing for HTML5 APIs
Page 8: Designing for HTML5 APIs

DECISIONS STICK

AROUND

Page 9: Designing for HTML5 APIs
Page 10: Designing for HTML5 APIs
Page 11: Designing for HTML5 APIs
Page 12: Designing for HTML5 APIs
Page 13: Designing for HTML5 APIs
Page 14: Designing for HTML5 APIs
Page 15: Designing for HTML5 APIs
Page 16: Designing for HTML5 APIs
Page 17: Designing for HTML5 APIs

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.

Page 18: Designing for HTML5 APIs

INTERNET

Page 19: Designing for HTML5 APIs
Page 20: Designing for HTML5 APIs
Page 21: Designing for HTML5 APIs

FTP BBSeMailUsenetLISTSERV IRCGopher

1971 1973197319791986 19881991

Page 22: Designing for HTML5 APIs

CompuServThe Source

DelphiGEnie

AppleLinkeWorld

America OnLine

Page 23: Designing for HTML5 APIs

HYPERTEXT

Page 24: Designing for HTML5 APIs
Page 25: Designing for HTML5 APIs
Page 26: Designing for HTML5 APIs
Page 27: Designing for HTML5 APIs
Page 28: Designing for HTML5 APIs
Page 29: Designing for HTML5 APIs
Page 30: Designing for HTML5 APIs
Page 31: Designing for HTML5 APIs
Page 32: Designing for HTML5 APIs

WEB 1.0

Page 33: Designing for HTML5 APIs

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

Page 34: Designing for HTML5 APIs

LINKHTMLHTTP

Page 35: Designing for HTML5 APIs
Page 36: Designing for HTML5 APIs
Page 37: Designing for HTML5 APIs
Page 38: Designing for HTML5 APIs
Page 39: Designing for HTML5 APIs
Page 40: Designing for HTML5 APIs
Page 41: Designing for HTML5 APIs
Page 42: Designing for HTML5 APIs
Page 43: Designing for HTML5 APIs
Page 44: Designing for HTML5 APIs
Page 45: Designing for HTML5 APIs

WEB 1.0Find somethingReadLook at imagesClick links to !nd more things

Page 46: Designing for HTML5 APIs

WEB 2.0

Page 47: Designing for HTML5 APIs
Page 48: Designing for HTML5 APIs

WEB 2.0CommentSign inAdd text, photos, video, audioConnect to other usersBuy thingsParticipate, not just read

Page 49: Designing for HTML5 APIs
Page 50: Designing for HTML5 APIs

WEB 3.0

Page 51: Designing for HTML5 APIs
Page 52: Designing for HTML5 APIs

STORAGE

Page 53: Designing for HTML5 APIs

Local StorageSession Storagekey|value pairs

WEB STORAGE

Page 54: Designing for HTML5 APIs

full-fledged client-side databasealso, WebSQL

INDEX DB

Page 55: Designing for HTML5 APIs
Page 56: Designing for HTML5 APIs

APPLICATION CACHE

Page 57: Designing for HTML5 APIs
Page 58: Designing for HTML5 APIs

WEB SOCKETS

Page 59: Designing for HTML5 APIs
Page 60: Designing for HTML5 APIs
Page 62: Designing for HTML5 APIs

CROSS ORIGIN COMMUNICATION

Page 63: Designing for HTML5 APIs

RESPONSIVE DESIGN

Page 64: Designing for HTML5 APIs

•28.8k modem

•600x 480

•keyboard & mouse

Page 65: Designing for HTML5 APIs

• 56.6k

•800x 680

•keyboard & mouse

Page 66: Designing for HTML5 APIs

•dsl

• 1024x768

•keyboard & mouse

Page 67: Designing for HTML5 APIs

•!os

• 1024x768+

•keyboard & mouse

• 3g

• 320x480

• touch screen

Page 68: Designing for HTML5 APIs

• !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

Page 69: Designing for HTML5 APIs
Page 70: Designing for HTML5 APIs
Page 71: Designing for HTML5 APIs
Page 72: Designing for HTML5 APIs
Page 73: Designing for HTML5 APIs

SO WHAT?OR, ER, WHY?

Page 74: Designing for HTML5 APIs

LEARN MORE

Page 77: Designing for HTML5 APIs

dev.w3.org/html5/spec/Overview.html

THE SPEC ITSELF

Page 78: Designing for HTML5 APIs

THE SPEC ITSELF

whatwg.org/html5

Page 83: Designing for HTML5 APIs
Page 84: Designing for HTML5 APIs
Page 85: Designing for HTML5 APIs

5by5.tv/webahead

Page 86: Designing for HTML5 APIs

jensimmons.comtwitter: jensimmons

THANKS!