I’ve used this approach recently for several sites with dynamic page titles with great success.  That doesn’t mean it still has some limitations. The two biggest in my opinion are the inability to select the replaced text, and the lack of a reliable hover option (so you can change the replaced font color on mouse-over). Another issue that has affected me is the lack of small-caps support. Although it’s slated to be included in a future Cufon version, I hacked together an approach that works now using jQuery and JavaScript regular expressions.

The process is fairly simple – first replace your text with Cufón, then run a regular expression that inserts SPAN tags around the first letter of each word, and then use jQuery to increase the font size of these span’s classes. Simply setting the classes font-size larger in CSS before hand does not work.

Below you can see the three stages of the process that I went through – first I loaded up a headline that uses the CSS small caps attribute – it works but it’s not the font I want. The next headline is Cufon replaced – it looks much better, but I’ve lost the small caps effect. Finally using the hack, I’ve achieved the custom font with small caps.

Un-replaced Text with Small Caps

Replaced Text before Small Caps Hack

Replaced Text with Small Caps

The first step is to load in your various javascript files. You can download cufon and create your own font javascript files at cufon.shoqolate.com.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="PATHTO/cufon-yui.js"></script>
<script type="text/javascript" src="PATHTO/font-file-you-create.js"></script>

Then you can set up the styles you want your headlines to have:

<style type="text/css">
h1 {
	font-family:times,times new roman, serif;
	font-size:20px;
	text-transform:uppercase;
	color:#900;
}
</style>

The next step is to create your headline:

<h1>This is the headline I'm font-replacing</h1>

Finally, use the follow JavaScript to create the effect:

jQuery(document).ready(function($) {
	Cufon.replace('h1');
	var text = $('h1').html();
	$('h1').html(text.replace(/\b([A-Za-z0-9])/g,'<span class="caps">$1</span>'));
	$('.caps').css('font-size',30);
});

This script, which loads when the DOM is ready, first replaces the font, then inserts <span class=”caps”> around the first letter of each word, and finally increases the font size on these first letters from 20px to 30px. You can of course change these font sizes to meet your needs. The particular font I used here, Adobe Garamond Pro, had a slight line-height offset after this JavaScript was run – I fixed this with a style for the ‘caps’ CSS class – you may need something similar for the font you choose

h1 span.caps {
	position:relative;
	top:2px;	
}

I hope someone finds this useful.

In this second post, I’m going to explore the code generated by this functionality, and give a simple demonstration of how to style and animate the generated menus using  CSS and jQuery. You can then use these skills to develop your own WordPress 3.0 theme and its menus.

Here’s a demonstration video of the end result. The menus were created using the WordPress Menu Management functionality and are set to animate down and fade in on mouseover, and utilize CSS3 gradients and rounded corners. Refer back to part I to see how the menus were created initially.

Our first step will be to add styling to the menus. As with the previous post, I am basing these instructions on the default WordPress 3.0 Theme “Twenty Ten.” It’s important to understand all of the pieces of code that come together to draw the menus. For this example, 3 files will come into play.

The first is header.php in the theme’s root directly. This is the file that draws the header part of your pages. In the Twenty Ten theme, it includes a call to wp_nav_menu(). This is the function that queries WordPress for the menu in HTML. It takes several optional parameters, which I won’t get into here – they’re described at http://codex.wordpress.org/Function_Reference/wp_nav_menu if you’d like to explore – they let you change CSS classes, wrapper <DIV>s, etc.

<div id="access">
<?php wp_nav_menu( array( 'sort_column' => 'menu_order', 'container_class' => 'menu-header', 'theme_location' => 'primary' ) ); ?>
</div>

Sample output of this function is below. You’ll notice that WordPress draws the menu out using unordered lists. They nest secondary menus in additional <ul> tags. This is a very popular method to organize navigation and is highly customizable with CSS. If you’re unfamiliar with this approach, A List Apart has a very good explanation.

