2008-06-03T09:26:09-07:00 Practical Ecommerce info@practicalecommerce.com http://www.practicalecommerce.com/ Copyright 2007 Confluence Publishing DBA Practical Ecommerce http://www.practicalecommerce.com/articles/749/Programmers-Web-20-Forms 2008-06-03T09:26:09-07:00

Online forms have become much more elegant and usable in the last couple of years as developers take advantage of “Web 2.0” technologies like visual effects and “behind-the-scenes” calls to the server. In fact, I have seen forms that are just downright fun to fill out, which is something that I never thought I would admit. However, developers need to understand the cost of using these technologies, and some basic best practices with regard to implementing them. First, most of the “Web 2.0” features that we speak about are created using JavaScript, which is interpreted and run by a web browser, such as Internet Explorer. There are many cases where someone may not have JavaScript available, or it has been turned off in his browser. This is an important consideration because if an online form interface is not “degradable,” users that do not have JavaScript will not be able to interact with it. For example, if you have a contact form that requires Ajax calls to send the...

http://www.practicalecommerce.com/articles/702/Frameworks-For-Web-Designers 2008-03-26T17:56:13-07:00

I've written previously about frameworks and how they help developers build web applications. For the most part, my praise of frameworks has been directed at those of us who develop web applications, such as coding up the Ruby, Perl, PHP or .Net scripts that make applications work. However, frameworks can also be used to help teams work together, as in the case of a graphic designer and a web application developer. I can say from experience that it is often difficult to get creative people from different disciplines to work effectively together. Enter the Blueprint CSS framework. Blueprint CSS is a framework for visually styling web pages with Cascading Style Sheets. Rather than writing your own CSS for every website that you work on, Blueprint provides a foundation of CSS styles to work with and build upon. As CSS gets more advanced, and the shortcomings of web design are overcome, a framework like this can prevent problems, as well as give developers the tools to bring the...

http://www.practicalecommerce.com/articles/699/Tech-Support-Application-Programming-Interfaces 2008-03-19T16:37:12-07:00

One of the most exciting trends on the Internet today is interconnectedness. Application programming interfaces (APIs) help make this possible. For example, if I have created a blog at WordPress, I can get a free key to use the API at Akismet, a comment-spam-prevention service. Additionally, if I have a Flickr account, I can get another free key to access its API to display my photos from Flickr on my new blog. By interfacing with other websites, in other words, my blog is now more functional than it used to be. So what are APIs, and why should I pay attention to them? The first question is much easier than the second, so let's start with it. When a website such as Flickr offers an API it provides a method for other applications, such as other websites, to access its content. In the same way a person can visit Flickr and be presented with web pages, an API provides a way for computers to visit Flickr and be presented with the requested content. Here's an example. Say a user...

http://www.practicalecommerce.com/articles/666/Tech-Support-Passwords-And-Avatars 2008-02-04T14:43:18-07:00

Can ecommerce merchants help their customers manage multiple user names and passwords? Many websites require users to create an account to participate. This applies to social networking sites, ecommerce sites, news sites and others. For the site owner, the strategy of requiring a user to first create an account is frequently part of a larger marketing strategy of tracking what users purchase, what they read and so forth. It also helps cut down on spammers and unwanted, automated participation. However, many consumers do not want to create user accounts. And it’s becoming burdensome for these consumers to monitor and update multiple user accounts across multiple websites. But ecommerce merchants can alleviate these concerns by interfacing with emerging services such as OpenID (Openid.net) and Gravatar (Gravatar.com). These two services allow consumers to, respectively, create a single user account and a single avatar, which is an image rendered on a website. Ecommerce...

http://www.practicalecommerce.com/articles/660/Programming-Notes-Linking-To-Payment-Gateways 2008-01-28T16:50:38-07:00

Payment gateways can be intimidating for many web developers. I have always found a certain amount of anxiety associated with them, particularly because of security requirements and presumed liability issues that could arise from insecure transactions. However, the actual integration with a payment gateway reveals that it is not much different than interacting with any other application programming interface (API). So, to link an ecommerce application to a payment gateway, you must first select a gateway and then obtain an API username and password from it. This information will be included with all requests made to the payment gateway API, and provides your application with a way to identify itself and gain access. There are subtle API differences between the various gateway companies, so make sure you understand them if you are working with more than one. Second, you will need to collect the information to send to the payment gateway, such as a customer's credit card number....

http://www.practicalecommerce.com/articles/619/Programming-Notes-Importance-of-Hand-Coding 2007-12-19T13:19:38-07:00

Let's be honest. Most people do not go into website design because they enjoy writing code, or because they want to root through hundreds of lines of seemingly non-sensical expressions. That comes later. Most people start with a visual idea and work from there, usually taking advantage of applications like Dreamweaver or GoLive to help them avoid writing code. While great for the beginner and available to the masses, it's important for developers to wean themselves off these tools as soon as possible. Hand-coding, while probably not the most popular option out there, is the best way to ensure that your code is clean and compliant. Visual editors tend to make assumptions when they are automatically writing code, which can lead to code bloat (code that is unnecessarily long). For example, Dreamweaver will automatically include extra attributes on some tags, or will insert JavaScript code in order to achieve certain functionality. Even if you use these tools to make developing easier,...

http://www.practicalecommerce.com/articles/629/What-Is-PCI-Compliance-And-Should-Merchants-Be-Concerned-About-It 2007-12-12T15:42:15-07:00

The major credit card issuers created PCI (Payment Card Industry) compliance standards to protect personal information and ensure security when transactions are processed using a payment card. All members of the payment card industry (financial institutions, credit card companies and merchants) must comply with these standards if they want to accept credit cards. Failure to meet compliance standards can result in fines from credit card companies and banks and even the loss of the ability to process credit cards. There are six categories of PCI standards that must be met in order for a retailer to be deemed compliant. 1. Maintain a secure network. This standard refers to the actual network that cardholder data is exposed to. In the case of an online business, the most obvious vulnerability for this standard is the web server. Luckily, most hosting companies take responsibility for ensuring the security of their networks. However, there is more to this standard than meets the...

http://www.practicalecommerce.com/articles/593/Software-Frameworks 2007-10-24T11:15:25-07:00

In broad terms, a software framework is a code library that is designed to facilitate software development. The idea is that all of the tedious, low-level details of creating a web application are already addressed in a reusable package. For a web developer, this means you can spend your time worrying about specific problems related to your application, and not the actual building of the code behind it. For example, a developer can quickly and easily access a database using a framework, rather than having to write all of the code required to accomplish this simple task. To get a better idea of how a framework can help, let's take a look at two notable web development frameworks — Ruby on Rails and Prototype. Ruby on Rails, or Rails, is a framework for creating web applications with the Ruby programming language. Developed by David Heinemeier Hansson in 2004, Rails is designed to favor "convention over configuration," which translates to mean that Rails makes opinionated...

http://www.practicalecommerce.com/articles/589/What-Are-Tags-And-What-Is-Tagging 2007-10-22T11:03:55-07:00

Since around 2004, content tagging has become more and more common due to social networking, photography sharing and bookmarking sites. Tagging is known by a few different names, such as content tagging, collaborative tagging, social tagging and even the scientific-sounding "folksonomy." In general tagging can be defined as the practice of creating and managing labels (or “tags”) that categorize content using simple keywords. The issue with content tagging is, like most things on the Internet, there are many different names for it and even more implementations of the practice, which can lead to confusion. In my opinion, content tagging can be broken into two types of tagging schemes, regardless of the exact type of implementation – public tagging and publisher tagging. I'm making the problem worse by arbitrarily making up some new terms, but the goal is to explain content tagging in broad terms and expose how ecommerce business owners can use tagging to their...

http://www.practicalecommerce.com/articles/570/Video-Tutorial-Scriptaculous-Effects 2007-10-18T06:04:06-07:00

Script.aculo.us is a JavaScript framework that is built upon the wildly successful Prototype JavaScript libraries. Script.aculo.us allows web designers to create engaging user interfaces quickly and easily, due in part to the animation effects it is famous for. In this tutorial, we will look at a few of the more useful Script.aculo.us animation effects and how website designers can easily use them in their websites. We'll take a look at the ubiquitous "highlight" effect, various methods of making content appear and disappear and finally create a simple JavaScript that will combine effects to create advanced user interface possibilities. Software Used: TextMate Additional Files: tabs_tutorial_2.zip Click the image below to launch the tutorial. This video tutorial requires Flash Player version 8 or above. Please forward us your ideas for additional video tutorials, via our Contact Us form.

