Archive for February, 2010

« Older Entries

jQuery UI 1.7 – The User Interface library for jQuery – reviewed

Thursday, February 25th, 2010

jQuery UI 1.7 by Dan Wellman

jQuery UI 1.7 by Dan Wellman

jQuery UI is the official interface library for jQuery, the leading JavaScript framework. Dan Wellman‘s book, jQuery UI 1.7 – The User Interface library for jQuery, is intended to be the ‘missing manual’ – fleshing out the online documentation with examples, tutorials, and an in-depth look at the API. The book is supported by many great code samples, which are available at Packt’s support site.

There are thirteen chapters in total, covering the high-level widgets (such as the accordion) and low-level widgets (such as the draggable and droppable interaction helpers.) In addition, the CSS and effects frameworks are covered too.

No knowledge of jQuery UI is assumed, although it is expected that the reader will have a decent grasp of HTML, CSS, and jQuery. The book is pitched at the beginner to intermediate level jQuery UI user, although I would think that even advanced users will find that it contains valuable information.

The structure of each chapter is similar. Starting with the most basic example to get you up and running, more options are gradually introduced to give you a greater level of control, with plenty of code samples to help you along. Most chapters finish with a more advanced scenario, showing some really imaginative uses in which jQuery UI shines. For example, the drag and drop chapter walks the reader through creating a simple game.

The book also takes the time to describe some of the rare occasions where cross-browser issues might rear their heads, along with the fixes. It would have been easy for the author to skip past those parts, but I appreciated this honest approach. It may not be the sexiest subject matter, but it’s something that we as web developers deal with on a day-to-day basis, so it was great to see it tackled in the book.

One of the major strengths of jQuery UI is its online documentation; there are several examples for each widget, and options and methods are well documented. I was initially a little concerned about what the book could add to this, but my concerns were unfounded. Every chapter revealed methods and options that I had missed, along with examples that used the library in ways I would never have thought of.

One of the biggest revelations to me was the chapter relating to the CSS framework. Although I’d used Themeroller before, I’d never appreciated the full extent to which it can be used, creating a consistent look and feel throughout your site and containing many valuable helper classes.

One area where I would have liked to see some information is that of extending jQuery UI. I would have liked to have read about writing your own widgets, inheriting from $.widget, but I appreciate that this would probably be out of scope for this type of book.

Although jQuery UI 1.8 is just round the corner, I would have no hesitation in recommending this book. There is a wealth of information here, and it is presented in such a way that the reader is given a real understanding of the library, meaning that you won’t have any problems when the next version rolls along. In fact, if you read this book now, you’ll be well prepared for all the goodies that 1.8 contains!

So if you’re looking for a jQuery UI book, you should definitely check this one out!

Tags: , ,
No Comments

Serving html5 videos with Apache

Wednesday, February 24th, 2010

Just a quick tip today – the solution to a bit of a ‘gotcha’!

While writing the jCaps plugin, we came up against an issue where .ogv videos were refusing to load, but bizarrely, only in Firefox. In its place was a grey box where the video should be, with a question mark in the middle.

After a little bit of head-scratching, we found the solution – Apache wasn’t sending the right MIME type with the video, resulting in a Firefox fail. The solution is to put the following AddType directive in your .htaccess or httpd.conf file (mod_mime is required):

AddType video/ogg .ogv

Make sure that you restart Apache if you put it in httpd.conf.

On another note, jCaps is nearing another release – hopefully this week. It will take into account some of Bruce Lawson’s wishlist, and includes a big refactoring of many elements of the plugin, including the API. It should be leaner, meaner, and easier to use! In the meantime, you can fork or download the project at Github.

Tags: , ,
(1) Comment

La Lanterna goes live

Monday, February 22nd, 2010

La Lanterna has officially launched their new website.

Located in the heart of Glasgow city  and serving food for exactly 40 years, La Lanterna is one of the cities most favourite Italian restaurant.

The restaurant appointed 360innovate the task of building a website where people can view the restaurant menus and make online table bookings. The final product is an information rich website that provides visitors with all the necessary information and tools to book a table; strong calls to action entice customers to navigate through the website which they can do with little effort.

So happy with the service provided La Lanterna have further employed 360innovate to develop an online marketing campaign for the restaurant.

Check the La Lanterna website out for yourself here.

Tags: , ,
No Comments

Atwood’s Law and browser features

Friday, February 19th, 2010

“Any application that can be written in JavaScript, will eventually be written in JavaScript.” – Jeff Atwood

Wednesday’s blog post introducing the jCaps plugin (which aims to provide accessible captions for HTML5 videos) sparked an interesting discussion with John Foliot on Twitter the other night.

John brought to my attention the WAI’s Media TextAssociations specification, which will tell browsers how to associate alternative content with rich media, such as video. Little did I know that while I was developing a “home-made JavaScript solution” (which the spec is specifically designed to counteract), the task force was carrying out a meeting to move the spec forward to the testing and implementation stage.

If there’s a W3C endorsed spec which will handle the issue, then great! My concern, though, is the length of time it will take for the specification to be implemented by browser manufacturers. Even if we’re only months away from a spec, it could be much longer until it is reliably implemented.

So in a similarly self-aggrandising way, I’d like to propose McCollum’s law: “If a browser feature which should exist, doesn’t, someone will write a javascript implementation.”

Witness the excellent jQuery UI library. HTML5 provides a datepicker element, a slider element, and native drag and drop functionality, but until these elements are natively supported across the majority of browsers, we’re stuck with home-made JavaScript.

Finding the right compromise between pragmatism and idealism is essential for modern web development.

What are your thoughts? How do you find a balance? Should jCaps development proceed, or should we wait until standards catch up?

Tags: , , , ,
No Comments

Can we save Abbey Road?

Thursday, February 18th, 2010

If you didn’t already know Abbey Road studios, where the Beatles recorded many of their hits, is up for sale.

Being such an infamous and historical building, studio and shrine to one of the worlds greatest bands it is no surprise that there has been a national outcry.

Listening to Chris Evans talking with National Trust Director-General Dame Fiona Reynolds this morning it was revealed that the National Trust is very much interested in buying Abbey Road and preserving it for future generations to enjoy. But for this to happen, Dame Reynolds told Chris Evans that for any purchase of the studios to happen the National Trust must get the support of the public.

The National Trust website posted:

“We’re asking you to let us know whether you think the studios should be saved. No price has been put on the building in the affluent St John’s Wood district of North London, but there has been speculation that it could be worth between £10 million and £30 million. If there is enough momentum, we may launch a campaign to save the studios.”

So how is the National Trust suggesting we get the ball rolling, social media of course. If it managed to keep X Factor off the Christmas number one spot and influence a chocolate company to bring back the Wispa then surely it must be able to save Abbey Road?!

Whether this is a genuine plea for pubic opinion or in fact the National Trust exploiting Abbey Roads popularity and unfortunate circumstances to kick-start a social media campaign is up to you. In my opinion, of course they are going to buy Abbey Road, why wouldn’t they? They already own and care for both Paul McCartney and John Lennons childhood homes (the latter gifted to the trust by Yoko Ono) done so without having to consult or seek the support of the public.

What the National Trust will gain from this ‘save Abbey Road’ campaign is a moment in the spot light and if the campaign goes global, which they are hoping it will, then it will do wonders to increase awareness of the brand around the world. Already a popular tourist attraction and with such early publicity and massive support across the Internet which they wouldn’t have got without the help of social media, the purchase of Abbey Road will be a wise investment that will no doubt pay for itself. So, really, who can blame them for utilising social media to take advantage of this opportunity?

