HTML5 Learning Lab Available

HTML5 Learning Lab
HTML5 Mobile Application Development in 24 Hours Learning Lab

I’m pleased to announce that the latest version of my book Sams Teach Yourself HTML5 Mobile Application Development in 24 Hours is available in a Learning Lab format from Pearson.

The Learning Lab takes the entire book and adds interactive quizzes, videos, step-by-step lessons, and live code editing right in the book. If you’ve wanted to do more practice while learning HTML5, this is an excellent version of the book to get.

Three Free Chapters

The first three chapters are available online for free for you to try out and see if this version will work for you.

I worked hard on these videos and on the quizzes as well as writing the entire body of text, so I hope that you enjoy the HTML5 Learning Lab.


Learning Kit “far surpasses” standard ebook approach

I worked very hard on the Learning Kit version of the book Sams Teach Yourself HTML5 for Mobile Application Development in 24 Hours to add videos as well as interactive tests and practice. But it still might seem overwhelming to buy a book like that. I can tell you that it’s a great book, but I’m biased (after all, I wrote it!). 🙂 I enjoyed using the new Learning Kit format and found that it far surpasses the standard ebook approach.

But don’t just take my word for it. Marc Carson of Marc Carson Web Design read it and wrote a great review. Here are some of my favorite parts:

“Those who have used HTML in the past, but who are new to HTML5 will probably enjoy this Learning Kit. For example, it includes materials like a walkthrough video that shows how to quickly convert old-style HTML to HTML5. This was an unexpected but helpful addition to the text.”

“The inclusion of information on fonts and typography in HTML5, audio and video elements, HTML5 forms, microformats, canvas, WebSockets, geolocation, and so on will make for fascinating reading to those who are new to HTML5.”

“I enjoyed using the new Learning Kit format and found that it far surpasses the standard ebook (or paper book) approach. ”

“The author explained concepts very well within the videos, and has a voice that is very easy to listen to.”

Read the whole review here. Click on the “Reviews” tab if it isn’t showing right away.

New Release: HTML5 Learning Kit

Sams Teach Yourself HTML5 Mobile Application Development in 24 Hours (Learning Kit)
Updated text and videos help you learn HTML5 more quickly

I am so pleased to announce that the latest edition of the book has finally come out. This version is a “learning kit” and includes videos as well as updated text to help you learn to write HTML5 for mobile application development as quickly as you can.

I did at least two videos for each hour of the book, and I also updated the text to make sure it had up-to-date  content and links.

If you haven’t bought the book yet, you should really consider getting this digital edition.

You can view the first three chapters free online:

The learning kit is available as a ZIP file that will run in all modern browsers and includes full color images, video, and updated text to help you learn HTML5.

I think you’ll love this new edition of the book. I know I really like it.

Buy Now

If you don’t want the learning kit, you can also get the book in other formats, including print and ebook.

More on curly quotes–Code Samples are Clean

Unfortunately the curly quotes crept into the downloadable code samples as well as the ebook. Unfortunately, I can’t get the ebook fixed, but I have gone through and done a global search and replace on all the code sample files to put the curly quotes back to straight quotes.

I think I’m going to dream of curly quotes tonight. 🙂 Thank goodness for search and replace!

Curly quotes, straight quotes, and copy/pasting from the ebook

I am working on an update of the ebook for the extended ebook version (includes videos!) and I would love it if anyone has any errors to report. If you can get them to me (comments, emails, carrier pigeon, whatever!) before the end of March I can get them corrected for the next version.

One thing I discovered today is that if you copy and paste code samples directly from the ebook, you may have trouble. Word, as some of you may know, likes curly quotes like “ and ” but PHP (and JavaScript and HTML and almost every other code type) does not like curly quotes. When I wrote the book I turned off curly quotes because of this, but my editors have them on by default, and despite my best efforts some have slipped into the code samples.

This shouldn’t matter if you’re just copying the code by typing it in or if you use the samples I’ve added to this site (note, not the PDFs). But if you copy and paste from an ebook version, you may run across this problem. It’s especially annoying as these quotes are impossible to see in many font faces.

I recommend, if you do copy code from the ebook versions, that you do a search and replace across it, replacing and with ".

I’m making a note of this in the code samples as I find them in the ebook, but it’s very hard to see and I probably won’t find all of them. (I wonder if I can search and highlight in the PDF?? hmmmm…)

