Archive for September, 2006

Greenwich Mean Time (GMT) Formats

Posted on September 25, 2006 in Websites by Jeff Starr

There are currently three formats for expressing date/time in Greenwich Mean Time (GMT). All examples represent the date, "July 04, 2050". The time for all three formats is expressed as "hour:minutes:seconds".

Here is the preferred, standard format1 for the Internet. This format is defined by RFC 1123 (updated from RFC 822):

# RFC 1123 Standard GMT Format
Mon, 04 Jul 2050 07:07:07 GMT

The programming language C uses the ANSI standard format1 in its asctime():

# ANSI Standard GMT Format
Mon Jul 4 07:07:07 2050

The RFC 850 format2 is now obsolete (RFC 1036) and should not be used:

# RFC 850 Standard GMT Format [obsolete]
Monday, 04-Jul-50 07:07:07 GMT

1 Weekday abbreviations: Mon, Tue, Wed, Thu, Fri, Sat, Sun
Month abbreviations: Jan, Feb, Mar, Apr, May, Jun, Jul, Aug, Sep, Oct, Nov, Dec

2 Weekday abbreviations: Monday, Tuesday, Wednesday, Thursday, Friday, Saturday, Sunday
Month abbreviations: January, February, March, April, May, June, July, August, September, October, November, December

References

SEO 101: Keyword Development and Deployment

Posted on September 22, 2006 in Optimization by Jeff Starr

Keywords play a vital role in search engine optimization (SEO), and — if used properly — have the potential to increase the flow of traffic to your site. It is beneficial to maintain an active list of keywords for each of your websites. Each list should be a continually evolving set of important, relevant keywords. The idea here is to develop a consistent practice of actively seeking better keywords, thereby producing your very own customized keyword library.

Continue Reading

Customize WordPress Quicktags

Posted on September 18, 2006 in Function, WordPress by Jeff Starr

Note: This condensed tutorial assumes you are working with WordPress 2+ and are familiar with editing .php and/or .js files.

WordPress quicktags1 provide shortcuts for adding certain bits of code to your posts. The default set of quicktags includes some handy shortcut buttons for tags such as <strong>, <a>, and <img>, as well as a few others. While the default set of quicktag buttons is occasionally useful, a quick bit of quicktag customization can easily transform your personal set of quicktag buttons into a deadly arsenal of time-saving code shortcuts.

First, open the quicktags.js file, usually located in the wp-includes/js directory. Next, scroll down to around line #40 and look for the following chunk of code:

edButtons[edButtons.length] = 
new edButton('ed_strong'
,'b'
,'<strong>'
,'</strong>'
,'b'
);

edButtons[edButtons.length] = 
new edButton('ed_em'
,'i'
,'<em>'
,'</em>'
,'i'
);

Now, to assist in the editing process, copy and paste this next bit of code in between any two of the edButtons[] statements. As this will be used as reference only, ensure that remains commented out:

/*

THIS IS THE GENERAL FORMAT OF A QUICKTAG BUTTON:

function edButton(id, display, tagStart, tagEnd, access, open) {
	this.id = id;             // used to name the toolbar button
	this.display = display;   // label on button
	this.tagStart = tagStart; // open tag
	this.tagEnd = tagEnd;     // close tag
	this.access = access;     // access key
	this.open = open;         // set to -1 if tag does not need to be closed
}

*/

With that in place, it is time to add a new button. Choose a code element that you find yourself frequently adding to your posts. Let’s say that you are always linking to a content directory called "content". In that case, let’s add a quicktag button that will automatically create a link to the content directory:

edButtons[edButtons.length] = new edButton('ed_content-link'
,'content-link'
,'<a href="http://yourblog.com/path/content/" title="">'
,'</a>'
,''
);

After saving and uploading the edited quicktags.js file, adding a link to your content directory is as easy as pressing the "content-link" quicktag button!

The process of adding other tags is essentially the same. Play around a bit and see what you come up with. Hopefully, this is enough information to get you started. Remember to delete the reference example after you have finished adding/editing buttons. For newer versions of WordPress, the same block of reference code is included near the top of the quicktags.js file itself. For more information on customizing quicktags, check out the tutorial2 listed in the reference section below.

References

Absolutely Centered Layout

Posted on September 18, 2006 in Presentation, Structure by Jeff Starr

Absolute Centering with CSS & (X)HTML

Designing an absolutely centered layout involves centering a division both horizontally and vertically. When this is done, the centered division (or other element) is centered according to the browser window. To accomplish this, use this (X)HTML:

<div id="wrapper">
 <div id="center">
 </div>
</div>

