Getting Started with HTML5

I’m working on a project now were we’ve decided to go with as pure HTML5 as posible, and it’s a breath of fresh air. Things work more or less how they should, and Internet Explorer is even playing along, with a little help. Getting started was a bit of a trick, though, as it can be hard to find information on how HTML5 works without diving into specification documents, which is never fun, or easy, (if you don’t want to read the story, skip straight to the resources).

I hadn’t been following the development of HTML5 with more than a passing interest. I figured that when it was ready, then I would start using it. I also understood that there were different parts that may reach completion at different times, and was keeping my eye open for some sort of “completion” signal. 2009’s 24 Ways was that signal for me. There were several articles on using HTML5 features along with their CSS3 counterparts, and enough evidence that browser support is there to start my investigation.

Here’s the deal: Basic HTML5 support is pretty good in webkit-based browsers, alright, (read usable), in Gecko, and kind of lacking in Internet Explorer. However, if you can rely on Javascript being present, (which I can in my project), there’s an HTML5 Shiv Javascript by Remy Sharp that makes it so that you can style HTML5 in Internet Explorer. Add it using a conditional comment and you’re good to go.

So, we have useable cross-browser support, but where do we turn to learn about which tags are in, which are out, the correct doctype and mime-type, and all that? We could read the specification, (and we will have to read a bit, at least), but it would be nice if there was an introduction to HTML5 somewhere. It turns out that Robert Nyman has written an Introduction to HTML5. It’s detailed enough to get you started, but not so detailed that you get lost, (like the spec), and if you’re looking to be convinced of the value of HTML5, check out HTML5: Tool of Satan, or Yule of Santa?, Have a Field Day with HTML5 Forms, and Breaking out the Edges of the Browser from 24 Ways 2009.

Once you dive a little deeper you’ll find that there are elements of HTML5 that you need more in-depth information for, so it’s time to turn to the spec. However, there are 2 groups, (W3C and WHATWG), working on HTML5, and therefore 2 spec documents, (fun!). Fortunately, the two groups have the same editor, so they’re more or less working on the same thing. I find the WHATWG HTML5 document easier to read, but if you prefer the W3C version, go nuts.

Finally, the whole content-type debate that’s been going on for what seems like centuries is still a mess. In HTML5 you’re supposed to include a Document Type Definition and there should be no namespaces on the HTML element if you’re serving as text/html, and you’re supposed to serve in application/xhtml+xml if you want to use namespaces, or force XML validation, or anything like that. The problem is that Internet Explorer really doesn’t like application/xhtml+xml, (it shows the raw XML document), so if you need a namespace for some reason, (for example, you want to use Facebook Connect on the site), you can’t serve valid markup.

So, that’s it. HTML5 has arrived, or at least parts of it. If you can rely on Javascript being present, or rely on IE users not using your web app, you can go ahead and start using it. Here’s a quick recap of the resources:

MyMap Explorer 1.2

Last night I updated MyMap Explorer for Google Maps to make it more future-proof and improve KML support. The most recent version is available on the project website.

The most important changes that were made are:

  • MyMap Explorer is now locked to Google Maps API version 2.150, so version 1.2 will not break on July 1 when API versions prior to 2.140 are depreciated
  • MyMap Explorer now supports area overlays on the maps, not simply points as before
  • There is some improved error-checking

This update was initiated by a fellow named Joel asking questions and reporting bugs. Thanks Joel!

Announcing MyMap Explorer for Google Maps

Today I am announcing the release of MyMap Explorer for Google Maps. This small javascript allows you to embed a map created using Gooogle Maps’ My Maps feature into any web page with more information and flexibility than Google’s iFrame embed code.

Back in November, Heri asked for a relatively simple way to integrate his Technology Map of Montreal into MontrĂ©al Tech Watch, and MyMap Explorer is the result, (see it live on the Technology Map of MontrĂ©al), It takes the KML description of a map from Google Maps and adds it to a map created using the Google Maps API. It also provides an alphabetized, clickable list of the points on the map so that your users don’t have to click on each marker to find the location that they are looking for.

The KML is loaded live from Google Maps so if you make a change to your map on Google Maps it will be shown in all embedded versions of your map as well. This script has no dependencies, other than Javascript and a Google Maps API key. Just insert it into a web page where you want to see your map and it appears!

I have some features that I still plan on adding, but want to get the basic script out there and into use. I’ve released the code on Google Code under an MIT license so you are all free to use MyMap Explorer, and contribute if you feel up to it.

The demo is here.

BonzoBox

Create a social homepage based around bookmarks.

My BonzoBox homepage.
My BonzoBox homepage.
You can store a custom title, description, and tags for every site you save.
You can store a custom title, description, and tags for every site you save.

About a year ago I was contracted to build a homepage that used screenshots of websites to link to the sites, had drag & drop to move the sites around, and was easy to use. Marcos Cantoni of Visual Dreams Interactive did the great design work, and I did the coding. Fast forward a year and BonzoBox has come a long way – it is a social website built around the sharing of websites. I am now a partner in the site, (and the CTO), and we are making it even greater!

BonzoBox brought my AJAX skills to a whole new level. It features drag & drop, ajax forms, tagging, dragging items out of flash movies, inbox widgets, and more, with more in the pipe. I also used a Javascript Library for the first time – I chose DOMAssistant because of its light weight and modular structure, and am extremely happy with it.

BonzoBox is currently in public beta and I encourage you to go Sign Up and try it out.

If you thought opening a link in a new window was bad…

We hear it all of the time, “Don’t open links in a new window.” However, sometimes it makes sense, whether it’s because a client insists on it, or because way the site is meant to be used, (and is used by its users), works better if some, links are opened in new windows. The fact of the matter is that sometimes you’ve just got to open a new window.

But, what happens when someone else decides to close that window? Confused users, that’s what.

I recently came across a site that does just that. It checks to see if there’s an opener object, (we’re talking javascript now), and if there is one, it redirects the opener to its address and closes itself.

Here’s the code:

function checkForPopup()
                {
                    if (typeof(window.opener) != 'undefined')
                    {
                        var queryString = window.location.search.substring(1);
                        if (queryString.indexOf('cliententry=true') == -1)
                        {
                            try
                            {
                                if(!window.opener.closed)
                                {
                                    window.opener.top.location = window.location;
                                    window.close();
                                }
                             }
                             catch(e)
                             {
                                //We Ignore this error becuase the user
                                //may have closed the opener
                             }
                        }
                    }
                }

Seriously! I was disgusted. There is no better way to mess with a user than that!