How to Develop a Rich, Native-quality User Experience for Mobile Using Web Standards
Upcoming SlideShare
Loading in...5
×
 

How to Develop a Rich, Native-quality User Experience for Mobile Using Web Standards

on

  • 9,531 views

Presentation given at Web 2.0 Expo, NY.

Presentation given at Web 2.0 Expo, NY.

Statistics

Views

Total Views
9,531
Views on SlideShare
9,430
Embed Views
101

Actions

Likes
26
Downloads
312
Comments
2

10 Embeds 101

http://www.web2expo.com 40
http://didacperez.tumblr.com 23
http://jaekook.tumblr.com 11
http://log.quanganhdo.com 8
http://paper.li 7
http://www.linkedin.com 5
https://www.linkedin.com 3
http://boutofcontext.com 2
http://codeinfront.com 1
http://blog.kieranajp.co.uk 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • Just Love it.
    Are you sure you want to
    Your message goes here
    Processing…
  • If you like the topic, make sure to check out the extended resources listed on my site and/or give it a rating on SpeakerRate— Thanks!

    http://9-bits.com/web20ny
    http://spkr8.com/t/4676
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

How to Develop a Rich, Native-quality User Experience for Mobile Using Web Standards How to Develop a Rich, Native-quality User Experience for Mobile Using Web Standards Presentation Transcript

  • How to Develop a Rich, Native-quality User Experience for Mobile Using Web Standards DAVID KANEDA, SENCHA
  • @davidkaneda @senchainc @jqtouch @webkitbits @9bits
  • How to Develop a Rich, Native-quality User Experience for Mobile Using Web Standards
  • WAP’s dead, baby. WAP’s dead.
  • US Mobile Smartphone Traffic 39% iOS Android RIM 47% WebOS Winmo Other 7% 3% 2%2% http://metrics.admob.com January 2010
  • Did someone say devices?
  • 230,000
  • 230,000 iOS activations a day.
  • 60,000 Android shipments a day.
  • COMING SOON… SAMSUNG GALAXY TAB
  • BLACKBERRY TORCH
  • WEBOS 2.0
  • Let’s talk tech.
  • HTML5
  • new elements
  • new elements section, article, header, footer, aside yawn.
  • new features
  • new features web storage web workers form validation microdata
  • new input types
  • new input types TYPE=EMAIL TYPE=URL TYPE=NUMBER
  • <video> & <audio>
  • <video> & <audio> <video> can be styled like other elements
  • <video> & <audio> <video> can be styled like other elements JavaScript control over playback
  • <video> & <audio> <video> can be styled like other elements JavaScript control over playback Quick tip: Autoplay can work, even if Apple says otherwise.
  • cache manifest
  • cache manifest Make apps o ine-accessible
  • cache manifest Make apps o ine-accessible Cache, Network, Fallback
  • cache manifest Make apps o ine-accessible Cache, Network, Fallback Once you go cache, you never go back
  • geolocation
  • geolocation
  • That’s so <meta>
  • That’s so <meta> <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" />
  • CSS3
  • CSS3 Basics
  • CSS3 Basics border-radius box-shadow border-image :before & :after opacity masks gradient @font-face text-shadow reflect
  • Transforms
  • Transforms translate rotate scale skew scale
  • Transitions & Animations
  • Transitions & Animations More than just pretty e ects Usually hardware-accelerated
  • Transitions & Animations More than just pretty e ects Usually hardware-accelerated
  • WebKit-specific CSS
  • WebKit-specific CSS
  • WebKit-specific CSS -webkit-tap-highlight-color: rgba(0,0,0,0);
  • WebKit-specific CSS -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-user-select: none;
  • WebKit-specific CSS -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-user-select: none; -webkit-touch-callout: none;
  • Trouble Spots
  • 350ms to Kill
  • 350ms to Kill It’s longer than it sounds Avoid with custom touch events Lazy method: bind to touchend
  • a fixed game
  • a fixed game No position: fixed; in CSS overflow: auto/scroll; requires two fingers Hack by manipulating touch objects
  • Need a hand?
  • jQTouch JQTOUCH.COM
  • Sencha Touch SENCHA.COM
  • “Real artists ship.” Steve Jobs
  • WEB APPS
  • NATIVE SHELL
  • Thanks! I’ll be here all week. @davidkaneda http://9-b.it/web20ny