<div id="access">
<div class="menu-header">
<ul id="menu-wordpress-sandbox-menu" class="menu">
	<li id="menu-item-17" class="menu-item"><a href="#">Fruits</a>
		<ul class="sub-menu">
			<li id="menu-item-19" class="menu-item"><a href="#">Oranges</a></li>
			<li id="menu-item-20" class="menu-item"><a href="#">Apples</a></li>
		</ul>
	</li>
	<li id="menu-item-32" class="menu-item"><a href="#">Colors</a>
		<ul class="sub-menu">
			<li id="menu-item-30" class="menu-item"><a href="#">Blue</a></li>
			<li id="menu-item-31" class="menu-item"><a href="#">Red</a></li>
		</ul>
	</li>
	<li id="menu-item-33" class="menu-item"><a href="#">Links</a>
		<ul class="sub-menu">
			<li id="menu-item-34" class="menu-item"><a href="#">Google</a></li>
			<li id="menu-item-35" class="menu-item"><a href="#">Yahoo!</a></li>
		</ul>
	</li>
</ul>
</div>
</div>

Comparing this HTML output to the accompanying sample images and video, you’ll notice the drop-down portion of the navigation is in the nested <UL>s with a CSS class of ’sub-menu’. This is generated automatically by WordPress and this nesting structure is how you can add style and animation. Please note that for this demonstration, the HTML above has been simplified – my links are empty and I have also stripped out many additional class names that WordPress includes automatically for the UL’s and LI’s to make the HTML simpler to read. These classes can be very useful for detailed styling though, so consider reviewing your generated code when you do your implementation.

Now that we know how the menus are drawn in HTML, we can start to style and animate them. As mentioned earlier, my examples work on top of the Twenty Ten default WordPress 3.0 Theme, so I will show code from this theme. This theme has a GNU General Public License so we’re free to modify it and use it near any way we’d like – consider copying it and working on the copied version for your experimentation.

The CSS styles for the Twenty Ten theme are in the file styles.css in the main theme directory. Starting around line 370 of this file (in the RC1 version of WordPress at least), you’ll see a section of the CSS commented ‘Menu’ that starts defining the menu’s styles.

/* =Menu
-------------------------------------------------------------- */
#access {
	background: #000;
	margin: 0 auto;
	width: 940px;
	display:block;
	float:left;
}

Looking through this section of CSS, you’ll see the various styles that set the colors and fonts used in the menus. In my example, I changed the background colors for the nested sub-menu lists. I also added gradients to them (these gradients only work on CSS3 compatible browsers). Specifically I styled “#access ul ul a” like so (the background-image calls set the gradient):

#access ul ul a {
	background:#333;
	height:auto;
	line-height:1em;
	padding:10px;
	width: 160px;
	background-image: -moz-linear-gradient(100% 100% 90deg, #474747, #939393);
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#939393), to(#474747));
}

I also added rounded corners to the bottom of each sub-menu. Again this isn’t support on all browsers. To do this I modified “#access ul ul,” adding the following CSS. The extra bottom padding gives room for the rounded corners.

#access ul ul {
	padding-bottom:10px;
	background-color:#474747;
	-moz-border-radius-bottomleft: 10px;
	-webkit-border-bottom-left-radius: 10px;
	-moz-border-radius-bottomright: 10px;
	-webkit-border-bottom-right-radius: 10px;
}

The key parts of the CSS that tell the menus to appear on mouseover are below:

#access ul ul {
	display:none;
	...
}

and

#access ul li:hover > ul {
	display:block;
}

The first part tells the browser not to initially display the nested menus, but the second says do show them when the parent item is moused-over. To get our animation working, we’re going to comment out the “display:block” CSS – we’re going to instead control the display menu event with JavaScript.

#access ul li:hover > ul {
	/*display:block;*/
}

The simplest way to do this is with the help of a JavaScript library like jQuery. WordPress already comes with jQuery so we need to load it in using the wp_enqueue_script function. The enqueue function is the safe way to add JavaScripts to WordPress to safeguard against various conflicts. We’re also going to load in a second JavaScript file we’re about to create called navigation.js.

Open up the header.php file and add

<?php 
 
wp_enqueue_script('jquery');
wp_enqueue_script('unitzNav', get_bloginfo('template_directory')."/navigation.js");
 
?>

