University of New Hampshire, Department of Computer Science

Information Technology 502
, Intermediate Web Design

Spring 2020

Jump to navigation

Links

Below I have collected some particularly useful links relevant to this course.

Please note that I am not responsible for the sites listed here, and I cannot guarantee the type, quality, or accuracy of the material you’ll find. In fact, I can’t even guarantee that they’ll still be there when you try. So if you find one you don’t like, just leave. If you find that one of the links leads nowhere, please let me know by e-mail at amgilder@cs.unh.edu.

Please note that I maintain this page as a service to my students, not as a marketing channel or basis for improving others’ SEO results. As such, I do not accept suggestions for other links to be included unless they come from one of my students at their official campus address. All other suggestions and requests are routinely ignored.

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.

BBEdit (for Macintosh only)

http://www.barebones.com/products/bbedit/download.html

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. Note that the initial installation will be full featured for an introductory period. Upon the expiration of that period, some of the more advanced features will be disabled unless you decide to pay the license fee. However, the features that remain in the free version should be more than enough for the purposes of this course.

FileZilla (for Windows)

http://itcourses.cs.unh.edu/assets/downloads/FileZilla_3.10.1.1_win32.zip

A free and fully capable secure FTP client for Windows.

Use this download link. If you experience problems with it, please notify me immediately. Do not use any other download links to obtain FileZilla! Many of the download servers that make FileZilla available (including some used by the official FileZilla web site) attach extra (and typically unwanted) software to the installation files.

This download may not be the latest version of the software. When you have installed it, you should be notified when you first launch it if there is a newer version available. Things change frequently on the web, so there are no guarantees. However, in my experience, allowing the updater to proceed with the update does not include any of the extra/unwanted software that piggybacks on many of the other downloads.

FileZilla (for Macintosh)

http://itcourses.cs.unh.edu/assets/downloads/FileZilla_3.11.0.2_macosx-x86.app.tar.bz2

A free and fully capable secure FTP client for Macintosh.

Use this download link. If you experience problems with it, please notify me immediately. Do not use any other download links to obtain FileZilla! Many of the download servers that make FileZilla available (including some used by the official FileZilla web site) attach extra (and typically unwanted) software to the installation files.

This download may not be the latest version of the software. When you have installed it, you should be notified when you first launch it if there is a newer version available. Things change frequently on the web, so there are no guarantees. However, in my experience, allowing the updater to proceed with the update does not include any of the extra/unwanted software that piggybacks on many of the other downloads.

Notepad++ (for Windows only)

http://notepad-plus-plus.org/

A free and fully capable text editor, specifically designed for working with code such as HTML, available for Windows.

Atom

https://atom.io

A free and fully capable text editor available for Windows, Mac, and other environments. If you want a cross-platform programmer’s text editor that is powerful and customizable enough to serve your needs over the long term, this is worth checking out.

IrfanView (for Windows only)

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, but available only for Windows.

Paint.NET (for Windows only

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, 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.

Web Developer Extension for Firefox

http://chrispederick.com/work/web-developer/

A highly recommended extension to Firefox by Chris Pederick. It adds a toolbar to the browser chock full of useful tools for Web developers.

Firebug for Firefox

https://getfirebug.com/

Another highly recommended extension to Firefox. This is the tool I use during lectures to demonstrate the effects of various changes to the CSS code.

Validators

There are a variety of code validators available on the Web. They can be quite useful for ensuring that your code is written in compliance with the published standards. Please note, however, that the final word on the correctness of your code will be determined by the rules presented in lectures.

Documentation and Reference

Here is a selection of official documentation and third party references for various languages and tools that may be of interest and/or use.

Tools and 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.

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.

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. There are better tools below for designing a full color scheme.

Color Code Generator/Color Picker

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.

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 tutorial guidance at the bottom of the page, however — it uses techniques that are not consistent with current best practices.

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.

Paletton Color Scheme Designer

http://paletton.com/

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.

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.

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.

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.

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.

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.

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 HTML 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 arbitrary 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.

Web design discussions

There are many excellent sites dedicated to ongoing discussion of topics related to Web design. I have collected links to some of my favorites below.

Typography and Fonts

Typography is the art of designing effective 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.

HTML5 Character Entity Reference Chart

http://dev.w3.org/html5/html-author/charref

The World Wide Web Consortium’s chart of all the character entity references available in HTML5. Each is shown as it will be displayed, along with how it should be typed in your code.

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.

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.

DaFont

http://www.dafont.com/

A good collection of freeware, shareware and demoware fonts.

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.