HTML5 & CSS3 For The Real World
Louis Lazaris, Estelle Weyl, Alexis Goldstein
Language: English
Pages: 377
ISBN: 0980846900
Format: PDF / Kindle (mobi) / ePub
HTML5 & CSS3 for the Real World will show you how to create dynamic websites using these new technologies. No fluff or hype here – Only fun, effective techniques you can start using today.
This easy-to-follow guide covers everything you need to know to get started today. You’ll master the new semantic markup available in HTML5, as well as how to use CSS3 without sacrificing clean markup or resorting to complex workarounds.
This book will teach you how to:
* understand the new semantic markup available in HTML5
* set type that truly supports your message with @font-face
* build intelligent, self-validating web forms your users will love!
* construct modern web apps that shine in a mobile environment
* create data-rich, efficient graphics on the fly with SVG and canvas
* use shiny-new APIs to add geolocation and offline functionality
This easy-to-follow guide is illustrated with lots of examples and there's also a cool demo site to work with!
Smashing jQuery (Smashing Magazine Book Series)
Professional Website Performance: Optimizing the Front-End and Back-End
This is why most scripts should be placed at the very bottom of the page, so that they’ll only be parsed after the rest of the page has loaded. In some cases (like the HTML5 shiv) the script may need to be placed in the head of your document, because you want it to take effect before the browser starts rendering the page. HTML5 FAQ After this quick introduction to HTML5 markup, you probably have a bunch of questions swirling inside your head. Here are some answers to a few of the
the video to find a specific part. This means there will be no way to go back to the start of the video aside from refreshing the page. Other than that, the controls will function adequately—they’ll allow the user to play, pause, mute, or unmute the video. Here’s the HTML we’ll be using to represent the different parts of the video controls: index.html (excerpt)
rgba(0,0,0,0)), color-stop(83%, rgba(0,0,0,0)), color-stop(92%, rgba(0,0,0,0.16)), color-stop(98%, rgba(0,0,0,0))); background-image: -webkit-linear-gradient( 270deg, rgba(0,0,0,0.4) 0, rgba(0,0,0,0) 37%, rgba(0,0,0,0) 83%, rgba(0,0,0,0.06) 92%, rgba(0,0,0,0) 98% ); background-image: linear-gradient( 270deg, rgba(0,0,0,0.4) 0, rgba(0,0,0,0) 37%, rgba(0,0,0,0) 83%, rgba(0,0,0,0.06) 92%, rgba(0,0,0,0) 98% ); } We now have our gradient looking just right in Mozilla, Opera, and WebKit-based
Works: the HTML5 Application Cache Offline Web Applications work by leveraging what is known as the application cache. The application cache can store your entire website offline: all the JavaScript, HTML, and CSS, as well as all your images and resources. This sounds great, but you may be wondering, what happens when there’s a change? That’s the beauty of the application cache: your application is automatically updated every time the user visits your page while online. If even one byte of
appropriate. It’s also worth noting that neither technology is appropriate for static images—at least not while browser support remains a stumbling block. In this chapter, we’ve made use of canvas and SVG for a number of such static examples, which is fine for the purpose of demonstrating what they can do. But in the real world, they’re only really appropriate for cases where user interaction defines what’s going to be drawn. Drag and Drop In order to add one final dynamic effect to