Archive: May, 2010

You may have noticed a lot of HTML5 vs. Flash talk lately. Substitute HTML5 for HTML5 video.

Frankly, I’m a little baffled by this supposed dichotomy because you don’t have to choose. The way that video works, according to the spec, is for fallback content to be placed between the opening and closing<video> tags. So you can go ahead and use object or embed or whatever you need to put your Flash video in your markup. Browsers that understand the video element will use that while less capable browsers will play the Flash movie in the object element (and because of the way the object element works, you can put yet another layer of fallback content between the opening and closing <object> tags).

It’s the same with audio. So, on Huffduffer, for example, I can wrap <audio> tags around the object element that embeds the Flash player:

<audio controls src="file.mp3">
 <object data="flashplayer.swf?audio=file.mp3">
  <param name="movie" value="flashplayer.swf?audio=file.mp3">
  <a href="file.mp3">ah, just download it</a>
 </object>
</audio>

But there’s a problem. Firefox understands the audio element but refuses to implement support for MP3 as long as it is patent-encumbered. Firefox users don’t get the fallback content (because the browser does support audio) but they don’t get the MP3 either. They get a broken icon.

So it’s safer to just use the Flash player, right? There’s a problem with that too. Mobile Safari doesn’t support Flash …but it does support the audio element. How can I serve up Flash to desktop browsers and HTML5 audio to the iPhone and iPad without going down the dark path of browser sniffing?

Easy. Just flip the order of what constitutes fallback content:

<object data="flashplayer.swf?audio=file.mp3">
 <param name="movie" value="flashplayer.swf?audio=file.mp3">
  <audio controls src="file.mp3">
   <a href="file.mp3">ah, just download it</a>
  </audio>
</object>

That works in Firefox—and any other browser with Flash installed—and it also works on the i(Pad|Phone|Pod).

Last week, on Richard’s recommendation, Jessica and I went out to eat at relatively new Kemp Town establishment, The Ginger Dog—all in the name of research for Prinicipia Gastronomica of course.

Being relatively new to this neighbourhood, I wanted to make sure we didn’t go astray. I don’t have an iPhone but I do have an iPod Touch so, before leaving the house, I loaded up the map app with walking directions.

Even though I didn’t have 3G, or even WiFi, to help me on my perambulation, the iPod Touch does have triangulation. So every time I checked the map, a blue dot marked my spot. I just had to make sure that the blue dot didn’t stray off the purple line.

On the way back, I opened up the map app again to retrace my steps. This time, the map tiles didn’t load. But my route home was still marked in purple, and the blue dot still showed my position.

That’s when I realised that all the other information on the map—the streets and landmarks—were irrelevant to the task of navigating my way from A to B. All I needed to do was keep the blue dot on the purple line. It’s the minimum information density for wayfinding: the mapping equivalent of a sparkline.

I spent the weekend immersing myself in HTML5 and CSS3.

I gave Principia Gastronomica a bit of a fine-tuning under the hood. I decided to ditch all the background images I was using to get rounded corners and drop shadows, and just use border-radius and box-shadow instead. Internet Explorer gets the same content with more pointy corners and without the illusion of depth.

I also launched a brand new site: ScienceHackDay.org. It’s a small little site designed to quickly dispense relevant information on the upcoming geektastic Science Hack Day in London on June 19th and 20th.

The front page is also a blog. I’ll be posting updates about the event there and I’ll also be highlighting science projects and hack ideas. Subscribe to the feed if you want get updates.

I couldn’t be bothered installing or writing blogging software for the site. It seemed like overkill for such a quick’n’nimble project so I’m just blogging in HTML using hAtom. It’s converted to Atom using Luke Arno’s handy service. I was going to use the transcoder on Microformatic.com but I think it uses Tidy which means it won’t work on the new HTML5 elements.

The underlying structure is a combination of microformats, HTML5 structural elements and ARIA roles. The styling is over-the-top CSS3. There’s border-radius, opacity and RGBa a-plenty. Setting colours using opacity and alpha transparency makes it a breeze to customise the colours on each page, so the schedule, location and not-so-FAQ pages all have a slightly different tint.

