iheni :: making the web worldwide » html5

Interview with Technikwuerze: Unite, accessibility, HTML5, SVG, education and Opera’s role

iheni — Wed, 29 Jul 2009 14:15:13 +0000

Myself and my colleague Navjot Pawara were interviewed by German podcast Technikwuerze. In it Nav covers Opera Unite – what it is and how you can use it and I chat about Opera’s approach to accessibility, HTML5, SVG, development and education.

Aside from a minor glitch in the middle when I seem to disappear altogether it was a fun interview (despite Nav swatting wasps when he was on mute and my having to throw stuffed toys at the dog to stop her snoring).

Big thanks to Dirk Ginader and Sascha Postner for having us on. Links mentioned in the interview are:

Opera Unite – share files by running a server from the comfort of the browser.
Opera Developer Network – articles, blog posts, tools, tips and resources for developers.
ODIN blog – news, views and presentations from the Opera Developer Network.
Opera Labs – a showcase of technologies for tomorrow.
Opera Web Standards Curriculum – tutorials in standards-based Web design, including HTML, CSS, and JavaScript development.

HTML5 Tips: structral elements, Doctype and ARIA

iheni — Fri, 17 Jul 2009 13:05:39 +0000

My site is well overdue a face lift flavoured with HTML5, a dash of ARIA and a healthy dose of WCAG 2.0. As you’d expect playing under the hood with all these things has made me ask a lot of questions so I thought I’d post a few tips along the way that I’ve found have helped with the redesign process (more of which later).

So without further ado:

The
element can be used multiple times on a page and can contain site
and search.
The
element is typically used on every page for the site header and contains an of site name as H1, site tagline as H2 and a logo. Bundled into the
you can also add your primary
as well as search. As the HTML5 specification says:

The header element represents a group of introductory or navigational aids. A header element typically contains the section’s heading (an h1–h6 element or an hgroup element), but can also contain other content, such as a table of contents, a search form, or any relevant logos.

Note that
only really only makes sense when there is a group of heading information (site name, tagline, logo) and is not appropriate for single headings.
The
element and primary navigation
In the HTML5 specification
is defined as follows:

The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links. Not all groups of links on a page need to be in a nav element — only sections that consist of major navigation blocks are appropriate for the nav element.

There has been a lot of discussion around what “major” navigation means (site, section, in page navigation, related links?) and what can legitimately be wrapped in the element and what can’t. General thinking is that “major” refers to global site navigation (About, Services, Products, Contact) as well as sub-navigation. Secondary navigation such as related links or grouped links of resources would not qualify for
.
can be used multiple times in a page.
Typically you’d expect to use a footer at the end of a page housing your copyright and site design information and other bits and pieces.
can also be used for footer information for any section you are in within a page. For example a common usage may be at the foot of a blog post – itself contained in an
– containing information about tags, categories, author, comments and date/time information. The HTML5 specification explains
as follows:

The footer element represents a footer for its nearest ancestor sectioning content. A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like.

Note that the
element can not contain any other sectioning content such as
,
,
or
.
An
can appear within an
.
Possibly one of the more obvious tips but worth a mention anyway. The
element is a container that can in turn contain many parts. For example on a blog posts contained within an
you may have another
housing comments. Designing a blog post with HTML5 from HTML5 Doctor has an excellent overview of this.
Using
The new Doctype in HTML5 is much simpler – and memorable – than previous Doctypes. will render content in standards mode by all modern browsers (IE, FireFox, Opera, Safari) while the good news is that all pre-HTML5 Doctypes are still valid.
HTML5 can be used with WAI-ARIA.
HTML5 and ARIA certainly cross over but should not be seen as contenders. At the moment there is not much know of screen reader support for HTML5 given that the screen reader vendors themselves have not been visible in the development of the spec. This may well be because they are ll racing to implement ARIA which is a priority at this point. This makes sense given that the ARIA is in Last Call – the final stage a specification goes through before it becomes a W3C specification – and as such will be a reality sooner than HTML5.
(Update) HTML5, IE and Firefox 2

IE and Firefox 2 lack native support for structural elements so you’ll need to add in some JavaScript to make it work. In IE you add the following to the head to get IE to behave:

Firefox 2 and Camino can be fixed using JavaScript or by serving Gecko XHTML. Getting HTML5 working on IE and Firefox 2 from HTML Doctor has a good article about how to do this.

This obviously has a baring on whether you want to use HTML5 in your site or not yet. Given FireFox 2 has a tiny market share (most Firefox users upgrade fairly quickly) it’s really your call. The same can’t be said of IE however. I think this is why we are seeing more HTML5 sites in personal websites and blogs rather than corporate websites which have more at stake.

Declaring HTML5 elements
Most modern browsers (Firefox 3+, Safari 3+, Opera 9+, Chrome 1+) are yet to recognise section elements which means problems when laying them out in CSS. To get sections to display properly always use display:block in the CSS:header, nav, section, article, aside, footer {display:block;}

Resources

Being a hot topic right now there are reams of resources and tools being built that cover HTML5. This is my pick of a few that are well established, consistently useful and updated regularly:

HTML5 Doctor - Articles and tips covering HTML5 and its semantics and how to use them. You’re also invited to submit questions for the HTML5 Doctors to answer.
HTML5 Gallery – a showcase of sites using HTML5.
HTML5 cheat sheet – A PDF of HTML tags and attributes together with brief explanations.
HTML5 differences to HTML4 – a W3C resource that does what it says on the tin.
Bruce Lawson – one of the brains behind HTML5 Doctor as well as the ultimate HTML5 cowboy forging ahead with implementing HTML5 and sharing his findings as he goes along. Follow @brucel on Twitter too.
Remy Sharp – Remy’s blog covering things HTML5.
HTML5 demos – set up by Remy Sharpe who focuses on JQuery and HTML5 this is a repository of demos looking at more of the application side of HTML5.
HTML5 Outliner – a nifty tool from @gsnedders that outlines structure in HTML5.
The Paciello Group blog – for the more ARIA minded developer with some HTML5 on the side.

