HTML5 Programming

After completing this module, students will be able to:

Explain HTML basics

Explain what HTML5 is.

Explain CSS basics.

Explain JavaScript basics.

Explain the jQuery Library.

Identify the essential features of Visual Studio 2010 SP1 that are required to start developing HTML5 web application projects.

This module explains the new HTML5 elements and their meaning, and how and when to use them. The module also discusses navigation and menus, which are the backbone of creating a website or application.

HTML5 Structural Elements

Navigation and Menus

Using Semantic Elements in the Home Page.

Creating the Game Details and Cart Pages.

Adding Navigation and Menus to the Home Page.

After completing this module, students will be able to:

Describe the new HTML5 structural elements.

Examine the creation of web application navigation and the use of menus.

Migrate HTML4 webpages to HTML5 webpages.

This module introduces the new input types and attributes that were added in HTML5. It also discusses the Modernizr JavaScript library, which detects HTML5 features and supplies polyfills for the new HTML5 elements.

Working with Input Types

Using Form Attributes

Validation

Using Browser Detection, Feature Detection, and Modernizr

Creating the Checkout and Game Review Forms

Adding Validation to the Checkout and Game Review Forms

Adding Modernizr Support

After completing this module, students will be able to:

Use the new input types.

Apply the new attributes.

Integrate validation into webpages.

Use browser detection, feature detection and Modernizr.

This module explains important concepts about the layout and styling of webpages and applications. It also describes how to use the new features of Cascading Style Sheets 3 (CSS3), such as new selectors, text effects, and multi-column layouts, to improve the look and feel of your webpages.

Creating Layouts

Advanced CSS by Using CSS3

Add a CSS3 style to the store’s webpages

After completing this module, students will be able to:

Create a webpage layout.

Apply advanced CSS to webpages.

This module explains the canvas element, which displays graphics, and the audio and video elements, which are used to play multimedia. These elements represent HTML5’s solution to add-on availability and cross-browser compatibility for multimedia and graphics.

Canvas Basics

Video/Audio Formats and Codecs

Controlling Multimedia with JavaScript

Adding Video to the Details Page

Create a Slideshow Using the Canvas

After completing this module, students will be able to:

Use the canvas element and manipulate it using JavaScript.

Use the audio and video elements and control them using JavaScript.

Add support for multiple audio and video codecs.

This module discusses some of the differences between SVG and Canvas. It also describes how to choose one over the other.

Drawing with SVG

Animation

Choosing Between SVG and Canvas

Adding an SVG Chart with Animation

Adding Animation to the Game Details Canvas-Based Slideshow

After completing this module, students will be able to:

Create basic graphics with SVG.

Add animation to SVG and Canvas graphics.

Choose between SVG and Canvas.

This module explains web storage and how to use its API to have a persistence mechanism on the client-side. It also introduces IndexedDB at a very high level because this specification is currently in development and might change in the future.

Web Storage vs. Cookies

Web Storage API

Creating the Cart Behavior by Using the localStorage Object

Integrating the Cart with the Web Application

After completing this module, students will be able to:

Use the web storage API.

Differentiate between session storage and local storage.

This module explains how to use other HTML5 JavaScript APIs, such as the drag-and-drop API, the file API to work with files, and the geolocation API to find the user location.

Using the Drag-and-Drop API

File API

Geolocation API

Integrating Drag-and-Drop Behavior into the Home Page

Adding Geolocation Information to the Purchase Event

Adding Coupon-Reading Behavior

After completing this module, students will be able to:

Integrate drag-and-drop features into webpages.

Work with the files by using the File API.

Integrate the geolocation API into webpages.

This module explains other developer tools that you can use with HTML5. These tools include Microsoft WebMatrix, ASP.NET MVC3, and the Razor view engine. It also explains how to use these tools to create websites and applications.

WebMatrix

ASP.NET MVC3 and Razor

Using WebMatrix to Create a Website

Using ASP.NET MVC 3 to Create a Website

After completing this module, students will be able to:

Use WebMatrix.

Use ASP.NET MVC 3 and the Razor view engine.