Software downloads

We will mention and use several different software applications throughout this semester. I have tried to limit the list below to products that are available for free. However, policies do change, so if you find one that is no longer free, please let me know.

gedit

http://projects.gnome.org/gedit/
A free and fully capable text editor available for Windows, Mac and Linux systems.

FileZilla

http://filezilla-project.org/
FileZilla is an alternative to SSH Secure Shell Client that is available for Windows, Macintosh and Linux systems. It supports secure FTP and should be relatively intuitive.

SSH Secure Shell Client

http://www.wm.edu/offices/it/a-z/software/windowsweb/sshsecure/index.php
We will be using SSH Secure Shell Client to establish secure FTP sessions to manipulate our files on the server host. Although we will not be using it as such, it can also be used to establish secure terminal emulator sessions. Since you will be using this software non-commercially, the license agreement allows you to download and install it for free.

CyberDuck

http://cyberduck.ch/
CyberDuck is an alternative to SSH Secure Shell Client for Mac users. It supports secure FTP and should be relatively intuitive.

Firefox

http://www.mozilla.com/
Firefox is a very popular, open-source Web browser that is available for Windows, Macintosh and Linux.

Web Developer Extension for Firefox

http://chrispederick.com/work/firefox/webdeveloper
A highly recommended extension to Firefox by Chris Pederick. It adds a toolbar to the browser chock full of useful tools for Web developers.

Microsoft Internet Explorer

http://www.microsoft.com/windows/ie/downloads/default.mspx
Internet Explorer is currently the most widely used browser on the Web (by far). In all likelihood there’s already a copy installed on any Windows or Macintosh computer you use. However, it is possible to download and install the latest version manually.

Google Chrome

http://www.google.com/chrome
Chrome is a popular alternative browser from the folks at Google.

Apple Safari

http://www.apple.com/safari/
Safari is a popular alternative browser from the folks at Apple.

Opera

http://www.opera.com/
Opera is a small, fast, but very capable browser that has a limited but energetic following. It has traditionally been an early adopter of standards.

Araneae

http://www.ornj.net/araneae/
If you’re looking for a good, free text editor within which to write your XHTML and CSS on Windows, you may want to try Araneae.

Crimson Editor

http://www.crimsoneditor.com/
Another good, free text editor for Windows users.

ConTEXT Programmer’s Editor

http://www.context.cx/
Yet another good, free text editor for Windows users.

TextWrangler 2 (for Macintosh)

http://www.barebones.com/products/textwrangler/index.shtml
A highly regarded (and free) text editor for writing code on the Macintosh. TextEdit should work fine for this course (once you set the preferences to create new documents as text files), but this option may appeal to those Mac users looking for somewhat greater flexibility.

IrfanView

http://www.irfanview.com/
Although it is technically an image viewer, IrfanView has enough capabilities to do the basic resizing and file format conversions you will most likely need for your work in this course. It’s free and easy to use.

Paint.NET

http://www.getpaint.net/
If you want something free that is more capable than IrfanView, especially with respect to the creation of images, try Paint.NET.

The GIMP

http://www.gimp.org/
If you want something free that is significantly more full-featured than IrfanView and Paint.NET, you may want to try the GNU Image Manipulation Program (GIMP). It is roughly comparable to Adobe Photoshop in terms of features, but it also shares a rather steep learning curve with Photoshop.

MSN TV Viewer

http://developer.msntv.com/Tools/MSNTVVwr.asp
The MSN TV Viewer is a Windows/Mac program that emulates the appearance and behavior of the MSN TV browsing environment. Use it to test your pages if you expect portions of your audience to be MSN TV users.

Download.com at c|net

http://www.download.com/
If you’re looking for freeware, shareware or demo software that is not listed above, I’d recommend checking to see if it’s available at Download.com.

Colors

Colors on the Web can be quite confusing to new Web designers. Below you will find links to several of the color-related resources I have found useful in my own experiences.

Hex HTML Color Codes

http://html-color-codes.info/
Click swatches of commonly used colors to see their hexadecimal color numbers, or use an interactive color mixer to find the perfect color for your needs. Be careful with the short tutorial guidance at the bottom of the page, however — it uses techniques that have been deprecated by XHTML 1.0.

