Useful links: Flash vs. HTML 5, Creative Suite 5, Women in Tech on Flickr

With typical hyperbole, the news of late has been filled with headlines like “Flash is dying” and “Apple kills Adobe Flash.” Well, here’s a headline that shows that Adobe hasn’t been asleep at the wheel in quite the manner all the iPad prognosticators thought: Flash CS5 with export to HTML5 Canvas.

While we’re talking about Adobe and CS5, today is the big day to reveal all the hot new features in CS5. Start here at the Adobe blog and at the product descriptions to find more about what the latest Creative Suite promises to do. People have been talking about some of the new features in Photoshop for a while already, but I’m more interested in seeing what’s happening with Dreamweaver.

The Women in Tech pool I started on Flickr is growing. If you have some photos of women in tech you’d like to share, please add them to the group.

Tip: HTML5 markup for blog posts

Writing about HTML5 while it is still in a state of flux is like standing upright on a water bed while shooting a carnival rifle at a moving row of ducks. What I’m about to tell you is based on the HTML 5 working draft dated 4 March 2010.

In HTML5 terms, the <article> element is considered sectioning content, as is the <section> element. Authors are encouraged to use the article element instead of the section element when it would make sense to syndicate the contents of the element. A blog post, therefore, makes the most semantic sense to me when it is marked up as an <article> element. It can be syndicated as a unit.

An <article> element can include a <header> element, which could contain  <h1> through <h6> elements marking up things like the article title, author’s name, publication dates, and other material that makes sense. Within a <header> element, you can nest an optional <hgroup> element, which is header group, or a related group of elements within a <header>. In HTML5, each <article> can have its own <header>.

An <article> element can include a <footer> element. The <footer> could contain links to comments, various permalinks, options to share the post on Twitter or Facebook or StumbleUpon, an hCard, or other material relevant to the article content. In HTML5, each <article> can have its own <footer>.

Based on that background information, here’s sample markup for one way to format a blog post with HTML5. I suggest a few ways to add content, but there are many more ways to deal with this. For example, you might want the pubdate in the footer.

<article>
<header>
<a href="#" rel="bookmark" title="post title"><h1>Article title</h1></a>
<h2>Author's name</h2>
<p>Published <time pubdate datetime="2010-03-26T18:26-07:00"></time>.</p>
</header>
<p>A lot of great article content.</p>
<footer>
Footer info here: comment links, whatever.
</footer>
</article>

Useful LInks: 7 HTML Working Drafts, CSS border radius, JQuery

Seven HTML related working drafts published is reported on 456 Berea Street. The HTML 5 differences from HTML 4 draft was especially interesting to me.

Students may like CSS Border Radius. Insert a value for all corners or individual corners and grab the code. For those who don’t like typing.

Sitepoint is doing a series on jQuery for newbies. So far they’ve published Part 1 on selecting elements and manipulating CSS and Part 2 on progressive enhancement and the DOM.

Useful links: Text alternatives, IE6 funeral, accessible Twitter

HTML5: Techniques for providing useful text alternatives is a new draft from the W3C written by Steve Faulkner. It gives tips and many excellent examples of best practices in the use of alternative text.

How to have fun in Denver on March 4: attend the funeral for IE6. Yep, sounds like a fun party. Information at IE6 Funeral. May I add for all of us, “Good riddance!”

Accessible Twitter is now online in beta. Accessible Insights blog had A word with the accessible Dennis Lembree on Accessible Twitter talking about it, and offering a couple of interesting links.

HTML5 working draft on italic and bold

As a comment to  em and his buddy strong, Tony Fahnestock sent a tweet mentioning the way the elements <i> and <b> are being treated in the working draft of HTML5 in a section called “text-level semantics.”

Here’s how the <b>, or bold, element is defined there.

The b element represents a span of text to be stylistically offset from the normal prose without conveying any extra importance, such as key words in a document abstract, product names in a review, or other spans of text whose typical typographic presentation is boldened.

The following example shows a use of the b element to highlight key words without marking them up as important:

<p>The <b>frobonitor</b> and <b>barbinator</b> components are fried.</p>

In the following example, objects in a text adventure are highlighted as being special by use of the b element.

<p>You enter a small room. Your <b>sword</b> glows
brighter. A <b>rat</b> scurries past the corner wall.</p>

Another case where the b element is appropriate is in marking up the lede (or lead) sentence or paragraph. The following example shows how a BBC article about kittens adopting a rabbit as their own could be marked up:

<article>
 <h2>Kittens 'adopted' by pet rabbit</h2>
 <p><b>Six abandoned kittens have found an unexpected new
 mother figure — a pet rabbit.</b></p>
 <p>Veterinary nurse Melanie Humble took the three-week-old
 kittens to her Aberdeen home.</p>
[...]

