Utilising the TweetMeme API

We’ve been integrating some social media into one of the sites we work on ModernSelling and specifically working with the TweetMeme API which allows users to view the number of Tweets an article / page has received and retweet said article. From the horse’s mouth:

The TweetMeme retweet button is for website and blog publishers who want to encourage their audience to tweet their content on Twitter. The button shows a live count of the number of times your webpage or blog post has been tweeted.

There are a few points worth mentioning about this integration because it is not always as straightforward as you might think and perhaps some of this information will be of use.

Firstly, TweetMeme is quite strict so for anti-spam purposes uses a combination of the Tweet which we send to the API and a custom meta tag containing a match of the tweet:

<meta name=”tweetmeme-title” content=”The Message of the tweet ” />

Additionally, the content / message of the tweet has to be a direct subset of the HTML title tag. For instance, for the example above, ‘The Message of the tweet’ needs to be included in <title>. It doesn’t have to be the only thing in the title tag but it does have to be present.

So if like us you are generating these things on the fly (the site in question is driven by a content management system we built) you may have to make adjustments to your system to accommodate the TweetMeme functionality and also discuss compromises with your client; for instance, in our case, the title tag now includes the original title (which was specifically written for SEO purposes) with the article headline (which we want to be the body of the tweet) appended to the end. There is no way around this – the tweet message cannot contain something that is not contained in the HTML title tag so you need to live with it or not use the TweetMeme API.

