Everand Logo

Welcome to Everand!

  • Discover millions of ebooks, audiobooks, and so much more with a free trial

    Only $11.99/month after trial. Cancel anytime.

    HTML5 Multimedia Development Cookbook
    HTML5 Multimedia Development Cookbook
    HTML5 Multimedia Development Cookbook
    Ebook850 pages3 hours

    HTML5 Multimedia Development Cookbook

    By Dale Cruse and Lee Jordan

    ()

    Read preview

    About this ebook

    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. 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
    LanguageEnglish
    PublisherPackt Publishing
    Release dateMay 19, 2011
    ISBN9781849691055
    HTML5 Multimedia Development Cookbook

    Related to HTML5 Multimedia Development Cookbook

    Related ebooks

    Information Technology For You

    View More
    View More

    Related podcast episodes

    Related articles

    • Article

      Rokoko Studio 2.0

      Feb 23, 2021

      Rokoko Studio 2.0
      1 min read

    • Article

      GO Inside Parsing – How Go Handles The Code

      Jul 30, 2019

      This tutorial has two aspects: a theoretical one and a practical one. In the theoretical part, you will learn about parsing, grammar and regular expressions; this is how languages are built and therefore understood in terms of construction and usage.

      8 min read

    • Article

      Secure Your Servers

      Apr 7, 2020

      No matter what you do with your Linux servers you will almost certainly have SSH access to them. Indeed this might be the only access you have, so it would be wise to secure it. Naturally, you will already be using a strong password and will have alr

      4 min read

    • Article

      Rise Of The Robots

      Jan 12, 2021

      Rise Of The Robots
      7 min read

    • Article

      Magnus’ Marketing Minute

      Aug 1, 2022

      Michael Magnus is an advertising professional who supports the growth of the leather industry through his marketing agency, Magnus Opus. Among his client partnerships are Silver Creek Leather Co., manufacturers of Realeather® Crafts and Lace, and Jim

      5 min read

    • Article

      Create A Webpage Or Blog

      Mar 26, 2020

      Create A Webpage Or Blog
      12 min read

    • Article

      Adobe Spark Page Tutorial

      Apr 1, 2018

      1. Whenever you launch it, Spark always opens with an INSPIRATION page, where you can see some of the achievable possibilities of this platform as finished projects. Some of these are by designers, some by students; all are organic. When you finish y

      4 min read

    • Article

      A Place For Everything

      Aug 10, 2019

      A Place For Everything
      9 min read

    • Article

      Website In A Weekend

      May 30, 2023

      Website In A Weekend
      6 min read

    • Article

      Mailserver

      Nov 19, 2019

      Mailserver
      2 min read

    • Article

      Problems Solved

      Apr 10, 2024

      Problems Solved
      11 min read

    • Article

      Customise Your Home WordPress Site

      Nov 14, 2023

      WORDPRESS Credit: http://wordpress.com Part Two! Don’t miss next issue, subscribe on page 16! OUR EXPERT So far, we’ve set up a self-hosted WordPress site. Now we’re S going to refine and customise the look and the layout of the site. To do so, we w

      11 min read

    • Article

      Scan And Scrape Websites Using Python

      Nov 14, 2023

      David Bolton once accidentally boosted the traffic for his firm’s website by 25% in one day by running a web scraper on it. Luckily, they never found out! Ever since the web made an appearance back in the mid-’90s, programmers have been writing softw

      6 min read

    • Article

      Remote Learning

      Mar 4, 2021

      Remote Learning
      6 min read

    • Article

      9 Brave Browser Might Dethrone Chrome Soon

      Jan 6, 2021

      Chrome has been my go-to for almost a decade now. I’m the kind of person who finds it stupid to cover the webcam (unless I have a sticky note full of credentials on my fridge), so I guess its quite clear already that I’m not high on privacy concerns

      4 min read

    • Article

      Adobe Portfolio

      Apr 13, 2021

      Adobe Portfolio
      5 min read

    • Article

      Letters

      Aug 25, 2021

      The advice in Issue 612’s Cover Feature (‘Make Windows 10 Last Longer’, pictured) will help me keep the operating system running smoothly. However, I’ll still adopt the strategy I’ve used when previous versions have been released. This is to wait 12

      5 min read

    • Article

      Do More With WordPress

      Jun 20, 2023

      Do More With WordPress
      2 min read

    • Article

      Vivaldi

      Nov 7, 2023

      Vivaldi
      4 min read

    • Article

      Build It Like A Coder

      Aug 19, 2019

      Build It Like A Coder
      3 min read

    Related categories

    Reviews for HTML5 Multimedia Development Cookbook

    0 ratings

    0 ratings0 reviews

    What did you think?

    Tap to rate

    Review must be at least 10 words

      Book preview

      HTML5 Multimedia Development Cookbook - Dale Cruse

      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

      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

      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

      s are alike

      Tip to remember

      Aside from

      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

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

      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

      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

      vs

      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 ?

      See also

      Understanding the 2d rendering context

      How to do it...

      How it works...

      There's more...

      You can master

      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 ?

      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

      HTML5 Multimedia Development Cookbook

      HTML5 Multimedia Development Cookbook

      Copyright © 2011 Packt Publishing

      All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.

      Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the authors, nor Packt Publishing, and its dealers and distributors will be held liable for any damages caused or alleged to be caused directly or indirectly by this book.

      Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.

      First published: May 2011

      Production Reference: 1160511

      Published by Packt Publishing Ltd.

      32 Lincoln Road

      Olton

      Birmingham, B27 6PA, UK.

      ISBN 978-1-849691-04-8

      www.packtpub.com

      Cover Image by Jacqueline Stetson (<jstetson@gmail.com>)

      Credits

      Authors

      Dale Cruse

      Lee Jordan

      Reviewers

      Shi Chuan

      Christopher Scott Hernandez

      Laurentiu Nicolae

      Acquisition Editor

      Steven Wilding

      Development Editor

      Kartikey Pandey

      Technical Editor

      Arun Nadar

      Project Coordinator

      Leena Purkait

      Proofreader

      Clyde Jenkins

      Indexer

      Monica Ajmera Mehta

      Rekha Nair

      Production Coordinators

      Shantanu Zagade

      Melwyn D'sa

      Cover Work

      Shantanu Zagade

      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

      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.

      I couldn't do this without the support of my family, but it is one special person's time to shine — Jason — keep trying and don't give up. Sometimes all we need is practice and the will to keep moving forward.

      About the Reviewers

      Shi Chuan is an open web developer, member of HTML5 Boilerplate, and the lead of Mobile Boilerplate. Shi has over four years of experience in web development. Half indie and half commercial, he worked with both MNCs and

      Enjoying the preview?
      Page 1 of 1