to the HEAD section of the document. We’re now loading up the jQuery library automatically for use with every page. Now it’s time to create the navigation.js file we referenced earlier – create this file in the same directory as the rest of the theme files.

If you’re unfamiliar with the power of jQuery there are ample tutorials and discussions online. In a nutshell, jQuery makes once complicated JavaScript tasks very simple, that work in just about every browser. We’re going to be using a simple effect for our menu animation but, many jQuery menu plugins and navigation techniques are available that you can use as well. Here and here are resources to explore many such techniques.

Put the following in your navigation.js file:

jQuery(document).ready(function($) {
	//initial the menus
	$("ul.menu li").mouseover(function() {
		$(this).find("ul.sub-menu").animate({"height": "show", "opacity": "show"}, 800, "swing");
 
		$(this).hover(function() {}, function(){
			$(this).find("ul.sub-menu").animate({"height": "hide", "opacity": "hide"}, "slow");
		});
	});
});

Believe it or not, this short section of code is all it takes to get the drop down menu animation working across most browsers with jQuery. The outer wrapper is a jQuery function call that runs when the page is finished loading. It then tells the browser to animate open the instance of ul class=”sub-menu” whenever a parent list item is moused over. Then, using the hover function, it tells the browser to animate closed this same menu when either the parent item or menu is moused out.

On the jQuery website you can read more about this syntax and the available function parameters – many types of animations and effects can be used here.

This simple approach does have limitations – specifically, although the Twenty Ten theme and WordPress’s menu manager support more than two levels of navigation, this jQuery implementation does not and will break the lower menus. However, considering the relatively simple modifications, the effect is quite effective.

Thanks for taking the time to read these posts – I hope it gets you excited for the power of WordPress 3.0’s menu management and gets your thinking about ways to style and animate your own menus.

To follow along, you’ll need to download WordPress 3.o. You can visit the WordPress development blog to find a link to the latest Beta, and soon version 3.0 will be released officially. WordPress.org provides excellent installation documentation if you need help installing.

What is it?

WordPress has come a long way since starting as purely a blogging platform. Thanks to its open framework, it has been modified through plug-ins to be a powerful content management system (CMS). Developers started using WordPress to drive entire sites full of content – not just blogs.  However, to do so required tricks and kludges to work properly. WordPress 3.0 makes the process much easier and truly makes WordPress a viable CMS platform.

Simple Menus Controlled Through WordPress

WordPress has allowed users to create two different types of content – posts and pages. Posts are the blog posts themselves, generated over time. Pages, which are created through a similar interface, were meant to hold static content. All WordPress installations start with a single About Us “page” that the blogger can use to describe themselves. Developers have utilized these “pages” to create entire sites and used WordPress as a CMS so end users could edit content themselves. These developers used to have to manually create the navigation structure though, digging deep into the code, in order to create links to all of the pages they created. With WordPress 3.0, regular users can now not only create pages but also organize and arrange them into menus through the Menus sections’ simple drag and drop interface.

How do you use it?

This post assumes that you’re using the default WordPress 3.0 Theme, called Twenty Ten, which has support for the menu manager built in. My next post in this series will explain how to modify the theme and change the display of the menu.

To explore the Menus feature,  start by creating a few sample pages in your fresh WordPress 3.0 installation. In my visual examples I have created a few pages named after fruits and colors. If you need help learning how to use the WordPress interface to create pages, WordPress.org has excellent documentation.

The Menus page in WordPress 3.0

Once your pages are created, click on the menus link in the left column of the administration area, under the “Appearance” heading. Please note that users need appropriate permissions to access this link. Two new columns of options appear to the right.

The left column allows you to choose the type of link you want to add to your menu. There are three types of menu items you can add:

• Custom Links allow you to add menu items that link to external web pages. Enter the page’s address in the URL box and the name you want to use in the label box. In my visual examples I have used this section to add links to Google and Yahoo!
• Pages is where you add menu items that link to the WordPress pages you have created – in my examples the colors and fruits pages are available to me.
• Categories is the final option, and if you have created categories of blog posts, pages that list all posts in that category appear here.

