Tonight’s LFPUG meets for a presentation on Adobe’s Alchemy project, followed by another hour on the Flash Pixel Bender plug-in.

In December I played around with Alchemy, going through the basic set up and few of the examples. But found it tough to go much further beyond there.

My C and C++ isn’t great, I think there were a few bugs and glitches in the software and I couldn’t get through them. More tutorials would have been good, I guess there could be more around now, I’ve been meaning to get back into it again.

The presentation tonight is from Thomas Vian, a Flash developer rather than a C developer – so I’m looking forward to the session.

So far there are 75 people registered to attend – not a bad number, hopefully he’ll cover more than just he basic tutorials and getting started setup that Adobe offer on their Labs page.

There’s also a ‘double feature’ on Adobe TV with Ryan Stewart talking to Scott Peterson about the project, there’s a demo after the interview. Good catch-up viewing:

And not to dismiss the Pixel Bender presentation, looking forward to that too!

Today Adobe released BrowserLab, an online service and Dreamweaver plug-in that allows Web developers to test their websites on popular browsers and across multiple operating systems.

I’m loving this.

Basically, you put in a Web address, collect a browser ’set’ of those supported (currently, Firefox 2.0 & 3.0 on both XP and OS X, IE 6 & 7 for XP and Safari 3.0 for OS X) and screenshots of actual browser renderings are generated in real time.

Adobe BrowserLab

Not only that, but there is a side-by-side ‘2-up’ comparison view to see overall differences – and even better, an onion skin (and zoom!) view can be used to measure discrepancies to the pixel.

More info and an FAQ is on the Adobe Labs page.

Back in December at the Adobe MAX Sneak Peeks session, I saw a demo of ‘Meer Meer’, which has now fully evolved to become this.

I’m not sure about the Web version, but I think the Dreamweaver CS4 plug-in stores all the popular webkits and browser engines, rendering them in real-time like a highly enhanced version of the ‘design view’ that we’ve always been familiar with. My download is halfway through now.

I’ve written posts about hacking your operating system to run multiple versions of Firefox and Internet Explorer, and recommended virtual machines for cross-platform testing - all  that seems so over-complicated and completely redundant now.

Brilliant!

There’s also a lot of talk on Twitter about it, I think a lot of people share my feelings. :)

The Free Range summer degree shows kicked off last week showcasing a ton of great work from students around the UK. This week is the first Design week, exhibiting the work of budding designers across multiple disciplines.

I managed to get to the opening night on Thursday, mainly to see ScreenGrab09, the degree show of Bournemouth Uni’s Interactive Media Production course, that I graduated from two years ago.

One of the great things about the course is the diversity of work that the students regularly produce.

At ScreenGrab you can see Web apps, games, interactions and interactive experiences, quite unlike the rest of the work under the ‘design’ banner of the week,stood out from the rest of the work I saw from other universities on the night.

Vic Bishop’s OIC, photo by Will Goldstone

Corin Wilkins’ MyFace, photo by Will Goldstone

Today is actually the last day that ScreenGrab will be in London, so if you have the chance to get down to Brick Lane, it’s highly recommended.

Otherwise, the show moves to back down Bournemouth exhibiting on the Talbot Campus on the 4th and 5th of June (more details here).

You can follow the #screengrab09 tag on Twitter to see what people thought about the show, and photos of the event are collecting on Flickr, tagged screengrab09.

Last week I attended a YDN Tuesday, a developer talk hosted by the Yahoo! Developer Network led by Dirk Ginader, discussing Web Accessibility.

It looks as if these presentations have been running for a while now and they’ve got a good schedule lined up for the coming months. They discuss a decent section of Web development beyond the pure skills – JS, DOM, PHP, OAuth, Web services, Yahoo! technologies and by the looks of things have AJAX, Flex and Ruby on Rails in the pipeline.

They’re also free, which is great when you’re sitting down to hear Yahoo! experts talk about what they do best!

Dirk Ginader is part of the Accessibility Task Force at Yahoo! and tackled developing fully accessible Web applications at every level – covering basic markup, best practices with CSS and accessible Javascript, finishing with a discussion on WAI-ARIA, offering some of his insight gained from working with the standard.

Most people are familiar with the common three-layer development of Web sites, building a core HTML structure, styling with CSS and enhancing functionality with Javascript. In his talk though, Dirk introduced a five-layer development method and spoke about this throughout the sessions.

Dirk Ginader's 5-layer Web development

Building on top of the common three-layer method, Dirk spoke of adding levels of ‘CSS for Javascript’, i.e. adding extra CSS if Javascript is available and enhancing the interface to promote this – and a final layer of WAI-ARIA, the W3C standard for accessible rich Internet applications.

The core layers – HTML, CSS, JS

First though Dirk went into the basics, giving a good exploration of the first shared three layers – reiterating the importance of good, clean HTML, appropriate and logical tab ordering, form building and that it should, obviously, be usable without CSS and Javascript.

Again he reiterated the importance of dividing CSS and Javascript, simply, as it always should be, that CSS is for styling and Javascript is for interaction. CSS can be used achieve a lot of interactivity functionality that would otherwise be controlled by Javascript, but these are akin to hacks, says Dirk.

Another accessibility oversight is the assumption that all users have a mouse or pointing device – and as such, all design is appropriated for mouse control. If your mark-up is good and each ‘level’ of your development has been tested and is robust, your site should be completely navigable with just the Tab and Enter keys. Also, any CSS that uses the mouse-only :hover effects, should also use :focus, which includes active tabbing.

I always feel that approaching Web development in view to adhere to strict standards and to maintain accessibility always helps produce cleaner code and generally minimise errors and cross-browser inconsistencies in the long run anyway.

Dirk spoke about the usefulness of the focus() Javascript function, in bringing users’ attention to alerts, changes, altered screen states and such – especially handy for users with screen readers or screen magnifiers.

On the subject of screen readers, Dirk spoke about how they really work, how they see a Web page and handle the content – talking about loading systems and various reading modes. This was great becausue although I’ve designed for screen readers before, I’ve never seen one being used or had a go myself – and I’m sure I’m not the only one.

CSS for Javascript

The first extra level of Dirk’s five-layer development is in adding CSS when Javascript is available. This means your interface can be altered knowing that Javascript can be used.

You can use Javascript to append an additional class to page elements so that you can use CSS to target and style them. For example, the following line of code adds a class named ‘js’:

document.documentElement.className += ” js”;

You would then style with the follow CSS, where the first declaration is global and the second applied only if Javascript has been found and appended said ‘js’ class to an element:

.module {
/* Both layouts */
}
.js .module {
/* Javascript layout */
}

Enhancing a page in this way isn’t anything new, but it is very cool.

If you’ve heard of the term Progressive Enhancement, then you’ll know why. If you’ve not, you may have heard of Graceful Degradation. Both are methods for handling differences in browser rendering and capability, they’re similar but subtly different.

Graceful degradation, or ‘fault tolerance’, is the controlled handling of single or multiple errors – that when components are at fault, content is not compromised. In developing for the Web, it means focusing on building for the most advanced and capable browsers and dealing with the older, second.

Progressive enhancement turns this idea on it’s head, focusing on building a functioning core and enhancing the design, where possible, when capable.

There are a good few articles on A List Apart about that I strongly recommend bookmarking:

 

The last article, Scott Jehl discusses enhancement with both CSS and Javascript and has a similar trick of appending class names to page objects once Javascript has been detected. He talks about how to test those capabilities and offers a testing script, testUserDevice.js, which runs a number of tests and returns a ’score’ for your interpretation. As well as offering an amount of detail on top of the alone recognition of Javascript, it even stores the results in a Javascript cookie so the tests don’t have to be run on every page load.

WAI-ARIA

The final layer of hotness is WAI-ARIA, the W3C standard, the recommendation for making today’s RIA and heavily client-scripted Web sites accessible.

WAI-ARIA adds semantic metadata to HTML tags, allowing the developer to add descriptions to page elements to define their roles. For example, declaring that an element is a ‘button’ or a ‘menuitem’. In Dirk’s words, it maps existing and well known OS concepts to custom elements in the browser.

As well as page elements, page sections or ‘landmarks’ can be described too – declaring, for example, a page’s ‘navigation’, ‘banner’ or ’search’ box – these look very similar to HTML 5.

There’s a great introduction on the Opera Developers site.

WAI-ARIA is not something I’ve used before, but looking at the specification there seems to be a lot of definitions you can add into you code – it looks very extensive.

Although it is ready to use, it will apparently invalidate your code unless you specify a specific DTD. Dirk didn’t actually point to where you can find these, though I’ve seen that you can make them yourself, however I don’t know if this is what he was suggesting.

Dirk has also uploaded his slides onto Slideshare, including the code I’ve used above, you can see them here:

It’s been a good while since Twitter added their OAuth beta phase, I wanted to write about it when it first came about but never had the chance – same story with when they were under fire from phishing attacks in January and the real need for stronger security became so apparent. Anyway what with the recent ‘Sign in with Twitter’ announcement, which enhances the OAuth beta, I thought I’d use this is my excuse to say what I wanted to say.

