Experience in the Following Areas Is Required

HTML 5 & CSS 3

In this HTML5 training class, you'll start by getting your hands dirty and jumping right into HTML5 code. You'll learn about 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 you build applications that work offline. Along the way, you'll learn about the current state of browser support for HTML5 and the theory behind all the changes that have been made.

CSS3 has been split into "modules". It contains the "old CSS specification", in addition, new modules are added. In this session we will be looking at the changes we have in CSS3.

Pre-requisites

Experience in the following areas is required:

·  HTML 4

·  Basic CSS

·  Basic JavaScript

Experience in the following areas would be beneficial:

·  JSON

·  DOM

·  Ajax

COURSE DETAILS

Technologies covered: HTML 5 & CSS 3

Length and schedule: Three days

COURSE OUTLINE

HTML5 Overview

·  History of HMTL5

·  The HMTL5 vision

·  WHATWG and W3C specifications

·  What is part of HMTL5?

·  HMTL5 Roadmap

Using HTML5 Today

·  Currently available features

·  Using HMTL5 in browsers that do not support it

·  Detecting native availability of HMTL5 features

·  Working with Emulation

Modernizr

·  What is Modernizr?

·  Installing Modernizr

·  Detecting Features

·  Writing Fallbacks

Understanding HMTL5 Markup

·  HMTL5Page Structure

·  HMTL5 DOCTYPE

·  HMTL5Markup Structural elements

·  Semantic Elements

HTML5 Forms

·  HMTL5Form Elements

·  Building and using HMTL5Forms

Overview of the HTML5 APIs

·  Overview of the HTML5 APIs

·  Common building blocks

·  Programming HTML5

HTML 5 API

·  Drag Drop API

·  FileAPI

·  Geolocation API

HTML5 Canvas and SVG

·  Overview Canvas vs. SVG

·  Canvas coordinates

·  Context

·  Accessibility

·  Pixel data

·  Working with the Canvas APIs

·  Drawing operations

·  Canvas transforms

·  Understanding and Working with SVG

HTML5 Communication APIs

·  Cross-document messaging Overview

·  Understanding the origin concept

·  Using the PostMessage API

·  Understanding Server Sent Events

HTML5 Web Sockets

·  Real-time Communication overview

·  Web Sockets overview

·  Web Sockets API

·  Web Sockets Protocol

·  Using the Web Sockets API

·  Beyond Web Sockets

HTML5 Web Workers

·  Web Workers overview Multi-core processor architecture

·  Understanding Web Worker communication

·  Using the Web Workers APIs

HTML5 Storage

·  Overview Local Storage

·  Session Storage

·  Web SQL Database

·  IndexedDB

·  Using the Storage APIs

·  HTML5 Offline Application App Cache

Communication on the Web Today

·  The current state of the Web

·  About HTTP

·  About AJAX

·  AJAX Level 2

Introduction to CSS3

Content

·  Fonts

·  Text Shadow

·  Selectors

·  Styling Form Inputs

Layout

·  Layouts

·  Box Layout

·  Vendor Prefixes

·  Columns

·  Background

Colors

·  Opacity

·  RGBA and HSLA

·  Alpha

·  currentColor

·  Gradients

Borders

·  Resizable Borders

·  Rounded Corners

·  Shadowing

·  Complex Box Shadows

Transforms

·  Rotate

·  Skew

·  Scale

·  Translate

Animations

·  Animations

·  KeyFrames

·  Transitions

Media Queries

·  Brief Overview of Responsive Design

·  Responding to Viewing Dimensions

·  Responding to Device Constraints

Script

·  Managing Styles in Script

·  Supporting Multiple Browsers