What you will learn in this course
You'll get answers to these questions:
- What is jQuery and why should you use it?
- How does jQuery reduce the amount of code that you have to write to add rich functionality to both existing and new web pages?
- How does jQuery make Ajax programming easier?
- What best practices are there for using jQuery so that it works unobtrusively and performs well?
- What plugins and extensions are available to enhance your applications even more than the core jQuery library can provide?
- What is HTML5 and why, when, and where should you use it?
- How does HTML5 reduce the amount of code that you have to write to add rich functionality to both existing and new web pages?
- How do you detect the features of HTML5 that are available in your users' browsers?
- How do you let my users continue to work while being disconnected from the network?
- Learn what jQuery is and how to add it to your applications
- Use jQuery to select complex sets of elements from the DOM
- Develop rich web pages that respond to user interaction
- Interact with your server-side code using Ajax
- Explore a wide variety of plugins and learn how to write your own
- Learn what HTML5 includes and how to detect it
- Enhance your forms to provide a richer user experience
- Store data on your users' machines and sync it with the data on your servers
Course outline and topics
This new course covers jQuery + HTML5 and is intended for web developers who are targeting modern web browsers (Chrome, Firefox, Safari, and IE9) on any platform (Windows, Mac OS X, Linux, iOS, Android).
To get things started, we'll talk about what jQuery is, what it can do, where to get it, and how to include it into both existing and new pages. We'll introduce the famous $ function and do some simple selections with it, modifying the DOM, and handling some events. This introduction will be light enough to get started using jQuery quickly, but show enough of what it's capable of so that we have some context in the modules that follow.
jQuery gets its name for its ability to query the DOM for elements in an amazing variety of ways. This module will cover the many different selectors that jQuery supports, but also the methods the jQuery object supports that allow you to refine and extend the results of your queries. The style of method chaining that jQuery made popular will be covered, allowing you to truly write less, but do more.
Manipulating the Document
You've selected the correct elements, what's next? This module demonstrates how easy jQuery makes it to manipulate the DOM by creating new elements and updating existing ones. You'll see how jQuery makes programmatic CSS manipulation a breeze. You'll also get to explore jQuery's support for "animating" the properties of your elements in order to create impressive visual and functional effects for when the user is interacting with your pages.
Even if "core" jQuery were all you could use, it would still be worth it. Fortunately, the jQuery community has written hundreds, if not thousands, of plugins (mostly free) that can take your applications to the next level with barely any code to write on your part. This module will cover some of the more popular plugins (color, validation, form, and more) and demonstrate how to write your own (this is often useful even if you don't plan on sharing your plugins with anybody else).
The jQuery UI project is a standard set of widgets and effects, put together by the jQuery team by selecting from and improving upon some of the most popular plugins developed by the community. These feature-rich widgets (autocomplete, datepicker, dialog, tabs, and more) can make your web pages seem as rich as traditional applications. You'll also learn how to use the jQuery UI CSS Framework.
Templates and Data Binding
Introduction to HTML5
This module introduces HTML5, providing an overview of what will be covered throughout the rest of the course. Browser support and techniques for detecting the different features in HTML5 are explored. HTML5 includes a handful of new, semantic elements that make your markup much easier to structure and reason about. We'll also look at some of the new CSS properties that you can use to enhance the style of your documents.
As strange as it sounds, HTML5 allows you to take your web applications offline. This module looks at the ways you can do this, specifying the resources the browser will need to download in order to be able to do anything offline and what events and methods you'll need to know about in order to provide a proper, offline experience.
One of the most revolutionary features of HTML5 is the new WebSocket protocol which allows servers to push data to clients enabling almost "real time" notifications. This module looks at the client-side APIs you'll need to be familiar with in order to use them and some different ways of setting up a server in order to handle the client requests. We'll also look at web workers which allow you to perform long-running tasks while keeping the main UI for your application usable and responsive.
The Canvas API makes it possible to do more than just display text and raster-based images in your web pages. You'll learn about the different shapes the Canvas API supports and the methods you need to draw them as well as the newer features for drawing text onto your canvases. The programming model used by canvases is different from the DOM so we'll discuss the new things you'll have to consider while working with it.
Previously, playing any sort of audio or video required the use of a 3rd party plugin like Flash, QuickTime, or Silverlight. HTML5 gives audio and video first-class support, but there are plenty of options to consider. This module will demonstrate the new tags and how to detect if a browser supports specific codecs.
HTML5 includes more new features than any other previous version of HTML. This module tries to wrap things up by covering the "smaller", but still game-changing features that didn't fit in the other modules. Features such as being able to drag and drop between the browser and the OS, local file system access, the geolocation API, and cross-window messaging will be covered before you go off and implement these in your own applications.