Comprehensive HTML5 Development

Software Requirements

• Web or text editor of your choice
• Web browsers - a recent version of one or more of the following:
• Google Chrome
• Mozilla Firefox
• Internet Explorer (9 or later)
• Safari (5 or later)
• Opera
• If space on a web server is available, students may also wish to bring their mobile devices so they can test how pages appear on these devices.

HTML5 Training Outline

Introduction

• HTML5 summary
• Abbreviated syntax guide to writing HTML5
• Best practices

Syntax

• HTML Elements: how to write HTML tags
• Syntax rules
• Page structure
• Basic structure of a web page
• The HTML5 syntax summary

Structure

• Introduction to the structure of HTML documents
• The HTML Content Models
• The Content Models
• Deprecated elements
• Elements with new meanings
• Deprecated attributes
• Structural and semantic elements
• Overview of lists
• Overview of links
• Images
• The remaining HTML5 elements
• Using HTML5 templates
• Using the HTML5 boilerplate and mobile boilerplate

Elements

• What are the new elements?
• How do I use the new elements?
• HTML5 new attributes

Forms

• Introduction form elements and attributes
• New form input types
• New form attributes
• New form elements
• When do I use the new elements?

Video and Audio

• Introduction to HTML5 media elements
• Audio and Video

HTML5 Canvas

• What are the new elements
• Why use the Canvas element and API?

BatteryStatus API

• Why use the BatteryStatus API?
• How does the BatteryStatus API work?
• The BatteryStatus API
• BatteryStatus API methods
• BatteryManager properties
• BatteryManager events
• Browser support

Vibration API

• Why use the Vibration API?
• How does the Vibration API work?
• Vibration methods

Notifications API

• Why use the Notifications API?
• How does the Notifications API work?
• Notifications API
• Notification object attributes
• Notification events
• Notification API methods

DeviceOrientation Event API

• Why use the DeviceOrientation API?
• DeviceOrientation Event API
• DeviceOrientation events
• How does the DeviceOrientation Event API work?
• DeviceOrientation
• DeviceMotion
• DeviceOrientation Event API

Fullscreen API

• Why use the Fullscreen API?
• The Fullscreen API
• Fullscreen API methods
• Fullscreen API properties
• Fullscreen API events
• Notes on the fullscreen view

Speech APIs

• Speech Recognition and Speech Synthesis
• Speech Synthesis
• SpeechUtterance object
• SpeechUtterance object properties
• SpeechUtterance object events
• Speech Recognition

HTML5 Media elements and API

• Audio and Video
• The media elements
• What are the new elements used for?
• Browser support for the new media elements
• <audio> element attributes
• <video> element attributes
• Browser support <video>
• Browser support Ogg/Theora video format*
• Browser support WebM/VP8 video format*
• Browser support MPEG-4/H.264video format*
• Browser support audio codec
• When do I use these new elements?
• Video and Audio APIs
• Video/audio methods
• Video/audio object properties
• Video/audio object events

Forms/Constraint Validation API

• New form input types
• What are the new input types?
• New attributes for input elements
• New form elements
• When do I use the new elements?
• The placeholder attribute
• The autocomplete attribute
• The autofocus attribute
• The list attribute and the datalist element
• The spellcheck attribute
• HTML5 form validation
• Preventing default validation from occurring
• Constraint Validation API
• Form properties
• Form control methods
• Form controls validity and validityState

WebStorage API

• Browser support for WebStorage API
• WebStorage API
• The Storage Object
• When
• Cookies vs. session storage vs. local storage

Web Messaging API

• Web messaging’s postMessage() method
• Establishing trust between domains
• The origin
• What is cross-origin resource sharing?
• CORS support and the server
• Ports and channel messaging
• MessagePort methods
• The Message event object properties

Dataset API

• data-* syntax rules
• The dataset API

Drag and Drop API

• What is drag and drop?
• What is drag and drop used for?
• Browser support for drag and drop
• Understanding drag and drop
• The draggable attribute
• Drag and drop with a data “payload”
• Drag events
• Drop events

XMLHttpRequest Level 2 API

• Objectives
• The XMLHTTPRequest object
• XHR API
• What is XHR used for?
• Benefits of XHR level 2
• The XHR object: readyState property
• The XHR object
• The XHR object: Events
• The XHR Object: Methods
• The XHR object: Properties

Web Sockets API

• HTTP
• WebSocket properties
• WebSocket event handlers
• WebSocket methods
• Using a WebSocket server with the WebSocket API

Server-sent Events API

• The server messages
• Creating an EventSource
• The EventSource properties
• The EventSource events
• The advantages of server-sent events
• The disadvantages of server-sent events
• Server-sent events summary

Canvas API

• What are the new elements?
• Why use the Canvas API?
• Canvas quick summary
• Uses for the new Canvas API
• Canvas Demos

Geolocation API

• What is the Geolocation API used for?
• Browser support for Geolocation
• The Geolocation API
• Geolocation object methods
• Position object properties
• Position interface attributes

Web Workers API

• Features available to Web Workers
• Why use Web Workers?
• When should Web Workers be used?
• How do Web Workers work?
• The Web Worker API
• The abstractWorkerk interface properties
• The WorkerGlobalScope object
• The WorkerGlobalScope object properties
• The WorkerGlobalScope object methods
• The WorkerGlobalScope events
• Browser support for Web Workers
• Types of Web Workers
• Dedicated Worker
• Shared Worker
• Creating Shared Workers

Conclusion