Wellstyled Color Scheme Generator 2

http://www.wellstyled.com/tools/colorscheme2/index-en.html
An interactive tool for generating standard types of color schemes for use in Web sites. Supports a variety of scheme types drawn from accepted color theory. Allows you to fine tune the results and even see how they would look to users with various types of colorblindness.

VisiBone Color Chart

http://html-color-codes.com/
See the swatches for the entire browser-safe palette simultaneously each with its hexadecimal code clearly displayed. This tool is most useful for picking an individual color. If you are trying to develop a color scheme consisting of multiple coordinated colors, try the Color Lab. If you find this resource helpful, there is a free “pop-up” version that you can download and install on your own computer.

ColorPicker

http://www.free-webmaster-tools.com/colorpicker.htm
This is an online color picker that lets you pick from an extensive palette of swatches or custom mix your own specialty colors.

Colour Contrast Check

http://www.snook.ca/technical/colour_contrast/colour.html
Jonathan Snook’s online tool for comparing the degree of contrast between specified foreground and background colors. It is important to ensure that the color choices you make provide sufficient contrast to remain readable to users with colorblindness or grayscale monitors. Also works as a great dynamic color mixer for experimenting with RGB colors.

MySpace Color Chart

http://myspace.nuclearcentury.com/colorchart.php
MySpace offers this color chart as part of its layout assistance. It offers a nice array of commonly used colors as both swatches and their color numbers.

VisiBone Webmaster’s Color Lab

http://www.visibone.com/colorlab/
Point and click on a color wheel arrangement of swatches in the browser-safe palette to visually select and compare colors for a color scheme. Each selected color’s corresponding hexadecimal code (along with other information) is shown clearly. This tool is best for developing color schemes consisting of multiple colors. If you are simply trying to pick a single color, try the Color Chart instead.

Tools & resources

There is a tremendous wealth of free and useful tools and resources for Web authors available on the Web. Some of those I have found most accurate and useful follow.

Resize Pic

http://resizepic.com/
A simple online tool that allows you to upload and resize image files in JPEG, GIF or PNG format.

Sitepoint HTML Reference

http://reference.sitepoint.com/html
A comprehensive reference for XHTML.

Sitepoint CSS Reference

http://reference.sitepoint.com/css
A comprehensive reference for CSS.

The W3C Markup Validation Service

http://validator.w3.org/
The World Wide Web Consortium’s free tool for checking the validity of XHTML code. Note that this validator may be more or less specific in its guidance than the course coding requirements.

The W3C CSS Validation Service

http://jigsaw.w3.org/css-validator/
The World Wide Web Consortium’s free tool for checking the validity of CSS code. Note that this validator may be more or less specific in its guidance than the course coding requirements.

VisiBone Table of HTML Tags

http://html-tags.info/
An accurate and up-to-date table listing all the tags in HTML 4.01 and their attributes. Since XHTML 1.0 uses the same tags as HTML 4.01, the material in this chart is applicable to this course. However, since we are learning the strict form of XHTML 1.0, you will need to avoid using any items marked as deprecated in the chart. Be sure you understand the meaning of the symbols used in the chart as explained in the key at the bottom! If you find this resource helpful, there is a free “pop-up” version that you can download and install on your own computer.

Creative Commons Find

http://creativecommons.org/find/
A search engine specialized for locating resources, including images, audio, text and video, that are freely available for online use. Also provides links to other useful resource clearinghouses.

Stock.xchng

http://www.sxc.hu/
A community of photographers who post their photographs to share with others free of charge. Over 150,000 free photos available as of this writing.

FotoSearch

http://www.fotosearch.com/
If you want to get a sense of what types of images are available to professionals (with budgets that can afford the licensing fees), check out this site which combines stock images from a multitude of publishers into a single, easily searchable site. All of these images require licensing fees of some sort before you can use them, so you probably won’t find that you use them in your projects for the course, but it’s nice to know what’s out there.

iStockPhoto

http://www.istockphoto.com/
An extensive collection of royalty-free images. Note that you must pay a small fee to obtain the right to use each image, but once that fee has been paid there are no continuing royalties. Registration required.

Web standards

