Website and logo design

Here are a few websites I've designed:

  

  

Here are some logos I've designed:

Read more!

The best free FTP program you never heard of

This program automatically sends any files that have changed to your server. Make a change, click, it's done. Wonderfully simple and easy, and the ftp itself is faster and easier than many other programs, such as Dreamweaver.

You won't find it in any directories of ftp programs

Why? Because it's a full-featured XHTML editor that works on many platforms. Not to disparage it as an XHTML editor (for example, it includes features such as HTML Beautify, HTML Validate and jump to closing tag), but I use it almost exclusively for ftp.

It's called Arachnophilia, it's been around forever, and you can download the free self-installer for Windows here, and download it for other platforms as a Java .jar (Mac, Linux, etc.) here.

Once you have installed and opened the program, Alt-F opens the FTP service window. Simply type in your settings, click "Rehearse" (to see which files will be sent) and then click "Execute." It's lightning fast.

Ridiculously easy to use and setup

I've circled the key ares in blue below when you first set up the Arachnophila FTP service:

1. When you first enter settings, the window does NOT offer to save your settings, but they are saved nonetheless. Don't bother looking around for some kind of "save my setttings" button--there isn't one. Just select a site number, and type in a name, and after you're done and come back to this dialog box, your settings will be there waiting for you.
2. Be sure to click the "Save password" checkbox for your convenience.
3. The "Level" slider will NOT show enough detail for you to see what's happening unless you slide it most or all of the way to the right.
4. Before you click "Execute," which will upload all your changed files, click "Rehearse." Among other things, this will tell you how many files will be uploaded. There are a number of oversights you can make that would cause unexpected files to be uploaded. For example, you might have moved some files over to your ftp location without thinking that they would appear to Arachnophilia as "new" files that need to be uploaded. There might be files you meant to delete, but didn't. And so forth.
   

Tips and tricks

It allows you to save up to 32 presets, so I commonly set up several presets for different folders within each website I work on. Remember to uncheck "Scan subdirectories" if you only want it to look in the main folder. Even if you don't change much in the subdirectories, it's easier to maintain if you limit the files it checks.

The first time you run it, of course, it will ask to upload all files in the directory you point it to, because it has no record of which files have been uploaded before. Simplest is just to let it upload everything, even though this will overwrite your remote files on the web server unnecessarily with your local files.

Read more!

Fixing YouTube videos in Firefox by reinstalling Adobe Flash Player

If you upgrade to the latest (beta 10) version of Adobe Flash player, it fixes the problem of videos occasionally not playing in Firefox.

Here's how to do it:

From this link, run the flash uninstaller, and then get version 10 here go here and download flash beta 10.

Read more!

Build community around topics of importance with Drupal

This is about creating a site that lets people submit news and links and let visitors vote on which should gain the most visibility. It's a way of building a community around a topic of significance.

