HTML5 Multimedia Development Cookbook电子书

HTML5 Multimedia Development Cookbook

Table of Contents

HTML5 Multimedia Development Cookbook

Credits

Foreword

About the Authors

About the Reviewers

www.PacktPub.com

Support files, eBooks, discount offers and more

Why subscribe?

Free access for Packt account holders

Preface

What this book covers

What you need for this book

Who this book is for

Conventions

Reader feedback

Customer support

Downloading the example code

Errata

Piracy

Questions

1. Structuring for Rich Media Applications

Introduction

Setting up an HTML5 test area

Getting ready

How to do it...

How it works...

There's more...

WebKit rendering engine

Gecko rendering engine

Trident rendering engine

See also

Using the header tag for logos and site titles

Getting ready

How to do it...

How it works...

There's more...

Use <header> elsewhere

Content, not position

Semantic naming

See also

Creating a table of contents using the nav tag

Getting ready

How to do it...

How it works...

There's more...

Use <nav> elsewhere

More semantic = more gooder

Still evolving

See also

Using section tags to structure areas of a page

Getting ready

How to do it...

How it works...

There's more...

Section doesn't equal div

Section guidelines

Still evolving

See also

Aligning graphics using the aside tag

Getting ready

How to do it...

How it works...

There's more...

Not all <section>s are alike

Tip to remember

Aside from <aside>

See also

Displaying multiple sidebars using the aside tag

Getting ready

How to do it...

How it works...

There's more...

Pull quotes good for <aside>

Remember to validate

See also

Implementing the footer tag

Getting ready

How to do it...

How it works...

There's more...

This happens usually

Flexible footer content

More flexible footer content

See also

Applying the outline algorithm

Getting ready

How to do it...

How it works...

There's more...

Are you sure?

An exception

Remember accessibility

See also

Creating a stylish promo page in HTML5

Getting ready

How to do it...

How it works...

There's more...

Try sans shiv

Mobile first

IE evil?

See also

2. Supporting the Content

Introduction

Structuring a blog article

Getting ready

How to do it...

Put your code on a diet?

How it works...

There's more...

Validation as an aid, not a crutch

Eric Meyer's funny

Where to find validators

See also

Highlighting text using the mark element

Getting ready

How to do it...

How it works...

There's more...

<Mark> long and prosper

Waiting for browsers

Is "future proof" a word?

See also

Using the time element

Getting ready

How to do it...

How it works...

There's more...

Odd rules

<time>'s Time will come

Always remember SEO

See also

Specifying the pubdate of an article

Getting ready

How to do it...

How it works...

There's more...

Still waiting on browsers

Extra credit

Let's end confusion

See also

Displaying comment blocks using the article element

Getting ready

How to do it...

How it works...

There's more...

Blog comments

Value comments

Opportunity's yours

See also

Adding fonts dynamically with @font-face

Getting ready

How to do it...

How it works...

There's more...

Don't steal

Firefox note

Paul Irish rocks

See also

Adding drop-shadow effects to fonts

Getting ready

How to do it...

How it works...

There's more...

Browser support

With great power…

A plea to all readers

See also

Applying gradient effects to fonts

Getting ready

How to do it...

How it works...

There's more...

See also

Annotating visual elements using the figure and figcaption tags

Getting ready

How to do it...

How it works...

There's more...

Grouping's good

Semantics are valuable too

<figure> vs <aside>

See also

3. Styling with CSS

Introduction

Setting elements to display:block

Getting ready

How to do it...

How it works...

There's more...

No need to repeat and repeat and repeat and repeat and repeat

Style once

Echoes of the past

See also

Styling a nav block element

Getting ready

How to do it...

How it works...

There's more...

Browser support

Text-shadow is cool

See also

Using background-size to control background appearance

Getting ready

How to do it...

How it works...

There's more...

Browser support

Acceptable in IE

Simple Scott simply rocks

See also

Adding rounded corners with border-radius

Getting ready

How to do it...

How it works...

There's more...

Browser support

Acceptable in IE

Devin's Heaven goes to 11

See also

Including multiple background images

Getting ready

How to do it...

How it works...

There's more...

Where's the content?

Let's be Frank

See also

Adding a box shadow to images

Getting ready

How to do it...

How it works...

Browser support

Ignorance is bliss

Box-shadow for The Box

See also

Styling for Internet Explorer browsers

Getting ready

Border-radius

Box-shadow

Text-shadow

Note

See also

4. Creating Accessible Experiences

Introduction

Testing browser support

How to do it...

How it works...

There's more...

With an eye to the future

What Modernizr really does

Do it for the right reasons

See also

Adding skip navigation

Getting ready

How to do it...

How it works...

There's more...

Full browser support

Less equals more

See also

Adding meta tags

Getting ready

How to do it...

How it works...

There's more...

Whatchu talkin' 'bout?

It all comes back to SEO

Did I do that?

See also

Using semantic descriptions in tags for screen readers

Getting ready

How to do it...

How it works...

There's more...

Always improve

Semantics for good SEO

Greg finally learned

See also

Providing alternate site views

Getting ready

How to do it...

How it works...

There's more...

Min-width

My math teacher was right

Is bigger always better?

See also

Using hgroup to create accessible header areas

Getting ready

How to do it...

How it works...

See also

Displaying alternate content for non-supported browsers

Getting ready

How to do it...

How it works...

See also

Using WAI-ARIA

Getting ready

How to do it...

How it works...

There's more...

