Archive for the ‘Web Development Articles’ Category

« Older Entries
Newer Entries »

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

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

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

Small changes, big results

Friday, January 8th, 2010

Back in 2008 we published a blog post on making your company recession proof with SEO and for 2010 we are going to keep the momentum going. Last year saw the demise of some big brands including Woolworths, FlyGlobeSpan, Zavvi and Borders; the B2B and SME’s were no different with many closures and struggles endured throughout the year of 2009.

Going forward in 2010 we at 360innovate are looking forward to working with new and existing clients helping them to create economies, increase sales and beat the recession using the opportunities available on the Internet.

In the past year we have helped a variety of businesses streamline their sales process and increase customer satisfaction helping them to save and make money. In one instance we developed an event booking and management system for a large organisation who had previously managed the booking of events offline through a form submission process. The new online booking system has saved our client money by allowing them to direct resources previously wasted on event administration to other areas of the organisation and its simple application process has resulted in an increase in the number of attendees at events.

This simple yet efficient addition to an existing website has helped to make life easier for our client and by making things easier for the customer it has paid for itself. Small changes can go a long way and in many cases a lack of time or knowledge will prevent people from seeking out a solution instead settling to carry on with a website which is not working to its full capacity and in these difficult times, when everyone is penny watching, we need to ensure that every aspect of your business is operating at it’s best.

So for 2010 take a look at your website and ask yourself whether you are getting the most you possibly can from it. Do you feel you should be; getting better sales, spending less time managing it, updating it on a more regular basis or integrating it more into the overall marketing mix? As well as this consider asking a friend, colleague or customer what their thoughts of the website are. Don’t be scared of any negative feedback; modifying or enhancing your website doesn’t have to be expensive. From enhancing the usability of your website, integrating mobile technology, refreshing the graphics to a one off email campaign… these are all small things which can pack a big punch and can be tailored to suit every budget helping you to make 2010 the year we beat the recession.

No Comments

Using free online image editors to control the imagery on your Blog or Content Managed Website (Beginners guide).

Thursday, August 13th, 2009

So you have just taken ownership of your spankingly new online presence – be it a blog or a content managed website you’ve had developed.

You’ve read the manual, had the training and put on your best typing hat (ok, so that’s just me then! ) and you are ready to show the world your dazzling linguistic ability.

That’s all very good but its often all too easy to undo all of this good work with poor use of supporting imagery and bad formatting, making your posts or pages difficult to read, and ultimately affecting your user’s experience and perception of your online presence.

By taking a few simple steps to ensure the visual side your posts are properly cared for you can really help to improve the overall user experience.

(more…)

Tags: , , ,
No Comments

First ever criminal prosecution for domain name theft

Tuesday, August 4th, 2009

Domain name theft is no rare occurrence, and the numerous incidents that have made the tech headlines including the theft of Adios.com, have went unprosecuted, this may change after the recent arrest related to the theft of popular website domain name p2p.com.

On Friday July 30th a New Jersey man, Daniel Gonclave, was arrested on suspicion of stealing the rights to p2p.com and selling them to Mark Madsen, who coincidently plays for the NBA team the Los Angeles Clippers. The full extent of his arrest includes theft by unlawful taking or deception, identity theft and computer theft.

Was is Domain Name theft?

The illegality of domain name theft is no different from any other form of theft.

Basic definition of theft

1.–

(1) A person is guilty of theft if he dishonestly appropriates property belonging to another with the intention of permanently depriving the other of it; and ‘thief’ and ‘steal’ shall be construed accordingly.

A domain name is essentially a piece of real estate online, hacking into an account and selling it unlawfully is no different from breaking into a house and stealing a vase off the mantel piece. In the present case Daniel Gonclave is accused of hacking into the previous owner of the p2p.com domain and transferring all rights to himself, the p2pcom domain was then sold by himself on ebay to Mark Madsen for $111,000.

Why is Domain Theft so common?

Many entrepreneurs make a living from buying and selling easy to remember and desirable domain names, at the time of the theft the p2p.com domain was valued at $200,000, therefore in any situation where there is money or items of value there is also a black market equivalent; criminals hacking and stealing popular domain names and selling them on to unsuspecting buyers.

What now?

This is the first case of its kind and it brings to light to lack of law protecting people online and although many domain name registry companies have safeguards in place it is evident that many unlawful registry transferrals are slipping through the net. Perhaps the biggest safeguard would be to issue domain name owners with title deeds, similar to when you buy a house? Fingers crossed the p2p.com case will bring to light a suitable solution for this online criminal activity.

Tags: ,
(2) Comments

Firefox to pass the billion mark

Friday, July 31st, 2009

Open source browser Firefox is expected to pass the billion mark in terms of downloads. Firefox

Current figures indicates that Firefox dominates 1/3 of the browsers around the world! Windows explorer still remains the word leader with 60%, with Google Chrome, Safari and Opera all having less than a 5% share.

Mozilla Firefox was released in  2004 as an Open Source web browser, it is considered so popular because it is open source & cross platform, its easy to use interface, faster running times and extensive list of extensions and themes.

No Comments

Accessible AJAX forms with jQuery

Monday, June 22nd, 2009

Unless you’ve buried your head in the sand for the last few years, you must have noticed the increased use of Javascript on the web.

One of the most common criticisms levelled against the increased use of Javascript is that it makes accessible web design difficult, or even impossible. This doesn’t have to be the case though – let’s take a look at how progressive enhancement techniques can improve usability without sacrificing accessibility.

The concept is straightforward – make sure that everything works without Javascript, then use Javascript to add the ‘icing on the cake’.

