Posts

 

Microformats, the AK-47 of the web - WebDD

Had a great time at WebDD, my session “Microformats HTML to API” seemed to go down well. It’s always hard to tell what value people get from a talk when you’re giving it, but I had lots of people asking me questions for the rest of the day, which is a good sign.

I have created a PDF version of the slides for download /> /> MicroformatsHTMLtoAPI.pdf(1.4Mb)

Find out about microformats

Building microformats

Discovery and extraction of microformats

Development tools

During the talk I glued a couple of Dan Cederholm phrases together “Oblivious development by planting seeds”. This seems to have helped crystallise the benefits of publishing Microformats, and was used in a lot conversations during the day. The term oblivious development is starting to see wider use in the community and now I understand its value in communicating this concept. The other fantastic quote I used was “Microformats, the AK-47 of the web” which I found on John Allsopp microformatique.com blog. I love the conceptual crossovers it implies “fit for purpose” product design, and utilitarianism

Microformats, the AK-47 of the web /> “I think history has shown us over and over again that the most successful “things” are those that are only as complex as they need to be. I can think of the AK-47 rifle, for example… With Web 2.0, we’re seeing that as well.”

  • Events
  • Microformats

Speaking Microformats at WebDD

I have an busy few weeks ahead; amongst other things I am speaking at the WebDD conference. I have picked the title “Microformats – HTML to API” for the session. I am going to start the talk with some real-world examples, exploring how you can add microformats to your sites and will show how microformats can be used to help build mash-ups and simple publishing APIs.

WebDD is a really interesting conference idea, Phil Winstanley the organiser is mixing a number of different industry groups together. The topics will cover both design and development and pull strongly from the web standards and .net community. There are not many events that have this variety of sessions.

WPF/e Scott Guthrie
Microformats – HTML to API Glenn Jones
Windows CardSpace Barry Dorrans
Ruby On Rails for .NET Developers Dave Verwer
Doing it in style: creating beautiful sites, the web standards way Patrick Lauke
Sneak Peek at "Orcas" Scott Guthrie
Quick and dirty Usability tests Zhivko Dimitrov
End to End Web Sites- Part 1 Scott Guthrie
Web Accessibility: What, Why, How, and Who Cares? Bruce Lawson
Unobtrusive JavaScript with Rails Dave Verwer
End to End Web Sites – Part 2 Scott Guthrie

As I attend more events I have found that I often get the most out of them by opening my mind and going along to sessions about subjects that don’t fall naturally into my working life. As someone who codes using c# and .net I would still like to known what Rails has to offer. Equally as I look closer at /> Flex 2  it will be good to here from Scott Guthrie about WPF/E” Microsoft solution for delivering rich, cross-platform applications

With Madgex both being a strong supporter of web standards and also a .net development house, I can foresee a large group of us making our way to Reading

Madgex is sponsoring the event by providing a backnetwork site. I would encourage anyone attending to sign up for a backnetwork account.

  • Events

Barcamp Ireland backnetwork

Backnetwork sees another outing this weekend. We have setup a full copy of the system for the delegates of BarCamp Ireland barcampireland1.backnetwork.com. If you have not heard of BarCamp it’s a great idea a non-conference conference. In their own words…

“A BarCamp is an ad-hoc gathering born from the desire for people to share and learn in an open environment. It is an intense event with discussions, demos, and interaction from participants.”

What this really means is that a whole group of people gather for a weekend. There are no formal speakers or lineups, every attendee has to speak for 30mins on what ever subject matter they want.

I went to BarCamp London a couple of weeks ago; it was a really energetic event. I was taken aback about how well people can organise themselves given the space to do so. I gave a talk about my experiences of using Microformats while building the backnetwork site. We ended up with a mini Microformats track with Frances Berriman starting with an introduction to Microformats my talk in the middle and then Drew Mclellan giving an interesting perspective on the subject by talking about microformat parsing.