Select the check boxes next to the pages you want and click add to your menu. Add a few custom links if you’d like as well. These items will now all appear in the right column in a vertical list. The Twenty Ten theme draws the menus horizontally, so you need to visualize the appearance of the items left to right instead of top to bottom.

Organizing Menu Items in WordPress 3.0

Now click and drag the items in the right column – you will notice that you can arrange them and adjust them left and right. The order you arrange them in is the order in which they appear. The adjustments you make left and right determine their hierarchy in the site. The leftmost items are your primary navigation. Items nested one notch to the right are the secondary navigation of their parent, and so on. In the Twenty Ten theme, the primary navigation items appear at all times at the top of the page, and when you mouse over them the secondary navigation menus appear. The third tier menus and so on appear to the right of their parent items when the parent is moused over.

WordPress generates standard XHTML lists for the menus, which a WordPress template developer can then use to style your navigation menus any way you choose. Check back for part two of this series to see an example of how these menus can be modified visually.

Who will use it?

Although this functionality doesn’t seem particularly groundbreaking, it makes the process of adding pages and organizing content vastly simpler than before. Prior to WordPress 3.0 adding pages and updating navigation menus almost always required a phone call to the developer, which meant additional costs and lost turnaround time. Now website owners of nearly all technical skill levels can easily keep their sites updated and organized, without delay and without sacrificing the look and feel of the navigation.

View a demonstration of the functionality below – I first show the menu with 3 items – then I nest one menu under another through a simple drag and drop and reload the page to show the change.

In my next post, I will discuss the code that the Menus function generates, and show you how to add animation and style changes to it. Thanks for reading!

Unfortunately, the time you realize you really need this information is when there is an emergency – and the time it takes to track down the passwords ends up being very expensive.

Examples of such scenarios include:

• The domain name has expired and your website no longer loads. The domain name will be available for purchase to anyone.
• Content errors, such as pricing are on the website and are limiting sales.
• Legal action is threatened about content, and needs to be changed immediately.
• Employees leave under bad circumstances and related content needs to be changed immediately
• 3rd party providers change their services and immediate attention is required to keep your site active or current

Track down the following list of important website related passwords and store them in a safe place that is not tied to an individual employee.  I explain why it’s important and ways to track it down as well.

DNS

The passwords for your domain name registrar are often the ones to first go missing – ironically, they’re also arguably the most important. The domain name registrar is the company that you registered your actual domain name (yourcompany.com) with. These companies charge you annually for the registration, and point requests for your domain to your web host, which can often be a different company. Often these companies set up automatic billing, and just charge you every year – but if they don’t have the right name or e-mail address on file, notices when credit cards expire or other problems arise can go unread. More frequently now that websites have been up for several years, companies are startled to see their site has a domain name for sale message on Monday morning! Make sure your domain registrar information and contact information is current and you know how to access their website.

If you don’t know anything about your registrar or passwords and need a place to start, try http://whois.domaintools.com/. Enter your domain name on this website, and it will tell you who your registrar is and what contacts this registrar has on file. Then go to the registrars website and read about how to retried your information. Different providers have different policies. These policies are usually fairly strict – which is for our own good – if it would certainly be a problem if it were easy for someone to get access to your domain name and re-point it to their own site.  Common registrars include Network Solutions, GoDaddy and 1and1.

Hosting

Your web host is the company with the computer that your website files actually reside on. The domain name registrar points your domain name to the web host’s servers. Several different passwords can come into play with web hosts.

SFTP/FTP – Your sftp username and password is used to connect to the host’s server and upload new files to your website. If you don’t have FTP access, you can’t change anything on your site.

Control Panel Access – Most web hosts have a ‘control panel’ which is an administrative area where you can manage multiple website settings, including administrative contact information, billing information, email accounts and settings, mailing lists, databases and more.

Databases – If your website uses a database to store and provide data it’s important to keep track of the database password. Your developer could have set up a database to store website contact form submissions, product details, etc. Future developers may need this information to make changes or you may need it to extract data.

Fortunately, you can usually retrieve all of these various usernames and passwords by giving your host a call and providing some verification information. If you’re not sure who your host is, www.whoishostingthis.com can look it up for you.  When you know the host, visit their website, find their contact information, and give them a call.

