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:
- Use the HTML5 doctype.
- 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.
- Prepare to support older browsers (requires a bit of trickery) and mobile devices (easy).
- Use the new structure elements provided in HTML5. Take advantage of the new tags to structure your documents.
- 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. 🙂
Posted on 16 March 2011, in open standards, technical writing, WritersUA and tagged HTML, HTML5, technical communication, technical documentation, technical writing, WritersUA. Bookmark the permalink. 3 Comments.
ffeathers 
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
Pingback: WritersUA 2011 – Best practices for embedded UA « ffeathers — a technical writer’s blog