HTML5 DESIGNING RICH INTERNET APPLICATIONS MATTHEW DAVID

Transcription

1 HTML5

2

3 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

4 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: 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, HTML5 : designing rich Internet applications / Matthew David. p. cm. Includes index. ISBN HTML (Document markup language) 2. Multimedia communications. 3. Web site development. I. Title. II. Title: Visualizing the Web. QA76.76.H94D '4 dc British Library Cataloguing-in-Publication Data A catalogue record for this book is available from the British Library. ISBN: For information on all Focal Press publications visit our website at Printed in the United States of America

5 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

6

7 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

8

9 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 HTML Web 2.0 Applications and Solutions... 7 What Is Included in HTML Enhancements to Core Tag Language... 8 New Elements Are Introduced to HTML Blocking Content on the Page Modifications to Content Sections Making DOC Type Easier to Work With Organizing Code Using Blocking Elements Text-Level Semantic Additions and Changes Applying HTML5 to Make HTML Code Easier to Read Working with HTML5 Forms Controlling Data with HTML New HTML5 Attributes What Is Not Being Supported in HTML How to Gracefully Migrate Sites to Work with the New HTML5 Standard What You Have Learned ix

10 x CONTENTS Section 1 Project: Building a Web Site Using HTML5 Blocking Elements...39 Creating a Template for Your Web Site Customizing the HEADER Element Customizing the NAVIGATION Element Customizing the Main SECTION Element Customizing the FOOTER Element Creating the Site's Home Page Adding a Product Page That Uses the MARK Element Adding a News Page That Uses the TIME and ASIDE Elements Creating a Contact Us Page That Uses the New Form INPUT Attributes Summary Section 2 Picture CSS CSS as a Designer's Tools Cascading Your Designs The Format of CSS Designing Your Web Page with CSS Controlling Font Display with CSS Working with Columns in CSS Using CSS3 to Control Visual Display Dazzling Your Audience with CSS3 Animation Delivering Solutions for the Mobile Market What You Have Learned Section 2 Project: Applying CSS3 to Your Web Design...99 Linking to a Single CSS Document Embedding Fonts Default Styles for Content Applying Styles to Main Sections of Content Applying Styles to the Navigation Elements

11 CONTENTS xi Applying Styles to the Form Elements Additional Styles Advanced CSS Execution Creating a Menu with CSS Designing with CSS Summary Section 3 Rendering HTML5 Illustration The Tale of Web Image Formats Bitmap Images: Using JPEG, GIF, and PNG Images on the Web Creating SVG Graphics The Fundamentals of Creating SVG Images and Adding Them to Your Web Pages Leveraging SVG Drawing Tools Adding the CANVAS Element to Your Web Page What You Have Learned Section 3 Project: Inserting Video into Your Web Design Creating the Video Converting the Video to Ogg Format Embedding the Video into the Web Page Adding Audio to Your Web Page Summary Section 4 HTML5 Rich Media Foundation Working with VIDEO and AUDIO Tags Using HTML5 Rich Media Tags Encoding Video and Audio for Delivery over the Web Serving Video from Your Servers What You Have Learned

12 xii CONTENTS Section 4 Project: Creating SVG Logos and CANVAS Charts Creating an SVG Logo Inserting a CANVAS-Driven Dynamic Chart Summary Section 5 HTML5 JavaScript Model Understanding JavaScript JavaScript as Programming Language Developing JavaScript for HTML Integrating JavaScript with HTML Taking JavaScript to the Next Level with Ajax What You Have Learned Section 5 Project: Working with JavaScript Working with jquery Developing a Lightbox Image Management Tool Creating the Images Working with JavaScript Stitching It All Together in HTML Controlling Forms with jquery Inserting a Tabbed Interface to Build on Top of Your Existing jquery Projects Using Additional Ajax Libraries: Working with Adobe's Spry Framework Working with Additional Ajax Libraries: Using Yahoo's YUI Framework Linking to Content Hosted on Different Web Sites Summary Index

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

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