Many hosts will set this up for you in literally seconds (free: it's open source) with a one-click install (typically of Pligg). You can use a site like this as a step beyond blogging, where you submit synopses on topics of interest, and link to sites with news or information.

Recommendation on how to start:

Install Pligg, then upgrade to Drupal with Drigg if you get popular. Drigg (in early 2008) will import your Pligg data.

If you're more savvy, start with Drigg running on Drupal. Here's an excellent site built with Drigg running on Drupal. I could provide a lot of the competing recommendations on this, but I decided instead to cut to the chase. I did several hours of research. Your main choices appear to be:

• Pligg;
• Drupal with Drupaligg;
• Drupal with Drigg;
• Drupal with a mixture of modules;

There are lots of other choices as well, these are the main ones. Summary: Pligg is buggy but widely available as a one-click install, Joomla not enough useful modules for this purpose and more challenging to customize compared to Drupal (though Joomla is a little easier "out of the box").

Why use Drupal?

Drupal is also one of the best documented open-source projects out there, won an award for Overall 2007 best Open Source CMS, was overall winner of the Webware 100 Awards, etc. Also, Drupal is an old-timer; Drupal began just as the internet was heating up. Drupal is more secure than WordPress (for comparison).

Okay, who am I kidding? Wordpress is hacked and hacked. Because it's too popular, and follows what is essentially an insecure upgrade process. Automatic (the name of the group that provided Wordpress developers) don't provide bug and security patches for previous releases --Drupal does. Upgrades often break or change things, and need to be tested first (and users need training on changes), so security patches need to be provided for previous versions. Updates affecting users need to be in addition to security patches that let technicians secure the software without affecting users or plug-ins. Wordpress needs to leave the Update or Die philosophy. You can harden Wordpress against attack, but it's a lot of work.

Plus, who wants to fail when they become a success? Drupal can handle your site and community becoming as successful as you can imagine. (If you start small, never grow and then give up--it really doesn't matter where you start.) Drupal powers major sites such as:

• United Nations
• Warner Bros
• Discovery Channel
• AOL
• Sony
• NATO
• MTV UK
• BBC
• the Onion
• NASA
• Greenpeace UK
• New York Observer

There are books written about using Drupal too. You can read excerpts from books about Drupal at Google Book Search. Here are many examples of sites using Drupal, an even larger list of sites, and information about using Drupal in academia.

Comparing Drupal to Joomla

Here's two detailed comparisons of Joomla vs. Drupal from late 2007 (here's the second Joomla-Drupal comparison). Here are some quotes I found around the web:

"Drupal, [is for] web sites that are "highly dynamic" in nature, "community-driven," with lots of interaction. Whereas Joomla is for what he calls "brochure web sites", that are more static in nature (less dynamic)."

"Joomla provides a good first impression, which tends to wane as you dig deeper into the program. Drupal is just the oppsite. It provides a poor first impression ("initially left a bad taste in my mouth"), yet becomes more appealing the deeper you dig."

"1. Drupal is a 'developer's' CMS. You'll find that the Drupal community is packed full of php geeks, but you'll rarely find good designers. That's because Drupal offers incredible possibilities in terms of what you can do with modifying the code. Less designers involved means less beautiful themes...and as a designer, myself, I too find this frustrating. My solution has always been: just build your own themes.

2. Joomla is easier to use, involves less coding, and is more popular than Drupal. This means that coders don't flock to it...but designers do. This fact yields more beautiful stock themes because there's more designers working on the project, and it's a bigger market for them to work in. "

Comparing Drupal to Pligg

Here are few quotes from around the web that I found useful:

August 12th, 2007

Drupal has already modules to set up a social news /bookmarking plattform and it is great! We tested pligg but it was too buggy. No problems with Drupal.

April 18th, 2007

You can install Drupal (as a designer or non-programmer) and have a feature rich site in under an hour. Developing for Drupal takes me less time than fixing the issues in Pligg that managed to escape testing. I’ve been working with Drupal long enough now to jump into developing my own modules and features quickly.

The downside? Drupal requires learning, experience and clean PHP development. You don’t just install Drupal and start coding.

April 20th, 2007

Unfortunately, we soon found out how beta Pliggs code truly was and ended up having to almost completely rebuild the way pligg handled voting, searching, tag handling, URLs, live viewing, tag clouds, multimedia and stories. Some of these issues revolved around Pliggs inability to support usernames with spaces, something VBulletin allows. Our implementation authenticates using the VBulletin system so many functions that display the username had to be tweaked in order to allow for spaces.

It is of no fault of Pliggs and we would still recommend the software to anyone that simply wants to clone diggs features. In fact the crew over at pligg.com are constantly adding new feature sets and fixing bugs so I’m sure it is only a matter of time before they release a truly stable and semantic version.

Our biggest struggle was with Pligg and its instability. Running a few releases of the Pligg beta proved to be a large amount of work when it came time to update to a later revision. All of our code had to be migrated (in some cases line-by-line) because of the dramatic changes. In the end, old bugs were fixed but new bugs arrived that we had to handle.

What else can you do with Drupal?

At last count, there were almost 3,500 modules in over 30 categories.
One of my favorite modules is CiviMail, which provides advanced mailing list management. This is an example of how there is powerful free software you can only use when operating on a CRM platform such as Drupal--you can buy standalone software to do this, but there is nothing else as powerful that is free without using Drupal.

Beyond modules in categories you'd expect to find (at bottom) there are categories such as:

• Organic Groups
  
• Evaluation/rating
• Event
• Location
• Commerce / advertising
• Mail
• Media
• Syndication
• Community

.. and expected categories such as Developer, Import/export, Javascript Utilities, Paging, Administration, CCK, Content, Content display, Filters/editors, Multilingual, 3rd party integration, RDF, Search, Security, Taxonomy, Theme related, User access/authentication, User management, Utility, Views, e-Commerce, and File management.

Read more!

Protecting copyrighted images on the web

You can put any notice on an image you wish with this system, but it's designed primarily to discourage copying when you don' t want it. If you prefer fair use, via a Creative Commons license, for example, you can just name the photo that way.

Putting a transparent .gif in front of images you are trying to protect with a copyright reminder as the file name has a number of advantages:

The system first educates and encourages people to respect the copyright of your image, which stops many people:

1. When you right-click and save the image, the name it tries to save under is "Please no copying, copyrighted image.gif"
2. You can include the copyright symbol also, and make all this the hover text as well. (Though for hover you would probably want something descriptive of the visible image.)

If the user ignores copyright and tries to save anyway:

1. All they get is a one pixel clear gif -- although they won't know it! It seems to save normally. This is the main method of prevention -- it subtly discourages trying a screenshot, making you think you can right-click successfully.
2. If they leave and go to look at the image later, they may just give up rather than trying to figure out which website the image came from.
3. If the user figures it out while still at the website or returns, they will likely assume a mistake occurred they try again, again seeing the reminder "Please no copying, copyrighted image.gif"
4. If someone is dedicated and savvy, they will view source or cache, or use a screenshot -- and no website technology can block screenshots (other than defacing your image, such as with a watermark).
5. Regardless of scenario, they will be very clear that they are violating copyright!

It works normally in every way:

1. The image can include a hyperlink
2. It can be moved around by the designer just like a standard block element
3. It adds very minimal extra server or code load on the website.

The technology itself is simple:

1. Make the visible image the backround of a div or table,
2. Make the foreground image a 1px transparent gif sized to exactly cover the the visible image.
3. Place most properties (hyperlink, image name/title, etc.) onto the 1px gif

I use a spreadsheet with the words "real image here" when I am creating a number of these so I don't have to do any coding. If it would be helpful I would be glad to provide an example of this also.

Of course, images can always be copied as screenshots, but most folks simply try to save the picture first. If that seems to work, they go away---and only discover later *using my method) that they didn't get the correct pic!

