Science meets standards: NASA joins the W3C.
Monday, May 31st, 2010
Awe Dee Oh
You may have noticed a lot of
HTML5 vs. Flash talk lately. Substitute
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
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
<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).
Friday, May 28th, 2010
Matt Ridley's new book sounds like a corker.
Thursday, May 27th, 2010
Ascender is selling (and hosting) webfonts now.
Wednesday, May 26th, 2010
Tantek is working with Mozilla now. I expect great things will come of this.
Monday, May 24th, 2010
Mandy's take on Dieter Rams's design principle that "good design is long-lasting."
A nice little case study in using Silverback.
Saturday, May 22nd, 2010
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.
Friday, May 21st, 2010
Use Gowalla? Want a copy of my book? Jeffrey has the details.
Thursday, May 20th, 2010
A handy interface onto The Guardian's new API.
Google-hosted free-as-in-beer webfonts.
A comprehensive report of the excellent first day of UX London.
Mozilla, Opera and Google are collaborating on an open format for audio and video for the web (a wrapper for Vorbis for audio and VP8 for video).
Wednesday, May 19th, 2010
Kellan outlines the bare minimum you should expect from any service that you are putting data into.
Tuesday, May 18th, 2010
A handy tool for generating colour palettes from images.
An API for Turing test questions.
Conway's Game of Life, implemented in canvas.
Monday, May 17th, 2010
Are you sitting comfortably? Then I'll begin.
Friday, May 14th, 2010
Some of the best neologisms in programming, many of them to do with bug-fixing.
Anne explains exactly why the HTML parser defined in HTML5 is A Very Good Thing for everyone.
Asteroids in canvas. Works a treat. Now I want Battlezone.
Thursday, May 13th, 2010
Snakes'n'ladders played on the streets of London. Fun!
I'm going to have to start ticking things off this list.
Wednesday, May 12th, 2010
I would really love to go to this. Our planet needs a space elevator.
Tuesday, May 11th, 2010
Henri Sivonen gives the lowdown on the HTML5 parser that will ship with the next version of Firefox. This is a huge development ...and yet users won't even notice it (by design).
I wasted my time writing HTML5 For Web Designers when clearly, this is the best tutorial on HTML5 ever.
Kanji characters that transform into the animal they represent.
Monday, May 10th, 2010
"...after the late Thag Simmons." No, really. It's a proper paleontological term now.
A platform game? A platform for games!
A site for Science Hack Day
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
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
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.
You can also follow @sciencehackday on Twitter to get bite-sized updates as they happen.
A list of services you can use to get your podcast transcribed.
The Big Web Show 2: HTML5 Boogaloo
Sunday, May 9th, 2010
The origins of the blink element are fascinating. To nobody's surprise, alcohol was involved.
Saturday, May 8th, 2010
Of plush toys and tentacle porn.
Friday, May 7th, 2010
I had a lot of fun chatting with Dan Benjamin and Jeffrey Zeldman about HTML5 for Web Designers. Now you can watch the video or listen to the podcast.
Finally! A lint tool for HTML (including HTML5) so you can enforce strictness in your writing style.
The format of The Long Now
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.
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.
He’s using non-binary, well-documented standards to store and structure his 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.
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.
An excellent education resource.
Thursday, May 6th, 2010
Test results for screen readers navigating content that uses new HTML5 elements and ARIA roles.
Wednesday, May 5th, 2010
There is a doctype for HTML4 + ARIA but "This DTD is made available only as a bridging solution for applications requiring DTD validation but not using HTML 5."
A nine-point document that constitutes a "Declaration of Principles Concerning Activities Following the Detection of Extraterrestrial Intelligence."
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.
It’s licensed under a Creative Commons attribution license. Do with it as you wish.
Get a glimpse behind Fontdeck's curtain.
Tuesday, May 4th, 2010
If you do insist on having a captcha, why not make it a bit more interesting? Also: best blog post title ever.
The wonderfully detailed analysis of a colour questionnaire.
Announcing HTML5 For Web Designers
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:
- It has to be brief.
- 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 it
appeal 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.
The first hit is free. You can read chapter one, A Brief History of Markup, on A List Apart.
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?
Sunday, May 2nd, 2010
Fear Is the Mind-killer
These opening remarks were delivered at a debate on The Digital Economy Act held in Brighton in April 2010.
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!
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.
A nice collection of free apps for your mobile device. No app store required, thanks to offline storage.