Nik's Technology Blog

Travels through programming, networks, and computers

Learning jQuery 1.3 - Book Review

My first exposure to jQuery was using other developer's plugins to create animation effects such as sliders, and accordion menus.
The highly refactored and compressed production code isn't the easiest to read and understand, especially if you want to alter the code to any great extent.
After reading a few tutorials, I thought I'd buy a book and get more involved with the jQuery library.

As an ASP.NET developer used to coding with intellisense, I was pleased that jQuery has been incorporated into Visual Studio to allow ease of developing.
I browsed through the jQuery books on Amazon and opted to buy "Learning JQuery 1.3" by Jonathon Chaffer and Karl Swedberg after reading the user reviews.

I've now read most of the book and can highly recommend it.  The book assumes the reader has good HTML, CSS knowledge as well as a familiarity with JavaScript and the DOM, but this enables the book to quickly move onto doing useful, everyday tasks with jQuery.

The first six chapters of the book explore the jQuery library in a series of tutorials and examples focusing on core jQuery components.  Chapters 7 to 9 look at real-world problems and show how jQuery can provide solutions to them, and the final two chapters cover using and developing jQuery plugins.

Web developers should be aware of web accessibility and SEO issues with using client-side scripting and it is good to see the book highlighting the concepts of progressive enhancement and graceful degradation where appropriate.

"the inherent danger in making certain functionality, visual appeal, or textual information available only to those with web browsers capable of (and enabled for) using JavaScript.  Important information should be accessible to all, not just people who happen to be using the right software." - Learning jQuery 1.3,  page 94

After a brief introduction into the world of jQuery, what it does and how it came about the book moves quickly on to selectors, which are a fundamental part of how jQuery selects element(s) from the DOM.  It also covers jQuery's chaining capability, which coming from other programming languages looks odd at the outset, but quickly proves to be a very powerful technique.

The authors then move on to talk about events.  What I particularly like about the way jQuery handles events is that the behavioural code can be cleanly separated away from the HTML mark-up without having to litter tags with onclick and onload attributes.

The examples show how to add functionality on top of your HTML by binding events to elements on the page, which when triggered cause jQuery to modify the HTML to bring the page to life.  Techniques are introduced by example, then slowly refactored and improved while introducing new jQuery methods along the way, which is a breeze to follow and learn.

The fourth chapter covers effects such as fading in and out and custom animations, and jumps straight in to cover a useful example of how text size can be increased on-the-fly for ease of reading.  The intro also mentions an important usability example of effects.

jQuery effects "can also provide important usability enhancements that help orient the user when there is some change on a page (especially common in AJAX applications)."- Learning jQuery 1.3,  page 67

Chapter 5 is all about DOM manipulation and covers jQuery's many insertion methods such as copying and cloning parts of the page, which it demonstrates with another useful example in the form of dynamically creating CSS styled pull quotes from a page of text used to attract a readers attention.

AJAX is the next topic, which interested me enough to create a little tool to load in an XML RSS feed and create a blog category list from the data.
The chapter covers the various options of loading partial data from the server including appending a snippet of HTML into the page, JSON, XML and how to choose which method is the most appropriate.

Table manipulation is next on the agenda and the book discusses how to sort table data preventing page refreshing using AJAX as well as client-side sorting, filtering and pagination.

Chapter 8 delves into forms, using progressive enhancement to improve their appearance and behaviour.  It also covers AJAX auto-completion as well as an in-depth look at shopping carts.

Shufflers and Rotators are next and the book starts out by building a headline news feed rotator which gets it's headlines from an RSS feed, typically used by blogs.  It also covers carousels, image shufflers and image enlargement.

Chapter 10 and 11 examine the plugin architecture of jQuery and demonstrate how to use plugins and build your own.  I successfully produced my first jQuery plugin from reading this book.  You can check out my tag cloud plugin and read about how I originally built it before turning it into a plugin that other developers can use.

Internet World - eBusiness Legal Tips

It's been a couple of weeks since I attended Internet World at London's Earl Court and the follow-up emails have started to arrive in my inbox where I exchanged business cards with some of the exhibitors.
The show ran for three days, but I only managed to attend on the last day (1st May 2008).

During the exhibition, as well as general networking, I attended several presentations about marketing, social media, search and e-commerce.
One particular presentation by Nigel Miller of Fox Williams LLP was about legal tips for safe selling online.
This topic will bore many developers, entrepreneurs and start-ups because they don't understand or see the importance in legal issues and just want to get their idea/business or product live on the web.
Having seen the potential problems of ignoring legislation first hand, I was particularly interested in what Nigel had to say.