And employ this CSS (commented with explanations):

Continue Reading

IE Scrollbar Colors

Posted on September 18, 2006 in Presentation by Jeff Starr

Changing the color of scrollbars for Internet Explorer may very well be the oldest trick in the book. In fact, this post exists mostly for the sake of prosperity, as we here at Perishable Press strive to eliminate our entire offline library of website design notes by transferring them to the World Wide Web. Although library conversion requires time, patience, and determination, changing the color of IE scrollbars is relatively simple. Simply associate these CSS rules to the (X)HTML documents desiring unique scrollbar colors:

/* produces a stylish black scrollbar with light-grey highlights */
* html body {
   scrollbar-face-color: #000;
   scrollbar-shadow-color: #808080;
   scrollbar-highlight-color: #808080;
   scrollbar-3dlight-color: #000;
   scrollbar-darkshadow-color: #000;
   scrollbar-track-color: #000;
   scrollbar-arrow-color: #808080;
}

/* produces a stylish grey scrollbar with off-white highlights */
* html body {
   scrollbar-face-color: #889B9F;
   scrollbar-shadow-color: #3D5054;
   scrollbar-highlight-color: #C3D6DA;
   scrollbar-3dlight-color: #3D5054;
   scrollbar-darkshadow-color: #85989C;
   scrollbar-track-color: #95A6AA;
   scrollbar-arrow-color: #FFD6DA;
}

Hacking Firefox Extensions

Posted on September 10, 2006 in Technology, Websites by Jeff Starr

Firefox extensions enable users to customize Firefox with additional features. Generally, Firefox extensions are free, open-source, and easily downloaded as .xpi files. This article explains how to hack Firefox extensions of the .xpi variety. There are many reasons why someone would want to hack a Firefox extension — examples include: editing code, debugging errors, and learning extensions. This hack method requires a web browser, zip utility, and text editor.

Step 1: Secure an extension

By default, the Firefox browser will cache and attempt to install any "extension.xpi" file it encounters. Once Firefox installs the plugin, it becomes much more complicated to hack. Therefore, it is best to save an offline copy of the extension. This is easily accomplished with a browser such as IE that does not automatically install the extension, but rather provides an option to save a copy. With IE, simply right-click the extension.xpi link and "Save Target As..". Regardless of the method, the point here is to secure a local copy of the extension.xpi file. Remember to make a backup copy.

Step 2: Initial extraction

Once you have a willing extension.xpi file, open it with a zip utility and extract the files into some directory, say, "/xpicontents/". Within the /xpicontents/ directory there should be at least a "chrome" folder, an "install.rdf" file, and a "licence.txt" file. Certain extensions may include additional and/or different files or folders. If anything looks too unfamiliar, extrapolate the method or find a different extension to use as you follow along.

Step 3: Editing the .rdf file

At this point, you have everything needed to edit the install.rdf file. Simply open the file in a text editor, make/save changes, zip the contents of /xpicontents/ into a new file, and change the file extension from .zip to .xpi. On the other hand, editing virtually any other aspect of the extension — JavaScript, CSS, (X)HTML — requires further digging.

Step 4: Hacking the .jar file

Located within the chrome folder, the "something.jar" file contains a variety of files, including JavaScript, CSS, (X)HTML, etc. Most extension editing will ultimately find its way to one of the files contained within the extension’s .jar file. So, to begin, rename the something.jar file to "something.jar.zip". Then, using a zip utility, open the something.jar.zip file and extract its contents into a unique directory, say, "/jarcontents/". Within the /jarcontents/ directory there should be at least two folders, "content" and "skin". Now, dive into the contents folder (or the skin folder, if needed) and edit, hack, and tweak the files to your heart’s content.

Step 5: Repacking the extension

After the necessary edits have been made, it is time to put humpty back together again. The first step is to replace the original contents of the something.jar.zip file with the freshly edited contents. To do this, select both content and skin folders (or whichever contains the edited material), right-click and add the selected folders to the something.jar.zip file located within the /jarcontents/ directory. Then, rename something.jar.zip back to something.jar.

At this point, you are ready to (re)package the chrome folder, install.rdf file, and license.txt file into a new .zip file, which we will call "hacked-extension.zip". To do this, simply select all three items and zip them into a new file named hacked-extension.zip. Finally, rename hacked-extension.zip to match exactly the name of the original extension, extension.xpi.

Step 6: Installation and testing

Once the necessary edits have been made, it is time to install the extension. Open Firefox, drag-and-drop the extension, and click OK to install. Restart Firefox, activate the extension, and check its functionality. Lather, rinse, repeat. It may be a good idea to test the hacked extension under a variety of different user conditions. Or not. Whatever. At this point, it’s entirely up to you. You may also want to save a copy of the original extension together with your hacked extension along with a few notes, just in case.

