ITD 110 web design tools

This page contains links to information and tools you may find useful. It is by no means an exhaustive list. If you find something you’d like to share with the class, please let me know so I can include it.

Web resources · Browsers · Editors · HTML · CSS · Wireframing · Typography · Colors · Design · Graphics · Accessibility · Miscellaneous · Bibliography

Web resources

Browsers

One goal of this course is to ensure compatibility of web pages across multiple browsers, not just Internet Explorer. Here are a few of the more common ones, along with some helpful developer tools:

Information about browsers

 

Editors

Here are some free text editors which are HTML-aware, with lots of additional features to help you as you create and edit your code.
These are much more useful than Microsoft’s Notepad. Many of them are also available in “portable” versions, which means you can run them from a USB flash drive without needing to install them under Windows. You are welcome to use any of these for your class assignments; WYSIWYG editors such as Dreamweaver and Expression Web are not acceptable for our class.

Windows users have lots of choices!

  • PSPad — one of my favorites
  • RJ TextEd
  • Notepad++— very popular. For Windows, download the .EXE version. Also available in a portable version (no Windows installation process needed). Highly recommended.
  • Atom — Up-and-coming contender, “A hackable text editor for the 21st Century”
  • Sublime Text — “A sophisticated text editor for code, markup and prose”. (It’s not a free product but you c an use the free trial indefinitely,(
  • Komodo Edit — another versatile, open-source editor, with extensive language support. (Lots of great features, but with more of a learning curve.)
  • Arachnophilia — this is Java-based, so will run on most platforms
  • jEdit — this is Java-based, so will run on most platforms
  • Eclipse IDE — this is a full-blown Interactive Development Environment — lots of useful features, but more involved to set up and learn
  • NetBeans IDE — another free multi-language IDE
  • Vim — if you like the Unix/Linux vi editor, here’s a version for Windows with a GUI. (It’s a bit arcane, but allows you to accomplish a lot with minimal keystrokes.)

For Mac users, the choices are more limited, and I have no personal experience. But here are some possibilities to check out.

  • MacOS includes a program called TextEdit. It appears to be roughly comparable to Windows Notepad in its lack of functionality.
  • Arachnophilia and jEdit, listed above, are written in Java, and should therefore run under Mac OS. NetBeans IDE, above, is also available for MacOS.
  • Atom — Up-and-coming contender, “A hackable text editor for the 21st Century” (also available for Windows)
  • Sublime Text — “A sophisticated text editor for code, markup and prose”. (It’s not a free product but you c an use the free trial indefinitely,(
  • BBEdit — well-known but expensive
  • Komodo Edit —a free open-source editor (also available for Windows)
  • Smultron — a free open-source editor

 

HTML & XHTML

 

Cascading Style Sheets

 

Wireframe Resources

All of the web-based services listed here either are totally free or else offer a free level of service (for which you may have to hunt around on their site to find it). But a wireframe is just a diagram, and you can use any graphics package (although something like Visio or OmniGraffle is better than something like PowerPoint)
or even old-fashioned paper and pencil.

 

 

Typography

 

Colors

 

General Design Issues

 

Graphics — Tools & Pix

  • In addition to the resources listed here, the Internet is a treasure trove of sites offering stock photos and images, icons, background textures, etc. A list would be too volatile to keep up-to-date, so use your favorite search engine.
  • Easy Thumbnails — another free tool for resizing image files
  • JR Screen Ruler — a handy tool to measure the size in pixels of anything on your screen
  • Free Ruler — another free screen ruler, this one for MacOS
  • Screen Calipers — another handy tool to measure the size in pixels of anything on your screen
  • PMeter — another handy tool for measuring pixels and picking colors
  • The GIMP — a free open-source image manipulation program
  • Inkscape — a free open-source vector graphics editor for working with files in SVG format
  • Paint.net — another free open-source program for image manipulation and photo editing
  • Pixlr — free on-line image editor
  • IrfanView — a free image viewer with extensive image manipulation capabilities
  • FavIcon from Pics — web tool for creating favicons from regular images
  • Favicon Generator — another free web tool for creating favicons from regular images

 

Accessibility

 

Miscellaneous Tools & Notes

 

Bibliography

There are so many good (and not-so-good) books available on all these subjects. Check out your favorite book store! Note that electronic versions of many technical books can be viewed on-line via the Safari database on the NOVA Libraries web site. (Use your MyNova credentials to login.)

Last revision, 3 October 2019.

© 2002-2019 Tom Gutnick. All rights reserved.