HTML5 Multimedia Development Cookbook
By Dale Cruse and Lee Jordan
()
About this ebook
Related to HTML5 Multimedia Development Cookbook
Related ebooks
HTML5 Data and Services Cookbook Rating: 5 out of 5 stars5/5HTML5 Canvas Cookbook Rating: 0 out of 5 stars0 ratingsLibgdx Cross-platform Game Development Cookbook Rating: 0 out of 5 stars0 ratingsPHP Ajax Cookbook Rating: 2 out of 5 stars2/5Meteor Cookbook Rating: 5 out of 5 stars5/5JavaFX 1.2 Application Development Cookbook Rating: 0 out of 5 stars0 ratingsPhpStorm Cookbook Rating: 0 out of 5 stars0 ratingsPHP jQuery Cookbook Rating: 0 out of 5 stars0 ratingsSass and Compass Designer's Cookbook Rating: 0 out of 5 stars0 ratingsiOS Development with Xamarin Cookbook Rating: 0 out of 5 stars0 ratingsAlfresco 3 Cookbook Rating: 0 out of 5 stars0 ratingsAndroid Application Development Cookbook - Second Edition Rating: 5 out of 5 stars5/5AndEngine for Android Game Development Cookbook Rating: 0 out of 5 stars0 ratingsOpenGL 4.0 Shading Language Cookbook Rating: 0 out of 5 stars0 ratingsGroovy 2 Cookbook Rating: 0 out of 5 stars0 ratingsOData Programming Cookbook for .NET Developers Rating: 0 out of 5 stars0 ratingsGit Version Control Cookbook Rating: 4 out of 5 stars4/5JavaScript JSON Cookbook Rating: 0 out of 5 stars0 ratingsEmber.js in Action Rating: 0 out of 5 stars0 ratingsMulti-Tier Application Programming with PHP: Practical Guide for Architects and Programmers Rating: 0 out of 5 stars0 ratingsResponsive Design High Performance Rating: 0 out of 5 stars0 ratingsjQuery Mobile Web Development Essentials - Third Edition Rating: 0 out of 5 stars0 ratingsjQuery 1.3 with PHP Rating: 0 out of 5 stars0 ratingsResponsive Media in HTML5 Rating: 0 out of 5 stars0 ratingsWeb Design With Html5, a Primer Rating: 0 out of 5 stars0 ratingsjQuery Design Patterns Rating: 0 out of 5 stars0 ratingsDeveloping Windows Store Apps with HTML5 and JavaScript Rating: 0 out of 5 stars0 ratingsMastering HTML5 Forms Rating: 1 out of 5 stars1/5JavaScript Mobile Application Development Rating: 0 out of 5 stars0 ratingsHello! Flex 4 Rating: 0 out of 5 stars0 ratings
Information Technology For You
Health Informatics: Practical Guide Rating: 0 out of 5 stars0 ratingsData Analytics for Beginners: Introduction to Data Analytics Rating: 4 out of 5 stars4/5Computer Science: A Concise Introduction Rating: 4 out of 5 stars4/5An Ultimate Guide to Kali Linux for Beginners Rating: 3 out of 5 stars3/5Inkscape Beginner’s Guide Rating: 5 out of 5 stars5/5Creating Online Courses with ChatGPT | A Step-by-Step Guide with Prompt Templates Rating: 4 out of 5 stars4/5Programming for Everyone Rating: 3 out of 5 stars3/5How to Write Effective Emails at Work Rating: 4 out of 5 stars4/5How To Use Chatgpt: Using Chatgpt To Make Money Online Has Never Been This Simple Rating: 0 out of 5 stars0 ratingsCompTIA ITF+ CertMike: Prepare. Practice. Pass the Test! Get Certified!: Exam FC0-U61 Rating: 0 out of 5 stars0 ratingsChatGPT: The Future of Intelligent Conversation Rating: 4 out of 5 stars4/5AWS Certified Cloud Practitioner: Study Guide with Practice Questions and Labs Rating: 5 out of 5 stars5/5Raspberry Pi :Raspberry Pi Guide On Python & Projects Programming In Easy Steps Rating: 3 out of 5 stars3/5Hacking Essentials - The Beginner's Guide To Ethical Hacking And Penetration Testing Rating: 3 out of 5 stars3/5Data Governance For Dummies Rating: 0 out of 5 stars0 ratings20 Windows Tools Every SysAdmin Should Know Rating: 5 out of 5 stars5/5CompTIA Network+ CertMike: Prepare. Practice. Pass the Test! Get Certified!: Exam N10-008 Rating: 0 out of 5 stars0 ratingsLinux Command Line and Shell Scripting Bible Rating: 3 out of 5 stars3/5The Best Damn Cybercrime and Digital Forensics Book Period Rating: 3 out of 5 stars3/5CODING INTERVIEW: Advanced Methods to Learn and Excel in Coding Interview Rating: 0 out of 5 stars0 ratingsHow to Find a Wolf in Siberia (or, How to Troubleshoot Almost Anything) Rating: 0 out of 5 stars0 ratingsCOMPUTER SCIENCE FOR ROOKIES Rating: 0 out of 5 stars0 ratingsCompTIA A+ CertMike: Prepare. Practice. Pass the Test! Get Certified!: Core 1 Exam 220-1101 Rating: 0 out of 5 stars0 ratingsHandbook of Digital Forensics and Investigation Rating: 4 out of 5 stars4/5Micro Niches Rating: 0 out of 5 stars0 ratingsWindows Registry Forensics: Advanced Digital Forensic Analysis of the Windows Registry Rating: 4 out of 5 stars4/5Computer Organization and Design: The Hardware / Software Interface Rating: 4 out of 5 stars4/5FISMA Compliance Handbook: Second Edition Rating: 5 out of 5 stars5/5
Reviews for HTML5 Multimedia Development Cookbook
0 ratings0 reviews
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
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
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
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