Other Important Passwords

Many other pertinent usernames and passwords can come into play for your site. If your website is using any 3rd party vendors for content or services, such as YouTube for videos, flickr for photos or blogger for blog content, usernames and passwords are necessary to access and change the content. Review your site and see if you know where all you content is coming from – even if you’ve stopped updating the site through these services, you’ll want this information, should you need to make urgent changes later. In the same vein, if a content management system was used to create your site, make sure you have access to its administration section – sometimes sites are built with CMSs but never used, and having this information ready in case is important.

If your website uses any kind of e-commerce to sell products or collect funds, various usernames and passwords are involved as well – banks may have administration sections you’ll need to, modify settings for charge collection, and e-commerce software has usernames and passwords needed to add, delete and modify product offerings – make sure this information is current and available should you need it in a pinch.

Conclusion

Many businesses don’t realize how many different parts go into making their website tick. Each of these parts has usernames and passwords, necessary to make changes or updates to your site. Unfortunately, this key information is lost over time, and much too often I’ve been a part of mad scrambles to help clients find everything they need when an emergency strikes. Take some time today and track down all the information you’ll need should an emergency strike.

Does this scenario sound familiar? It’s sometimes hard to believe, but given the rapid speed of Internet growth, the cutting edge technology that companies worked so hard to implement just a few years ago is now outdated and insufficient.  I’ve been working with many companies that are coming to this realization, and an unfortunate trend has appeared. These companies, sadly are completely determined to keep using their 3rd party vendors and service providers.

Services and vendor offerings I am referring to include web hosting, email, e-commerce and payment systems, surveys, content management systems and video and photo services.  Reasons that companies don’t want to change vendors vary – they don’t want to make the effort required to change, they feel entrenched, they’re nervous of possible ramifications, etc.  Although these can sometimes be valid reasons, more often than not this short-sightedness ends up being more expensive, provides customers a sub-par user experience and limits the company in serveral other ways. Read on to learn why.

1. Cost
   Cost is the most straightforward reason to consider a vendor switch. In the last five years, the number of internet service vendors has exploded – which has driven down overall costs. More products are based on open standards and existing frameworks and more are sold as a service and hosted in the cloud. Contrast this to what it took to install something like a shopping cart several years ago – then it was proprietary and customized – at a high cost. Often clients are still paying monthly fees for these outdated services – and drastically overpaying at that. Now they can consider new options and opportunities that improve what they offer their customers, at a much lower cost over the life of the website.
2. Ease of Implementation
   Companies remember the hassles and time required to add that shopping cart or add that video to their site years ago and are hesitant to go through the same ordeal again. The small vendors they selected from limited options years ago took forever to respond and had poor documentation.  However, much has changed – many current providers are bigger with much larger customer bases. They’ve greatly improved the implementation process, with excellent documentation and sample code and robust APIs that give more flexibility for implementations. There are many customers that share sample code and have documented their implementations. Forums and responsive users abound to discuss and help in using the products. Current vendors offer more services that are easier to add and maintain than before, at a reasonable cost.
3. More Available Options
   Today’s established vendors have a more dedicated focus and larger teams working to support their products. They are working to make their products as useful as possible and offer many new features and options. These new features make your website more useful to your own customers.
4. Better Customer Support
   Along with some of the reasons these products are easier to implement is the improved customer support – the vendors are larger or more specialized and have knowledgeable dedicated staff to help your company use their products. And through forums and development websites, more customers are active in the discussions as well – making it much easier to implement the products than in the past.
5. Growth Opportunities
   Finally, the way the product will grow and improve is important to consider. Many of the vendors that have been around for many years have all but given up on keeping their products current. Reasons vary – perhaps their customer base is small and the product isn’t worth upgrading. Perhaps the vendors don’t have the right staff to keep the product current. If your vendor’s offering is the same now as it was five years ago – chances are they aren’t looking for ways to improve their product and your business – switching to a dedicated vendor will better ensure that your website will grow with more and better functionality in the future.

