Course Schedule

= Featured Course

Delivery Method Details

Course Outline

Lesson 1: 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

Lesson 2: Structural & Semantic Elements

• What are the new HTML5 Structural (& Semantic) Elements?
• What are the new elements used for?
• Browser Support for HTML5 Semantic Elements
• Exercise 2_1 The structural elements
• Exercise 2_2: Using the details Element
• Exercise 2_3: Using the new ins element
• Exercise 2_4: The fig & figcaption elements
• Exercise 2_5: The <mark> Element
• Exercise 2_6: Using the <meter> Element
• Exercise 2_7: The <progress> Element
• Exercise 2_8: The <time> Element
• Optional Exercise 2A: Using the New Elements
• Testing browser support for HTML5
• Checking for Browser Support
• Exercise 2_9_A Check if a property exists
• Exercise 2_9_B Check for a property or method
• Exercise 2_9_C Modernizr javascript library
• About Modernizr

Lesson 3: 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 <video>
• 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 <audio>
• Browser Support for audio codecs
• When do I use these new elements?
• Exercise 3_1 Detecting browser support for <video>
• Exercise 3_1A: Using Modernizr
• Exercise 3_2: Detecting browser support for <audio>
• Exercise 3_3: Playing audio with <audio>
• Exercise 3_4: Playing video with <video>
• Demo 3_1 Using video with a fallback
• Exercise 3_5: Video elements attributes
• The Video and Audio API
• Video/Audio Objects' Methods
• Video/Audio Objects' Properties
• Video/Audio Objects' Events
• Exercise 3_6: Controlling video
• Exercise 3_7: Using multiple audio formats
• Optional Exercise 3_A: Video with Flash

Lesson 4: 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
• Exercise 4_1 Using the new input attributes
• Exercise 4_2: Using the new form attributes
• HTML5 Form Validation
• Form Control Attributes
• Form Control Methods
• Exercise 4_3 Form Validation

Lesson 5: HTML5 Canvas

• What are the new elements?
• What are the new elements used for?
• Browser Support <canvas>
• Exercise 5_1 Detecting browser support for <canvas>
• Exercise 5_2: Using the <canvas> element
• Exercise 5_3: Resizing the <canvas>
• Exercise 5_4: Drawing Rectangles on <canvas>
• Exercise 5_5: Drawing Arcs on the <canvas>
• Exercise 5_6: Drawing Quadratic Curves
• Exercise 5_7: Drawing Bezier Curves
• Exercise 5_8: Creating a Linear Gradient
• Exercise 5_9: Creating a Pattern on the <canvas>
• Exercise 5_10: Reviewing properties of the Canvas API

Lesson 6: 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
• Exercise 6_1 Browser support for Web Storage
• Cookies vs. Session Storage vs. LocalStorage
• Exercise 6_2: Storing and Retrieving data
• Exercise 6_3: Browser development tools
• Firefox Firebug
• Chrome Developer Tools
• Opera Dragonfly
• HTML5 Debugging with Safari for the Macintosh
• WebStorage API
• Web Storage Properties
• Web Storage Methods
• Exercise 6_4: Using sessionStorage
• Exercise 6_5: Responding to the storage event
• Optional Exercise 1 Responding to storage event

Lesson 7: Geolocation

• What is Geolocation Used for?
• Browser Support for geolocation
• The Geolocation Object
• Geolocation API Methods
• PositionOptions Object Properties
• Position Interface Attributes
• Exercise 7_1 Checking for Geolocation support
• Exercise 7_2: Finding the users location
• Exercise 7_3: Display location with Google Maps
• Exercise 7_4: Obtaining position information

Lesson 8: 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
• Exercise 8_1: Browser Support for WebMessaging
• Exercise 8_2: Send Cross-Document Messages
• Additional Security Checks

Lesson 9: 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
• Exercise 9_1 Checking for Web Worker Support
• Exercise 9_2 Creating a Web Worker
• Exercise 9_3: The Web Workers Javascript
• Exercise 9_4: Terminating a Web Worker
• Terminating the worker from the Worker Script

Lesson 10: 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”
• Exercise 10_1 Checking Drag Drop Support
• Drag Events
• Exercise 10_2 Respond to Drag Events
• Exercise 10_3 Responding to the Drop Event
• Drop Event
• A jQuery UI Drag and Drop Example

Lesson 11: Offline Applications

• Offline Applications
• Why do we need offline Applications?
• Browser Support for Offline Applications
• Exercise 11_1 Understanding Browser Cache
• Emptying the Browser Cache
• Understanding applicationCache
• Exercise 11_2 Checking for browser support
• Exercise 11_3: Determining if the user is offline
• The navigator.online property
• Exercise 11_4 The Manifest Cache file
• Associating the Cache Manifest with a Web Page
• Exercise 11_5 Understanding the Cache events

Lesson 12: 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
• Exercise 12_1 Checking for Browser Support
• Exercise 12_2 Understanding the onprogress Event
• Exercise 12_3 Understanding the onload event
• Exercise 12_4 Displaying the returned XML

Lesson 13: Web Sockets

• HTTP
• The Web Socket
• WebSocket Properties
• Web Socket Event Handlers
• WebSocket Methods
• Using a WebSocket Server with the WebSocket API
• Exercise 13_1 WebSocket Browser Support
• Exercise 13_2 WebSocket Handshake
• Exercise 13_2 Using the Web Socket Specification Server Sent Events

Lesson 14: Server-Sent Events

• Lesson 14: 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
• Exercise 14_1: Using Server Sent Events

Classroom Locations

eLearning Live

Newport Beach

San Francisco

Los Angeles

San Jose