It has rapidly gained popularity with web developers and designers – now software manufacturers are starting to take note with industry leaders like Adobe & Microsoft adding tools to their web development environments to help make jQuery development even quicker.

Microsoft Visual Studio 2008

I spoke previously about getting Jquery intellisense in Visual Studio 2008. Since then Scott Guthrie announced that that Microsoft will be shipping jQuery with Visual Studio going forward and then just yesterday I spotted this article on the Visual Web Developer Team Blog with interesting updates to VS2008′s jQuery intellisense. The best development from my point of view is the ability to get code hints in your aspx & master pages, not just your .js files.

In order to take advantage of these improvements you’ll first need to install Visual Studio 2008 Service Pack 1and this hot fix.

Next download the jQuery IntelliSense documentation file and save it in to your website in (probably a good idea to put it in the same folder as your jQuery file).

To add jQuery intellisense to a javascript file simply add this line to the top of the file:

  /// <reference path="jquery-1.2.6-vsdoc.js"/>

To add it to aspx & master pages do add the following lines to the head of your document.

    <% if (false)
       { %>
        <script src="~/[PATH_TO_REFERENCE_FILE]/jquery-1.2.6-vsdoc.js" type="text/javascript">
        </script>
    <%} %>

Points to note:

• The “if (false)” statement will prevent the link to the reference file being rendered at runtime.  Microsoft are planning to release a hotfix to automatically search for the vsdoc file if the javascript file has a reference path in it meaning that these links in the head will become redundant.
• If you are using aspnet’s MVC framework you need to ensure that your path to the reference file starts with a tilde otherwise VS will not find the reference file.
• dding a link to the reference to a master page means all aspx pages that inherit that master page will have intellisense enabled.

Adobe Dreamweaver

CS4

Adobe have just released Dreamweaver CS4 which also has support for jQuery code hinting. Adobe have taken a different approach to Microsoft, they use “introspection” to parse any javaScript files you have linked to your page and provide code hints.

This seems to work pretty well, and even handles chaining. However, I do have a couple of minor gripes. Firstly as soon as I typed “$(” dreamweaver told me I had a syntax error which really confused me, in the end I realised that just had to keep typing and DW would eventually figure out what I was doing. The other thing is, as a VS user I’m used to to code hits appearing strait away, in DW you have to press Ctrl + [space]. It’s not a big deal but would take some getting used to.

Older Vesions

Users of older versions of Dreamweaver this extension from Chris Charlton adds excellent code hints for jQuery & jQuery UI and what’s more it prompts you as soon as you hit “.” good work Chris!

One thing that was missing until now though was a way of getting jQuery intellisense in VS2008. Yesterday I spotted this article by James Hart which describes how this missing functionality can be be added. You need to make sure that you have this Visual Studio 2008 Hotfix installed then follow the instructions in James’ article and as if by magic you’ll have intellisense for your jQuery code! This has gone down a treat here and looks set to make life an awful lot easier.

Some time ago I got asked how to produce an “accessible alternative to an image map“.

As long as Image Maps are implemented correctly there’s no reason why the shouldn’t be accessible however they may not always be the most appropriate or semantic way to mark up your content.

In this example I’ve used a simple unordered list to describe some of the features of the young lady on the left, and positioned the list items over the top of her photo using CSS. The list is set to display:block and the height & width are set to match the background image you want to use; position:relative is used to allow you to absolutely position the list items within the list. Each list item is given a unique id and absolutely positioned within the list, their height and width are also set in the CSS. At it’s most basic that’s all there is to it.

In this example I added borders round the list items highlight the active areas, you probably wouldn’t want to display them as they probably detract from the aesthetics of your image. I also used text-indent on the anchors to hide the text until you hover over them and then set the text-indent to 0 using the :hover pseudo class.

Here is the XHTML used to mark this list up:

     <ul id="map">

         <li id="eyes"><a href="#">eyes</a></li>

         <li id="ear"><a href="#">ears</a></li>

         <li id="mouth"><a href="#">mouth</a></li>

         <li id="ilb"><a href="#">oh my!</a></li>

     </ul>

And here is the CSS:

#map {
 display:block;
 height:298px;
 width:200px;
 float:left;
 border:1px solid #FFA200;
 margin:0 10px 10px 0;
 background: url(/images/blog/girl.jpg) no-repeat;
 position: relative;
}

#map li {
position:absolute;
display:block;
list-style:none;
border:1px solid #ffcc00;

 }
#map li a {
 display:block;
 height:100%;
 width:100%;
 text-indent:-2000px;
 color:#ffcc00;
 font-weight:bold;
}

#map li a:hover {
 text-indent:0;
 text-decoration:none;
}

