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

About the Authors

Dale Cruse, a Boston-area web developer, has been publishing websites for high-profile clients ranging from the U.S. Army to Bloomingdale's since 1995. He has been a guest lecturer at the Art Institute of New England and is currently pursuing speaking opportunities. Contact him at http://dalejcruse.com.

He is also the author of the Champagne blog Drinks Are On Me at http://drinksareonme.net.

A number of people contributed to the success of this book, and it would take more space than I have to thank each one individually.

Thank you to the entire Packt Publishing team for working so diligently to help me develop such a high quality product of which we can all be proud of.

For my friend of roughly 20 years, Michelle Yaiser: Thank you for believing in me through thick and thin.

Web developer Paul Ramos and I complete each other's sentences. Thank you for being there, brother.

Roxane Velozo is the Robin to my Batman. Thanks for being the best professional sidekick a superhero could ever have.

For Jeffrey Zeldman, Cameron Moll, and Dan Cederholm: I could never hope for a better trio of professional role models. Thank you, gentlemen.

Lee Jordan is a designer and new media developer. She brings a strong design background and concern for the visual and emotional impact of media to web-based projects. Experienced in multiple CMS platforms including Expression Engine, Plone, WordPress, PostNuke, and Google's Blogger, she has maintained, explored, and used most of them on a day-to-day basis. She spends her spare time as the leader of a local scout troop, taking long hikes with her family in the beautiful North Georgia woods, trying to taste test every variety of chocolate that exists, and playing with code and pixels. Design topics or whatever she can think of at the time are posted on her blog at http://leejordan.net.

Lee has written three previous books with Packt Publishing: Project Management for dotProject, WordPress Themes 2.8, and Blogger: Beyond the Basics.

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

About the Authors