I wrote a post "My thoughts on Adobe Edge" back in August last year which looked at Edge Preview 1 where I was mainly interested in seeing how the output of Edge compared with Flash in capability, size and efficiency.

Since then Adobe have been regularly updating the Preview releases for Edge and have just released Adobe Edge Preview 5, since the initial Preview 1 release – which was pretty bare bones in regard to functionality – they have added a lot of new functionality.

In particular two things I'm pleased to see in Preview 5 are "Publish to Web" which brings code minification and "Down-level Stage for non-HTML5 Browsers" which provides a way to set fallback content for non-HTML5 browsers:

• Publish to Web — Optimize your content for deployment by specifying if jQuery should be packaged with the composition, or downloaded from a CDN to improve caching.Edge also transforms the _edge.js file, and minifies both the _edge.js and _edgeActions.js files, resulting in significantly smaller files.
• Down-level Stage for non-HTML5 Browsers — Use the new down-level stage to design static (non-animated) compositions that are compatible with older non-HTML5 browsers such as Internet Explorer 8 and below.

It's good to see the minification capabilities added as this definitely helps deal with the size issue that I highlighted in my Preview 1 post. I think there's probably still a load of work to do in minimising file sizes as this is especially important for mobile devices.

I'm keen to see what new features are added in future Preview releases, one issue is in regard to responsive web layouts and how content created in Edge can possibly adapt to the dimensions of the device / browser window that it is viewed in, again for mobile access this is very important.

One other feature that would be very good is some way to reproduce the masking capabilities that is possible in Flash, in particular the ability to apply a non-square mask over some content. It is possible to clip content but this uses rectangular clipping by limiting the overflow of a containing div to be hidden. I can't see how non-square cropping would be possible with the limitations of current CSS3 capabilities, I'd happily be proven wrong on this though.

Here's a preview video published on Adobe TV which introduces the updated features in Beta 5:

I've written quite a few posts about the various products that the guys over at Shedworx develop and that have been useful to me whilst working with video (AVCHD video in particular!). They've written a couple of articles which are great primers for people new to working with audio and video.

The articles explain the various aspects of audio and video such as Codecs and Bit Rates and are well worth reading, especially if you've never given much consideration to the output of your video or audio and have just gone for defaults in apps such as iMovie etc. Even if you've been working in these areas and have a good knowledge of this stuff they're still worth a read.

• Music Formats Uncovered: http://shedworx.com/music-formats-uncovered
• Video Formats Uncovered: http://shedworx.com/video-formats-uncovered

I've been getting more and more bugged by people referring to the next iPhone as being the "iPhone 5", so I thought I'd make this simple graphic to explain why numerically it makes no sense for the next iPhone to be referred to as number 5!

You can download a 300dpi A4 sized version from this link if you want to print your own out and annoy inform any of your co-workers / friends / family / bloggers / podcasters when they start saying "what will the iPhone 5 be like?"...

This free app from the guys at Shedworx has worked out pretty handily for me just recently as it's got one capability that I've needed just recently. I needed to convert downloaded FLV files from archived UStream recordings and extract the audio out of it in order to make a podcast file.

UStream FLV file conversion is definitely a really handy feature, dealing with FLV files can be a bit problematic at times as not many apps will let you open them and do much with them. Quicktime on Mac doesn't handle them by default so unless you install something like Perian you can't really play them back without using a third party app like VLC.

The Smart Converter interface with the various formats for conversion.

Once the app is open you can drag and drop the video file you want to convert onto the Smart Converter window. The next step is to choose the conversion format, you can pick from presets for iPad, iPhone, AppleTV and Android devices.

In my case though to convert into an audio file I select from the 'Other' drop-down menu and chose the MP3 option from the list of options (but there are also presets for PSP, Playstation, XBox, Windows formats and others to choose from too).

After choosing the format you just hit the big 'Convert' button and wait for it to do its thing! It's a pretty simple to use app so there's not really any more to it, it's worked really well for this workflow of converting FLV files. The only real limitation being that you can only convert one a file at a time but as I'm only doing one file every so often that's not been a problem for me. If you really need batch conversion and don't mind spending $9.99 / £6.99 then you can get Smart Converter Pro which adds batch conversion to the app though.