Internet Explorer doesn’t get any of this colourful or roundy goodness. It does however, get the typography and layout, much like the print stylesheet view. I wouldn’t do that for client work but I’m perfectly happy to do it for a weekend project.

Check out the site and if you decide that Science Hack Day looks like your kind of event, add your name on the wiki.

You can also follow @sciencehackday on Twitter to get bite-sized updates as they happen.

I had the pleasure of joining hosts Dan and Jeffrey for the second episode of The Big Web Show.

We talked about Pete Townsend and cats that look like Hitler but mostly we talked about HTML5. Specifically, we talked about what’s between the covers of HTML5 For Web Designers.

The audio is available for your huffduffing pleasure so go ahead and huffduff it if you fancy an hour’s worth of three-way markup action.

In 01992, Tim Berners-Lee wrote a document called HTML Tags.

In September 02001, I started keeping this online journal. Back then, I was storing my data in XML, using a format of my own invention. The XML was converted using PHP into (X)HTML, RSS, and potentially anything else …although the “anything else” part never really materialised.

In February 02006, I switched over to using a MySQL database to store my data as chunks of markup.

In February 02007, Tess wrote about data longevity

To me, being able to completely migrate my data — with minimal bit-rot — from system to system is the key in the never-ending and easily-lost fight to keep my data accessible over the entirety of my life.

She’s using non-binary, well-documented standards to store and structure her data: Atom, HTML and microformats.

Meanwhile, the HTML5 spec began defining error-handling for HTML documents. Ian Hickson wrote:

The original reason I got involved in this work is that I realised that the human race has written literally billions of electronic documents, but without ever actually saying how they should be processed.

I decided that for the sake of our future generations we should document exactly how to process today’s documents, so that when they look back, they can still reimplement HTML browsers and get our data back, even if they no longer have access to Microsoft Internet Explorer’s source code.

In August 2008, Ian Hickson mentioned in an interview that the timeline for HTML5 involves having two complete implementations by 02022. Many web developers were disgusted that such a seemingly far-off date was even being mentioned. My reaction was the opposite. I began to pay attention to HTML5.

HTML is starting to look like a relatively safe bet for data longevity and portability. I’m not sure the same can be said for any particular flavour of database. Sooner rather than later, I should remove the unnecessary layer of abstraction that I’m using to store my data.

This would be my third migration of content. I will take care to head Mark Pilgrim’s advice on data fidelity:

Long-term data preservation is like long-term backup: a series of short-term formats, punctuated by a series of migrations. But migrating between data formats is not like copying raw data from one medium to another.

Fidelity is not a binary thing. Data can gradually degrade with each conversion until you’re left with crap. People think this only affects the analog world, like copying cassette tapes for several generations. But I think digital preservation is actually much harder, in part because people don’t even realize that it has the same issues.

He’s also betting on HTML:

HTML is not an output format. HTML is The Format. Not The Format Of Forever, but damn if it isn’t The Format Of The Now.

I don’t think that any format could ever be The Format Of The Long Now but HTML is the closest we’ve come thus far in the history of computing to having a somewhat stable, human- and machine-readable data format with a decent chance of real longevity.

I took part at an event held last week in the same building as the Clearleft office. It was called Debating the Digital Economy Act …except it wasn’t really a debate. Everyone was in agreement that the legislation is dreadful and that the way it has been rushed through parliament was a travesty.

Nonetheless, it was still a valuable gathering. Instead of debating on the pros and cons of something that has no redeeming qualities, we tried to tackle the issue of what we can do about it.

One of the best points of the night came from Pete who pointed out how important it was that we de-geekify the discussion lest we get brushed aside as pitchfork-wielding digerati.

The event began with opening remarks from each of the white, middle-aged panelists. My own remarks were definitely on the geeky side: a long-zoom perspective entitled Fear is the Mind-killer. You can read it now or add it to Instapaper to read later.

I made an audio recording of my opening remarks. You can listen to it now or you can huffduff it to listen to it later.

It’s licensed under a Creative Commons attribution license. Do with it as you wish.

For the third time in my life, I have written a book. HTML5 For Web Designers is available for pre-order now from A Book Apart.

That’s right—the same lovely people who brought you A List Apart are now delivering good ol’-fashioned dead tree publications.

