HTML5 Multimedia Development Cookbook

HTML5 Multimedia Development Cookbook

Overview of this book

HTML5 is the most significant new advancement the web has seen in many years. HTML5 adds many new features including the video, audio, and canvas elements, as well as the integration of SVG. This cookbook is packed full of recipes that will help you harness HTML5’s next generation multimedia features. HTML5 is the future.Whether you’re a seasoned pro or a total newbie, this book gives you the recipes that will serve as your practical guide to creating semantically rich websites and apps using HTML5. Get ready to perform a quantum leap harnessing HTML5 to create powerful, real world applications. Many of the new key features of HTML5 are covered, with self-contained practical recipes for each topic. Forget hello world. These are practical recipes you can utilize straight away to create immersive, interactive multimedia applications. Create a stylish promo page in HTML5. Use SVG to replace text dynamically. Use CSS3 to control background size and appearance. Use the Canvas to process images dynamically. Apply custom playback controls to your video.

HTML5 Multimedia Development Cookbook

Credits

Foreword

About the Authors

About the Reviewers

www.PacktPub.com

Preface

Free Chapter

Structuring for Rich Media Applications

Introduction

Setting up an HTML5 test area

Using the header tag for logos and site titles

Creating a table of contents using the nav tag

Using section tags to structure areas of a page

Aligning graphics using the aside tag

Displaying multiple sidebars using the aside tag

Implementing the footer tag

Applying the outline algorithm

Creating a stylish promo page in HTML5

Supporting the Content

Introduction

Structuring a blog article

Highlighting text using the mark element

Using the time element

Specifying the pubdate of an article

Displaying comment blocks using the article element

Adding fonts dynamically with @font-face

Adding drop-shadow effects to fonts

Applying gradient effects to fonts

Annotating visual elements using the figure and figcaption tags

Styling with CSS

Introduction

Setting elements to display:block

Styling a nav block element

Using background-size to control background appearance

Adding rounded corners with border-radius

Including multiple background images

Adding a box shadow to images

Styling for Internet Explorer browsers

Creating Accessible Experiences

Introduction

Testing browser support

Adding skip navigation

Adding meta tags

Using semantic descriptions in tags for screen readers

Providing alternate site views

Using hgroup to create accessible header areas

Displaying alternate content for non-supported browsers

Using WAI-ARIA

Learning to Love Forms

Introduction

Displaying placeholder text

Adding autofocus to form fields

Styling forms using HTML5 and CSS3

Using the e-mail input type

Adding a URL using the URL input type

Using the number tag

Using the range tag

Creating a search field

Creating a picker to display date and time

Developing Rich Media Applications Using Canvas

Introduction

Setting up the canvas environment

Understanding the 2d rendering context

Processing shapes dynamically

Drawing borders for images using canvas

Rounding corners

Creating interactive visualizations

Bouncing a ball

Creating fallback content

Interactivity using JavaScript

Introduction

Playing audio files with JavaScript

Using the drag-and-drop API with text

Crossbrowser video support with vid.ly and jQuery

Displaying video dynamically using jQuery

Movable video ads using jQuery

Controlling the display of images using Easel.js and the canvas tag

Animating a sequence of images using Easel.js and the canvas tag

Random animation with audio using the canvas tag and JavaScript

Embracing Audio and Video

Introduction

Saying no to Flash

Understanding audio and video file formats

Displaying video for everybody

Creating accessible audio and video

Crafting a slick audio player

Embedding audio and video for mobile devices

Data Storage

Introduction

Testing browsers for data storage support

Using browser developer tools to monitor web storage

Setting and getting a session storage variable

Setting and getting a local storage variable

Converting local storage strings to numbers using parseInt

Creating a Web SQL Database

Using a Web SQL database

Creating a cache manifest for offline storage

Displaying the current location using geolocation and geo.js

Customer Reviews

5 star

4 star

3 star

2 star

1 star

Foreword

Maybe you've heard the story — or probably urban legend — about the university that didn't lay any grass or pour any concrete when it first opened, leaving the campus grounds as solid dirt. Then, as students began to traverse the campus from one class to the next, campus planners mapped the common paths they took, and then landscaped and paved concrete trails based on these paths.

HTML5 shares the same moral as that story: Utility based on convention. An extraordinary update to the web's markup language, the HTML5 specification incorporates many of the conventions we've all been using in our markup and formalizes them as an official recommendation.

Dale Cruse's HTML5 Multimedia Development Cookbook comes at the perfect time when many of us are transitioning to this new specification. Browser vendors, thankfully, are following suit by adopting HTML5 components at an impressive pace.

But the real secret sauce of Dale's work is the fact that this book — the one you're holding now — is a cookbook in every respect (and from a guy who doubles as a wine savant, no less). Its pages are filled with recipes for creating successful, real-world implementations of HTML5 websites. You'll find thorough, detailed chapters covering forms, video, audio, and much more. There's even a chapter that'll help you style your HTML5 using CSS3, and a chapter explaining how to ensure your HTML5 content is accessible to those using assistive technologies. Every chapter includes exceptional examples from across the web, carefully dissected.

Dale is a master chef when it comes to web standards and forward-thinking, and backwards-compatible markup. I've had the pleasure of working with him in the past on a project of mine, and it was just as clear then as it is now that he knows his stuff. Whether it's the remarkable or the commonplace, the innovative or the practical, Dale Cruse's HTML5 Multimedia Development Cookbook will have you preparing, sautéing, and serving incredible HTML5 websites in no time. Bon appétit.

Cameron Moll

Founder of AuthenticJobs.com Author of Mobile Web Design and Co-author of CSS Mastery: Advanced Web Standards Solutions

HTML5 Multimedia Development Cookbook

HTML5 Multimedia Development Cookbook

Overview of this book

Related Content you might be interested in

Current Title:

HTML5 Multimedia Development Cookbook

Foreword