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
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 info@verhoef.com