HTML 5 and CSS3 Advanced

This course is suitable only for those with considerable prior experience and covers: CSS Transitions and Transforms; the canvas element; video and audio; the file api; geolocation; drag and drop; web workers; and offline applications

CSS Transitions and Transforms

Transition basics; Exploring transition options

2D transform fundamentals

Coding 3D transitions; Enhancing (and not degrading) the user experience

Simple 2D Transitions and Transforms

Animating color changes; Fading objects in and out; Growing page elements; Automatically spinning logos; Adjusting font sizes

Introducing The Canvas Element

Introducing The Canvas Tag, Understanding The Differences Between Canvas And Svg

Understanding The Canvas Element And 2D Drawing Api

Identifying The Canvas Element’S Methods And Properties, Using The Canvas Drawing Context

Basic Canvas Drawing Techniques

Setting And Using Colors And Styles, Drawing Basic Shapes: Rectangles And Lines, Understanding The Canvas State, Drawing Complex Shapes: Arcs And Paths, Drawing Complex Shapes: Bézier And Quadratic Curves, Rendering Text

Complex Canvas Drawing Techniques

Creating Shadows, Drawing With Patterns, Drawing With Gradients, Using Clipping Paths, Drawing Images And Video

Advanced Canvas Drawing Operations

Transforming Objects Using The Translate Tag, Scaling Objects With The Scale Transformation, Rotating Objects With The Rotate Transformation, Applying A Custom Transformation, Compositing In Canvas Using Globalalpha, Manipulating Raw Pixels

Building Practical Examples

Building An Image Slideshow Control, Using Smooth Transitions In A Slideshow, Creating A Basic Animation, Creating Animation With Double Buffering, Incorporating Canvas Into A Real Page

Video And Audio Basics

Understanding Html5 Video And Audio, The State Of Html5 Video And Audio, Understanding The Format War, Configuring Your Server To Deliver Html5 Media Formats

Embedding Video And Audio

Using The Video And Audio Tags, Using Multiple Sources For Browser Compatibility, Preloading, Autoplaying, Looping, Setting A Poster Frame, Setting The Video Width And Height, Displaying Subtitles And Captions

Falling Back To Alternative Playback Methods

Falling Back To Flash, Falling Back To Download Links, Using An Embed Code Builder

Encoding Audio And Video Files

Understanding Html5 Video Formats, Understanding Html5 Audio Formats, Encoding Mp4/H.264 Video With Handbrake, Encoding Ogg, Theora, And Webm With Firefogg, Encoding Audio Formats With Vlc, Automating Video And Audio Encoding

Building Your Own Controls With Javascript

Setting Up The Javascript, Creating Play And Pause Buttons, Creating A Play Progress Bar, Creating A Load Progress Bar, Creating A Current Time And Duration Display