Archive for September, 2009

Sep

29

Simple PHP Function to Remove Invalid Characters from a String

September 29th, 2009

I’ve run into situations where I’ve installed content management systems for customers who like to add their own content and/or copy content from documents they’ve created. Often, this results in them copying non-ASCII characters such as smart quotes, elipsis, or em dashses. I’m not sure why (maybe someone can educate me by posting a comment below) that PHP can’t handle these characters, but I’ve come up with a way to replace these characters with characters or character sequences that PHP understands. The function is below.

function cleanString($string) {
  $find[] = '“';  // left side double smart quote
  $find[] = '”';  // right side double smart quote
  $find[] = "‘";  // left side single smart quote
  $find[] = "’";  // right side single smart quote
  $find[] = '…';  // elipsis
  $find[] = '—';  // em dash
  $find[] = '–';

  $replace[] = '"';
  $replace[] = '"';
  $replace[] = "'";
  $replace[] = "'";
  $replace[] = '...';
  $replace[] = '-';
  $replace[] = '-';

  return str_replace($find, $replace, $string);
}

The function essentially is a very simple string replacement that attempts to match an invalid character with a valid character and output the change.  This will prevent the weird diamonds or boxes that you may be seeing in text output using “echo” in php.

Posted in Tutorials | 1 Comment »

Sep

19

Things to think about when planning your e-commerce site

September 19th, 2009

I often get requests for proposals from prospective clients regarding e-commerce or deal of the day sites. Many times these clients know that they want to create an online store but they haven’t really thought about the various requirements that they’ll have regarding how their site will be built. By sitting down and thinking through the various requirements or options they will need for their website, they can save themselves an immense amount of time and money when working with a designer. Below are just a few of the items for an e-commerce website that I generally work through with clients.

  1. Payment – How will the site accept payment?  There are a variety of options: Paypal, Google Checkout, or Credit Card gateways like Authorize.net.  There are pros and cons about each.  Paypal and Google Checkout generally have lower fees for accepting payment but they often require that your customer have a Paypal or Google account to complete the transaction (Paypal allows customers to use credit cards if they don’t have a Paypal account, however).  Accepting credit cards directly on your site is often the simplest method for your customers, but requires extra effort when building the site to integrate with the gateway, secure the transactions, and record orders.  Credit card gateways often have a monthly gateway fee on-top of the per-transaction fee so they are often more costly than simply using Paypal or Google Checkout.
  2. Shipping – How will you ship your products and charge your customers for shipping.  I’ve generally seen a variety of methods of dealing with this issue.  Some sites charge a flat rate per item for shipping.  This is the simplest method but can often lead to inacurate shipping charges (the customer is either over-charged or under-charged for the actual shipping charge).  Other sites charge a rate based on the item’s weight and the shipping destination.  This is more accurate, but requires that you weigh each item you plan on selling and be able to store that weight on each item for your checkout process.  Additionally, you need to think about who you want to use to ship your packages.  Do you want to use USPS, UPS, DHL, or FedEx?  Do you want to provide a real-time shipping calculator for each service on your site so that customers can determine their actual shipping charges when they checkout?  All of these things need to be planned so that the designer building your site can correctly implement the shipping process for your site.
  3. Communicating with Customers – How will you communicate with your customers?  At a minimum, you should always send the customer an email when the order was placed.  However, you may also want to send additional emails when their order has shipped.  Also, will you want to provide your customers with an option to sign up for special offers?  This requires some extra functionality for your site that keeps track of customers who are signed up for your special offers and their email address and also provides you with a way to send out a bulk email.
  4. Order Processing - When you process orders, what pieces will you want to automate?  Do you need to integrate your orders with QuickBooks?  Do you want to be able to print shipping invoices automatically for each order?  Do you want to automatically send your customers their tracking number when their order has been scheduled to ship?  Do you want to be able to issue refunds through your website?  All of these are features that clients often over-look but could make their lives much easier when it comes to processing orders from their online store.
  5. Organization of the Products – Many clients know that they want to provide items in their store, but they’ve not thought about how they should be organized.  There are many questions you should ask yourself:  Will I want to feature certain products in certain areas on the website?  Will I need product categories and sub-categories?  If an item is out of stock, do I want to continue to offer it on the site and fill the order when the item comes back in stock?  Do I want to schedule sales on certain items or categories?  All of these questions, if answered before construction on your website has started, will help you get a more robust and reliable site.  Modifying your site after it has gone life in order to add one of these features is always possible, but can lead to bugs or broken functionality.

These are just a few things to think about when building an e-commerce store.  Generally, the more thought you put into your site, the better your experience will be.  I always encourage clients to put together a thorough request for proposal.  This has two major benefits: 1) it enables you to get accurate estimates from various web designers (and be able to hold them to the estimate when they later balk at adding functionality) and 2) it gives you a good vision of what you expect your site to do when it eventually goes live.

If you are interested in an online store or daily deal website, please contact us through our contact form about your project.  We’d be happy to answer any of your questions and provide you with an accurate estimate of how long it would take and how much it would cost to build your website.

Tags: , ,
Posted in Recommendations | No Comments »

Sep

16

Simple Image Slideshow with jQuery and jQuery Cycle Plugin

September 16th, 2009

See The Demo

I recently completed a website design project for a local austin company that involved creating a simple image slideshow on the login page of their application. These types of slideshows have traditionally been done using an animation toolkit or framework such as Adobe’s Flash product. Starting around three years ago, I was introduced to script.aculo.us which provided the ability to use effects with DOM elements to provide cool animations.

Just within the last year, I’ve started working more with jQuery and have been introduced to the slew of extremely cool plugins.  The newest one I’ve come across is jQuery Cycle.  Using this plugin and 9 lines of javascript code, I was able to create an extremely simple but cool image slide-show for the website project for my client.

The first step in building the slideshow is to create the html element that will hold the images for your slideshow:

<div id=”slideshow”>
  <img src=”slides/slide-1.jpg” border=”0″/>
  <img src=”slides/slide-2.jpg” style=”display:none”/>
  <img src=”slides/slide-3.jpg” style=”display:none”/>
</div>

The above is a simple list of images within the div element that’s identified by the “slideshow” id.  This will enable jQuery to pick up the “slideshow” element and then iterate over the <img> elements within it when building the slideshow.

The second step is to write the actual javascript that will use the plugin to build and run the slideshow:

$(document).ready(function(){
  $(function(){
    $(“#slideshow”).cycle({
      fx: ‘fade’,
      speed:2500,
      timeout: 1000
    });
  });
});

A little explanation on what is happening here: The $(“#slideshow”) is grabbing the slideshow div element and feeding the images into jQuery Cycle Plugin’s initialization.  The plugin is applying the fade effect (see more information on the effects you can use here) at a speed of 2500 milliseconds and a timeout of 1000 milliseconds.  Speed controls how long the transition takes to complete and timeout controls the time between slide transitions.  You can find more information on the options for the plugin here.

All-in-all, this has turned out to be a ridiculously easy way to code up a simple slideshow.  You can enhance your slideshow in all sorts of ways such as loading your images through ajax after the page loads, randomizing ordering, and providing new transitions.  All without having to worry about motion tweens in Flash!

See the Demo

Tags: , , ,
Posted in Tutorials | No Comments »