Baker ebook Framework

Baker is an open-source HTML5 ebook framework for publishing books on the iPad using open web standards. From the website:

To design for the Baker Framework you just have to build HTML5 pages with a fixed width of 768px and you can unleash the power of WebKit.

That’s all. Use your favorite tools, test it on the iPad from Safari, refine as much as you want.

It seems to have a workflow – which is being refined – which allows you to easily compile your HTML5 as an application which is ready for submission to the Apple spp store.

Mashable has a short feature on the framework:

“HTML5 is out there,” co-founder Davide Casali wrote us in an e-mail. “Why is nobody really making the convergence between the publishing industry and the web, and why are we confined to those crappy designed epubs?” he asks.

Casali and his team hope their creation will lead to more beautiful e-books and digital magazines on the iPad, and for other WebKit-enabled devices later.

Ber interesting to see how this develops and what gets created with it. I’m sure the fact that it’s being released under a BSD license will encourage plenty of experimentation.

Editing Flip camera footage in Final Cut Pro

I love my Flip camera – it’s portable, instant-on nature makes it ideal for throwing into my pocket whenever I might have something to film in a hurry.

Because it records in an MPEG 4 format though, it doesn’t provide the easiest files for editing. The software provided with the camera is OK for most things (and it’s great to be able to upload directly to YouTube et al), but when it comes to editing which involves anything more complex than just stringing a bunch of clips together, I need to fall back on something more powerful.

Final Cut Pro is my primary weapon of choice when it comes to video, but it doesn’t natively handle MPEG 4 files very well – and nor should it: MPEG 4 is a hefty codec intended for distribution.

So I’ve had to come up with a little workflow to convert that lovely Flip footage into something which will play nicely with Final Cut Pro. MPEG Streamclip to the rescue!

I love MPEG Streamclip – it’s my swiss army knife for doing any kind of video file wrangling. It’ll handle pretty much any file conversion job you can throw at it, and always comes to the rescue when I need to format A isn’t playing nicely with format B.

So, to get that Flip footage working with FCP, it’s just a case of firing up MPEG Streamclip and opening the a source Flip file (once you’be got them saved to a folder on your hard drive). Then just follow these simple steps:

  1. Go to the “File” menu and choose “Export to Quicktime…”
  2. In the “Compression” drop-down choose “Apple DVCPRO HD 720p60″
  3. Select “Make Movie”, choose a location for your output file, and that’s it.

It couldn’t be simpler!

Why the DVCPRO HD 720p60 codec? Well, the native Flip video format is 720p HD, with a frame rate of 30fps – this is the best fit for conversion. DVCPRO will give you excellent quality video without losing too much in the conversion.

Now, to edit this footage in Final Cut, all you need to do is create a sequence using the “DVCPRO HD 720p30 preset, and you’re away.

The real problem with Adobe

Interesting post by Edwin Watkeys on why Adobe doesn’t really care about the primary users of their produtcs:

I want to say that Adobe doesn’t really care about you, dear Photoshop or Illustrator or InDesign user, but that’s not really true. They do care about you. But I think they see meeting your needs as instrumental to doing what they really want to do, which is wedge themselves into every nook and cranny of a large organization. You’re their beachhead. You’re their entrée into the enterprise.


Let’s assume Adobe does release a compiler that renders Flash using an alphabet soup of open-ish web technologies: That would provide some evidence that they do indeed care about helping their users do what they want to. But I believe that the structure of Adobe’s business provides a constant pressure that resists this sort of behavior.

Microsoft’s strategy for Silverlight has shifted

Unlike Adobe, Microsoft seem to be understanding that HTML5 is the only true cross-platform solution:

When Microsoft first showed off Internet Explorer 9, its most HTML 5 compliant version of IE to date, in March of this year, questions began to arise about the company’s commitment to Silverlight. Officials insisted that the two would coexist and that Silverlight would be Microsoft’s cross-platform development platform for mobile, Web and PC platforms for a number of years to come, as HTML 5 was far from becoming an accepted standard.

But in the past few months, Microsoft’s backing of HTML 5 has gotten more aggressive. Microsoft is pushing HTML 5 as the way developers can make their Web sites look more like apps.

This is a smart move by Microsoft: they can continue to develop Silverlight as a development platform for Windows Phone, whilst encouraging developers to create cross-platform applications with HTMl5 – best of both worlds, and it won’t cost them anything.

Adobe shows off Flash-to-HTML5 conversion tool

Ars Technica report about the recent demo of an Adobe tool for converting Flash to HTML5:

Even though its Flash technology is used as a punching bag by Web standards fans, Adobe has been building tools that embrace HTML5. The company recently released its own HTML5 video player, and Adobe Illustrator and Dreamweaver CS5 now contain a number of new HTML5 export tools.

Now it seems Flash might be joining the party. At Adobe’s MAX conference this week, Adobe engineer Rik Cabanier showed of a demo of tool that converts Flash animations to HTML5 (well, technically it looks like a combination of HTML5, CSS and images).

Yes, it’s great that Adobe are slowly shifting towards the HTML5 camp, but they’re really late to the party. The demo of this tool, although technically quite clever, really is a horrible semantic butchery job. And again, this is Adobe pitching HTML5 as an umbrella term for a mish-mash of modern technologies – even John Nack, the Adobe employee who originally posted the video of this demo, is flagrantly open about this mis-appropriation:

Someone will probably start quibbling with the use of “HTML5″ as a stand-in for SVG, CSS3, Canvas, etc. I know, I know. I use the umbrella term in the loose, commonly understood sense: “Flash stuff without Flash.