With these reasons in hand, consider your current vendors and if they’re really meeting your needs. If you’re not sure, start researching their competition. Check the services provided and pricing. You may be surprised at what’s possible out of the box now, and how reasonably it can be priced. Good resources, aside from just Googling, include TechCrunch and Mashable.

Let me know your thoughts. Have you found a new vendor that drastically improved your website?

Holiday Lights Display

As the holidays fast approach, millions of us are pulling decorations out of the attic, grabbing extension cords and untangling the lights. Last weekend I set up the tree, put lights outside, and put candle lights in each of my windows. It certainly looked nice and festive, but I quickly dreaded having to plug and unplug each set of lights every day.

Fortunately, I had a solution! Using X10 automation modules, my windows computer and about 30 minutes of effort, my lights now turn on and off automatically every day!  This post details the steps I took to accomplish this, and provides some resources so you can set up a similar solution yourself.

The X10 automation system is technology that send signals across your home wiring, to turn on and off lights and devices you plug in to power outlets. To get up and running yourself, you’ll need a starter X10 kit – I recommend the Firecracker Kit.

X10 Firecracker Kit

Be forewarned – the x10.com store is notorious for popup ads and gaudy design. Despite this, their products are quite reputable. Also please note that most of the items mentioned in this post are available on eBay for a fraction of the cost. The Firecracker kit has four items – a transceiver which receives the on/off signals and sends them through the house wiring (and can turn on/off an item plugged into it), a lamp module which can turn lights plugged into it on and off when it receives a signal sent by the transceiver, and a computer interface and remote control – both of which send the on/off signals to the transceiver. You can purchase any additional lamp outlets you may need on eBay inexpensively as well.

The x10 transceiver lets you select a letter from A-P via a simple dial.  This is the ‘house code’ for that transceiver. Each of your lamp modules then let you pick both a house code and unit number from 2 to 16 (the transceiver itself is unit 1). Each combination of house and unit numbers must be unique. So to get started, set your transceiver to house code A, plug a set of Christmas lights into it, and plug it into the wall. Then take your lamp module, set it to house code A and unit number 2, and also plug lights into it and plug it into the wall. You’re ready to turn these on and off using the included remote control! Set your remote to house code A, and then hit the unit 1 and unit 2 on buttons – voila! the lights turn on. With more lamp modules you can set all the lights you want to control throughout your house this way, as long as the unit numbers are all unique.

After setting this up, you could just stop here. You can now turn off all of the lights with the push of a few buttons – much simpler than walking all over the house twice every day! But I wanted the lights to turn on and off completely automatically. To accomplish this, I utilized the fourth item that came with the Firecracker kit – the computer interface, called the CM17A. This tiny little item plugs into your computer’s serial port and sends the same signals that the remote control sends, only you can configure your computer to send the signals automatically. The following explanation is done on a computer running Windows 7, but the same steps can be accomplished on other versions of Windows, though the steps may look a bit different.

X10 Command Line Example

X10.com offers software packages for a fee that allow you to set up complicated macros – this was overkill for me as I just needed to send on and off signals once a day. I used a very simple command line tool created by Adam Davis instead. Once you have the CM17A plugged into your computer, visit his website and download the CM17A.zip file. Create a c:\cm17a\ directory and unzip the files there. Then start up the ‘Command Prompt’ under the accessories section of the start menu.

Type ‘CD C:\cm17a\’ into the command prompt, as illustrated in the screen shot. The cm17a program is in this directory and is called with two or more parameters. The first is the COM port number of your actual cm17a device on your computer. The second parameter is the device you want to control. If you want to turn the lights plugged into the lamp module you set as house code A, unit 2, the parameter is ‘a2on,’ and to turn it off, it is ‘a2off.’ You can string multiple commands in a row, separated by spaces, so if your cm17a device was on COM port 2, and you want to turn lamp modules a2, a3 and a4 on, you would type ‘cm17a 2 a2on a3on a4on’ into the command prompt and press enter. All three sets of lights should now turn on. By the way, if you don’t know the COM port of your device, it is likely 1,2,3 or 4, so you can type a few sample commands varying the code to see which one works.

