DOCSLIB.ORG

HTML5 Multimedia Developme

Total Page：16

File Type：pdf, Size：1020Kb

Download full-text PDF Read full-text
HTML5 Multimedia Developme HTML5 Multimedia Development Cookbook Recipes for practical, real-world HTML5 multimedia-driven development Dale Cruse Lee Jordan BIRMINGHAM - MUMBAI 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 ([email protected]) Credits Authors Project Coordinator Dale Cruse Leena Purkait Lee Jordan Proofreader Reviewers Clyde Jenkins Shi Chuan Christopher Scott Hernandez Indexer Monica Ajmera Mehta Laurentiu Nicolae Rekha Nair Acquisition Editor Steven Wilding Production Coordinators Shantanu Zagade Development Editor Melwyn D'sa Kartikey Pandey Cover Work Technical Editor Shantanu Zagade Arun Nadar 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 small local startups. Shi Chuan has spent a large portion of his career working in digital adverting. He worked for Ogilvy Singapore, and helped the launch with many brand site, and micro-site, for clients like Yahoo, Nokia, Levi's, IBM, and many other global companies around the world. What he also enjoys is to work with smaller clients that allow him greater freedom to experiment with real cool and kick-ass stuff. As a member of HTML5 Boilerplate, he has developed a stronger sense of community and web evangelism. He is excited about the future of the technology and is doing the best he can to embrace fashion's free culture and to help shape a better web. He has a semi-regular blog at: http://www.blog.highub.com. Christopher Scott Hernandez has been working on the web since his freshman year in high school, when he designed and developed a product catalog for his father's upholstery business. Born and raised in beautiful Austin, Texas, he now lives in sunny Philadelphia and works as a web developer for an international e-commerce agency. When he's not pushing pixels or developing websites, Chris enjoys spending time with his brilliant wife Josie and their canine trio: Darwin, Truman, and Toby. He also maintains a blog and portfolio at http://christopher-scott.com. Laurentiu Nicolae is a Web developer, with over 5 years of experience. He has been working as a freelancer for different clients from Europe and the United States, and now he is working for BootsnAll. He is specialized in developing websites, being a "native writer" in web languages, like PHP, HTML, XHTML, CSS, and JavaScript. He lives in Bucharest, Romania with his wife, Georgiana, and their son Matei. Table of Contents Preface 1 Chapter 1: Structuring for Rich Media Applications 5 Introduction 5 Setting up an HTML5 test area 7 Using the header tag for logos and site titles 10 Creating a table of contents using the nav tag 14 Using section tags to structure areas of a page 16 Aligning graphics using the aside tag 19 Displaying multiple sidebars using the aside tag 22 Implementing the footer tag 24 Applying the outline algorithm 28 Creating a stylish promo page in HTML5 29 Chapter 2: Supporting the Content 35 Introduction 35 Structuring a blog article 36 Highlighting text using the mark element 40 Using the time element 44 Specifying the pubdate of an article 46 Displaying comment blocks using the article element 49 Adding fonts dynamically with @font-face 51 Adding drop-shadow effects to fonts 55 Applying gradient effects to fonts 57 Annotating visual elements using the figure and figcaption tags 58 Table of Contents Chapter 3: Styling with CSS 63 Introduction 63 Setting elements to display:block 66 Styling a nav block element 68 Using background-size to control background appearance 73 Adding rounded corners with border-radius 76 Including multiple background images 79 Adding a box shadow to images 83 Styling for Internet Explorer browsers 85 Chapter 4: Creating Accessible Experiences 89 Introduction 89 Testing browser support 90 Adding skip navigation 94 Adding meta tags 97 Using semantic descriptions in tags for screen readers 99 Providing alternate site views 102 Using hgroup to create accessible header areas 107 Displaying alternate
Load more