If you’re unfamiliar with OAuth, it’s an open protocol standard for user authentication. It works by allowing a user of one platform to grant a secondary platform access to their information (stored by the first platform) without sharing their login credentials and only exposing data they choose.

When a user visits a ‘consuming platform’ (the secondary application, that is) it passes a request to the native platform, the ’service provider’, which returns a login request for the user to complete. The user then logs in to the native platform, proceeds to inform the platform to grant access to their data when the secondary application asks for it – and is then returned to that consuming platform, ‘logged in’ and ready to go.

The crucial problem with Twitter’s API is that, currently, to access password protected services, for example the ability to publish tweets, this is not the mechanism facilitating the data access. The method they use instead is seriously flawed, and dangerous.

Right now, a website or desktop application such as TweetDeck or Twitpic, simply asks for your login details with a regular login prompt. I think from that point onwards, there is a huge amount of misunderstanding to what is actually going on.

Users are not logging in to Twitter at this point, instead they are just telling the third-party application what their password is. Thereafter, the application uses that password as it chooses.

Instead of telling Twitter that you’d like a certain application to access your data, you are instead freely handing over your password to the application, you hope in confidence, that it won’t be stored, sold or misused thereafter.

Incredibly, this has gone on for a very long time. It seems the general majority of Twitter users have come to accept handing out their password to completely unknown sources. True, those aware of the dangers or generally security-wary tend only to use a select few services, but there are so many applications built on Twitter’s platform and a lot of them offer very niche, almost ‘throwaway’ services, that I can’t believe the ease and almost disdain with which so many hand out their login credentials without concern.

OK – it’s not like it’s your giving away your online banking details, but I can’t imagine this happening with any other type of account – social media or otherwise – email, Facebook or any other website, if they offered an open platform for these kind of applications to be built upon.

It’s become as increasingly accepted as the request has become more common. The problem with there being so many applications, especially the ‘disposable’ kind, is that users can forget when and where they have given their details to whom.

Say a user tries a new application but it seems not to work, it will be easily forgotten – perhaps put down to teething problems of the app or maybe it’s just not a very good app and “..nevermind”, they might not have been that interested anyway. By this point, if it was purely an attempt to capture your details, it’s too late.

Admittedly, and thankfully, I’ve never heard of anything so blatant and I hope if anything so obvious came around that the Twitter community would raise awareness and Twitter would respond accordingly.

But of course, the real targets for these vulnerabilities are the users who aren’t aware of the danger and aren’t expecting to have to look out for fishy, or phishy, sites – and the problem is informing those people.

If you’re reading this blog – that being a Web development blog and you’ve sat this far reading a post about user authentication – chances are you’re Web-savvy and you’re exactly not the type of person I’m talking about. You’re probably also not the kind of person who reuses passwords, but you also know that’s not uncommon.

In a scenario where a password is breached, if the email account that you’ve registered with Twitter uses the same password as the password you’ve just lost to the phishing attack, there would be no question that an attacker wouldn’t try the same password with every other account you’re receiving email from and connected to.

Then that becomes a serious breach.

But like I say, I think I’m preaching to the choir – and maybe being a bit harsh about people’s common sense.

Twitter and OAuth

Anyway I wanted to talk about OAuth. Twitter’s implementation is described on their wiki page for ‘Sign in with Twitter’, it performs accordingly:

Sign in with Twitter workflow

  • If the user is logged into Twitter.com and has already approved the calling application, the user will be immediately authenticated and returned to the callback URL.
     
  • If the user is not logged into Twitter.com and has already approved the calling application, the user will be prompted to login to Twitter.com then will be immediately authenticated and returned to the callback URL.
     
  • If the user is logged into Twitter.com and has not already approved the calling application, the OAuth authorisation prompt will be presented. Authorising users will then be redirected to the callback URL.
     
  • If the user is not logged into Twitter.com and has not already approved the calling application, the user will be prompted to login to Twitter.com then will be presented the authorisation prompt before redirecting back to the callback URL.
     

You may have already seen it in action if you’ve used Kevin Rose’s new startup WeFollow, the ‘user powered Twitter directory’. You can see which applications (if any) you’ve granted access to in your account settings at http://twitter.com/account/connections.

Flickr also uses OAuth, you may have seen it there if you’ve tried uploading images with a third-party application.