Sigh. Is that really how they think about next-generation standards at Adobe? “Flash stuff without Flash”?

Khoi Vinh on iPad magazine apps

Khoi Vinh on the rush of publications hitting the iPad:

My opinion about iPad-based magazines is that they run counter to how people use tablets today and, unless something changes, will remain at odds with the way people will use tablets as the medium matures. They’re bloated, user-unfriendly and map to a tired pattern of mass media brands trying vainly to establish beachheads on new platforms without really understanding the platforms at all.

The fact of the matter is that the mode of reading that a magazine represents is a mode that people are decreasingly interested in, that is making less and less sense as we forge further into this century, and that makes almost no sense on a tablet. As usual, these publishers require users to dive into environments that only negligibly acknowledge the world outside of their brand, if at all — a problem that’s abetted and exacerbated by the full-screen, single-window posture of all iPad software. In a media world that looks increasingly like the busy downtown heart of a city — with innumerable activities, events and alternative sources of distraction around you — these apps demand that you confine yourself to a remote, suburban cul-de-sac.

iPad Opens World to a Disabled Boy

An anecdotal little piece from The New York Times about the iPad as an enabling device for a young boy with a motor-neuron disease:

Owen, 7, does not have the strength to maneuver a computer mouse, but when a nurse propped her boyfriend’s iPad within reach in June, he did something his mother had never seen before.

He aimed his left pointer finger at an icon on the screen, touched it — just barely — and opened the application Gravitarium, which plays music as users create landscapes of stars on the screen. Over the years, Owen’s parents had tried several computerized communications contraptions to give him an escape from his disability, but the iPad was the first that worked on the first try.

There are also some interesting insights about the adoption of the device amongst different groups of disabled users:

For a mainstream technological device like the iPad to have been instantly embraced by the disabled is unusual. It is far more common for items designed for disabled people to be adapted for general use, like closed-captioning on televisions in gyms or GPS devices in cars that announce directions. Also, most mainstream devices do not come with built-ins like the iPad’s closed-captioning, magnification and audible readout functions — which were intended to keep it simple for all users, but also help disabled people.

Sencha Animator: The CSS3 Alternative to Flash?

Sencha, the guys behind the ongoing development of ExtJS and some other very clever UI technologies, have announced the release of a new tool for creating CSS3 animations:

Sencha Animator allows you simply place objects (text, shapes, and images) onto a re-sizable stage area, configure their properties and then animate to bring them to life. You can move, scale, skew and rotate objects singly or at various levels of nesting, in 2D or 3D space. With Sencha Animator, you can also take advantage of CSS3 capabilities like gradients, blurs, reflections and shadows.

At first glance, it looks to have a very clean and well-implemented user interface – better than the offering Adobe previewed earlier this week at least.

I can’t say I’m too keen on this continuing trend towards using CSS for “animations” though. My worry is that people will start to abuse these kinds of tools and start to create ugly, breakable user experiences which hark back to a web we were glad to leave behind. Slick and elegant transitions I have no problem with, but give people a Flash-esque tool for CSS, and Flash-esque applications they will create.

The really interesting thing to note here is in the foot of their announcement:

For those of you wondering what Sencha Animator is written in, the answer is… Ext JS of course! Ext JS provided an enormous short-cut in development time and allowed us to deliver the product on multiple platforms without worrying about Objective-C or Windows APIs.

Very clever: a fully-fledged, multi-platform application written in Javascript. And I assume that means it would also run perfectly fine in the browser.

Preview of the Edge prototype tool for HTML5

Interesting. Short video from Adobe showcasing a prototype of their new Edge tool, for creating animations and transitions using “the capabilities of HTML5″.

A few things which instantly spring to mind:

  1. The transitions featured in this demo aren’t capabilities of HTML5, they’re capabilities of CSS3. CSS is the technology which deals with presentation logic, and to continually refer to the “animation capabilities” of HTML5 is simply misleading and will cause confusion.
  2. Speaking of confusion: it’s interesting that Adobe are seeing fit to use unfamiliar language to describe the elements of their user interface: “Layers” to identify DOM elements; “Actions” to manage groups of transitions; “Symbols” to group objects. The semantics seem all wrong, and are reminiscent of Flash authoring (something they’re probably quite keen on). It just all sounds very unfamiliar and over-complicated, because…
  3. I know this is just a prototype and proof-of-concept, but surely this is just a very basic UI for writing CSS transition rules? Webkit is being used for rendering much of the property panels seem to be borrowed from Firebug and Safari development tools. The only new thing here seems to be a Flash-esque timeline.

Well done to Adobe for stepping into the HTML5 eco-system. But surely it makes sense to jump in with both feet and present something with substance, rather than dipping their toe in with some flimsy animations?

Update: It appears than on closer inspection, this prototype isn’t even using CSS for transitions: it’s Javascript manipulating the HTML DOM. So what exactly has it got to do with HTML5? Absolutely nothing. Bad show Adobe.

Building a Custom HTML5 Audio Player with jQuery

A brilliant, in-depth post from Neutron Creations about creating a custom HTML5 audio player:

We recently built an HTML5 audio player for Tim Van Damme‘s The Box, a new podcast where he interviews people who make cool stuff. Tim wanted an HTML5 audio player on the site, and we put together some jQuery to hook up the player interface he designed. In this article we’ll run through the code to explain how it works, covering a few caveats along the way.

They provide code samples and an explanation of their really well thought out design decisions. Really surprising how little code is involved in creating something like this too.