Tampa Web Design & Development

Archive for the ‘Web Development’ Category

A website can make or break you
Posted: 08.10.2010

In today’s tough economy, you have to set yourself apart from your competition now more than ever. And while price is a major deciding factor for many consumers, a large majority of people make their decisions based upon other factors. Quite commonly, your website is the first thing consumers see or learn about your company. And considering this powerful marketing tool is available to potential customers 24 hours a day, if your website is ugly, hard to use, or just plain broken, it is time to look into upgrading. Think about it, if you are currently losing customers because of an ugly or broken website, you’ll never know because they will simply leave your site and never return, there is no feedback to learn from, nor complaints to address; and you’ve most likely lost a customer for life.


We all know it’s a tech-driven world, so there is no excuse for having an un-usable website, or worse yet, no website at all. According to Google, in 2008, 75.9% of people in America had access to the internet. And with the popularity of internet-capable smart phones and smaller laptop computers, this number can only continue to increase every year. Today’s consumers expect to have the ability to visit a company’s website and learn more, or sign-up for a membership, or purchase a product. Bottom line, if your company is not catering to these millions of visitors, they will find another company who can.


Did you know 156 Billion dollars were spent online in 2009? If you’re retail business is currently selling products, just not online, you’re missing out on a huge sales and marketing opportunity. A shopping cart website can allow anyone to purchase your goods, at anytime of the day, any day of the year. Online stores offer powerful benefits like preventing the need for additional employees or overhead associated with a traditional “brick & mortar” building. You also have the option of selling not just locally but globally; something that was practically impossible for small businesses to do even just a few years ago.


As for cost, once you start to compare an E-Commerce website to traditional forms of both retail sales and marketing, an E-commerce website is a bargain. For the cost of a complete turn-key website, you would only get a few months (if that) of traditional billboard advertisement. Or, maybe a month or two of rent and utilities in a traditional store. Once a website is in place, it can serve informational, marketing, and retail sales duties with no additional fees (aside from 3rd party hosting/security fees) for years and years to come.

DataTables & jQuery UI Themes
Posted: 02.15.2010

We build a lot of data driven web applications and we are always working with tabular data. I am not a big fan of styling tables, but with DataTables and jQuery UI themes this is a piece of cake. I will show you how you can make a beautiful table in just a few minutes. First you will need to download DataTables. Unzip the download and grab the DataTables.js and jquery.js files and put them in your public_html folder or htdocs folder for the site you want to implement DataTables on. Then we want to include those two files in the head of our HTML document as seen below. 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<title>DataTables Demo</title>
		<link type="text/css" rel="stylesheet" href="style.css" />
		<script type="text/javascript" src="jquery.js"></script>
                <script type="text/javascript" src="jquery.dataTables.js"></script>
	</head>
Next we will build a simple table for this demo. 
	<body>
		<table id="users" cellspacing="0" cellpadding="0">
			<thead>
				<tr>
					<th>ID</th>
					<th>User</th>
					<th>Date</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>1</td>
					<td>Bob</td>
					<td>1/24/10</td>
				</tr>
				<tr>
					<td>2</td>
					<td>Dave</td>
					<td>2/15/10</td>
				</tr>
				<tr>
					<td>3</td>
					<td>Chris</td>
					<td>2/22/10</td>
				</tr>
			</tbody>		
		</table>
	</body>
Note that we use the thead and tbody tags in the table, this is essential to make DataTables work properly with our table.
Then we will add a bit of css to our stylesheet. 
#users {
	width: 400px;
	text-align: center;
}
You should now have a table that looks like this.



Next we will go over to the jQuery UI site and download one of the pre-made themes or roll your own using the theme roller. You can download all the pre-made themes using this link jquery-ui-themes-1.7.2.0.zip. Now lets unzip the downloaded themes zip file and grab the images folder, the jquery-ui.css file, and the ui.theme.css file from the theme you want to use and copy these to your public_html folder or htdocs folder. Then we want to include the jquery-ui.css file and the ui.theme.css file in the head of our HTML document as seen below. 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<title>DataTables Demo</title>
                <link type="text/css" rel="stylesheet" href="jquery-ui.css" />
                <link type="text/css" rel="stylesheet" href="ui.theme.css" />
		<link type="text/css" rel="stylesheet" href="style.css" />
		<script type="text/javascript" src="jquery.js"></script>
                <script type="text/javascript" src="jquery.dataTables.js"></script>
	</head>
Make sure you include the jquery-ui.css file and the ui.theme.css file before the main css file for your site. This will enable you to be able to override the styling of the jquery-ui.css file and the ui.theme.css file without modifying them allowing you to easily switch themes in the future. Now all we have to do is implement the script to add DataTables to our table. 
<script type="text/javascript">
    $(document).ready(function(){
        $("#users").dataTable({"bJQueryUI": true});
    })
</script>
The above code implements DataTables on the table and the bJQueryUI option adds all the necessary classes to our table to work with the jQuery UI CSS framework. Next we need to specify a width for DataTables wrapper. DataTables automatically adds a wrapper with the id from the table and wrapper prefixed with an underscore as you can see below. 
/* Wrapper created by DataTables */
#users_wrapper {
	width: 400px;
}
You should now have a table that looks similar to this depending on what theme you choose. (I used the vader theme for this demo)



Now we just need to add some styling to position the elements added by DataTables. They add ids to all the elements for easy styling. You can inspect the elements you want to position with FireBug to get the ids, or refer to the styling documentation on the DataTables website. In the main stylesheet for our site lets add the following. 
/* Show # of entries element created by DataTables */
#users_length {
	float: left;
	padding: 5px;
}
 
/* Search element created by DataTables */
#users_filter {
	float: right;
	padding: 5px;
}
 
/* Table information element created by DataTables */
#users_info {
	float: left;
	padding: 5px;
}
 
/* Pagination element created by DataTables */
#users_paginate {
	float: right;
	padding: 5px;
}
 
/* Pagination previous element created by DataTables */
#users_previous {
	float: left;
}
 
/* Pagination next element created by DataTables */
#users_next {
	float: right;
}
 
/* Sorting arrows class created by DataTables */
#users .css_right {
	float: right;
}
 
/* Even row class created by DataTables */
#users .even {
	background: #999;
}
You should now have an awesome looking table like this.



Here are the files used in the demo. dataTables_jQuery-UI_demo
Magento Administration Screencast, Part 1
Posted: 02.05.2010

Here is part one of our Magento administration screencast series. We’re putting this series together to help our clients that are new to magento familiarize themselves with administering their shopping cart. Part one is simply a jump into the shallow end to get yourself started with adding simple products.


Magento Administration Screencast Part 1 from dZero Design on Vimeo.