X10 Batch Script Example

Okay cool, so now we have a way to control the lights via our computer, now what? The next step is to load up notepad – we have to create a very simple batch script. This simply means we type the command that you’d use through the command prompt into a file that we can run automatically later. Follow the screen shots to see how to type the command and how to save the file – its important to select save as file type ‘any file’ and save the file with .bat at the end. Otherwise it will append .txt to the end and this won’t work.

Save as a .bat file in Notepad

After you created a lightson.bat, now do the same process again, changing the on’s in the file to off, and save it as lightsoff.bat.

The final step is to tell windows to run these batch scripts automatically. This is done using the windows ‘Task Scheduler, which is in Start -> Accessories -> System Tools. When the task scheduler is up and running, select Action -> Create Basic Task. We’re going to create two of these, one to turn the lights on, and one to turn the lights off. Name and describe the task any way you’d like. Under Trigger, select daily, and then pick the time you want the lights to turn on. Under action, select Start a Program, and then browse to C:\cm17a\ and selected the lightson.bat script that you created. Also, under the ‘Start In’ box, type in ‘c:\cm17a\.’  Once you’ve finished the lights on task, do the same thing to create a lights off task, which runs at a different time and calls the lightsoff.bat program instead. Optionally you can refine the tasks further by editing their properties, telling the computer to turn itself on if it’s in sleep mode to run the task, along with other options.

This was the last step! Now your Holiday lights will turn themselves on and off each day without you having to lift another finger. Happy holidays from Unitz!

Additional Notes and Tips:

The bigger your house or your lighting needs, the more complex this setup can become. The following are a few additional tips that might help.

• Your whole house isn’t necessarily on the same wiring circuit. This means that some light modules might not respond to transceiver signals. There are a few solutions here. X10 offers hardware to bridge your circuits, but this requires opened up your power panel. A simpler solution is to just buy an additional transceiver and set it to another house code – then set the light modules on this circuit to the new house code.
• To avoid buying lots of lamp modules, you can use extension cords and power strips to turn on multiple lights with one receiver – make you’re only using low wattage lights though.
• Newer computers don’t always have serial ports. Fortunately for just a few dollars on eBay you can buy Serial to USB converters, which solve this problem.
• The wireless range of CM17A might not be wide enough to reach your transceiver(s). You can purchase serial extension cables (or in a USBextension if using a USB to serial adapter.)
• Obviously this solution can be used for many more uses aside from Christmas lights.
• If you want to do more complex actions, or involve other X10 products like video cameras, they do offer software that has more control.
• X10 lamp modules do not currently work well with compact fluorescent bulbs.
• This same approach can be used with other operating systems. In Linux it can be done with bash scripts and cron jobs – the following explains how to control the CM17a in Linux.
• If you only want to control some devices automatically, you can still use the remote control to power other devices.
• http://www.iopus.com/guides/winscheduler.htm has additional examples of how to schedule tasks in windows.

If these analysts are correct, in a few years, 4 out of 5 people will be using the internet on their phones. What does this mean for you? Well, there will be a significant change in users’ internet usage behavior.

Source: Opera

Currently, your existing and potential customers use the internet when they are stationary – at home or at the office. They surf haphazardly, often finding your website through links or basic searches.   Only when they use a mapping service and search around a central point does the location of your business really come into play.

In this web enabled, mobile future, users’ behavior will be different. With a web browser constantly at their fingertips, the information they look for will be different. They will have new ideas and questions:

• What is the closest type of place I am looking for, based on where I am right now?
• What are the details and reviews of this product I am looking at right now?
• What is the reputation of  the business I am standing by?
• Should I go in or is there a similar establishment nearby that is better?
• Are the prices I am looking at right now competitive?
• What does your company offer based on where I am now?
• .. And countless others…

Smartphones are being built now with GPS functionality, meaning the phones can know where the user is.  Many phone applications can already use this information when returning data to you – giving results based on the city you’re in.  The practice of geotagging, or defining data with an associated location is increasingly popular, gaining prevalence with photo services like Flickr, and now shifting into micro-blogging services like Twitter.  Soon many more services will be targeting the data they return based on your location.