I just had to set up an SSL certificate for a client site and encountered really poor documentation trying to get it up and running. Whether the documentation was just presuming some other prior knowledge that I didn’t have I’m not sure, but I thought I’d document what I did to resolve it. If nothing else I can come back to this myself in future to remind myself but perhaps it will be of use to someone else.

Server configuration & SSL Certificate:

My server is a VPS running Plesk 9.5.4, the SSL certificate I was installing in this case was a GeoTrust QuickSSL Premium certificate. I don’t think there will be too much difference with other certificate providers, however the installation process in Plesk is quite specific so these instructions won’t necessarily be that helpful if you’re not using Plesk.

Instructions

The instructions provided for installing the certificate can be found in a PDF document linked here, simplified they basically say this:

1. Go to your domain.
2. Under ‘Additional Tools’, click ‘SSL Certificates’, add a certificate entry.
3. Edit the certificate entry you just made, browse to the supplied certificate file in the ‘Certificate’ file field.
4. Go to ‘Web Hosting Settings’ for your domain, select the certificate from the drop down, enable SSL support on the domain, click OK.

So, following those steps should get you up and running with SSL on your domain. However, one small difference for me was that the supplied SSL Certificate didn’t come as a text file, it was simply in the contents of an email so I had to carefully copy and paste this into a text field on the certificate page instead. Not a huge deal, but given that you have to be careful to paste all of it in it’s odd that it’s not mentioned in these instructions.

Not so fast…

Following the instructions before seemed to work at first, I tested it in various browsers and the certificate seemed to be accepted fine. Except in Firefox on Mac when I tried to access a secure page it showed me the following message:

The certificate is not trusted because no issuer chain was provided.
[Error code: sec_error_unknown_issuer]

A bit of Google searching came up with some answers, it seems that Firefox (on Mac at least) objects to there being no Trusted Root and Intermediate CA certificates. Who knew??!!! Certainly not me as there was no mention of this in any of the instructions provided!

Installing Trusted Root and Intermediate CA Certificates

GeoTrust have a page with installation instructions on how to install an SSL certificate on Plesk, funnily enough they state that you require the Trusted Root and Intermediate CA certificates (Why wasn’t this included in the previous PDF instructions? Who knows…). Here’s the link to this page (I know it refers to Plesk 9.2 but it worked fine for me on Plesk 9.5.4):

GeoTrust Support: Install certificate on Plesk 9.2

Follow the instructions on that page and you’ll be able to get your SSL certificate up and running. It’s important to make sure you download the right version of Trusted Root and Intermediate CA for the type of SSL Certificate you’ve installed, so double-check which one you’re getting.

The only issue I encountered following those instructions was that when I submitted all the files to add the certificates that it showed the following warning in Plesk:

Warning: the CA certificate does not sign the certificate.

However, I found that if you go out of the certificate editing view in Plesk and go back in that the error was no longer shown. I went and tested the page in Firefox and it was now working correctly so I’m just going to ignore that error as it seems to only be a temporary issue.

I hope this helps someone out, it took me way, way longer than anticipated to get this all set up, but hopefully it’ll be easier next time around :)

As we move further into a post-Flash⁽¹⁾ web there’s a lot of excitement and hype about HTML5 and CSS3. These new technologies combined with the power of JavaScript frameworks like jQuery offer the potential to create much more dynamic, animated, interactive user experiences on the web.

Many tools are now being developed to make the creation of these experiences much easier (Edge, Sencha, Hype, MotionComposer, Animatable⁽²⁾ etc). However, there’s a potential danger lurking under the surface with these apps and the many demos and samples showing off these new shiny features: Machine Generated Code.

Made in the image of Flash

Any serious web developer would not consider the HTML code rendered by tools like Apple’s iWeb to be clean or optimal but rather to be bloated and messy. With the rise of ‘HTML5’ and the previously mentioned apps it seems that some normally standards-aware developers are being swept along with the buzz, happy that you can now do all these cool animations that are ‘standards based’. But if you take a look underneath the surface and examine the code being output then there are causes for concern — a high or total dependency on JavaScript to generate HTML content, bloated ‘divvy’ code and no consideration for fallback content or graceful degradation.