Basically, all the content and functionality on your site should be accessible to your users, regardless of whether Javascript is switched on or off. This not only has benefits for accessibility, but for SEO too.

In this example, I’m going to take a very plain, simple form and add a little bit of magic!

The HTML

<div id="form">
    <form action="" method="post" name="contact-form">
        <label for="name">Your name:</label>
        <input type="text" name="name" id="name" />

        <label for="email">Your email address:</label>
        <input type="text" name="email" id="email" />
        <input type="submit" name="submit" value="submit" />
    </form>
</div>

<div id="results"></div>

The jQuery

$(document).ready(function(){
    $('form[name="contact-form"]').submit(function(event){
        event.preventDefault();

        var myName    = $('input#name').val();
        var myEmail   = $('input#email').val(); 

        $.post('process.php', {name: myName, email: myEmail},
            function(data){
                $('div#results').html(data).fadeOut().fadeIn();
            }
        )
    })
})

Hopefully there’s nothing too scary in the HTML; a couple of input fields and an empty div that will hold our results.

In the javascript, the important parts are lines two and three. Notice that we’re intercepting the form submission, and passing the event as an argument to the following function.

Next, we call event.preventDefault(). This stops events from bubbling up the DOM, in this case, preventing the form from being submitted.

Next, we fire off an AJAX request to process the form. In this case, we’re just echoing out the values that have been entered by the user, but this could be a contact form, a login form, an ‘add to cart’ button – the possibilities are endless!

You can view the demo here.

Note that the form works with or without javascript. Test it yourself by turning javascript off!

I hope this explains the basics of progressive enhancement. For further reading, check out wikipedia’s entry on the subject.

Tags: ,
(1) Comment

How to prepare for a design meeting.

Tuesday, May 19th, 2009

Okay so you have a design meeting with the web designers coming up… you’ve got a few ideas floating around but not quite sure what exactly you want- so how do you get the most out of your meeting? Preparation!

1. Know exactly what you want your website to achieve. What is its aim: Brand awareness? Increase sales? Customer Service?

2. Look at your current company image and branding, establish whether you want to continue with this or not. Developing a new website is the perfect opportunity to have a brand overhaul, many web design companies now offer branding consultancy and can assist in the development of brand guidelines.

3. Create a detailed description of what you want the website to do. Have a list of the various things you want users to be able to achieve and do on the website.

4. Provide the design company with as much information about your company as possible; who your stakeholders are, what your mission statement is, what your future goals are etc. Your website should form part of your overall marketing mix, it is a business tool in itself therefore to make the most of it you need to ensure that it fits in with your current and future plans for the company.

5. Who are your main competitors and what sort of online profile have they achieved so far?

6. Have a specific image of how you want the website to look? Create a mood board with all various design elements and inspirations that you have for your new website.

7. Put together some of your favourite website, scour the web for websites you like and which inspire you. See any functionality or features that you like then take a note and tell your web designer about it, it may be something you have seen on a random website that has no relation to the industry you currently work in but elements of it could still be adapted for your website.

8. How much do you really know about web design? How much do you want to know? Compile a list of all the different questions you want to ask your designer, once you get into the crux of the meeting you may become bamboozled by all the chat and forget all the points you wished to raise. A design meeting is not only about the design team getting information from you it is about you getting information from the design team.

9. Bring along any corporate literature; pamphlets, brochures and flyers all form part of your offline marketing and your online marketing should reflect this.

10. Have a good look at what your design company have already produced, perhaps contact them prior to the meeting to request further information on any specific website so you can gauge what they did and how they did it.

(1) Comment

PeriodicalUpdater for jQuery

Monday, March 9th, 2009

Here at 360innovate we’ve benefitted greatly from free and open source software.

Whether it’s the web server our sites run on or the operating system that runs the web server, free and open source software plays a huge part in the industry we work in.

And so, we present this jQuery plugin in an effort to give a little something back!

The Prototype javascript library features a very useful PeriodicalUpdater() function. This loads content at specified intervals, but if the content being pulled in doesn’t change, the interval gradually increases.

There are several benefits to this approach – it saves bandwidth, and can reduce the CPU usage on the client’s machine.

Unfortunately, there’s been no way to replicate this using jQuery…until now!

Let’s take a look at how it works.

Step 1 – Include the latest version of jQuery and the plugin.

<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="jquery.periodicalupdater.js" type="text/javascript"></script>

Step 2 – call the function with the necessary options and a callback function

$(document).ready(function(){
   $.PeriodicalUpdater({
      url : 'random.php'
   },
   function(data){
      var myHtml = 'The data returned from the server was: ' + data + '';
      $('#results').append(myHtml);
   });
})

Here’s a list of all the options you can set:

url
URL for the ajax request. (Required!)

method
Can be either get or post. (Or GET or POST!)

sendData
Array of values to be passed to the page – e.g. {name: “John”, greeting: “hello”}

minTimeout
Starting value for the timeout in milliseconds.

maxTimeout
Maximum length of time between requests.

multiplier
Sets the amount of decay between ajax requests. If this is set to 2, the length of time between each request will double while the response doesn’t change.

type
Response type – can be text, xml, json etc – as with jquery.get or jquery.post.

Step 3 – Stop the requests!

Finally, you might want to stop ajax requests from PeriodicalUpdater – you can do so like this (assuming you had a link with id stop):

$('a#stop').click(function(e){
   e.preventDefault();
   clearTimeout(PeriodicalTimer);
})

We hope you find this plugin useful. It’s dual licensed under the GPL and MIT licences (just like jQuery), so please read them before you use this plugin.

View the demonstration

Download the plugin

Tags: ,
(41) Comments
« Older Entries
Newer Entries »