Get Ready for HTML 5
See what others have done
The first thing you can do to prepare for HTML 5 is see how other people are using it. A visit to the HTML 5 gallery will show you how several sites are already using the new HTML 5 elements. Use the source, Luke!Now you do it
You can look at the sites, read all the articles here and elsewhere, and even read the specification—but none of that will help you understand HTML 5 as much as using the new elements. You can modify part of an existing site or experiment by creating new pages. I did this myself by updating a trip report I made for friends and family. (I never intended it for public display, but here it is.)By doing this, you’ll find out what works and what doesn’t. For example, I discovered that, as of this writing, Firefox 3.5 treats elements like
article and section as display:inline, and I had to explicitly set them to display:block to make them work as expected.X marks the spot
If you are like most designers, you probably don’t write all your markup by hand. But until the tools you use catch up to the new elements in (X)HTML 5, you will be doing some markup by hand while you learn. There’s been a bit of confusion (and controversy!) about the relationship between HTML 5, XHTML 1.0/1.1, and XHTML 5. Let’s clear that up right now.HTML 4.0 (the markup language we all know and love) is based on a “rulebook” called SGML. In the SGML rulebook, element names are not case sensitive, you can have elements with optional closing tags (like
<p>), and you can have attribute values without quotation marks. XHTML 1.0 and 1.1 are based on a rulebook called XML. In the XML rulebook, element and attribute names are case sensitive, every opening tag must have a closing tag, and attribute values must be quoted.HTML 5 defines a markup language that isn’t based on either rulebook, but that can be written in either “HTML form” (or serialization, as the spec calls it) or “XHTML form.”
When you write markup in HTML form, you are allowed to leave off some closing (and opening!) tags, you don't have to quote attribute values if they don’t contain blanks, and element and attribute names aren’t case sensitive. You also get to use some of the XML markup; you can have a trailing slash on elements like
<img /> or <hr />.When you use the XHTML serialization, you have to follow the XML rules mentioned a few paragraphs ago.
I suggest that you write your markup in XHTML 5, or, if you use HTML 5, do the markup as if it were XHTML. You will be better off staying with the XML standard that requires a closing tag for each opening tag rather than spending your time optimizing markup for tags that have optional closing and/or opening tags. Similarly, quote all your attribute values rather than trying to decide when you can leave the quotes off. In addition to not having to waste neurons on those decisions, your markup will be more consistent.
Once the automatic markup generation tools catch up, you may still want them to generate XHTML 5 rather than HTML 5. Use of XML is forward-looking; its namespaces allow you to have “polyglot documents” that consist of multiple markups beyond the RDFa, MathML, and SVG of HTML 5. You can also use tools such as XPath, XSLT, and XQuery on XML-based markup, using any XML parser of your choice (though there is a Java-based parser that will process plain HTML 5).
Of course, it’s not all good news. If you do go with XHTML 5, remember that your server must deliver the documents with a MIME type of
application/xhtml+xml or text/xml. This may involve negotiation with your hosting service. Also, when you deliver an XML file, any syntax error will cause an error message.
Fig. 1. XML parse error for mismatched tags.
Regular expressions
HTML 5 extends theinput element by offering new attributes that allow you to specify what data you will allow as input. These attributes include min and max (to set a numeric range), and HTML 5 also offers new values for the type attribute, such as url, email, date, and time.If none of these new input types suits your needs, HTML 5 provides the
pattern attribute for input elements with type="text". The value of the pattern attribute is a regular expression, as defined in ECMAScript and used in JavaScript. Regular expressions are a concise and perhaps somewhat cryptic way of specifying a pattern of characters. For example, if I want to match a five-digit or nine-digit US ZIP code or a six-character Canadian postal code, I can use this pattern:([0-9]{5}(-[0-9]{4})?)|([A-Z][0-9][A-Z]\s+[0-9][A-Z][0-9])
The new web form capabilites are partially implemented in Safari and Chrome, and completely in Opera (see this site for browser capability information). Don’t worry if your browser does not yet support the form extensions for HTML 5; you can download Google’s Web Forms 2 and off you go!Here is a sample form that validates a date and a postal code:
<p>
Enter a date: <input type="date" name="day"
required="required"
title="Use format yyyy-mm-dd" />
</p>
<p>
Enter a US or Canadian Postal Code:
<input type="text" name="postCode"
required="required"
pattern="([0-9]{5}(-[0-9]{4})?)|([0-9][A-Z][0-9]\s+[A-Z][0-9][A-Z])"
title="US: 99999-1234; Canadian: 0A1 B2C" />
</p>
Regular expressions are well worth the time it takes to learn them. Many text editors offer integrated regular expression search-and-replace features, and once you start using them, you’ll wonder how you ever got along without them.Static art with SVG
Fig. 2. Image of SVG showing colored shapes.
You can already link to an SVG file in Firefox 3.5. That graphic is a bit complex—here’s a much simpler one (see Fig. 2) showing some simple colored shapes.
And here’s the SVG that generates it:
<svg xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 200 100"
width="200px" height="100px">
<circle cx="50" cy="50" r="30"
style="stroke:none; fill:#ff0000;"/>
<g transform="translate(100, 20) scale(1.65)">
<polygon points="36 25, 25 36, 11 36, 0 25,
0 11, 11 0, 25 0, 36 11"
style="stroke:none; fill:#0000ff;" />
</g>
<rect x="60" y="20" height="60" width="60"
style="stroke:none; fill:#00ff00;
fill-opacity: 0.5;" />
</svg>
While it is possible to use JavaScript to dynamically modify an SVG graphic, HTML 5 provides a better solution:
The blank canvas
The canvas element is one of the most exciting features of HTML 5, and it’s supported by Firefox, Safari, Opera, and Chrome—but not Internet Explorer. (Color me surprised.) The canvas element is truly a forward-looking feature. You use JavaScript to draw whatever you need on this (literally) blank canvas.Here’s the same graphic as the SVG graphic, only on a canvas:
Sorry, but your browser does not support
<canvas> :(function drawSimpleCanvas() {
var canvas =
document.getElementById("simpleCanvas");
if (canvas.getContext) {
var ctx = canvas.getContext("2d");
ctx.beginPath(); // the circle
ctx.fillStyle = "#ff0000";
ctx.arc(50, 50, 30, 0, 2*Math.PI, true);
ctx.closePath();
ctx.fill();
ctx.save();
// move and resize the octagon
ctx.translate(100, 20);
ctx.scale(1.65, 1.65);
ctx.fillStyle = "#0000ff";
ctx.beginPath();
ctx.moveTo(36, 25); ctx.lineTo(25, 36);
ctx.lineTo(11, 36); ctx.lineTo(0, 25);
ctx.lineTo(0, 11); ctx.lineTo(11, 0);
ctx.lineTo(25, 0); ctx.lineTo(36, 11);
ctx.closePath();
ctx.fill();
// restore graphics as they
// were before move and resize
ctx.restore();
ctx.fillStyle = "#00ff00";
ctx.globalAlpha = 0.5;
ctx.beginPath();
ctx.rect(60, 20, 60, 60);
ctx.closePath();
ctx.fill();
}
}
Here is a <canvas> that demonstrates simple user interaction:Sorry, but your browser does not support
<canvas> :( canvas element with associated JavaScript to let the reader enter a set of numbers and show her that the mean is the “balance point” is much more effective.canvas element’s capabilities. See Mozilla’s Canvas tutorial for a more thorough introduction as well as links to examples.
No comments:
Post a Comment