HTML5 Multimedia Development Cookbook

Dale Cruse, Lee Jordan

• Publisher: Packt Publishing
• Year: 2011
• ISBN:
  9781849691048
• Edition: 1
• Topic: Informatik
• Subtopic: Programmierung in HTML

In Detail

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.

Approach

Written in a cookbook style, this book offers solutions using a recipe based approach. Each recipe contains step-by-step instructions followed by an analysis of what was done in each task and other useful information.

Who this book is for

Web developers who value the need to stay ahead of the game. This cookbook will give you the edge with practical recipes for wielding this new technology immediately.

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?...