The lab scenarios in this course are selected to support and demonstrate the structure of various application scenarios. They are intended to focus on the principals and coding components/structures that are used to establish an HTML5 software application.
This course uses Visual Studio 2012, running on Windows 8.
Module 1: Overview of HTML and CSS
This module provides an overview of HTML and CSS, and describes how to use Visual Studio 2012 to build a Web application.
- Overview of HTML
- Overview of CSS
- Creating a Web Application by Using Visual Studio 2012
Lab: Exploring the Contoso Conference Application
- Walk through of the Contoso Conference Application
- Examining and Modifying the Contoso Conference Application
Module 2: Creating and Styling HTML5 Pages
This module describes the new features of HTML5, and explains how to create and style HTML5 pages.
- Creating an HTML5 Page
- Styling an HTML5 Page
Lab: Creating and Styling HTML5 Pages
- Creating HTML5 Pages
- Styling HTML5 Pages
- Introduction to jQuery
- Displaying Data Programmatically
- Handling Events
Module 4: Creating Forms to Collect Data and Validate User Input
- Overview of Forms and Input Types
- Validating User Input by Using HTML5 Attributes
Lab: Creating a Form and Validating User Input
- Creating a Form and Validating User Input by Using HTML5 Attributes
Module 5: Communicating with a Remote Data Source
This module describes how to send and receive data to and from a remote data source by using an XMLHTTPRequest object and by performing jQuery AJAX operations.
- Sending and Receiving Data by Using XMLHTTPRequest
- Sending and Receiving Data by Using jQuery AJAX operations
Lab: Communicating with a Remote Data Source
- Retrieving Data
- Serializing and Transmitting Data
- Refactoring the Code by Using jQuery ajax method
Module 6: Styling HTML5 by Using CSS3
This module describes how to style HTML5 pages and elements by using the new features available in CSS3.
- Styling Text
- Styling Block Elements
- CSS3 Selectors
- Enhancing Graphical Effects by Using CSS3
Lab: Styling Text and Block Elements using CSS3
- Styling the Navigation Bar
- Styling the Page Header
- Styling the About Page
- Creating Custom Objects
- Extending Objects
Lab: Refining Code for Maintainability and Extensibility
- Inheriting From Objects
- Refactoring Code to Use Objects
Module 8: Creating Interactive Pages using HTML5 APIs
This module describes how to use some common HTML5 APIs to add interactive features to a Web application. This module also explains how to debug and profile a Web application.
- Interacting with Files
- Incorporating Multimedia
- Reacting to Browser Location and Context
- Debugging and Profiling a Web Application
Lab: Creating Interactive Pages by Using HTML5 APIs
- Incorporating Video
- Incorporating Images
- Using the Geolocation API
Module 9: Adding Offline Support to Web Applications
This module describes how to add offline support to a Web application, to enable the application to continue functioning in a user’s browser even if the browser is disconnected from the network.
- Reading and Writing Data Locally
- Adding Offline Support by Using the Application Cache
Lab: Adding Offline Support to a Web Application
- Implementing the Application Cache
- Implementing Local Storage
Module 10: Implementing an Adaptive User Interface
This module describes how to create HTML5 pages that can dynamically detect and adapt to different devices and form factors.
- Supporting Multiple Form Factors
- Creating an Adaptive User Interface
Lab: Implementing an Adaptive User Interface
- Creating a Print-Friendly Stylesheet
- Adapting Page Layout To Fit a Different Form Factor
Module 11: Creating Advanced Graphics
This module describes how to create advanced graphics for an HTML5 Web application by using a Canvas element, and by using Scalable Vector Graphics.
- Creating Interactive Graphics by Using Scalable Vector Graphics
- Programmatically Drawing Graphics by Using a Canvas
Lab: Creating Advanced Graphics
- Creating an Interactive Venue Map by Using Scalable Vector Graphics
- Creating a Speaker Badge by Using a Canvas Element
Module 12: Animating the User Interface
This module describes how to enhance the user experience in an HTML5 Web application by adding animations.
- Applying CSS Transitions
- Transforming Elements
- Applying CSS Key-frame Animations
Lab: Animating User Interface Elements
- Applying Transitions to User Interface Elements
- Applying Key-Frame Animations
Module 13: Implementing Real-Time Communications by Using Web Sockets
This module explains how to use Web Sockets to transmit and receive data between an HTML5 Web application and a server.
- Introduction to Web Sockets
- Sending and Receiving Data by Using Web Sockets
Lab: Implementing Real-Time Communications by Using Web Sockets
- Receiving Data from Web Socket
- Sending Data to a Web Socket
- Sending Multiple Types of Messages To or From a Web Socket
Module 14: Creating a Web Worker Process
This module describes how to use Web Worker Processes to perform long-running operations asynchronously and improve the responsiveness of an HTML5 Web application.
- Introduction to Web Workers
- Performing Asynchronous Processing by Using a Web Worker
Lab: Creating a Web Worker Process
- Improving Responsiveness by Using a Web Worker
- Providing User Feedback During a Long-Running Process
Before attending this course, students must have at least three months professional development experience. In addition to their professional experience, students who attend this training should have a combination of practical and conceptual knowledge related to HTML5 programming. This includes the following prerequisites:
- Understand the basic HTML document structure:
- Use HTML tags to display text content.
- Use HTML tags to display graphics.
- Use HTML APIs.
Understand how to style common HTML elements using CSS, including:
- Separating presentation from content.
- Managing content flow.
- Managing positioning of individual elements.
- Managing content overflow.
- Basic CSS styling