http://www.practicalecommerce.com/articles/569/Video-Tutorial-Tabbed-Content---Part-2 2007-10-11T06:45:27-07:00

Tabbed content appears more and more frequently in web pages, and is an interesting way to simultaneously save page space and effectively present information. In part two of this two-part tutorial on creating tabbed content, Practical eCommerce's online director Brian Getting illustrates how to utilize JavaScript to get our tabbed effect working (Click here to view Part 1). Software Used: TextMate Additional Files: tabs_tutorial_2.zip Click the image below to launch the tutorial. This video tutorial requires Flash Player version 8 or above. Please forward us your ideas for additional video tutorials, via our Contact Us form.

http://www.practicalecommerce.com/articles/568/Video-Tutorial-Tabbed-Content 2007-10-04T06:41:24-07:00

Tabbed content appears more and more frequently in web pages, and is an interesting way to simultaneously save page space and effectively present information. In part one of this two-part tutorial on creating tabbed content, Practical eCommerce's online director Brian Getting illustrates how to create an XHTML/CSS based page layout that will work for tabbed content. Software Used: TextMate Additional Files: tabs_tutorial_1.zip Click the image below to launch the tutorial. This video tutorial requires Flash Player version 8 or above. Please forward us your ideas for additional video tutorials, via our Contact Us form.

http://www.practicalecommerce.com/articles/567/Video-Tutorial-JavaScript-Tooltips 2007-09-27T06:36:29-07:00

You've probably seen those useful "tooltips" text boxes that are displayed on some websites when you roll over a specific link or graphic. These typically serve several purposes. Most likely, your customers or visitors could benefit from additional information that doesn't warrant an entire page or even another trip to the server. Or perhaps you are developer creating a complicated application, and some simple tool tips and help icons, strategically placed, would improve the usability. This simple tutorial illustrates how to use the ToolTips script available from ger-tentler.de. Software Used: TextMate Additional Files: tooltip_tutorial.zip Click the image below to launch the tutorial. This video tutorial requires Flash Player version 8 or above. Please forward us your ideas for additional video tutorials, via our Contact Us form.

http://www.practicalecommerce.com/articles/538/Video-Tutorial-Validating-A-Form-With-JavaScript 2007-09-20T06:15:08-07:00

In form validation two common questions often arise. The first is how do you ensure once you've asked for an email address on an online form, you actually get one? The second is how do you make sure your customers include a name and phone number when they contact you from your website? The answer lies in form validation, or checking a form's data before it is submitted, and JavaScript is particularly useful for client-side validation. In this tutorial, we will create an online contact form our visitors could use to send us an email message. To guarantee they include their name, email address and a short message when they submit the form, we will use a simple JavaScript function to illustrate how validation works. By checking our form data before we submit the form, we will eliminate the potential of receiving a blank email from JavaScript enabled users. Software Used: TextMate Additional Files: form_validation.zip Click the image below to launch the tutorial. This...

http://www.practicalecommerce.com/articles/556/TechSupport-Whats-A-Relational-Database 2007-09-10T16:16:30-07:00

Q: Our web developer tells us that our ecommerce site uses a relational database, but I don't understand what this means. Could you please explain? At the foundation of nearly all web applications, including dynamically-generated websites, lies a relational database that stores and manages all of the data for the application. Whether you are using MySQL, PostGRES or another of the many database applications, your data will be stored into various tables in the database. Having a clear understanding of how you intend to use that data is crucial when creating a database for your application, particularly in understanding the relationships between tables of data. In an effort to explain what relationships are, I will illustrate the most commonly-used type, called "one-to-many relationships." A one-to-many relationship is, as the name implies, a relationship between one record in one table and many records in another table. As an example, let's say we have a shopping cart application...

http://www.practicalecommerce.com/articles/557/Programming-Notes-Transferring-A-Domain-Name 2007-09-03T17:00:11-07:00

