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

HTML5: Not Just for Breakfast

Embed Size (px)

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.

Citation preview

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