Archive for the ‘Web Development Articles’ Category

« 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: , ,
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: , ,
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: , , , ,
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:
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!

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.

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: , , ,
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: ,
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.

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: ,
Comments

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.

Comments

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: ,
Comments

Access All Areas

Tuesday, March 3rd, 2009

Accessibility is a very important yet often disregarded area of web design. Accessibility authorities are few and far between, one of the main being the Web Accessibility Initiative (WAI), part of the W3C. The W3C works towards ensuring every person regardless of disability has equal access to information on the web.

More specifically, Web accessibility means that people with disabilities can perceive, understand, navigate, and interact with the Web, and that they can contribute to the Web.”

Having a website that is not accessible to everyone and anyone is not only unfair but from a business point of view it means that you are excluding potential customers. This means that having an accessible website is a concern not only for a web designer it should be something every business should consider when commissioning a corporate website.

There are several different components that can alter the accessibility of a website; content, and assistive technology are the main areas which this post will touch upon, however, accessibility has many different facets and issues which will not be discussed. For further information on this subject visit the W3C website.

Content and assisted technology
The content of a website is what the users interacts with; it is,

“the information in a Web page or Web application, including:
natural information such as text, images, and sounds
code or markup that defines structure, presentation, etc.”

It is a very important factor of web accessibility, after all information should be available to everyone; but if a website does not take into consideration who will be accessing the website and the difficulties they may encounter then there will be an unequal access to the information.

There is no defined list of disabilities that would have trouble accessing the internet, however, the most generalised are: visual impairments, audio impairments and physical impairments. This is of course a very small selection of disabilities, for a more comprehensive list visit the W3C website.

Visual Impairments
Blindness, partial sight and colour blindness are all visual impairments that may impede access to a website. To access the internet users suffering from a visual impairment such as blindness may rely upon assistive technology such as a screen reader, a screen reader reads out either selected elements of what is being displayed on the monitor (helpful for users with reading or learning difficulties), or it can read out everything that is happening on the computer (used by blind and vision impaired users). The screen reader will use the alt tag of an image to describe what it is so ensure all images and graphics have accurate Alt tags; don’t go overboard with the description give a clear and concise sentence about what the image is. Although the alt tag does say what an image is, try to avoid using images and graphics instead of text. As a screen reader is reading out the text on the website it is important to ensure that sentence structure and spelling in spot on, this is basic common sense.

Users with low vision may have difficulty reading or viewing a website and may use a screen reader or alternatively a screen enhancement system to enlarge the text and images on the website. Websites that offer alternative style sheets enable users to customise the website enlarging the text and adjusting the background colour as required.

Able Magazine displayed in the large text option

Able Magazine displayed in the large text option

Colour blindness is a lack of sensitivity to certain colours. Common forms of colour blindness include difficulty distinguishing between red and green, or between yellow and blue. Sometimes colour blindness results in the inability to perceive any colour. This can be problematic if for example text does not adequately contrast with the background, to alleviate this problem a website can offer a high contrast style sheet.

BBC's Ouch website displayed in high contrast

Hearing Difficulties
This may not be the first disability people would associate with accessibility issues; however, individuals who suffer from deafness may not be able to read written language fluently. The primary way to overcome this is to use clear and simple language, which many critics consider to be the best way to write for the web, Jakob Nielsen is one of the leading scholars on the matter.

Audio files pose an obstacle to those with hearing difficulties and will rely upon captions to access the information on the audio file. For this to be successful webmasters placing an audio file on their website must ensure that there is a full transcript of the audio file available.

Physical Difficulties

Motor disabilities, joint problems or missing limbs can affect the hands and arms, as well as other parts of the body. Specialised controllers, keyboards, pointing devices or mouth pointers are available to those with difficulty using standard input devices.

To aid those who do use a standard mouse give them the functionality to increase the font size and make onsite links big making it easier for those with precision difficulties to click the link.
In conclusion web accessibility is not only an important factor for those suffering from a disability; it is an issue that will no doubt affect most people at one point in their life. It is the responsibility of a web master to ensure that their website is accessible in as many different ways as possible; not only to ensure equal access to information but to ensure that you are getting the maximum amount of traffic to your website. For those online retailers who have not provided alternative style sheets or additional functionality for users with disabilities you are essentially turning customers away.

References

BBC Ouch

WAI

Able Magazine

Web Accessibility Checker

Jakob Nielsen

Tags: , ,
Comments

What your website needs the most

Monday, September 15th, 2008

Many people often get caught up in the excitement of a new website, focusing too much on how it looks and very little on what it does. If you or your company are considering a new website it is worth considering the following factors, (more…)

Tags: , ,
Comments
« Older Entries