DOCSLIB.ORG

HTMI5 and CSS3 Develop with Tomorrow's Standards Today

Total Page：16

File Type：pdf, Size：1020Kb

Download full-text PDF Read full-text
HTMI5 and CSS3 Develop with Tomorrow's Standards Today HTMI5 and CSS3 Develop with Tomorrow's Standards Today Brian P. Hogan The Pragmatic Bookshelf Raleigh, North Carolina Dallas, Texas Pragmatic Bookshelf Many of the designations used by manufacturers and sellers to distinguish their prod- ucts 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 and the linking g device are trademarks 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://www.pragprog.com. The team that produced this book Includes: Editor: Susannah Pfalzer Indexing: Potomac Indexing, LLC Copy edit: Kim Wlmpsett Layout: Steve Peter Production: Janet Furlow Customer support: Ellie Callahan International: Juliet Benda Copyright © 2010 Pragmatic Programmers, LLC. All rights reserved. No part of this publication may be reproduced, stored In a retrieval system, or transmit- ted, 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-10: 1-934356-68-9 ISBN-13: 978-1-934356-68-5 Printed on acid-free paper. P1.0 printing, December 2010 Version: 2011-1-4 Contents Acknowledgments 8 Preface 10 HTML5: The Platform vs. the Specification 10 How This Works 11 What's in This Book 12 Prerequisites 12 Online Resources 13 1 An Overview of HTML5 and CSS3 14 1.1 A Platform for Web Development 14 1.2 Backward Compatibility 17 1.3 The Road to the Future Is Bumpy 17 Part I—Improving User Interfaces 23 2 New Structural Tags and Attributes 24 Tip 1 Redefining a Blog Using Semantic Markup .... 27 Tip 2 Creating Pop-up Windows with Custom Data Attri- butes 40 3 Creating User-Friendly Web Forms 45 Tip 3 Describing Data with New Input Fields 48 Tip 4 Jumping to the First Field with Autofocus 56 Tip 5 Providing Hints with Placeholder Text 58 Tip 6 In-Place Editing with contenteditable 65 CONTENTS M 6 4 Making Better User Interfaces with CSS3 72 Tip 7 Styling Tables with Pseudoclasses 74 Tip 8 Making Links Printable with : after and content. 83 Tip 9 Creating Multicolumn Layouts 87 Tip 10 Building Mobile Interfaces with Media Queries . 94 5 Improving Accessibility 97 Tip 11 Providing Navigation Hints with ARIA Roles .... 99 Tip 12 Creating an Accessible Updatable Region 104 Part II—New Sights and Sounds 110 6 Drawing on the Canvas 111 Tip 13 Drawing a Logo 112 Tip 14 Graphing Statistics with RGraph 119 7 Embedding Audio and Video 127 7.1 A Bit of Histoiy 128 7.2 Containers and Codecs 129 Tip 15 Working with Audio 133 Tip 16 Embedding Video 137 8 Eye Candy 144 Tip 17 Rounding Rough Edges 146 Tip 18 Working with Shadows, Gradients, and Transfor- mations 154 Tip 19 Using Real Fonts 165 Part III—Beyond HTML5 171 9 Working with Client-Side Data 172 Tip 20 Saving Preferences with localStorage 175 Tip 21 Storing Data in a Client-Side Relational Database 181 Tip 22 Working Offline 193 10 Playing Nicely with Other APIs 196 Tip 23 Preserving Histoiy 197 Tip 24 Talking Across Domains 200 Tip 25 Chatting with Web Sockets 207 Tip 26 Finding Yourself: Geolocation 214 Report erratum CONTENTS M 7 11 Where to Go Next 218 11.1 CSS3 Transitions 219 11.2 Web Workers 221 11.3 Native Drag-and-Drop Support 223 11.4 WebGL 229 11.5 Indexed Database API 229 11.6 Client-Side Form Validation 230 11.7 Onward! 231 A Features Quick Reference 232 A. 1 New Elements 232 A. 2 Attributes 233 A. 3 Forms 233 A. 4 Form Field Attributes 234 A. 5 Accessibility 235 A. 6 Multimedia 235 A. 7 CSS3 235 A. 8 Client-Side Storage 238 A. 9 Additional APIs 238 B jQuery Primer 240 B.l Loading jQueiy 240 B.2 jQueiy Basics 241 B.3 Methods to Modify Content 241 B.4 Creating Elements 244 B.5 Events 244 B.6 Document Ready 245 C Encoding Audio and Video 247 C.l Encoding Audio 247 C.2 Encoding Video for the Web 248 D Resources 249 D. 1 Resources on the Web 249 E Bibliography 251 Index 252 Report erratum Acknowledgments I jumped into writing this book before I had even finished my previous one, and although most of my friends, family, and probably the pub- lisher thought I was crazy for not taking a bit of a break, they have all been so supportive. This book is a result of so many wonderful and helpful people. First, I can't thank Dave Thomas and Andy Hunt enough for giving me the opportunity to work with them a second time. Their feedback throughout this process has helped shape this book quite a bit, and I'm honored to be a Pragmatic Bookshelf author. Daniel Steinberg helped me get this book started, signed, and on the right track early on, and I'm very grateful for all the support he gave and the things he taught me about how to write clearly. Whenever I write, I still hear his voice guiding me in the right direction. Daniel was unable to continue working with me on this book, but he left me in unbelievably good hands. Susannah Pfalzer has been so amazingly helpful throughout this entire process, keeping me on track, pushing me to do better, and always knowing exactly the right ques- tions to ask me at exactly the right times. Without Susannah, this book wouldn't be nearly as good. My technical reviewers for both rounds were extremely helpful in shap- ing a lot of the content and its presentation. Thank you, Aaron Godin, Ali Raza, Charles Leffingwell, Daniel Steinberg, David Kulberg, Don Henton, Doug Rhoten, Edi Schlechtinger, Jon Mischo, Jon Oebser, Kevin Gisi, Marc Harter, Mark Nichols, Noel Rappin, Paul Neibarger, Sam Elliott, Sean Canton, Srdjan Pejic, Stephen Wolff, Todd Dahl, and Erik Watson. ACKNOWLEDGMENTS M 9 Special thanks to the fine folks at ZenCoder for assisting with the video encoding for the sample files and for making it much easier for content producers to prepare video for HTML5. Thank you to my business associates Chris Johnson, Chris Warren, Mike Weber, Jon Kinney, Adam Ludwig, Gary Crabtree, Carl Hoover, Josh Anderson, Austen Ott, and Nick Lamuro for the support on this and many other projects. Special thanks to Erich Tesky for the reality checks and for being a great friend when things got frustrating. I also want to thank my dad for always expecting me to do my best and for pushing me to not give up when things looked impossible. That's made anything possible. Finally, my wonderful wife, Carissa, and my daughters, Ana and Lisa, have my eternal gratitude and love. They gave up a lot of weekends and evenings so that I could hammer away in the office writing. Every time I got stuck, Carissa's constant reassurance that I'd "figure it out" always seemed to make it better. I am extremely lucky to have them in my corner. Report erratum I™ Three months on the Web is like a year in real time. Web developers pretty much think this way, since we're always hearing about something new. A year ago HTML5 and CSS3 seemed so far off in the distance, but already companies are using these technologies in their work today, because browsers like Google Chrome, Safari, Firefox, and Opera are starting to implement pieces of the specification. HTML5 and CSS3 help lay the groundwork for the next generation of web applications. They let us build sites that are simpler to develop, easier to maintain, and more user-friendly. HTML5 has new elements for defining site structure and embedding content, which means we don't have to resort to extra markup or plug-ins. CSS3 provides ad- vanced selectors, graphical enhancements, and better font support that makes our sites more visually appealing without using font image re- placement techniques, complex JavaScript, or graphics tools. Improved accessibility support will improve Ajax applications for people with dis- abilities, and offline support lets us start building working applications that don't need an Internet connection. In this book, you're going to find out about all of the ways you can use HTML5 and CSS3 right now, even if your users don't have browsers that can support all of these features yet. Before we get started, let's take a second and talk about HTML5 and buzzwords. HTML5: The Platform vs. the Specification HTML5 is a specification that describes some new tags and markup, as well as some wonderful JavaScript APIs, but it's getting caught up in a whirlwind of hype and promises. Unfortunately, HTML5 the standard has evolved into HTML5 the platform, creating an awful lot of confusion among developers, customers, and even authors. In some cases, pieces How THIS WORKS M 11 from the CSS3 specification such as shadows, gradients, and transfor- mations are being called "HTML." Browser makers are trying to one-up each other with how much "HTML5" they support.
Load more

