HTML5 in 24 Hours

Teach Yourself HTML5 in 24 Hours—Table of Contents

· 6 min read

Table of Contents

Here is the current draft of the table of contents for the book. Please let me know what you think.

  • Part 1: Building Web Pages and Applications with the Open Web Standard
    • Hour 1: Improving Mobile Web Application Development with HTML5
      • Understanding How We Got to HTML5
      • Defining Web Applications
      • Using the Open Web Standard
      • Using HTML5 with iOS and Android Devices
      • Writing Mobile Websites
      • Summary
      • Q&A
      • Workshop
    • Hour 2: New HTML5 Tags and Attributes with Mobile Development
      • The New HTML5 Tags
      • The New HTML5 Attributes
      • Changes to HTML 4 Tags and Attributes
      • Changes to HTML Syntax in HTML5
      • Mobile Support of HTML5 Tags and Attributes
      • Benefits of HTML5 for Mobile Web Development
      • Summary
      • Q&A
      • Workshop
    • Hour 3: Styling Mobile Pages with CSS3
      • Quick Introduction to CSS
      • What CSS3 Adds to the Party
      • Using CSS3 on Mobile Devices
      • Summary
      • Q&A
      • Workshop
    • Hour 4: Detecting Mobile Devices and HTML5 Support
      • Choosing What to Support
      • Android and iOS Support HTML5
      • Detecting HTML5 Functions
      • Degrading Gracefully
      • Using CSS3 Media Queries to Detect Mobile Browsers
      • Testing Your Applications
      • Summary
      • Q&A
      • Workshop
    • Hour 5: JavaScript and HTML5 Web Applications
      • What is JavaScript
      • What is jQuery
      • What Makes jQuery Suited to Web Applications
      • Extending with jQuery UI and jQuery Mobile
      • Summary
      • Q&A
      • Workshop
    • Hour 6: Building a Mobile Web Application
      • Build a Site that is All-Device Friendly, Not Just Mobile
      • What Type of Application Do You Want?
      • Build the Application in HTML
      • CSS Makes the HTML Look Good
      • Add Mobile Meta Tags for More Effective HTML5 Pages
      • Add the Scripts to Make the Site Interactive
      • Effective Mobile Layouts
      • Optimizing Your Site for Mobile
      • Summary
      • Q&A
      • Workshop
    • Hour 7: Upgrading a Site to Support Mobile Devices with HTML5
      • Deciding When to Upgrade from HTML4
      • HTML5 Features that Work Right Now
      • HTML5 Features that Make Great Extras on Your Site
      • HTML5 Features that Turn Your Site Into a Killer Mobile Application
      • Summary
      • Q&A
      • Workshop
    • Hour 8: Useful Tools for Mobile Web Development
      • Don’t Start from Scratch
      • Changing the Visual Design for Mobile
      • Testing on Devices You Don’t Own
      • Checking for HTML5 and CSS3
      • Supporting Multiple Devices
      • Getting Older Browsers to Work
      • Summary
      • Q&A
      • Workshop
  • Part 2: Introducing the Meat of HTML5
    • Hour 9: HTML5 Sectioning and Semantic Elements
      • What are Sectioning Elements
      • How to Use the New Sectioning Elements
      • Create a Sectioned HTML Document
      • Markup HTML Semantically
      • Mobile Support of Semantic Elements
      • Summary
      • Q&A
      • Workshop
    • Hour 10: Drawing with the HTML5 Canvas Element
      • What is the Canvas Element For?
      • How to Use Canvas
      • Drawing Shapes
      • Writing Fonts and Text on the Canvas
      • Displaying Images
      • How is Canvas Different from SVG or Flash?
      • This Hour Barely Scratched the Surface
      • Summary
      • Q&A
      • Workshop
    • Hour 11: Fonts and Typography in HTML5
      • Basic Typography Hasn’t Changed from HTML4
      • Use Proper Typographic Entities
      • Web Open Font Format—WOFF
      • How to use WOFF with @font-face
      • Alternatives to WOFF
      • Summary
      • Q&A
      • Workshop
    • Hour 12: Audio and Video in HTML5
      • Why Use HTML5 for Audio and Video
      • Video Formats for the Best Compatibility
      • Audio Codecs for Widest Support
      • The New HTML5 Media Elements
      • Useful Attributes to Extend Your Media
      • Fallback Options for Internet Explorer
      • Create Custom Controls with API Methods
      • Summary
      • Q&A
      • Workshop
    • Hour 13: HTML5 Forms
      • Placeholder Text in Form Fields
      • Autofocus
      • HTML5 Adds Several New Types to the Input Tag
      • Understanding the Different Number Types
      • Date and Time Types
      • Valid Email and URLs in Forms
      • Older Browsers Will Still Work with the New Input Types
      • Mobile Browsers Make Good Use of the New Types
      • Summary
      • Q&A
      • Workshop
    • Hour 14: Editing Content with HTML5
      • Indicating Edited Content with the Mark Element
      • Web Pages No Longer Need to be Static—Users Can Change Them in the Browser
      • A New Attribute: Contenteditable
      • Uses for Contenteditable
      • Create a Simple To Do List Using Contenteditable and Web Storage
      • Check Your Spelling in Forms and Contenteditable Areas
      • What Browsers Support Spellcheck and in What Elements
      • Unfortunately, Mobile Support for Editing Content is Weak
      • Summary
      • Q&A
      • Workshop
    • Hour 15: Microformats
      • What are Microformats
      • What is the Benefit of Microformats
      • Using Microformats
      • Your First Microformat
      • Some Microformats Already in Use
      • Some Mobile Devices Use Microformats, Others Don’t
      • Summary
      • Q&A
      • Workshop
    • Hour 16: Drag and Drop
      • Make Your Web Pages Seem More Like Applications
      • HTML5 Drag and Drop Doesn’t Require a Specific Framework or Technology
      • There is Great Browser Support for Drag and Drop Both in Mobile and Non-Mobile
      • Set Up Drag and Drop Step-by-Step
      • Create a Simple Drag and Drop Application
      • Summary
      • Q&A
      • Workshop
    • Hour 17: HTML5 Links
      • How Have Links Changed in HTML5
      • Two Kinds of Links in HTML5
      • Link Types
      • Common Uses of the Rel Type
      • New Types Defined in HTML5
      • How Mobile Applications Use the New Link Types
      • Summary
      • Q&A
      • Workshop
  • Part 3: HTML5 for Mobile and Web Applications
    • Hour 18: How to Design Applications for Mobile Devices
      • What are Mobile Devices
      • Modify Designs When Mobile Devices are Detected
      • Design for Everyone, Not Just Mobile
      • Mistakes in Mobile Design
      • Create Mobile-Friendly Navigation
      • Summary
      • Q&A
      • Workshop
    • Hour 19: Why HTML5 for Mobile and Web Applications
      • Many Mobile Devices Already Use HTML5 for Apps
      • Customers Prefer Apps, and You Can Build them with HTML5
      • With HTML5 Create Apps for Mobile and Non-Mobile at Once
      • Summary
      • Q&A
      • Workshop
    • Hour 20: Web Application APIs
      • How a Web Application is Different from a Web Page
      • Well Known Examples of Web Applications
      • Benefits and Drawbacks of Web Applications
      • Useful Features of Web App APIs
      • Build a Simple Mobile Web Application Using HTML5 and jQuery Mobile {note: I may change this to Sencha Touch. I’m testing both.}
      • Summary
      • Q&A
      • Workshop
    • Hour 21: Offline Web Applications
      • What Good is an App if You Must Be Online to Use it?
      • What is the Cache Manifest
      • How to Write a Cache Manifest
      • Detecting that the Browser is Offline
      • Saving Data Locally
      • Convert Your App to an Offline Application
      • Summary
      • Q&A
      • Workshop
    • Hour 22: Web Storage
      • What is Web Storage
      • How is Local Storage Different from Cookies
      • Uses of Local Storage
      • Facts About Web Storage
      • Add Web Storage to our Mobile Application
      • Summary
      • Q&A
      • Workshop
    • Hour 23: History API
      • Why Control the Browser History
      • Pseudo-Code Example of How to Use the History API
      • Methods to Control the History
      • Update Our App to Include a Photo Gallery Using History API
      • Summary
      • Q&A
      • Workshop
    • Hour 24: GeoLocation is Perfect for Mobile Devices
      • What is GeoLocation
      • Privacy and GeoLocation
      • Uses for GeoLocation
      • Create a Simple Mobile Application Using GeoLocation
      • Summary
      • Q&A
      • Workshop
      • Exercises
  • Appendixes
    • HTML Elements and Attributes
      • HTML5 Elements
      • HTML5 Attributes
    • HTML5 Resources
      • Books
      • Websites
    • Mobile Application Resources
      • Books
      • Websites

Comments:

rtidwell - Jan 1, 2012

I’m enjoying your book so far. I do hope you’ll be able to add more content here very soon though - things like code samples and solutions for the exercises. Also, I think the Watch Out! box on page 21 is missing a pair of parentheses in the statement. Thanks!

Jennifer Kyrnin - Jan 1, 2012

Sorry about the delay. Holidays got me overwhelmed. I should have the rest of the code samples and everything up in about a week.

Jennifer Kyrnin - Jan 3, 2012

Moving along. I realized today why no one was seeing the code samples, the navigation wasn’t showing them! :-) OOOPS! They are now live, and I’ll be converting the PDFs to HTML over the next few days.