However, always good to at least put copyright text under the image (if not actually over it as a watermark). That way people have been notified clearly of copyright.

Here's the method in a nutshell:

First, give a 1 pixel transparent gif a name that makes the person copying it think they are getting the actual image---and to give them one more notice that they shouldn't be doing so. I name the image "please_no_copying_copyrighted_image.gif" --- so when they try to save it, that's what they see it will be named.

Here is a very old sample example. (This will only work in Firefox or Opera or older versions of Internet Explorer.) Click on any image and a window will open, try to save the picture from the open window to see the effect at work.

Improvement for screen readers:

Simply add a description of the image before the copyright notice. Thanks, GeekGal!

Read more!

Automatically updating multiple items on your website:

Here's an oldie but goodie. You could do this PHP or in other ways as well, but here's a simple way that will work for everyone (and works in ALL browsers!). Tip in advance: use your mouse to select any text that you have a hard time viewing on this blog---it will highlight it, and make it easy to read.

Say you display a phone number on dozens of pages across your website:
Call us at: <span class="phoneNumber">(612) 222-0000</span>

(The exact HTML or CSS you use doesn't matter---just pretend it looks like the line above.) Now say you want to change that phone number in one place, and then have it update everywhere else on the website automatically ! How would you do it?

First, realize that these two things are actually IDENTICAL:

Call us at: <span class="phoneNumber">(612) 222-0000</span>
document.writeln('Call us at: <span class="phoneNumber">(612) 222-0000<\/span>');

In the first case, you've just typed on the page the code you want. In the second case, you asked JavaScript to type it onto the page. The result is IDENTICAL HTML/CSS on the actual web page for visitors.

So, knowing this, here's the trick:

Take that line of JavaScript code, put it in a file (lets call it phone.js), then link to the file! So the phone.js file will have one line of code:

<!-- document.writeln('Call us at: <span class="phoneNumber">(612) 222-0000<\/span>'); //-->

... same as before. But now, on the page itself, you LINK to the phone code with:

  <script type="text/javascript" src="phone.js"></script>

Instead of putting the "Call us ..." etc. code on the page, you put it in a file, link to that file (phone.js), and then any changes you make to the file show up everywhere you list the phone number on your website!

There are few tips and tricks to this, so here's a couple of links for further research---check these out:
• Creates javascript for you automatically: felgall.com/htmlt48.htm
• Explains the process: web-source.net/dynamically_update.htm

Read more!

Free PayPal shopping cart with advanced features

I just have to give this person a mention!

To add a PayPal shopping cart to your website, most would wish to have some of the features of Website Payments Pro. Unfortunately, it costs $20/month plus, typically, a much bigger cost in time and money for a shopping cart that has integrated Payments Pro. However, Mr./Ms. paypalhelper has, for the past three years, been creating cut-n-paste solutions to give you many of the the features of Website Payments Pro for free in JavaScript. No $20/month, no outside shopping cart costs and technical hassles configuring on your server. Here are links to just a sampling of some of their great work:

• View Cart Dropdowns (selects).
• Radio and Checkbox.
• Shipping.
• Coupons.
• Quantity discounts.
  
• Buttons.
• Image Replacement (rollovers and slide-shows).
• Dynamically modify selects. Subscriptions.
• Separate PayPal email. Send Auxiliary information with order, and program a window that controls other windows.
• One-click submission of multiple items. Simple example of Method 2 cart upload with your own pseudo-cart.
• One-click submission of multiple items WITH UPS shipping included. Simple example of Method 2 cart upload with your own pseudo-cart,
• Complex PayPal Single Item Purchase example. Insert JS and just use it.
• Multi-window accumulation of data. Pass user-selected data to second window.
• Multi-window II. Send FORM to 2nd HTML page.
• Document Object (DO) dump example. Stuff JS accesses.
• Client-side Cookie example. Storing data on the client's computer.
• Weight-based shipping in your site. This example uses USPS Priority and Machinable Parcel Post. User inputs his ZIP, and you can calculate
  
• Simple Client-side Cart. This is a complete client-side shopping cart. All calculations are done in this local cart, and no changes are allowed within
• Complex Client-side Cart. This is just about everything that may be done within a client-side cart.
• Hide email and PayPal links from spambots.
• Encrypt HTML data.
• Partially encrypted data. Much better than PayPal's solution,
• Make PayPal buttons validate under XHTML1.1
• Automatically clear FORMs after submission.

Read more!

CSS Font Size Solutions: How to get there from here.

Update: Start with Tripoli.

Credit where credit is due: http://www.websemantics.co.uk/tutorials/useful_css_snippets/ is a fantastic article, best of class in this area.

How should you size fonts using CSS? Many, many choices, each with many, many problems. Here's an excellent and simple solution, formatted ready to be cut-n-pasted into your CSS. Following that are some links and further explanation:

* {margin:0; padding:0}
/* Margin and padding removed from all elements. Adding border:0 is bad: issues with Opera and input radios/checkboxes. */
html {height:100%; font-size:100.01%} /* Sets the window height. */
body {
min-height:101%;
/* Prevent content jumping on fixed width pages: Min page height greater than window height forces vertical scrollbar display in Netscape/Firefox -- IE ignores this setting. */
font:100.01%/130% Verdana, Helvetica, sans-serif;
/* Set font-size to a percentage preventing a Windows IE "extreme font re-sizing" bug.
Set font-size slightly larger than 100% to repair Opera rounding errors.
Set less than 101% to prevent Safari errors.
130% line-height setting is an easy-to-read spacing.
*/
color:#000; background:#fff;
/* Set general color & background. */
width:760px;
/* If you want a fixed width, this is set for 800 pixel wide browser displays. Usability studies show many 800x600 browsers not maximized, this is a common "real-world" user browser width*/
}

/* Browsers vary top margin on paragraphs/headings:
use bottom margin to separate them from elements below. */
p, h1, h2, h3, h4, h5, h6 { margin: 0 0 1.2em }

If centering in IE, add two extra properties to the body, an extra body setting, and create a "container":
body {
text-align:center;
/* Force IE to centre all content, text re-aligned left below */
margin:0 auto
/* Works for IE6, Firefox, Opera, Safari and Netscape; IE5 and IE5.5 need text-align hacks above and below */
}

body * {text-align:left} /* Resets all text aligns to the left */
#container {width:760px} /* centered content goes inside a div with an id="container"


Tips and Further Discussion

Once the body font-size is stated as a percent, ems and percents are equivalent. But scale elements with percents, NOT ems, because there are still some old AOL users with browsers that do not support ems.

Of course if you use
@import "styles.css";

.. your style sheets are hidden from Internet Explorer v4 and Netscape v4 on Mac and PC.

And if you use:
@import"styles.css"; /* Note no white-space and double quotes */

.. your style sheets are hidden from Internet Explorer versions prior to v5.5 and Netscape v4 series on both Mac and PC.

Also use percentages, NOT ems if you want a dimension to scale with the width of its parent (which can be the browser window).

A collection of great links on related topics:

http://www.websemantics.co.uk/tutorials/

From that list, for displaying code on web pages, see:

http://www.websemantics.co.uk/tutorials/displaying_code_on_web_pages/



What are all these icons?

Read more!