Aside from being more secure as a technical solution, Twitter’s adoption of OAuth could have a very positive domino effect on similar and future applications. In fact, it’s been predicted that it’ll ‘pave the way’ for a whole host of new apps and more mash-ups to come – presumably using both Twitter’s data or for new platforms to be built upon. I imagine this prediction sees a point where users are familiar with the authentication process, confident that their data can be accessed securely and within their control.

As I said in my post about ‘Sign in with Twitter’ – Twitter is an incredible tool and is becoming ever more powerful and recognised as such. Although it’s not like it’s popularity won’t increase anyway, but if some people’s qualms and easy criticisms of Twitter, of which security always scores highly, are solved by these kind of platform advances, there will be no denying it as a leader, rather than a contender, in the social Web landscape.

It must be said though, OAuth isn’t infallible. Only two weeks ago, Twitter took down their OAuth support in response to the uncovering of a vulnerability, though they weren’t the only ones affected.

And then there’s phishing..

I mentioned the phishing attacks that Twitter suffered in January – thirty-three ‘high-profile’ Twitter accounts were phished and hacked. It saw a good effort on Twitter’s part for reacting quickly and fixing the problems, only two days prior they had released a notification to be aware of such scams.

During this time, Twitter was a great source for debate and argument over how to resolve its own issues.

I follow a lot of developers and platform evangelists including Alex Payne, Twitter’s API Lead, as he battled through the security breach. Another is Aral Balkan and between the two of them they voiced some fair criticisms (1, 2, 3) and argued out a lot of issues (1, 2).

As Alex says, OAuth does not prevent phishing, Twitter are aware of this. The very premise of phishing, that of dressing a trap as a legitimate and trusted source, can be extended to OAuth implementations, too – but it does make it easier to handle and by using OAuth, instead of Basic HTTP Auth, builds user trust along the way.

Up until now, Basic Auth has been a large part of Twitter’s API success – OAuth is an additional high hurdle for new developers. Twitter admit, they’ll give at least 6 months lead time before making any policy changes and they’ve no plans in the near term to require OAuth.

Alex did a good job of pointing out helpful resources and blog posts for those joining the debate. One was Jon Crosby’s post about the phishing attacks, which, as he says, is a great explanation of the correlation of OAuth to phishing attacks – which is to say, essentially none. It’s short post but clearly outlines the difference between authentication and authorisation – and in Alex posting it, shows Twitter’s awareness of the problem and understanding of what OAuth is and is not.

Another was Lachlan Hardy’s post about phishing (via), which extends Jeremy Keith’s proposed ‘password anti-pattern’. Keith thinks that accessing data by requesting login credentials is unacceptable, a cheap execution of a bad design practice. But interestingly he goes on to talk about the moral and ethical problems that developers experience – that although users will willingly give out their passwords and Basic Auth is an easier process to implement, as well as being a lower barrier of entry for users (again, look at Twitter’s success with it), we actually have a duty not to deceive them into thinking that it is acceptable behaviour.

Keith also talks about the pressure of the client, their need to add value to their applications ‘even when we know that the long-term effect is corrosive’ – but when I read that, posted from Alex remember, and having read his thoughts on security from his own blog, I wonder if Alex is hinting at something about Twitter outside of his control..

He is the only Twitter employee I follow so I tend to think of him the representative, but probably should think of them separately. Aral’s post about the phishing scam points the blame squarely at ‘Twitter’, but only in the last paragraph does he say so ’stop blaming application developers’ – and at that point I realise the devs at Twitter are just trying to do their jobs.

Actually, I’ve just noticed Marshall Kirkpatrick’s article ‘How the OAuth Security Battle Was Won, Open Web Style‘ at ReadWriteWeb, it talks about the down time of OAuth last month. It’s a pretty good read, reporting that the lead developers of the providers were all aware of the vulnerability as it went down, but quickly and effectively worked together to resolve the problem before really going public and risk inviting attacks.

As Marshall says, if OAuth was software, a fix could be implemented and pushed out to everyone who was using it – but it’s not, it’s ‘out in the wild’ and no one party is in charge of it – it’s real victory that they all cooperated so quickly and so well to neutralise the threat.

Since upgrading my blog from Wordpress.com to a hosted Wordpress.org installation, I’m only now realising how good Wordpress is and how simple they’ve made the migration possible.

The free blogs are great for getting started – and that’s not to say only for ‘getting started’, I used their solution for two years without a single problem. I upgraded to have more control, with regards to embedding media, handling uploaded files and because I’m keen to get something on my http://www.marchibbins.com/ domain soon – previously it redirected to my Wordpress.com by web forwarding.

