The Modern Web : Multi-Device Web Development with HTML5, CSS3, and JavaScript

Today's web technologies are evolving at near-light speed, bringing the promise of a seamless Internet ever closer to reality. When users can browse the Web on a three-inch phone screen as easily as on a fifty-inch HDTV, what's a developer to do? Peter Gasston's The Modern Web will guide you through the latest and most important tools of device-agnostic web development, including HTML5, CSS3, and JavaScript. His plain-English explanations and practical examples emphasize the techniques, principles, and practices that you'll need to easily transcend individual browser quirks and stay relevant as these technologies are updated. Learn how to: Plan your content so that it displays fluidly across multiple devices; Design websites to interact with devices using the most up-to-date APIs, including Geolocation, Orientation, and Web Storage; Incorporate cross-platform audio and video without using troublesome plug-ins; Make images and graphics scalable on high-resolution devices with SVG; Use powerful HTML5 elements to design better forms. Turn outdated websites into flexible, user-friendly ones that take full advantage of the unique capabilities of any device or browser. With the help of The Modern Web, you'll be ready to navigate the front lines of device-independent development. - Publisher. Read more... Abstract: Today's web technologies are evolving at near-light speed, bringing the promise of a seamless Internet ever closer to reality. When users can browse the Web on a three-inch phone screen as easily as on a fifty-inch HDTV, what's a developer to do? Peter Gasston's The Modern Web will guide you through the latest and most important tools of device-agnostic web development, including HTML5, CSS3, and JavaScript. His plain-English explanations and practical examples emphasize the techniques, principles, and practices that you'll need to easily transcend individual browser quirks and stay relevant as these technologies are updated. Learn how to: Plan your content so that it displays fluidly across multiple devices; Design websites to interact with devices using the most up-to-date APIs, including Geolocation, Orientation, and Web Storage; Incorporate cross-platform audio and video without using troublesome plug-ins; Make images and graphics scalable on high-resolution devices with SVG; Use powerful HTML5 elements to design better forms. Turn outdated websites into flexible, user-friendly ones that take full advantage of the unique capabilities of any device or browser. With the help of The Modern Web, you'll be ready to navigate the front lines of device-independent development. - Publisher About the Author 7 About the Technical Reviewer 7 Acknowledgments 16 Introduction 18 The Device Landscape 19 Desktop/Laptop 19 Mobile 20 Tablet 22 TV 22 The Others 23 The In Betweeners 23 The Multi-screen World 24 Context: What We Don’t Know 24 Some Context Stereotypes 25 “Fast” Is the Only Context That Matters 25 What You’ll Learn 26 Further Reading 27 Chapter 1: The Web Platform 28 A Quick Note About Terminology 29 Who You Are and What You Need to Know 29 Getting Our Terms Straight 30 The Real HTML5 30 The HTML5 Template 31 New Best Practices 32 CSS 3 and Beyond 33 Vendor-Specific Prefixes 34 CSS Frameworks and Preprocessors 35 Browser Support 35 Test and Test and Test Some More 36 Summary 37 Further Reading 37 Chapter 2: Structure and Semantics 38 New Elements in HTML5 39 What’s the Point? 40 The Downside of HTML5 Sectioning Elements 41 WAI-ARIA 43 The Importance of Semantic Markup 45 Microformats 46 RDFa 47 Microdata 48 The Microdata API 49 Microdata, Microformats, and RDFa 49 Schema.org 50 Rich Snippets 51 Data Attributes 52 The Data Attributes API 52 jQuery and Data Attributes 53 Data Attributes in the Wild 54 Web Components: The Future of Markup? 54 Summary 54 Further Reading 55 Chapter 3: Device-Responsive CSS 56 Media Queries 57 Media Features Based on Dimensions 58 Combining and Negating Media Queries 61 A Quick Digression: All About Pixels 62 Screen Resolution Media Queries 63 Device Adaptation 65 Input Mechanism Media Features 67 Further Media Features 68 Media Queries in JavaScript 68 Adaptive vs. Responsive Web Design 70 The box-sizing Property 71 Dynamic Calculations on Length Values 72 Viewport-Relative Length Units 73 Root-Relative Units 73 Mobile First and Content Breakpoints 74 Responsive Design and Replaced Objects 76 The Image Problem 79 The HTML5 Responsive Images Solution 79 Summary 80 Further Reading 80 Chapter 4: New Approaches to CSS Layouts 82 Multi-columns 83 Gaps and Rules 84 Spans and Breaks 85 Flexbox 87 Declaring the Flexbox Model 87 Changing the Content Order 88 Alignment Inside the Container 90 Adding Some Flexibility 92 Wrap and Flow 93 Grid Layout 95 Declaring and Defining the Grid 96 Repeating Grid Lines 98 Placing Items on the Grid 98 Alignment and Stacking 100 The September 2012 Grid Layout Syntax 101 On the Grid Layout Terminology 102 Grid Template 102 The Further Future 103 Summary 103 Further Reading 104 Chapter 5: Modern JavaScript 106 New in JavaScript 107 The async and defer Attributes 107 The addEventListener Method 108 The event Object 109 Removing Event Listeners 110 The DOMContentLoaded Event 111 Input Events 111 Touch Events 112 Pointer Events 112 CSS Selectors in JavaScript 113 The getElementsByClassName() Method 114 Interacting with Classes 114 JavaScript Libraries 115 jQuery 115 YepNope 117 Modernizr 118 Mustache 119 Polyfills and Shims 121 Testing and Debugging 122 Summary 123 Further Reading 123 Chapter 6: Device APIs 124 Geolocation 125 Orientation 127 Fullscreen 128 Vibration 130 Battery Status 131 Network Information 132 Camera and Microphone 133 Web Storage 134 Drag and Drop 136 Interacting with Files 138 Mozilla’s Firefox OS and WebAPIs 140 PhoneGap and Native Wrappers 140 Summary 141 Further Reading 141 Chapter 7: Images and Graphics 142 Comparing Vectors and Bitmaps 143 Scalable Vector Graphics 143 Anatomy of an SVG Image 144 Linked SVG Files 145 SVG Sprites 146 SVG Sprites with Fragments 147 Embedded SVG 147 SVG Filters 149 The Convergence of SVG and CSS 151 A Drawback of SVG 152 The canvas Element 152 Image Manipulation 154 WebGL 155 When to Choose SVG or Canvas 155 Summary 156 Further Reading 156 Chapter 8: New Forms 158 New Input Types 159 New Attributes 161 autofocus 161 placeholder 161 autocomplete 162 spellcheck 162 multiple 162 form 163 Datalists 163 On-Screen Controls and Widgets 164 Numbers 164 Dates 165 Color 167 Displaying Information to the User 168 progress 168 meter 169 output 170 Client-side Form Validation 171 The Constraint Validation API 173 Forms and CSS 176 Summary 177 Further Reading 177 Chapter 9: Multimedia 178 The Media Elements 179 Extra Attributes for the video Element 180 Multiple Source Files 181 Fallbacks 182 Subtitles and Captions 184 Encoding 185 Media Fragments 185 The Media API 186 Network and Ready States 189 Extra Properties for Audio and Video 190 Media Events 190 Advanced Media Interaction 191 Web Audio API 191 WebRTC 191 Summary 192 Further Reading 192 Chapter 10: Web Apps 194 Web Apps 195 Hosted vs. Packaged Apps 195 Hosted Web Apps 196 Packaged Web Apps 196 Manifest Files 196 The Chrome Web Store 196 The Firefox Marketplace 197 W3C Widgets 198 Hybrid Apps 198 PhoneGap 199 Granting Permissions 199 The PhoneGap API 199 PhoneGap Events 200 Titanium 201 TV Apps 201 Webinos 202 Application Cache 202 Contents of the AppCache File 203 The Caching Sequence 203 The AppCache API 204 Summary 205 Further Reading 205 Chapter 11: The Future 208 Web Components 209 Templates 209 Decorators 211 Scoped Styles 212 Scoped Styles and Templates 213 Custom Elements 214 The Shadow DOM 215 Putting It All Together 217 The Future of CSS 217 Regions 217 Exclusions 219 Exclusions and Grids 221 Shaped Exclusions 222 Even Further Future Layouts 222 Box Alignment 223 Line Grid 223 Paged Media 223 Feature Queries 224 Cascading Variables 225 Summary 226 Further Reading 226 Appendix A: Browser Support as of March 2013 228 The Browsers in Question 229 Enabling Experimental Features 229 Chapter 1: The Web Platform 230 Chapter 2: Structure and Semantics 230 Chapter 3: Device-Responsive CSS 230 Chapter 4: New Approaches to CSS Layouts 231 Chapter 5: Modern JavaScript 231 Chapter 6: Device APIs 232 Chapter 7: Images and Graphics 232 Chapter 8: New Forms 232 Chapter 9: Multimedia 233 Chapter 10: Web Apps 233 Chapter 11: The Future 233 Appendix B: Further Reading 234 Introduction 234 Chapter 1: The Web Platform 235 Chapter 2: Structure and Semantics 236 Chapter 3: Device-Responsive CSS 237 Chapter 4: New Approaches to CSS Layouts 238 Chapter 5: Modern JavaScript 238 Chapter 6: Device APIs 239 Chapter 7: Images and Graphics 240 Chapter 8: New Forms 240 Chapter 9: Multimedia 241 Chapter 10: Web Apps 242 Chapter 11: The Future 242 Index 244