I’m attending STC 2012, the annual conference of the Society for Technical Communication. Monday afternoon started with a presentation by Peter Lubbers, called “The future is landing: Getting started with HTML5″.
Peter’s presentation covered these points:
- HTML5 – what and why
- HTML5 features
The world is moving to HTML5. Peter thinks the impact on the world will be even bigger than what DITA has been to tech comm.
HTML5 will not replace DITA. We will probably continue to author in DITA. The two are complementary, especially with respect to the semantic markup.
What is HTML5?
- The focus is very much on webapps, and creating webapps that are on a par with desktop applications. One of the components that eventually merged into the HTL5 spec was originally called Web App 1.0.
- It represents an explosion of growth in many different areas.
Why should we care?
- New features that “pave the cow path”. For example, new features in web forms.
- A simplified Doctype. Just “HTML”.
- Simplified character set in the meta tag.
- Simplified markup. You can create a minimal document in just 70 characters! The browser will supply the fill-in elements.
- HTML5 is universal, works in all world languages, and is designed for accessibility- semantic markup and WebVTT (format (Web Video Text Tracks) is a format intended for marking up external text track resources).
- You need fewer plugins.
- HTML5 is designed to be secure.
Next Peter took us through the new HTML5 elements. The new tags are semantic – making a first class element out of attributes that people commonly used, such as a figcaption element for image captions. One of the benefits of semantic markup is making the document machine readable.
Some elements gave also been declared obsolete, such as frames, framesets and inline styling.
Peter recommends the HTML5 Doctor site.
There is a lot of new functionality around web forms. For example, in a signup form you can specificy a “placeholder” attribute containing text that appears in an input field before the user has entered anything. (It typically appears in grey text, and disappears as soon as you click in the field.) You can also add an attribute that makes a field mandatory. Field types are useful for specifying dates, colour pickers, and so on.
CSS3 is part of HTML5, and defines a number of new features, such as rounded corners, transitions, web fonts.
Media queries are very important, especially when you talk about responsive web design. See the website The Boston Globe as an example. You can drag the browser window, and change its size, and it remains looking good. You can define the way the page should look, and the columns that should appear, based on the width and height of the window.
In the area of audio and video, HTML5 supports a number of media formats and gives you a simple way of including them. There are some hiccoughs with browser supports and codecs, but basically it works.
Peter recommends the Miro video converter for converting movie files to different formats for browser compatibility.
For graphics and 3D figures, Peter talked about two types of graphics API:
- Canvas – HTML5 has a “canvas” element. You can think of it as a programmable bitmap, where you have complete control over every pixel.
- SVG. Not new, but HTML5 now has native support for scalable graphics. One of the great libraries for SVG is D3, an open source project that you can roll into your own projects.
For a cool experience on an iPhone, try the Kaazing racer. The car responds to changes in the position and orientation of the phone. This is based on the device specification in HTML5, and also on the new web sockets technology.
One feature that will affect technical communication is the ability to make documents available offline. If you add the necessary elements to your HTML, the browser will cache the pages and make them available offline, at the same URL.
- Authoring tools, such as MadCap Flare, support HTML5.
- Modern browsers support many of the features. See the HTML5 test page to check the overall compabitility ofour browser. And see When can I use… to check specific HTML features. For mobile browsers, see Mobile HTML5.
- PageSpeed is a great tool for analysing the speed of your page and telling you what to do to fix the performance. It’s an add-on that you need to install.
- For getting started, Peter recommends HTML5 Boilerplate, which includes a complete set of templates for a web page. It includes years of learning about best practices.
- Modernizr gives you a library of feature support detection. It will pull in extra code for browsers that do not support the feature. Also HTML5 Cross Browser Polyfills.
- There are also a number of mobile emulators that help you develop HTML5 pages for mobile devices.
Above are the notes that I took during Peter’s presentation. There was a lot more that I didn’t have time to capture. Peter has posted his slides on SlideShare. Thank you to Peter for a very interesting presentation, full of useful tips.
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:
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.
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.
- 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.
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.
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.
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.
- 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“.
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 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.
That’s all you need in your doctype element, to make a document HTML5!
The page structure is familiar to anyone who has created an HTML page:
<!doctype html> <html lang="en"> <head> </head> <body> </body> </html>
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.
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. 🙂