I obtained my hosting from WebFaction and without too much of a sell, they’re pretty awesome. They offer an unlimited number of sites, databases and email accounts, SSL support, SFTP, SSH and full shell access – you can literally install any applications you want on there.

As well as that they have a good number of applications ready to go via their control panel. One of these is Wordpress.

I didn’t want to start this new blog from scratch and I didn’t want posts duplicated on the new domain and still existing on my free blog – this is a bad thing. I also didn’t want to delete the old posts and leave an ‘I have moved’ notice, because I’m aware of incoming links that would return HTTP 404 (file not found) errors. I wanted to keep all of my posts, preferably hosted now on my new hosting, maintain the old links even though the web address would be different – and do all of this seamlessly so no-one would really realise. My solution was in two parts.

Domain Mapping

One of the great things Wordpress offer is Domain Mapping, which basically means your blog can be at Wordpress.com but it looks like it is somewhere else – on another domain (support page here). It’s a paid upgrade and requires you having a domain registered first, of course.

It makes use of the ‘Domains’ feature, you can access it from the Dashboard, which can be set to forward all requests to your blog to the equivalent URLs on a new domain. For example, visitors to http://yourname.wordpress.com/about/ would be automatically redirected to http://yourname.com/about/, same as visiting http://yourname.wordpress.com/2009/04/29/post would take you to http://yourname.com/2009/04/29/post.

To do this (as the support guides you) you need to first update the nameservers with your domain registrar, which means the domain name will point to Wordpress’ nameservers instead of theirs. The Wordpress nameservers are as follows:

ns1.wordpress.com
ns2.wordpress.com
ns3.wordpress.com

And the if the registrar needs the IP addresses:

72.232.101.25
76.74.159.137
64.34.177.159

Changing the DNS settings can take up to 72 hours to propagate, so don’t expect to see results immediately – but it’s often less.

Once this is done, you should be seeing Wordpress.com at your domain name. Then in the Domains section of your blog Dashboard (under Settings), add your new domain. Here you will be asked to purchase the Domain Mapping upgrade here if you haven’t already. Then set that new domain as your primary URL and from then on, all requests should be forwarded!

Subdomains

For my blog though, I wanted to map to a subdomain, specifically http://blog.marchibbins.com/ rather than the http://marchibbins.com/ top-level domain. To do this you don’t change nameservers, instead add a DNS CNAME at your DNS provider (this is on the support page, too).

Doing this manually will look something like this:

subdomain.yourname.com. IN CNAME yourname.wordpress.com.

In my case, I implemented a DNS override with my WebFaction hosting (a feature that they offer) and after 24 hours I could see Wordpress.com, so upgraded and added my domain name in the same way. That’s the first part – and this meant any old links (and links within posts to other posts) would be still find their destination.

Switching to Wordpress.org

As I said though, this simply forwards your free Wordpress.com to your new domain. This doesn’t even require any hosting, just a domain registration. But I wanted the features and control that Wordpress.org offers.

Now that the domain mapping was in place, I removed the DNS override, meaning that the ‘blog.’ subdomain no longer pointed to Word press. Instead, I installed the full version of Wordpress 2.7.1 there.

Then I exported all my blog posts, comments, categories, authors – everything – from my old blog (this is done through the Dashboard with a single XML file) and imported it into my new blog. I also found my old theme and updated all my links etc – basically rebuilt my old blog on the new platform. This is super-easy and easily accomplished before the DNS has updated.

This means that all requests are still forwarded as before, but instead land at my newly installed Wordpress.org blog and the relevant post there!

Doing this does have some dependencies – the posts need to have been imported, they cannot be republished, because this would give them new unique identifiers and the forwarding wouldn’t find them as a result.

Similarly, the the structure of your permalinks must be consistent – requests are forwarded without regard for what is at the destination, the URL string is appended verbatim. This means if you used something like http://yourname.wordpress.com/2009/04/29/post you can’t then use http://yourname.com/?p=50.

It also means the previous blog is now hidden, done and dusted.

New comments to your new domain won’t be added to your old blog, though that shouldn’t really matter as it’s inaccessible now – so the posts aren’t ever seen to be ‘out-of-date’. The stats will also cease, as no-one is visiting that blog anymore, they’re visiting the Wordpress.org installation – so install a stats package there!

Another handy outcome of the mapping means that RSS subscribers should still receive updates. Even though the Wordpress.com blog feed is no longer being updated, the request for http://yourname.wordpress.com/feed/ is forwarded to your new blog’s feed – and that’s how they’ll be seeing updates, hopefully including this post!

