Download Source Code

View a Demo

Horizontal navigation menus are one of the (if not THE) most common user interface elements used across the web. They provide an easy way for a user to both navigate a web site as well as quickly determine, at a glance, what section of the web site they are currently on.

My Requirements

• Must degrade gracefully when style sheets are turned off
• Must be fully accessible
• Must validate to W3C standard
• Must be light-weight and simple
• Must provide ability to change colors without having to modify images
• Must be able to turn a tab on by simply adding a class

The code below generates a customizable horizontal, tabbed menu with a set height of 75 pixels. If you want to change the height of the menu you will have to create new images and also modify the height settings in the CSS code. With that in mind, I have included the Photoshop file I used to create the menu in the zipped archive for you to reference.

I have tested this in Firefox (2,3,3.5), IE7, IE8, Safari, Opera, and Chrome and it looks good across all of them (if you experience an issue in another browser, please let me know by commenting on this post).

The Plan

The HTML Code

<ul id="LATabs">
	<li class="current_page_item"><a href="" title="Home"><span class="tLeft"></span><span class="tMid">Home</span><span class="tRight"></span></a></li>
	<li><a href="" title="Menu Item 1"><span class="tLeft"></span><span class="tMid">Menu Item 1</span><span class="tRight"></span></a></li>
	<li><a href="" title="Menu Item 2"><span class="tLeft"></span><span class="tMid">Menu Item 2</span><span class="tRight"></span></a></li>
</ul>

The CSS Code

ul#LATabs{
	float:left;
	margin: 0;
	padding:0;
	list-style-type: none;
	width:100%;
	height:75px;
	background: #b71e1a url(bg.gif) center center repeat-x;
	font: 24px "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	color: #fff;
	}

ul#LATabs li{
	float:left;
	padding: 0;
	height: 75px;
	margin: 0 10px;
	}

ul#LATabs a{color:#fff;text-decoration: none;cursor: pointer;}
ul#LATabs a:hover{color: #e3e3e3;}

ul#LATabs .current_page_item a{color: #b71e1a;}
ul#LATabs .current_page_item a:hover{color: #b71e1a;}

ul#LATabs span{float:left;height: 75px;}
ul#LATabs .tLeft, ul#LATabs .tRight{width:8px;}
ul#LATabs .tMid{padding: 23px 15px 0px 15px;}

ul#LATabs .current_page_item .tLeft{
	background-image: url(tab_01.png);
	background-position: top left;
	background-repeat: no-repeat;
}
ul#LATabs .current_page_item .tMid{
	background-image: url(tab_02.png);
	background-position: top left;
	background-repeat: repeat-x;
}
ul#LATabs .current_page_item .tRight{
	background-image: url(tab_03.png);
	background-position: top left;
	background-repeat: no-repeat;
}

The 4 Tiny Images

The End Result

Download Source Code

View a Demo

I recently needed to backup a folder on my iMac onto a DVD-R disc. The problem was, every time I inserted a blank DVD-R disc into my iMac Super Drive, the Disk Utility application would pop up and only give me options to burn ISO images onto the disc. No option to just burn regular files. When I opened up my Finder window, the drive wouldn’t show up there either.

Well after about 2 hours of digging I found the solution…and it’s about as dumb as it gets.

1) Click the little apple icon at the top left of your screen
2) Click “System Preferences”
3) In the “Hardware” section, click “CDs & DVDs
4) Set the “When you insert a blank DVD:” option to “Ask What to Do”

Now eject your disc (if you are having trouble ejecting your disc…don’t worry…I did too…go into your applications folder in your Finder window, click “Utilities”, open up “Disk Utility”, and eject the disc from there).

When you re-insert your disc, your Mac will ask you what you want to do. Click “Open Finder”. At this point, my Finder window did NOT automatically open. If yours doesn’t either, just open Finder the old fashioned way. Once you open your Finder window you will now see your blank DVD listed in the “Places” section. Once it’s there, simply drag the files you want to burn right onto the drive.

When you’re done selecting your files, click on the little Danger symbol next to the DVD-R drive in the Finder window, follow the prompts to burn your disc, and your done!