The Web as we know it would not exist without some degree of standardization. And all of the standards documents we will reference throughout the semester are publicly available on the Web. When you want to resolve a technical question about what can (and cannot) be done with a particular Web technology, the appropriate standards document is often a great place to start.

The World Wide Web Consortium (W3)

http://www.w3.org/
The vast majority of the Web standards are published by the World Wide Web Consortium (a.k.a. W3 or W3C). You will find a tremendous wealth of information about the Web available from their home page. The specific standards documents that are most pertinent to our needs, however, are listed separately below.

The Web Standards Project (WaSP)

http://www.webstandards.org/
WaSP is a leading advocate for the adoption and support of Web standards of all types. Their Web site is a useful resource for educating yourself about Web standards.

A List Apart

http://www.alistapart.com/
This online magazine “explores the design, development, and meaning of web content, with a special focus on techniques and benefits of designing with web standards” and is an excellent resource for aspiring Web designers and developers.

Developing with Web Standards

http://www.456bereastreet.com/lab/developing_with_web_standards/
An article by Roger Johansson explaining why a Web designer should use Web standards and presenting standards-based techniques.

Cascading Style Sheets (CSS)

There are many excellent resources on the Web to help you learn and explore Cascading Style Sheets (CSS). As I encounter those I consider worth special mention, I add links to the list below.

Selectutorial: CSS Selectors

http://css.maxdesign.com.au/selectutorial/index.htm
A well-written and far-reaching tutorial specifically focused on CSS selectors.

CSS Zen Garden

http://www.csszengarden.com/
There is no better way to get a sense of the power and flexibility provided by CSS than simply spending a few minutes at this site. They provide a relatively simple XHTML page and invite CSS professionals to write style sheets that will present that XHTML in different ways. As you explore the links, keep in mind that each one is the result of applying different style sheets to the same underlying XHTML! You may find it easier to explore the hundreds of collected entries using the Comprehensive Design List.

CSS Beauty

http://www.cssbeauty.com/
A showcase of real-world CSS designs.

Unmatched Style

http://www.unmatchedstyle.com/
A gallery of real-world CSS designs for inspiration.

CSS Vault

http://cssvault.com/
A gallery of real-world CSS designs combined with a collection of CSS-related articles.

Complexspiral Demo

http://www.meyerweb.com/eric/css/edge/complexspiral/demo.html
A simple demonstration by Eric Meyer intended to show off what one can accomplish with CSS1 and educate Web designers with respect to how to achieve professional formatting effects.

Mandarin Design

http://www.mandarindesign.com/
This site offers a wealth of useful information on CSS and blogs, including a great selection of narrowly defined “copy-and-paste” tutorials for achieving advanced design effects.

css-discuss.org

http://www.css-discuss.org/
A popular mailing list for Web professionals dealing with CSS and related subjects.

CSS Panic Guide

http://www.thenoodleincident.com/tutorials/css/index.html
This is a well thought-out and nicely presented collection of links to a short list of very useful CSS resources.

Little Boxes

http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html
Pick your desired layout graphically and see some CSS that you might use to produce it.

Workarounds

http://www.thenoodleincident.com/tutorials/box_lesson/workarounds.html
A list of commonly encountered (often browser-specific) CSS problems and their workarounds (where available).

The Layout Reservoir

http://www.bluerobot.com/web/layouts/
Pre-fab CSS for common two- and three-column layouts.

CSS Layout Techniques: For Fun and Profit

http://glish.com/css/
A superb resource for honing your understanding of CSS layout techniques and learning how to the transition from table-based layouts.

Mike Rundle: Accessible Image Replacement

http://phark.typepad.com/phark/2003/08/accessible_imag.html
Presents a very simple and widely supported technique for replacing text with images (presumably that represent the same text in a graphical manner) using CSS.

Image Replacement - No Span

http://www.moronicbajebus.com/playground/cssplay/image-replacement/
Presents an alternative technique (commonly called Leahy/Langridge Image Replacement) for replacing text with images using CSS.

Replacing Text By An Image

http://wellstyled.com/css-replace-text-by-image.html
Yet another method for replacing text with images using CSS. This technique has the advantage of making the text visible any time the image meant to replace it is not displayed.

Revised Image Replacement

