Taking Web Audio Offline in iOS 6 Safari

Playing cached audio for offline use on iOS Safari has long been a challenge that has proved to be mission impossible. But with the advent of the (WebKit-only) Web Audio API, it is now finally achievable — although you still need to jump through a few hoops.

The bad news is that you still can’t cache an MP3 file using Application Cache and then simply load it using an

. Safari on iOS 6 will cache the MP3 but then refuse to play it and fail silently (how useful!).

But all is not lost…

Details

Review: Pro HTML5 Accessibility by Joshue O Connor

Pro HTML5 Accessibility is an exhaustive book. Author Joshue O Connor is senior accessibility consultant with National Council for the Blind of Ireland’s Centre for Inclusive Technology and a stalwart of many W3C working groups.

Don’t be afraid of the title. The book doesn’t assume that you’re a professional accessibility expert – quite the opposite; the first 100 pages don’t really deal with HTML5 at all, but survey the landscape of disability, assitive technologies and W3C WAI-ARIA. The last chapters of the book usefully survey testing methodologies and tools which will be invaluable to the lone developer told “oh, and it must be accessible/ DDA-/508-compliant, too”.

Details

Simplequiz #7: Pinterest

One of our readers commented on an article a while ago (I won’t tell you which one just now 😉 asking about marking up items on Pinterest. It struck me that this would be a prime candidate for a Simplequiz, so here we are.

Pinterest, for the uninitiated of you, allows you to organise and share things you love — mostly food, drink, and kittens.

Details

The progress element

When building web sites and web applications, we often need to provide essential feedback to a user informing them of the progress of their request or task, be it uploading a file, playing a video, or importing data.

HTML5 makes life easier for us by defining an element whose sole purpose is just that: the

element.

The HTML5 specification describes it best:
The progress element represents the completion progress of a task.
The task itself is irrelevant, but displaying its progress is not.

Details

HTML5 forms introduction and new attributes

No doubt you interact with at least one form on the Web every day. Whether you’re searching for content or logging in to your e-mail account or Facebook page, using online forms is one of the most common tasks performed on the Web. As designers and developers, creating forms has a certain monotony about it, particularly writing validation scripts for them. HTML5 introduces a number of new attributes, input types, and other elements for your markup toolkit. In this article we’ll be focussing on the new attributes with a future article looking at the new input types.

As we’ll see, these new features will go a long way toward making your life easier while delivering a delightful user experience. The best thing about all this? You can start using them now. We’ll start with a (very) brief history of HTML5 forms though.

Details

HTML5 forms input types

In the first article in this series we looked at the history of HTML5 forms and many of the new attributes available to us. In this second and final part of the series, we’ll look at the new input types available in HTML5. As we’ll see, these new features will go a long way toward making your life easier while delivering a delightful user experience. The best thing about all this? You can start using them now.

This is article is an excerpt from Chapter 6 of Beginning HTML5 and CSS3: The Web Evolved by Christopher Murphy, Oli Studholme, Richard Clark and Divya Manian, published by Apress.

Details

How to mark up subheadings, subtitles, alternative titles and taglines

If you don’t already know, the hgroup element is obsolete in HTML5. Advice is now provided in the HTML spec on how to mark up subheadings, subtitles, alternative titles and taglines using existing and implemented HTML features. Russian Translation of this article: Разметка для подзаголовков by Frontender magazine Advice for marking up subheadings and the like The important question for developers is: How do I mark up these buggers???

Details