HTML5
HTML5 DESIGNING RICH INTERNET APPLICATIONS MATTHEW DAVID AMSTERDAM BOSTON HEIDELBERG LONDON NEW YORK OXFORD PARIS SAN DIEGO SAN FRANCISCO SINGAPORE SYDNEY TOKYO Focal Press is an imprint of Elsevier
Focal Press is an imprint of Elsevier 30 Corporate Drive, Suite 400, Burlington, MA 01803, USA The Boulevard, Langford Lane, Kidlington, Oxford, OX5 1GB, UK 2010 Elsevier, Inc. All rights reserved. No part of this publication may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopying, recording, or any information storage and retrieval system, without permission in writing from the Publisher. Details on how to seek permission, further information about the Publisher's permissions policies and our arrangements with organizations such as the Copyright Clearance Center and the Copyright Licensing Agency, can be found at our website: www.elsevier.com/permissions. This book and the individual contributions contained in it are protected under copyright by the Publisher (other than as may be noted herein). Notices Knowledge and best practice in this field are constantly changing. As new research and experience broaden our understanding, changes in research methods, professional practices, or medical treatment may become necessary. Practitioners and researchers must always rely on their own experience and knowledge in evaluating and using any information, methods, compounds, or experiments described herein. In using such information or methods they should be mindful of their own safety and the safety of others, including parties for whom they have a professional responsibility. To the fullest extent of the law, neither the Publisher nor the authors, contributors, or editors, assume any liability for any injury and/or damage to persons or property as a matter of products liability, negligence or otherwise, or from any use or operation of any methods, products, instructions, or ideas contained in the material herein. Library of Congress Cataloging-in-Publication Data David, Matthew, 1971- HTML5 : designing rich Internet applications / Matthew David. p. cm. Includes index. ISBN 978-0-240-81328-8 1. HTML (Document markup language) 2. Multimedia communications. 3. Web site development. I. Title. II. Title: Visualizing the Web. QA76.76.H94D4184 2010 006.7'4 dc22 2010018716 British Library Cataloguing-in-Publication Data A catalogue record for this book is available from the British Library. ISBN: 978-0-240-81328-8 For information on all Focal Press publications visit our website at www.elsevierdirect.com 10 11 12 13 14 5 4 3 2 1 Printed in the United States of America
Praise for the Book HTML5 isn't one thing, but many different improvements rolled under one name. Knowing where to start can be tricky. Fortunately, this book presents the major concepts in a logical sequence. Topics flow easily from explanations to bite-sized projects, flavored with the author's practical advice. It's a handy introduction to HTML5, and I'm looking forward to the paper copy! Sam Wan, UI engineer With the arrival of HTML5 and CSS3, those working with the web face a host of new challenges. HTML5: Designing Rich Internet Applications puts solutions at your fingertips; the content is concise and easily referenced, and the accompanying projects help convert learning to real-world action. Toby Pestridge, Toby James Creative Matthew David proves that developing in HTML5 right now can be exceptionally rewarding with this the first major update to the language in over ten years. Matthew has provided us a great frame of reference of what's to come and what we can start using now! Conrad Fuhrman, partner/lead developer, ThreeSphere LLC HTML5 is quickly gaining technological influence as more devices and browsers support it every day. Matthew David introduces you to key concept, and dives in for a comprehensive look to prepare you for tomorrow's internet. Joel Martinez, Codecub.net Matthew David has continued his mastery of presenting new and seemingly complex topics in a practical, easy-to-understand manner. This book will not only bring programmers and designers into the next generation of web development, but also redefine their concept of what can be done in a browser presenting limitless opportunities for years to come. Ryan Moore, author of Foundation ASP.NET for Flash
Dedication No one person writes a book. For this book to be published I need to thank a lot of people. First, I have to thank Focal Press and, in particular, Paul Temme who took a risk on developing one of the first HTML5 books and working with me to develop the Visualizing series. I also have to thank Anais Wheeler for always ensuring I hit my deadlines and checking that I had sent her all the files needed. I also want to thank my friends and colleagues at Jewelers Mutual who listened to me talk about CSS3, HTML5, and which browser supported what technology. I will take the glassy-eye looks they gave me as deep, attentive interest. Finally, I need to thank my beloved family who put up with me disappearing for hours at a time to write my next great book. I love you guys. I could not have completed this project without you. vii
CONTENTS Preface... xi Section 1 HTML5 Tag Structure...3 Where HTML Code Can Be Found... 3 The Evolution of the Web... 4 The Rocky Road from HTML4 to HTML5... 6 Web 2.0 Applications and Solutions... 7 What Is Included in HTML5... 8 Enhancements to Core Tag Language... 8 New Elements Are Introduced to HTML5... 9 Blocking Content on the Page... 10 Modifications to Content Sections... 12 Making DOC Type Easier to Work With... 13 Organizing Code Using Blocking Elements... 13 Text-Level Semantic Additions and Changes... 21 Applying HTML5 to Make HTML Code Easier to Read... 23 Working with HTML5 Forms... 27 Controlling Data with HTML5... 31 New HTML5 Attributes... 35 What Is Not Being Supported in HTML5... 35 How to Gracefully Migrate Sites to Work with the New HTML5 Standard... 37 What You Have Learned... 38 ix
x CONTENTS Section 1 Project: Building a Web Site Using HTML5 Blocking Elements...39 Creating a Template for Your Web Site... 39 Customizing the HEADER Element... 41 Customizing the NAVIGATION Element... 42 Customizing the Main SECTION Element... 43 Customizing the FOOTER Element... 44 Creating the Site's Home Page... 45 Adding a Product Page That Uses the MARK Element... 47 Adding a News Page That Uses the TIME and ASIDE Elements... 48 Creating a Contact Us Page That Uses the New Form INPUT Attributes... 50 Summary... 57 Section 2 Picture CSS3...61 CSS as a Designer's Tools... 61 Cascading Your Designs... 63 The Format of CSS... 67 Designing Your Web Page with CSS... 74 Controlling Font Display with CSS... 74 Working with Columns in CSS3... 83 Using CSS3 to Control Visual Display... 85 Dazzling Your Audience with CSS3 Animation... 93 Delivering Solutions for the Mobile Market... 96 What You Have Learned... 98 Section 2 Project: Applying CSS3 to Your Web Design...99 Linking to a Single CSS Document... 100 Embedding Fonts... 101 Default Styles for Content... 102 Applying Styles to Main Sections of Content... 105 Applying Styles to the Navigation Elements... 108
CONTENTS xi Applying Styles to the Form Elements... 109 Additional Styles... 111 Advanced CSS Execution... 112 Creating a Menu with CSS... 114 Designing with CSS3... 120 Summary... 127 Section 3 Rendering HTML5 Illustration...131 The Tale of Web Image Formats... 131 Bitmap Images: Using JPEG, GIF, and PNG Images on the Web... 132 Creating SVG Graphics... 133 The Fundamentals of Creating SVG Images and Adding Them to Your Web Pages... 134 Leveraging SVG Drawing Tools... 150 Adding the CANVAS Element to Your Web Page... 151 What You Have Learned... 162 Section 3 Project: Inserting Video into Your Web Design...163 Creating the Video... 163 Converting the Video to Ogg Format... 164 Embedding the Video into the Web Page... 168 Adding Audio to Your Web Page... 173 Summary... 174 Section 4 HTML5 Rich Media Foundation...177 Working with VIDEO and AUDIO Tags... 177 Using HTML5 Rich Media Tags... 180 Encoding Video and Audio for Delivery over the Web... 189 Serving Video from Your Servers... 196 What You Have Learned... 196
xii CONTENTS Section 4 Project: Creating SVG Logos and CANVAS Charts...199 Creating an SVG Logo... 199 Inserting a CANVAS-Driven Dynamic Chart... 203 Summary... 206 Section 5 HTML5 JavaScript Model...209 Understanding JavaScript... 210 JavaScript as Programming Language... 212 Developing JavaScript for HTML5... 222 Integrating JavaScript with HTML5... 230 Taking JavaScript to the Next Level with Ajax... 233 What You Have Learned... 240 Section 5 Project: Working with JavaScript...241 Working with jquery... 241 Developing a Lightbox Image Management Tool... 242 Creating the Images... 242 Working with JavaScript... 244 Stitching It All Together in HTML... 251 Controlling Forms with jquery... 252 Inserting a Tabbed Interface to Build on Top of Your Existing jquery Projects... 261 Using Additional Ajax Libraries: Working with Adobe's Spry Framework... 264 Working with Additional Ajax Libraries: Using Yahoo's YUI Framework... 269 Linking to Content Hosted on Different Web Sites... 272 Summary... 273 Index... 275
PREFACE Incredibly, it has been more than 20 years since the first release of HTML, the HyperText Markup Language. In the early days of web development, HTML underwent a series of rapid evolutions from simple text to including images and adding CSS to format text. Then in 1997 the introduction of HTML4 hit the market and everything came to a stop. Sure, we saw the release of XHTML, but there was very little advancement in HTML as a language. Why the hold up? The reason is based on three major factors: computers were limited in what they could process, the connection to the Web was limited to the speed of a user s dial-up modem, and the Web was busily being molded into a new medium. However, the Web has evolved. Today, computers are blinding fast with many of us running SmartPhones faster than desktop behemoths of just 6 years ago. Connection to the Web is now measured in megabytes per second, and the Web is now a standard we all rely on. It has become increasingly apparent that HTML4 just does not cut it for modern Web users. Bottom line: We need a new standard. A group called the Web Standards Project began developing HTML5 in 2007. The goal of the project is ambitious: Develop an HTML standard that is capable of running full applications in a web browser. HTML5 introduces a broad set of new technologies, including: New HTML elements Geolocation APIs Drag-and-drop APIs Local data APIs Forms 2.0 Video and audio support SVG and CANVAS graphics CSS3 Two- and three-dimensional animation JavaScript 2.0 It seemed, for a while, that the new HTML5 standard would not come to pass. Nay-sayers scoffed that the standard was good in print, but would never make it to the Web. Then a funny thing happened: FireFox began adopting elements of HTML and was quickly followed by Apple s Safari web browser. Three final actions drove home the importance of HTML5: xiii
xiv PREFACE Google released the web browser Chrome with HTML5 as a key feature. The World Wide Web Consortium Group (W3C) halted work on XHTML 2.0 and adopted HTML5 as the new Web standard. The Web went mobile. It can be argued that the implementation of feature-rich web browsers on iphones, Android phones, and WebOS phones has clinched the deal for HTML5. Today, mobile web developers can build web sites that surpass desktop equivalents. The missing part in all of this technology was Microsoft. Uncharacteristically, Microsoft was silent about their support for HTML5. Many saw Internet Explorer dying slowly, to be surpassed by newer, more nimble browser technologies. This changed in spring 2010 when Microsoft released a developer copy of Internet Explorer 9 and formerly joined the HTML5 working group. All major web browsers are now adopting HTML5. The focus of this book is to introduce you to HTML5. You will be taken behind the scenes of this new technology and shown how you can integrate HTML5 into your web sites today. The five sections in the book include an article and a project, which build on to each other to deliver a final, 100% HTML5-compliant web site. HTML5 is not a flash-in-the-pan technology. It is a firmly supported standard that will be used to build web applications for the next 10 years. Now is the time to start learning how you can use this new standard to wow your clients.