And of course, last but not least the HTML5 Specification.

Opera BBQ, @Media, Standards.Next and HTML5 Doctor

iheni — Mon, 29 Jun 2009 15:10:43 +0000

Last week was one of those busy weeks which was all about conferences and meetups and not a moment of desk time inbetween.

Bruce Lawson does kewai

Molly Holzschlag and Espen André Øverdahl

We kicked off with an Opera BBQ on Wednesday followed by @Media, then rounded off with Standards.Next on Saturday. All in all it was a very HTML5 themed week and thanks to a brilliant mix of people I learnt a lot and finally met some people who I’ve been chatting with over Twitter for some time now.

@Media

@Media rocked and ended on a high note with the announcement that Maxine Sherrin and John Allsopp would be taking over organisation of the event under the Web Directions monika. After so many rumours that 2009 was to be @Media’s last this was a more then welcome thing to hear. A hat tip and huge thank you to Patrick Griffiths’s for building @Media into what it is today.

Jason Santa Maria and Jon Hicks (avec a fetching tash) during the Hot Topics panel

Standards.Next

For me though the highlight of the week was the first ever Standards.Next meetup focusing on HTML5 – the big news so far to come out of 2009 (well at least I think so). We had roughly 60 people show up to help us chew the fat over HTML5, myths, canvass, APS’s, HTML5.js and accessibility. Thank you to all the speakers for making the event more than Bruce and I could have hoped for and also to everyone who showed up on what was a beautiful summer’s Saturday.

Below are a few links for those that didn’t make it and I’ll keep you updated as to when we post video of the event:

Bruce Lawson – HTML 5: Are you mything the point? (.ods, 1.8 M), also on video. Yes you can start using some of HTML5 now, browser vendors aren’t evil, no HTML5 wont kill Flash, Silverlight and JavaScript and HTML5 does love accessibility (it’s just built in not bolted on).
Dean Edwards – Dean presented his excellent html5.js library which will be available soon but you can get a sneak peek on video here. He demo’d implementations of Web Forms 2 that worked across browsers even adopting accessibility settings from the OS for some. An amazing piece of work.
Remy Sharp – HTML5 JS API’s (PDF), demos and video. How JavaScript and HTML5 can play nicely together. With HTML5 taking care of the more mundane uses of JavaScript (date pickers and validation for example), JavaScript Ninja’s can now spend time on the more sophisticated stuff.
Martin Kliehm – HTML5 and Canvas slides, links and video shorts. Martin is the go to man for canvas and presented some great research and use cases that go beyond shoot-em-out games and Etch-a-Sketch.
Steve Faulkner – HTML5 accessibility. The Mighty Steve Faulkner talked about accessibility issues as well as the relationship of WAI-ARIA to HTML5.

Andreas Bovens, Steve Faulkner, Patrick Lauke, PPK and Bruce Lawson during the break

HTML5 Doctor

An extra bonus was the launch of HTML5 Doctor, a collaboration between Rich Clark (of HTML5 Gallery), Bruce Lawson, Jack Osborne, Mike Robinson, Remy Sharp and Tom Leadbetter.

Next for Standards.Next

Plans are yet to be firmed up but we’re looking at doing cognition and accessibility Saturday 19th of September just after Techshare. If you’re interested in speaking or coming a long check the standards.nextwebsite for updates, we’d love to have you come along.

Update 29 June, 2009: Big thank you to Remy who’s managed to video Bruce, Dean’s and his own talks:

Bruce Lawson -HTML 5: Are you mything the point?.
Dean Edwards – html5.js here. He demo’d implementations of Web Forms 2 that worked across browsers even adopting accessibility settings from the OS for some. An amazing piece of work.
Remy Sharp – HTML5 JS API’s.

Yay Factor! Opera MAMA, Standards.Next, Richard Madeley for Speaker, braille displays and Chinese food

iheni — Tue, 19 May 2009 10:00:12 +0000

Hot off the web this week we have:

Opera MAMA – a sneak peek at early results for headings, images and summary.
Combining title and alt text on images – from David Dorward. Just say “no” I say.
Standards.Next – Informal bootcamps about tomorrow’s web standards today (yes, today) kicks off with an HTML meetup June 27th after @Media in London.
Appetite for China – I know I have. Proper authentic recipes…
Refreshable braille displays on the web – a video demo from Bruce Maguire – who took on the Sydney Olympics website for being inaccessible and won.
Vote Richard Madeley for Speaker of the House of Commons – Come on, he needs a new job and we need a new speaker.

Standards.Next – HTML5 meetup Saturday June 27th

iheni — Fri, 15 May 2009 08:42:34 +0000

Standards.Next is a series of meetups around the latest technologies used in front-end development for the web. First up is HTML5.

We’ll be meeting, Saturday June 27th, the day after @Media featuring short talks on the nitty gritty of HTML5, tales from the frontline, the controversies, the agonies and the ecstasies. There’ll be beer on tap at the well loved Bricklayers Arms, just off Tottenham court road, London.

Speakers include Speakers include Dean Edwards, Steve Faulkner, Bruce Lawson, Molly E. Holzschlag, Remy Sharp and myself (if I can get a word in edgeways with that stellar line up).

Topics will include what you can use in HTML5 today, JavaScript APIs, HTML5 and WAI-ARIA integration, accessibility and some exciting announcements.

Signup at standards-next.org, stay tuned for more meetups to be announced (WAI-ARIA, webfonts, SVG anyone?)