Premier
Visual Studio 2010

HTML5 Programming
(Microsoft Training Course: 10953) - 3 days - £1425 exc VAT



> Target Audience
This course provides participants with the knowledge and skills to develop HTML5 web applications using Microsoft Visual Studio 2010. It is intended for entry-level developers for HTML who have a basic but limited understanding of HTML and who are interested in learning core HTML5, CSS, and JavaScript programming skills.
> Course outline
  1. Introduction to HTML5 Development
  2. Creating Page Structure and Navigation
  3. Creating Form Input and Validation
  4. Laying Out and Styling Webpages
  5. Getting Started with Graphics and Multimedia Elements
  6. Creating Advanced Graphics
  7. Using Client-Side Storage
  8. Using Advanced HTML5 JavaScript APIs
  9. Using WebMatrix and Other Developer Tools


Module 1: Introduction to HTML5 Development
  • Overview of HTML
  • What's New in HTML5?
  • Introduction to CSS
  • Introduction to JavaScript
  • Introduction to jQuery
  • Lab: Building a Basic Web Page in the Visual Studio 2010 SP1 Environment
  • Writing the Home Page HTML
  • Styling the Homepage
  • Adding JavaScript and jQuery to Make a Dynamic Home Page
Skills
  • 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
top
Module 2: Creating Page Structure and Navigation
  • HTML5 Structural Elements
  • Navigation and Menus
  • Lab: Creating Page Structure and Navigation
  • Using Semantic Elements in the Home Page.
  • Creating the Game Details and Cart Pages.
  • Adding Navigation and Menus to the Home Page.
Skills
  • Describe the new HTML5 structural elements.
  • Examine the creation of web application navigation and the use of menus.
  • Migrate HTML4 webpages to HTML5 webpages.
top
Module 3: Creating Form Input and Validation
  • Introduction to the new input types and attributes in HTML5.
  • Discuss 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
  • Lab: Creating Form Input and Validation
  • Creating the Checkout and Game Review Forms
  • Adding Validation to the Checkout and Game Review Forms
  • Adding Modernizr Support
Skills
  • Use the new input types.
  • Apply the new attributes.
  • Integrate validation into webpages.
  • Use browser detection, feature detection and Modernizr.
top
Module 4: Laying Out and Styling Webpages
  • Creating Layouts
  • Advanced CSS by Using CSS3
  • Lab: Laying Out and Styling Webpages
  • Add a CSS3 style to the store’s webpages
Skills
  • Create a webpage layout.
  • Apply advanced CSS to webpages.
top
Module 5: Getting Started with Graphics and Multimedia Elements
  • 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
  • Lab: Getting Started with Graphics and Multimedia Elements
  • Adding Video to the Details Page
  • Create a Slideshow Using the Canvas
Skills
  • 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
top
Module 6: Creating Advanced Graphics
  • Drawing with SVG
  • Animation
  • Choosing Between SVG and Canvas
  • Lab: Creating Advanced Graphics
  • Adding an SVG Chart with Animation
  • Adding Animation to the Game Details Canvas-Based Slideshow
Skills
  • Create basic graphics with SVG.
  • Add animation to SVG and Canvas graphics.
  • Choose between SVG and Canvas.
top
Module 7: Using Client-Side Storage
  • 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
  • Lab: Using Client-Side Storage
  • Creating the Cart Behavior by Using the localStorage Object
  • Integrating the Cart with the Web Application
Skills
  • Use the web storage API.
  • Differentiate between session storage and local storage.
top
Module 8: Using Advanced HTML5 JavaScript APIs
  • Using the Drag-and-Drop API
  • File API
  • Geolocation API
  • Lab: Using Advanced HTML5 JavaScript APIs
  • Integrating Drag-and-Drop Behavior into the Home Page
  • Adding Geolocation Information to the Purchase Event
  • Adding Coupon-Reading Behavior
Skills
  • Integrate drag-and-drop features into webpages.
  • Work with the files by using the File API.
  • Integrate the geolocation API into webpages.
top
Module 9: Using WebMatrix and Other Developer Tools
  • 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
  • Lab: Using WebMatrix and Other Developer Tools
  • Using WebMatrix to Create a Website
  • Using ASP.NET MVC 3 to Create a Website
Skills
  • Use WebMatrix.
  • Use ASP.NET MVC 3 and the Razor view engine.Managing Data by Using Microsoft ASP.NET Dynamic Data
top
> Pre-Requisites
Before attending this course, students must have the following pre-requisites:
  • Three to six months of development experience in a professional environment.
  • Be familiar with the HTML document structure and associated terminology, but are not expected to be expert and do not need to have experience with HTML5.
  • One to three months experience with HTML and XML.
  • A general familiarity with the Microsoft Visual Studio IDE.
> Purpose
After completing the course, students will be able to create and view a simple Web application using HTML within the Microsoft Visual Studio 2010 SP1 IDE; explain the new semantic and structural elements that can be used to create HTML5 Webpages; create Web forms that make use of validation capabilities using the new input types and attributes included in the HTML5 specifications; create layouts and styles using advanced CSS and CSS3; integrate graphics and multimedia into webpages using the Canvas, SVG, Video and Audio elements; implement offline data scenarios using the new HTML5 Web Storage API; use advanced HTML5 JavaScript APIs such as drag-and-drop, File API and Geolocation API; create simple web applications using WebMatrix or ASP.NET MVC.