I have now upgraded and moved my blog from http://hibbins.wordpress.com/ to http://blog.marchibbins.com/.

As far as I’m aware, I’ve successfully mapped my Wordpress.com blog to my new domain. This means that any visits to my old blog will redirect you to my new domain automatically. This also means that any linking to those old posts, any bookmarks and (hopefully) RSS subscriptions should all still be OK – they too should ultimately get to their intended destinations.

Having said that, I’m not sure if all RSS readers will be happy with it, so if you do subscribe please update the feed to http://blog.marchibbins.com/feed/.

See you there!

This month’s London Web Standards group met to discuss Designing for the Social Web, by Joshua Porter. Big thanks to Jeff Van Campen, the group’s organiser, for kindly giving me a copy!

I liked this book, and I don’t know if I had expected to. From the first page it’s immediate that the ‘design’ of the title doesn’t refer to graphic or Web design. It’s a 101 in creating successful social Web applications, covering the whole spectrum of ‘design’ and development and how to tackle the issues you’ll come across in doing so.

Quoting names as varied as Darwin, Freud, Berners-Lee and Douglas Adams, Designing for the Social Web offers a great amount of depth in it’s near-200 pages, more so than I had anticipated. Porter presents details studies in all aspects of social media ‘design’. Of course, the interface and UX designing itself, as well as discussing user behaviour, online identity, social economics and particularly the application life cycle.

The book lays the foundations for constructing the ‘perfect’ social website. It defines important goals and principles, it recommends research methodologies in order to identify your audience. From there, it takes you through the process of determining your users’ intentions, their goals and incentives – ultimately, for you to distinguish your core features and the site’s functions.

He looks at popular social sites, the big names as you’d expect and reflects upon their legacies, but others too that invite further investigation. Throughout, he refers to good supporting materials – important interviews, blogs and key names in this current social media boom.

Early on, Porter constructs a framework for development, his ‘AOF’ framework, describing a simple prioritisation scheme that he uses for reference thereafter. He expands upon its three building blocks – of audience, objects and features - and moves forward to studying each topic and their importance within the chapters that follow. It’s detailed and well deconstructed.

But the real good kick of the book is in the four chapters where Porter concentrates and dissects four very focused areas of your application’s development, specifically, designing for sign-up, for ongoing participation, for collective intelligence and for sharing. These parts make up the bulk of the book, they’re very well researched and informed.

Without wanting to relate the whole book here, these build upon four ‘hurdles’ that Joshua outlines at the very beginning, describing how to achieve, maintain and build-upon a deep level of user engagement.

Porter's User Engagement Hurdles
Ultimately, Porter concludes by offering methods of analysis in order to understand and optimise your application once published. He gives pointers to evaluate performance, measure and act upon usage statistics, describing techniques to gather meaningful metrics and how to react accordingly.

As I say, I enjoyed the book all in all. Throughout, it is very contemporary and up-to-date in both its principles and with its examples.

It’s needless for me to say how powerful and useful, lately how almost essential, social Web apps have become and can be. With giants like Facebook, MySpace, YouTube et al, even sites that you might not think at first to be inclusively ’social’ (although they very much are) – Nike+, LibraryThing – it is an incredibly hard market to break into for any new startups.

I think for anyone intending to do just that, this book is both extremely relevant and important reading.

Last year Facebook released Facebook Connect and about the same time Google released Friend Connect, they’re two very similar services that allow users to connect with information and with their friends of the respective native platforms from third-party enabled sites. The intention, as I’ve written about before, is to add a layer of social interaction to ‘non-social’ sites, to connect your information and activity on these third-party sites to your information and activity (and contacts) on the original platforms.

Then in March, Yahoo! announced their service sign-on, called Yahoo! Updates.

Now, this week, Twitter have announced their connection service, called ‘Sign in with Twitter‘. It too gives you a secure authenticated access to your information and contacts, in exactly the same way the others do – except this time, it’s Twitter.

Sign in with Twitter

You might ask if we have three, do we need a fourth? Have you ever used any of the other three?

But don’t dismiss it, or think it Twitter are jumping on to any kind of bandwagon, Twitter’s implementation is fundamentally different to the others – and it could cause quite a stir.

The problem with the other services (ultimately the problem with the platforms) is, more than often not, they are completely closed and non-portable. Although you can sign-in to a third-party site and access your data, there’s a lot of limitation to what you can retrieve and publish. These popular social networks have grown and amassed huge amounts of members and data which they horde and keep to themselves. I’m not talking about privacy, I’m referring to data portability.