PRTMobile.com, as written up in CrunchGear.com is a perfect example. They offer mobile-web friendly property listings, that customers easily access from their phones through simple URLs.  The chances of passerbys looking up property listings later from home is minuscule, but through PRTMobile’s service, these listings get immediate, interested customer response.

There are three aspects of this mobile future that are important to consider for your own site.

1. Make sure your websites can handle mobile visitors. Visit your website from an iPhone and BlackBerry and make sure that users can find what they need – make changes if they can’t.  To take it a step further, consider a separate mobile based website entirely like eBay and Facebook currently offer, that streamlines the UI to be mobile friendly.
2. The good strategy is to prepare your content for this mobile future. The right steps for your company depend on your industry.  Start your analysis by considering how your customers might interact with your firm or products while away from their desks.If you are a location based business, search for your products and services through mapping websites and query search engines for them with your city included. If you don’t show up where you want to be, work on associating your location with your web presence. Ideas here include geocoding photos, updating your content to be more location specific and utilizing review services like Yelp. If you have a budget for advertising, consider location based online ads, that will pop up when users are searching in your area.
3. Finally, again depending on your product and services, consider creating a web portal that returns data based on the user’s location.  Users will know they can visit your website from their phone anywhere and get just what they need, right away. If your site focuses instead on a global product or service, instead analyze how accessible your key information is from mobile devices – make sure the requests your customers have can be easily met using their phones.

The changes and advances you make today will help your business grow along with the smartphone market.

Instead, I suggest thinking about your customers first and how you can use the internet and technology to make their lives easier.  Sure, a blog or twitter stream lets your customers hear from you more readily, and this communication has tremendous value.  However, this added communication doesn’t necessarily make you any less dispensable to the customer. Rather, to become truly indispensable, you need to offer them new services and features that they come to depend on.

Examples of companies creating new value for their customers:

I use USAA for my personal checking account. They now allow me to deposit checks online using my scanner for free, with their Deposit@Home service. This technology saves a trip to the bank and is incredibly valuable to me.  Meanwhile, Wachovia, my prior bank, does not offer a comparable service. I value USAA much more than Wachovia now, and have no desire to find a different bank.  Additionally, I now believe that USAA will continue to add functionality to make my life even easier, as they’ve set the precedent. Trusting their dedication to their customers makes me value them and want to stick with them as well.

As mobile computing becomes more widespread, new opportunities to help your customers abound. Companies that have created successful iPhone applications and mobile sites for their customers have received great publicity through word of mouth and commentary, often lowered administrative costs and certainly better established their brand.  FedEx has made it simple to track packages away from your computer. ESPN makes checking scores easier than ever before. In turn, their customers now use these companies’ total basket of services more and are more likely to ship FedEx and go to ESPN.com at home because of these applications.  Read overviews of several other company’s mobile application ideas.  Although a full fledged iPhone application may be overkill for your business, definitely consider how accessible and useful your website is to your customers when they’re away from their desktops.

How to create customer value yourself:

These two examples are just a sliver of the possibilities – there are so many ways to add value for your customers online. Step back and consider all the various interactions your customers have with you. Are you in a business that is appointment driven? Provide updates and reminders about appointments through the internet. Are you constantly mailing invoices and requiring mailed checks?  Consider online billing or automated payments.  Do you provide information that your customers call to inquire about? Push this content to them in more accessible ways.  Any way your customers contact you is an area to explore.

Online possibilities and prospects  are constantly evolving. As you consider all the customer interactions you have, there are inevitably services you can create that will save time and effort. When you give your customers these abilities, they will come to rely on it, and become even more devoted to you. If you do not, your competitor will first, and you will lose your customers. Take time now to talk to online strategists about your firm’s operations and logistics, brainstorm great new ideas, and make your firm truly indispensable.

Paul Reilly is a partner and co-founder of Unitz LLC, a web development and internet strategy firm based in Arlington, VA and Trumbull, CT.

So we’ve created this blog for that purpose – it’s our arena to post our solutions, thoughts and musings on anything and everything related to web development.  We hope one of our posts can help you!