HTML5 APIs Will Change the Web — and Your Designs

83
Will Change the Web and Your Designs APIs #html5apis

description

Listen to the audio recording of this presentation, while reading slides, at: http://lanyrd.com/2012/sxsw-interactive/spmyp HTML5. It's more than paving the cowpaths. It's more than markup. There's a lot of stuff in the spec about databases and communication protocols and blahdiblah backend juju. Some of that stuff is pretty radical. And it will change how you design websites. Why? Because for the last twenty years, web designers have been creating inside of a certain set of constraints. We've been limited in what's possible by the technology that runs the web. We became so used to those limits, we stopped thinking about them. They became invisible. They Just Are. Of course the web works this certain way. Of course a user clicks and waits, the page loads, like this… but guess what? That's not what the web will look like in the future. The constrains have changed. Come hear a non-nerd explanation of the new possibilities created by HTML5’s APIs. Don't just wait around to see how other people implement these technologies. Learn about HTML APIs yourself, so you can design for and create the web of the future.

Transcript of HTML5 APIs Will Change the Web — and Your Designs

Page 1: HTML5 APIs Will Change the Web — and Your Designs

Will Change

the Web

and Your

Designs

APIs#html5apis

Page 2: HTML5 APIs Will Change the Web — and Your Designs

Jen Simmons@jensimmons

#html5apis

Page 3: HTML5 APIs Will Change the Web — and Your Designs

5by5.tv/webahead

Page 4: HTML5 APIs Will Change the Web — and Your Designs
Page 5: HTML5 APIs Will Change the Web — and Your Designs
Page 6: HTML5 APIs Will Change the Web — and Your Designs
Page 7: HTML5 APIs Will Change the Web — and Your Designs
Page 8: HTML5 APIs Will Change the Web — and Your Designs
Page 9: HTML5 APIs Will Change the Web — and Your Designs
Page 10: HTML5 APIs Will Change the Web — and Your Designs
Page 11: HTML5 APIs Will Change the Web — and Your Designs
Page 12: HTML5 APIs Will Change the Web — and Your Designs
Page 13: HTML5 APIs Will Change the Web — and Your Designs
Page 14: HTML5 APIs Will Change the Web — and Your Designs
Page 15: HTML5 APIs Will Change the Web — and Your Designs
Page 16: HTML5 APIs Will Change the Web — and Your Designs
Page 17: HTML5 APIs Will Change the Web — and Your Designs
Page 18: HTML5 APIs Will Change the Web — and Your Designs
Page 19: HTML5 APIs Will Change the Web — and Your Designs

WEB SOCKET

Page 20: HTML5 APIs Will Change the Web — and Your Designs

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.

— Tim Berners-Lee, 1994

Page 21: HTML5 APIs Will Change the Web — and Your Designs
Page 22: HTML5 APIs Will Change the Web — and Your Designs

URLHTTPHTML

Page 23: HTML5 APIs Will Change the Web — and Your Designs
Page 24: HTML5 APIs Will Change the Web — and Your Designs

URL

Page 25: HTML5 APIs Will Change the Web — and Your Designs

URL

HTTP request

Page 26: HTML5 APIs Will Change the Web — and Your Designs

HTML

Page 27: HTML5 APIs Will Change the Web — and Your Designs

another URL

HTTP request

Page 28: HTML5 APIs Will Change the Web — and Your Designs

image orcss file orjavascript file orsomething else

Page 29: HTML5 APIs Will Change the Web — and Your Designs
Page 30: HTML5 APIs Will Change the Web — and Your Designs
Page 31: HTML5 APIs Will Change the Web — and Your Designs
Page 32: HTML5 APIs Will Change the Web — and Your Designs
Page 34: HTML5 APIs Will Change the Web — and Your Designs
Page 35: HTML5 APIs Will Change the Web — and Your Designs
Page 36: HTML5 APIs Will Change the Web — and Your Designs
Page 37: HTML5 APIs Will Change the Web — and Your Designs

WEB SOCKET

Page 38: HTML5 APIs Will Change the Web — and Your Designs

Truly bidirectional, full duplex

Always open connection

Page 43: HTML5 APIs Will Change the Web — and Your Designs

kaazing.com/demo

Page 44: HTML5 APIs Will Change the Web — and Your Designs

spacewords.gamesforlanguage.com

Page 45: HTML5 APIs Will Change the Web — and Your Designs

What to do?Real-time updates of content on a single web page

Multiple people using single page, seeing each others activity immediately

One person using multiple web windows on multiple devices at the same time

Page 46: HTML5 APIs Will Change the Web — and Your Designs

WEB SOCKET

Page 47: HTML5 APIs Will Change the Web — and Your Designs

The Web Ahead #5

Page 48: HTML5 APIs Will Change the Web — and Your Designs

STORAGE

Page 49: HTML5 APIs Will Change the Web — and Your Designs
Page 50: HTML5 APIs Will Change the Web — and Your Designs
Page 51: HTML5 APIs Will Change the Web — and Your Designs
Page 52: HTML5 APIs Will Change the Web — and Your Designs
Page 53: HTML5 APIs Will Change the Web — and Your Designs
Page 54: HTML5 APIs Will Change the Web — and Your Designs
Page 55: HTML5 APIs Will Change the Web — and Your Designs
Page 56: HTML5 APIs Will Change the Web — and Your Designs
Page 57: HTML5 APIs Will Change the Web — and Your Designs
Page 58: HTML5 APIs Will Change the Web — and Your Designs
Page 59: HTML5 APIs Will Change the Web — and Your Designs
Page 60: HTML5 APIs Will Change the Web — and Your Designs
Page 61: HTML5 APIs Will Change the Web — and Your Designs

Local StorageSession Storagekey|value pairs

Web storage

Page 62: HTML5 APIs Will Change the Web — and Your Designs

full-fledged client-side databasealso, WebSQL

Index DB

Page 63: HTML5 APIs Will Change the Web — and Your Designs
Page 64: HTML5 APIs Will Change the Web — and Your Designs

APPLICATION CACHE

Page 65: HTML5 APIs Will Change the Web — and Your Designs

Assumption of the web: you have to be online to use a website, right?

Nope.

Page 66: HTML5 APIs Will Change the Web — and Your Designs

The Web Ahead #1

Page 67: HTML5 APIs Will Change the Web — and Your Designs

FILES

Page 68: HTML5 APIs Will Change the Web — and Your Designs

File APIFile Reader / Writer / SystemBlob URLs / Blob BuilderDrag & Drop

Files

Page 69: HTML5 APIs Will Change the Web — and Your Designs

The Web Ahead #14

Page 70: HTML5 APIs Will Change the Web — and Your Designs

DEVICE APIs

Page 71: HTML5 APIs Will Change the Web — and Your Designs

Vibration API

Page 72: HTML5 APIs Will Change the Web — and Your Designs

Device API Roadmapw3.org/2009/dap

Page 73: HTML5 APIs Will Change the Web — and Your Designs

WebGL

Page 75: HTML5 APIs Will Change the Web — and Your Designs

[ TBA ]

Page 77: HTML5 APIs Will Change the Web — and Your Designs

?

Page 78: HTML5 APIs Will Change the Web — and Your Designs
Page 80: HTML5 APIs Will Change the Web — and Your Designs

WEB SOCKETSTORAGE

APPLICATION CACHEFILES

DEVICE APIsWebGL[TBA]

Page 81: HTML5 APIs Will Change the Web — and Your Designs

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 83: HTML5 APIs Will Change the Web — and Your Designs

Thanks!Jen Simmons

Send Questions to me at@jensimmons