Cross Platform Mobile Apps with HTML5
Duration: 3 days

Back to course list Home
Synopsis HTML5 and its supporting technologies offer vast capabilities that make development of full fledged applications in a browser environment a viable prospect. Add to that environments like PhoneGap, which can turn HTML5/CSS3 and JS code into fully native, offline capable apps, and you get the first true cross-platform development capability for all mobile environments, present and future.
This course provides you with the tools and knowhow necessary to both optimize web pages to take advantage of mobile capabilities - from touch to geolocation - as well as create cross platform apps with offline capabilities.
Target Audience Desktop, Mobile and Web Developers, who wish to develop web content and/or cross plaform applications for all mobile operating systems (Android, iOS, Windows and Blackerry)
Prerequisites
Objectives
  • Use HTML5, CSS3 and JS for optimizing content catered to mobile systems
  • Use HTML5, CSS3 and JS to build cross platform mobile applications
  • Use environments such as PhoneGap and SenchaTouch
Exercises This course allocates plenty of time for hands-on practice.
The hands-on exercises include:
  • Creating a full fledged HTML5 game, with touch and device orientation response
  • Optimizing content for phones, tablets, and different device orientations
Modules
1. Mobile Development 101
1 hours
Introduction to the challenges of mobile development, with a brief overview of the three MOSes - iOS, Android and Windows 8. Comparison of application programming interface and models.
2. HTML5 in a nutshell
1 hours
Recap of HTML document structure and model. Syntax and grammar of HTML. Topics include:
  • HTML 5 - elements and syntax
    • Writing well formed, validated HTML
      • Examples of HTML5 element usage
        • Audio and Video
          • HTML5 Browser restrictions
            3. CSS3 and styling
            1 hours
            		An overview of the CSS3 standard and latest drafts, and their adoption in the various browsers.
            • Basics of CSS
              • CSS3 media queries
                • Detecting device orientation
                  • CSS3 Transforms and Animations
                    4. Scriptable HTML5 features
                    2 hours
                    		A detailed discussion of HTML5 features usable only through javascript
                    • Why Javascript?
                      • Using Javascript for GeoLocation
                        • Responding to device orientation and motion
                          • Web Workers and Web Sockets
                            5. Draw something
                            2 hours
                            		A detailed discussion of the HTML5 canvas element
                            • What is a Canvas?
                              • Drawing on a canvas - paths, lines, polygons, and shapes
                                • Advanced effects in a canvas - fill patterns, gradients
                                  • Advanced effects in a canvas - transforms and animations
                                    6. Mobile specific enhancements
                                    2 hours
                                    		Using techniques such as local storage, web databases and offline caching to speed up application performance and enable offline interaction with web apps
                                    • Challenges of working offline/disconnected
                                      • Web Storage: Local and Session Storage
                                        • Web Databases
                                          • Manifests and offline cachine
                                            7. Moving to Native apps
                                            2 hours
                                            		A discussion of PhoneGAP and Sencha Touch, two frameworks that enable the execution of HTML5 apps in a native context, bypassing browser restrictions
                                            8. Drawing the future
                                            2 hours
                                            		An introduction and overview of Scalable Vector Graphics and WebGL
                                            • Raster vs. Vector based graphics
                                              • Scalable Vector Graphics
                                                • 3D Canvases and WebGL