I'm one of those people who tends to read the odd terms and conditions page or End User License Agreement (EULA) and find that the language these documents are written in doesn't make for easy reading or understanding, so I was pleased that this presentation used simple plain English.

The presentation was not an exhaustive list of the all legal rules and regulations a website needs to comply with, but it highlighted the areas that are frequently misunderstood or ignored completely, it focused mainly on UK rules and regulations, such as:

  • Sector specific compliance
  • Web Accessibility compliance
  • Company information which must be on the website
  • Intellectual property and ownership
  • The Data Protection Act (complying with)
  • Terms and conditions and disclaimers
  • Pricing errors
  • Distance selling regulations and consumer rights

Nigel's full presentation entitled "Risky business; legal tips for safe selling online" can be downloaded as a PDF from Fox Williams' ebizlawTM website.

Nigel Miller is a partner at Fox Williams LLP.

Time to start testing your websites in Safari on Windows?

Apple recently added their Safari web browser to the Apple Software Update and pre-checked the box by default. This effectively means that a lot of Windows users will now, possibly without knowing it, have installed Safari.
I'm not going to discuss the ethics of this practice here, instead read John's Blog - CEO of Mozilla.

But what it means for the humble web designer or developer is that we should really be installing Safari on our Windows machines and adding it to the list of browsers we test our sites against as the number of users is bound to increase as a consequence.

Apple pushed Safari web browser through their Apple Updates service

Competition in the browser business is good and over the last few years Firefox has begun to gain ground on Microsoft's Internet Explorer domination. It has also forced the browsers to become more standards compliant, thereby helping web developers and designers design cross-browser, cross-platform web pages.

According to Apple, Safari is a standards compliant browser built on the open source WebKit project, so hopefully if your pages have been built to W3C standards they will require minimal checking, but it is always wise to test. Apple have a range of web developer resources for the Safari browser, including the Safari CSS support, Safari developer FAQ, and a general web development best practices guide.

Font and Text Styles for Websites

People find reading text on screen much more difficult than reading on paper, by following some simple guidelines web designers can help make this as painless as possible.

Due to the nature of how web browsers render textual content on the screen; using the fonts installed on the client machines, it severely limits the font variation web designers have at their disposal.
Most browsers will be able to render the following fonts without reverting to a default alternative:

  • Arial
  • Georgia
  • Verdana
  • Arial Black
  • Times New Roman
  • Trebuchet MS
  • Courier New
  • Impact
  • Comic Sans MS

I personally stick to the top 3 fonts in this list as they are very readable on-screen and are the most professional; avoid Comic Sans MS and Courier New.
It is also possible to specify alternative fonts in your CSS style sheets for the browser to use if your font of choice isn't available.

Once you've chosen a font for a website use that font throughout to maintain consistency. Websites that use too many fonts sprinkled through their pages look unprofessional. Verdana is the most readable font even at low point sizes.

Maintaining Readability

To increase a sites' readability you should focus your attention on three things:

  1. Choose a good font and a decent readable default font size.
  2. Make sure the text and background contrast in colours is high.
  3. Avoid using all capitals in blocks of text and headings.

Text in Images

Some web designers get around the font support problems mentioned above by creating a bitmap image of all headings, titles etc. Although this method does allow you to use any font your graphics program supports, including anti-aliased (smooth-edged) fonts, it causes a big accessibility and SEO problems. You should only use this technique for a company logo, all other textual information should be actual text in your HTML.

A Recipe for a Successful Website

Creating a successful website can be a hit and miss affair even before you've even thought about attracting users to the site.

There are countless websites, books and consultants dedicated to designing websites, web programming and development, search engine optimisation, usability and accessibility. However even if you have an expert specialising in each field on your development team you will have to make difficult decisions along the way which can have a fundamental impact on how your site will perform. This won't be much of a surprise to anyone in the business.

Web Designers Role

Web designers for instance need to be able to create designs that have a high level of usability as well as creating a visually appealing design that sticks to standard methods of navigation with a colour scheme that conforms to accessibility guidelines. Good guidelines and specifications are needed from the client and the other members of the team prior to commencing work so the designer knows the scope of the project.

Web Developers Role

Web developers need to be aware of search engine optimisation techniques and accessibility practices while building pages based on the chosen design. The choice of development environment is also important. Will your website scale when your users increase? Will your choice of platform and IDE have negative impacts on your SEO and usability efforts? Dreamweaver and other WYSIWIG editors are renound for adding reams of unnecessary HTML to your pages. Visual Studio's standard web controls also introduce problems with large VIEWSTATE tags and lots of pointless nested tables.

Search Engine Marketers Role