The quality and craftsmanship of the resultant book is, as you would expect, stratospherically high. How could it not be given the team of superheroes who put it together:

• Jason Santa Maria is the designer,
• Mandy Brown is the editor and
• Jeffrey Zeldman oversaw the whole process.

Working with them has been an honour and a pleasure. I’m certain that is their generosity that spurred me on to deliver what is, in my opinion, the best thing I have ever written.

It’s not a long book. It’s about 16 kilowords long. That’s a feature, not a bug.

If I had more time, I would have written a shorter letter.

Whether that quote is attributable to Cicero, Twain or Pascal, it speaks to a real truth in writing. Omit needless words said William Strunk. Or, as Orwell wrote in Politics and the English Language:

If it is possible to cut a word out, always cut it out.

But that doesn’t mean that HTML5 for Web Designers is a mere exercise in brevity and information density. It’s also quite fun.

Fun isn’t a word that you often hear associated with technical subjects like markup languages but I knew that if I wanted to appeal to the right audience for this book, I had two watchwords:

1. It has to be brief.
2. It has to be entertaining.

That’s where the team behind A Book Apart really helped me.

I started with the first chapter and wrote it in my voice. This is usually the point at which a traditional publisher would respond with suggestions for improvements to the writing style to make itappeal to a wider audience …resulting in a watered-down bland shadow of the original.

Jeffrey, Mandy and Jason responded with so much enthusiasm and encouragement that I felt I could continue to just be myself when writing this book. The result is something I am truly proud of.

Given its brevity, HTML5 for Web Desigers is obviously not an exhaustive look at everything in HTML5. There is no mention of offline storage, drag’n’drop or any of the other advanced JavaScript APIs. Instead, I’ve focused on forms, rich media, and most importantly, semantics. The book is intended as a primer for web designers who are hearing a lot of conflicting and confusing things about this strange amalgamation of technologies called HTML5. I hope to bestow some measure of clarity and understanding.

The first hit is free. You can read chapter one, A Brief History of Markup, on A List Apart.

Jason describes the design process, Mandy tells of the business aspect and Jeffrey has written a very kind and flattering overview of the book. You can pre-order your copy now.

As excited and proud as I am of HTML5 for Web Designers, is it wrong that I am equally excited that the book is also an item on Gowalla?

Every so often I’ll read something on the web that somebody else has written and I’ll think Yes! That! That’s what I’ve been trying to say!

I’ve already told of experiencing just that whilst reading Raiding Eternity. Now I’ve experienced it again. This time the culprit is Ben Ward, the talented bastard.

He reeled me in with the synopsis of his latest article. It’s called Understand The Web:

Perceptions of the web are changing. People are advocating that we treat the web like another application framework. An open, cross-platform, multi-device rival to Flash and Cocoa and everything else. I’m all for making the web richer, and exposing new functionality, but I value what makes the web weblike much, much more.

On the one hand, it’s a straightforward fact-check and slap-down for the factually-incorrect nonsense being spouted on Twitter and elsewhere by those who are reconstructing the history of the web as a work of fiction spun in the own minds to match their misunderstandings of how browsers and standards bodies work. As Ben puts it:

This is the short, perhaps selective memory that the internet suffers from. It is not acceptable to me that 21st century knowledge retention has become so short and shallow as to be overwritten by influential ranting on Twitter. A greater tool for the dissemination of misinformation has never been known.

But the real reason why you should read Ben’s piece is that it encourages all of us to take a step back and think about what the web really is. It’s not just a choice of platform for building applications (whatever that means), it’s so much more:

Want to know if your ‘HTML application’ is part of the web? Link me into it. Not just link me to it; link me into it. Not just to the black-box frontpage. Link me to a piece of content. Show me that it can be crawled, show me that we can draw strands of silk between the resources presented in your app. That is the web: The beautiful interconnection of navigable content. If your website locks content away in a container, outside the reach of hyperlinks, you’re not building any kind of ‘web’ app. You’re doing something else.

I could quote the whole thing, so perfectly does it map to my own feelings and thoughts on the web, but instead I urge you to go to Ben’s site, read what he has written and understand the web.