HTML5: Not Just for Breakfast

58
NOT JUST FOR BREAKFAST ANYMORE. Dave Bouwman, Head Geek Mike Juniper, Javascript Ninja

description

Presented at the 2011, Esri Developer Summit, this talk focuses on designing appropriate "experiences" for target platform - desktop, tablet or mobile, as well as how we can leverage HTML5 to do this efficiently.

Transcript of HTML5: Not Just for Breakfast

Page 1: HTML5: Not Just for Breakfast

NOT JUST FOR BREAKFAST ANYMORE.

Dave Bouwman, Head GeekMike Juniper, Javascript Ninja

Page 2: HTML5: Not Just for Breakfast

I’ve seen the

FUTUREand it’s my

BROWSER

Page 3: HTML5: Not Just for Breakfast
Page 4: HTML5: Not Just for Breakfast

We

Bob Muglia, VP, Microsoft

Page 5: HTML5: Not Just for Breakfast
Page 6: HTML5: Not Just for Breakfast
Page 7: HTML5: Not Just for Breakfast
Page 8: HTML5: Not Just for Breakfast

native webv

s.

Page 9: HTML5: Not Just for Breakfast

Bret Taylor, CTO, FaceBook

Page 10: HTML5: Not Just for Breakfast
Page 11: HTML5: Not Just for Breakfast

WTF?

Page 12: HTML5: Not Just for Breakfast

4things

Page 13: HTML5: Not Just for Breakfast

1) SEMANTIC MARKUP

Page 14: HTML5: Not Just for Breakfast

<div id=“header”>

<div id=“nav”>

<div class=“article”>

<div class=“section”>

<div id=“sidebar”>

<div id=“footer”>

Page 15: HTML5: Not Just for Breakfast

<header>

<nav>

<article>

<section>

<aside>

<footer>

Page 16: HTML5: Not Just for Breakfast

http://www.flickr.com/photos/benhusmann/5126029229

Page 17: HTML5: Not Just for Breakfast

2) CSS3

Page 18: HTML5: Not Just for Breakfast

Where is MAI Kitteh!

Page 19: HTML5: Not Just for Breakfast

DEMO

Page 20: HTML5: Not Just for Breakfast

3) Javascript (duh!)

Page 21: HTML5: Not Just for Breakfast

4) Browser Extensions

Page 22: HTML5: Not Just for Breakfast

GeolocationLocal storageWebGL, Canvas*, WebWorkers, SVG*, Drag & Drop

http://www.flickr.com/photos/hendry/3642114424

Geolocation

Page 23: HTML5: Not Just for Breakfast

key : valueLocal Storage

Page 24: HTML5: Not Just for Breakfast

Canvas & SVG

Page 25: HTML5: Not Just for Breakfast

WebGL

Page 26: HTML5: Not Just for Breakfast

Rainbows and Unicorns

Page 27: HTML5: Not Just for Breakfast
Page 28: HTML5: Not Just for Breakfast

Die. Die. Die.

Page 29: HTML5: Not Just for Breakfast
Page 30: HTML5: Not Just for Breakfast
Page 31: HTML5: Not Just for Breakfast

IE8 Firefox 3.6 Chrome Safari0

5

10

15

20

25

30

Javascript Benchmark Time (s)

teh suk.

Page 32: HTML5: Not Just for Breakfast

Device Differences

Page 33: HTML5: Not Just for Breakfast

!=Touch vs. Point

Page 34: HTML5: Not Just for Breakfast
Page 35: HTML5: Not Just for Breakfast

Client Specific Views

http://www.flickr.com/photos/gray_macbook/5371234004

Page 36: HTML5: Not Just for Breakfast

ViewControllerRequest ViewEngineView View

Normal Request/Response

Page 37: HTML5: Not Just for Breakfast

PhoneView

ControllerRequest CustomViewEngineView

UserAgent?

TabletView

DesktopView

Custom ViewEngine

Page 38: HTML5: Not Just for Breakfast

I think in code…

Page 39: HTML5: Not Just for Breakfast

Esri ChangeMatters

Page 40: HTML5: Not Just for Breakfast

MobileView

ControllerRequest CustomViewEngineView

UserAgent?

iPadView

DesktopView

Views

Sorry! HTML + Javascript Flex

Page 41: HTML5: Not Just for Breakfast

CODE SCREEN CAP

Page 42: HTML5: Not Just for Breakfast
Page 43: HTML5: Not Just for Breakfast
Page 44: HTML5: Not Just for Breakfast

Demo time!

Page 45: HTML5: Not Just for Breakfast

WxMappr.com

Page 46: HTML5: Not Just for Breakfast

MobileView

ControllerRequest CustomViewEngineView

UserAgent?

iPadView

DesktopView

Views

HTML + Javascript

jQueryMobile

HTML + JavascriptOrientation Aware

HTML + Javascript

Page 47: HTML5: Not Just for Breakfast

@media (orientation:landscape)

Page 48: HTML5: Not Just for Breakfast

Demo time!

Page 49: HTML5: Not Just for Breakfast

maps.SafeRoutesInfo.org

Page 50: HTML5: Not Just for Breakfast

Small ScreenView

ControllerRequest CustomViewEngineView

UserAgent +WURFL

Large ScreenView

Views

HTML + Javascript

HTML + Javascript

Page 51: HTML5: Not Just for Breakfast

Browser Capabilities added in CustomViews

Page 52: HTML5: Not Just for Breakfast

Demo time!

Page 53: HTML5: Not Just for Breakfast

Aw man… I hate server side code

Page 54: HTML5: Not Just for Breakfast

Modernizr + Jquery + partials

Page 55: HTML5: Not Just for Breakfast
Page 56: HTML5: Not Just for Breakfast
Page 57: HTML5: Not Just for Breakfast

I’ve seen the

FUTUREand it’s my

BROWSER

Page 58: HTML5: Not Just for Breakfast

Resources & QuestionsWxMappr.com

http://github.com/dtsagileMaps.saferoutesinfo.org