In this project, I first consulted with the designer as well as the client to assure that the design would allow for full content management capabilities. I then took the design and developed a combination FTP + CMS method, using Wordpress, that would give Amy both the power of a full content management system for the text-based content in the site as well as the ability to have complete control over the images within her different galleries.

The new site is built on Wordpress and utilizes PHP, CSS, XHTML, and the jQuery framework. Wordpress provides the attorneys with a simple CMS that they can all log into and update content on the site. One attorney in the firm was also provided with a blog that he uses to publish his publications online to further promote the law firms services.

For this site, I also developed an Ajax contact form that utilizes Captcha in order to prevent spam bots from automatically submitting the contact form and inundating the attorneys with spam.

In addition to site design and CMS implementation, I also updated the site to conform to SEO standards, focusing on a set of keywords and as a result the site has a first page ranking on Google (organic search results) for the keyword phrase “Boston Law Firm” (currently #4 overall).

I am also providing the firm with guidance on their search engine marketing strategy, including keyword selection, initial campaign setup in Google Adwords, and campaign maintenance.

Check out Google Charts.

This very easy to use and powerful API allows you to include an assortment of charts on your web site. All you need to do is set the src of an <img> tag to the URL for the Google Chart API and then add a few parameters to the URL string. Once everything is set, voila, the chart appears.

Sample Code

States I Have Visited

<div style="text-align:center;"><img src="http://chart.apis.google.com/chart?chs=440x220&amp;chd=s:_&amp;cht=t&amp;chtm=usa&amp;chf=bg,s,EAF7FE&amp;chco=FFFFFF,0000FF&amp;chld=RIMACTNYVTNHMEILCAFLPAGAALNVLASD&amp;chd=t:0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0" border="1" alt="" width="440" alt="States I Have Visited" /></div>

<div style="text-align:center;"><img src="http://chart.apis.google.com/chart?chs=440x200&amp;cht=p3&amp;chco=0000FF&amp;chd=t:16,24&amp;chl=Visited|Remaining&amp;chdlp=t" border="1" alt="" width="440" align="center" alt="Percentage of States I Have Visited" /></div></blockquote>

Web Project Life Cycle

Web Project Process Diagram

Working on different web teams within various organizations throughout the years, a common issue that I’ve often encountered was the lack of process when it came to designing and developing web sites. Virtually everywhere that I have worked there has not been a standard, documented method or strategy that the “web team” could use to guide a project from start to completion. Thankfully, in one of my most recent roles, my team and I were tasked with doing just that, creating a process that made sense and that we could all use collectively to get our work done.

We called our process “The 4 D’s”

1. Definition
2. Design
3. Development
4. Deployment
5. Support (OK…not a D…but you get the picture)

The documents attached to this post are what we ultimately ended up with. A lot of what we created is based on common methods and best practices in project management and software development….so don’t expect any of this to be ground breaking stuff. We found that having a process like this in place kept projects well organized, kept all team members fully informed of client expectations, and minimized common issues like scope-creep, missed deadlines, blown budgets, and dissatisfied clients. Every member of the web team as well as our external clients were involved in creating this process, so at the end of the day everyone was comfortable with working within it.

Note that it is crucial to work very closely with your clients in the beginning stages of the development process (Definition/Design). The client should expect to deliver and sign off on clear business requirements (a member of the web team would work with the client to create the necessary documents) and also be readily available to answer any questions and sign off on milestones throughout the process. As development of the web site/application progresses, the client should be given periodic status updates. The bottom line is to keep an open line of communication between the web team and the client. In doing so, the chances of delivering a successful product will be greatly improved.

This process is intended as a general guideline in developing web sites and applications and is not meant to be followed rigidly. The scope and complexity of every project is different and as is the case, the degree of process/documentation required should vary depending on the project. Also, some clients require more visibility into projects than others so the level of detail in documentation  may vary as well.

In short, don’t box yourself in with too much process, do what makes sense for your projects, your clients, and your organization.

This post outlines a quick and easy way to display your Flickr photostream on your personal web site using javascript (no server-side programming necessary). We will use JQuery as the vehicle for making the javascript call to Flickr. The feed will be returned in JSON (JavaScript Object Notation) format and then displayed on the site using simple javascript.

Don’t understand all of this? Don’t worry…just copy and paste the stuff below and everything will be just fine.

Step 1: Find Your Feed

Log into your Flickr account, click on your Photostream main page, and click on the RSS Feed button at the bottom of the page (orange icon). The url that you get to should look like this:

http://api.flickr.com/services/feeds/photos_public.gne?id=xxxxxxxx@N08&lang=en-us&format=rss_200

Important: You must change the format of the feed to JSON. Simply change the end of the link from “=rss_200″ to “=json&jsoncallback=?”. Your new link will now look like this:

http://api.flickr.com/services/feeds/photos_public.gne?id=xxxxxxxx@N08&lang=en-us&format=json&jsoncallback=?

Step 2: Add the Javascript

Add this code between the <HEAD> tags in your site. Be sure to download JQuery first and put it in your /js/ file directory! Also, be sure to replace  “—YOUR FEED URL HERE—” with your own personal feed link that you obtained in Step 1.

$(document).ready(function() {
	//Flickr Integration
	$.getJSON("---YOUR FEED URL HERE---", function(data){
		$.each(data.items, function(i,item){
			if(i<=5){
				$("<img/>").attr("src", item.media.m).appendTo("#FlickrImages ul")
				.wrap("<li><a href='" + item.link + "' target='_blank' title='Flickr'></a></li>");
			}
		});
	});

});

Step 3: Add the Feed to your Page

Add this between the <BODY> tags of your document where you would like your Flickr Images to Reside:

<div id="FlickrImages"><ul></ul></div>

Step 4: Add some CSS

Add this code between the <HEAD> tags of your document.

<style type="text/css">
	#FlickrImages{
		margin-bottom:1em;
		float:left;
	}

	#FlickrImages li{
		float:left;
		padding:8px;
		background-color: #eee;
		margin: 0 5px 5px 0;
	}

	#FlickrImages img{
		width:120px;
		height:80px;
	}
</style>

That’s It!

To see a demo of this, just look at the footer of this web site. The images at the bottom right are from my Flickr account.

Having Wordpress to work with as a platform, I did a little research and came across this post in the Wordpress Support Forums:

http://wordpress.org/support/topic/217141

After a small enhancement to the code, it ended up being exactly what I was looking for. After implementing this, my client obtained the following functionality:

• Ability to create a unique user account for each client
• Ability for client to log in through Wordpress’ built-in authentication and login form (customized via a plugin)
• Ability to provide 1 password protected page to each client (client is automatically re-directed to their specific page after login)
• Addition of a “Client Log In” button on the header of his site  that changes to “Logged in as: xxxx” after the client logs in.

This is by no means a fully functional client portal, however it does provide a very simple way to fulfill a common requirement and does not require too much overhead and maintenance.

Check it out.

http://www.cssnewbie.com/equal-height-columns-with-jquery/

This will automatically figure out the height of the tallest div in your specified group and then set all of the of the divs to that height…hence, equal height divs.

Here’s what you do:

Step 1: Include the jQuery Library

<script src="http://code.jquery.com/jquery-latest.js"></script>

Step 2: Set Up your Div’s

Be sure to give each div you want to re-size the same class. In my example I used the class name “EqHeightDiv”. Note that you can set up different groups as well, just be sure to give each group a different class name.

<div class="EqHeightDiv" style="float:left;border:solid 1px #ccc;margin:10px;">Here is some stuff</div>
<div class="EqHeightDiv" style="float:left;border:solid 1px #ccc;margin:10px;">Here is some stuff<br />Here is some stuff</div>
<div class="EqHeightDiv" style="float:left;border:solid 1px #ccc;margin:10px;">Here is some stuff<br />Here is some stu<br />Here is some stuff</div>

Step 3: Add this Code Between your <Head> Tags

<script type="text/javascript">
function equalHeight(group) {
	tallest = 0;
	group.each(function() {
		thisHeight = $(this).height();
		if(thisHeight > tallest) {
			tallest = thisHeight;
		}
	});
	group.height(tallest);
}

$(document).ready(function(){
	equalHeight($(".EqHeightDiv"));
});
</script>

That’s It!