The content created might be made using web standards like HTML5, CSS3 and SVG but in reality it fails in exactly the same way that Flash does — poor / non-existant semantic structure and a lack of accessibility⁽³⁾.

Web apps

Another form of Machine Generated Code that is manifesting on the web is within many popular web apps. Take a look at the code under the hood of Google+ and you’ll see something like this:

Is that code any better than the code that is generated by iWeb? It’s possibly worse. How can a company like Google who has incredibly talented developers end up with code like that? Well, in Google’s case it was written using a templating system that uses Closure, these templates are converted by java on the server into HTML⁽⁴⁾. Nothing inherently wrong with that process but the end result is HTML that is machine-friendly but is not really intended to be easily readable by humans.

So it seems that with the ‘rise of the machines’ demonstrated by tools like Edge, Sencha and Hype along with development frameworks like those used by Google that there is a loss of focus on the best practices of clean code, graceful degradation, progressive enhancement, accessibility. Instead the focus is on easy generation of code and content, with Edge and Sencha giving a visual WYSIWYG-ish interface with which to create it, and Google’s Closure / Java dev process enabling code-savvy devs to write in a non-web native language and have this automatically generated or compiled into the final HTML and JavaScript.

(Of course a counter-argument is that clean semantic HTML code doesn’t apply to web apps as they are ‘more complex’ than ‘regular’ websites! That’s something for further discussion).

Change begins at home

So, is there a solution to this? Well, the first solution is to consider these issues yourself. If you’re evaluating tools like Edge, Sencha or evaluating development frameworks then pay close attention to the code they create. If it seems to be falling short then take the time to give feedback to the companies behind them. In the case of Adobe’s Edge tool which is currently an early preview release on Adobe Labs then there is an opportunity to give feedback on the app and influence it at an early stage of development. Don’t just whine about it on Twitter but take the time to give feedback and clearly explain what you think is wrong and how it can be improved.

Muse

Talking of people whining on Twitter, I wrote this article and had it all pretty much ready to publish when Adobe released another product on Adobe Labs, Muse. Although the main focus of this article is on the more interactive, dynamic flash-esque content creation applications that have been appearing I couldn’t really post this article without briefly mentioning Muse (I did mention iWeb and talk about Google+ after all, both of which obviously don’t fit that category of app).

Muse definitely renders Machine Generated Code as it’s sole aim is to enable visual designers to “Design and publish HTML websites without writing code”. I have to admit that the first thing I did when viewing the Muse website (which is itself built with Muse) was to view source, and sadly I was disappointed with what I saw there – lots of nested divs, generally bloated looking content, and despite purportedly being ‘HTML5’ there were no HTML5 structural tags to be seen.

Many WYSIWYG apps have come and gone and have never managed to produce good clean code without requiring the user to intervene and clean up code, this doesn’t mean it’s impossible to create such an app, but it’s definitely a big challenge. As with Adobe Edge I’d recommend taking time to give good, reasoned feedback about what you consider is wrong with the output it produces, don’t just complain about it on Twitter.

Christian Heilmann wrote an interesting article called “Getting rusty – we need new best practices for a different development world” which I think gives an interesting pragmatic perspective on the debate about Machine Generated Code and why we rightly consider clean, semantic code desirable as opposed to that produced by apps like iWeb, Edge, Hype, Muse etc. His final couple of paragraphs sum up the thoughts and feelings that inspired me to write this post:

“Using web standards means first and foremost one thing: delivering a clean, professional job. You don’t write clean markup for the browser, you don’t write it for the end users. You write it for the person who takes over the job from you. Much like you should use good grammar in a CV and not write it in crayon you can not expect to get the respect from people maintaining your code when you leave a mess that “works”.

And this is what we need to try to make new developers understand. It is about pride in delivering a clean job. Not about using the newest technology and chasing the shiny. For ourselves we have to understand that the only one who really cared about our beloved standards and separation of concerns is us – as we think maintainability and not quick deployment and continuous iteration of code. The web is not code – the web is a medium where we use a mix of technologies fit for the purpose on hand to deliver a great experience for the end users.”

Footnotes:

• 1: By post-Flash I mean as the only way to do interactive animated content on the web.
• 2: Animatable looks to be one of the most promising apps being developed as the team behind it have kept the whole concept of falling back to non-animated content as core to the way the app works, basing it on actual HTML content rather than just created through JavaScript.
• 3: I acknowledge that it is possible with recent versions of the Flash player to make Flash content that is more accessible, but generally Flash’s integration with Screen readers like Jaws etc is not great, and you have to specifically apply settings to the Flash content to help it be accessible.
• 4: This information about Google+ development and other interesting info from this thread.

Today Adobe published on their Adobe Labs website a public preview of a new application called Edge, which is described in their own words as:

"Adobe® Edge Preview is a new web motion and interaction design tool that allows designers to bring animated content to websites, using web standards like HTML5, JavaScript, and CSS3."

Having previously done a little comparison between the output contents and file size of their previously released Wallaby 'Flash to HTML5' conversion tool and that of Flash itself then I thought it would be good to do the same thing for Edge. However, the problem at the moment is - being only the first preview release - Edge has a fairly limited featureset with animation methods such as rotation, location (X / Y axis movement), opacity, scaling and skewing. Essentially some of the basic animation tools that you'd find in Flash. The problem with trying to do a comparison along the lines of the Wallaby test that I did is that I used a shape-tweened animation for that test, something which just isn't possible at this time within the capabilities of Edge.

So, in lieu of being able to do a really exact comparison I have instead made a simple animation using one of the original SVG source graphics that I used for my Wallaby test. The main outcome of doing this test is just to see what the output of Edge is like - how many files does it create, how big is each file individually and in total. If you haven't read the previous Wallaby post prior to this then in a nutshell the Flash output was far more efficient in both number of files and file size. Again it has to be said that a shape-tween animation is probably the most complex type of animation you could aim to do in this context, so I did set the bar fairly high there. But as tools like Edge and Wallaby are an attempt to try and bring Flash-esque timeline based animation creation to the world of HTML5/CSS/JS/SVG then it's fair to expect that beyond some simple x/y movement and rotation that shape-tweening is something that people - especially those from a Flash background - will want to create.

'Edge Case' sample: Rotating an SVG in Adobe Edge

So, here's the simple animation I created in Edge. I imported an SVG file which I had used for the Wallaby test and applied a simple 360 degree rotation to it, a lot simpler than the Wallaby test but I thought it was worthwhile bringing in an SVG file to see what Edge did with it.

View Edge's Output in new Window
Download the Edge Assets as a Zip

Adobe Edge's ouput HTML, CSS, JS etc

Here are all the files that Edge created for this example:

• edge-case.html: 1kb
• edge_includes/jquery-1.4.2.min.js: 72kb
• edge_includes/jquery.easing.1.3.js: 8kb
• edge_includes/edge.0.1.1.min.js: 32kb
• edge_includes/edge.symbol.0.1.1.min.js: 29kb
• edge-case_edge.js: 5kb
• edge-case_edge.css: 1kb
• images/noun_project_182.svg: 1kb

Total: 149kb

So, to get that basic rotation animation of an SVG file we get almost a 150kb payload in order to make that work. I haven't bothered creating a Flash (or video) version of this animation as I think it's fairly clear that it would be possible to get a smaller file size using Flash to create it. Edge and tools like it have obviously got their work cut out here, especially with the huge use of mobile devices then file sizes and number of separate files in a site (i.e. minimising server calls etc) is an important issue.

We've definitely got to cut Edge some slack though here, as small as Flash files can be it's important to remember that the entire runtime for Flash is a plugin whereas as HTML / CSS / JS etc is supported by the browser's native features, Also the JS files used by Edge are providing a kind of runtime in the form of some Javascript functions which gets added to every animation that you create with it. Presumably this could be alleviated by having this file be published only once and then referenced, or better yet by being hosted by Google's CDN and referenced that way along with jQuery which Edge also includes with each animation.

Adobe Edge: Just a tool for Flash-ers or true HTML based creation?

It's hard to say at this point how these tools will be used, a big area will surely be a replacement for Flash-based interactive / animated advertising, again file size is very important here as Flash banner ads often have a maxmimum payload for ad networks of about 40kb, so Edge is not competitive here.