Recommended publications
  • Cascading Style Sheets
    CASCADING STYLE SHEETS Cascading Style Sheets Overview CSS stands for Cascading Style Sheet. HTML tags specify the graphical flow of the elements, be it text, images or flash animations, on a webpage. CSS allows us to define the appearances of those HTML tags with their content, somewhere, so that other pages, if want be, may adhere to. This brings along consistency throughout a website. The cascading effect stipulates that the style of a tag (parent) may be inherited by other tags (children) inside it. Professional websites separate styling from content. There are many reasons for this, the most obvious (to a developer) being the ability to control the appearance of many pages by changing one file. Styling information includes: fonts, backgrounds, images (that recur on every page), position and dimensions of elements on the page. Your HTML file will now be left with: header information; a series of elements; the text of your website. Because you are creating a Joomla! template, you will actually have: some header information, PHP code to request the rest of the header information, a series of elements, PHP code to request each module position, and PHP code to request the main content. Style information is coded in CSS and usually stored in files with the suffix .css. A webpage contains a link to the associated .css file so a browser can find the appropriate style information to apply to the page. CSS can also be placed inside a HTML file between <style type="text/css"></style> tags. This is, however, discouraged as it is mixing style and content elements which can make future changes more difficult.
    [Show full text]
  • Cascading Style Sheets
    CASCADING STYLE SHEETS Cascading Style Sheets Overview CSS stands for Cascading Style Sheet. HTML tags specify the graphical flow of the elements, be it text, images or flash animations, on a webpage. CSS allows us to define the appearances of those HTML tags with their content, somewhere, so that other pages, if want be, may adhere to. This brings along consistency throughout a website. The cascading effect stipulates that the style of a tag (parent) may be inherited by other tags (children) inside it. Professional websites separate styling from content. There are many reasons for this, the most obvious (to a developer) being the ability to control the appearance of many pages by changing one file. Styling information includes: fonts, backgrounds, images (that recur on every page), position and dimensions of elements on the page. Your HTML file will now be left with: header information; a series of elements; the text of your website. Because you are creating a Joomla! template, you will actually have: some header information, PHP code to request the rest of the header information, a series of elements, PHP code to request each module position, and PHP code to request the main content. Style information is coded in CSS and usually stored in files with the suffix .css. A webpage contains a link to the associated .css file so a browser can find the appropriate style information to apply to the page. CSS can also be placed inside a HTML file between <style type="text/css"></style> tags. This is, however, discouraged as it is mixing style and content elements which can make future changes more difficult.
    [Show full text]
  • Pro HTML5 and CSS3 Design Patterns Pro HTML5 and CSS3 Design Patterns Features 350 Patterns That You Can Easily Use to Style Web Pages with CSS3 and HTML5
    BOOKS FOR PROFESSIONALS BY PROFESSIONALS® Bowers Synodinos Sumner RELATED Pro HTML5 and CSS3 Design Patterns Pro HTML5 and CSS3 Design Patterns features 350 patterns that you can easily use to style web pages with CSS3 and HTML5. Each pattern can be combined with others to create an unlimited number of design ideas to help your website or next project look better and work smarter. You’ll no longer have to use hacks, tricks, endless testing, and constant tweaking in multiple browsers to get some- thing to work. This book systematically covers every usable feature of CSS3 and combines them with HTML5 to create reusable patterns. You’ll learn how to create fluid layouts, drop caps, callouts, quotes, and alerts as well as new features such as rounded corners and form validation. Pro HTML5 and CSS3 Design Patterns is readable from cover to cover, with topics building carefully upon previous topics. Individual chapters and design pat- terns are also self-contained, so you can read them one by one in any sequence to master a specific topic or technique. This book unleashes your productivity and creativity in web design and devel- opment. Simply by reusing and combining the modular design patterns featured within Pro HTML5 and CSS3 Design Patterns, you’ll easily be able to create suc- cessful designs every time, no matter your level of experience, whether intermedi- ate or advanced. US $44.99 Shelve in Web Design/HTML User level: Intermediate–Advanced SOURCE CODE ONLINE www.apress.com www.it-ebooks.info For your convenience Apress has placed some of the front matter material after the index.
    [Show full text]
  • Programming in HTML5 with Javascript and CSS3 Ebook
    spine = 1.28” Programming in HTML5 with JavaScript and CSS3 and CSS3 JavaScript in HTML5 with Programming Designed to help enterprise administrators develop real-world, About You job-role-specific skills—this Training Guide focuses on deploying This Training Guide will be most useful and managing core infrastructure services in Windows Server 2012. to IT professionals who have at least Programming Build hands-on expertise through a series of lessons, exercises, three years of experience administering and suggested practices—and help maximize your performance previous versions of Windows Server in midsize to large environments. on the job. About the Author This Microsoft Training Guide: Mitch Tulloch is a widely recognized in HTML5 with • Provides in-depth, hands-on training you take at your own pace expert on Windows administration and has been awarded Microsoft® MVP • Focuses on job-role-specific expertise for deploying and status for his contributions supporting managing Windows Server 2012 core services those who deploy and use Microsoft • Creates a foundation of skills which, along with on-the-job platforms, products, and solutions. He experience, can be measured by Microsoft Certification exams is the author of Introducing Windows JavaScript and such as 70-410 Server 2012 and the upcoming Windows Server 2012 Virtualization Inside Out. Sharpen your skills. Increase your expertise. • Plan a migration to Windows Server 2012 About the Practices CSS3 • Deploy servers and domain controllers For most practices, we recommend using a Hyper-V virtualized • Administer Active Directory® and enable advanced features environment. Some practices will • Ensure DHCP availability and implement DNSSEC require physical servers.
    [Show full text]