Still awaiting browser support

That's how I role

Accessibility first

See also

5. Learning to Love Forms

Introduction

Displaying placeholder text

How to do it...

How it works...

There's more...

Text only

Embrace italics

Browser support

See also

Adding autofocus to form fields

How to do it...

How it works...

There's more...

One per page

Older browsers

Browser support

See also

Styling forms using HTML5 and CSS3

How to do it...

How it works...

There's more...

Older browsers

Test, test, test

About pseudo classes

See also

Using the e-mail input type

How to do it...

How it works...

There's more...

Browser support

No JavaScript

Validation evolution

Adding a URL using the URL input type

How to do it...

How it works...

There's more...

Browser support

No JavaScript

What's next?

See also

Using the number tag

How to do it...

How it works...

There's more...

Browser support

No JavaScript

Using the range tag

How to do it...

How it works...

There's more...

Use caution

No JavaScript

Browser support

See also

Creating a search field

How to do it...

How it works...

There's more...

Why fix perfection?

Browser support

Search results

See also

Creating a picker to display date and time

How to do it...

How it works...

There's more...

Browser support

If all else fails

See also

6. Developing Rich Media Applications Using Canvas

Introduction

Setting up the canvas environment

How to do it...

How it works...

There's more...

He's smart

What am I sayin'?

What's next for <canvas>?

See also

Understanding the 2d rendering context

How to do it...

How it works...

There's more...

You can master <canvas>

X, meet Y

Respect my authority!

See also

Processing shapes dynamically

How to do it...

How it works...

There's more...

Any way you want it

Similar to tables?

Be a square first

See also

Drawing borders for images using canvas

How to do it...

How it works...

There's more...

Style first

Many color values work

I like big borders and I cannot lie

See also

Rounding corners

How to do it...

How it works...

There's more...

Just like the Scholastic Aptitude Tests

What about IE?

We're laying a foundation

See also

Creating interactive visualizations

How to do it...

How it works...

There's more...

Evil of two lessors

What about fallback content?

Take him up on his offer.

See also

Bouncing a ball

How to do it...

How it works...

There's more...

Start again

Don't box me in

And that's one to grow on

See also

Creating fallback content

How to do it...

How it works...

There's more...

Thanks, Mozilla

How will we deal with accessibility?

Are we ready for <canvas>?

7. Interactivity using JavaScript

Introduction

Playing audio files with JavaScript

Getting ready

How to do it...

How it works...

There's more...

Controlling the appearance of audio clips with jQuery

See also

Using the drag-and-drop API with text

Getting ready

How to do it...

How it works...

There's more...

Create a canvas-based tic-tac-toe game

Show responsive messages as the user plays

See also

Crossbrowser video support with vid.ly and jQuery

Getting ready

How to do it...

How it works...

See also

Displaying video dynamically using jQuery

Getting ready

How to do it...

How it works...

There's more...

More interactive explosions using video and canvas

What's with all the explosions?

Chroma key background replacement in real time

See also

Movable video ads using jQuery

Getting ready

How to do it...

How it works...

There's more...

Have HTML element, will travel

See also

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

Getting ready

How to do it...

How it works...

See also

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

Getting ready

How to do it...

How it works...

There's more...

Pirates Love Daisies and so should you

The return of old school computer animation techniques

See also

Random animation with audio using the canvas tag and JavaScript

Getting ready

How to do it...

How it works...

There's more...

Visualizing your audio with cutting edge browsers

Pushing the implementation of audio in HTML5

See also

8. Embracing Audio and Video

Introduction

Saying no to Flash

How to do it...

How it works...

There's more...

Some good news

Video with style

Cover your assets

See also

Understanding audio and video file formats

How it works...

There's more...

Audio file formats

File format agnosticism

Can we stop the madness one day?

Displaying video for everybody

How to do it...

How it works...

There's more...

A mime is a terrible thing to waste

External "Video for Everybody"

Be flexible with your approach

See also

Creating accessible audio and video

How to do it...

How it works...

There's more...

Always consider accessibility

Browser support

See more

See also

Crafting a slick audio player

How to do it...

How it works...

There's more...

Style and substance

Being careful with details

See also

Embedding audio and video for mobile devices

How to do it...

How it works...

There's more...

Vimeo offers much more

Coming full circle

See also

9. Data Storage

Introduction

Testing browsers for data storage support

Getting ready

How to do it...

How it works...

There's more...

Mobile testing

Adobe browser lab

Free cross-browser and OS testing with BrowserShots

Using browser developer tools to monitor web storage

Getting ready

How to do it...

How it works...

There's more...

Use a Firebug addon even if you don't use Firefox

Safari developer tools are native to the Safari browser

Setting and getting a session storage variable

Getting ready

How to do it...

How it works...

There's more...

One browser, one session

See also

Setting and getting a local storage variable

Getting ready

How to do it...

How it works...

See also

Converting local storage strings to numbers using parseInt

Getting ready

How to do it...

How it works...

There's more...

Storing and retrieving arrays in localStorage

Creating a Web SQL Database

Getting ready

How to do it...

How it works...

There's more...

Web SQL may be replaced by SQLite

Using a Web SQL database

Getting ready

How to do it...

How it works...

There's more...

Save script code in a separate file

Guard against SQL injection on production servers

See also

Creating a cache manifest for offline storage

Getting ready

How to do it...

How it works...

Displaying the current location using geolocation and geo.js

Getting ready

How to do it...

How it works...

Index