Developing Web Applications for Mobile Devices
no text exists for this slide
no notes exist for this slide
About Me
no text exists for this slide
no notes exist for this slide
Agenda
Why Mobile
Why Mobile
Define Your Audience
Native vs Web Applications
Development
Debugging
Deployment
Q&A
no notes exist for this slide
Why Is Mobile Important
Why Is Mobile Important
Why Is Mobile Important
Anytime, Anywhere
Competitive Advantage
Your customers are asking for it
Why Create a specific mobile version
click != tap
Differences
We love information and thatâs how the internet became so popular
click != tap
on a mobile device the hit radius usually needs to be much larger
current sites like amazon and ebay you would have to pan and zoom on the current sites
there is no hover support in mobile (yet)
Differences
Stronger emphasis on consumption
Simplicity (less content, simple)
larger hit radius
Animation & views
Speed
Orientation & Rotation
Who Is Your Audience
Define your target Audience
Define your target Audience
Google Analytics
Gathering Metrics about your audience
AdMob is one of the world's largest mobile advertising networks, offering solutions for discovery, branding and monetization on the mobile web.
Global Impressions 236,119,249,156
Acquired by Google May 27, 2010
no notes exist for this slide
Google Analytics
I donât need to sell you on this one
I donât need to sell you on this one
Visitors
Mobile Device
Mobile Carrier
Custom Reports
Demo
no notes exist for this slide
Mobile Internet usage is global
no text exists for this slide
92 countries generated more than 10 million requests in May 2010, up from 27 countries in May 2008
Monthly Growth
no text exists for this slide
Mobile traffic from each region has increased at least 4x in the last two years
Operating System Share
no text exists for this slide
no notes exist for this slide
Native vs Web
What is the difference?
What is the difference?
Development Process
Performance
Making Money
Advertising
Freemium
Niche Markets
Devloping applications for others
no notes exist for this slide
Developing Native Applications
Native UI
Native UI
Native Features
Native Performance
no notes exist for this slide
Platform Breakdown
no text exists for this slide
no notes exist for this slide
Developing web based apps
HTML / JavaScript / CSS
HTML / JavaScript / CSS
WebKit
Great Browser / Super Fast
CSS Transitions / Animations
SQL Lite (iphone & Android)
Performance
no notes exist for this slide
Whats wrong with my current site
no text exists for this slide
HTML / JavaScript / CSS
WebKit
Great Browser / Super Fast
CSS Transitions / Animations
SQL Lite (iphone & Android)
Performance
Sencha Touch
Overview
Overview
Built with Standards
The worlds best devices
Enhanced Touch Events
Data Integration
Sencha Touch allows your web apps to look and feel like native apps. Beautiful user interface components and rich data management, all powered by the latest HTML5 and CSS3 web standards and ready for Android and Apple iOS devices. Keep them web-based or wrap them for distribution on mobile app stores
Style amp Design
Flexiblity
Flexiblity
Resolution Independent
Icons
Amazing Animations
Sencha Touch allows your web apps to look and feel like native apps. Beautiful user interface components and rich data management, all powered by the latest HTML5 and CSS3 web standards and ready for Android and Apple iOS devices. Keep them web-based or wrap them for distribution on mobile app stores
Demo Time
no text exists for this slide
no notes exist for this slide
Getting Started
Setting up your environment
Setting up your environment
Create the HTML file
Create the JavaScript file
Test your application
Update the application for production
Move to production
Setting Up Your Environment
Download the Sencha Touch Libraries.
Creating the html file
the default Sencha Touch cascading style sheet (CSS) file, ext-touch.css.
the application's CSS file. For example, mycss.css.
the version of the Sencha Touch library you want the application to use.
* Use the debug version for development
* switch to minified version for production
Demos
Layout
Layout
Default
Box
Card
Components
Tab Panel
List & Nested List
Tab Panel layout
- like for cfunited
Store Proxy Reader
Store
Store
Encapsulates instances of our model
Proxy
Provides a mechanism for retrieving data
Reader
Provides a mechanism to parse the data retrieved by the proxy
Tab Panel layout
- like for cfunited
You down with OPP OOP
no text exists for this slide
no notes exist for this slide
What I learned
Learning curve
Learning curve
Stick with it.. I promise it will make sense soon
Production
Minify / Combine JavaScript
GZip static content
Common Errors
Uncaught TypeError: Object #<an Object> has no method 'addEventsâ
Uncaught SyntaxError: Unexpected token ILLEGAL
no notes exist for this slide
Contact Me
Email: danvega@gmail.com
Email: danvega@gmail.com
Twitter: @cfaddict
Blog: http://www.danvega.org
no notes exist for this slide
Resources
Admob - http://metrics.admob.com
Admob - http://metrics.admob.com
Google Analytics â http://www.google.com/analytics
Sencha â http://www.sencha.com
Forums â http://www.sencha.com/forum
Documentation - http://www.sencha.com/deploy/touch/docs/
Getting Started - http://www.sencha.com/deploy/touch/getting-started.html
Extending Components - http://bit.ly/ciXQ46
PhoneGap - http://www.phonegap.com/
Titanium - http://www.appcelerator.com/
no notes exist for this slide