http://www.mezzoblue.com/tests/revised-image-replacement/
A page by Dave Shea dedicated to presenting various CSS techniques for replacing textual content with images. The pros and cons of each technique are briefly summarized and sample code presented.

Sliding Doors of CSS

http://www.alistapart.com/articles/slidingdoors
A page by Douglas Bowman describing the use of layered background images. Although the focus of this article is on using this technique for better looking navigation tabs, the technique is more generally useful. For additional variations, check out Part II of this article.

Floatutorial

http://css.maxdesign.com.au/floatutorial/
A series of short, clear tutorials on using the CSS float property for a variety of common tasks.

Creating Liquid Layouts with Negative Margins

http://www.alistapart.com/articles/negativemargins
An article by Ryan Brill presenting a technique for developing liquid CSS layouts using the float property and negative values for the margin property to allow properly structured XHTML code.

CSS Design: Creating Custom Corners & Borders

http://www.alistapart.com/articles/customcorners
An article by Søren Madsen describing techniques for achieving interesting and professional borders and corners.

Accessibility

Writing Web pages that are fully accessible offers a host of benefits. Not only does it increase your potential audience by including those with disabilities, it also includes those with different browsing needs and preferences. This includes users of text-only browsers, handheld computers, cell phones. It also includes automated browsing tools such as search engine gatherers. For certain types of Web sites, accessibility may even be required by law. Use the resources below to educate yourself on accessibility issues and test the accessibility of your pages.

Web Accessibility Initiative (WAI)

http://www.w3.org/WAI/
The World Wide Web Consortium’s Web Accessibility Initiative is the best place to begin educating yourself on Web accessibility. In particular, the links to resources found on the home page are invaluable.

Web Content Accessibility Guidelines (WCAG)

http://www.w3.org/TR/WAI-WEBCONTENT/
The World Wide Web Consortium’s official recommendation for implementing accessible Web pages, presented as a series of prioritized checkpoints.

Techniques for Web Content Accessibility Guidelines

http://www.w3.org/TR/WAI-WEBCONTENT-TECHS/
The World Wide Web Consortium’s recommended techniques for implementing accessible Web pages. It is probably best to gain a basic understanding of the Web Content Accessibility Guidelines before tackling this document.

Section 508 Homepage

http://www.access-board.gov/508.htm
Section 508 is the federal law dealing with Web accessibility. Use this homepage as a starting point for educating yourself about the legal aspects of accessibility.

Dive into Accessibility

http://www.diveintoaccessibility.org/
A free online book by Mark Pilgrim offering practical tips for developing more accessible Web sites.

Watchfire WebXACT

http://webxact.watchfire.com/
This is a free online service to help you test the accessibility of individual Web pages. It analyzes your use of XHTML and brings accessibility issues to your attention. It also comments on code quality and potential privacy issues.

Cynthia Says

http://www.cynthiasays.com/
This is a free online service to help you test the accessibility of individual Web pages. It analyzes your use of XHTML and brings accessibility issues to your attention.

WAVE

http://wave.webaim.org/index.jsp
This is a free online service to help you test the accessibility of individual Web pages. You can test pages that have already been published on the Web by submitting their URL, uploading the page from your hard disk, or using a downloadable toolbar for your browser.

Hermish

http://www.hermish.com/
This is a free online service to help you test the accessibility of individual Web pages. You can decide which accessibility priority level you wish to meet and/or check against Section 508 requirements. Hermish also offers the ability to test the accessibility of aribtrary combinations of foreground and background colors.

Colorblind Web Page Filter

http://colorfilter.wickline.org/
A free tool to help Web designers approximate what their designs will look like to users with various types of color blindness. Keep in mind, however, that since every individual’s vision is unique, this tool can offer only approximations.

GrayBit

http://graybit.com/main.php
Another handy tool for judging whether your design has sufficient contrast for colorblind users. Give it the URL and it shifts most of the page colors to grayscale before displaying it.

Using Accesskeys - Is it worth it?

http://www.wats.ca/show.php?contentid=32
An exploration of the pros and cons of using the accesskey attribute.

Usability

Fundamentally, all Web sites are interfaces to information. That information must be carefully organized and the interface must be usable in order for the site to make sense to the user. If a site does not make sense to its users, they will simply not use it. The sites listed below will help educate and enlighten you with respect to these essential components of Web design.

Boxes and Arrows

http://boxesandarrows.com/
A large and professional site dealing with all aspects of information architecture and user interface design.

Useit.com

http://www.useit.com/
Jakob Nielsen is a widely recognized, and occasionally controversial, thinker and expert in the field of Web usability. His Useit Web site is a treasure trove of educational resources in this area.

Design resources

The links below lead to general resources for Web designers. They include online magazines, inspiration galleries and subject clearinghouses, articles and pretty much anything else that doesn’t fit under any of the other categories on this page.

W3Schools Online Web Tutorials

http://www.w3schools.com/
A huge collection of tutorials covering all aspects of Web design and development. This is a great resource for both beginning and experienced Web designers.

Website Tips

http://www.websitetips.com/
An educational resource for Web designers, including tutorials, articles and links.

Code Style

http://www.codestyle.org/index.shtml
Code Style is dedicated to acting as a resource to Web designers utilizing open standards.

StyleGala

http://www.stylegala.com/
An online publication dealing with Web design and standards. Includes an extensive gallery useful for design inspiration.

The Absolute Minimum Every Software Developer…

http://www.joelonsoftware.com/articles/Unicode.html
The full title of this article by Joel Spolsky is The Absolute Minimum Every Software Developer Absolutely, Positively Must Know About Unicode and Character Sets (No Excuses!), which pretty much says it all. Since it was written for programmers, it’s fairly technical, but if you’re interested it provides very useful background.

The Trouble with EM ’n EN (and Other Shady Characters)

http://www.alistapart.com/articles/emen
An article by Peter K. Sheerin that explains the technical aspects and proper use of many commonly useful character entities.

Character References Explained

http://lachy.id.au/log/2005/10/char-refs
An article from Lachy’s Log that explains everything you’d ever want to know (and then some) about character entities in XHTML (which is discussed under the somewhat broader category of XML.)

Hacks & workarounds

The process of Web design often requires the use of tricks or fixes to deal with various browser bugs, deficiencies and idiosyncracies. The resources below offer guidance with how to understand the problems and implement fixes.

Position is Everything

http://www.positioniseverything.net/
A site dedicated to explaining CSS, with a particular emphasis on working around browser bugs and idiosyncracies.

Containing Floats

http://www.complexspiral.com/publications/containing-floats/
An article by Eric Meyer explaining the correct, though sometimes unexpected, behavior that can result from floating elements within their containing blocks and how to deal with it to achieve the desired effect.

Clearing a Float Container without Source Markup

http://www.positioniseverything.net/easyclearing.html
An article explaining how to clear content beyond floated elements without adding unnecessary structural markup to your code.

Cross-Browser Variable Opacity with PNG: A Real Solution

http://www.alistapart.com/articles/pngopacity
An article by Michael Lovitt explaining the ups and downs of PNG transparency and offering a technique for making it work in a wider range of browsers. Includes some JavaScript.

Color

Color is an essential component of Web design. You will find several color-related tools listed under “Tools and resources” above. But in this section, you will find some useful resources to advance your understanding of color.

Color Matters

http://www.colormatters.com/
A comprehensive site dedicated to understanding color and its role in human perception.

Causes of Color

http://webexhibits.org/causesofcolor/
An educational site dedicated to a better understanding of color in the world around us.

Typography and Fonts

Typography is the art of designing textual communications. As such, it has a tremendously important role in the design of Web sites. I have provided links to useful tutorials, informative sites and resources for fonts.

Common fonts to all versions of Windows & Mac equivalents

http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html
A list of fonts commonly found on Windows systems along with their Mac “equivalents” and the generic font-families that should produce something similar.

TypeTester

http://typetester.maratz.com/
An incredibly useful interactive tool for comparing different fonts in various styles or simply seeing what typical body text will look like within the Web browser once the typographic settings you have in mind are applied.

VisiBone Table of HTML Characters

http://www.visibone.com/htmlref/char/ceralpha.htm
A visual listing of the most widely used HTML character entities. Each character is shown as it will appear when rendered (in a representative font) and both the alpha and numeric forms of the character entity are listed below each character.

XHTML Character Entity Reference

http://www.digitalmediaminute.com/reference/entity/index.php
A clearly organized and visually presented chart of XHTML character entities.

Type Terms and Fundamentals

http://www.will-harris.com/type-fun.htm
A single page introduction to the essential typographic concepts you’ll need as a Web author.

Typographic

http://www.rsub.com/typographic/
It can be a little difficult to use at times, but this site is full of useful information. There are far more terms in the glossary than anyone but a professional typographer is ever likely to need, and a gallery of ideas on how you might employ type to better effect. The studies provided are definitely worth a look!

Choosing and Using Type

http://www.will-harris.com/use-type.htm
This is an excellent article to guide you in choosing the appropriate typeface for a given task. It doesn’t attempt to tell you which typeface to use, but rather how best to arrive at an appropriate choice.

Font Size

http://css-discuss.incutio.com/?page=FontSize
Links to several other pages that discuss font sizing choices and techniques.

Relative Font Sizes and Inheritance

http://www.maxdesign.com.au/presentation/relative/
An article by Russ Weakley explaining the ins and outs of relative font sizing techniques.

Fonts, Font Resources and Programs

http://www.websitetips.com/fonts/
Website Tips’ main page for fonts and font-related resources. A wealth of fonts and information is available from this starting point.

Type: The Extra Mile

http://www.mezzoblue.com/archives/2004/01/18/type_the_ext/
An article by Dave Shea explaining how to optimize anti-aliased text by adjusting the kerning.

DaFont

http://www.dafont.com/
A good collection of freeware, shareware and demoware fonts.

Wanted Fonts

http://www.wantedfonts.com/
A growing collection of freeware, shareware and demoware fonts. Well categorized and also alphabetized which is particularly useful when you know what you want. Offers the ability to preview text of your choosing in a font before downloading it.

1001 Fonts

http://www.1001fonts.com/
A large collection of freeware, shareware and demoware fonts. Well-organized and searchable. The home page offers links to some high-quality sources for commercial fonts if you want to spend some money.

Fontastic!

http://fontastic.i-n.net/fontastic/index.html
If you are looking for the “perfect” font for a particular job but have little or no budget, try this index of freeware and shareware typefaces. Note that while all the typefaces listed in this index are free to download, they are not necessarily free to use. Be sure you understand the licensing agreements of any typeface you intend to use. Also, keep in mind that most of these fonts are not likely to be installed on an average user’s machine, so they’re probably best-suited to use in graphics. If by some chance you can’t find what you seek here, try the links page for even more resources!

Identifont

http://www.identifont.com/
A great set of tools. One attempts to identify a font by asking you a series of questions about it. This can be tremendously useful when trying to match a font in an existing image. Another lets you enter a font name and shows you a sample. There is also a collection of downloadable fonts available.

MyFonts

http://www.myfonts.com/
This site sells fonts, many at quite reasonable prices. They offer a font search tool as well as previews of the fonts in their extensive inventory.

Georgia & Verdana

http://www.will-harris.com/verdana-georgia.htm
Georgia and Verdana are the two most widely installed typefaces designed especially for on-screen using. This article provides you with a better understanding of why these two fonts work so well for the Web.

Code Style Font Survey Results

http://www.codestyle.org/css/font-family/sampler-CombinedResultsFull.shtml
Combined results of a survey of which fonts are installed on users’ systems. Includes results for Windows, Macintosh and Linux users. Useful for deciding the likelihood that fonts you choose will be available to users.

Microsoft Typography - Fonts and Products

http://www.microsoft.com/typography/fonts/default.aspx
Information from Microsoft about which fonts are typically included and installed with which products. Useful for estimating the likelihood of specific fonts being available based upon the popularity of specific software products.

Legal issues

Web designers must understand certain aspects of the law, especially copyright and accessibility issues. The links below will help educate you and/or get you thinking about the possibilities.

U.S. Copyright Office

http://www.copyright.gov/
A great resource for information about the copyright laws in the United States.

Creative Commons

http://creativecommons.org/
Creative Commons is a non-profit organization dedicated to assisting creators with the legalities of publishing their works in a more open and accessible manner than is commonly utilized. They also provide assistance in locating works that have been published under this more permissive agreement.

Last modified: January 2, 2013

© 2001-2012, A. Michael Gildersleeve

Contact the author at mike.gildersleeve@unh.edu