The infrastructures are like locked-in silos of information and each built differently, because, either, they never considered that you’d want to make your data portable or they didn’t then want (or see value) in you moving your data anywhere else. The services they’ve created to ‘connect’ to your data are also proprietary methods – custom built to channel in and out of those silos. Each of those services too, are singularities, they won’t work with each other.

Twitter though, have come up with a solution that adheres to agreed upon standards, specifically, by using OAuth to facilitate it’s connection. Technically, it’s significantly different, but in practice, you can expect it to do everything the others can do.

The community’s thoughts

Yahoo’s Eran Hammer-Lahav (a frequent contributor to OAuth) has written a good post discussing his thoughts, he says it’s ‘Open done right’ – no proprietary ’special sauce’ clouds interoperability as happens with Facebook Connect. I think he’s right.

He looks at what happened when Facebook Connect was introduced, that they essentially offered third-party sites two key features: the ability to use existing Facebook accounts for their own needs, and access Facebook social data to enhance the site. The value of Facebook Connect is to save sites the need to build their own social layer. Twitter though, is not about yet another layer, but doing more with that you’ve already got.

Marshall Kirkpatrick also wrote about the announcement, his metaphor for the other ‘connection’ services best describes how they function – ‘it’s letting sites borrow the data – not setting data free’.

But then he talks about Twitter ‘as a platform’, and I think this is where things get interesting. He says:

Twitter is a fundamentally different beast.

All social networking services these days want to be “a platform” – but it’s really true for Twitter. From desktop apps to social connection analysis programs, to services that will Twitter through your account when a baby monitoring garment feels a kick in utero – there’s countless technologies being built on top of Twitter.”

He’s right. Twitter apps do pretty much anything and everything you can think of on top of Twitter, not just the primary use of sending and receiving tweets. I love all the OAuth and open standards adoption – but that’s because I’m a developer, but thinking about Twitter as a platform makes me wonder what kind of effect this will have on the users, how it could effect the climate, even landcape, of social media if, already being great, Twitter is given some real power

People have long questioned Twitter’s future – it’s business model, how it can be monetised, those things are important – but where can it otherwise go and how can it expand? Does it need to ‘expand’? It’s service is great it doesn’t need to start spouting needless extras and I don’t think it will. But in widening it’s connectivity, it’s adaptability, I think could change our perception of Twitter – it’s longevity and road map, the way we use it and think of ourselves using it.

My Thoughts

Irrelevant of Richard Madeley or Oprah Winfrey’s evangelism, Twitter is an undeniable success.

When Facebook reworked and redesigned their feed and messaging model, I almost couldn’t believe it. What was the ’status’ updates, basically IS Twitter now, and that’s it’s backbone. It’s Twitter’s messaging model, it asks ‘What’s on your mind?’.

I’m probably not the only one who thought this, I’d guess any complaints about this being a bit of a blatant rip-off were bogged down by all the negativity about the interface redesign.

I think Facebook realised that Twitter has become a real rival. I think (and I guess Facebook also think) that as people become more web-savvy and literate to these sociable websites, they want to cleanse.

The great appeal of Twitter for me was, ingeniously, they took a tiny part of Facebook (this is how I saw it two years ago anyway) and made it their complete function – simple, short updates. Snippets of personal insight or creative wisdom, it didn’t matter really, what was important was it ignored the fuss and noise of whatever else Facebook had flying around it’s own ecology (and this was before Facebook applications came around) and took a bold single straight route through the middle of it.

Looking back, a lot of Facebook’s early adoption could be attributed to people growing restless with the noise and fuss of MySpace at the time – Facebook then was a clean and more structured an option.

I remember Twitter was almost ridiculed for basing it’s whole premise on such a minute part of Facebook’s huge machine. Now look at the turnaround.

Now people are growing up out of Web 2.0 craze. A lot went on, there was a lot of ‘buzz’, but a lot of progress was made in connecting things. People now are far more connected, but perhaps they’re over-connected, struggling from what Joseph Smarr calls ’social media fatigue’. People they have multiple accounts in a ton of dispersed and unconnected sites around the web – true, each unique and successful for it’s own achievements – but it can’t go on.

Twitter for me is streamlined, cleansed, publishing. Whether talking about what I’m doing or finding out information from people or about topics that I follow, the 140 character limit constrains these utterances to be concise and straight-to-the-point pieces of information. The ‘@’ replies and hashtags are brilliant mechanisms conceived to create connections between people and objects where there is almost no space to do so.

