web notes - a blog

Tactics to produce a polished (web) user interface, in a cost-effective manner.

This is different than the design, in that these issues are related to the user’s interaction, rather than the visual presentation. For example, the visual presentation would include the page layout, images, graphics, choice of color, attractive menus and page navigation. User interface is more commonly a part of applications, and is intended to help the user accomplish what they must do with the application. The user interface must be fairly easy to understand, and should be polished to present a professional appearance.

• Start with a toolkit and if possible, a theme that works with it.
• Find an icon set. The link above is excellent. You may need more than one set, and, since you only need to purchase it once, it is worth choosing carefully. Be aware of any license restrictions.
• Be creative. If you can’t find the ‘perfect’ icon, use a keyboard character, or a different icon.
• Keep it simple.
• Disable controls the user can’t use, based on the current state of the page.
• Remember the functionality probably takes precedence over the UI. When pressed for time, get it working, then make it pretty.
• Limit the list of supported browsers. IE6+ and FF2+ is a good starting point.
• Keep track of the time spent per page. This will allow you to give better estimates, and help management understand the costs of the project.
• Donate to support any free tools you use.

This is a very simple demonstration of a dojo form. Please use ‘View Source’ to view the code.

Supporting server-side PHP.

json.php

Returns the submitted input. Demonstrates a ’successful’ transaction.

<?php
header('Content-type: application/json');
echo <<<END
{"sText":"{$_REQUEST['sText']}"}
END;
?>

error.php

Returns a 503, service not available.

<?php
header("HTTP/1.0 503 Service Not Available");echo 'Server side error';
exit();
?>

timeout.php

Sleeps for 3 seconds to force a timeout.

<?php
sleep(3);
?>

These aren’t specific courses, the intention is to provide a rough parallel. They aren’t in a particular order, and multi-semester study is implied for some areas.

• Operating Systems - Particulary Linux. Appreciation of the hardware that makes the system work, especially the server. Understanding of the commands, organization, processing. Use of log files.
• Computer Architecture - Key concepts - physical elements that make up the machine. Capabilities and limitations. CPUs, memory, disks, interrupts, timing, queues, caching. Performance considerations. Requirements awareness.
• OOP / Data Structures - Ability to abstract a system into components that can be efficiently operated on. Queues, linked lists, trees, arrays, multi-dimensional arrays, matrices, classes and objects. Methods, properties and events. Vital for server and client side.
• Algorithms - Appreciation for the impact of how code is written on performance. This is especially important because many web applications are written in interpretive languages. Awareness of high overhead operations (which can be avoided or performed by existing library functions).
• Logic - The ability to break a problem in to manageable pieces and write efficient code.
• Systems Analysis - Developing a high level perspective to understand how system components interface and interact. Distribution of requirements.
• Technical Writing - Written communication is vital to describe the work that will be performed.
• Assembly Language - A view inside the processor. Although not necessary, it is valuable to understand what the processor is, what it does, how it does it, and how to control it. Complements the OS and Computer Architecture courses.
• Data Communications / Introduction to Networking - Writing code for the Internet is heavily influenced by its distribution. It is important to know how the data gets from the server to the client and back again. This affects how pages are constructed. Key elements, difference between form and content, compression, bandwidth.
• Security - Use of encryption, OpenSSL, protecting data, web application firewalls, passwords, ports, server firewalls, watchdogs, etc.
• Server Software - IIS or Apache. How requests are received, protection of data, efficient use of disk space and bandwidth. Caching. How to create and manage accounts. Use of web stats to monitor sites. Use of log files.

• Current Industry Trends - Frameworks, template systems, AJAX, toolkits, CDNs.

A web site is the most visible part of a companies Internet presence, but not the only part.

The following issues must be continually addressed and frequently monitored:

• Content Maintenance This includes all content changes. It may also require navigation changes. Many sites use content management systems such as eZ publish, Drupal, or Joomla. These make editing content easier, but still require some training. The content itself is important, but its presentation must also be considered. Web pages should be easy to read, and informative. They should be attractive and consistent with the other pages on the site. The content should be consistent with the language of the target site visitors. If it is a professional site, everything should be spelled properly, cased properly, and with valid grammar. Slang language should be avoided.
• email Careful use of email accounts and forwarders is important. Forwarders allow the same address to deliver messages to multiple people. In addition, a forwarder can ease personnel transitions, the email address does not have to change if a different person is handling it. email accounts must be budgeted. Disk space is cheap, but it isn’t free. In most cases, the disk space used by email is deducted from the available space for the site. For that reason, one must keep track of the number of accounts and how big each mailbox is. Notification should be set up to ensure people are alerted when their mailbox is full. Issues that can take alot of time include recovering if the domain or server is blacklisted, blocked emails for various reasons, client configuration issues.
• Contact mechanisms First, one must comply with the anti-spam laws http://www.ftc.gov/bcp/conline/pubs/buspubs/canspam.shtm. Newsletter content can also be a valuable part of a site. In addition, contact mechanisms must be protected from abuse. Tools available include CAPTCHA http://www.captcha.net/, Akismet http://akismet.com/, http://ostermiller.org/contactform/, and custom code.
• Logs Error and access logs should be checked at least weekly for any unusual entries, for example missing pages or images. Some hacking attempts will show up in the error logs, as file not found errors - usually with distinct URLs, repeated requests into forbidden areas. Restricted areas should not be served, if they are, the web server configuration should be updated to protect them. IP address patterns should be observed to see if requests (potential attacks) are from a specific area. These can be blocked with a firewall. If you have access to the email logs and the server level logs, particularly the SSH and MySQL logs, they should be reviewed as well.
• Application Management It is extremely important to ensure the applications are up to date. Application upgrades range from a simple button click with Fantastico to complex database and patch or upgrade sequences. As a rule, the cost of these upgrades should be included in maintenance allowances.
• Security In the unfortunate instance when an application is hacked, it must be cleaned up, and usually the application must be upgraded. These tend to be emergencies and often result in outages. Careful Application Management (above) can greatly reduce these. Credit card and personal data must be handled very carefully (ideally by someone well-qualified :yes: ). https://www.pcisecuritystandards.org/
• External Interfaces Many sophisticated sites have complex interfaces into payment gateways or web services. This type of code usually requires strong engineering skills.
• SSL Certificates To support HTTPS for ecommerce and secure access to information, certificates must be purchased, approved, installed, and then renewed as required. Renewal requires reinstallation.
• Web stat checks Periodic review of the web stats allows an evaluation of the site’s search engine positioning, sources of traffic, keywords, and pages accessed.
• Performance Site visitors expect a timely display of a site. There are many ways to ensure a site performs well, the best solutions vary by the type of site, however, the following issues are clear: client-side caching should be used, content delivery networks are valuable for offloading the server and the network, images must be optimized - delivered properly through the server and displayed properly by all supported browsers, javascript should be portable and efficient, page construction should be evaluated with tools like http://websiteoptimization.com prior to launch and after major changes.
• Custom code Custom code should be carefully audited for security. http://phpsec.org, http://www.fortify.com/security-resources/rats.jsp. It should be protected by a web application firewall such as http://modsecurity.org.
• Quality Assurance Time must be taken to check the site for problems like broken links to external resources, and any problems within the site itself.
• Technical Quality The quality of code used on a site is visible to all visitors. How it looks in the browser, and the code that delivers it should be high-quality, with current technologies applied properly. Poor displays and bad code can harms a companies reputation and professional image.

The checker is an HTML file that will allow you to enter the URL for your cart, the directory you have installed it in, then offer you links that you can click to see if the server has been properly configured to protect the files.

This tool is valuable for the following:

• Engineering, security, and QA - to ensure the application was properly installed and protected
• eCommerce site owners - to check the work of your web development company
• Credit card gateway companies - to check the security of the application installed for requesting clients
• Security - to identify risk areas for applications
• Hosting companites - to check client accounts after security problems

You do not have to install it on a server, you can run it from the desktop. It does not require any server access beyond the browser. No passwords, no database access, no FTP, no SSH. It doesn’t use AJAX, it won’t log into your cart. It won’t analyze the results.

It is a very simple, free tool that runs under IE.

If you would like a copy, you must either have a live cart running, or be part of a web development company. Use an email with the domain name of the cart, or your web dev company, and I will send you the HTML - in a text file. Requests can be made through the contact form on this blog.

Please don’t use gmail, hotmail, yahoo or other free accounts. You will not receive any response.

The reason the page isn’t posted for public access it that it would make it very easy for people to quickly check a cart’s vulnerabilities. Limiting the distribution is for security. This is not an attempt to collect email addresses or domains that are running X-Cart. I know how to find carts. :)