Search engine marketers need to make sure that they stick to "White Hat" methodoligies. They will need to have an intimate understanding of your business or product(s) in order perform keyword research.
In the push to get goods search rankings usability can be affected by excessive keyword stuffing, which can make paragraphs of text un-readble.

Usability and Website Testing

While usability evangelists will restrain the designers and developers from using browser plug-in technologies and any form of cutting edge design, or navigational elements that deviate from what Web users' expect. Badly positioned advertisements can also affect the usability of the site especially the flash pop-out kind.

The Client

If the client insists on items of functionality and design that will have a detrimental effect on the site such as using a splash page, a non-standard navigation tool etc, he or she will need to be educated on the impact of implementing such items.

Lots of websites fail to look at website development from one or more of these view points and suffer one way or another. Whether that is through confusing users with un-navigable sites, failing to generate traffic because of poor search engine optimisation or making people install software to view your content.

Creating a successful website requires a lot of different skill sets, but this will depend partly on your audience and your individual goals for the project.

ASP.NET Web Accessibility and Visual Studio 2005

I've been using Visual Studio 2005 on a recent project and was surprised that even though it is supposed to feature lots of web accessiblity tools and options, they don't seem to be turned on by default. I'll bring you an example to back this up.
I created a new ASP.NET page, essentially it was a simple form, which when submitted sent an email; similar to a contact form if you like. The form was built within an HTML table, with ASP:Label controls to hold the textbox definitions.
On viewing the page in a browser and examining the source code, I noticed that the ASP:Label controls are converted to HTML <span> tags, which is a little bizarre. After a little research I found that if you use the AssociatedControlID property of the ASP:Label to link to the related textbox the HTML source code produced now uses an HTML <label> tag.
I also figured out that using the ToolTip property of the ASP:Label control renders as the title property of the HTML label tag.

So the following ASP.NET source code:

<asp:Label ID="LblDayMovedOut" runat="server" ToolTip="Day Moved Out" AssociatedControlID="DayMovedOut">
<asp:DropDownList ID="DayMovedOut" runat="server"></asp:DropDownList>
</asp:Label>
<asp:Label ID="LblMonthMovedOut" runat="server" ToolTip="Month Moved Out" AssociatedControlID="MonthMovedOut">
<asp:DropDownList ID="MonthMovedOut" runat="server"></asp:DropDownList>
</asp:Label>
<asp:Label ID="LblYearMovedOut" runat="server" ToolTip="Year Moved Out" AssociatedControlID="YearMovedOut">
<asp:DropDownList ID="YearMovedOut" runat="server"></asp:DropDownList>
</asp:Label>


Would render the following bloated, but accessible HTML:

<label for="ctl00_ContentPLaceHolder_DayMovedOut" id="ctl00_ContentPLaceHolder_LblDayMovedOut" title="Day Moved Out">
<select name="ctl00$ContentPLaceHolder$DayMovedOut" id="ctl00_ContentPLaceHolder_DayMovedOut">
</select>
</label>
<label for="ctl00_ContentPLaceHolder_MonthMovedOut" id="ctl00_ContentPLaceHolder_LblMonthMovedOut" title="Month Moved Out">
<select name="ctl00$ContentPLaceHolder$MonthMovedOut" id="ctl00_ContentPLaceHolder_MonthMovedOut">
</select>
</label>
<label for="ctl00_ContentPLaceHolder_YearMovedOut" id="ctl00_ContentPLaceHolder_LblYearMovedOut" title="Year Moved Out">
<select name="ctl00$ContentPLaceHolder$YearMovedOut" id="ctl00_ContentPLaceHolder_YearMovedOut">
</select>
</label>

Website Compliance and The Disability Discrimination Act 1995

Following a recent on-line seminar I attended about Website Compliance with the UK's Disability Discrimination Act (DDA) I have been investigating what effects this will have on web designers who wish to design accessible websites.

The W3C have produced a set of guidelines called Web Content Accessibility Guidelines or WCAG for short. They are currently updating these, but the current version is 1.0.

The link below is my interpretation of the guidelines and the techniques developers and designers need to put into practice in order to make accessible sites.

There are three W3C priorities in which developers should aim to reach. If your sites conform to all three priorities then your site will be accessible by the disabled community and you can place a W3C WCAG logo on your site.

I have attempted to condense and organise the W3C guidelines into the three priorities with a view of what developers need to change.

I am in the process of making this site conform to all three priorities, but as you will soon find out when you read the guidelines this in some cases will mean re-writing pages of code.

Nik's Website Accessibility Guidelines

HTML Tabindex

Tabindex is very useful when designing large forms as it dictates what element the tab key jumps to next. Only works in IE. Tabindex of -1 is ignored. Tabindex's of 0 come after the highest tabindex.