The process of transferring a domain name from one registrar to another can be daunting, and the exact process can vary slightly depending on the registrars involved. The first thing to do is to log into the old registrar, where the domain is currently being managed, and make sure the domain is not locked and that all the registration information is correct. This is important because the domain registry information is used during the transfer process, so make sure the email address listed is yours (or you have access to it). From here, log into the new registrar and request a domain transfer. This is where complications arise, as the registrars look for verification that you are the owner of the domain. The old registrar will then provide an "authorization code,” which needs to be requested. This code then needs to be entered into the new registrar's "pending transfers" section, which essentially verifies to the old registrar your identity. In some cases, an additional...

http://www.practicalecommerce.com/articles/522/Tech-Support-July-2007-Accessibility 2007-07-16T10:21:41-07:00

I keep hearing about accessibility. What is it and why is it important? Accessibility, in the context of a website, is the measure of how easily people with disabilities can perceive, navigate, access and interact with electronic content and information. People with disabilities face unique challenges when it comes to using the Internet. Whether the user is suffering temporarily from a broken arm and cannot use a mouse or has a visual impairment that requires an assistive device, most websites have accessibility barriers preventing users with disabilities to effectively use certain sites. Developers have a special responsibility, in some cases a legally binding responsibility, to ensure that websites are built in a way that enables them to function with assistive devices and technologies. In many cases, neither the owners of websites or developers of websites are even aware that accessibility standards exist. The World Wide Web Consortium (W3C) has spearheaded the Web...

http://www.practicalecommerce.com/articles/510/Video-Tutorial-Rounded-Corners-with-CSS 2007-07-02T22:17:15-07:00

Rounded corners present a unique challenge to website designers, particularly when using Cascading Style Sheets (CSS) to create layouts that are search engine friendly and scalable. In an attempt to de-mystify some of the techniques used to create visual effects, such as rounded corners, Practical eCommerce's online director Brian Getting illustrates one method creating layouts with rounded corners. In a slightly more advanced tutorial, we start by creating the image assets we will need to create rounded corners in Photoshop. By first exploring the limitations of transparent GIF's, we then take advantage of transparency in the GIF format to achieve our effect. Once our images are created, we move on to tackling the CSS needed to render our effect in a browser. Once finished, we will have created an HTML page element with rounded corners and a background image, giving us the tools we need to created complex website layouts using CSS. Please feel free to download and review the...

http://www.practicalecommerce.com/articles/509/Protect-Data-From-Cross-Site-Scripting-XSS-Attacks 2007-06-25T10:22:54-07:00

Security is always going to be a concern for both developers and ecommerce business owners alike, since providing a secure environment for making transactions is not only a matter of gaining customer trust, it is also a legal requirement. As websites become more interactive they are utilizing more and more client-side scripting, such as JavaScript, to provide a rich user experience. At the same time, user submitted content is also becoming a standard feature of most websites, the combination of which can leave a website open to what is called a Cross Site Scripting (XSS) attack, which can threaten the privacy of your confidential data. A common XSS attack will utilize JavaScript, which is run locally on a user's computer, to capture some bit of information and deliver it to the attacker. Most commonly, attackers will configure a script that will harvest cookies from a user's machine. The hope is that the script was run while the user was logged into a protected interface that...

http://www.practicalecommerce.com/articles/505/Video-Tutorial-CSS-Design-Part-Two 2007-06-20T11:38:31-07:00

In the conclusion of our two-part video tutorial on CSS layout and design, we will take the layout we created in the beginning of this tutorial and begin to apply graphics and other visual stylings to it, in order to achieve the look we are going for. In Part Two, we will be looking at how to identify the basic graphic elements we need. From slicing the images out of our original Photoshop document to optimizing the images in Photoshop to applying the images correctly to our page, we do it all in this tutorial. We start by breaking our Photoshop document down into the basic graphic elements we need to achieve our design goals, and then proceed to optimize each graphic element. Once created, we apply graphics to our page using a variety of CSS techniques that can be intimidating to designers. By the end of this tutorial, we will have quickly made a basic web page using HTML and CSS that almost exactly matches our original Photoshop document. Please feel free to download and...

http://www.practicalecommerce.com/articles/504/Video-Tutorial-CSS-Design-Part-One 2007-06-19T06:33:59-07:00