I think my biggest concern about these tools is that they simply become a swap-in replacement for Flash and that people start to use them purely from a visual perspective and not considering the structure and semantic meaning which underlies all HTML pages. It is *HTML*5 after all, even though that term is often used as a buzzword to include JavaScript effects, technologies such as Canvas, SVG etc. It is extremely important to remember that semantic meaning is at the core of HTML. As such animations created with tools like Edge should keep that at heart and include a workflow that encourages this fact, not just enabling ways to make things move around the screen etc. So I'll be interested to see how things progress with Edge.

Despite that concern it is still great to see tools like Edge and Sencha Animator being released, the uptake of complex JavaScript based interaction and animation is certainly hindered most by the lack of capable IDE's to make the process quicker to do. Hand coding jQuery animation and interaction is fine but a good IDE would enable you to keep on top of the code being used but also make it much quicker and efficient to develop using these technologies.

Anyway, that's my thoughts having played around with Edge, I'll have to go catch up with some reading online and see what other people are saying, feel free to comment with your own thoughts!

This has got to be one of my favourite new 'features' in OSX Lion, it's found inside the iCal app:

That unnecessary 's' when displaying '1' unit of time has bugged me for at least the last two versions of OSX, such a simple attention to detail but one strangely overlooked by Apple for such a long time! Now my OCD brain can stay calm when adding new events into iCal!

The Highland Fling 2011 Web Conference takes place on Friday 8th July at Symposium Hall, part of the Royal College of Surgeons in Edinburgh:

It's great to have an event like this in Scotland for once so don't miss out on the opportunity to go along!

The Highland Fling prides itself on exciting speakers and valuable topics that we can all learn from. Sound good? Whether you're a front-end whizz or a project manager wanting to find out a bit more about what your team could be getting up to, The Highland Fling 2011 - Back to Basics will take you on a journey through modern web development that you can't afford to miss.

There's a great line up of speakers and will be hosted by Christian Heilmann of Mozilla who is also a great speaker.

There's a special last minute discount deal, just enter the discount code LASTCALL to receive 10% off the standard ticket price.

You can book tickets online at:

http://thehighlandfling2011.eventbrite.com

Here's the list of speakers and what they're talking about:

• Steve Marshal - Why Simple Isn't
• Jack Osborne - Lifting the lid on HTML5
• Mike Rundle - From Websites To Apps: The "Apple Look"
• Remy Sharp - Interaction Implementation
• Rachel Andrew - Choosing the right Content Management System
• James Edwards - Accessibility in modern interfaces

For more details about the conference please visit

http://thehighlandfling.com

Don't miss it!

Apple have added a new "Reading List" feature to the next version of Mac OSX which is currently under development, 10.7 Lion. Reading List allows you to collect web pages and links for later reading, as such obvious but slightly inaccurate comparisons have been made to services like Instapaper and Readability, however, Reading List is different from those services as it doesn't seem to actually cache, modify or strip back the content of the pages added to it. I was a bit surprised by this seeing as Apple added the 'Reader' function to Safari a while ago which basically adds the same kind of stripping back of content for easy reading that these other services offer. It seems like an obvious marriage of the two features.

Reading List + Reader = A step too far?

In light of this disconnect between these two features in Safari I've been wondering if there is a deeper motivation for not blending the two together. If users had the capability to use a version of Reading List which automatically used the Reader function to strip content back then I wonder if publishers would complain that Apple was robbing them of page views / ad revenue or manipulating their content without consent?

These are accusations that some have thrown at Instapaper and Readability, interestingly Readability does actually give 70% of the monthly fees that users pay to the publishers of sites that their users visit so there is obviously merit to this kind of service but also a conscience about the impact that it may have on websites which depend on visitors and advertising revenue.

I wonder if Apple are aware of this and feel that merging these two features in Safari would be a step too far? From an end user perspective the ability to strip out adverts from web pages and store website content for offline reading is a great user experience compared to browsing many of the advert-filled, cluttered websites out there. From a web publisher perspective the potential impact on revenue a service like this, albeit with the goal to provide an enhanced reading / user experience for web content, could be huge if a company like Apple integrates it directly into Safari.

Digital Locker / Cloud Streaming

Another couple of items of tech news recently were the launch of Amazon's Cloud Drive and Google's Music beta both of which offer what is known as Digital Locker or Cloud Streaming services for music.