There are already a handful of Facebook groups popping up hoping to contribute to saving Abbey Road but the National Trust have centred their official campaign around their own Facebook page, rightly so, and already hundreds of people have been posting comments of support. Similarly, the National Trust Twitter page has busy tweeting and retweeting trying to spread the word- with the help of a certain Chris Evans. Still in its initial stages of building momentum I predict that this social media campaign has legs that will not only contribute in turning Abbey Road turn into an even greater tourist attraction but will also play an influential role in changing the public perception of the National Trust and introducing it to new markets.

Tags: , ,
(2) Comments

jCaps – easier html5 video captions with jQuery

Wednesday, February 17th, 2010

It’s been a good year so far for html5 video. You might have noticed that YouTube and Vimeo have introduced their own player, and with the iPad’s lack of flash support, we are likely to see the tag used in more and more places, at least as an option alongside Flash.

Bruce Lawson of Opera recently showed off a proof-of-concept subtitling system for html5 video. It’s a great concept, and I’m happy to present the work I’ve done on the subject, turning it into a jQuery plugin, with a few extra enhacements. I hope that doing this will provide an easy API for front-end-developers.

Check out the demonstration here.

The latest version has the following features:

  • Multiple language support
  • Public methods to show, hide, or toggle captions
  • Ability to show full transcript in the selected language

The HTML

Make sure you’re using the HTML5 Doctype. Link to the stylesheet, jQuery and the plugin as below:

<!DOCTYPE HTML>
<html lang="en">
<head>
<link href="jcapstyles.css" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.js"></script>
<script src="jquery.jcap.js"></script>
</head>

Next, embed the video in the page, doing something like the following. I’m using Bruce’s slightly silly sample video here, since it has a multi-language transcription already!


<video id="myVid" width="400" src="http://www.360innovate.co.uk/blog/leverage-a-synergy.ogv" autobuffer controls>
<p>This page is to demonstrate open HTML5 video, so if you're not using a browser that can display the open Ogg Theora codec, there's not much to see. Sorry!</p>
</video>

Finally, create the transcript HTML.


<div id="transcripts">
<div lang="en">
<p>
<span data-begin=1 data-end=6>Hi, my name's Dr Archimedes Einstein and I'm a Doctor of Science at the University of Science</span>
</p>
<div/>
<div/>

Note that you must give the child div a ‘lang’ attribute.

The JavaScript

This is where the action happens. First, pass an anonymous function to jQuery to execute as a callback for when the document is ready. Then, call the jCaps plugin, with an object literal as a parameter. You should pass the following as a bare minimum, but there are other options that can be passed – see the code file for details.


$(function(){
$("#myVid").jCaps({
transcriptsDiv: $('#transcripts'),
language: $('select[name="changeLang"]').val()
});
})

Note that you must pass a transcripts div as a bare minimum. This will hide the transcripts div from view. By default, captions are not shown. You can switch it on by attaching the following methods to a click event on a button, or link for example:


$('#toggleCaptions').click(function(){
$('#myVid').jCaps.toggle();
});


$('#switchOn').click(function(){
$('#myVid').jCaps.switchOn();
});


$('#switchOff').click(function(){
$('#myVid').jCaps.switchOff();
});

switchOff() and switchOn() should be self-explanatory; toggle() will show the captions if they are hidden, and vice-versa.

You can change the language of the captions by calling the switchLanguage method:

$('select[name="changeLang"]').change(function(){
$('#myVid').jCaps.switchLanguage('ja');
});

There is one final public method at present: swapOut(). This shows the full transcript in the selected language when activated.


$('#transcript').click(function(){
$('#myVid').jCaps.swapOut();
});

That’s it! You can view the demonstration here.

Please note that this is very experimental, and might change or break at any time. You can download the source at github, and of course I would welcome any feedback or pull requests. Credit for the original script goes to Bruce Lawson, Philip Jägenstedt, and Daniel Davis.

Tags:
(15) Comments

Viral marketing, what’s it all about?

Wednesday, February 17th, 2010

