From WikiContent

(Difference between revisions)
Jump to: navigation, search
Current revision (00:41, 7 December 2011) (edit) (undo)
Line 1: Line 1:
= '''Status''' =
First Printing.
* All errata to date fixed. 12/6/2011
= '''Outline''' =
= '''Outline''' =
Line 14: Line 19:
* Appendix: Stuff we didn't cover, where to go from here
* Appendix: Stuff we didn't cover, where to go from here
7/31: 538 pages so far; current total page estimate: 600-620 (including appendix, etc).

Current revision



First Printing.

  • All errata to date fixed. 12/6/2011


Title outline, with pages:

  • Chapter 1: Welcome to Webville - Not your father's HTML (38pp) - TR done
  • Chapter 2: A Little Code - Introducing JavaScript and the DOM (52pp) - TR done
  • Chapter 3: A Little Interaction - Event Handlers and All That Jazz (27pp) - TR done
  • Chapter 4: Serious JavaScript - JavaScript Functions and Objects (62pp) (Example: dogs, movies) - in TR
  • Chapter 5: GeoLocation - Making your HTML Location Aware (49pp) (Example: Wherever you go, there you are app) - in TR
  • Chapter 6: Extroverted Pages - JavaScript and Web Services (67pp) (Example: Mighty Gumball) - in TR
  • Chapter 7: The Canvas - Bring out your Inner Artist (68pp) (Example: Tweetshirt) - in TR
  • Chapter 8: Video (with special guest, The Canvas) - Not Your Father's TV (pp 58-60) (Example: VideoBooth, with filter effects)
  • Chapter 9: A Little More Closet Space - Web Storage (60pp) (Example: Sticky Notes) - in TR
  • Chapter 10: Web Workers - Putting JavaScript to work (57pp) (Example: Mandel) - in TR
  • Appendix: Stuff we didn't cover, where to go from here


  • Modernizr
  • Audio
  • offline web apps
  • web sockets
  • jQuery
  • SVG
  • Web Databases
  • Putting an X in your HTML5
  • Selector API
  • But there's even more!
    • drag and drop
    • messaging
    • guestures
    • mobile
    • and more on the way!



  • Need a reviewer that can test on IE (multiple versions)

Copy Edit:

  • Make sure filenames are in "code" character style
  • Make sure "web" is lowercase unless we mean "(World Wide) Web"


  • Checking for elements using JavaScript
  • Modernizr
  • Sizing web pages for mobile

Remember to do:

  • Add attribution for the twitter bird image in the canvas chapter
  • Add attribution for BI logo in geo location chapter: Bainbridge Island Downtown Association, design by Denise Harris
  • Add attribution for fractal code in web workers chapter: http://blogs.gnome.org/jamesh/2011/03/08/javascript-fractal/
  • Add dev tools page (Local Storage) - how to access Developer Console in each browser: http://wickedlysmart.com/hfhtml5/devtools.html
  • Add XMLHttpRequest info page (Chapter 5)
  • Test all examples in IE
  • Finish IIS install info (Chapter 5)



( Need to categorize these )

HTML Resources

CSS Resources

Font specific resources



JavaScript Resources

Web Workers


Custom Data Attributes, Data Sets

Local Storage

Two ways to achieve this: session and local storage, and web databases.

Cache Manifest

If you're running apache, you can try this on your own web server.

If you are running Apache2: First you'll need to add the text/cache-manifest mime type to your Apache mime.types file.

Locate this file in /etc/apache2. Edit this file - you'll need to use sudo or use a root account to do this. E.g. sudo vi mime.types Find the mime types starting with text and add the line

text/cache-manifest manifest 

to this file.

Save, and restart Apache. If you're on a Mac, the easiest way to do this is to go to System Preferences -> Sharing and turn web sharing off then back on.

Create your manifest file. This will include every file you want to cache from your web application. This would include html, css and javascript files, as well as images.

Then create your website and in the header of every .html file you'll need to include the manifest attribute on the html tag and link to your manifest file.


  • Show basic example of a small website that lists all files
  • Show "fallback" to remove the need to list all files
  • Show an example that shows progress of download to cache, completion and hot swap to newly cached version - illustrate by changing information on the web pages after it's already been cached once

Because most browsers are set up to cache static files for several hours, if you change your manifest file you may see it take effect in your browser (say, during testing), because the browser is not retrieving the new manifest file.

You can add a .htaccess that forces the server to expire the caching on the manifest file after every request.


Ideas for going beyond the book

  • HTML5Camp
  • Website with articles that take the examples further, talk about stuff we didn't cover.
    • TweetGeek - make a twitter widget with your picture and a thought bubble
    • Gumball sales report - how to insert new sales reports at the top instead of the bottom

IE issues

How to make HTML5 work in IE8:

Use the javascript hack (see http://oli.jp/2009/html5-structure4/) or write HTML4.1 and use class names to simulate the new elements you want for an easier transition in the future. Address briefly in the book, but assume users are NOT using IE8 to test pages.

Personal tools