Flickr Badge and XHTML, Part 3 Sunday 2006-03-26
Some progress is done on the stand in for the Flickr Badge, as we move on in the Petit Labs. In the tutorial “Building a Flickr Flash Display, Part 2“, we add some interactive dynamics to the image display. The beholder who’s eyes stare at the tiny thumbnails of our Flickered images, will be able to zoom in on any of them, to get a doubly sized version, by just pointing the mouse at it. As before, clicking an image will take the user to the Flickr page for that image. Come on and have some fun!
Global Tag Clouds on WordPress Dot Com
In the web 2.0 era tag clouds have become popular as a means of providing a semi semantic web. I say semi semantic, as we have humans rather than machines, making the relevant bridges between islands of information. The tag cloud or tag list is supposed to find connections between articles or posts, witin the same or neighboring domain of interest. Quite a few tagging services gather tags from blogs and web sites, to fasciltate this type of connections, and by visiting or subscribing to a service like Technorati or FeedBurner, you get freshly published information on your pet subjects.
There are some problems with this kind of syndication though. Do you really get relevant information links?
Well, as long as machines dont understand meaning, the only possible way to connect information in a meaningul way, is to use humans. The problem is that all connections that end up in a tag cloud are made blindly. That is, when you tag your article, you don’t know what other articles in cyberspace will get the same tag. Every contributing author adds tags, that he or she thinks are significant for the article or blog post. These tags are then automatically added to one or more centralized tag clouds. Not everyone will have the same idea on how to tag a certain piece of information.
I know this from my own experience. I’m farly good at creating categories for my own projects, but I often stumble when I add information to them. For a long time I had the distinct project types “Java” for Java programming and “XML” for my XML/XSL experiments. They resided in different directories on my hard disk. Then came the “Java and XML, a marriage made in heaven”, and I wrote every tiny XML handling software in Java. Where to place a new project? Is it about Java or about XML? Here tags comes to resque.
Tags are not categories, but have the advantage of connecting information over category boundaries.
That works for me, but how about sharing my tags with the world. First of all I have to specify by adding more tags to my projects, such as “java”, “xml”, “xsl”, “soap”, “web service”, “http”. If this covers my story, anyone searching for a “web service” will get a link from the tag cloud to my story, together with articles on certain wheater services, stock services, mapping services and so forth.
As there is no human supervision of the relevance of the interlinking, I’m sure the signal to noise ration will be very low on this centalized tag clouds. Contributing to this low ratio is the fact that the ranking of tags is based on popularity. Probably the most prominent tags are meaningless and yields the the longest lists of results.
So what’s the alternative?
A Google search does’nt give you the latest and hottest articles at the top, but the relevance of the results are normally high, because the ranking depends on popularity of the sites rather than the search terms ( comparable to tags ).
A search or a tag cloud within a domain/sub domain or directory/category would be more effective than a world popular tags cloud. If you are like Lorelle, read “The Problems With Tags and Tagging“, you don’t want to encourage people to leave your site, by presenting a Technorati or FeedBurner link to a central cloud of which you are part, but rather drill your own site local cloud. If you do this in a clever way, the relevance is inherent, as you have now added the missing survaillanse of interlinking.
Yesterday Doncha in “More WordPress Feeds” at WordPress Planet plugs for the new WordPress Dot Com new global tag cloud.
“When you write a post on WordPress.com it’s categorised in the usual way but it’s also added to a site-wide pool of posts and identified by a global category. Matt’s announcement this morning means that I can track what people are talking about photography, photos, gimp and even wordpress all from the comfort of my aggregator!”
The new cloud in the WordPress.COM sky, was annonced by the “Unlucky in cards” chief developer of WordPress, aka PhotoMatt in “Tag Feeds and Paging” at the companies blog.
( My spell checker died, sorry about that! )
Tween Your Images With ActionScript Saturday 2006-03-25
Using the ActionScript 2.0 in Flash, you can have a lot of fun with the Tween class and the easing package. If you have some knowledge of ActionScript, and want to ease your work with your image transformations, you can have a ball with the classes in the mx.transitions packages.
Using only one frame and an external ActionScript, you can do almost anything you want by applying one or more of the transformations, accessible to the artistic programmer. After some thought on my road to a new Flickery Flash image display, I decided to take the Tween class on a ride.
Using others wisdom, I boldly set out to tween the transparency and the size of a JPEG image, and at the end combine the tweenings. It turned out to be a fairly easy ride. What you do is load the image of your choice into a MovieClip, and create a new instance of the Tween class. It’s constructor takes as arguments, the object you want to apply the change to, the property you want to change, the start and end value of that property, the duration of the tween and an easing function or class, that knows how a special type of tweening is done.
That’s pretty much all you have to do. Nothing fancy to the code, but the result is impressive. If you like to know how to create image effects in a fun and lazy way, read my tutorial “Using the Tween Class“.
All Columns Are Born Equal
Three column layouts are popular for web sites and blogs. At least among those among us, who want to present lots of widgets and ads along with our main content. A problem we encounter is how to make all columns stay equally tall in all browsers.
There are a few methods to make it work, using CSS and sometimes JavaScript. Here is a good solution, although somewhat complex, using negative margins to make the columns equal in height.
Here is a funny animated JavaScript solution for making 2, 3 or 4 columns equal: I’m not keen on using JavaScript, if I can avoid it, but the effect can be brought to good use in other DHTML situations.
If you want to really dig in to the multicolumn domain, the css-discuss Wiki lists an impressive collection of articles on ThreeColumnLayout
If you are lazy and want the basic layout automagically made, you can visit the ClevaTreva Piefecta Pagemaker.
Or maybe better, the CSS Creator‘s CSS Creator
As an extra bonus for reading this I’ll give you marvels at CSS edge, like CSS menus and wrapping text around curved images.
Waddayaknow?
Flickr Badge and XHTML, Part 2
It’s all about including the Flickr Badge in an XHTML compliant way. As I have described in an earlier post, I thought I had succeeded. This proved very soon not to be true, and after a considerable amount of head scratching, I decided to craft my own badge.
If I could do that, I would gain two things. Firstly I would have full control of the behavior of the badge, such as the number and size of the images, the size of the grid and the timing of animations. Secondly, having direct access to the Flash Movie ( the “swiff” ) it would be much easier to look for embedding markup, that would validate as XHTML.
I have the Flash MX 2004 authoring tool or, if you are a programmer, the IDE on my computer, so making a Flash Movie from scratch is quite possible. I started to look for a suitable ActionScript Flickr library, to be able to communicate with the Flickr Service API. I found one at the Adobe/Macromedia web site, that looked promising, but I couldn’t find any documentation, so I dropped that. In my continued search, I found Kelvin Luck's flashr, version 0.4 Actionscript Flikr library, which contrary to Macromedia’s, is well documented. It is free for all to use, and comes with an introductory example, that runs right out of the box.
After some fiddling with the example, I realized that the example application only needed a few changes to look like the original Flickr Badge ( sans animation ). I decided to write a tutorial on “Building a Flickr Flash Display“. This is part 1, and further development will follow. Enjoy!
Windows Vista Delayed Wednesday 2006-03-22
It’s all too well known and recognized. Do you remember the Windows 95 operating system release? It was scheduled fro 1994, but delayed. The OC market nearly came to a hold waiting for the new OS from the Giant. It’s happening again. Software companies are preparing to adapt their applications to the new and maybe overly hyped next Windows version. Hardware companies are waiting to deliver new computers with OEM versions of the system or adapting drivers for it.
Today ZDNet refers to an announcement from Microsoft, that the Windows Vista, expected to be launched in the forth quarter this year, will be delayed until next year.
“The delay is the latest setback for Vista. Microsoft scaled back several key features of the operating system last year in order to try to ensure a 2006 release. The operating system, which has been in development for years, was delayed by, among other things, the fact that Microsoft had to put so much time and testing effort into Windows XP Service Pack 2, a largely security-oriented upgrade to the current version of Windows.”
Most probably this will mean that not only will the new OS be released later than expected, but will contain less new features than was planned. Just yesterday I read about all the different versions of Vista to be released soon. As always Microsoft is good at keeping expectation high between releases, but not so good at delivering on schedule.
I hear the marketing people moaning in the background.
Image Upload in WordPress 2.02 Monday 2006-03-13
There are some complaints about image upload in the latest and greatest WordPress. In the Support forum one claims that big images doesn’t produce thumbnails, another that the path of the uploaded image is not correct, as if the blog has to be in the documetnt root.
Lets try it out! I’m uploading an image to my predefiened upload directory.
[Edit]
It worked as expected. Selecting the link and use thumbnail options works well. If you don’t use the options, it is possible to drag the thumbnail image into place in the editor. If you use the options, however, it is no longer possible to drag the thumbnail and you have to use “Send to editor”. It’s a bit strange, but this is how it works for now.
Test of the TinyMCE vs. (X)HTML Editor
Will the (X)HTML Editor pick up what’s written in the Rich Editor ?
It’s a test and I’m launcing the (X)HTML Editor here.
And yes, this time the XHTML Editor is populated with the contents from the Visually rich editor or TinyMCE. The first sentence written in the rich Editor is encapsulated in paragraph. Now I’m updating.
WordPress 2.02 Security Upgrade Friday 2006-03-10
The long foreseen WordPress 2.02 security upgrade is released. Much serious discussion and lots of pure ballony has stired up the WordPress forum and the WP mailing lists lately. Some have argued strongly that Matt comes to market with some assurances, just to calm users down and to stop the speculative attacks against WP, being unsecure.
According to release notes there obviously were some issues, kept semi secret, which are resolved in the 2.02 release.
I just upgraded using the normal upgrade route. I took a backup of the database using phpMyAdmin and also using Skippy’s backup plugin. I also copied the whole installation to my work station. Before uploading the new WP distribution, I deactivated all plugins.
Without deleting anything in my installation, I uploaded everything in the new distribution, except the wp-content directory to my blog directory, and run the upgrade.php script from my browser.
After that I activated the plugins I use, one by one.
It all went well, an I was up and running within a few minutes. Hopefully, the complaints, rants and whispers will disappear from the WP forum and other more or less serious discussing areas.
Flickr Badge and XHTML, Part 1 Saturday 2006-03-04
I thought I finally got the solution to a problem that has bothered med for the last couple of weeks. You cannot include the Flash based Flickr badge in an XHTML valid page. It contains such a lot of interspersed markup and styling, that it is impossible to untangle. I had a go at moving styles to the stylesheet and leaving the markup where markup is due. For different reasons this wasn’t possible, and I had to find a solution. The W3C validator service gave me a list of errors, long as a week.
I had succeded earlier to encapsulate the Google AdSense, by embedding an external html document, using the object tag.
I started hunting the web for solutions, and found Geoff Stearns’ FlashObject, a JavaScript Flash detection and embed script.
It is used by including the script normally in the XHTML header and calling it from another JavaScript in the body. The call takes the URL of the flash movie and some other parameters, such as height and width.
The FlashObject writes the flikr badge into a predefined div with the appropriate id=”flashcontent”. Swiffy!
This doesn’t help much though, if we don’t have access to the pure SFW file, the Flash movie. As it is inserted “on the fly”, it doesn’t show up in the View Source mode of the browser – you just see the ugly heap of code, you pasted in from flickr.
By looking at the page info you can extract the URL of the SWF, which means that you can pass it to the FlashObject.
The URL of the flickr badge has a lengthy query string, that tells the Flash move what to look for at flickr.com, including number of columns and rows, the secret word and other useful things.
The whole thing worked, and I got rid of all complaints from the validation service. This had made me nearly bold headed, so you can imagine, I took a good leap and a scream.
There’s something fishy about the solution, I’m sorry to say. It did work for a while, but died on me.
I’m back to square one or possibly one and a half – we’ll see.
I’ll get back to you if something hits me.
[Edit] I’m back. Sorry to say I haven’t yet the solution to the validation question, but I’m working on it.
In the meantime, I have discovered that flickr doesnt want the approach of extracting the SWF from the page info. It’s much better to extract and use the original request that you get from the badge maker. Contrary to the statement I made above, it is possible to deconstruct/reconstruct the badge maker mix of code, style and markup. That’s how it’s working just now.
All styles are in the CSS stylesheet, the markup is clean and the JavaScript logic is encapsulated in CDATA sections.
It still doesn’t validate as XHTML though, because of the iframe is still not dealt with.
[ Edit 2006-03-25] I’ve decided to make a “Flickr Badge” of my own, to get full control over the behavior and the embedding. A first version is ready, and I have even written a tutorial, presented in “Flickr Badge and XHTML, Part 2“.
older posts »
All Posts
del.icio.us
PetitOn Tellus