Use Xamarin.Forms and surprise your customers when develop native apps, in less time and cheaper
How to Develop a Rich, Native-quality User Experience for Mobile Using Web Standards
-
Upload
david-kaneda -
Category
Technology
-
view
8.686 -
download
0
description
Transcript of How to Develop a Rich, Native-quality User Experience for Mobile Using Web Standards
![Page 1: How to Develop a Rich, Native-quality User Experience for Mobile Using Web Standards](https://reader033.fdocuments.us/reader033/viewer/2022061212/5495400ab479598d538b4719/html5/thumbnails/1.jpg)
How to Develop a Rich, Native-quality User
Experience for Mobile Using Web Standards
DAVID KANEDA, SENCHA
![Page 2: How to Develop a Rich, Native-quality User Experience for Mobile Using Web Standards](https://reader033.fdocuments.us/reader033/viewer/2022061212/5495400ab479598d538b4719/html5/thumbnails/2.jpg)
@davidkaneda@senchainc@jqtouch@webkitbits@9bits
![Page 3: How to Develop a Rich, Native-quality User Experience for Mobile Using Web Standards](https://reader033.fdocuments.us/reader033/viewer/2022061212/5495400ab479598d538b4719/html5/thumbnails/3.jpg)
How to Develop a Rich, Native-quality User
Experience for Mobile Using Web Standards
![Page 4: How to Develop a Rich, Native-quality User Experience for Mobile Using Web Standards](https://reader033.fdocuments.us/reader033/viewer/2022061212/5495400ab479598d538b4719/html5/thumbnails/4.jpg)
![Page 5: How to Develop a Rich, Native-quality User Experience for Mobile Using Web Standards](https://reader033.fdocuments.us/reader033/viewer/2022061212/5495400ab479598d538b4719/html5/thumbnails/5.jpg)
WAP’s dead, baby.WAP’s dead.
![Page 6: How to Develop a Rich, Native-quality User Experience for Mobile Using Web Standards](https://reader033.fdocuments.us/reader033/viewer/2022061212/5495400ab479598d538b4719/html5/thumbnails/6.jpg)
2%2% 3%
7%
39%
47%
iOSAndroidRIMWebOSWinmoOther
http://metrics.admob.comJanuary 2010
US Mobile Smartphone Traffic
![Page 7: How to Develop a Rich, Native-quality User Experience for Mobile Using Web Standards](https://reader033.fdocuments.us/reader033/viewer/2022061212/5495400ab479598d538b4719/html5/thumbnails/7.jpg)
![Page 8: How to Develop a Rich, Native-quality User Experience for Mobile Using Web Standards](https://reader033.fdocuments.us/reader033/viewer/2022061212/5495400ab479598d538b4719/html5/thumbnails/8.jpg)
Did someone say devices?
![Page 9: How to Develop a Rich, Native-quality User Experience for Mobile Using Web Standards](https://reader033.fdocuments.us/reader033/viewer/2022061212/5495400ab479598d538b4719/html5/thumbnails/9.jpg)
![Page 10: How to Develop a Rich, Native-quality User Experience for Mobile Using Web Standards](https://reader033.fdocuments.us/reader033/viewer/2022061212/5495400ab479598d538b4719/html5/thumbnails/10.jpg)
![Page 11: How to Develop a Rich, Native-quality User Experience for Mobile Using Web Standards](https://reader033.fdocuments.us/reader033/viewer/2022061212/5495400ab479598d538b4719/html5/thumbnails/11.jpg)
230,000
![Page 12: How to Develop a Rich, Native-quality User Experience for Mobile Using Web Standards](https://reader033.fdocuments.us/reader033/viewer/2022061212/5495400ab479598d538b4719/html5/thumbnails/12.jpg)
230,000iOS activations a day.
![Page 13: How to Develop a Rich, Native-quality User Experience for Mobile Using Web Standards](https://reader033.fdocuments.us/reader033/viewer/2022061212/5495400ab479598d538b4719/html5/thumbnails/13.jpg)
![Page 14: How to Develop a Rich, Native-quality User Experience for Mobile Using Web Standards](https://reader033.fdocuments.us/reader033/viewer/2022061212/5495400ab479598d538b4719/html5/thumbnails/14.jpg)
![Page 15: How to Develop a Rich, Native-quality User Experience for Mobile Using Web Standards](https://reader033.fdocuments.us/reader033/viewer/2022061212/5495400ab479598d538b4719/html5/thumbnails/15.jpg)
![Page 16: How to Develop a Rich, Native-quality User Experience for Mobile Using Web Standards](https://reader033.fdocuments.us/reader033/viewer/2022061212/5495400ab479598d538b4719/html5/thumbnails/16.jpg)
60,000Android shipments a day.
![Page 17: How to Develop a Rich, Native-quality User Experience for Mobile Using Web Standards](https://reader033.fdocuments.us/reader033/viewer/2022061212/5495400ab479598d538b4719/html5/thumbnails/17.jpg)
SAMSUNG GALAXY TAB
COMING SOON…
![Page 18: How to Develop a Rich, Native-quality User Experience for Mobile Using Web Standards](https://reader033.fdocuments.us/reader033/viewer/2022061212/5495400ab479598d538b4719/html5/thumbnails/18.jpg)
BLACKBERRY TORCH
![Page 19: How to Develop a Rich, Native-quality User Experience for Mobile Using Web Standards](https://reader033.fdocuments.us/reader033/viewer/2022061212/5495400ab479598d538b4719/html5/thumbnails/19.jpg)
WEBOS 2.0
![Page 20: How to Develop a Rich, Native-quality User Experience for Mobile Using Web Standards](https://reader033.fdocuments.us/reader033/viewer/2022061212/5495400ab479598d538b4719/html5/thumbnails/20.jpg)
Let’s talk tech.
![Page 21: How to Develop a Rich, Native-quality User Experience for Mobile Using Web Standards](https://reader033.fdocuments.us/reader033/viewer/2022061212/5495400ab479598d538b4719/html5/thumbnails/21.jpg)
![Page 22: How to Develop a Rich, Native-quality User Experience for Mobile Using Web Standards](https://reader033.fdocuments.us/reader033/viewer/2022061212/5495400ab479598d538b4719/html5/thumbnails/22.jpg)
![Page 23: How to Develop a Rich, Native-quality User Experience for Mobile Using Web Standards](https://reader033.fdocuments.us/reader033/viewer/2022061212/5495400ab479598d538b4719/html5/thumbnails/23.jpg)
![Page 24: How to Develop a Rich, Native-quality User Experience for Mobile Using Web Standards](https://reader033.fdocuments.us/reader033/viewer/2022061212/5495400ab479598d538b4719/html5/thumbnails/24.jpg)
HTML5
![Page 25: How to Develop a Rich, Native-quality User Experience for Mobile Using Web Standards](https://reader033.fdocuments.us/reader033/viewer/2022061212/5495400ab479598d538b4719/html5/thumbnails/25.jpg)
new elements
![Page 26: How to Develop a Rich, Native-quality User Experience for Mobile Using Web Standards](https://reader033.fdocuments.us/reader033/viewer/2022061212/5495400ab479598d538b4719/html5/thumbnails/26.jpg)
new elements
section, article, header, footer, aside
yawn.
![Page 27: How to Develop a Rich, Native-quality User Experience for Mobile Using Web Standards](https://reader033.fdocuments.us/reader033/viewer/2022061212/5495400ab479598d538b4719/html5/thumbnails/27.jpg)
new features
![Page 28: How to Develop a Rich, Native-quality User Experience for Mobile Using Web Standards](https://reader033.fdocuments.us/reader033/viewer/2022061212/5495400ab479598d538b4719/html5/thumbnails/28.jpg)
new features
web storageweb workers
form validationmicrodata
![Page 29: How to Develop a Rich, Native-quality User Experience for Mobile Using Web Standards](https://reader033.fdocuments.us/reader033/viewer/2022061212/5495400ab479598d538b4719/html5/thumbnails/29.jpg)
new input types
![Page 30: How to Develop a Rich, Native-quality User Experience for Mobile Using Web Standards](https://reader033.fdocuments.us/reader033/viewer/2022061212/5495400ab479598d538b4719/html5/thumbnails/30.jpg)
TYPE=EMAIL TYPE=URL TYPE=NUMBER
new input types
![Page 31: How to Develop a Rich, Native-quality User Experience for Mobile Using Web Standards](https://reader033.fdocuments.us/reader033/viewer/2022061212/5495400ab479598d538b4719/html5/thumbnails/31.jpg)
<video> & <audio>
![Page 32: How to Develop a Rich, Native-quality User Experience for Mobile Using Web Standards](https://reader033.fdocuments.us/reader033/viewer/2022061212/5495400ab479598d538b4719/html5/thumbnails/32.jpg)
<video> & <audio>
<video> can be styled like other elements
![Page 33: How to Develop a Rich, Native-quality User Experience for Mobile Using Web Standards](https://reader033.fdocuments.us/reader033/viewer/2022061212/5495400ab479598d538b4719/html5/thumbnails/33.jpg)
<video> & <audio>
<video> can be styled like other elementsJavaScript control over playback
![Page 34: How to Develop a Rich, Native-quality User Experience for Mobile Using Web Standards](https://reader033.fdocuments.us/reader033/viewer/2022061212/5495400ab479598d538b4719/html5/thumbnails/34.jpg)
<video> & <audio>
<video> can be styled like other elementsJavaScript control over playback
Quick tip: Autoplay can work, even if Apple says otherwise.
![Page 35: How to Develop a Rich, Native-quality User Experience for Mobile Using Web Standards](https://reader033.fdocuments.us/reader033/viewer/2022061212/5495400ab479598d538b4719/html5/thumbnails/35.jpg)
![Page 36: How to Develop a Rich, Native-quality User Experience for Mobile Using Web Standards](https://reader033.fdocuments.us/reader033/viewer/2022061212/5495400ab479598d538b4719/html5/thumbnails/36.jpg)
![Page 37: How to Develop a Rich, Native-quality User Experience for Mobile Using Web Standards](https://reader033.fdocuments.us/reader033/viewer/2022061212/5495400ab479598d538b4719/html5/thumbnails/37.jpg)
cache manifest
![Page 38: How to Develop a Rich, Native-quality User Experience for Mobile Using Web Standards](https://reader033.fdocuments.us/reader033/viewer/2022061212/5495400ab479598d538b4719/html5/thumbnails/38.jpg)
cache manifest
Make apps o!ine-accessible
![Page 39: How to Develop a Rich, Native-quality User Experience for Mobile Using Web Standards](https://reader033.fdocuments.us/reader033/viewer/2022061212/5495400ab479598d538b4719/html5/thumbnails/39.jpg)
cache manifest
Make apps o!ine-accessibleCache, Network, Fallback
![Page 40: How to Develop a Rich, Native-quality User Experience for Mobile Using Web Standards](https://reader033.fdocuments.us/reader033/viewer/2022061212/5495400ab479598d538b4719/html5/thumbnails/40.jpg)
cache manifest
Make apps o!ine-accessibleCache, Network, Fallback
Once you go cache, you never go back
![Page 41: How to Develop a Rich, Native-quality User Experience for Mobile Using Web Standards](https://reader033.fdocuments.us/reader033/viewer/2022061212/5495400ab479598d538b4719/html5/thumbnails/41.jpg)
geolocation
![Page 42: How to Develop a Rich, Native-quality User Experience for Mobile Using Web Standards](https://reader033.fdocuments.us/reader033/viewer/2022061212/5495400ab479598d538b4719/html5/thumbnails/42.jpg)
geolocation
![Page 43: How to Develop a Rich, Native-quality User Experience for Mobile Using Web Standards](https://reader033.fdocuments.us/reader033/viewer/2022061212/5495400ab479598d538b4719/html5/thumbnails/43.jpg)
That’s so <meta>
![Page 44: How to Develop a Rich, Native-quality User Experience for Mobile Using Web Standards](https://reader033.fdocuments.us/reader033/viewer/2022061212/5495400ab479598d538b4719/html5/thumbnails/44.jpg)
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
<link rel="apple-touch-icon-precomposed" media="screen and (resolution: 326dpi)" href="/link/to/iOS-114px.png" />
That’s so <meta>
![Page 45: How to Develop a Rich, Native-quality User Experience for Mobile Using Web Standards](https://reader033.fdocuments.us/reader033/viewer/2022061212/5495400ab479598d538b4719/html5/thumbnails/45.jpg)
CSS3
![Page 46: How to Develop a Rich, Native-quality User Experience for Mobile Using Web Standards](https://reader033.fdocuments.us/reader033/viewer/2022061212/5495400ab479598d538b4719/html5/thumbnails/46.jpg)
CSS3 Basics
![Page 47: How to Develop a Rich, Native-quality User Experience for Mobile Using Web Standards](https://reader033.fdocuments.us/reader033/viewer/2022061212/5495400ab479598d538b4719/html5/thumbnails/47.jpg)
CSS3 Basics
border-radiusborder-image
opacitygradient
text-shadow
box-shadow:before & :after
masks@font-face
reflect
![Page 48: How to Develop a Rich, Native-quality User Experience for Mobile Using Web Standards](https://reader033.fdocuments.us/reader033/viewer/2022061212/5495400ab479598d538b4719/html5/thumbnails/48.jpg)
![Page 49: How to Develop a Rich, Native-quality User Experience for Mobile Using Web Standards](https://reader033.fdocuments.us/reader033/viewer/2022061212/5495400ab479598d538b4719/html5/thumbnails/49.jpg)
![Page 50: How to Develop a Rich, Native-quality User Experience for Mobile Using Web Standards](https://reader033.fdocuments.us/reader033/viewer/2022061212/5495400ab479598d538b4719/html5/thumbnails/50.jpg)
![Page 51: How to Develop a Rich, Native-quality User Experience for Mobile Using Web Standards](https://reader033.fdocuments.us/reader033/viewer/2022061212/5495400ab479598d538b4719/html5/thumbnails/51.jpg)
![Page 52: How to Develop a Rich, Native-quality User Experience for Mobile Using Web Standards](https://reader033.fdocuments.us/reader033/viewer/2022061212/5495400ab479598d538b4719/html5/thumbnails/52.jpg)
![Page 53: How to Develop a Rich, Native-quality User Experience for Mobile Using Web Standards](https://reader033.fdocuments.us/reader033/viewer/2022061212/5495400ab479598d538b4719/html5/thumbnails/53.jpg)
![Page 54: How to Develop a Rich, Native-quality User Experience for Mobile Using Web Standards](https://reader033.fdocuments.us/reader033/viewer/2022061212/5495400ab479598d538b4719/html5/thumbnails/54.jpg)
![Page 55: How to Develop a Rich, Native-quality User Experience for Mobile Using Web Standards](https://reader033.fdocuments.us/reader033/viewer/2022061212/5495400ab479598d538b4719/html5/thumbnails/55.jpg)
Transforms
![Page 56: How to Develop a Rich, Native-quality User Experience for Mobile Using Web Standards](https://reader033.fdocuments.us/reader033/viewer/2022061212/5495400ab479598d538b4719/html5/thumbnails/56.jpg)
translaterotatescaleskewscale
Transforms
![Page 57: How to Develop a Rich, Native-quality User Experience for Mobile Using Web Standards](https://reader033.fdocuments.us/reader033/viewer/2022061212/5495400ab479598d538b4719/html5/thumbnails/57.jpg)
Transitions & Animations
![Page 58: How to Develop a Rich, Native-quality User Experience for Mobile Using Web Standards](https://reader033.fdocuments.us/reader033/viewer/2022061212/5495400ab479598d538b4719/html5/thumbnails/58.jpg)
More than just pretty e"ectsUsually hardware-accelerated
Transitions & Animations
![Page 59: How to Develop a Rich, Native-quality User Experience for Mobile Using Web Standards](https://reader033.fdocuments.us/reader033/viewer/2022061212/5495400ab479598d538b4719/html5/thumbnails/59.jpg)
More than just pretty e"ectsUsually hardware-accelerated
Transitions & Animations
![Page 60: How to Develop a Rich, Native-quality User Experience for Mobile Using Web Standards](https://reader033.fdocuments.us/reader033/viewer/2022061212/5495400ab479598d538b4719/html5/thumbnails/60.jpg)
WebKit-specific CSS
![Page 61: How to Develop a Rich, Native-quality User Experience for Mobile Using Web Standards](https://reader033.fdocuments.us/reader033/viewer/2022061212/5495400ab479598d538b4719/html5/thumbnails/61.jpg)
WebKit-specific CSS
![Page 62: How to Develop a Rich, Native-quality User Experience for Mobile Using Web Standards](https://reader033.fdocuments.us/reader033/viewer/2022061212/5495400ab479598d538b4719/html5/thumbnails/62.jpg)
WebKit-specific CSS
-webkit-tap-highlight-color: rgba(0,0,0,0);
![Page 63: How to Develop a Rich, Native-quality User Experience for Mobile Using Web Standards](https://reader033.fdocuments.us/reader033/viewer/2022061212/5495400ab479598d538b4719/html5/thumbnails/63.jpg)
WebKit-specific CSS
-webkit-tap-highlight-color: rgba(0,0,0,0);-webkit-user-select: none;
![Page 64: How to Develop a Rich, Native-quality User Experience for Mobile Using Web Standards](https://reader033.fdocuments.us/reader033/viewer/2022061212/5495400ab479598d538b4719/html5/thumbnails/64.jpg)
WebKit-specific CSS
-webkit-tap-highlight-color: rgba(0,0,0,0);-webkit-user-select: none;-webkit-touch-callout: none;
![Page 65: How to Develop a Rich, Native-quality User Experience for Mobile Using Web Standards](https://reader033.fdocuments.us/reader033/viewer/2022061212/5495400ab479598d538b4719/html5/thumbnails/65.jpg)
Trouble Spots
![Page 66: How to Develop a Rich, Native-quality User Experience for Mobile Using Web Standards](https://reader033.fdocuments.us/reader033/viewer/2022061212/5495400ab479598d538b4719/html5/thumbnails/66.jpg)
350ms to Kill
![Page 67: How to Develop a Rich, Native-quality User Experience for Mobile Using Web Standards](https://reader033.fdocuments.us/reader033/viewer/2022061212/5495400ab479598d538b4719/html5/thumbnails/67.jpg)
350ms to Kill
It’s longer than it soundsAvoid with custom touch eventsLazy method: bind to touchend
![Page 68: How to Develop a Rich, Native-quality User Experience for Mobile Using Web Standards](https://reader033.fdocuments.us/reader033/viewer/2022061212/5495400ab479598d538b4719/html5/thumbnails/68.jpg)
a fixed game
![Page 69: How to Develop a Rich, Native-quality User Experience for Mobile Using Web Standards](https://reader033.fdocuments.us/reader033/viewer/2022061212/5495400ab479598d538b4719/html5/thumbnails/69.jpg)
a fixed game
No position: fixed; in CSSoverflow: auto/scroll; requires two fingers
Hack by manipulating touch objects
![Page 70: How to Develop a Rich, Native-quality User Experience for Mobile Using Web Standards](https://reader033.fdocuments.us/reader033/viewer/2022061212/5495400ab479598d538b4719/html5/thumbnails/70.jpg)
Need a hand?
![Page 71: How to Develop a Rich, Native-quality User Experience for Mobile Using Web Standards](https://reader033.fdocuments.us/reader033/viewer/2022061212/5495400ab479598d538b4719/html5/thumbnails/71.jpg)
jQTouch JQTOUCH.COM
![Page 72: How to Develop a Rich, Native-quality User Experience for Mobile Using Web Standards](https://reader033.fdocuments.us/reader033/viewer/2022061212/5495400ab479598d538b4719/html5/thumbnails/72.jpg)
Sencha Touch SENCHA.COM
![Page 73: How to Develop a Rich, Native-quality User Experience for Mobile Using Web Standards](https://reader033.fdocuments.us/reader033/viewer/2022061212/5495400ab479598d538b4719/html5/thumbnails/73.jpg)
“Real artists ship.”Steve Jobs
![Page 74: How to Develop a Rich, Native-quality User Experience for Mobile Using Web Standards](https://reader033.fdocuments.us/reader033/viewer/2022061212/5495400ab479598d538b4719/html5/thumbnails/74.jpg)
WEB APPS
![Page 75: How to Develop a Rich, Native-quality User Experience for Mobile Using Web Standards](https://reader033.fdocuments.us/reader033/viewer/2022061212/5495400ab479598d538b4719/html5/thumbnails/75.jpg)
![Page 76: How to Develop a Rich, Native-quality User Experience for Mobile Using Web Standards](https://reader033.fdocuments.us/reader033/viewer/2022061212/5495400ab479598d538b4719/html5/thumbnails/76.jpg)
![Page 77: How to Develop a Rich, Native-quality User Experience for Mobile Using Web Standards](https://reader033.fdocuments.us/reader033/viewer/2022061212/5495400ab479598d538b4719/html5/thumbnails/77.jpg)
![Page 78: How to Develop a Rich, Native-quality User Experience for Mobile Using Web Standards](https://reader033.fdocuments.us/reader033/viewer/2022061212/5495400ab479598d538b4719/html5/thumbnails/78.jpg)
![Page 79: How to Develop a Rich, Native-quality User Experience for Mobile Using Web Standards](https://reader033.fdocuments.us/reader033/viewer/2022061212/5495400ab479598d538b4719/html5/thumbnails/79.jpg)
NATIVE SHELL
![Page 80: How to Develop a Rich, Native-quality User Experience for Mobile Using Web Standards](https://reader033.fdocuments.us/reader033/viewer/2022061212/5495400ab479598d538b4719/html5/thumbnails/80.jpg)
![Page 81: How to Develop a Rich, Native-quality User Experience for Mobile Using Web Standards](https://reader033.fdocuments.us/reader033/viewer/2022061212/5495400ab479598d538b4719/html5/thumbnails/81.jpg)
Thanks!I’ll be here all week.
@davidkanedahttp://9-b.it/web20ny