Well that’s it for now — thank you for your gracious attention. God bless.

References

Perishable Press WordPress Plugins

Posted on September 4, 2006 in WordPress by Jeff Starr

Perishable Press currently offers eight plugins for WordPress:

Authenticate

Authenticate Icon Authenticate is a free WordPress plugin that enables universal and/or targeted inclusion of custom content for both feeds and posts. Ideal for adding copyright information, distribution policy, thank-you messages, custom links, special offers, and much more. Custom content may be added to any location within posts or feeds — before, after, or even within post content. All options are set via admin control panel. Learn more about Authenticate, or download direct:

Download Authenticate
[ current version 1.0 | ~4KB | .zip | 1227 downloads ]


Authenticate Lite

Authenticate Lite Icon Authenticate Lite is a free WordPress plugin that enables universal and/or targeted inclusion of custom content for both feeds and posts. Ideal for adding copyright information, distribution policy, thank-you messages, custom links, special offers, and much more. Custom content may be added to any location within posts or feeds — before, after, or even within post content. All options are set in the plugin file. Learn more about Authenticate Lite, or download direct:

Download Authenticate Lite
[ current version 1.0 | ~3KB | .zip | 1215 downloads ]


Contact Coldform

Contact Coldform Icon Contact Coldform is a fully functional, highly customizable contact form for WordPress. Features full Admin Options, easy installation, and clean markup. Includes anti-spam challenge question, user carbon copies, and much more. Solid performance, secure functionality, complete flexibility. Learn more about Contact Coldform, or download direct:

Download Contact Coldform
[ current version 0.88 | ~8KB | .zip | 4081 downloads ]


BlogStats PCC

BlogStats PCC Icon BlogStats PCC is the easy way to display the total number of posts, comments, and categories, as well as several other great statistics for your WordPress-powered website. Learn more about BlogStats PCC, or download direct:

Download BlogStats PCC
[ version 2.3.0a | ~3KB | .zip | 2530 downloads ]


Category LiveBookmarks Plus

Category LiveBookmarks Icon Category LiveBookmarks Plus is the easy way to provide complete autodiscovery functionality and “Post Smart” feed links to your WordPress-powered website. Learn more about Category LiveBookmarks Plus, or download direct:

Download Category LiveBookmarks Plus
[ version 2.3.0b | ~7.3KB | .zip | 3013 downloads ]


Head MetaData Plus

Head MetaData Icon The Head MetaData Plus plugin is designed to complete a site’s head construct by including some of the more obscure meta tags, such as "author" and "copyright". This was one of the original plugins for customizing meta tags. Learn more about Head MetaData Plus, or download direct:

Download Head MetaData Plus
[ version 1.0 | 3.3KB | .zip | 2067 downloads ]


AddMySite (AMS)

AddMySite Icon AddMySite makes it easy for your visitors to add your site to the social bookmarking service of their choice. Users may bookmark your site at over 25 different social bookmarking services, which are concisely presented via drop-down menu or as a customizable list. Learn more about AddMySite, or download direct:

Download AddMySite (AMS)
[ version 0.88 (widgetized) | ~5KB | .zip | 2012 downloads ]


Export Blogroll for del.icio.us

Export Blogroll Icon The Export Blogroll for del.icio.us plugin simplifies the process of transferring the links in your WordPress Links Manager (aka the Blogroll) to your del.icio.us social bookmarking account. The plugin provides several export options, including category-specific export. Learn more about Export Blogroll, or download direct:

Export Blogroll for del.icio.us
[ version 1.0 | ~4KB | .zip | 1836 downloads ]


Fun with Downlevel Conditional Comments

Posted on September 4, 2006 in Function, Structure by Jeff Starr

Ever since Internet Explorer 5 (IE5), Microsoft has included browser support for "downlevel conditional comments," a non-scripted method of browser detection. Downlevel conditional comments (DCC) are a useful tool for targeting directives to specific versions of Internet Explorer. Downlevel conditional comments consist of an opening statement and a closing statement. Taken together, the statements enclose markup, CSS, JavaScript, or any other element typically included within an (X)HTML document. The DCC may be placed anywhere within the document and executes its contents only for the version(s) of IE specified. This technique is useful for delivering IE-specific stylesheets exclusively to specific versions of IE. Unfortunately, the last line of a DCC may invoke validation errors, but fortunately, there is a fix. This article describes the code and techniques used when including downlevel conditional comments in web documents.

Continue Reading