The b element should be used as a last resort when no other element is more appropriate. In particular, headings should use the h1 to h6 elements, stress emphasis should use the em element, importance should be denoted with the strong element, and text marked or highlighted should use the mark element.

I want to emphasize this sentence: The b element should be used as a last resort when no other element is more appropriate. When semantic meanings are considered, almost any other element is probably more appropriate.

Let’s stray off topic a moment to talk about <mark>. The <b> is defined as a stylistic element that conveys no extra meaning. A new element, <mark> is suggested for highlighting text. Here’s what the working draft says about <mark>:

The mark element represents a run of text in one document marked or highlighted for reference purposes, due to its relevance in another context. When used in a quotation or other block of text referred to from the prose, it indicates a highlight that was not originally present but which has been added to bring the reader’s attention to a part of the text that might not have been considered important by the original author when the block was originally written, but which is now under previously unexpected scrutiny. When used in the main prose of a document, it indicates a part of the document that has been highlighted due to its likely relevance to the user’s current activity.

Semantically speaking, it seems to me that <mark> conveys meaning for highlighting text to a greater degree than <b>, which is used for stylistic reasons in HTML5, as it has been in HTML4 and XHTML.

Back to the <i>, or italics, element. From the working draft:

The i element represents a span of text in an alternate voice or mood, or otherwise offset from the normal prose, such as a taxonomic designation, a technical term, an idiomatic phrase from another language, a thought, a ship name, or some other prose whose typical typographic presentation is italicized.

Terms in languages different from the main text should be annotated with lang attributes (or, in XML, lang attributes in the XML namespace).

The examples below show uses of the i element:

<p>The <i>Felis silvestris catus</i> is cute.</p>
<p>The term <i>prose content</i> is defined above.</p>
<p>There is a certain <i lang="fr">je ne sais quoi</i> in the air.</p>

In the following example, a dream sequence is marked up using i elements.
<p>Raymond tried to sleep.</p>
<p><i>The ship sailed away on Thursday</i>, he dreamt. <i>The ship had many people aboard, including a beautiful princess called Carey. He watched her, day-in, day-out, hoping she would notice him, but she never did.</i></p>
<p><i>Finally one night he picked up the courage to speak with her—</i></p>
<p>Raymond woke with a start as the fire alarm rang out.</p>

Authors are encouraged to use the class attribute on the i element to identify why the element is being used, so that if the style of a particular use (e.g. dream sequences as opposed to taxonomic terms) is to be changed at a later date, the author doesn’t have to go through the entire document (or series of related documents) annotating each use. Similarly, authors are encouraged to consider whether other elements might be more applicable than the i element, for instance the em element for marking up stress emphasis, or the dfn element to mark up the defining instance of a term.

This definition of <i> offers more proper uses for the <i> element in ways that do provide limited semantic underpinnings. Use <i> to offset text from the normal prose in ways that indicate “taxonomic designation, a technical term, an idiomatic phrase from another language, a thought, a ship name” but not as a way to highlight text (use <mark> for that) or a way to emphasize text (use <em> for that) or a way to indicate the defining instance of a word (use <dfn> for that).

With the addition of a class attribute or a lang attribute, the <i> element can be made even more semantically self-explanatory.  HTML4 and XHTML both already encourage the lang attribute when italics are used to indicate another language, so this is not new to HTML5.

Useful links: SVG, location aware, video

Two articles on using SVG for backgrounds by Shelley Powers are at A List Apart this week. Using SVG For Flexible, Scalable, and Fun Backgrounds, Part I and Using SVG for Flexible, Scalable, and Fun Backgrounds, Part II. You learn when to use it, where it works, how it works, tools to build it, and code examples.

Through the location lens, do you exist? at Return on Intention asks, “What would your customer’s phone say you are all about?”

video for everybody at Camen Design gives code examples for the HTML5 <video> element, which offers native playback in Firefox 3.5, Safari 3 & 4, and Google Chrome.

Useful Links: Microformats, HTML5 Mess, gender issues, accessibility conference, CSS spirites, Twitter in class

Microformats Workshop is the slides by Emily Lewis from the Workshop Summits event. Outstanding presentation, excellent slides.

SitePoint Podcast #44: HTML5 is a (Beautiful) Mess is a discussion about HTML5 and related issues among Sitepoint’s Kevin Yank, Opera Software’s Bruce Lawson, author Ian Lloyd, and Kyle Weems  of the CSSquirrel web comic.

whose voice do you hear? gender issues and success from apophenia is a response to Clay Shirky’s Rant About Women. Read the rant and all the comments before you read what apophenia said.

California Web Accessibility Conference in February is a Knowbility event. That means it will provide you with the best possible accessibility training available anywhere.

CSS Sprites is an online app that will take your images and generate a sprite and the code to make it work. Nice time saver.

Using Twitter to Facilitate Classroom Discussion is about a history class. How could it be used in a web dev or web design class?