HTML5 and CSS3 Level Up with Today's Web Technologies

303 Pages·2013·9.535 MB·English

by  Brian P. Hogan

Download from Wow! eBook <www.wowebook.com>
Download from Wow! eBook <www.wowebook.com>
Early praise for HTML5 and CSS3, Second Edition
In an industry where staying employable means staying current, this book is an
essential read and an efficient reference for web designers and developers. This
book does not belong on your bookshelf. It belongs on your desk.
➤ Matt Margolis
Manager, application development, Getty Images
The whole book feels like a well-stocked toolbox. It’s accessible, well-presented,
and packed with information. Brian is a confident expert and a masterful educator.
➤ Tibor Simic
Developer, Inge-mark
I’ve been making websites for more than ten years, and I still learned a few tricks
from reading this book. If you haven’t yet taken advantage of the new features
available in HTML5, now is the time. Brian’s book will explain what you can and
should use, and when.
➤ Stephen Orr
Lead developer, Made Media
Download from Wow! eBook <www.wowebook.com>
HTML5 and CSS3, Second Edition
Level Up with Today’s Web Technologies
Brian P. Hogan
The Pragmatic Bookshelf
Dallas, Texas • Raleigh, North Carolina
Download from Wow! eBook <www.wowebook.com>
Many of the designations used by manufacturers and sellers to distinguish their products
are claimed as trademarks. Where those designations appear in this book, and The Pragmatic
Programmers, LLC was aware of a trademark claim, the designations have been printed in
initial capital letters or in all capitals. The Pragmatic Starter Kit, The Pragmatic Programmer,
Pragmatic Programming, Pragmatic Bookshelf, PragProg and the linking g device are trade-
marks of The Pragmatic Programmers, LLC.
Every precaution was taken in the preparation of this book. However, the publisher assumes
no responsibility for errors or omissions, or for damages that may result from the use of
information (including program listings) contained herein.
Our Pragmatic courses, workshops, and other products can help you and your team create
better software and have more fun. For more information, as well as the latest Pragmatic
titles, please visit us at http://pragprog.com.
The team that produced this book includes:
Susannah Davidson Pfalzer (editor)
Potomac Indexing, LLC (indexer)
Candace Cunningham (copyeditor)
David J Kelly (typesetter)
Janet Furlow (producer)
Juliet Benda (rights)
Ellie Callahan (support)
Copyright © 2013 The Pragmatic Programmers, LLC.
All rights reserved.
No part of this publication may be reproduced, stored in a retrieval system, or
transmitted, in any form, or by any means, electronic, mechanical, photocopying,
recording, or otherwise, without the prior consent of the publisher.
Printed in the United States of America.
ISBN-13: 978-1-937785-59-8
Encoded using the finest acid-free high-entropy binary digits.
Book version: P1.0—October 2013
Download from Wow! eBook <www.wowebook.com>
Contents
Acknowledgments . . . . . . . . . . . ix
Preface . . . . . . . . . . . . . . xi
1. An Overview of HTML5 and CSS3 . . . . . . . . 1
1.1 A Stronger Platform for Web Development 1
1.2 The Road to the Future Is Bumpy 5
Part I — Improving User Interfaces
2. New Structural Tags and Attributes . . . . . . . 13
Tip 1. Redefining a Blog Using Semantic Markup 15
Tip 2. Showing Progress toward a Goal with the <meter>
Element 26
Tip 3. Creating Pop-Up Windows with Custom Data
Attributes 30
Tip 4. Defining an FAQ with a Description List 34
3. Creating User-Friendly Web Forms . . . . . . . 37
Tip 5. Describing Data with New Input Fields 39
Tip 6. Jumping to the First Field with Autofocus 49
Tip 7. Providing Hints with Placeholder Text 50
Tip 8. Validating User Input without JavaScript 54
Tip 9. In-Place Editing with contenteditable 59
4. Styling Content and Interfaces . . . . . . . . 67
Tip 10. Styling Tables with Pseudoclasses 69
Tip 11. Making Links Printable with :after and content 78
Tip 12. Building Mobile Interfaces with Media Queries 81
Tip 13. Creating Multicolumn Layouts 84
Download from Wow! eBook <www.wowebook.com>
Contents • vi
5. Making Accessible Interfaces . . . . . . . . 91
Tip 14. Providing Navigation Hints with ARIA Roles 93
Tip 15. Creating an Accessible Updatable Region 98
Tip 16. Improving Table Accessibility 104
Part II — New Sights and Sounds
6. Drawing in the Browser. . . . . . . . . . 111
Tip 17. Drawing a Logo on the Canvas 112
Tip 18. Graphing Statistics with RGraph 120
Tip 19. Creating Vector Graphics with SVG 126
7. Embedding Audio and Video . . . . . . . . 131
Tip 20. Working with Audio 137
Tip 21. Embedding Video 141
Tip 22. Making Videos Accessible 146
8. Eye Candy . . . . . . . . . . . . . 151
Tip 23. Rounding Rough Edges 153
Tip 24. Working with Shadows, Gradients, and
Transformations 157
Tip 25. Working with Fonts 164
Tip 26. Making Things Move with Transitions and
Animations 169
Part III — Beyond Markup
9. Saving Data on the Client . . . . . . . . . 183
Tip 27. Saving Preferences with Web Storage 185
Tip 28. Storing Data in a Client-Side Database Using
IndexedDB 190
Tip 29. Working Offline 203
10. Creating Interactive Web Applications . . . . . . 207
Tip 30. Preserving History 209
Tip 31. Talking across Domains 213
Tip 32. Chatting with Web Sockets 219
Tip 33. Finding Yourself: Geolocation 227
Tip 34. Getting It All Sorted Out with Drag and Drop 231
Download from Wow! eBook <www.wowebook.com>
Contents • vii
11. Where to Go Next . . . . . . . . . . . 239
11.1 Defining Layouts with the Flexible Box Model 240
11.2 Cross-Origin Resource Sharing 242
11.3 Web Workers 243
11.4 Server-Sent Events 247
11.5 Filter Effects 250
11.6 WebGL 252
11.7 Onward! 252
A1. Features Quick Reference . . . . . . . . . 253
A1.1 New Elements 253
A1.2 Attributes 254
A1.3 Forms 254
A1.4 Form-Field Attributes 255
A1.5 Accessibility 255
A1.6 Multimedia 256
A1.7 CSS3 257
A1.8 Client-Side Storage 259
A1.9 Additional APIs 260
A2. jQuery Primer . . . . . . . . . . . . 263
A2.1 Loading jQuery 263
A2.2 jQuery Basics 264
A2.3 Methods to Modify Content 264
A2.4 Creating and Removing Elements 267
A2.5 Events 267
A2.6 Document Ready 269
A2.7 Use jQuery Wisely 270
A3. Encoding Audio and Video for the Web . . . . . . 273
A3.1 Encoding Audio 273
A3.2 Encoding Video 274
A4. Resources . . . . . . . . . . . . . 275
Bibliography . . . . . . . . . . . . 277
Index . . . . . . . . . . . . . . 279
Download from Wow! eBook <www.wowebook.com>
Acknowledgments
Second editions are supposed to be quick—just a chance to correct mistakes
or make improvements and updates to the first edition. This, though, was
almost like writing a new book, and there are so many people I need to thank
who made my work much easier.
First, I want to thank you for reading this book. I hope it helps you tackle
some cool and interesting projects of your own when you’re done.
Next, the wonderful gang at The Pragmatic Bookshelf deserves not only my
gratitude, but also a lot of the credit for this book. Susannah Pfalzer once
again ensured that one of my books makes sense. She’s an awesome develop-
ment editor and I’m thankful for her time and attention to detail, especially
on a book like this, where thousands of little details need attention. Dave
Thomas and Andy Hunt had great feedback, and I’m grateful for their contin-
ued support. Thank you, all.
I was fortunate to have an absolutely amazing group of technical reviewers
on this book. The comments and feedback were excellent, exhaustive, and
full of great suggestions for improvement. Thank you to Cheyenne Clark, Joel
Clermont, Jon Cooley, Chad Dumler-Montplaisir, Jeff Holland, Michael Hunter,
Karoline Klever, Stephen Orr, Dan Reedy, Loren Sands-Ramshaw, Brian
Schau, Matthew John Sias, Tibor Simic, Charley Stran, and Colin Yates, for
all of your help. Not only were your reviews thorough, but they also offered
great advice and insight, and impacted the final version of this book
considerably.
Thanks to Jessica Janiuk for providing the screenshots for Android devices.
Thanks to my business associates Chris Warren, Chris Johnson, Mike Weber,
Nick LaMuro, Austen Ott, Erich Tesky, Kevin Gisi, and Jon Kinney for their
ongoing support.
Download from Wow! eBook <www.wowebook.com> report erratum • discuss
Acknowledgments • x
Finally, my wife Carissa works really hard to make sure that I can work
really hard. She’s a silent partner in this and I’m eternally grateful for her
love and support. Thank you, Carissa, for everything you do.
Download from Wow! eBook <www.wowebook.com> report erratum • discuss