Watch_me

HTML5 and CSS3 are more than just buzzwords—they’re the foundation for today’s web applications. This book gets you up to speed on the HTML5 elements and CSS3 features you can use right now in your current projects, with backwards compatible solutions that ensure that you don’t leave users of older browsers behind. This new edition covers even more new features, including CSS animations, IndexedDB, and client-side validations.

Click Watch Me for a free screencast on Web Workers.

Buy Now

Select a DRM-free Format:

In Stock
In Stock
In Stock
Buy the eBook and get these DRM-free formats delivered immediately:
  • epub (for iPhone/iPad, Android, eReaders)
  • mobi (for Kindle)
  • PDF
We can automatically send them to your Kindle, and your Dropbox. (You'll need to log in to enable these options.)
 

About this Book

  • 300 pages
  • Published:
  • Release: P1.0 (2013-11-05)
  • ISBN: 978-1-93778-559-8

HTML5 and CSS3 power today’s web applications, with semantic markup, better forms, native multimedia, animations, and powerful APIs. You’ll get hands-on with all the new features with practical example projects, and find what you need quickly with this book’s modular structure. “Falling Back” sections show you how to create solutions for older browsers, and “The Future” sections at the end of each chapter get you excited about the possibilities when features mature.

This revised second edition walks you through new features such as IndexedDB, CSS Animations, SVG, and more, along with updated fallback solutions. You’ll use HTML5’s new markup to create better structure for your content and better interfaces for your forms. You’ll work with new form controls and validations, and build interfaces that are accessible to assistive technology and mobile devices. You’ll draw with the Canvas and SVG, do simple animations with pure CSS, work with advanced CSS selectors, and make audio and video play natively.

You’ll bring your web apps to the next level as you use Web Storage and IndexedDB to save data on the client and make applications available offline. And you’ll discover how to use web sockets, geolocation, cross-document messaging, and the History API to create even more interactive applications.

Today, you have the flexibility that used to be only available through large JavaScript libraries or proprietary plugins. Get ready for today’s web.

What You Need

You’ll need the latest versions of Google Chrome, Firefox, Opera, and Internet Explorer, along with a text editor with good support for HTML5 and CSS3 syntax. Instructions for testing on older versions of Internet Explorer are included in the book.

Contents and Extracts

Preface

  • An Overview of HTML5 and CSS3
    • A Stronger Platform for Web Development
    • The Road to the Future Is Bumpy
  • Part I — Improving User Interfaces
  • New Structural Tags and Attributes
    • Tip 1. Redefining a Blog Using Semantic Markup
    • Tip 2. Showing Progress with the Meter Element
    • Tip 3. Creating Pop-up Windows with Custom Data Attributes excerpt
    • Tip 4. Defining an FAQ with a Description List
  • Creating User-Friendly Web Forms
    • Tip 5. Describing Data with New Input Fields
    • Tip 6. Jumping to the First Field with Autofocus
    • Tip 7. Providing Hints with Placeholder Text
    • Tip 8. Validating User Input Without JavaScript
    • Tip 9. In-Place Editing with contenteditable
  • Styling Content and Interfaces
    • Tip 10. Styling Tables with Pseudoclasses
    • Tip 11. Making Links Printable with :after and content
    • Tip 12. Building Mobile Interfaces with Media Queries
    • Tip 13. Creating Multicolumn Layouts excerpt
  • Making Interfaces More Accessible
    • Tip 14. Providing Navigation Hints with ARIA Roles
    • Tip 15. Creating an Accessible Updatable Region
    • Tip 16. Improving Table Accessibility excerpt
  • Part II — New Sights and Sounds
  • Drawing In The Browser
    • Tip 17. Drawing a Logo on the Canvas
    • Tip 18. Graphing Statistics with RGraph
    • Tip 19. Creating Vector Graphics with SVG
  • Embedding Audio and Video
    • Tip 20. Working with Audio
    • Tip 21. Embedding Video
    • Tip 22. Making Videos Accessible
  • Eye Candy
    • Tip 23. Rounding Rough Edges
    • Tip 24. Working with Shadows, Gradients, and Transformations
    • Tip 25. Working with Fonts
    • Tip 26. Making Things Move with Transitions and Animations
  • Part III — Beyond Markup
  • Saving Data on the Client
    • Tip 27. Saving Preferences with Web Storage
    • Tip 28. Storing Data in a Client-Side Database Using IndexedDB
    • Tip 29. Working Offline
  • Creating Interactive Web Applications
    • Tip 30. Preserving History
    • Tip 31. Talking Across Domains
    • Tip 32. Chatting with Web Sockets
    • Tip 33. Finding Yourself: Geolocation excerpt
    • Tip 34. Getting It All Sorted Out with Drag and Drop
  • Where to Go Next
    • Defining Layouts with the Flexible Box Model
    • Cross Origin Resource Sharing
    • Web Workers
    • Server-Sent Events
    • Filter Effects
    • WebGL
    • Onward!
  • Features Quick Reference
    • New Elements
    • Attributes
    • Forms
    • Form Field Attributes
    • Accessibility
    • Multimedia
    • CSS3
    • Client-Side Storage
    • Additional APIs
  • jQuery Primer
    • Loading jQuery
    • jQuery Basics
    • Methods to Modify Content
    • Creating and Removing Elements
    • Events
    • Document Ready
    • Use jQuery Wisely
  • Encoding Audio and Video For The Web
    • Encoding Audio
    • Encoding Video
  • Resources
    • Bibliography

About the Author

Brian P. Hogan is an author, editor, teacher, and web developer who’s been building web sites professionally since 1995 as a freelancer and consultant. His recent books include tmux: Productive Mouse-Free Development and Web Development Recipes. When not hacking on Ruby or JavaScript code, he’s writing songs, watching “The Simpsons,” and spending quality time with his wife and daughters.

Comments and Reviews

  • 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