Download as PDF, PPTX
![building(
cloudBased(
mobile.web().apps([
html5, css3, js
]).crossPlatform()
)
);](https://image.slidesharecdn.com/buildingcloud-basedcross-platformmobilewebapps-key-110509164242-phpapp02/85/Building-Cloud-Based-Cross-Platform-Mobile-Web-Apps-4-320.jpg)
![building(
cloudBased(
mobile.web().apps([
html5, css3, js
]).crossPlatform()
)
);](https://image.slidesharecdn.com/buildingcloud-basedcross-platformmobilewebapps-key-110509164242-phpapp02/85/Building-Cloud-Based-Cross-Platform-Mobile-Web-Apps-5-320.jpg)
![building(
cloudBased(
mobile.web().apps([
html5, css3, js
]).crossPlatform()
)
);](https://image.slidesharecdn.com/buildingcloud-basedcross-platformmobilewebapps-key-110509164242-phpapp02/85/Building-Cloud-Based-Cross-Platform-Mobile-Web-Apps-15-320.jpg)
![building(
cloudBased(
mobile.web().apps([
html5, css3, js
]).crossPlatform()
)
);](https://image.slidesharecdn.com/buildingcloud-basedcross-platformmobilewebapps-key-110509164242-phpapp02/85/Building-Cloud-Based-Cross-Platform-Mobile-Web-Apps-19-320.jpg)
![building(
cloudBased(
mobile.web().apps([
html5, css3, js
]).crossPlatform()
)
);](https://image.slidesharecdn.com/buildingcloud-basedcross-platformmobilewebapps-key-110509164242-phpapp02/85/Building-Cloud-Based-Cross-Platform-Mobile-Web-Apps-25-320.jpg)
![building(
cloudBased(
mobile.web().apps([
html5, css3, js
]).crossPlatform()
)
);](https://image.slidesharecdn.com/buildingcloud-basedcross-platformmobilewebapps-key-110509164242-phpapp02/85/Building-Cloud-Based-Cross-Platform-Mobile-Web-Apps-29-320.jpg)
![building(
cloudBased(
mobile.web().apps([
html5, css3, js
]).crossPlatform()
)
);](https://image.slidesharecdn.com/buildingcloud-basedcross-platformmobilewebapps-key-110509164242-phpapp02/85/Building-Cloud-Based-Cross-Platform-Mobile-Web-Apps-43-320.jpg)
![building(
cloudBased(
mobile.web().apps([
html5, css3, js
]).crossPlatform()
)
);](https://image.slidesharecdn.com/buildingcloud-basedcross-platformmobilewebapps-key-110509164242-phpapp02/85/Building-Cloud-Based-Cross-Platform-Mobile-Web-Apps-55-320.jpg)
![building(
cloudBased(
mobile.web().apps([
html5, css3, js
]).crossPlatform()
)
);](https://image.slidesharecdn.com/buildingcloud-basedcross-platformmobilewebapps-key-110509164242-phpapp02/85/Building-Cloud-Based-Cross-Platform-Mobile-Web-Apps-65-320.jpg)
![building(
cloudBased(
mobile.web().apps([
html5, css3, js
]).crossPlatform()
)
);](https://image.slidesharecdn.com/buildingcloud-basedcross-platformmobilewebapps-key-110509164242-phpapp02/75/Building-Cloud-Based-Cross-Platform-Mobile-Web-Apps-4-2048.jpg)
![building(
cloudBased(
mobile.web().apps([
html5, css3, js
]).crossPlatform()
)
);](https://image.slidesharecdn.com/buildingcloud-basedcross-platformmobilewebapps-key-110509164242-phpapp02/75/Building-Cloud-Based-Cross-Platform-Mobile-Web-Apps-5-2048.jpg)
![building(
cloudBased(
mobile.web().apps([
html5, css3, js
]).crossPlatform()
)
);](https://image.slidesharecdn.com/buildingcloud-basedcross-platformmobilewebapps-key-110509164242-phpapp02/75/Building-Cloud-Based-Cross-Platform-Mobile-Web-Apps-15-2048.jpg)
![building(
cloudBased(
mobile.web().apps([
html5, css3, js
]).crossPlatform()
)
);](https://image.slidesharecdn.com/buildingcloud-basedcross-platformmobilewebapps-key-110509164242-phpapp02/75/Building-Cloud-Based-Cross-Platform-Mobile-Web-Apps-19-2048.jpg)
![building(
cloudBased(
mobile.web().apps([
html5, css3, js
]).crossPlatform()
)
);](https://image.slidesharecdn.com/buildingcloud-basedcross-platformmobilewebapps-key-110509164242-phpapp02/75/Building-Cloud-Based-Cross-Platform-Mobile-Web-Apps-25-2048.jpg)
![building(
cloudBased(
mobile.web().apps([
html5, css3, js
]).crossPlatform()
)
);](https://image.slidesharecdn.com/buildingcloud-basedcross-platformmobilewebapps-key-110509164242-phpapp02/75/Building-Cloud-Based-Cross-Platform-Mobile-Web-Apps-29-2048.jpg)
![building(
cloudBased(
mobile.web().apps([
html5, css3, js
]).crossPlatform()
)
);](https://image.slidesharecdn.com/buildingcloud-basedcross-platformmobilewebapps-key-110509164242-phpapp02/75/Building-Cloud-Based-Cross-Platform-Mobile-Web-Apps-43-2048.jpg)
![building(
cloudBased(
mobile.web().apps([
html5, css3, js
]).crossPlatform()
)
);](https://image.slidesharecdn.com/buildingcloud-basedcross-platformmobilewebapps-key-110509164242-phpapp02/75/Building-Cloud-Based-Cross-Platform-Mobile-Web-Apps-55-2048.jpg)
![building(
cloudBased(
mobile.web().apps([
html5, css3, js
]).crossPlatform()
)
);](https://image.slidesharecdn.com/buildingcloud-basedcross-platformmobilewebapps-key-110509164242-phpapp02/75/Building-Cloud-Based-Cross-Platform-Mobile-Web-Apps-65-2048.jpg)
Uploaded byJames Pearce
Building Cloud-Based Cross-Platform Mobile Web Apps
James Pearce discusses building cloud-based cross-platform mobile web apps using HTML, CSS, and JavaScript. The document outlines the evolution of mobile app development from 2008 to 2011, while emphasizing the importance of familiar skills, decentralized updates, and well-understood technologies. It also highlights various tools and frameworks, including Sencha Touch and PhoneGap, for effective mobile application development.
More Related Content
Similar to Building Cloud-Based Cross-Platform Mobile Web Apps
Building Cloud-Based Cross-Platform Mobile Web Apps
- 2. James Pearce Director,Developer Relations @ jamespearce jamesp@sencha.com
- 3. Building Cloud-based Cross-Platform Mobile Web Apps with HTML CSS JS
- 4. building( cloudBased( mobile.web().apps([ html5, css3, js ]).crossPlatform() ) );
- 5. building( cloudBased( mobile.web().apps([ html5, css3, js ]).crossPlatform() ) );
- 6. 2008 We must havean iPhone App!
- 7. 2009 We must havean Android App!
- 8. 2010 We must havean iPad App!
- 9.
- 11.
- 14. 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
- 15. building( cloudBased( mobile.web().apps([ html5, css3, js ]).crossPlatform() ) );
- 16. The Mobile Web Cross-platform Familiarskills & tools Decentralized Easily updated Indexed Well-understood technologies
- 17. The Web isEvolving... Documents Applications Declarative HTML Programmatic DOM Themes APIs URLs Arguments Request/Response Synchronization Thin client Thick client
- 19. building( cloudBased( mobile.web().apps([ html5, css3, js ]).crossPlatform() ) );
- 20. -webkit accelerometer @page localStorage CSS Text @media manifest transform <video> WebSQL GeoLocation type=camera canvas keyframe gradient
- 23. A New MobileApp 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
- 24. Rich Media &StylingO RM TF LA Full Resource PP PAccess A RN ParallelDProcessing E O M Communication Inter-AppTE LE P O ine Capability C Full OM
- 25. building( cloudBased( mobile.web().apps([ html5, css3, js ]).crossPlatform() ) );
- 29. building( cloudBased( mobile.web().apps([ html5, css3, js ]).crossPlatform() ) );
- 30. WebKit FOEs
- 31. 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
- 32. Stay on topof diversity Can I Use? http://caniuse.com Modernizr http://modernizr.com DeviceAtlas http://deviceatlas.com
- 34. Documents Applications Declarative HTML Programmatic DOM Themes APIs URLs Arguments Request/Response Synchronization Thin client Thick client
- 36. What’s in SenchaTouch? Layouts & components Theming & icons Orientation & animation Touch events & scroller Data package MVC framework
- 37. Components Lists - Nested, Grouped,Sortable Carousel Picker Overlay Slider Forms & fields Toolbars & buttons HTML5 - Audio - Video - GeoLocation
- 38. Theming Use CSS3 &SASS - Flexible themes - Highly optimized
- 39.
- 40. Scrolling Momentum/bounce physics Hardware accelerated Throughoutall components: - Lists - Carousel - Pickers
- 41. Touch Events Built onnative events Abstracted for performance Additional events - Tap - Double tap - Tap and hold - Swipe - Rotate - Drag & drop
- 42. “The Kitchen Sink” http://sencha.com/x/5e
- 43. building( cloudBased( mobile.web().apps([ html5, css3, js ]).crossPlatform() ) );
- 44. Data Package Models, Stores,and Proxies - Associations - Validation - Local & server storage Easily consume web services - JSON/P - XML - YQL
- 45. Evolving a sitefor mobile Views HTML, CSS... Controllers Models
- 46. Evolving a sitefor mobile Desktop Switcher HTML, CSS... Mobile Controllers Models
- 47. A dedicated mobileapp Desktop Switchers Mobile REST JSO on Controllers N ce Models
- 48. Thematic consistency http://mysite.com/posts/123 http://mysite.com/#!/posts/123
- 49. The stack ofthe present req/res User interface Rendering Business logic Storage
- 50. A stack ofthe future User interface sync Security Business logic Storage Storage
- 51. <aside> JSON JavaScript Object Notation JSON-‐P JSON with Padding CORS Cross-‐Origin Resource Sharing </aside>
- 52. Thick client, thinserver The shortfall in the cloud
- 53. Location Services Adaptation Analytics Web Fonts Data Sync Video Serving Ad Serving $ Image Serving Commerce Network APIs
- 54.
- 55. building( cloudBased( mobile.web().apps([ html5, css3, js ]).crossPlatform() ) );
- 56. Do we havetime for some code?
- 58.
- 59. The cloud atwork... Location API to get lat/long MongoLabs to get city name Yelp to get businesses
- 60. https://github.com/ senchalearn/ seattlebars
- 61. PhoneGap A platform thatallows you to author native applications with web technologies and get access to device APIs http://phonegap.com
- 62.
- 63.
- 64. Device Access Accelerometer File Camera Geolocation Compass Media Contacts Network Device Notification Events Storage http://docs.phonegap.com
- 65. building( cloudBased( mobile.web().apps([ html5, css3, js ]).crossPlatform() ) );
- 66. built with Apps vsWeb technology
- 67. James Pearce Director,Developer Relations @ jamespearce jamesp@sencha.com