Designing search engine friendly websites can be intimidating, particularly for designers who are just learning how to use CSS formatting. One of the most intimidating aspects to learning CSS design is creating page layouts that do not rely on tables. In the first of a two-part video tutorial by Practical eCommerce's online director Brian Getting, we will look at some of tricks and techniques used to create flawless CSS page layouts. In Part One, starting with a Photoshop layout, we will look at how to markup an HTML document based on our design needs, and create the proper code we will need to get the results we are looking for. Once we have our markup in place, we finish Part One by using CSS to create a formatted two-column page layout that does not rely on tables or other non-compliant code. Once we achieve a lean, efficient layout, we will find ourselves ready for Part Two, where we will learn how to apply graphics and visual styling to our layout in order to match it up...

http://www.practicalecommerce.com/articles/470/Video-Tutorial-Choosing-the-Right-Image-Format 2007-05-02T13:25:07-07:00

Choosing the right image format for publishing images on the web can be tricky. After all, you don't want to spend hours and hours cleaning up a product image and making it look irresistable to your customers, only to have it distorted and ruined when you save it in a web format. More importantly, you want to make sure that your image file sizes are not too large, causing long download delays and potentially turning away customers. For the most part, the image formats used for web publishing are JPG, GIF, and PNG, with each format having its own strengths and weaknesses. For example, images in the PNG format will usually have a larger file size than their JPEG or GIF counterparts. However, PNG images offer enhanced transparency support that are not available with the other formats. Conversely, the JPG format does not offer any transparency support at all, yet offers the best compression option for complex images such as photography. Images with limited colors and complexity...

http://www.practicalecommerce.com/articles/474/Installing-Google-Maps-On-Your-Site 2007-05-02T09:21:21-07:00

Implementing Google Maps into your website is an easy way to provide rich, interactive map features that can help your customers find your business. Of particular interest to brick-and-mortar stores, Google Maps provides an Application Programming Interface (API) that makes it easy for developers to incorporate custom maps into websites they create. The first step in working with the Google Maps API is to sign up for what is called an API key. Each website that contains Google maps requires its own API key — an effort to reduce spam and abuse of the service. Once you have your API key, you're ready to go. Now that you have your API key, you will need coordinates that tell the API where the center of your map should be. The process of converting addresses to geographic coordinates (latitude and longitude) is called geocoding. Google Maps provides access to geocoders that can easily convert the address you want to serve as the center of your map (such as your business) into...

http://www.practicalecommerce.com/articles/467/Video-Tutorial-Removing-Backgrounds-from-Product-Images 2007-04-23T15:49:37-07:00

Look, we aren't all great photographers, and even those out there that do manage to take spectacular photos still need to clean up their images a bit before putting them online. Product images can be one of the most important factors influencing whether or not potential customers make a purchase from an online store. In an ideal world, we would all have access to a small photo studio with backdrops, lighting, and everthing else needed to take great photos. But this is the real world, and the reality is that product images often need to be cleaned up in Photoshop before they can be used online. Running and online store is not terribly conducive to mastering Photoshop and other image editing software, particularly since these are immensely powerful applications that have a steep learning curve. In this tutorial, we will be looking at some techniques for removing unwanted backgrounds from a product photo, and also a few quick tricks for making your images stand out. As anyone...

http://www.practicalecommerce.com/articles/464/Basic-Definitions-Web-10-Web-20-Web-30 2007-04-18T14:44:05-07:00

"What do people mean when they talk about the Web 2.0?" is a query we receive repeatedly, and probably has as many answers as the number of people out there using the term. However, since talk about the Web 3.0 has surfaced in the last year or so, a whole new level of confusion seems to have set in. In an effort to help people understand the ideas behind buzzwords like Web 2.0 and Web 3.0, let's go through what exactly these terms mean (if anything), and how they apply to your ecommerce business. I want to make it clear at the start that this article is meant to be a broad definition of the challenges that cause people to think in terms of Web 2.0 and Web 3.0. Since these are buzzwords and not clearly defined terms, think of this as an attempt to provide a bird's-eye view of the ever-changing lay of the land on the web. In an effort to create discreet "versions" of the web that can be compared, I will borrow from the W3C Director Tim Berners-Lee's notion of the read-write web,...

http://www.practicalecommerce.com/articles/458/What-is-Ruby-on-Rails 2007-04-09T11:57:04-07:00

