Finding Parts of the Page In this module, you'll learn all about the Selection API that's now available within HTML5. In the past, traditional DOM selection left something to be desired. The API is limited, and it lacks some of the basic functions needed to be truly useful. In fact, the meteoric success of libraries like jQuery initially came from the need to be able to select against the DOM in an easy, reliable, and speedy fashion. Well, in HTML5, there's a host of new selectors that make it not only easy to work with the DOM but also super-fast. So let's begin working with the Selection API. But, first, I want to show you how to set up the sample code for this course.
Music & Video (without Plugins) Welcome to the Music and Video module of HTML5 Fundamentals. In this module, you'll learn how to add media support to your applications using the native media players. We'll take a look at what's included in the media APIs and how to work with them, plus I'll show an overview of browser support for the different media types. HTML5 media consists of at least three parts. First, the native media element. This is the audio or video tag used in your HTML markup to host a media file. Next are the different media types. There are scores of options available to you when it comes to encoding and packaging media. So I'll briefly cover how these are supported by the major browsers of the day. Lastly, there's the Speech API. Have you ever wanted your application to respond to speech? Well, this is the API to do it. Now the Speech API is out of the scope for this fundamentals course. But as we move on, let's go ahead and touch on browser support and media types.
Drawing Shapes, Charts, and More Drawing Shapes, Charts, and more. In this module, you'll learn the basics of the Canvas API, and together we'll cover what you can and can't do and a little bit about what you should and shouldn't do when it comes to using the canvas. You'll learn how to draw paths and shapes, use transformations, learn to manipulate the canvas with state management, create dynamic charts, and even extract a thumbnail image from a running video. Now before we begin discussing the canvas, let's contrast two different types of images. The first is a vector image. When you think of vector images, you can think of the type of image often associated with Adobe Illustrator where the image is made up of a set of instructions of how to draw the image. And this is all rendered on the fly when the image is displayed. Vectors are often used to form relatively simple shapes or compositions of shapes that make a larger image. One of the benefits of a vector image is that you can scale the image to any size that you want without losing resolution. Here you can see how the smaller image is just as crisp as the larger one. Now another type of image that you encounter is a raster image. Raster images are like JPEGs or PNGs or GIFs. These are images with a set dimension where every pixel within the defined space of the image has a designated color. Raster images have many advantages. In fact, the web is built on these types of images. But one of the drawbacks is that as you increase the size of the raster as shown here on the right, you begin to see that the image loses fidelity as the dimensions are stretched beyond the original intent of the image. So rasters, though, are great for pictures where you need to have explicit control over the color of each pixel in the image. Now when you think of HTML5 canvas, we're talking about rasterized images supported within the dynamic drawing surface.
Drag and Drop Welcome back to HTML5 Fundamentals. This is Craig Shoemaker, and thanks for joining me for this module on drag and drop. In this module, you'll learn the basics of drag and drop, learn about the event pipeline and restrictions of drag and drop operations, and learn how the browsers deal with the drag and drop data internally. Now the drag and drop functionality is driven passed off of events, so let's dive in to each one of these events now.