As with d.construct it is great to be able to support any event like BarCamp by providing a resource that hopefully be will be useful to the delegates.

I have now become interested in the virtual aspects of an event I am not attending. It is a bit like going to the pub to watch a game of football, a second virtual community built around a physical event. I hope they starting blogging soon as I really want to know the score.

  • Projects

d.construct makes you 35% more friendly

It has been well over a week since d.construct, which was a great conference. The backnetwork seems to be a real success. Everyone took it to their hearts creating lots of relationship links. The number of photos taken at d.construct this year was also jaw dropping.

For me backnetwork has succeeded in becoming the focal point I was hoping for and should be a great reference resource for the future. I thought it would be fun to post some figures.

On average d.construct delegates increased their social network by 35%. /> 266 (75%) delegates added profiles /> 1781 delegates added relationship links /> Backnetwork has found 1215 photos tag dconstruct06 /> Backnetwork has collected 194 blog posts from 68 contributors tag dconstruct06

6.6 relationship links per a profile /> 3.5 photos per a delegate /> 0.5 blog posts per a delegate

133 (50%) of backnetwork users had RSS feeds from blogs or personal sites /> 152 (57%) of the backnetwork users had blogs or personal sites

35% more relationship links after the conference

Plans are already afoot for backnetwork to be used at a number of different events in the future and we have already started adding new features. I would I like to thank everyone for taking the time to participate with backnetwork and I hope it was as fun to use as it was to build.

  • Projects

Backnetwork vs branded bag

Once I talked my company into becoming a sponsor ford.construct06 the next big question was what gem we would give to the delegates. I have been given so much stuff at conferences; pens, books and lots of bags. The only thing of true use being a plastic plectrum from SWSX. It is a great substitute for a stress ball. I really don’t need another branded bag.

After a discussion with Jeremy Keith at the Clearleft office warming party, I was encouraged to run with the idea of building an online space for delegates. No branded bags this time. Why not build a place for delegates to network and share information.

http://dconstruct06.madgex.com/

The recent events I have attended have been surrounded with delegate generated content. People often blog about which event they are attending to help increase the social perspective and to arrange specific meetings with other delegates who share the same interest. Blogging is also used to share notes and reviews from the session. Conference wifi often dies under the strain of Flickr uploads. Then there’s the backchannels, those semi-secretive groups of people chatting over IRC. Sharing these activities and the rich resources they provide now forms an invaluable part of my conference experience.

Backnetwork is an attempt at building an online community around an event. Central to this is a simple social networking area where everyone has a profile and is able to define their relationships to each other. Around this central area we have tried to pull together blog entries, photos and chat into one resource. The idea was to bring a focus to the wealth of interaction and resources generated by delegates as a common resource for everyone.

The site was designed from the ground to allow anyone to make use of the data it collects. We have tried to actively encourage everyone to reuse the data by adding extensive Microformat copies and paste code and RSS feeds where ever we could.

I would have liked to have added both a JSON and XML-RPC API but was restrained by what I could fit into eight weekends. In fact there are a number of great additional features that could be added, hopefully we can implement one or two more before the conference.

I hope you enjoy using backnetwork, see you at the event.

  • Projects

d.construct 2006 the easy way to get a ticket

The thought of not getting hold of a ticket to the d.construct conference lead me to take a rather radical course of action. When it was pointed out to me that sponsors get free tickets, I had no choice but to back the event. After selling out in 30 minutes last year I was not going to risk any other method of ticket acquisition.

Joking aside I am really happy my company could help sponsor an event like this. The web development industry is unique in the way it shares ideas. Events such as d.construct are fantastic places to learn from peers and share experiences. Judging by its huge popularity last year, d.construct is one of the web industry’s best grassroots events and we’re pleased to be so closely associated with it in 2006.”

So apart from just attending, I will be opening the event with a few words of welcome. Jeremy has also coaxed an interview out of me for the series of d.construct podcasts he is posting.

