Category Archives: Web Design Software

Top 5 Firefox Extensions for Web Designers

Posted on by

One of the best features of Firefox is that it can be expanded with a wide range of optional extensions. There are extensions to help with blogging, privacy, working with RSS files, or just having fun. Here’s my list of the 5 extensions I find most useful when doing web design work:

# “Web Developer”:http://chrispederick.com/work/webdeveloper/
Adds a menu and toolbar with many useful tools. Simply being able to open the CSS of a page for live editing makes it essential any web designer or developer. This extension is like an entire toolbox of extensions, and provides “numerous useful features”:http://chrispederick.com/work/webdeveloper/documentation/features/.
# “GreaseMonkey”:http://greasemonkey.mozdev.org/
Greasemonkey’s user scripts let you customize any aspect of a web page’s design or interaction. Hundreds of user scripts, for a wide variety of popular sites are available and very easy to install.
# “del.icio.us”:http://del.icio.us/help/firefox/extension/
This extension integrates “del.icio.us”:http://del.icio.us with Firefox. Del.icio.us is an excellent way to find new tips, tutorials and resources — which are important for any web designer or developer.
# “Aardvark”:http://www.karmatics.com/aardvark/
When activated, this extension outlines and provides class or id names for any element under the cursor. You can then choose to remove or isolate specific elements on a page. The most useful feature is being able to quickly view the source code of the selected element.
# “Colorzilla”:https://addons.mozilla.org/extensions/moreinfo.php?id=271
Adds an advanced Eyedropper, ColorPicker, Page Zoomer and other colorful goodies. With ColorZilla you can get a color reading from any point in your browser, quickly adjust this color and paste it into another program.

If you haven’t tried it already — Firefox is free, easy to use, and a relatively small download.

Comic Gallery 1.1

Posted on by

I’ve made a few updates to my Comic Gallery Script, and a new version is now available. ComicGallery 1.1 includes navigation links for going to the first or last image in the gallery, as well as enhanced XHTML output to allow you to replace the text navigation with custom images. You can see an example of Comic Gallery 1.1 at RealmOfAtland.com

Download
ComicGallery.zip

Be sure to check the Comic Gallery Tutorial for help with setting up and configuring the script.

New Features

The First and Last links are controlled by the variable:

$firstlast=1;
The default setup for Comic Gallery includes start and last links for navigating back and next through the images. To this option off, change this line to:
$firstlast=0;

Additional <span> tags have been added to the generated markup for use with CSS Image Replacement techniques. This will allow you to replace the text navigation for the gallery with your own custom images.

This zip file includes some sample images for you to get started.

Download
cg_nav.zip

Setting up your navigation images

Unzip the file and upload the files to a directory on your website as follows:

  • YourWebsiteFolder
    • comicgallery.php
    • example.php
    • kubrick.css
    • images
    • kubrick
    • cg_nav
      • back.gif
      • back_on.gif
      • back_off.gif
      • first.gif
      • first_on.gif
      • first_off.gif
      • last.gif
      • last_on.gif
      • last_off.gif
      • next.gif
      • next_on.gif
      • next_off.gif

Add this CSS to your page (eg. example.php) and your gallery will display images for the First, Back, Next and Last links: 

/* CG nav setup */
#cg_nav1 { height: 50px; width: 400px; margin: 0 auto; }
#cg_nav1 a, #cg_nav1 span {   height: 50px; width: 100px; float: left; background: #fff top left no-repeat; }
#cg_nav1 a span, #cg_nav1 span span, #cg_nav1 .cg_divider { display: none; }

/* CG nav images */
a#cg_first { background: url(cg_nav/first.gif); }
a#cg_back { background: url(cg_nav/back.gif); }
a#cg_next { background: url(cg_nav/next.gif); }
a#cg_last { background: url(cg_nav/last.gif); }

/* CG nav rollover images */
a#cg_first:hover { background: url(cg_nav/first_on.gif); }
a#cg_back:hover { background: url(cg_nav/back_on.gif); }
a#cg_next:hover { background: url(cg_nav/next_on.gif); }
a#cg_last:hover { background: url(cg_nav/last_on.gif); }

/* CG nav unavailable images */
span#cg_first { background: url(cg_nav/first_off.gif); }
span#cg_back { background: url(cg_nav/back_off.gif); }
span#cg_next { background: url(cg_nav/next_off.gif); }
span#cg_last { background: url(cg_nav/last_off.gif); }

Replace the cg_nav files with your own, but be sure to adjust the height and width settings in above CSS if you have different size images. You might also consider using CSS Sprites to reduce the number of image files needed for your gallery’s navigation.

Comic Gallery Script

Posted on by

ComicGallery was originally created for a subscription based webcomic site I worked on in 2004. I’m making it available under the GNU General Public License, which means it’s free software and you can use it on your own site.

This script will automatically create a gallery from a directory of images that you specify. It’s easy to add to existing webpages, and easy to modify the configuration of the script to produce a variety of gallery styles suitable for webcomics as well as other types of artwork.

Other scripts for creating more complex types of galleries exist, but they often take longer to setup, administer, and integrate into your site. This script can be included on your page with a single line of code, and uses minimal, standards based markup (XHTML) that can be easily styled with CSS to match the rest of your website.

Optional features include:

  • Start with the first or last image in the directory
  • Display navigation above or below images
  • Back and Next links
  • Back and Next arrows
  • Direct links to each image
  • Configurable number of links per line
  • Customizable dividers between links
  • Display the copyright owner
  • Display a link to your Creative Commons License

Download
ComicGallery v1.0

The default settings for the script will create a gallery from files in an “images” subdirectory. You can easily change this and other script settings to suit your needs.

Let me know if you end up using the script on your site, and feel free to suggest any improvements.

Update

Comic Gallery Tutorial including an example PHP webpage, CSS file, supporting images for the CSS, and a directory with 10 sample comic images.

Comic Gallery version 1.1 is now available.

Favlets for Web Designers

Posted on by

I’ve updated my list of favlets for web designers. Favlets (also known as Bookmarklets) are short javascript commands stored in your browser’s favourites (also called bookmarks). These scripts can be used to get information about a webpage, or change the way it is displayed in your browser. They can be particularly useful when testing and debugging a website you’re working on.