Recommended publications
  • Taking Your Talent to the Web (PDF)
    00 0732 FM 4/24/01 1:38 PM Page i Taking Your Talent to the Web A Guide for the Transitioning Designer By Jeffrey Zeldman 201 West 103rd Street, Indianapolis, Indiana 46290 00 0732 FM 4/24/01 1:38 PM Page ii Taking Your Talent to the Web: Publisher A Guide for the Transitioning Designer David Dwyer Copyright 2001 by New Riders Publishing Associate Publisher Al Valvano All rights reserved. No part of this book shall be reproduced, stored in a retrieval system, or transmitted by any means—electronic, mechani- Executive Editor cal, photocopying, recording, or otherwise—without written permission Karen Whitehouse from the publisher. No patent liability is assumed with respect to the Acquisitions Editor use of the information contained herein. Although every precaution Michael Nolan has been taken in the preparation of this book, the publisher and au- thor assume no responsibility for errors or omissions. Neither is any li- Technical Editor ability assumed for damages resulting from the use of the information Steve Champeon contained herein. Development Editor Victoria Elzey International Standard Book Number: 0-7357-1073-2 Product Marketing Library of Congress Catalog Card Number: 00-111152 Manager Kathy Malmloff Printed in the United States of America Managing Editor First Printing: May 2001 Sarah Kearns Project Editor 05 04 03 02 01 7 6 5 4 3 2 1 Jake McFarland Interpretation of the printing code: The rightmost double-digit number Copy Editor is the year of the book’s printing; the rightmost single-digit number is Chrissy Andry the number of the book’s printing.
    [Show full text]
  • Reusable Design • May 23, 2010
    Angela Dowd • ITEC 865 • Reusable Design • May 23, 2010 Reusable Design Allan McCollum–Introduction to The Shapes Project There are many design categories in the e-learning world and at least as many types of designers. Reusable design is embraced by most designers because it can be used in different contexts and shared with other individuals and teams. When developed with a well defined structure, reus- able design helps designers to be more efficient and more consistent in their work. Instructional designers, graphic designers, software engineers and information architects can all benefit from easy access to reusable design. Web Standards are a form of reusable design, as are Reusable Learning Objects, templates, components and symbols. This paper will explore some of the roles reusable design plays in e-learning and discuss the value that libraries and repositories add to successful e-learning development. Reusable Learning Objects (RLOs) are used by designers and instructors to create instruction. RLOs are context independent and cannot link to any content outside of the learning object. Ac- cording to Olgren and Ploetz1 some characteristics of RLOs are reusability, accessibility, interop- erability and durability. Templates can be examples of reusable learning objects. Designing e-learning using RLOs can save time and money because they are versatile and portable. When they are organized in a Learning Object Repository (LOR) along with their metadata and descriptions, they are also accessible. LORs use three categories to identify characteristics: General and content characteristics, technical characteristics and quality characteristics (Tzikopoulos, Manouse- lis, and Vuorikari)2. 1 Learning Objects for Instruction Design and Evaluation, by Pamela T.
    [Show full text]
  • Designing With
    temp spine = .8252 designing with web standards “Jeffrey and his web standards co- conspirators have made it possible for those old enemies— beauty, usability, and accessibility — to play nice together in any website.” designing with — Louis Rosenfeld, publisher, Rosenfeld Media web standards second edition “Occasionally (very occasionally), you come across an author who makes you think, designing with “This guy is smart! And he makes me feel Best-selling author, designer, and web standards evangelist Jeffrey Zeldman smarter, because now I finally understand has updated his classic, industry-shaking guidebook. This new edition — this concept.’” web standards second edition now in full color — covers improvements in best practices and advances in the world of browsers since the first edition introduced the world to — Steve Krug, author of Don’t Make Me Think standards-based design. Written in the same engaging and witty style, “Zeldman explains complex technologies making even the most complex information easy to digest, it remains your jeffrey zeldman in a way that designers can not only essential guide to creating sites that load faster, reach more users, and understand, but actually get excited about. cost less to design and maintain. If you are serious about web design, you Learn from Jeffrey’s insights as he demonstrates how web standards are need this book.” driving search engine friendliness (“findability”) and the Web 2.0 applica- — Hillman Curtis, author, MTIV: Process, tions that have reinvigorated the medium and the online marketplace. Inspiration and Practice for the New Media Discover new techniques to make CSS layouts work better across multiple Designer and Hillman Curtis on Creating browsers and ways to make web content more accessible.
    [Show full text]
  • View / Open V1n2.Pdf
    VOLUME1 NUMBER2 ::: APRIL 2001 ::: FEATURE – Dale Vidmar 14 Days in Cuba: A Land of People Living In Between Dale Vidmar recently returned from a 2-week visit to Cuba as part of a tour group of 35 librarians and friends from the U.S. and Canada. We asked him to write a diary of his trip for NewBreed. INTERVIEW – Jeffrey Zeldman NewBreed Librarian asked Jeffrey Zeldman to educate the library community on standards... what are they, why are they important, what is the W3C, which browsers are compliant, what are the incentives, and more. These issues are central to the web medium we find ourselves increasingly immersed in. If librarians foresee themselves as key players in future information landscapes, we must begin with standards. PEOPLE For this issue, we aked three students at the University of Illinois Urbana-Champaign why they chose to pursue an MLS. Here are their responses. ASK SUSU Susu, our sometimes irreverent advice columnist, answers your questions about work, school, the job hunt, and librarianship in general. In this issue, Susu advises on interviewing. TECH TALK Colleen just got back from the ACRL conference in Denver, where she had a great time talking to exhibitors. In this TechTalk, she shares with you what she found. LETTERS Say What? If you have something to say, we want to hear it. Send us your letters and we'll post them here. If you're responding to an article or interview, place the headline in the subject of your email. © Copyright 2001-2002, NewBreed Librarian. All rights reserved. FEATURE ARTICLE ::: APRIL 2001 ::: 14 Days in Cuba: A Land of People Living In Between DALE VIDMAR Dale Vidmar recently returned from a 2-week visit to Cuba as part of a tour group of 35 librarians and friends from the U.S.
    [Show full text]
  • Deliver First Class Web Sites: 101 Essential Checklists
    Summary of Contents Preface ........................................................................................................ ix 1. Let’s Get Started … but How? .................................................................. 1 2. What to Find Out: Initial Questions to Answer ....................................... 17 3. Preparing Web Site Content ................................................................... 33 4. Managing all the Content ....................................................................... 45 5. Web Site Usability: Focusing on the User ............................................... 61 6. Color ..................................................................................................... 79 7. Information Architecture ........................................................................ 93 8. Navigation ........................................................................................... 115 9. Best Coding Practice: W3C Recommendations and Standards .............. 147 10. Creating Accessible Web Sites ............................................................ 173 11. Web Site Optimization ....................................................................... 199 12. Search Engine Optimization ............................................................... 219 13. Design ............................................................................................... 239 14. Testing ............................................................................................... 257 15.
    [Show full text]
  • Web Standards Solutions the Markup and Style Handbook Special Edition
    Web Standards Solutions The Markup and Style Handbook Special Edition Dan Cederholm Web Standards Solutions: The Markup and Style Handbook, Special Edition Copyright © 2009 by Dan Cederholm All rights reserved. No part of this work may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopying, recording, or by any information storage or retrieval system, without the prior written permission of the copyright owner and the publisher. ISBN-13 (pbk): 978-1-4302-1920-0 ISBN-13 (electronic): 978-1-4302-1921-7 Printed and bound in the United States of America 9 8 7 6 5 4 3 2 1 Trademarked names may appear in this book. Rather than use a trademark symbol with every occurrence of a trademarked name, we use the names only in an editorial fashion and to the benefit of the trademark owner, with no intention of infringement of the trademark. Distributed to the book trade worldwide by Springer-Verlag New York, Inc., 233 Spring Street, 6th Floor, New York, NY 10013. Phone 1-800-SPRINGER, fax 201-348-4505, e-mail kn`ano)ju<olnejcan)o^i*_ki, or visit sss*olnejcankjheja*_ki. For information on translations, please contact Apress directly at 2855 Telegraph Avenue, Suite 600, Berkeley, CA 94705. Phone 510-549-5930, fax 510-549-5939, e-mail ejbk<]lnaoo*_ki, or visit sss*]lnaoo*_ki. Apress and friends of ED books may be purchased in bulk for academic, corporate, or promotional use. eBook versions and licenses are also available for most titles. For more information, reference our Special Bulk Sales–eBook Licensing web page at dppl6++sss*]lnaoo*_ki+ejbk+^qhgo]hao.
    [Show full text]
  • Website Owner's Manual
    website owner’s manual website owner’s manual Paul Boag MANNING I iii I For online information and ordering of this and other Manning books, please visit www.manning.com. The publisher offers discounts on this book when ordered in quantity. For more information, please contact Special Sales Department Manning Publications Co. Sound View Court 3B fax: (609) 877-8256 Greenwich, CT 06830 Email: [email protected] ©2010 by Manning Publications Co. All rights reserved. No part of this publication may be reproduced, stored in a retrieval system, or transmitted, in any form or by means electronic, mechanical, photocopying, or otherwise, without prior written permission of the publisher. Many of the designations used by manufacturers and sellers to distinguish their products are claimed as trademarks. Where those designations appear in the book, and Manning Publications was aware of a trade- mark claim, the designations have been printed in initial caps or all caps. Recognizing the importance of preserving what has been written, it is Manning’s policy to have the books we publish printed on acid-free paper, and we exert our best efforts to that end. Recognizing also our responsi- bility to conserve the resources of our planet, Manning books are printed on paper that is at least 15 percent recycled and processed without the use of elemental chlorine. Manning Publications Co. Development Editor: Sebastian Stirling Sound View Court 3B Copyeditor: Tiffany Taylor Greenwich, CT 06830 Designer: Leslie Haimes Illustrator: Eamon Dougherty ISBN: 978-1-933988-45-0 © 2010 Printed in the United States of America 1 2 3 4 5 6 7 8 9 10 – MAL – 14 13 12 11 10 09 To my father, who inspired me to write a book; and to my son, who may one day write one of his own.
    [Show full text]
  • Web Design and Mobile Trends for 2013
    Web Design Trends 2013 Awwwards.com 1 TRE NDS Project ACKNOWLEDGMENTS: Our gra- titude for the generosity of all the participants who have collaborated in this project by giving their valua- ble opinions: Dan Mall, Karen Mc- Grane, Jenn Lukas, Mike Kus, Nick Pettit, Dave Rupert, Veerle Peters, Denise Jacobs, Simon Foster, Bruce Lawson, Luciano Foglia, Ben Cline, Aarron Walter, Trent Walton, Oli- ver Reichenstein, Legwork Agency, Ultranoir, Ian Hickson, Brad Frost, Hinderling Volkart, Jeffrey Zeldman, Rachel Andrew, Epic Agency, Unit9, B-Reel, Fantasy-Interactive Lon- don,Hello Monday and Davin Wil- frid. EDITOR IN CHIEF and ART DIREC- TION: Awwwards Team. 2013 Web Design Trends 2013 Awwwards.com 2 Index/ Index Index 3 Rachel Andrew 78 Preface 4 Simon Foster 32 Interviews 7 Trent Walton 51 Aarron Walter 48 Ultranoir 60 Ben Cline 45 Unit9 86 Brad Frost 68 Veerle Peters 26 B-Reel 89 Conclusions 105 Bruce Lawson 36 Data 113 Dan Mall 8 Dave Rupert 23 Davin Wilfrid 102 Denise Jacobs 29 Epic Agency 81 F-i London 92 Hello Monday 95 Hinderling Volkart 72 Ian Hickson 64 Jeffrey Zeldman 75 Jenn Lukas 14 Karen McGrane 11 Legwork Agency 57 Luciano Foglia 42 Mike Kus 16 Nick Pettit 19 Oliver Reichenstein 53 Web Design Trends 2013 Awwwards.com 3 Preface Chapter. 1 Web Design Trends 2013 Awwwards.com 4 Commandments of needs based Why Trends firmly on their own experiences as users. The Awwwards community are a faithful audience, always interested Trends is not only a prediction for in learning and dedicating their 2013. It reflects a natural interest in time to acquiring the necessary how all aspects of web design will technical knowledge to apply in evolve over the next few years.
    [Show full text]
  • “There Was a Point in the 90S When I Felt Like a Sucker for Doing HTML and CSS” Jeffrey Zeldman
    .net interview “There was a point in the 90s when I felt like a sucker for doing HTML and CSS” Jeffrey Zeldman www.zeldman.com Jeffrey Zeldman could be called the godfather of web he explains. “I’d like to be able to create a multi- column layout and control source order without standards. Oliver Lindberg catches up with him to talk about having to do advanced mathematics or hire Eric Meyer or Dan Cederholm to figure out the CSS the current state of play, how to improve standards and how because I can’t. I’d also like to be able to embed web designers can survive the economic downturn fonts via @font-face as a law-abiding owner of a font. I’d like to be able to buy Franklin Gothic and use it for all the headlines on my website and Jeffrey Zeldman went to bed at 4am last that markup is supposed to be semantic. And not have a user able to easily pirate it, or the ITC night. Geekfest SXSW Interactive is in there’s growing interest in microformats and coming after me for violating its copyright. But full swing and yesterday his web design curiosity about HTML5. Things are happening.” right now I can’t use typefaces that designers have agency, Happy Cog, hosted the first annual SXSWi Zeldman, who co-founded the Web Standards been using for hundreds of years.” karaoke competition, aptly named OK! Happy Project (www.webstandards.org) in 1998, admits The world of standards certainly can be Cog’aoke (www.cogaoke.com).
    [Show full text]
  • Top 10 Law School Home Pages of 2010
    Georgetown University Law Center Scholarship @ GEORGETOWN LAW 2011 Top 10 Law School Home Pages of 2010 Roger Skalbeck Georgetown University Law Center, [email protected] Jason Eiseman Yale Law School, [email protected] Georgetown Public Law and Legal Theory Research Paper No. 11-01 This paper can be downloaded free of charge from: https://scholarship.law.georgetown.edu/facpub/603 http://ssrn.com/abstract=1736662 Roger V. Skalbeck, Top 10 Law School Home Pages of 2010, in GREEN BAG ALMANAC AND READER 2011 (Ross E. Davies, ed., Washington, D.C.: Green Bag Press 2011) This open-access article is brought to you by the Georgetown Law Library. Posted with permission of the author. Follow this and additional works at: https://scholarship.law.georgetown.edu/facpub Part of the Legal Education Commons, Marketing Commons, and the Technology and Innovation Commons TOP 10 LAW SCHOOL HOME PAGES OF 2010 Jason Eiseman and Roger V. Skalbeck† THE STATE OF LAW SCHOOL WEBSITES FOR 2010 This ranking report attempts to identify the best law school home pages based exclusively on objective criteria. The goal is to assess ele- ments that make websites easier to use for sighted as well as visually- impaired users. Most elements require no special design skills, sophisti- cated technology or significant expenses. Ranking results in this report represent reasonably relevant elements. Twenty elements are surveyed across three broad categories: Design Pat- ters & Metadata; Accessibility & Validation; and Marketing & Communi- cations. As was the case in 2009, there is still no objective way to account for good taste. For interpreting these results, we don’t try to decide if any whole is greater or less than the sum of its parts.
    [Show full text]