I use my blog to write longer discourse, I use my Twitter to link to it. Likewise with the music I listen to, I can tweet Spotify URIs. I link to Last.fm events and anything particularly good I’ve found (and probably bookmarked with Delicious) I’ll tweet that out too.

Twitter for me is like a central nervous system for my online activities. I won’t say ‘backbone’ – because it’s not that heavy. Specifically a nervous system in the way it intricately connects my online life, spindling and extending out links, almost to itself be like a lifestream in micro.

Recently, I saw Dave Winer’s ‘Continuous Bootstrap‘ which although is admittedly a bit of fun, describes the succession of platforms deemed social media ‘leaders’ (see the full post here).

What I initially noticed is that he aligns successful platforms – blogging, podcasting – with a single application: Twitter. It doesn’t matter whether he is actually suggesting that Twitter alone is as successful as any single publishing form, but it did make me wonder if Twitter, rather than being the current ‘holder of the baton’, will actually be the spawn for whatever kind of Web-wide platform does become popular next.

If the real Data Portability revolution is going to kick in, if it’s on the cusp of starting right now and everything will truly become networked and connected – would you rather it was your Twitter connections and voice that formed that basis for you or your Facebook profile?

I know I’d much rather read explore the connections I’ve made through Twitter. The kind of information I’d get back from the type of people who’d connect in this way would be far more relevant from my pool of Twitter connections rather than the old school friends and family members (notoriously) who’ve added me on Facebook, the kind that just add you for the sake of it.

If Web 3.0 (or whatever you want to call it) is coming soon, I’d rather detox. Twitter is slimmer and still feels fresh to start it out with. For me, Facebook feels far too heavy now, out of date and messy. Maybe I’m being unfair and I feel that way because I’ve fallen out of touch with it and now I visit less frequently, but all the negativity hasn’t done it any favours – and those complaints aren’t unfounded.

If you’re like me and cannot resist watching YouTube videos in High Definition or High Quality whenever the option is available, you might also get a bit disgruntled that no-one ever seems to link directly to these versions – or might not know how to.

I’ve not seen it documented anywhere on YouTube’s site (maybe you’re told when you upload a video – I’ve not tried), but you can link directly to High Quality and High Definition versions of a video by adding or altering a single argument on the URL string.

For example, take a normal YouTube link:

http://www.youtube.com/watch?v=LPmbGzQaOCs

If you add ‘fmt=18‘ to the end of the URL, you’ll automatically view the High Quality version:

http://www.youtube.com/watch?v=LPmbGzQaOCs&fmt=18

If a High Definition version is available, add ‘fmt=22‘:

http://www.youtube.com/watch?v=ikqg99Q4FAw&fmt=22

Easy!

If you want to embed higher quality versions of the videos through the YouTube player though, you’ll have to use two arguments like so:

&ap=%2526fmt=22

The HD videos on YouTube’s site play at 854 x 505 pixels by default (including the player chrome), but these 720p videos will support up to 1280 x 720 pixels.

You can edit the dimensions of the player in the embed code you’re provided with. So your final HD embed code will look something like this:

<object width=”854″ height=”505″><param name=”movie” value=”http://www.youtube.com/v/ikqg99Q4FAw&hl=en&fs=1&ap=%2526fmt=22″></param><param name=”allowFullScreen” value=”true”></param><param name=”allowscriptaccess” value=”always”></param><embed src=”http://www.youtube.com/v/ikqg99Q4FAw&hl=en&fs=1&ap=%2526fmt=22” type=”application/x-shockwave-flash” allowscriptaccess=”always” allowfullscreen=”true” width=”854″ height=”505″></embed></object>

Another thing, you can also jump straight into a specific part a video by adding ‘#t‘ parameter and specifying the time value like so:

http://www.youtube.com/watch?v=oC4FAyg64OI&#t=1m49s

These arguments can be paired of course, for example, the same in High Quality:

http://www.youtube.com/watch?v=oC4FAyg64OI&fmt=18#t=1m49s

I recently found out you can do this with Spotify URIs, too:

spotify:track:02dGPXdVeZsZks4g48yaJE#0:24

Albeit formatted differently, it does the same job. Note this only works with Spotify URIs, it won’t work with the HTTP links.

It would be nice to see a standard adopted for such features, but it’s really up to the platform developers to decide upon the mechanism.

Unfortunately too often each one wants to make their own unique. This is a micro example of a much larger problem I tend to go on about (see Data Portability and Linked Data).

Anyway, I think YouTube should definitely make their quality selection easier. These parameters tweaks feel like code hacks. It would be much nicer if YouTube allowed you to specify ‘quality=HD’, or something similar, to any video link.