Tools of the Trade

CODE EDITORS

A lot of people start designing web pages only to be discouraged to the point of giving up by the editor they’re using. There are literally dozens of text editors out there ranging all the way from the simple Windows Notepad to the very complex Emacs and Vim.

It is important to use an editor that you are comfortable with. If you like the simplicity of Notepad and don’t care about syntax highlighting, then use Notepad. If you want your attributes and your values different colors from your selectors and your properties, then something designed for writing code is probably best for you. The most important to look for in a text editor is that it is capable of saving in plain text. Word processing programs like Word and OpenOffice generally do not save files as plain text. Plain text files usually have the .txt extension and do not include any formatting like bold/margins, etc.

The editors suggested below are just the tip of the iceberg. All of these programs provide syntax highlighting which makes it much easier to write HTML and other code. There is much more than just syntax highlighting however: everything from debugging to in-place editing to collaborative editing is possible with the following tools. Most of the programs below are free.

Notepad++ For Windows

notepadplusplus

Notepad++ is available at The Notepad++ Downloads Page (select ‘Download Notepad++ executable files’ and then download ‘npp-x.x.x.Installer.exe’). It features support for HTML, CSS, JavaScript, PHP, and many other languages. To turn on syntax highlighting, save your file with the proper file extension.

TextWrangler For Mac

textwrangler

TextWrangler is a product released for free by BareBones software, makers of the popular BBEdit text editor. TextWrangler is available at The TextWrangler Download Page. It is similar in features to Notepad++.

SubEthaEdit For Collaborative Editing on the Mac

subethaedit

SubEthaEdit is not free but provides an interesting feature not easily found in any other editor to date: collaborative editing. You and a friend or coworker can view and modify a document at the same time over a network or Internet connection. It also provides syntax highlighting and easily integrates into Fetch (more on Fetch later).

You can download old versions of SubEthaEdit for free, and there is an educational discount on the most current version. More information is available at the SubEthaEdit Home Page.

Emacs For (Almost) All Operating Systems

emacs

Emacs is popular in the computer science industry as an “all-in-one” development environment. It is billed as “the world’s most customizable editor” because so much of its interface and how it handles documents can be changed by the user using a functional programming language called Lisp. Emacs is available for many operating systems and provides a consistent user experience across them all. Emacs does, however, have a relatively large learning curve and is generally not recommended for the beginner or the faint of heart.

More information on the GNU Emacs project can be found at the GNU Emacs Homepage. You can download Emacs for Windows here. A popular port of Emacs for Mac is called “Aquamacs” and can be found here.

IMAGE EDITORS

Web design isn’t all about code! To make a visually appealing Web site, you might find yourself in need of an image or two.

Photoshop For Mac and Windows

The industry-standard in image editors on Windows and Macintosh machines is Adobe’s Photoshop. Luckily, we have a workshop with online curricula for Photoshop. The problem, however, is that Photoshop is prohibitively expensive for some or simply offers more features than what is needed for basic image creation and editing.

The GIMP / GIMPShop For Mac, Windows, Linux, and UNIX

The GIMP (GNU Image Manipulation Program) is a free, open-source alternative to Photoshop. When coupled with GIMPShop, a variant that makes GIMP behave much like Photoshop, you can create Photoshop-quality images without the cost.

You can download GIMP from GIMP.org. You can download GIMPShop from GIMPshop.com.

Online Image Editors

If you are just looking for basic crop/resize functionality with a few added effects and don’t want to download and install (or learn how to use) a heavy image editing program, then you may consider looking at one of the many online image editors. Most of them are free and provide many of the features that most web designers need to get started.

A very small list of Online Image Editors:

(Please note that we in no way support or endorse any of these companies or products. Use them at your own risk.)

SFTP PROGRAMS FOR MANAGING FILES

Once you have some content to put on your Web site, you need to transfer it to a server so the world can see.

Many Web site hosting companies let their clients use FTP (File Transfer Protocol) programs to transfer their files. Thus, there are dozens of freely-available FTP programs available. The UW, however, does not support regular FTP and instead requires that you transfer your files using SFTP, or Secure File Transfer Protocol. Many of the free FTP programs do not support the more-advanced SFTP system.

Thankfully, the UW provides all staff, students, and faculty with SFTP software on the UWICK, a CD you can buy at the UW Bookstore for $1. Alternatively, you can download the UWICK software for free online.

Information on how to download and upload files using Tectia:

Tectia For Windows

Tectia is available from The Uware Download Web Site (select “SSH Tectia Client”). More information on how to use Tectia can be found at the Uploading Your Feed page on the Podcasting online curriculum. Remember to use the server names discussed on the UW Web Publishing page.

Fetch For Mac

The Uware Download Web Site (select “Fetch (Secure)”). More information on how to use Fetch can be found at the Uploading Your Feed page on the Podcasting online curriculum. Remember to use the server names discussed on the UW Web Publishing page.

sftp For (Almost) All Operating Systems

A command-line utility called sftp is available for almost all operating systems. It does not provide the graphical user interface provided by Tectia and Fetch, but it does provide a more powerful feature set for the nimble-fingered.

It is beyond the scope of our tutorials to discuss sftp. Many of thesftp commands for navigating the file system are similar to those discussed in our (Unix workshop curriculum)[/lst/help/fundamentals/unix].

Below is a sample session with sftp. The user connects, lists the contents of the remote home directory, gets (downloads)index.shtml and then immediately puts (uploads) the same file before quitting.

$ sftp rtimmons@ovid.u.washington.edu
Connecting to ovid.u.washington.edu...
Password: 
sftp> ls
Code                      connect.php               cssnotes                  
cvsroot.tar               localhost.sql.gz          mysql                     
mysql-5.0.37-linux-i686   mysql.sock                public_html               
public_media              schoolfiles               student_html              
svnroot                   www.tar                   
sftp> cd public_html
sftp> get index.shtml
Fetching /nfs/aesop12/hw02/d73/rtimmons/index.shtml to index.shtml
/nfs/aesop12/hw02/d73/rtimmons/index.shtml    100% 2032     2.0KB/s   00:00    
sftp> put index.shtml
Uploading index.shtml to /nfs/aesop12/hw02/d73/rtimmons/index.shtml
index.shtml                                   100% 2032     2.0KB/s   00:00    
sftp> quit

For more information on the sftp utility, type man sftp at the command line.

Internet File Management >>

Last modified: April 20, 2014