WritersUA 2011 Tuesday – HTML5

This week I’m attending the WritersUA 2011 Conference for Software User Assistance in Long Beach, California. On Tuesday I attended two sessions on HTML5. The first was a presentation by Scott DeLoach, called “HTML5 to the Point“. The second was a hands-on session run by Char James-Tanny, called “60 minutes to an HTML5 Web Page“. This blog post is derived from the notes I made during those two sessions. If you find any inaccuracies, they’ll be mine.

First, here are my notes from Scott‘s session. He presented a lot of highly technical information. Thanks to his easy, clear way of presenting information, we absorbed it all.

Why is HTML5 important?

Scott introduced his topic by telling us about the organisations that are already using and indeed driving the adoption of HTML5:

  • According to W3C, HTML5 is the future of the web. It will replace the existing versions of HTML and XHTML.
  • Adobe are working on “Helium” (we’re not sure exactly what this is yet) and “Wallaby” (allowing you to save Flash files as HTML5).
  • Facebook will be spending the bulk of their investment and development on HTML5 this year.
  • Google is hugely into HTML5. Leading the way. The Google Instant search uses HTML5. Gmail is coded in HTML5. See their site HTML5 Rocks. Some of their features work only in Chrome, but others work in other browsers too.
  • Microsoft: Bing is using HTML5.
  • Apple rewrote all of the Apple website in HTML5.
  • YouTube: Video is one of the biggest parts of HTML5, and YouTube are moving their video format to HTML5.
  • Netflix is moving to HTML5. The conversion is almost complete.

Converting to HTML5

Scott listed the basic steps required to convert a web page to HTML5:

  1. Use the HTML5 doctype.
  2. Replace HTML elements that are no longer supported in HTML5. Some of the features that have been deprecated for a while are now not supported.
  3. Prepare to support older browsers (requires a bit of trickery) and mobile devices (easy).
  4. Use the new structure elements provided in HTML5. Take advantage of the new tags to structure your documents.
  5. Use the other new features. There are some really cool things you can do. HTML5 offers a combination of standardising the things we’ve been doing anyway, with some new features too.

The HTML5 doctype

They have simplified the format of the doctype statement that you put at the top of your file.

At its simplest, it’s just this:

<!doctype html>

For the more extended format there are two options, an HTML syntax and an XHTML syntax. The difference between the two is tiny, just in the format of the quotation marks. You can choose either one.

Unsupported elements

Scott showed us a list of elements that are no longer supported, and their HTML5 alternatives.

The list is fairly long. Here are just a few specific examples:

  • center – use CSS (text-align:center)
  • frame, frameset, noframes – use an iframe or CSS (float properties)
  • noembed – use the “video” element

Supporting older browsers

Scott pointed out that we will need to support older browsers, and in particular IE 8 and earlier. (The latest version of IE, which came out yesterday, has much better support.) Scott gave us some tips:

  • There are a number of new elements that the old browser will not recognise. You will need to add a style definition for each of the new elements, that the older browser can pick up. Examples of such new elements: article, aside, canvas, details, etc.
  • Test your pages in the old browsers.
  • Create styles specifically for older browsers.
  • For older versions of IE, use Remy Sharp’s script to enable all the new elements in older versions of IE.

Supporting mobile devices

Most browsers for mobile devices (generally Safari and Chrome) support HTML5.

Structuring your documents

This is one of the biggest changes, and also most interesting to technical communicators. You can use the new elements in HTML5 to structure your documents more easily.

Scott listed all the new elements, and homed in on a few examples:

  • header – A logo and page title.
  • nav
  • section – A collection of news articles. You can nest sections. Note that if you do that, the heading levels may change automatically. For example, let’s assume that you nest section B inside section A. If section B has an h1, that h1 will change to h2.
  • article – A blog post or news article. Scott pointed out that section and article have a lot of overlap. This will probably confuse people. An article is something that can stand alone. A section does not really stand alone.
  • aside – Scott mentioned that this is a good placeholder for “related topics” links.
  • footer

Scott showed us a neat diagram illustrating how each of the above elements might fit into a page. Then he dragged the elements around, showing how flexible the structure is. It’s largely up to you, how you use the elements to structure your page.

Other elements

Including video and audio is a lot easier, using the “video” and “audio” elements.

The “canvas” element is really cool. It creates an area for images and shapes. It’s an alternative to having a graphic, a way to draw shapes (squares, circles) using code. You can have elements of the graphic animated or move around.

The “ruby” tags add pronunciation guides to content.

The “wbr” tag offers an opportunity for a linebreak. If a linebreak is necessary, the browser can make one.

New global attributes

Scott mentioned a few of the new attributes available in HTML5:

  • It’s easier to make menus via the “contextmenu” attribute, which creates a popup menu.
  • draggable” allows an element to be moved.
  • spellcheck” checks the spelling in the element.

New methods

Scott discussed a number of new methods. I didn’t take detailed notes here.

Many, many new events

Scott said, what’s really great is that HTML5 standardises a lot of events that were previously supported only by specific browsers.

Some examples:

  • onwaiting – you could provide some entertainment while people are waiting.😉
  • oninvalid – to provide an error message in a form.
  • onoffline and ononline – you can tell people they won’t be able to find the information because they can’t access the web.

New form elements