Both of these services allow you to upload your own music to the cloud so that you can play it back via various net connected devices.

Now where this gets interesting is that both Amazon and Google have launched these services without any specific permission from the record labels, specifically they claim that there is no need for any special licensing terms as the service is intended for music that people own already or in Amazon's case music which is purchased via the Amazon MP3 store.

In contrast to both Google and Amazon's approach there is a lot of speculation about an upcoming cloud streaming offering by Apple, rumoured to be called iCloud it is thought that the service will offer cloud storage and streaming of music and movies that can be accessed via iTunes on Mac or via any iOS device. The difference between Google / Amazon and Apple is that Apple are apparently actively seeking licensing agreements with the Music companies in regard to providing this cloud based digital locker / streaming storage service and as such have the backing of the music industry.¹

It's obviously a hot topic – and which is the legitimate approach? Should Apple have to negotiate and pay money to the music companies to allow users (us!) the ability to stream content that we have already purchased? Or are Amazon and Google right that no licences are required or money due to the music companies? It's a tricky one, but the music labels are adamant that licences are required and so it seems likely Amazon and Google will have to come to some kind of agreement or otherwise face some long drawn out legal challenges.

Reading List will not be a digital locker for web content

Apple's stance in regard to the whole situation of digital locker / cloud streaming shows that Apple wants to keep things straight between themselves and the rights-holders of the content that will be stored in their rumoured 'iCloud' service. If you apply this same respect for rights-holders and publishers content to a feature like Reading List then it's not too big a jump to surmise that Apple may not want to do the same thing to web publishers content.

It's hard to know if there's anything of substance to this theory, it's just something I've been wondering about. The fact that even the Reader feature itself exists in Safari could be viewed as being a sign that Apple doesn't think there's a problem offering features that manipulate web publishers content without their consent. But given that there is / has been debate about services like Instapaper² and that services like Readability do give money back to the publishers whose content is being accessed and read via their services, it is obviously not a clear cut situation either way. As such it would be entirely responsible for Apple to consider the implications of such a feature.

Discuss!

A quick short and sweet post as I just realised that I never blogged about the fact that WordPress Answers Stack Exchange site is out of beta and has become a fully fledged StackExchange site! It actually came out of Beta back in February so this post is quite overdue!

It's a really useful site if you are into WordPress theme or plugin development, I posted about the beta a while ago and I've found it useful on quite a few occasions when I've struggled to figure out how to make something work, especially for the WOS Media Categories Plugin that I was working on a while back as well as quite a few other code issues I've had with recent client projects.

Whether it's for help with your own WordPress issues or if you've got skills and a bit of time to share helping others figure out their WordPress issues then I'd definitely recommend getting involved with the site.

Apple made their presence felt at the NAB show in Las Vegas with a preview of the next version of their Final Cut Pro video editing app, Final Cut Pro X.

In what is no doubt a long overdue update Final Cut Pro X brings what a lot of Pro video users have been waiting for: a totally redesigned interface, 64-bit memory addressing, multi-processor support, background rendering (no more render window), GPU rendering, use of more than 4GB RAM, video sizes from standard def up to 4k, real-time native format video processing - that's quite a list!

The other announcement that is pretty awesome - a new price: $299 (not sure what that'll be in £GBP yet, about £199 I'd guess) and, similar to Apple's Aperture software which had a price drop recently, Final Cut Pro X will be available through Apple's Mac App Store.

Native AVCHD?

An often featured subject in blog posts here on Suburbia is the AVCHD file format. Previously AVCHD required transcoding into some other format such as ProRes in order to edit it in Final Cut Pro, so a good question is whether the new 'real-time native processing' feature means that this transcoding will be a thing of the past? This is a feature that Adobe's Premiere Pro has had for a while, albeit one that requires quite powerful hardware to make use of it. It will be interesting to see how Final Cut Pro X compares with this.

June launch date

Final Cut Pro X is due to be launched through the Mac App Store in June. In the mean time you can find out more about the new features via a couple of YouTube clips filmed at the preview announcement:

Adobe have released an interesting experimental tool called 'Wallaby' over on Adobe Labs. It's basically an app that tries to convert Flash FLA source files into 'HTML5' compatible animations. Note I'm using 'HTML5' in quotes as usage of the term here is more in the overall grouping of HTML5 and related technologies such as CSS3, JavaScript / jQuery, SVG etc. It's worth reading over the Release Notes to get an idea of the current limitations, the biggest issues at the moment being WebKit browser support only and no conversion of actionscript or sound within FLAs.

I just happened to be playing around with Flash this morning messing around doing a little shape tweening with a couple of symbols I found over on The Noun Project website so I thought I'd use that FLA file and see how Wallaby coped with it.

Running Wallaby:

After starting Wallaby you get a very simple interface, a file select field that you use to select the FLA file and a large Status area that shows any errors and warnings encountered whilst converting your file. There are also Preferences that can be set which at the moment include automatically opening the converted file in your default browser and enabling logging.

After selecting my FLA file I clicked 'Convert' and after a few seconds it happily converted my file without any errors or warnings. I was interested to see what it would make of the shape tweened animation that I had made in Flash as this seemed like quite a challenge to convert.

Wallaby's HTML output:

The conversion process results in quite a few files being exported as the animation is recreated using a combination of HTML, CSS and jQuery / JavaScript, here a screenshot of the files I got:

It turns out that to make an HTML version of our tweened FLA animation we need two JavaScript files, one CSS file, one HTML file and a folder containing 246 SVG frames. I think it's fair to say that tweened animations are a bit of a challenge! Looking at the Release Notes it does state that it creates an SVG file for each frame of a shape tween. As a result the approximate sizes of the exported files look like this:

• Energy-html.html: 75kb
• Energy.css: 49kb
• Energy.js: 2kb
• jquery-1.4.2.js: 70kb
• Energy_assets: 176kb

That's a total of 372kb in order to recreate the tweened animation in HTML / CSS / JS / SVG.

Flash's output:

So how does this compare with the files output by Flash? Well, not very well when you look at both the amount of files required and their file size:

• Energy-flash.html: 2kb
• Energy.swf: 4kb

A grand total of 6kb when it's rendered as Flash swf output. That's quite a difference in size, although admittedly Flash's default HTML file doesn't use any JavaScript such as SWFObject to embed the file which is generally common practice, so I would argue that the Flash output should really have the following additional SWFObject files added to it's output:

• swfobject.js: 10kb
• expressInstall.swf: 1kb

Even with that it's still only a total of 17kb, about 1/20th the total size of the files that Wallaby outputs.

Why not use video instead?

This particular animation is obviously a challenge for Wallaby to convert into anything closely competing in file size, so perhaps in this case it would be a better option to use a video clip to provide a non-Flash version of the animation? The same animation can be output as an H.264 video at the same frame rate and it comes in considerably smaller at 192kb:

• Energy-video.html: 1kb
• Energy.mov: 192kb

That's about half the size of the Wallaby output. It's also likely to playback much better on mobile devices such as iPhone / iPad / iPod touch as Adobe warn that the output of shape tweened animation can result in playback performance difficulties on iOS devices.

In the interest of being consistent I should of course add some additional JavaScript video embedding option such as JWPlayer as again this is common practice when it comes to adding video on web pages. Using JWPlayer would add the following additional files:

• jwplayer.js: 104kb
• player.swf: 96kb
• yt.swf: 1kb

This adds 201kb to the total file size required so that brings it to about 393kb, almost the same as Wallaby's HTML5 output. I'm sure there are possibly slimmer options compared to JWPlayer for embedding that could reduce that down a bit but I reference JWPlayer as I consider it to be one of the best cross-platform methods of embedding video on website.

Of course I haven't mentioned anything about delivering video in alternative codecs such as Ogg Theora or WebM to serve browsers like Opera, Firefox and Chrome, this would further increase the files and sizes involved. However, given that Wallaby is trying to provide a way for animated content created in Flash to be output and made playable on devices such as the iPad and iPhone it could also be considered that providing any kind of Flash fallback for video is unnecessary, so we could ignore the JWPlayer / JS completely and just use the regular HTML5 <video> tag and a single H.264 video, so we'd be back to a considerably smaller size than Wallaby's output in this instance.

In Closing...