Secondly, TweetMeme uses a cache which means that if someone already tweeted your page/s before you implemented the TweetMeme functionality the tweet will already be cached against the url. In these instances, if you wish a retweet to use the a new message as opposed to the old, incorrect message (your old title tag if it was incorrect) you need to clear the TweetMeme cache on a page-by-page basis or, rather than doing a manual update for a large number of URL’s you can automate the process and use the TweetMeme ping api (http://api.tweetmeme.com/ping?url=).  Just append the URL that you want to update at the end of it and loop through the list of pages on your site.

Finally, part of the site we implemented this feature on is subscription only so bare in mind that any password protected url is not going to allow the TweetMeme API to make a call back to the page to verify it – TweetMeme will not work in these circumstances.

Happy TweetMeme’ing!

This post was written by Kirsten on June 22, 2010 at 4:42 pm

Flixel 2.0 – Flash game development

We have finished an enjoyable project for SPAR International, which involved creating an athletics game based around the button bashing classic, Daley Thomson’s Decathlon. When creating the graphics and style for this game we wanted to utilise the nostalgic bitmap effect which you see quite often in Flash games and in the graphic style of Pixel Art. From a development perspective this was very convenient because I have been looking for an excuse to try the Actionscript 3 game framework, Flixel, which I have seen lorded around the Internet as perfect for this purpose.

It has it’s own global render cycle which simplifies the process of adding bitmap graphics to the stage and creates a predictable fps independent game loop. Forum posts on the Flixel site state that this rendering process is more efficient than Flash player alone due to the fact that is purely geared toward low resolution bitmapped graphics. There where many elements which increased the speed of development such as the inclusion of the FlxObjects which are already set-up with simple motion facilities such as acceleration and velocity on both x and y axis which allow for the simulation of horizontal character movement and also vertical forces (i.e. gravity).

There are many other noteworthy features of the Flixel framework such as Sprites for Animation and the global/static FlxG control class which have been very well designed to make game development in Flash easier. I will, however, not go into detail about these because a concise post about Flixel from the Inside RIA blog has covered these. For those (developers mainly, I suspect) interested in understanding the affordances of using this framework over creating a game from scratch, reading this and also exploring the host of games and tutorials on the Flixel site will be worthwhile. Canabalt is a particular favourite game due to the intense screen shaking and accompanying music.

The game we created is called Beat Barni and is online now. Due to time constraints we created a pentathlon (5 events) rather than a decathlon, so feel free to challenge Barni to any of the following events; 100m, 400m Hurdles, Javelin, Pole-vault and Long Jump.

This post was written by Gareth on June 2, 2010 at 10:00 am

Cake of the Month – April 2010 – Mr. Kipling

With the recent shock revelation that Mrs Kipling does actually exist and was once an actress in Corontation St we thought we should make sure that the exceedingly good cakes were as good as we remembered.

Safe to say that the despite the implications of some sort of power shift within the Mr Kipling marketing machine, the cakes are still fo a high quality. Just take a look at Patrick’s face. He’s loving that Bakewell.

This post was written by Gareth on April 30, 2010 at 5:11 pm

Action Message Format (AMF)

We have recently built a Flash Game – Traitors – for the Top Gear website:

The game, sponsored by Nissan, requires the user to speed through 3 levels controlling their speed by repeatedly pressing X-Y buttons as fast as they can and using their booster. For the purpose of data submission and receiving data while interacting with the webserver we decided to use AMFPHP which is open-source implementation of the Action Message Format (AMF) and allows binary serialisation of Action Script (AS2 and AS3) native types and objects to be sent directly to server side services. Phew…

The crux of this is the ease of implementing data transfers to and from the webserver (less code on both client application and on the webserver) and the efficiency of the resultant transfer (the data being transferred is binary format which is also compressed further in AMF3 so the amount of data being transferred is smaller). This is brilliant for rapid development (which we do a lot of) and performance of the finished article.

For instance, on the webserver you don’t have to loop through a database recordset, compose some XML and return that XML to Flash which would then load and parse the XML: you can essentially return the recordset directly from php to Flash and the query is automatically converted to the corresponding ActionScript type. There are several processes being skipped and the data being transferred is far smaller (being compressed binary as opposed to XML).

This post was written by Kirsten on April 13, 2010 at 1:55 pm

DECODE: Digital Design Sensations

http://www.vam.ac.uk/microsites/decode/

We decided to have a company outing to Decode @ V&A last Friday and trotted off to West London (yes, we do venture out of East London) to see what we could see.

The blurb states:

“Decode: Digital Design Sensations showcases the latest developments in digital and interactive design, from small, screen-based, graphics to large-scale interactive installations.”

And

“Decode is a collaboration between the V&A and onedotzero, a contemporary arts organisation operating internationally with a remit to promote innovation across all forms of moving image and interactive arts.”

From a visitors’ perspective the exhibition was interesting enough; quite a lot of interactive art installations which capture, record and insert the audiences contribution (for example a video ‘wall’). And others works which use interesting data sources (such as stock market data) to as the source of algorithmic animations. In some ways though there was nothing we hadn’t seen before in terms of technology and this is where we became a little critical of the exhibition: for all the slickness of the works, it felt to a few of us that something was missing – what was the meaning of things? For instance, a lot of the work in the exhibition played on the fact that people seemingly love to have their 5 minutes of fame and hence fall over themselves to be filmed, pictured, captured in some way and displayed for others to look at. But what is the intended meaning of the art? Is there any actual cultural or personal message hidden in them? It didn’t look to me like there was and as such the exhibition fell short of what art can offer people (excite by all means but also get the audience thinking). I didn’t see any obvious cultural references, or personal messages existential or otherwise. As an example, there was an algorithmic animation which was generated from ‘stock market data’ according to the blurb. All well and good but no further explanation was given, it looked nice but think of the possibilities involved in this subject of telling a story, making a comment about capitalism / money and the state of the economy and what effect this has on society (obviously poignant now). It’s a shame it didn’t explore these meaningful avenues or if it did that the blurb about the work didn’t even mention it (they often sided on a practical explanation of how it was achieved / built).

As such, some of the exhibition felt a little more like the interactive section within the science museum as opposed to any great art exhibition – great fun and visually stimulating but lacking an underlying meaning (of course the science museum obviously has an educational remit it fulfils). I wonder what people in 100 years will think when they look back at this period of digital art? I suppose they may come to the conclusion that the early 21st century signified the beginning of a new art movement but at the same time, as art goes, was a little naïve; getting carried away with new technology at the expense of what art is actually all about.

I might be looking at this too critically and I guess there is nothing wrong with showing off techniques and new found skills, after all the great artists of the renaissance and beyond have often done just that but I would like to see an industry I am involved in attempting to merge the technology with the fundamental reasons why art is so important to everyone – to get us thinking about things (anything!).

This post was written by Kirsten on February 18, 2010 at 1:17 pm

More Accessible User Interfaces with ARIA

On Tuesday I had the pleasure of attending Todd Kloots Yahoo! Dev talk on “More Accessible User Interfaces with ARIA”, apart from the added bonus of being located in the new Skills Matter conference and events centre. Todd made a very good presentation and a solid introduction to ARIA for those not aware of it. Rather than boring the audience with long spouts of text from the W3C ARIA spec he instead chose a more hands on approach showing everyday examples of ARIA on widgets he had developed with Yahoo and the YUI, whilst at each point stopping to show alternative options of implementation and which were the best practices and why he thought they were.

For those of you who are un-aware ARIA (or ‘Accessible Rich Internet Applications’) is a way further conveying a specific elements role within a webpage or application through the use of enhanced semantics. This allows for screen readers and assistive technologies to more accurately define to the user how to interact with a websites controls, in turn creating a richer user experience. It is especially useful to define the use of more advanced user interface controls (that are becoming increasingly more popular ) made using javascript and ajax, that have states that constantly change.

For the more interested developers out there, ARIA is applied to your applications by placing extra attributes within your elements tags, most commonly using the role=”” attribute.  One of the most important aspects of ARIA is the ability to apply multiple attributes to an element (as you would do with ID’s ort Classes). This is because each element can have multiple properties:

• It’s Role: role=”menu”
• It’s State: aria-disabled=”true”
• It’s Properties: aria-haspopup=”true”

A simpler way of describing this may be to show you an example of the markup one would use of a simple two panel tabbed interface.

<ul role="tablist">
       <li role="presentation"><a href="" role="tab">Tab 1</a></li>
       <li role="presentation"><a href="" role="tab">Tab 2</a></li>
<ul>

<div role="tabpanel">
       <p>Content</p>
</div>

<div role="tabpanel">
       <p>Content</p>
</div>

Although this is clear when visually displayed like that, the only true way of showing ARIA in use is to see (and more importantly hear) it working within a supported browser or screen reader. Though, as with all new or unfinished W3C specs, browser support and implementation varies across all vendors, with JAWS and Window-Eyes supporting the most amount of roles and states attributes. This leads us to the question of ‘is it worth all the hassle’, my own personal answer: YES, being a big support of progressive enhancement, as long as it is aiding in a better user experience for your some of your users then it is worth the small amount of extra time to implement it.

Overall, Todd’s talk was very insightful and good to see how Yahoo! are going about creating much richer user experiences for people with specific needs, and even more so educating others about the best practices which can hopefully lead to a more accessible web!

I will certainly be trying to force and implement the use of ARIA in future projects here at UVd, so keep your eye out for more info and posts around the subject in the near future. Though in the mean time I have included some further reading to feed your ARIA thirst, and start trying out ARIA yourself. But as Todd said himself:

Reading the documentation only gets you so far.

So try actually testing your new aria goodness with a screen reader, two of the links below are to help your setup a screen reader testing environment on your machine.

Enjoy!

Further reading:
WAI-ARIA Best Practices

YUI Configuring screen readers

How to use NVDA and Firefox to test your web pages for accessibility

This post was written by Patrick on November 20, 2009 at 2:52 pm

Cake of the Month: Moon Cake

Halloween special – Mooncake! And what a cake; brought back as a present from Hong Kong this cake holds a dirty little secret. Inside, AKA Scotch egg style is a duck egg yolk. You might think this is normal, ‘cakes are made with egg’ I hear you say. But this one actually has a solid egg in the middle and so deserves another picture (below). Suffice to say that it didn’t go down particularly well in the office. In fact, I was the only one who tried a second bite and certainly the only person to partake in the egg. According to Wikipedia Mooncakes are “rich, heavy, and dense compared with most Western cakes and pastries.” You can say that again.

Still, in the spirit of Halloween, these cakes are for the Zhongqiu Festival for lunar worship and moon watching. So fill your boots!

This post was written by Kirsten on October 28, 2009 at 6:19 pm

GOOD Infographics

GOOD produces a website, videos, live events, and a print magazine. They seem to successfully mix an ethical ethos with good design throughout their projects.

I came across the results of a competition they have recently finished for the best infographic which would “highlight executive compensation (as in, how much CEOs etc. are paid) in an interesting way.”

It’s nice to see creative visualizations of mass data and these are very good examples of this.

This post was written by Gareth on October 1, 2009 at 1:52 pm

Wordle – Updated

One of the first blog posts on the UV^d blog was about Java application called Wordle which created pretty looking tag clouds based on word occurrences in blog RSS feeds, del.icio.us accounts or any block of supplied text.

It is quite interesting to see a peripheral snapshot of how a blogs content changes over time. Saves the trouble of reading it all as well.

This post was written by Gareth on September 30, 2009 at 3:35 pm

FOWD Tour -Bristol

Whilst Gareth was attending the1^st linked data meetup I was on the other side of the country in lovely Bristol attending the FOWD Bristol Tour.  The day long conference was designed to let people get a chance to experience what the normal FOWD conferences are like in a place nearer to them without having to go to London or New York (And for a fraction of the price!).

Though, as I already live in work in London, the main attraction for me to travel all the way to Bristol was down to the fine line-up of speakers for the day. With the likes of Elliot Jay Stocks and Bruce Lawson I had no valid reason not to attend, and the small factor of being able to catch up with some old friends.

Elliot kicked the day of with ‘A Perfect Portfolio’. A talk aimed at highlighting the key strengths and weaknesses in portfolio designs, and some very valid points that you should take into consideration when designing your own. A subject that is very topical here at UV^d at the moment due to us being in full swing of our own re-branding. It was very interesting to see the amount of points that came up that we have spent hours (coming up to years) discussing and deliberating over, such as the importance of showing your featured work on your homepage, to how you go about showing the process of your work: Elliot summed up the presentation succinctly:

“It’s not about the finished project, it’s ‘How you get there!’”

The next discussion of the day was from Paul Boag of Headscape titled “The Battlefield of Design – Designers vs Clients “. The first interesting thing to note was that Paul had decided not to use any slides at all and to rely purely on his memory (and cue cards) to educate us. Although, even with his new controversial style of presenting, it turned out to be a very insightful look into the process that Headscape use from brief to sign off. With the main aim of including the client throughout the design process rather than “designing behind doors”. I picked up some good tips from this, which we will be hopefully be putting into practice here in the future.

The HTML5 working spec is something that I have been following throughout the year and starting to become very passionate about. Therefore there was no doubt that in my opinion the best was saved until last, with Bruce Lawson’s talk on the Future of HTML5.  He covered a wide range of basic HTML5 knowledge, from the introduction of new basic tags such as <header>, <article>, <section>, <aside>, and <footer> to some of the more advanced such as <video>, <audio> and my personal favourite <canvas>  which enables the dynamic rendering of graphics on the page through javascript, a good example of this can be seen here.

The most important thing to take from Bruce’s talk though, is the fact that you don’t have to wait for the HTML5 spec to be complete to start using it. That could be years and even more so for the browsers to fully implement it, the pages with the new doctype<!DOCTYPE html> will still render in the browsers we know today, and most will accept the new tags. So why not start experimenting and playing! We certainly have, as you’ll see if you take a look at the source of this very blog.

Overall FOWD was a very enjoyable day, yet there is no way I could have covered everything in one small blog post. So for more info Bruce and Elliots slides from the day can can be viewed here:

• The Future of HTML5
• Stop worrying and get on with it

This post was written by Patrick on September 29, 2009 at 10:44 am