#eyes	{
 top:46px;
 left:71px;
 height:18px;
 width:44px;
}

#ear	{
top:46px;
left:132px;
height:26px;
width:21px;
}

#mouth	{
top:81px;
left:82px;
height:16px;
width:33px;
}

#ilb	{
top:177px;
left:80px;
height:63px;
width:81px;
}

This article is an extended version of the example I originally published here on 30/01/2007

In 2005 Andy Clarke demonstrated his approach to form layout at CSS for designers, He wraps the label around the input field, then put the actual label text in a span.

<label> label text<input type="text" /></label>

In the CSS he then sets the label to “display:block” and puts width on the spans. The list items effectively create rows spans columns.

This approach is fine when you only have two elements you want to appear on a line, however, when you start throwing other things into the mix (like required field markers or “help” links) you need a system that can handle more than two elements. This got me thinking…

In late 2005 I came up with a solution I call Fordie’s Form System (FFS).

FFS is based on the premise that a form is essentially a list of questions to which we need an answer, with label being the question and the input being the place for the user to answer it. That being the case, the obvious way to mark up the form (in my mind) is with lists.

I believe that as well as well as providing the structure to hold the form together, the lists add meaning to the markup – making FFS a POSH way to markup forms.

FFS Structure

Each group of label, input and related controls (for example help and validation) within the form is referred to as a “question”.

1. The Form tag goes around the whole form
2. Related questions are grouped using fieldsets
3. Lists hold the questions within the fieldset (you can use ordered on unordered lists)
4. Each question is contained in a list item (li) containing:
   • A label
   • An input
   • Usually one or more of the following:
     • A required field marker
     • A “help” link
     • Validation Errors indicator

Basic FFS mark-up

Here is an example of a form marked up in FFS

		<form action="/" method="post" name="ffsExample" id="ffsExample">
			<fieldset>
				<legend>Your Details</legend>
				<ul>
					<li class="alt">
						<label for="title">Title</label>
						<select name="title" id="title">
							<option value="1">Mr</option>
							<option value="2">Mrs</option>
							<option value="3">Miss</option>
							<option value="4">Ms</option>
						</select>
					</li>
					<li>
						<label for="firstName">First name</label>
						<input name="firstName" id="firstName" type="text" />
						<a href="/help/" class="help">help</a>
					</li>
					<li>
						<label for="surName">Surname</label>
						<input name="surName" id="surName" type="text" />
					</li>
					<li>
						<label for="contactTel">Contact Telephone Number</label>
						<input name="contactTel" id="contactTel" type="text" />
						<a href="/help/" class="help">help</a>
					</li>
					<li>
						<label for="eMailAddress">Email Address</label>
						<input name="eMailAddress" id="eMailAddress" type="text" />
					</li>
				</ul>
			</fieldset>
		</form>

And here’s the CSS for the layout

I’ve added comments to the CSS the explain what each rule does

		fieldset
		{	/* contains a list of related questions, you can have multiple fieldsets in a form */
			border:0;
			margin:0;
			width:100%;
			padding:0;
			clear:both;
		}
		fieldset ul
		{
			display:block;
			border:0;
			margin:0;
			padding:0;
		}
		fieldset li
		{	/* removes the bullet from & adds vertical space in between list items  */
			display:block;
			list-style-type:none;
			clear:both;
			margin:0.2em 0 0.2em 0;
			line-height:2em;
		}
		fieldset li label
		{	/* Sets the width of the labels */
			display:block;
			width:33%;
			padding:0.2em 0 0.2em 0;
			float:left;
		}
		fieldset li input, fieldset li select
		{	/* floats the inputs left to sit next to the labels */
			float:left;
		}
		fieldset li a.help
		{	/* positions your "help" links, you may also have required field markers or
			   validation messages that you need position within the li*/
			float:right;
		}

Variations on a theme

There are a couple of input types that need special treatment: radio & check boxes tend to have their labels wrapped round them. This means that we need to introduce a new element to contain “question text” and change the width of the labels. By adding a class to the li we can change the attributes off all the elements contained within

		<li class="radio">
			<span>Gender</span>
			<label><input name="gender" type="radio" value="Male" />Male</label>
			<label><input name="gender" type="radio" value="Female" />Female</label>
		</li>

The CSS for the radio class looks like this

		li.radio span
			{
			/* This span is only required if you want to put additional descriptive text in the first column*/
				display:block;
				width:33%;
				float:left;
			}
		li.radio label
		{
			width:auto;
		}

FFS is flexible and can handle many elements with in a list item. It can also display the form in a number of different ways simply by changing the CSS, for example:

• One question per row (using the CSS above will give this result)
• Two questions per row (set the width of the li to 50% and float left)
• One question per row, question above the input (set the label to 100% of the width of the li)

You can see implementations of FFS here*:

• Moreth>n
• Yorkshire Building Society

*These are not particularly clean implementations, they need a lot of extra classes thrown at them to accommodate the asp.net generated html that the application produced.

My biggest stumbling block was that all the WP themes I looked at were pretty bloated and it was very difficult for me with my limited php knowledge to sus out what I needed to keep and what I could throw away. I searched in vain for “blank” wordpress theme after a couple of weeks I gave up.

A few days ago I stumbled upon an article by Ryan Arrowsmith which has a link to that elusive blank theme and step by step instructions for creating your own theme! (Thanks Ryan)
So now I have a blank theme sitting in the background on the server. Now all I have to do is decide how I want this site to look.

The definitions used to be provided by dictionary.reference.com but for some reason in the last couple of versions it’s been the Merriam-Webster website. I just don’t think the results are as good. I had a look at the search engines available as firefox add ons but dictionary.reference.com wasn’t there so I set about finding a way to change firefox’s behaviour. Here’s what to do…

1. Click on “Bookmarks” in Firefox’s menu
2. Click “Organise Bookmarks…”
3. Expand the “Quick Searches” folder
4. Right click on the search you want to change (in this case I changed the dictionary search)
5. click “Properties”
6. Change the name of the bookmark to reflect the new site you are going to use
7. If you want to use dictionary.reference.com for your dictionary search change the location to “http://dictionary.reference.com/browse/%s”
8. Change the keyword if you want to use something other than “dict” to use this search from the address bar
9. Change the description to reflect your other changes
10. Click OK

You can also use this method to create your own quick search for almost any site with a search facility.

1. Go to the site you want to add and carry out a search using the usual search method.
2. Copy the URL (including query string) of the search results page. For example here is a search for “test” on theregister.com “http://search.theregister.co.uk/?q=test&mode=site”.
3. Replace the search term in the query string with “%s”, so for the register we use “http://search.theregister.co.uk/?q=%s&mode=site”.
4. Click on “Bookmarks” in Firefox’s menu
5. Click “Organise Bookmarks…”
6. Expand the “Quick Searches” folder
7. Right click, choose “New Book mark”
8. Enter the details for your new search. My Register search looks like this:

Name: El Reg Search
Location: http://search.theregister.co.uk/?q=%s&mode=site
Keyword: reg
Descrition: Search the register, Type “reg ” into the address bar

Photoshop Album has a number of features but the main thing I use it for is keeping my photos organised. You create your own “Tags” within PSA these are a short description that you apply to your photos. The tags can be anything you want, but PSA ships with a number of categories that the suggest you use for your tags, People and Places for example.

You can add multiple tags to your pictures and then search through your photos based on the tags you have added; so if I want to find all the photos of Laura and Isla together I click on the Laura and Isla tags and PSA displays all the photos of the two women in my life.

Having spent many hours adding tags to Photoshop Album I was keen not to loose that information when I moved my photos to my new network hard drive, so I set about finding a way to keep it, and better yet share the tags across the network.

First I copied the photos from my computer’s hard drive onto the network hard drive. I copied everything under “My Pictures” to “E:/Photos”.
The next thing to do was to find where PSA was storing the Catalogue, to do this open PSA and click on “help > system info” You should see this screen:

Note the location and name of the catalog. I copied the Catalog file and renamed the copy My Catalog.mdb. This allows you to edit the file with Microsoft Access.

Open the database and look for the table called “ImageTable”; do a find and replace on “fImageOriginalFilePath” and “fMediaFullPath” replace the files original location with the new location, e.g. Find “C:\Documents and Settings\[user name]\My Documents\My Pictures” replace with “E:\photos”.

Close the database and change the extension back to .psa then copy your altered catalog onto the network drive. I copied mine to “E:\Adobe\PSA\”.

Next we need to change where PSA looks for it’s catalog. Click on the start button then “run” in the text box type “regedit” and press enter. The registry editor will open. Press F3 in the “Find what:” box type the old path to your catalog (C:\Documents and Settings\All Users\Application Data\Adobe\Photoshop Album\Catalogs\).
Under “Look At” uncheck “keys” then click on find. The registry editor will find two or three entries with this value; when you find one double click on it and change the value to the new location of your .psa file. Press F3 to search again until all entries in the registry are replaced.

If you are planning to install PSA on more than one machine you will need to repeat the registry editing on each machine once you have installed PSA.

You can now open Photoshop Album, it will now be looking at the shared area on your network.

Note: This method does have limitations you will *probably* only be able to access PSA from one machine at a time.