First there was Ruby, and now there is Ruby on Rails. Ruby is an open-source web-programming language that was developed in Japan in 1995. Ruby resides on your web server and operates similarly to other programming languages, such as PHP, ASP and Perl. “Rails” is a separate pre-built framework to help automate common Ruby commands. It was developed in 2004 by a Danish programmer, David Heinemeirer Hansen. It, too, is open-source and it makes programming in Ruby much easier and quicker. For example, to write programming code to create, update and delete files from a database can take much time and effort. Rails, however, has a pre-built framework for quickly programming this common task in Ruby, and by using it a programmer can accomplish in minutes what would sometimes take hours to do. As such, Ruby on Rails is gaining in popularity as a simple, easy and free programming option to create websites. To read more, see Ruby-lang.org/en/ and Rubyonrails.com.

http://www.practicalecommerce.com/articles/456/Why-Authenticate-Email 2007-04-09T11:11:32-07:00

Mail servers require a username and password authentication for outgoing mail (mail being sent from your computer to someone else) so the servers can maintain control over who is allowed to use the resource. The first, and probably most obvious, motivation is to control email spam. By requiring a username and password (which can be revoked), a company that operates a mail server can prevent spammers from sending massive amounts of email through its servers. This provides legal protection for the company as well as a practical benefit: The mail server the company invested in, and intends to use, is not bogged down with spam email. We all know spammers don't just send one or two emails — they send thousands. In addition, since email accounts are typically provided as part of a larger bundle of services, such as website-hosting and Internet service, the companies want to make sure their customers have a secure mail server available. The average customer expects his/her incoming...

http://www.practicalecommerce.com/articles/447/Diagnosing-Site-Performance-Delays 2007-03-26T11:40:35-07:00

When your site begins to experience performance drains, which usually show up as slow-loading web pages, the problem's diagnosis can be more challenging than its solution. The first thing developers should examine is the nature of the website. Is the site a static HTML website, or does it rely on dynamic scripting such as ASP, PHP or Perl? If the site is a static HTML site, then database connections, web services and inefficient scripts are probably not the cause of performance bottlenecks. Bottleneck sources might be found in the server's Internet connection — if client-side connections and ISPs have been ruled out — or in the server hardware and software. Perhaps the server is overloaded and unable to respond to the number of requests your visitors generate. Perhaps the allotted disk space in the hosting account is full or the server is not configured properly. The answer might be simple: Upgrade your hosting account or switch to a hosting company with a more reliable...

http://www.practicalecommerce.com/articles/433/Will-All-My-Windows-Applications-Run-On-A-Mac 2007-03-08T10:28:55-07:00

This question relates to the new Apple computers that include Intel chips. Since the switch to Intel processors, it has been possible to load Microsoft's Windows operating system onto Apple hardware. As long as the system requirements for the version of Windows you plan to run are met by your machine, there should be little or no difficulty in using Windows (or at least, not hardware-related problems). Mac users who want to run Windows have a couple options, the first of which is simply to erase your Mac's hard drive and install only Windows. This is a pretty rare implementation, as there are few Mac owners who want to run Windows exclusively. However, for the few that do exist, this is an option. However, Apple provides an alternative for users who prefer OS X, but also want to run Windows periodically. The solution is called Boot Camp, a start-up utility that allows you to choose the operating system you want to run. In this case, both Windows and OS X are installed on the...

http://www.practicalecommerce.com/articles/82/Tutorial-Gaining-Control-of-Search-Engine-Spiders 2007-02-12T04:00:00-07:00

Most of us are familiar with the term “search engine spider” and at least understand that they have something to do with how search engines index websites. The purpose of this article is to help you make your web pages more accessible to spiders. After all, spiders are our friends. It is accurate to think of a spider as an automated web browser. It will access websites and work through all the pages, indexing the content and following links. A good search engine optimization strategy will ensure the spider can easily navigate to each page of your website, as well as the content of your website. This is many times easier said than done, however in this tutorial we will outline a simple technique using basic HTML and CSS to gain control over how spiders navigate the individual pages of a website. Our goal is to create links that will guide the spider through our site, but not be visible to our visitors or mess with our website design. Before getting into the mechanics of...