Submit Search
Upload
How to Develop a Rich, Native-quality User Experience for Mobile Using Web Standards
•
25 likes
•
2,282 views
David Kaneda
Follow
Presentation given at Web 2.0 Expo, NY.
Read less
Read more
Technology
Report
Share
Report
Share
1 of 81
Download Now
Download to read offline
Recommended
HTML5 and the dawn of rich mobile web applications pt 1
HTML5 and the dawn of rich mobile web applications pt 1
James Pearce
HATEOAS 101 - Opinionated Introduction to a REST API Style
HATEOAS 101 - Opinionated Introduction to a REST API Style
Apigee | Google Cloud
Progressive Enhancement 2.0 (Conference Agnostic)
Progressive Enhancement 2.0 (Conference Agnostic)
Nicholas Zakas
Building an HTML5 Video Player
Building an HTML5 Video Player
Jim Jeffers
Using Web Standards to create Interactive Data Visualizations for the Web
Using Web Standards to create Interactive Data Visualizations for the Web
philogb
Comparing Hot JavaScript Frameworks: AngularJS, Ember.js and React.js - Sprin...
Comparing Hot JavaScript Frameworks: AngularJS, Ember.js and React.js - Sprin...
Matt Raible
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)
Nicholas Zakas
State of jQuery June 2013 - Portland
State of jQuery June 2013 - Portland
dmethvin
More Related Content
What's hot
High Performance JavaScript (CapitolJS 2011)
High Performance JavaScript (CapitolJS 2011)
Nicholas Zakas
Browser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom Menace
Nicholas Zakas
High Performance JavaScript (Amazon DevCon 2011)
High Performance JavaScript (Amazon DevCon 2011)
Nicholas Zakas
Keypoints html5
Keypoints html5
dynamis
Enough with the JavaScript already!
Enough with the JavaScript already!
Nicholas Zakas
Real World Web Standards
Real World Web Standards
gleddy
What is HTML 5?
What is HTML 5?
Susan Winters
Learning from the Best jQuery Plugins
Learning from the Best jQuery Plugins
Marc Grabanski
Java Web Application Security with Java EE, Spring Security and Apache Shiro ...
Java Web Application Security with Java EE, Spring Security and Apache Shiro ...
Matt Raible
High Performance Snippets
High Performance Snippets
Steve Souders
High Performance JavaScript - jQuery Conference SF Bay Area 2010
High Performance JavaScript - jQuery Conference SF Bay Area 2010
Nicholas Zakas
jQuery Chicago 2014 - Next-generation JavaScript Testing
jQuery Chicago 2014 - Next-generation JavaScript Testing
Vlad Filippov
jQuery 1.9 and 2.0 - Present and Future
jQuery 1.9 and 2.0 - Present and Future
Richard Worth
The Future Of Web Frameworks
The Future Of Web Frameworks
Matt Raible
jQuery Conference Boston 2011 CouchApps
jQuery Conference Boston 2011 CouchApps
Bradley Holt
Cache is King
Cache is King
Steve Souders
Mobile Web Speed Bumps
Mobile Web Speed Bumps
Nicholas Zakas
JavaScript front end performance optimizations
JavaScript front end performance optimizations
Chris Love
Play Framework vs Grails Smackdown - JavaOne 2013
Play Framework vs Grails Smackdown - JavaOne 2013
Matt Raible
JavaScript Libraries: The Big Picture
JavaScript Libraries: The Big Picture
Simon Willison
What's hot
(20)
High Performance JavaScript (CapitolJS 2011)
High Performance JavaScript (CapitolJS 2011)
Browser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom Menace
High Performance JavaScript (Amazon DevCon 2011)
High Performance JavaScript (Amazon DevCon 2011)
Keypoints html5
Keypoints html5
Enough with the JavaScript already!
Enough with the JavaScript already!
Real World Web Standards
Real World Web Standards
What is HTML 5?
What is HTML 5?
Learning from the Best jQuery Plugins
Learning from the Best jQuery Plugins
Java Web Application Security with Java EE, Spring Security and Apache Shiro ...
Java Web Application Security with Java EE, Spring Security and Apache Shiro ...
High Performance Snippets
High Performance Snippets
High Performance JavaScript - jQuery Conference SF Bay Area 2010
High Performance JavaScript - jQuery Conference SF Bay Area 2010
jQuery Chicago 2014 - Next-generation JavaScript Testing
jQuery Chicago 2014 - Next-generation JavaScript Testing
jQuery 1.9 and 2.0 - Present and Future
jQuery 1.9 and 2.0 - Present and Future
The Future Of Web Frameworks
The Future Of Web Frameworks
jQuery Conference Boston 2011 CouchApps
jQuery Conference Boston 2011 CouchApps
Cache is King
Cache is King
Mobile Web Speed Bumps
Mobile Web Speed Bumps
JavaScript front end performance optimizations
JavaScript front end performance optimizations
Play Framework vs Grails Smackdown - JavaOne 2013
Play Framework vs Grails Smackdown - JavaOne 2013
JavaScript Libraries: The Big Picture
JavaScript Libraries: The Big Picture
Viewers also liked
Sencha Touch beta — Amazing Mobile Web Apps with HTML5, CSS3 & JavaScript
Sencha Touch beta — Amazing Mobile Web Apps with HTML5, CSS3 & JavaScript
David Kaneda
Sencha Touch Workshop
Sencha Touch Workshop
David Kaneda
Ext GWT 3.0 Theming and Appearances
Ext GWT 3.0 Theming and Appearances
Sencha
Building Sencha Themes
Building Sencha Themes
Sencha
jQTouch at jQuery Conference 2010
jQTouch at jQuery Conference 2010
David Kaneda
Introduction to LESS
Introduction to LESS
Manish Shekhawat
jQTouch and Titanium
jQTouch and Titanium
Marc Grabanski
Introduction to open_gl_in_android
Introduction to open_gl_in_android
tamillarasan
Opengl basics
Opengl basics
pushpa latha
OpenGL ES Presentation
OpenGL ES Presentation
Eric Cheng
OpenGL Introduction.
OpenGL Introduction.
Girish Ghate
OpenGLES - Graphics Programming in Android
OpenGLES - Graphics Programming in Android
Arvind Devaraj
OpenGL ES 2.x Programming Introduction
OpenGL ES 2.x Programming Introduction
Champ Yen
OpenGL NVIDIA Command-List: Approaching Zero Driver Overhead
OpenGL NVIDIA Command-List: Approaching Zero Driver Overhead
Tristan Lorach
HTML5 로 iPhone App 만들기
HTML5 로 iPhone App 만들기
JungHyuk Kwon
jQTouch – Mobile Web Apps with HTML, CSS and JavaScript
jQTouch – Mobile Web Apps with HTML, CSS and JavaScript
Philipp Bosch
Apache web server
Apache web server
zrstoppe
jQuery in 15 minutes
jQuery in 15 minutes
Simon Willison
jQuery PPT
jQuery PPT
Dominic Arrojado
Modern JavaScript Applications: Design Patterns
Modern JavaScript Applications: Design Patterns
Volodymyr Voytyshyn
Viewers also liked
(20)
Sencha Touch beta — Amazing Mobile Web Apps with HTML5, CSS3 & JavaScript
Sencha Touch beta — Amazing Mobile Web Apps with HTML5, CSS3 & JavaScript
Sencha Touch Workshop
Sencha Touch Workshop
Ext GWT 3.0 Theming and Appearances
Ext GWT 3.0 Theming and Appearances
Building Sencha Themes
Building Sencha Themes
jQTouch at jQuery Conference 2010
jQTouch at jQuery Conference 2010
Introduction to LESS
Introduction to LESS
jQTouch and Titanium
jQTouch and Titanium
Introduction to open_gl_in_android
Introduction to open_gl_in_android
Opengl basics
Opengl basics
OpenGL ES Presentation
OpenGL ES Presentation
OpenGL Introduction.
OpenGL Introduction.
OpenGLES - Graphics Programming in Android
OpenGLES - Graphics Programming in Android
OpenGL ES 2.x Programming Introduction
OpenGL ES 2.x Programming Introduction
OpenGL NVIDIA Command-List: Approaching Zero Driver Overhead
OpenGL NVIDIA Command-List: Approaching Zero Driver Overhead
HTML5 로 iPhone App 만들기
HTML5 로 iPhone App 만들기
jQTouch – Mobile Web Apps with HTML, CSS and JavaScript
jQTouch – Mobile Web Apps with HTML, CSS and JavaScript
Apache web server
Apache web server
jQuery in 15 minutes
jQuery in 15 minutes
jQuery PPT
jQuery PPT
Modern JavaScript Applications: Design Patterns
Modern JavaScript Applications: Design Patterns
Similar to How to Develop a Rich, Native-quality User Experience for Mobile Using Web Standards
Fragmentation in mobile design: fact or fiction
Fragmentation in mobile design: fact or fiction
Belen Barros Pena
iEnterprise - Mit HTML-5 zum Unternehmens-Dashboard für Tablets
iEnterprise - Mit HTML-5 zum Unternehmens-Dashboard für Tablets
Indiginox
iEnterprise - Mit HTML5 zum Unternehmens-Dashboard für Tablets
iEnterprise - Mit HTML5 zum Unternehmens-Dashboard für Tablets
Stefan Kolb
Keynote I
Keynote I
goodfriday
Mobile App Development
Mobile App Development
Chris Morrell
HiUED 前端/web 發展和體驗
HiUED 前端/web 發展和體驗
Bobby Chen
Nokia Developer Offering Series 40
Nokia Developer Offering Series 40
Mohamad Iqbal
Philly ete-2011
Philly ete-2011
davyjones
Jason.O Keefe.Genuitec.Presentation.Final
Jason.O Keefe.Genuitec.Presentation.Final
Ajax Experience 2009
Inside Mobile Widgets Publish
Inside Mobile Widgets Publish
360|Conferences
Mobile Widgets Development
Mobile Widgets Development
Maximiliano Firtman
Fake it 'til you make it
Fake it 'til you make it
Jonathan Snook
Js foo - Sept 8 upload
Js foo - Sept 8 upload
Debnath Sinha
Sencha Touch for Rubyists
Sencha Touch for Rubyists
James Pearce
S60 Web Runtime - Web2.0 Expo Europe 2008
S60 Web Runtime - Web2.0 Expo Europe 2008
petrosoininen
Mobile Web High Performance
Mobile Web High Performance
Amjad Rafique
Dmeeker Finala
Dmeeker Finala
rajivmordani
Stocktwits & Responsive Web Design, social network meets flexible framework
Stocktwits & Responsive Web Design, social network meets flexible framework
John Strott
The Enterprise Dilemma: Native vs. Web
The Enterprise Dilemma: Native vs. Web
Motorola Mobility - MOTODEV
Designing for The Modern Web
Designing for The Modern Web
Sara Cannon
Similar to How to Develop a Rich, Native-quality User Experience for Mobile Using Web Standards
(20)
Fragmentation in mobile design: fact or fiction
Fragmentation in mobile design: fact or fiction
iEnterprise - Mit HTML-5 zum Unternehmens-Dashboard für Tablets
iEnterprise - Mit HTML-5 zum Unternehmens-Dashboard für Tablets
iEnterprise - Mit HTML5 zum Unternehmens-Dashboard für Tablets
iEnterprise - Mit HTML5 zum Unternehmens-Dashboard für Tablets
Keynote I
Keynote I
Mobile App Development
Mobile App Development
HiUED 前端/web 發展和體驗
HiUED 前端/web 發展和體驗
Nokia Developer Offering Series 40
Nokia Developer Offering Series 40
Philly ete-2011
Philly ete-2011
Jason.O Keefe.Genuitec.Presentation.Final
Jason.O Keefe.Genuitec.Presentation.Final
Inside Mobile Widgets Publish
Inside Mobile Widgets Publish
Mobile Widgets Development
Mobile Widgets Development
Fake it 'til you make it
Fake it 'til you make it
Js foo - Sept 8 upload
Js foo - Sept 8 upload
Sencha Touch for Rubyists
Sencha Touch for Rubyists
S60 Web Runtime - Web2.0 Expo Europe 2008
S60 Web Runtime - Web2.0 Expo Europe 2008
Mobile Web High Performance
Mobile Web High Performance
Dmeeker Finala
Dmeeker Finala
Stocktwits & Responsive Web Design, social network meets flexible framework
Stocktwits & Responsive Web Design, social network meets flexible framework
The Enterprise Dilemma: Native vs. Web
The Enterprise Dilemma: Native vs. Web
Designing for The Modern Web
Designing for The Modern Web
Recently uploaded
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptx
GDSC PJATK
20230104 - machine vision
20230104 - machine vision
Jamie (Taka) Wang
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptx
Udaiappa Ramachandran
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation Developers
UiPathCommunity
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdf
infogdgmi
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Commit University
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
DianaGray10
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.
YounusS2
Designing A Time bound resource download URL
Designing A Time bound resource download URL
Runcy Oommen
Nanopower In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdf
Pedro Manuel
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?
IES VE
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
Matt Ray
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBX
Tarek Kalaji
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
Jamie (Taka) Wang
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
bruanjhuli
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystem
Asko Soukka
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8
DianaGray10
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1
DianaGray10
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Website
dgelyza
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )
Brian Pichman
Recently uploaded
(20)
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptx
20230104 - machine vision
20230104 - machine vision
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptx
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation Developers
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdf
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.
Designing A Time bound resource download URL
Designing A Time bound resource download URL
Nanopower In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdf
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBX
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystem
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Website
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )
How to Develop a Rich, Native-quality User Experience for Mobile Using Web Standards
1.
How to Develop
a Rich, Native-quality User Experience for Mobile Using Web Standards DAVID KANEDA, SENCHA
2.
@davidkaneda @senchainc @jqtouch @webkitbits @9bits
3.
How to Develop
a Rich, Native-quality User Experience for Mobile Using Web Standards
5.
WAP’s dead, baby.
WAP’s dead.
6.
US Mobile Smartphone
Traffic 39% iOS Android RIM 47% WebOS Winmo Other 7% 3% 2%2% http://metrics.admob.com January 2010
8.
Did someone say
devices?
11.
230,000
12.
230,000 iOS activations a
day.
16.
60,000 Android shipments a
day.
17.
COMING SOON…
SAMSUNG GALAXY TAB
18.
BLACKBERRY TORCH
19.
WEBOS 2.0
20.
Let’s talk tech.
24.
HTML5
25.
new elements
26.
new elements section, article,
header, footer, aside yawn.
27.
new features
28.
new features
web storage web workers form validation microdata
29.
new input types
30.
new input types TYPE=EMAIL
TYPE=URL TYPE=NUMBER
31.
<video> & <audio>
32.
<video> & <audio> <video>
can be styled like other elements
33.
<video> & <audio> <video>
can be styled like other elements JavaScript control over playback
34.
<video> & <audio>
<video> can be styled like other elements JavaScript control over playback Quick tip: Autoplay can work, even if Apple says otherwise.
37.
cache manifest
38.
cache manifest Make apps
o ine-accessible
39.
cache manifest Make apps
o ine-accessible Cache, Network, Fallback
40.
cache manifest
Make apps o ine-accessible Cache, Network, Fallback Once you go cache, you never go back
41.
geolocation
42.
geolocation
43.
That’s so <meta>
44.
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" />
45.
CSS3
46.
CSS3 Basics
47.
CSS3 Basics border-radius
box-shadow border-image :before & :after opacity masks gradient @font-face text-shadow reflect
55.
Transforms
56.
Transforms
translate rotate scale skew scale
57.
Transitions & Animations
58.
Transitions & Animations
More than just pretty e ects Usually hardware-accelerated
59.
Transitions & Animations
More than just pretty e ects Usually hardware-accelerated
60.
WebKit-specific CSS
61.
WebKit-specific CSS
62.
WebKit-specific CSS -webkit-tap-highlight-color: rgba(0,0,0,0);
63.
WebKit-specific CSS -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-user-select:
none;
64.
WebKit-specific CSS -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-user-select:
none; -webkit-touch-callout: none;
65.
Trouble Spots
66.
350ms to Kill
67.
350ms to Kill
It’s longer than it sounds Avoid with custom touch events Lazy method: bind to touchend
68.
a fixed game
69.
a fixed game
No position: fixed; in CSS overflow: auto/scroll; requires two fingers Hack by manipulating touch objects
70.
Need a hand?
71.
jQTouch
JQTOUCH.COM
72.
Sencha Touch
SENCHA.COM
73.
“Real artists ship.”
Steve Jobs
74.
WEB APPS
79.
NATIVE SHELL
81.
Thanks! I’ll be
here all week. @davidkaneda http://9-b.it/web20ny
Download Now