Contenu connexe Similaire à Building cross platform mobile web apps Similaire à Building cross platform mobile web apps (20) Plus de James Pearce (13) Building cross platform mobile web apps
6. Frameworks
Sencha Touch
Ext JS
Ext GWT
Ext Core
8. Ext JS 4
http://dev.sencha.com/deploy/ChartsDemo/
9. Ext GWT
+
http://www.sencha.com/products/extgwt/examples/
10. Ext Core
http://www.sencha.com/products/extcore/
M IT
11. Tools
Ext Designer
Sencha Animator
14. Labs
jQTouch InfoVis
Raphaël PhiloGL
Connect Android tools
http://www.sencha.com/company/
16. building(
mobile.web().apps([
html5, css3, js
]).crossPlatform()
);
17. building(
mobile.web().apps([
html5, css3, js
]).crossPlatform()
);
24. JS
C# Palm J2ME
Microsoft
RIM RIM
Android
Apple
Apple Air Microsoft
Palm
Obj-C
Java
C++ Android Top U.S. Smartphone Platforms,
3 Month Average Ending December 2010
comScore MobiLens 2010
27. building(
mobile.web().apps([
html5, css3, js
]).crossPlatform()
);
29. The Web is Evolving...
Documents Applications
Declarative HTML Programmatic DOM
Thin client Thick client
Themes APIs
URLs Arguments
Request/Response Synchronization
31. building(
mobile.web().apps([
html5, css3, js
]).crossPlatform()
);
34. A New Mobile App Stack
WebFonts Video Audio Graphics
Device Access Server & Services
Camera CSS Styling & Layout HTTP
Location AJAX
Javascript
Contacts Events
SMS Semantic HTML Sockets
Orientation SSL
File Systems Worker
x-App
Gyro DBs Parallel More...
Messaging
App Cache Processing
35. Rich Media & StylingO RM
TF
LA
Full Resource PP P Access
A
RN
ParallelDProcessing
E
O
EM
Inter-App Communication
ET
PL Offline Capability
Full
C OM
36. building(
mobile.web().apps([
html5, css3, js
]).crossPlatform()
);
40. building(
mobile.web().apps([
html5, css3, js
]).crossPlatform()
);
42. HTML5 Support
IE 10 PR Chrome 10 Safari 5 Firefox 4 iOS4.31 Playbook Honeycomb
@font-face
Canvas
HTML5 Audio & Video
rgba(), hsla()
border-image:
border-radius:
box-shadow:
text-shadow:
opacity:
Multiple backgrounds
Flexible Box Model
CSS Animations
CSS Columns
CSS Gradients
CSS Reflections
CSS 2D Transforms
CSS 3D Transforms
CSS Transitions
Geolocation API
local/sessionStorage
SVG/SVG Clipping
SMIL
Inline SVG
Drag and Drop
hashchange
X-window Messaging
History Management
applicationCache
Web Sockets
Web Workers
Web SQL Database
WebGL
IndexedDB
43. Stay on top of diversity
Can I Use?
http://caniuse.com
Modernizr
http://modernizr.com
DeviceAtlas
http://deviceatlas.com
45. Documents Applications
Declarative HTML Programmatic DOM
Thin client Thick client
Themes APIs
URLs Arguments
Request/Response Synchronization
47. What’s in Sencha Touch?
Layouts & components
Theming & icons
Orientation & animation
Touch events & scroller
Data package
MVC framework
51. Touch Events
Built on native events
Abstracted for performance
Additional events
- Tap
- Double tap
- Tap and hold
- Swipe
- Rotate
- Drag & drop
52. Data Package
Models, Stores, and Proxies
- Associations
- Validation
- Local & server storage
Easily consume web services
- JSON/P
- XML
- YQL
55. building(
mobile.web().apps([
html5, css3, js
]).crossPlatform()
);
57. Evolving a site for mobile
Desktop
Switcher
HTML, CSS...
Mobile
Controllers
Models
60. The stack of the present
req/res
User interface Rendering
Business logic
Storage
61. A stack of the future
User interface
sync
Security Business logic
Storage Storage
64. Location Services
Adaptation Analytics
Web Fonts Data Sync
Video Serving Ad Serving
$
Image Serving Commerce
Network APIs
68. The cloud at work...
Location API to get lat/long
MongoLabs to get city name
Yelp to get businesses
71. PhoneGap
A platform that allows you to author native applications
with web technologies and get access to device APIs
http://phonegap.com
72. Device Access
Accelerometer File
Camera Geolocation
Compass Media
Contacts Network
Device Notification
Events Storage
http://docs.phonegap.com
73. building(
mobile.web().apps([
html5, css3, js
]).crossPlatform()
);