STC Summit day 1 – Getting started with HTML5

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
  • Toolkit

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?

  • HTML5 is the new major milestone for HTML. It includes things that have earlier been separate specifications, such as JavaScript APIs.
  • 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.

Toolkit:

  • 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.

About these ads

About Sarah Maddox

Technical writer, author and blogger in Sydney

Posted on 22 May 2012, in open standards, STC, technical writing and tagged , , , , , , . Bookmark the permalink. 1 Comment.

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

Follow

Get every new post delivered to your Inbox.

Join 1,447 other followers

%d bloggers like this: