The bottom line is that better tools save us more time.  In an industry with extremely low overhead, our time is the most valuable thing we as web developers can offer.  Time and knowledge is what our clients pay us for.  That being said we need to capitalize on both.

Being that WordPress and its array of plugins are constantly changing and being updated we need a way to quickly install WordPress AND the plugins of our choice with a few clicks.  Manually creating a database and uploading files takes too long.  However Plesk’s application packages are not always up to date.  So how can we accomplish this and better capitalize on our time?  Simple – we create an updated version of an existing Plesk package.

Let’s proceed.

Creating the Plesk Application Package

Get the initial application package. Lets fly over to apsstandard.org and download the most current WordPress application package.  This file must be opened with a standard ZIP extracting program.  Upon opening the file we see that the directory structure is very simple.  All we’ll be worrying about is the htdocs folder.  This folder houses all the content that will be installed on the server.  You will notice immediately that the files listed resemble a pretty standard WordPress installation.

Copy all your plugins to the WordPress plugins folder. Yes.  Its really that simple.  If you use 7-Zip like me you’ll be able to simply drag and drop the files of your choice to the /wp-content/plugins folder and the archive will automatically rebuild itself.

Uploading the Plesk Application Package

This is where everything comes together.  Follow to steps below and refer to the appropriate images for guidance.  Also please notes that this procedure was done in Plesk 8.6.0.

1. Click on Server

2. Click Application Vault

3. Click on Add New Application Distribution Package

4. Select the our newly created application package

After the application loads you’ll see a newly created WordPress Package under the other category.  Be patient while uploading as this will take a few minutes.  Once its done, you’re done!  If you need help installing a web application, refer to planetsmb.com’s article on this.

See NEWD’s Application Package

This is our most current application package.  We do use several premium plugins that I have removed but there are enough resources to keep one occupied and clearly illustrate the benefits.

Download Plesk Application Package

Building the Menu

First things first.  Include the necessary files in the header section of your document.  The code for your header should look something like this:

<!-- Menu Includes -->
	<script type="text/javascript" src="jquery.js"></script>
	<script type="text/javascript" src="default.js"></script>
	<link rel="stylesheet" href="menu.css" type="text/css" />
<!-- End Menu Includes -->

Simple enough right?  As always please make sure that your script are declared in THIS order.  The stylesheet declaration can go anywhere but, if the scripts do not appear in the necessary sequential order, this process will not work.

Step 1 – Create the XHTML

Now that we have all our scripts in place, we need to actually build the menu.  In the example in the graphic above, the menu code looks as such:

<div id="nav" class="left">
	<ul>
		<li><a href="/news/" title="News">News</a></li>
		<li><a href="/about/" title="About Us">About Us</a></li>
		<li><a href="/events/" title="Calendar">Calendar</a></li>
		<li><a href="/bands/" title="Bands">Bands</a></li>
		<li><a href="/venues/" title="Venues">Venues</a></li>
		<li><a href="/services/" title="Services">Services</a></li>
		<li><a href="/photos/" title="Photos">Photos</a></li>
	</ul>
</div>

Another simple setup!  The menu is a simple unordered list.  Our desired effect could be accomplished using an ordered or definition list but, we’ll stick with the popular unordered list.

Step 2 – Create the JavaScript

This is where the magic happens (please no MTV Cribs references).  The code is ultra lightweight and because we’re using the jQuery Library, ultra efficient.  Let’s take a look at the code below.

jQuery(document).ready(function($){
	$('#nav ul li').prepend('<div class="menuslide"></div>');
	$('#nav ul li').hover(
		function() {
			$('div.menuslide', this).fadeIn(300);
		},
		function() {
			$('div.menuslide', this).fadeOut(300);
		}
	);
});

This probably deserves an explanation.  If you are unfamiliar with JavaScript libraries or jQuery, this code probably looks very foreign to you.  Either way, let’s step though this line by line.

Line 1 - The first thing we must ALWAYS do following modern web development techniques is to attach a load event to the XHTML page.  However we do not want to use a window.load event.  The reason for this is that window.load executes AFTER all images are loaded on the page.  This can be CRUCIAL with certain things.  So the fix is to use jQuery’s .ready event.  This will now execute all nested code inside the event BEFORE the images have loaded.  Another benefit using this technique is that we now have created a completely separate JavaScript layer apart from the main page.  We like to avoid putting JavaScript on any pages.  Sometimes there are scenarios where this is NOT the case but, we should do our best to avoid it at all costs.

Line 2 - This line of code adds some XHTML code to each one of our menus.  By doing this we have created a div inside of the li element.  This div will contain the graphic that will appear behind our menu text.

Lines 3-10 – This block of code is responsible for making our menu look awesome.  We start off by attaching a hover event to each one of our li menu items.  The hover event is capable of executing code when the user puts their mouse over the element AND when they move their mouse off the element.  The two nested functions handle the animations effects for both of the aforementioned events.  Be sure that you utilize the this keyword in your selector.  Otherwise the ENTIRE menu will end up being highlighted regardless of which menu item you are hovering over.

Step 3 – Adding in your CSS

Okay!  This is the last step and then we are finished!  Drop this CSS in your menu.css file to make all of this work the way it should.  It looks a little something like this:

#nav {
	width: 160px;
	height: 500px;
	background-image: url(images/bkg_page_left.jpg);
	background-repeat: no-repeat;
	background-position: 13px 0;
	color: #fff;
	text-align: right;
}
#nav ul {
	list-style: none;
	margin: 12px 0 0;
}

#nav ul li {
	display: block;
}

#nav ul li a {
	text-transform: uppercase;
	font-size: 24px;
	padding: 10px 30px 8px 0;
	margin: 0 0 30px;
	width: 130px;
	display: block;
	color: #fff;
	z-index: 20;
	position: relative;
}

.menuslide {
	position: absolute;
	display: none;
	width: 160px;
	height: 36px;
	background-image: url(images/bkg_menu.jpg);
	background-repeat: no-repeat;
	z-index: 1;
}

#nav {
	width: 160px;
	height: 500px;
	background-image: url(images/bkg_page_left.jpg);
	background-repeat: no-repeat;
	background-position: 13px 0;
	color: #fff;
	text-align: right;
}
#nav ul {
	list-style: none;
	margin: 12px 0 0;
}

#nav ul li {
	display: block;
}

#nav ul li a {
	text-transform: uppercase;
	font-size: 24px;
	padding: 10px 30px 8px 0;
	margin: 0 0 30px;
	width: 130px;
	display: block;
	color: #fff;
	z-index: 20;
	position: relative;
}

.menuslide {
	position: absolute;
	display: none;
	width: 160px;
	height: 36px;
	background-image: url(images/bkg_menu.jpg);
	background-repeat: no-repeat;
	z-index: 1;
}

There are several important things to notice here.  The first thing would be the CSS definitions for .menuslide.  We want display:none to keep the menu hover from displaying immediately.  Also note position:absolute.  This is set as such so that the background image appears directly behind out text.

Some of the code is part of the CSS of the actual site.  For a full working demonstration, please go to www.blackarrowsoundonline.com.

Conclusion

We now have some tools under our belt that will help us make a quick and pretty slick menu.  We accomplished this with some pretty standard XHTML, about 15 lines of JavaScript and some basic CSS classes.  I hope you can find this useful!

Insane Speed – With the whole gigahertz war in a state of suspended animation and software not taking advantage of multi-core architecture, this is an important factor for both consumers and developers. Chrome loads noticeably faster than ANY other grade A browser out there. It also renders pages extremely fast being that it uses Safari’s WebKit rendering engine. This is a cool thing!

Desktop Based ‘Web Applications’ – WOAH! Wait a second, this is a great idea! In fact its soooo great that it doesn’t even sound like its completely original. That’s right its not. This concept seems to take its conceptual queues from Adobe AIR, but it simplifies the whole equation. I like the idea that I can click on Gmail on my desktop and Gmail opens up and now looks like an actual desktop application instead of a browser window. Very useful feature.

Lack of Plug-ins/Extensions – Okay, I know that I’m being impatient but Google should already know that its going to be competing with Firefox. Why not release Chrome with some plug-ins and whatnot? Being a Web Developer I NEED Firefox’s developer extensions like the Web Developer extension, Firebug, IE Tab and loads of other stuff that cause my version of Firefox to take forever to load. However, this leads me to my next point.

Out-Of-The-Box Developer Tools – Chrome has developer tools RIGHT out of the box!!! AWESOME! It’s Javascript console also looks and runs very similar to Firefox’s Firebug tool. Not bad Google, not bad.

Incognito Browsing – Now, I’m not really sure of whether this is a good thing or a bad thing. The feature its self I suppose is useful if you have discreet browsing habits or typically view sensitive information online with any kind of frequency. But after reading this article, ISPs in the UK might be required BY LAW to store all activity on computers for a period of 12 months. I don’t like that at ALL. Foreshadowing the future, if something like that happens other countries are going to start getting ideas.

A Crazy EULA – It seems like Google wants to take ownership of ANY kind of information that passes through this new browser. More privacy issues? This article outlines some of these crazy EULA points.

WebKit Rendering Engine – WebKit is fast but it only really encompasses 5% of the browsing population. I can see this DRASTICALLY changing with the release of Chrome and I can also see Web Developers becoming more agile. There are too many sites out there that don’t display or function properly in Safari and hopefully this will get developers to be more conscious of cross browser development.

No Mac Support??!? - No I don’t use a Mac but I am surrounded by people that use them exclusively. I find it strange that Google released a WebKit based browser for only windows at first. Just seems strange.

And that’s about it. All-in-all I like Chrome and can see myself using it in my daily work-flow. It’ll be interesting to see what happens to the market in the next coming months.