Download as PDF, PPTX
Uploaded byPatrick Sheridan
HTML5 and Sencha Touch
The document provides an overview of HTML5 and the Sencha Touch framework for developing mobile applications. Some key points covered include: - HTML5 is a collection of technologies that enable innovative web applications across mobile and desktop. It allows for offline storage, device access, better connectivity and multimedia compared to earlier standards. - Sencha Touch is a mobile-centric HTML5 framework that provides components, containers and other tools to build cross-platform mobile apps using web technologies like HTML5, CSS and JavaScript. - It features a robust class system and many pre-built widgets. The framework also supports layout managers and customizable designs. - Examples are given of real-world apps developed with Sencha Touch, including how they
More Related Content
![Getting Started with Apache Spark: Big Data Made Simple [Free Meetup]](https://cdn.slidesharecdn.com/ss_thumbnails/apachesparkgettingstarted-260203175547-8361bcc3-thumbnail.jpg?width=640&height=640&fit=bounds)
HTML5 and Sencha Touch
- 1.
- 2.
- 3. What is HTML5 A collection of technologies sparking a revolution of innovation and application development across the web! Wednesday, December 7, 11
- 4. Why HTML5? ā¢ Power behind the best next generation applications! ā¢ Mobile and desktop web ā¢ Is slowly killing Adobe Flash & Silverlight ā¢ Biggest Leap in web technologies ā¢ Latestversions of all major browsers support Most HTML5 features Wednesday, December 7, 11
- 5. Latest news -Danny Winokur, Adobeās vice president and general manager of interactive development http://bits.blogs.nytimes.com/2011/11/09/adobe-to-kill-mobile-ļ¬ash-focus-on-html5/ Wednesday, December 7, 11
- 6. HTML5 brings ā¢ Better HTML semantics ā¢ Ofļ¬ine storage ā¢ Device access ā¢ Better connectivity ā¢ Multimedia ā¢ Native graphics access ā¢ Better performance ā¢ CSS3 Wednesday, December 7, 11
- 7. Better HTML Semantics ā¢ Richer set of HTML tags ā¢ Microdata ā¢ Microformats Wednesday, December 7, 11
- 8. Ofļ¬ine Storage ā¢ App cache ā¢ Local storage ā¢ Session storage ā¢ Web database Wednesday, December 7, 11
- 9. Device Access ā¢ Geo Location ā¢ Accelerometer ā¢ Audio input/Camera ā¢ Compass (iOS 5) Wednesday, December 7, 11
- 10. Better connectivity ā¢ Native web sockets Wednesday, December 7, 11
- 11. Multimedia ā¢ Audio ā¢ Video ā¢ h.264 / WebM Wednesday, December 7, 11
- 12. Native Graphics access ā¢ SVG, Canvas, VML ā¢ CSS3 3D animations ā¢ WebGL Wednesday, December 7, 11
- 13. Better performance ā¢ WebWorkers ā¢ Threaded JavaScript ā¢ XHR2 ā¢ Blob ā¢ Chunked data ā¢ Cross domain requests Wednesday, December 7, 11
- 14. CSS3 ā¢ Better and faster layouts ā¢ Native transitions ā¢ hardware accelerated 3D ā¢ Gradients ā¢ Web Open Font Format Wednesday, December 7, 11
- 15.
- 16. Choose HTML5 if: ā¢ Developing an app with limited resources ā¢ Application is to live on mobile devices ā¢ Deploy an application without the limitations of app stores ā¢ Application must be accessible anywhere ā¢ Want to leverage existing skill sets (HTML5, CSS, JavaScript) Wednesday, December 7, 11
- 17.
- 18.
- 19.
- 20.
- 21. What is SenchaTouch ā¢ The ļ¬rst and best mobile- centric HTML 5 framework ā¢ Provides the foundation to develop kick ass cross platform mobile Web apps ā¢ Built on the best Web Standards Wednesday, December 7, 11
- 22. A peek underthe hood Initialization ā¢ Full Component lifecycle ā¢ Well designed class inheritance model Render Destruction ā¢ Observable event model AbstractComponent ā¢ Components and elements Component container.AbstractContainer ā¢ Elaborate Container model Container ā¢ Conļ¬gureable layout managers panel.AbstractPanel Panel Wednesday, December 7, 11
- 23. Robust class system ā¢ Simple class registration Ext.Base ā¢ Automatic Name Spacing Mixin Mixin ā¢ Class dependency system ā¢ Dynamic class loading MyClass Wednesday, December 7, 11
- 24. Lots of widgets Text ļ¬eld Number ļ¬eld Spinner Slider Checkbox DatePicker Password Select Toggle ļ¬eld URL ļ¬eld Radio ļ¬eld Email ļ¬eld Textarea Wednesday, December 7, 11
- 25. Date Picker &Select ļ¬eld Wednesday, December 7, 11
- 26.
- 27.
- 28. List View Grouping bar Index bar Disclosure icon Wednesday, December 7, 11
- 29.
- 30. Sencha Touch ishighly customizable Wednesday, December 7, 11
- 31. Bloomberg Business week Wednesday,December 7, 11
- 32.
- 33.
- 34. The SenchaCon app ā¢ Uses Sencha Touch 2 ā¢ 35 classes ā¢ Takes advantage of Loader (debug) ā¢ Implements MVC (extensively!) Wednesday, December 7, 11
- 35. The SenchaCon app ā¢ Uses Sencha Touch 2 ā¢ 35 classes ā¢ Takes advantage of Loader (debug) ā¢ Implements MVC (extensively!) Wednesday, December 7, 11
- 36. The SenchaCon appteam Development Design Wednesday, December 7, 11
- 37. The SenchaCon app ā¢ Leverages Local Storage ā¢ Uses app cache (ofļ¬ine storage) ā¢ Custom UI classes ā¢ Custom design Wednesday, December 7, 11
- 38. The SenchaCon app Wednesday,December 7, 11
- 39. The SenchaCon app ā¢ Highly optimized custom components ā¢ Reusability kept in mind throughout code base ā¢ Code developed with miniļ¬cation in mind ā¢ Miniļ¬ed with Sencha SDK Tools 2.0 Wednesday, December 7, 11
- 40. Sencha Touch MVCat a glance ā¢ Controller is at the center Controller ā¢ Controller subscribes to events from the view ā¢ Controller updates the model View Model ā¢ Model drives the view Wednesday, December 7, 11
- 41. Quick MVC thoughts App Controller ā¢ Application extends Controller! ā¢ Controllers can talk to the application via events or direct Controller methods calls View Model Wednesday, December 7, 11
- 42. Multi-controller application App Controller Controller Controller View Model View Model Wednesday, December 7, 11
- 43. The MVC classarchitecture Data Util Manager App Schedule Sessions Session Speakers Speaker Viewport NavBar Panel List Detail List Detail Schedule Sessions Session Speakers Speaker Viewport NavBar Session Speaker Panel List Detail List Detail Wednesday, December 7, 11
- 44. My Books manning.com/garcia2 manning.com/garcia3 Wednesday, December 7, 11
- 45. Questions? ā¢ Contact info: ā¢ twitter: ā¢ @moduscreate Thank you! ā¢ @_jdg ā¢ jay@moduscreate.com Wednesday, December 7, 11