HTML5 for Mobile Application Development: Developing HTML5 Mobile Applications

"Charting the Course ...

... to Your Success!"

Course Summary Description

HTML5 for Mobile Application Development is a fast‐paced, hands‐on class that immerses attending students right into practical lab application using the latest industry development trends and best practices. Students will explore the new HTML5 structural, semantic, and form tags, how to use Canvas to create drawings natively in the browser, how to work with HTML5 audio and video, the new methods for storing variables client‐side, and how to build applications that work offline. Developers will also learn about the current state of browser support for HTML5 and the theory behind all the recent updates and changes in the technology.

Objectives

By the end of this course, students will:  Learn how to start building HTML5 pages today.  Learn the major benefits of HTML5.  Understand the difference between HTML5 and HTML 4.  Become familiar with HTML5's new elements and attributes.  Learn to work with audio and video in HTML5.  Learn to work with HTML5's new Canvas element to create code‐based drawings.  Learn to use Web Storage for offline applications.  Learn to use all the cool new HTML5 form elements.  Learn the current state of browser support for HTML5 and how to make your HTML5 sites degrade gracefully.

Topics

 Laying out a Page with HTML5  Integrated APIs - MMRS Focus, understand  Sections and Articles more of it.  HTML5 Audio and Video  HTML5 Web Sockets  HTML5 Forms  HTML5 Web Workers  HTML5 Web Storage  HTML5 Geolocation  HTML5 Canvas  JQuery Overview  iOS and Android Demo

Audience

This is an intermediate level course designed for experienced HTML Developers.

Prerequisites

This is a hands‐on programming class. Attendees should have previous experience or working knowledge of developing software applications, as well as basic HTML. Real world programming experience is a must. Students should have working knowledge of basic HTML and CSS, or should attended the Web Essentials: HTML and CSS course as a prerequisite.

Duration

Four days

Due to the nature of this material, this document refers to numerous hardware and software products by their trade names. References to other companies and their products are for informational purposes only, and all trademarks are the properties of their respective companies. It is not the intent of ProTech Professional Technical Services, Inc. to use any of these names generically

"Charting the Course ...

... to Your Success!"

HTML5 for Mobile Application Development: Developing HTML5 Mobile Applications

Course Outline

I. Laying out a Page with HTML5 IV. HTML5 Forms A. Page Structure A. Modernizr 1. Laying out a Page with HTML 4 - B. New Input Types the "old" way 1. search 2. Laying out a Page with HTML5 2. tel B. New HTML5 Structural Tags 3. url and email C. Page Simplification 4. date/time input types D. HTML5 - How We Got Here 5. number 1. The Problems HTML 4 Addresses 6. range 2. The Problems XHTML Addresses 7. min, max, and step attributes 3. The New More Flexible Approach of 8. color HTML5 - Paving the Cowpaths C. HTML5 New Form Attributes 4. New Features of HTML5 1. autocomplete a) HTML5 and JavaScript 2. novalidate b) Additional Changes D. Some Other New Form Field Attributes c) Modernizr ‐‐ MMRS 1. required d) The HTML5 Spec(s) 2. placeholder e) Current State of Browser 3. autofocus Support 4. autocomplete 5. form II. Sections and Articles 6. pattern A. The section Tag E. New Form Elements 1. The HTML 4 Way 1. datalist 2. The HTML5 Way 2. progress and meter 3. Display of HTML5 Structural Elements V. HTML5 Web Storage B. The article Tag A. Overview of HTML5 Web Storage C. Outlining B. Web Storage 1. Sectioning 1. Browser Support D. Accessibility 2. Local Storage 3. Session Storage III. HTML5 Audio and Video 4. Prefixing your Keys A. Supported Media Types C. Other Storage Methods B. The audio Element 1. Web Database Storage 1. Audio Formats 2. Indexed Database API 2. Multiple Sources 3. Audio Tag Attributes VI. HTML5 Canvas 4. Getting and Creating Audio Files A. Getting Started with Canvas C. The video Element 1. Context 1. Video Tag Attributes B. Drawing Lines 2. Creating and Converting Video Files 1. Multiple Sub‐ Paths D. Accessibility 2. The Path Drawing Process E. Scripting Media Elements 3. The fill() Method F. Dealing with Non-Supporting Browsers C. Color and Transparency 1. Graceful Degradation D. Rectangles E. Circles and Arcs 1. Radians

"Charting the Course ...

... to Your Success!"

HTML5 for Mobile Application Development: Developing HTML5 Mobile Applications

Course Outline (cont’d)

F. Quadratic and Bézier Curves X. HTML5 Geolocation 1. Practice (http://www.tutorialspoint.com/html5/html5_geoloca G. Images tion.htm) 1. drawImage() - Basic A. Overview 2. drawImage() - Sprites 1. Geolocation Methods H. Text 2. Location Properties 1. Text Properties 3. Handling Errors B. Example VII. Integrated APIs - MMRS Focus, understand more of it. XI. JQuery Overview A. Offline Application API (http://docs.jquery.com/Tutorials, 1. Cache Manifest File http://webdesign14.com/8‐useful‐jquery‐mobile‐tuto 2. The HTML File rials/ ) 3. Managing ApplicationCache with A. Overview JavaScript 1. Objects in JavaScript 4. A Sample Application 2. The main JQuery Object B. Drag and Drop API 3. JQuery Plugin Entry Point 4. Internal Definition of a Plugin VIII. HTML5 Web Sockets 5. JQuery Design Patterns (http://www.tutorialspoint.com/html5/html5_websoc B. Example ket.htm) C. JQuery for Mobile A. Overview 1. Overview 1. Attributes 2. Creating a Web Site 2. Events 3. Forms 3. Methods D. Example of JQuery for Mobile B. Example XII. iOS and Android Demo IX. HTML5 Web Workers A. Overview (http://www.tutorialspoint.com/html5/html5_web_w 1. Developing for Mobile orkers.htm) 2. iOS Requirements and A. Overview Development Environment 1. What are Web Workers? 3. Android Requirements and 2. How Web Workers Work Development Environment 3. Handling Errors B. Example of iOS WebView Application B. Example C. Example of Android WebView Application