Web Application Development Using HTML5

Course: HTML5

Duration: 4 Days

Level: II

Course Summary

Welcome to Modern Web Development using HTML5! This is a four day course devoted to HTML5 that also introduces JavaScript and some jQuery as well. The course is designed to be a fast-paced introduction to HTML5 and related API?s including: Web Storage, Geolocation, XMLHttpRequest, Web Messaging, Web Workers, Offline Applications and more.

« Hide The Details

Topics Covered In This Course

HTML5 Fundamentals

What is HTML5? Who is responsible for HTML5?
Why should I be writing HTML5?
When was HTML5 created?
Where is the official HTML5 specification?
Getting Started with HTML5
Line 1: The new Doctype
Line 2: The root node
The HTML lang attribute
Setting the Character Set
New HTML5 Elements and Internet Explorer
JavaScript and jQuery
HTML5 Syntax Summary
HTML5 Content Models
HTML5 Elements with New Meanings
HTML5 Deprecated Attributes

Structural & Semantic Elements

What are the new HTML5 Structural (& Semantic) Elements?
What are the new elements used for?
Browser Support for HTML5 Semantic Elements
Testing browser support for HTML5
Checking for Browser Support
About Modernizr

New Media Elements

What are the new elements?
What are new elements used for?
The Audio Elements Attributes
The Video Elements Attributes
Browser Support for
Browser Support for Ogg/Theora video format*
Browser Support for WebM/VP8 video format*
Browser Support for MPEG-4/H.264video format*
Browser Support for
Browser Support for audio codecs
When do I use these new elements?
The Video and Audio API
Video/Audio Objects' Methods
Video/Audio Objects' Properties
Video/Audio Objects' Events

New Form Elements

What are the new input type attributes?
When do I use these new elements?
Browser support for the input elements new type attributes
Browser support for the new form attributes
HTML5 Form Validation
Form Control Attributes
Form Control Methods

HTML5 Canvas

What are the new elements?
What are the new elements used for?
Browser Support

WebStorage

Note Regarding HTML5 API?s
What is Web Storage used for?
Browser Support for the Storage Object
The Storage Object
Storage Object MethodsStorage Object Events
Storage event Object Properties
When NOT to use Web Storage
Cookies vs. Session Storage vs. LocalStorage
Firefox Firebug
Chrome Developer Tools
Opera Dragonfly
HTML5 Debugging with Safari for the Macintosh
WebStorage API
Web Storage Properties
Web Storage Methods

Geolocation

What is Geolocation Used for?
Browser Support for geolocation
The Geolocation Object
Geolocation API Methods
PositionOptions Object Properties
Position Interface Attributes

Web Messaging

Web Messaging Methods
Establishing Trust between Domains
Establishing Trust with ORIGIN
Cross Origin Resource Sharing (CORS)
Ports and Channel Messaging
MessagePort Methods
The Message Event Object
Additional Security Checks

Web Workers

Why use Web Workers
What are Web Workers
Features Available to Workers
How do Web Workers work?
The Worker Object
WorkerGlobalScope
WorkerGlobalScope Properties
WorkerGlobalScope Methods
WorkerGlobalScope Events
Browser Support for Web Workers
Types of Web Workers
Terminating the worker from the Worker Script

Drag and Drop

What is Drag and Drop
What is Drag and Drop Used for?
Browser Support for Drag and Drop
Understanding Drag and Drop
Drag and Drop with a Data ?payload?
Drag Events
A jQuery UI Drag and Drop Example

Offline Applications

Offline Applications
Why do we need offline Applications?
Browser Support for Offline Applications
Emptying the Browser Cache
Understanding applicationCache
The navigator.online property
Associating the Cache Manifest with a Web Page

XMLHttpRequest Level 2

What is XmtlHttpRequest (XHR)?
Benefits of XHR Level 2
The XHR object: States
The XHR object: Event Handlers
The XHR Object: Methods
The XHR object: Properties

Web Sockets

HTTP
The Web Socket
WebSocket Properties
Web Socket Event Handlers
WebSocket Methods
Using a WebSocket Server with the WebSocket API

Server-Sent Events

What are Server Sent Events?
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

What You Can Expect

By the time you complete this course, you will have learned the following:

The definition of HTML5
How to begin using HTML5
How to create a more semantically correct web page with the new structural tags including: article, section, header, footer and more
Three different methods for checking HTML5 Browser support including the modernizr JavaScript library
How to deliver multimedia without the use of plug-ins, using the new audio and video elements
How to use the new Audio and Video API's
Create next generation forms with HTML5 that provide built-in mechanisms for validation, user prompts and interactivity
Draw with the new HTML5 Canvas element
Gather information from the user and store it in the browser for later use
Acquire the users location with the geolocation API
Send messages between web pages and cross-domain with the Web Messaging API
Speed up slow web pages with Web Workers
Implement Drag and Drop
Use Web Applications while offline
Use the XMLHttpRequest Level 2 to access cross-domain resources
Understand Web Sockets
User Server-Sent events to update a web page

Who Should Take This Course

This course is designed for beginning to advanced web designers and developers with some knowledge of any version of HTML, CSS and JavaScript, but no knowledge of HTML5, CSS3 and jQuery or how or why they are used in modern web development. The course is also for those web designers and developers who would like to make the leap into mobile web development and develop websites and web applications for handheld devices such as amart phones and tablets. In addition, the course is a great jump-start for web designers who would like to focus more on web development, in other words designers who have built static non-interactive websites and who now wish to create Rich Internet Applications (RIAs). The course is also advisable for developers of web applications who currently use other technologies such as Adobe Flash and Flex or Microsoft Silverlight and would like to understand what HTML5 and its related API?s bring to the RIA table.

Recommended Prerequisites

Participants should have:

Some knowledge of HTML (any version)
Some knowledge of JavaScript
Some knowledge of CSS

Training Style

Students will start by getting their hands dirty and jumping right into HTML5 code. They will 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 to build applications that work offline.

Along the way, they will learn about the current state of browser support for HTML5 and the theory behind all the changes that have been made.

Instructor-led, group-paced, classroom-delivery learning model with structured hands-on activities and case studies.

« Hide The Details

Related Courses

Code	Course Title	Duration	Level
DOJO	Dojo Development	3 Days	I	Details
JQRYF	jQuery Fundamentals	3 Days	I	Details
RSPWD1	Introduction To Responsive Web Design	4 Days	I	Details
JQRYM	jQuery Mobile	3 Days	I	Details
HTML	Hypertext Markup Language (HTML) - 2 days	2 Days	I	Details
JQUERY	jQuery Development	3 Days	I	Details
JQRYC	Comprehensive jQuery Training	3 Days	I	Details
ANGULAR	ANGULAR TRAINING OUTLINE	5 Days	I	Details
JSCP01	JavaScript Programming Essentials	4 Days	II	Details
CSS	Cascading Style Sheets (CSS)	2 Days	II	Details
WEBAPI	HTML5 Advanced APIs	3 Days	III	Details

Every student attending a Verhoef Training class will receive a certificate good for $100 toward their next public class taken within a year.

You can also buy "Verhoef Vouchers" to get a discounted rate for a single student in any of our public or web-based classes. Contact your account manager or our sales office for details.

Schedule For This Course
There are currently no public sessions scheduled for this course. We can schedule a private class for your organization just a couple of weeks from now. Or we can let you know the next time we do schedule a public session.

Notify me the next time this course is confirmed!

Can't find the course you want?
Call us at 800.533.3893, or
email us at [email protected]