Blog Archives

Redirecting anchor links on web pages

I’ve recently discovered that it’s not possible to do a server-side redirect for anchor links on web pages! The reason is that the anchor part of the URL (the part containing the “#” and anchor name) is not sent back to the server. Not ever!

This is what happened to me recently: I had a long document, presented in one long web page. I decided to split it into two pages. A number of the headings had IDs which act as anchor links, and we know that external documents link to those anchors. I could fix any incoming links in our own documents, but not in the unknown number of documents out there on the world wide web.

This is a prime case for a redirect, or so you’d think.

An example

Let’s say I have a page called “Ice Floes“, and  I have the following HTML in my document:

<h2 id="penguin_joke">Penguins are cool</h2>
<h3 id = "introduction">Introduction</h3>
Did you hear the one about the penguins on an ice floe?
<h3 id="story">The story</h3>
<p>There are two penguins on an ice floe, 
drifting north into warmer waters. 
These penguins are very fond of each other, 
but they don't speak English very well.
Suddenly, with a terrific crack, 
the ice floe splits in half, right between the penguins. 
As they begin drifting apart, one penguin 
sadly waves a flipper and calls out, 
"Chocolate milk!"</p>

It’s quite feasible that there’d be incoming links to this document, like this:

Read all about the 
<a href="http://example.com/icefloes#penguin_joke">cool penguins</a>.

That’s called an “anchor link” because it points to a specific anchor in the page. In this case, the anchor is a heading ID.

Now let’s say I want to move the penguins to a page all of their own, called “Penguins“. I’d like to redirect the relevant links to the new page. So, dear server, please redirect all links of this form:

http://example.com/icefloes#penguin_joke

To something like this:

http://example.com/penguins#joke

Or even redirecting to the top of the new page would do:

http://example.com/penguins

So, what’s the problem?

The server can only redirect the link at page level. It cannot redirect incoming anchor links, because it never sees the anchor part of the URL.

For a link like this:

http://example.com/icefloes#penguin_joke

The browser only sends the server this:

http://example.com/icefloes

That’s right! The browser removes the anchor, stores it, and then puts it back when it needs it. Huh, who’d a thunk it.

Is there a workaround?

In my case, I’m lucky because the original page will still be there. So I’ve left a heading in the page, with a textual explanation and a link for people to click. Manual redirection.

I’ve also added a bunch of dummy, empty <div> sections with IDs, to cater for all the subheadings that used to exist within the section. This will bring all relevant incoming links to the same part of the original page, and people can click through to get to the right place. Ugly, but at least the readers will find their way to the right place.

This is what the updated, minimised section would look like, on the original “Ice Floes” page:

<h2 id="penguins">Penguins</h2>
<div id="penguin_joke"></div>
<div id="introduction"></div>
<div id="story"></div>
<p>Read all about penguins in the 
<a href="http://example.com/penguins">dedicated penguins document</a>.</p>

If I wanted to, I could also add explicit references to each section of the new page, but in my case that was too much text.

Client-side workarounds using JavaScript

If you can add JavaScript to your page, you can write your own redirects on the page. This question on Stack Overflow has some good answers.

Any more?

I hope this post is useful to someone who may run into the same problem as I did. If you have any more tips to share, I’d love to hear them.

A pretty flower from yesterday’s bush walk:

Redirecting anchor links

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.

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

%d bloggers like this: