12 May 2008

Flex on Wordpress

This is the name of probably the most interesting SWFAddress sample I showcased at 360Flex Europe. A week ago I found some time to deploy it on and now everybody can experience this linkable and indexable Wordpress powered Flex based website.

The whole idea for this thing came up when I was working on a Flash CS3 based client project that needed a CMS and potentially community features. I already had good experience with Wordpress and I have always believed that it offers the best administrative interface out there. Utilizing such a system for content management is good because it automatically offers you a clean indexable HTML that can be used as a data source for a richer Flash/Flex/Whatever interface. In this sample the Flex movie directly consumes the HTML pages generated by Wordpress and parses the parts it needs without using additional XML dialects. It doesn't use posts and comments but only pages and probably can be extended in the future if there is enough interest.

Although it looked easy at first and I had to overcome some difficulties with Flex. The E4X expressions I used with AS3 in Flash didn't worked exactly the same in Flex 3 so I dived into experiments and tweaks that finally allowed me to achieve everything I wanted. I found it strange that some normal things from the CSS land are not that easy with Flex. Thankfully there are ready to be used solutions for repeated backgrounds and hover link styles. The integration of the SWFAddress PHP code in Wordpress was relatively easy and the result works exactly the same as our SEO sample. The SWFAddress ActionScript implementation became nothing more than a single proxy that requests the corresponding HTML.

9 Apr 2008

SWFAddress 2.1

Today is the third day of the 360Flex Europe conference and in about an hour I'm going to give a session about using SWFAddress in Flex 3. This is finally a good reason for a new release which has been postponed a few times since January. Enjoy the brand new SWFAddress 2.1 and send us feedback using the project forums.

The list of changes includes:

  • New SWFAddressOptimizer class that encapsulates the JavaScript SEO code and improves the HTML degrading of Flash websites.
  • New getPathNames and getBaseURL methods.
  • New Rewriteless sample for SEO support without URL rewriting.
  • New YouTube Player API sample for video deep linking.
  • New SWiSH Max2 sample.
  • Tomcat SEO sample ported to Flex.
  • Enhanced SEO sample.
  • Improved href and popup methods.
  • Safari 3 reload and popup blocker fixes.
  • Deep links validation for XSS vulnerabilities.
  • DOM fix for Firefox.
  • The new Google Analytics tracking is supported out of the box.
  • Strict mode no longer requires a slash at the end of the value.
  • The A2S/AS3 classes are available in the com.asual.swfaddress package.
  • Flex 3 compatibility.

The release includes many new improvements and various fixes. Some of you have probably seen the swfaddress-seo.js file which is now replaced with a new SWFAddressOptimizer class which fixes some issues and adds a Flash Player detection so that people without proper version won't get the deep linking redirect. The getPathNames() method can simplify the code in complex situations by providing an array containing all the pseudo folders in deep links like "/path/subpath/subsubpath/". The other new getBaseURL() method was made especially for the SEO enabled samples that now can easily provide "Copy link to clipboard" or "Digg it" type of functionality by exposing addresses without anchors and possibly improving your search engine positioning. The Rewriteless sample is for those of you who want to use the SWFAddress SEO approach, but don't have URL rewriting enabled. The YouTube sample was born a day after Google released the Player JavaScript API and showcases basic deep linking for video. Larry Benedict ported the basic sample to SWiSH Max2 and brought the SWFAddress functionality to a whole new group of developers. I spent some time rewriting the Tomcat sample in Flex 3 using custom SWFAddress powered components. Many people reported that the href/popup functionality fails silently because of the Safari popup blocker and this new release should fix it. Warren from Richmond discovered a nasty XSS vulnerability for Internet Explorer and thanks to him now the deep linking values are filtered for possible bad symbols. Because of the huge interest in the new Google Analytics code it's now supported automatically. Finally the ActionScript classes are distributed with packages which are much more suitable for larger projects. This enhancement happens during the build process and you still can find the classes without packages in the source folder and in many of the samples where simplicity makes sense.

The really good news is that the SWFAddress team is growing little by little. Max Tafelmayer recently joined the project and committed few high quality fixes. Mattew Tretter, who created StateManager will also help us improve SWFAddress with some of his excellent Safari tricks.

With this release we're also starting to reward all the generous donations with nice SWFAddress t-shirts. Check the donation section for more information.

13 Mar 2008

SWFAddress and the YouTube Player API

For few months I've been thinking about the potential that deep linking of video content has to offer. The growing demand for HD video and the increasing capabilities of computer hardware and Internet connectivity will soon bring a variety DVD Chapters-like functionalities online. I've been planning to explore things like cue points, meta data, video searching and indexing but I was always lacking the time until today. With the release of the YouTube Player APIs I decided that it's time to start from somewhere.

As you probably know, YouTube have just released a new set of enhancements that lets you utilize, customize and enhance their video platform. I was mostly intrigued by the Player JavaScript API which allows you to control and monitor the playback of embedded YouTube videos. Make sure you watch the video presentation of the release featuring Geoff Stearns who is actually responsible for the new JavaScript API and chromeless player.