This year’s conference is clearly focused on APIs with Simon Willison and Paul Hammond talking about using “Web Services for fun and profit” and Jeremy Keith covering current innovations. It’s also going to be interesting to hear from Jeff Barr who will be talking about how the use of APIs is generating new business models for the web.

Beyond the API sessions Aral Balkan will be trying to open our eyes to the benefits of the Flash platform and Flex 2. Aral did a great job last year, often the development areas you’re not involved in provide the most enlightening session.

The line-up is not just about writing code Thomas Vander Wal and Jeff Veen will be covering tagging and designing the complete user experience. Jeff did a great talk at the recent @media event about participation, trust and improving the user experience. The interactive design principles Jeff put forward at @media have made me re-evaluate a couple of ongoing projects. I am looking forward to see what he has to say at d.construct. />

  • Events

Modular JSON/On-Demand JavaScript interface

In this article I hope to give an overview of a number of interesting techniques used in the construction of the MapSurface prototype. The core of the design is a modular architecture which is built using a combination of on-demand script loading and JSON data transfers.

MapSurface has a widget called the Dashboard which can be loaded into web pages sitting above the general content. It is basically a secondary ‘in context’ interface. I have used this interface to display web page activity information, but it could also be used to provide page level administration functionality.

If you press the “Alt” and “X” keys the MapSurface Dashboard appears. If you are interested, I have written a more general post about the MapSurface features. You can add the functionality of MapSurface to any site, by the inclusion of a single JavaScript file link, in any page you wish to track.

Module Architecture Overview /> />

The loading file /> When you sign up for a MapSurface Account you are given a JavaScript file link appended with a unique account number

[sourcecode language="html" wraplines="true"] /> /> [/sourcecode]

This file contains code to provide two different functions. The first is to gather as much information about each request as possible. The second is to /> start the construction of the Dashboard when ever it’s requested.

Sending request information to the server /> It sends the request information back to the server based on three events. The page load and unload and the mousedown on any hyperlink. As this information is sent in a fire and forget mode, I have chosen the simplest method of communication with the server, a request for an image. Each request is appended with a querystring.