I know it’s a problem in the code at the top of page 76 (in the “Making Rollovers with jQuery” section). It should read:

  $("#link1 img").hover(
    function() {
      this.src = this.src.replace("_off","_on");
    function() {
      this.src = this.src.replace("_on","_off");
<a id="link1" href="#"><img src="images/get-scifi_off.png" alt="Get Science

Honestly? I really hate Word. I’d rather write NOTHING in that editor, because it causes me much more grief than it solves. I’m sure my editors would disagree.

Degrees? Radians? Blergh — Errors in the CANVAS Chapter

So, I was doing some CANVAS work today creating circles. And I know that the start and end points of my circle drawings are written in radians, and I know that to get a radian from a degree, I need to convert from degrees with the calculation:

var radians = (Math.PI/180) * degrees;

But as I was doing the work, the circles weren’t acting like I expected them to. I’m not sure how I missed this during my edits, but in Hour 10: Drawing with the HTML5 Canvas Element (which is one of the chapters available free from this site) I stated that in degrees 0° is noon on a clock, but that is wrong.

In fact, 0° is 3 o’clock. But what is more telling is that degrees then move counter-clockwise around the clock face. So 90° is noon, 180° is 9 o’clock, 270° is 6 o’clock and so on.

The other error is the implication that 0 radians is a different location than 0°. But in fact, if you do the math, you will see that they are exactly the same. Plugging it into the above formula, you get:

var radians = (Math.PI/180) * 0;
var radians = 0;

This may not seem like a big deal if all you ever draw are complete circles. But if you’re trying to draw a half circle starting at 3 o’clock and ending at 9 o’clock, you might be very frustrated if you think that would be 90° to 270°. You would still get a half circle, but it would be on the right side of the clock rather than the bottom of the clock.

Direction of the Arc

Another error that I found regarding drawing circles on canvas regards the direction the pointer travels when drawing the circle or arc. In the book I stated that the final value of the arc method was the direction. This is correct, but the values I listed were wrong. It should say that true means counterclockwise and false means clockwise.

The code that is included in hour 10 does work correctly, it was just how the code was described that was incorrect.

I hope these errors didn’t confuse anyone, I will make sure to get this corrected in future editions.

Errata Specifics

Page 175
in the second paragraph of the “Drawing Circles” section

“…and finally the direction to draw either clockwise (true) or counterclockwise (false).”

Should read:

“…and finally the direction to draw either counterclockwise (true) or clockwise (false).”

Page 175
in the “By the Way” section titled  “How to Find Start and End Points for Circles and Arcs”

Radians do not have the same starting point as degrees (in degrees 0° is noon, but in radians it is not).

Should read:

“Radians are measured differently than degrees. 1 radian equals about 57.3 degrees, and there are about 6 radians in every circle.”

Five Book Winners Plus A Consolation Prize

I am happy to announce the five winners of my book. I’ll contact each of you directly to get your mailing address so that my publisher can send you your free copy. I’d really appreciate it if you could post a review on about it when you’ve read it, but that is, of course, not a requirement.

The winners are:

  • Debbie
  • Holly
  • V. Berry
  • Ellen Picard
  • Peggy Shields

Thanks to everyone who participated. As a consolation prize, I have posted another chapter free for you to download (via PDF): Hour 12: Audio and Video in HTML5.

Read a chapter and enter to win a copy of the book

Teach Yourself HTML5 Mobile Application Development in 24 HoursIf you haven’t gotten your copy of the book yet, now is your chance to check it out in advance. I have posted a PDF copy of Hour 10: Drawing with the HTML5 CANVAS Element for you to download and read. This is a full-color PDF copy of the chapter exactly as it appears in print. If you want to learn how to build HTML5 CANVAS images, this free chapter is a great place to start.

I am pleased to announce that I have five copies of my book — Sams Teach Yourself HTML5 Mobile Application Development in 24 Hours to give away to readers of this site or the Facebook page. To enter, simply comment on this post how you think you would use this book or why you want to learn HTML5. Winners will be chosen at random on August 1st, 2012. You can also get additional entries by liking my Facebook page and subscribing to the newsletter.

I will announce the winners here on August 2ndGood luck!

Slashdot review

I was very pleased to see this review on Slashdot yesterday. Michael J. Ross did a great job finding the problems and explaining what the book is about. He even commented on some things that I found annoying, and I wrote the book! 🙂 But of course, my favorite part is the last paragraph:

“Despite the aforementioned blemishes, this book is definitely worth a look, because it is currently one of the most complete tutorials for learning how to use HTML5 for creating mobile apps and web sites.”

I have already addressed some of his concerns, such as getting the code samples and errata linked from the site navigation (oops!). And I’ll be making notes of the errors he found to correct for a future printing.