Overall Wallaby looks to be a pretty handy tool for people that are struggling to find a way to get their content viewable on the millions of devices that don't (and likely never will) run Flash. For animation that doesn't involve shape tweening I think the resulting file sizes will be a lot more favourable and it will be a reasonably efficient way to create animated content using standards-based technology.

I would say that the primary target user for Wallaby, at least at first, is for people doing online advertising. This is an area that is seeing a lot of activity with tools like Sencha Touch appearing, there's definitely opportunity for a 'killer app' that makes creating banner advertising using all of these new emerging web technologies in a way that people are used to doing in the Flash IDE. There's a lot of challenges in there technically, as well as a lot of issues such as accessibility, graceful degradation etc, but I think a lot of companies are focusing on this challenge now, so it's good to see that Adobe is thinking about various ways of providing tools for the job.

Sample Animation files:

I have included the HTML5 output as an iframe andalso links to each animation in HTML5, SWF and H.264 formats. There is also a link to download all the assets of Wallaby's output in a zip archive:

Wallaby's HTML5 output:

View Wallaby's HTML5 Output in new Window
Download the Wallaby HTML5 Assets as a Zip

SWF output:
View SWF Output in new Window

Video output:
View Video Output in new Window

It seems like it was just a short while ago that I took this survey, but time flies and A List Apart's "Survey for People Who Make Websites" is here again waiting for all those involved in designing and running websites to take the survey.

This survey, which has been running since 2007, was started with the intention of finding out:

"...who exactly our famous slogan, “for people who make websites,” was talking about. What were our kind of people’s salary ranges, titles, working conditions, educational backgrounds, gender, ethnicity, and so on? And what effect, if any, did one statistic have on another? For instance, did gender have an influence on salary? Was there a connection between educational background and job satisfaction? Did web professionals who worked at start-ups have the same titles as those who worked at universities and libraries?"

Over 30,000 people have taken the survey each year since then, sogo read a bit more about it and then take the Survey.

You can also read the findings of last years survey which have been published online over at the A List Apart website.

I wrote a blog post last year about Five Subversion Clients for Mac OSX where I highlighted some of the Subversion version control clients with a good GUI that are available for Mac OSX.

Out of all the clients I wrote about I ended up using the Cornerstone client the most (although Versions was a close second place). The makers of Cornerstone, Zennaware, have just released version 2 which introduces a whole load of new features and improvements to existing features.

SVN Workflow

My own SVN workflow is pretty straightforward as I am the only person that checks into my repositories. But Cornerstone 2 provides great tools for repositories with multiple users, finding out who checked in which files and why is clear and easy to find. One big improvement in V2 is with merging branches, this can be a pretty tricky process to manage but Cornerstone adds the ability to synchronise and reintegrate branches with their ancestor, deal with various revisions, and preview changes of any merges made.

Subversion 1.4, 1.5 & 1.6 inside...

Even though it's not new to version 2 it's worth mentioning that Cornerstone actually includes Subversion 1.4, 1.5 and 1.6 within the application itself. Although Mac OSX already includes Subversion having multiple versions right within Cornerstone itself means you can work with repositories that use different Subversion releases and also not have to worry about whether any OSX updates affect your existing Subversion repositories. This also helps to make sure that your local repository data is backed up via Apple's Time Machine backup process too.

Or work with external repositories

I don't use any internal Subversion repositories myself though but instead host mine using Beanstalk who offer various pricing plans including a free plan. So if you work with external repositories then you can quite happily work with Cornerstone using your own external server or subversion host.

if you're not using version control of any kind you should definitely give it a shot, Cornerstone makes the process a lot less daunting than having to work via the command line as well as offering a much more visual way to work with the changes and growth of your codebase.

How much does it cost?

Cornerstone 2 is out now and costs $59 for a single licence or $29 to upgrade from any previous version 1.x of the app. There is also a student discount of 20% which sweetens the deal even more.

You can also download a 14 day trial in order to check out the application for yourself before parting with any hard earned cash. Go to http://zennaware.com/cornerstone/ and click the download link to get the trial version, you can also buy Cornerstone directly from the Mac App Store.

[ Get 10% off your first month of Beanstalk Subversion hosting via this link:http://bnst.lk/eMqJVm ]