HTML5 Advanced Topics

Learn to create applications that take advantage of HTML5’s support for offline applications, UI threading, local storage, Web Sockets and Microdata formats
Course info
Rating
(729)
Level
Advanced
Updated
Aug 22, 2011
Duration
2h 45m
Table of contents
Fundamentals of HTML5 : Offline Applications
Fundamentals of HTML5 : Geolocation
Fundamentals of HTML5 : Web Storage
Fundamentals of HTML5 : Web Workers
Fundamentals of HTML5 : Web Sockets
Fundamentals of HTML5 : Microdata
Description
Course info
Rating
(729)
Level
Advanced
Updated
Aug 22, 2011
Duration
2h 45m
Description

In Advanced HTML5 you learn to build native rich internet applications by taking advantage of features that: allow a website to operate with or without internet connectivity, relieve the UI thread of intense processing, reduce application overhead by using Web Sockets for constant communication with the server, extend the amount of data available on the client using the new storage APIs, programmatically locate user’s geographical location on a one-time or continual basis and make data on your website available to both viewers and machines with Microdata markup.

About the author
About the author

Craig Shoemaker is a developer, instructor, writer, podcaster, and technical evangelist of all things awesome.

More from the author
HTML5 Fundamentals
Beginner
3h 47m
Mar 3, 2017
jQuery: Getting Started
Beginner
1h 40m
Jun 3, 2015
More courses by Craig Shoemaker
Section Introduction Transcripts
Section Introduction Transcripts

Fundamentals of HTML5 : Offline Applications
Hello there, and welcome to Pluralsight's Advanced HTML5. This is Craig Shoemaker, and in this course you have an opportunity to learn about some of the most compelling reasons to create websites using HTML5. Now this module is all about HTML5 Offline Applications and subsequent modules include Geolocation, Web Storage, Web Workers, and WebSockets. And while you'll get an opportunity to see each one of these technologies individually, you'll soon learn how marrying them together can pave the way to building some truly interactive websites, all within HTML5. Now the outline for this module is to define exactly what is an offline application and some ideas about how you might use it. And then we'll take a look at the anatomy of an offline application and also delve into some of the application cache API and lifecycle details. We'll review browser support and then dive into the demos. I'll show you some of the common events available within offline apps, how you can do manual and automatic updates, as well as building a journal application that doesn't care whether it's connected to the web or not. And finally, I'll review some of the information that you'll need to know when you start debugging one of these applications. So thanks so much for joining me and let's dig into exactly what is an offline application.

Fundamentals of HTML5 : Geolocation
Hello and welcome to Pluralsight's Advanced HTML5 in this module on Geolocation. Now geolocation is one of the topics that actually is technically not a part of HTML5 anymore. What had happened in the past, a number of technologies had been grouped together into the title of HTML5, but in order to keep things tidy, a number of technologies were split out from the actual HTML specification. So, while geolocation is often thought of as part of HTML5, it's actually its own specification. But that trivia aside, what we'll talk about in this module is what exactly geolocation is, review some of the request patterns, some of the options that are available for you. I'll show you how the position is calculated, delve into some of the browser support, and then I've got some demos for you that will show you how to get the position of the device, how you can watch the position for continual updates, and there's some options available for when you're watching the position.

Fundamentals of HTML5 : Web Storage
Hello and welcome back to Pluralsight's Advanced HTML5. This is Craig Shoemaker, and in this module I'd like to teach you about the new Web Storage API. So to begin, I'll introduce you to web storage and also show you some of the features that you can come to expect from the API. And then I'd like to compare and contrast it with some other storage types that you may already be familiar with. Then I'll let you know what you can expect in terms of browser support. And then for the demos I'll take you through a task list, a shopping cart that's completely implemented in the browser, and then we'll go through some of the particulars of the API showing you how you can clear out the storage, how to deal when you've hit the size limit in the browser, and also how to handle the storage event.

Fundamentals of HTML5 : Web Workers
Hello and thanks for joining me for Pluralsight's Advanced HTML5. This is Craig Shoemaker, and in this module I'd like to acquaint you with Web Workers. I'll start off by helping you understand exactly what web workers are and we'll explore some of the restrictions, then go over the browser support, and then dive into the demos. So calculating Fibonacci sequences is quite processor intensive. So I'll first show you what it looks like without a web worker, and then we'll refactor that sample to use a worker and see what happens after that. I'll show you how you can post string messages, as well as JSON messages to the worker and also some controls that you can do when you're working with web workers. Finally, I have a sample that'll show you how you can integrate AJAX calls directly within a web worker. We'll finish everything up with some resources that you may find useful for you in your research after you finish watching this video, as well as some ideas of how you might use web workers in the real world.

Fundamentals of HTML5 : Web Sockets
Hello and welcome to Pluralsight's Advanced HTML5. This is Craig Shoemaker, and in this module, I'd like to introduce you to WebSockets. So of course I'll begin by defining exactly what WebSockets is, but there's a few things I'll need to cover in order for all that to make sense. So I'll review some traditional communication systems and what real-time data looked like before WebSockets. Then you'll see the advantages of WebSockets and then a contrast between the WebSockets framework and HTTP. Then before I get into the actual HTML portion of the demos, I'll give you a quick run through the server anatomy of a WebSocket server and then I'll show you how to connect to the server, we'll send some messages back and forth, and finish everything up with a stock ticker.

Fundamentals of HTML5 : Microdata
Hello and welcome back to Pluralsight's Advanced HTML5. This is Craig Shoemaker, and in this module I'd like to discuss with you Microdata. To kick things off, I'll talk about exactly what is microdata and how it effects your markup in HTML. And in fact, I'll answer the question of what are the implications for existing markup that you may already be working with. I'll introduce the data vocabulary and then dig into the anatomy of the microdata format. We'll stop and take a look at the browser support, and then I have some demos available for you so you can see how microdata works its way into some more or less real life type of pages.