function msAddImage( passedurl )
{
    eltImg = document.createElement( ‘img’ );
    eltImg.setAttribute(‘id’,'tackerloadimg’);
    eltImg.setAttribute(‘width’,1);
    eltImg.setAttribute(‘height’,1);
    document.body.appendChild( eltImg ); />
    addEvent(eltImg, ‘load’, msRemoveImage , false);
    urlcompsite = passedurl + ‘&rand=’ + Math.random();
    eltImg.setAttribute("src", urlcompsite);
}

function msRemoveImage() { /> if( document.getElementById(‘tackerloadimg’) ) { eltImg = document.getElementById(‘tackerloadimg’) eltImg.parentNode.removeChild(eltImg); /> } }

The image is appended to the bottom of the body element and then a load event is attached to the new image. The funtion called by this load event will remove it from the body.

On-demand script loading /> On-demand script loading is a technique where you use JavaScript to add a JavaScript file to the current page. Using this approach you can divide your JavaScript into modules that provide distinct functionality. The initial page load is very fast as you only need the code to provide the on-demand loading. The subsequent loads are also fast as you are only load the smallest required amount of JavaScript.

AddScript function /> There are a number of libraries that have on-demand script loading functionalities, but I have used my own version for a couple of reasons. I have added a random query string attribute to stop the JavaScript being cached. The second difference is that I have removed any checks to see if the file has been previously load. This allows me to overload JavaScript files that contain data.


function msAddScript( url )
{
    eltScript = document.createElement("script");
    eltScript.setAttribute("type", "text/javascript");
    if( url.indexOf(‘?’) > -1)
        url += ‘&’;
    else
        url += ‘?’;
    url += ‘rand=’ + Math.random();
    eltScript.setAttribute("src", url);
    document.getElementsByTagName(‘head’)[0].appendChild(eltScript);
}

Separating presentational code and data /> As each module loads it needs both presentation code to build the interface elements and data to populate them. I decided to split the code and data into different files. This allows me to refresh the data or to display it in more than one way. The data is returned using the JSON format. JSON is a lightweight data format based on a subset of JavaScript. It basically describes an object with a collection of name/value pair’s i.e. {“Total”:345}.

What no Ajax! /> I could have chosen Ajax as the method of retrieving data from the server, but it does not work across domains. You can only make a XHR (XMLHttpRequest) call from the same domain as the HTML page came from. This security feature limits Ajax and although there are methods around this issue, (server-side proxies) none of these are practical for this application.

Using callback functions /> I have followed the Yahoo model of providing the server API with the ability to specify the name of a callback function. The API’s callback parameter wraps the JSON output in parentheses and a function name. This means as soon as the data JavaScript file loads successfully it call’s a function in the presentation code.

The JavaScript src attribute would be something like;

http://www.mapsurface.com/api/1.0/getURLRequests.aspx?callback=msVPLoadViewsData

which returns a text stream containing

msVPLoadViewsData( {“Total”:345} );

Because JSON output is in a JavaScript object format, you do not have to parse or evaluate the JSON text in your function. The object is just passed directly into the function as in the example below


function msVPLoadViewsData( obj )
{
    if( obj == null )
        alert(‘load error’ );
    else />
        alert( obj.Total );
}

Building the interface /> MapSurface is a piece of unobtrusive DOM Scripting which follows the page-hijacking technique. The interface is created  by directly appending HTML elements into the DOM. I did consider using the innerHTML property to inject downloaded HTML segments, but I believe that using DOM scripting is a much more flexible approach. I can use one piece of code to produce multiple variants of an interface part i.e. bar charts.

Loading CSS on-demand /> As well as the additional HTML elements created by DOM Scripting I created a single stylesheet for each module. These where loaded using the same technique as the on-demand JavaScript. I created a new link node and appended this to the header of the page.


var newstyle = document.createElement("link");
newstyle.setAttribute(‘rel’,"stylesheet");
newstyle.setAttribute(‘type’,"text/css");
newstyle.setAttribute(‘href’, url);
document.getElementsByTagName(‘head’)[0].appendChild(newstyle);

The backend system /> The backend system stores all the request information sent from the client and where possible extends what has been collected by the browser. The API calls return JSON, but can be configured to output RPC-XML. I have provided this additional format in case I wished to extend the functionality of the site.

URLs of interest /> http://www.crockford.com/JSON/ /> http://developer.yahoo.net/common/json.html /> http://ajaxpatterns.org/On-Demand_Javascript

Note /> I will be developing different commercial applications from these concepts through my company Madgex. I am unsure about the path of the MapSurface prototype itself, if there is enough interest it could be developed into a commercial service. So for now, apart from the code display on this page I am not making the MapSurface code open source.

  • JavaScript

@media 2006 thoughts:

I really enjoyed @media 2006, I had a really hard time deciding which talks to go to. I did find some of the content a little light weight, but there were a couple of sessions which I got a lot from.

The general themes of the conference where well captured in the final panel. Although the Web Standards battle continues most leading designers\developers are now moving on. Looking forward the panel thought that open data, Microformats and mashups where going to make the biggest impact.

It was hard to miss the strength of the Microformats message. I agree with Jeremy Keith’s recent post Microformats are at a tipping point. The web standards movement has championed the importance of semantic structure to a whole generation of designers\developers. Microformats seem like the next logical step, their simplicity is beguiling. Real world examples are starting to blossom with Technorati Search, Yahoo! (cc) search and Tails extension for Firefox.

Jeff Veen did a fantastic talk about designing web applications around participation, trust and improving the user experience. He quite cleverly side-stepped the whole Web 2.0 hype debate by just concentrating his talk on the benefits of good information and interaction design. The points that most stood out where:

  • Treat users as peers
  • Let users control their own data
  • Actions should be without cost, build undo’s and back steps
  • Build a architecture of participation
  • Your site is just one piece of a bigger picture
  • Let the user experience build the navigational architecture

With the introduction of richer user experience and interaction, DOM Scripting was a major part of the conference. Nate Koechley gave a interesting insight into the development of three Yahoo products, contrasting the different approaches taken.

Yahoo are about to release a new version of their home page. It will contain a lot of interactive elements and on-demand loading of content. In the future this redesign could be seen as a turning point for the uptake of  AJAX/DOM Scripting, much as the CSS redesign of Wired is now considered a defining moment for Web Standards. This is not because of the quality of the design, but more that such a large commercial site is backing the technology.

Jeremy Keith’s talk on using DOM Scripting to plug the holes in CSS was great. Although I completely agree with the use of unobtrusive JavaScript, I do wish that those evangelising DOM Scripting would spend some time addressing the onload issue.

Most of the speakers and panellists believed that there would be little technical development in HTML layout until CSS3 apart from the introduction of IE7. Andy Clarke’s talk tryed to direct designers to look out from the web for inspiration and make web design less self-referential.

It was great to meet lots of people at the socials Chris Heilmann, James Edwards, Ian Lloyd Dan Cederholm and many more. Had some great discussions and a few too many beers.

Useful links

Slides

@Media2006 Notes from muffin research

  • Events

PHP/MySQL - AJAX Link Tracker

Pierre Far has updated his PHP/MySQL backend for the AJAX Link Tracker. Pierre’s code now works with the 2.2 version. This version adds additional date related functionality.

PHP/MySQL AJAX Link Tracker can be downloaded from Pierre’s site http://ekstreme.com/phplabs/ajax-link-tracker.php.

The updated features include:

  • Records clicks on buttons
  • Overlay is drag able
  • Allows you to change what information is displayed in the overlay
  • Allows you to change how many days data is displayed in the overlay
  • Records keyboard hyperlink interactions
  • Can find hyperlink label text even in complex HTML
  • Object encapsulation
  • Does not override existing JavaScript events handlers

I would like to thank Pierre again for the efforts he has put into this project.

  • JavaScript
  • Projects

The Google brand?

This week Google has topped a poll of the UK’s “most-loved” brands. Yet amongst some of the people I known the word Google is starting to be used with the distain once only reserved for Microsoft.

Although Google is building vast mass market appeal, I am starting to feel very different about the brand. I have no problem with the products. The search is powerful and pretty much unrivalled, I really like Google Maps it’s a fantastic implementation. The question I keep asking myself is: why I am falling out of love with Google.

I suppose it was only a matter of time before Google stopped being the Berkeley geeks that made good and became the next aggressive corporate giant. This is definitely part of the problem. Allowing China to sensor its services could well be the event that has broken a lot of rose tinted visions of the company.

But the growing corporate feel to the brand is not the only problem.

Although Google has always had a strong sense of innovation, individuality and rock solid service it has never been very inclusive. It has never built the fanatical tribalism of other brands like Apple. Any efforts to generate a community like Gmail have always been slightly blackened by a culture of secrecy.

Fundamentally for me Google is not engaging with its consumers or the wider community with anything like the passion I would have expected. Google has a lot to learn about cultivation and collaboration.

CEO Eric Schmidt recently said in a pretty frank statement “We are doing too many things that people care about to keep our mouths shut.”

In comparison Yahoo is becoming very adapt at cultivating brand support through openness and collaboration. Beyond the new developer network Yahoo has hired some of the most focal members of the blogsphere. It is also buying the likes of flickr and del.icio.us which have some of the loyalist communities. It is fostering a very strong relationship with early adopteders and thought leaders. Google is here to stay, but it needs to changes its ways.

Data formats:

API