Viral marketing is most commonly associated with the production of  media,  such as a funny video, game or text message, which is passed on from one person to the next. You could say that it is the online equivalent of word of mouth;  a successful viral campaign could take the form of a funny brand commercial which is passed around via email.

One example that always springs to mind whenever I discuss viral marketing has to be Agent Provocateur. The male readers of the blog will instantly know what I am talking about, yep, Kylie Minogue riding a velvet bucking bronco style bull whilst wearing Agent Provocateur underwear. As you can imagine as massive hit with men, and maybe a few ladies as well.

After being banned by cinemas, where it was originally intended for, the commercial became an online hit and since 2001 the video has clocked up a massive 350 million views on YouTube (source: utalkmarketing, fashionwindows) and has been dubbed the most successful viral video ever. The return on investment for this advert was no doubt epic.

Online games are another form of media with the potential of becoming a viral success and exposing a brand to hundreds (possibly thousands) of people. A recent example of a branded game going viral is  Cravendale who aim to capitilise on the sharing format of Twitter and perhaps our obsession with health (or lack of), with a Twitter Health application as part of their Milk Matters campaign.

These are some rare cases of a marketing activity going viral but for every advertising campaign or online application that goes on to become an online success there a literally thousands that don’t.

It should be made clear to anyone wanting to create a viral video the majority of viral successes are not produced for that sole intention. They form part of a wider campaign and with any luck are picked up by online users because it is entertaining and/or relevant and it then goes on to become viral. After all the Kylie advert wasn’t produced to be an online viral success, it was produced as a promotional advert for the cinemas but given its content and the ability to view it online at YouTube it was turned it into a viral video.

This is perhaps one of the biggest factors with viral marketing, you cannot create a viral campaign in a design studio, sure you can go ahead and build fancy games for your website and film a commercial but the truth of it all is that it will not become a viral hit unless we, the public, decide it so.

Any brand looking for a viral success should focus on building a marketing campaign focused on developing the brand relationship with the target market, seeking out new channels of communications and fulfilling the needs of the market… and any viral success that stems from this campaign will be an added bonus.

Tags: , ,
No Comments

How we built 360innovate.co.uk

Thursday, February 11th, 2010

As you might be aware, we recently re-launched the 360innovate website. We thought that some of the geekier blog readers out there might be interested in the technologies we used to put the site together!

The 360innovate website marked a departure for us; it was the first website that we have built using Django, the Python based web framework. We’ve built many, many sites using PHP, so why did we decide to change that for this development?

Put simply, Django is a joy to work with. It combines superb flexibility with out-of-the-box features to provide a great platform to use as a base for bespoke web development. It espouses a DRY philosophy – “don’t repeat yourself” – which means that changes to the site can be quickly programmed and rolled out.

It also saves a great deal of time on back-end development, as it comes with an admin area that is totally customizable to the users’ needs. This means that more time and effort can be redirected to the front-end development – where the spit and polish provides a great end-user experience.

Speaking of the front-end, we once again used jQuery, jQuery UI, and a sprinkling of Flash to provide the interface for the site.

This combination of technologies wouldn’t necessarily be used for every project that we take on, but where it’s appropriate to do so, it allows us to provide a better site within the same budget.

So if you’re thinking about a bespoke web development project, please get in touch!

(2) Comments

And we’re live…

Wednesday, February 10th, 2010

After many, many man hours, meetings and creative sparring we are delighted to announce that the 360innovate website has officially gone live!

Visit the website at www.360innovate.co.uk, have a look around and please feel free to give us some feedback!

(1) Comment

Do you like our new blog?

Tuesday, February 9th, 2010

As you will notice the 360innovate blog has had a bit of a makeover!

The past few months have been dedicated to the redesign of the 360innovate website and as part of this exercise we have also given the blog a bit of an image change.

The 360innovate website is due to go live very very shortly, but in the meantime we hope you have fun reading our new blog- feel free to let us know what you think!

No Comments
« Older Entries