So, today I spent some time trying to integrate SWFAddress with the sample YouTube video and the result is now available online. There were some tricky parts and probably the code can be encapsulated better, but overall I'm satisfied with the result. Every pause action or significant jump in the playback produces a deep link which will definitely make sense for long videos or specific scenarios. If you want to automatically start the video from the second verve just try this deep link. For this case I decided that it will be better to disable the generation of browser history and the SWFAddress strict mode.

The sample is available in the SWFAddress repository and will become a part of the upcoming 2.1 release.

16 Nov 2007

SWFAddress 2.0

The 2.0 release is finally here. For the first time we'll offer 2 download options because the file size of the package has grown up to 7 megabytes. If you want a bundle with 13 samples and documentation in 4 languages, go get the main one. Alternatively you can download a very light package containing only the ActionScript and JavaScript classes.

Here is the full changelog:

  • Support for multiple Flash movies and Ajax.
  • Event listeners for ActionScript and JavaScript.
  • New SWFAddressEvent class with support for INIT and CHANGE types.
  • New unobtrusive SEO technique.
  • Support for Adobe Flash CS3.
  • Support for Flash Player 7 with the Flash/JavaScript Integration Kit.
  • Support for SWFObject 2.0, UFO and Adobe's Active Content embedding.
  • New strict mode that adds trailing slashes by default.
  • New helper methods for link, window and popup management.
  • Ability to configure the script with query parameters.
  • The swfaddress.html is optional and not used by default.
  • Lots of new and improved Flash based samples.
  • Various optimizations and fixes.
  • API docs for ActionScript 3 and JavaScript.

Yesterday I had to make some last minute fixes, so please contact us immediately if you find anything broken. The chances for this are minimal, so just take some time to enjoy SWFAddress 2.0.


15 Nov 2007

SWFAddress 2.0 part 3 - Ajax and SEO

In the third and last part of the SWFAddress 2.0 presentation series I would like to give an overview of the two major features that this release introduces.

My personal experiments with deep linking actually started with Ajax and later I used the experience to create SWFAddress. Because of this the Ajax support has always been a matter of time and after the 1.1 release it became a standard user request. As you probably know there are many solutions of this type and every major JavaScript library have this functionality available natively or in the form of a plugin. The usage of SWFAddress will only make sense if it's better that the rest and now I'm going to explain why SWFAddress 2.0 really becomes the best offering at the moment.

As it was mentioned in the firts part of this series, SWFAddress is already deployed on many websites. This fact generated a huge amount of feedback and I have never been indifferent to appropriate and possible improvements. When we say that SWFAddress supports Opera 9 or Safari 1.3 we really ensure that it does so. While most of the other scripts are coming up with their serialization formats which are appropriate for specific framework or component state, SWFAddress tries to stick as much as possible with concepts clean URLs, standard query parameters and unobtrusive behavior. Features like custom titles, transparent page view tracking and event listeners are also not that common across similar solutions. And last but certainly not least, there are affordable support and development services which some people find useful.

For some time there is an Ajax sample available on the SWFAddress homepage which wasn't there without a reason. Today I'm happy to announce that we have an indexable unobtrusive Ajax content which can be accessed from Google, Yahoo or MSN. It's written in PHP and uses an innovative SEO mechanism which I'm going to describe below. To finalize the Ajax overview I also want to mention the Coherence sample that showcases how multiple Flash files can be used together with XHR and opens a lot of interesting opportunities.

Last year SWFAddress came up with a deep linking SEO solution that works. It was a little complex, but various people dared to use it and achieved the result they've dreamed about. The approach wasn't perfect, the complex URL rewriting was often causing troubles and worst of all was the fact that it was 'cloaking', a term that makes people paranoid because of the Google guidelines. We never experienced or heard about issues or penalties because of this technique, but overall this was a stopper for lots of the SWFAddress adopters. Companies like BLITZ implemented their own much safer SEO solution on top of SWFAddress, but it still isn't perfect because of the ambiguous deep link anchors generated with JavaScript.

With SWFAddress 2.0 I can offer you a new approach which in my opinion has enormous potential. It's not very simple because it relies on JavaScript redirection which should be non-sneaky, but it works quite well and produces the clean results that we want. The technique works like a progressive enhancement and a site like this can be first developed without any Flash or Ajax code. SWFAddress adds a tricky synchronous XHR on top of all this and ensures that after the redirect the HTML content won't be different. URL rewriting is used again, but this time it's very minimalistic and most of the logic is implemented with a server-side language. SWFAddress 2.0 offers you a choice between PHP, JSP or Rails and even if you don't like the encapsulation of the code, you'll be able to grab the core logic and implement it as you like.

As always we did some real testing using our SEO sample and the technique seems to work quite well.

The release is coming tomorrow. Make sure you won't miss it!

« Previous Entries | Next Entries »



Blog Search

Blog Categories

Blog posts

Recommended sites