Scott walked through a few of the new form elements:

  • required” to mark required fields on a form.
  • Built-in validation for certain types of input fields, with built-in error messages. For example, if you specify an input field with ‘type=”email”‘, then the browser will validate the input content as an email address. At the moment, there are few browsers that support this option.
  • You can also write your own custom validation and error messages for user input, using “input-pattern“.

Examples

For the rest of the session, Scott showed us some examples of the features he had mentioned.

  • We saw the spellcheck in action. Pretty cool. The browser drew a squiggly red line under the misspelled user input.
  • Including video, via the “video” element. Two great things in HTML5: It’s much easier to code the inclusion of the video, and you can also include multiple source files (for example, of different formats) so that the browser can choose the one it recognises. For mobile devices, for example, you can specify a minimum device width for your video. You can also include .swf files in the video element. If you include the attribute “controls“, the browser will include video controls too.
  • The “ruby” element lets you provide pronuncation guides. The phonetic text appears directly above the word(s) bracketed by the “ruby” tag. Actually, Scott pointed out, the use of the tag is not limited to providing pronunciation guides. You could use it to provide a translation, or anything else.
  • Determining the user’s location. Scott showed us a script that figures out your latitude and longitude. (He also has one that determines your altitude.) Let’s say a plumber is going out to fix a boiler. You can figure out which boiler they’re at and show them the correct “how to” video for that boiler.
  • Using the new “editable” and “save” features in HTML5, you can let people annotate a web page.

Sample sites and other resources

Scott showed us a number of resources, including development applications, sample sites, recommendation sites and information about browser support.

I didn’t make notes of all the sites Scott recommended. I’m sure he’d be happy to provide them.🙂 Here are just a few that he highlighted:

  • Adobe Dreamweaver CS5 can write HTML5. So can CoffeeCup’s The HTML Editor 2010, and TopStyle 4.
  • Scott recommends specifically the following two sites, written entirely in HTML5
    • MTA.ME, a subway train visualisation.
    • The Wilderness Downtown. Awesome, says Scott. It asks you to enter the address of the town where you grew up. (Just start typing the name of the town, anywhere in the world. The smart search will find it and prompt you!) It’s spooky. They go behind the scenes, using Google Maps, and put the location up on the screen. Then the action starts, with the guy running near the location that you specified! (Chrome browser recommended.)

Scott’s quick reference guide to HTML5

Scott has created a quick reference guide to HTML5, which he made available specifically to WritersUA attendees. He said it’s fine to include the link in this blog post🙂 so here you are: HTML5 quick reference, a PDF document by Scott DeLoach.

Introduction to Char’s session

The rest of this post comes from the notes I took during Char‘s session. Char hosted a hands-on lab, where we built an HTML5 web page from scratch.

To start off her session, Char gave us some introductory information about HTML5 syntax.

HTML5 syntax

HTML5 has a free-form syntax:

  • Any case (upper, lower, mixed)
  • Double quotes, single quotes, no quotes
  • Close tags or no close tags
  • Optional attribute values.

doctype

<!doctype html>

That’s all you need in your doctype element, to make a document HTML5!

Page structure

The page structure is familiar to anyone who has created an HTML page:

<!doctype html>
<html lang="en">
<head>
</head>
<body>
</body>
</html>

Hands-on exercise

We started by creating a file “index.html”, containing just the page structure elements shown above.

Then we added the following code to the “head” element:

<meta charset="utf-8">
<title>I Need a Title!</title>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js">
</script><![endif]-->
<link href="css-wua.css" rel="stylesheet" type="text/css">

The first script element pulls in Remy Sharp’s script to declare the new HTML5 elements for compatibility with IE8 and earlier. This is the same script that Scott told us about, just hosted in a different location.

The second script elements includes a stylesheet, created by Char, to make things pretty.

For the rest of the session, we added the HTML body to create a simple web page. I haven’t included it in this post, because it’s Char’s work. Here is an online version of the page we created.

My conclusion

Thank you Scott DeLoach and Char James-Tanny for two interesting and authoritative sessions. I love Scott’s quiet, composed way of presenting so much technical information so easily. Char is absolutely great and guiding a motley collection of HTML5 wannabees through the fumbling stage up to producing a quality HTML5 page. It was useful to have Char’s session follow on from Scott’s. Again, what a great conference this is.🙂

About Sarah Maddox

Technical writer, author and blogger in Sydney

Posted on 16 March 2011, in open standards, technical writing, WritersUA and tagged , , , , , . Bookmark the permalink. 3 Comments.

  1. It’s like I was there! Thank you Sarah for attending and sharing. I always enjoy reading “cliff notes” from sessions you attend. Compressed and informative!

    Enjoy the remainder of your trip!!

    • Hallo Randall🙂
      It’s great to “see” you dropping by on my blog! I’m so glad you’re enjoying the posts. There are 3 more to come, and a wrapup post too.

      I’m in San Diego now, having a few days off. Then I’m heading off to work in the SF office for a couple of days. Enjoying my trip indeed!

      All the best to you, and a toast to Appfire’s Upgrade Assistant plugins for Confluence and JIRA!

      Cheers, Sarah

  1. Pingback: WritersUA 2011 – Best practices for embedded UA « ffeathers — a technical writer’s blog

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: