Más contenido relacionado La actualidad más candente (20) Similar a Building cross platform mobile web apps (20) Building cross platform mobile web apps6. 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()
);