Chapter 6: Static Data on the World-Wide Web
6.1 Web Publishing
Web publishing, generally speaking, consists of three steps:
- Edit a web page on your local computer;
- Review the edited page on your local computer with one or more web browsers and return to step (1) to correct any issues;
- Publish the page on a remote web server where others can see it.
- Link to it so others can find it.
Editing Web Pages
Reviewing Web Pages
Publishing Web Pages
Editing Web Pages
There are a large number of applications that help one edit HTML, CSS, and SVG.
They can be as simple as text editors with syntax highlighting, or they can be What-You-See-Is-What-You-Get (WYSIWYG) editors, or they can be full-blown Integrated Development Environments (IDEs).
Since the emphasis in this course will be on general methods, no specific editors are required.
Here are a few possible open-source editors, one or more of which you should download and install:
Macintosh:
- Aquamacs — text editor based on Emacs
Windows:
- Notepad++ — text editor based on Scintilla
Cross-platform:
- Komodo Edit — text editor based on the Komodo IDE
- BlueGriffon — WYSIWYG Web page editor
- Eclipse — IDE with support for many languages
Reviewing Web Pages
Making sure your Web pages accurately display your content and design requires that you review them with actual Web browsers, even if you are using a WYSIWYG editor like BlueGriffon or Dreamweaver.
Unfortunately there are variations in how browsers interpret Web languages, so it is advisable to review your pages in several of them to check for discrepancies.
Older browsers are more likely to have issues, especially with the latest standards, so we’ll assume users are up-to-date or can get up-to-date if they need to:
Macintosh:
- Safari 5.1 or later
Windows:
- Internet Explorer 9.0 or later
Cross-platform:
To test for specific capabilities, visit the site caniuse.com.
Static Web pages, as well as many dynamic pages, can remain as files on your personal computer and be read and displayed properly by your browser alone.
When Web pages become more complex, for example when they are constructed on the fly after pulling information from a database, it’s necessary to load them from a Web location rather than a file, so that a Web server can process them first.
Web servers can run on your local computer to provide a testing environment for your pages. There are a number of of open source Web servers available, but for this course we’ll use a relatively new, lightweight server called Node.js.
You can download and install Node.js on most personal computers if they aren’t too old. If you aren’t able to install it, you can use a remote server instead (see the next section).
Publishing Web Pages
For others to see your Web pages, you’ll need to publish them on a dedicated Web server that is always on and ready to share your pages with the world.
As part of this course your team has access to a remote server where you can publish your projects. It is a Linux system, which is a flavor of Unix (as is Mac OS X); your team server and access to it are described in Moodle.
To connect to your server you will need to first establish a virtual private network (VPN) by installing and configuring UMass’ Pulse Secure software.
You can then put your Web pages on your server using Internet protocols such as Secure File Transfer Protocol (SFTP) or Secure Copy (SCP). Here are some tools that let you connect to your server and put your Web pages:
Macintosh:
- Terminal.app – Mac-supplied command-line interpreter (a “shell”) that runs sftp and scp (amongst many other commands), located in /Applications/Utilities
- Aquamacs — menu Tools > Shell Command… to run commands such as sftp and scp
- Fugu — a graphical SFTP client: make sure you download the Intel-based version at the bottom of this page!
Windows:
- Notepad++ — has an SFTP plug-in, NppFTP, that you can download and install.
- WinSCP – provides SFTP, SCP, etc.
- Putty — a suite of tools including SFTP and SCP
Cross-platform:
- Filezilla – an open-source graphical SFTP client; set up your connections first by menuing File > Site Manager….
No matter how you connect, you’ll be able to move files over to your server, i.e. upload them. The basic process is:
- Connect to VPN;
- On your local computer, change directory (folder) to the location of the files to upload;
- Connect to the remote server;
- On the remote server, change directory (folder) to the Web server file location, which is
/var/www/html
— a link/alias/shortcut namedhtml
has been put in your home directory; - Copy or put your files to the remote server;
- Disconnect.
For example, using the Mac Terminal, a command-line SFTP session might look something like this, where you are typing these commands and pressing the key Return after each one:
- cd Documents/gist
- sftp yourusername@nrcwgxx.eco.umass.edu
- cd html
- put index.html
- exit
A command-line SCP session is more compact but perhaps not as clear without practice, and might look like this:
- cd Documents/gist
- scp index.html yourusername@nrcwgxx.eco.umass.edu:html
These can be even simpler if your user name on the remote server (i.e. your UMass NetID) is the same as your user name on your local computer, in which case you can leave off yourusername@ from in front of the remote host name.
Here is a list of useful Unix shell commands that might come in handy for some of these tools. Some of them work in SFTP, e.g. ls to list files on the remote server (but lls for a local list of files, and lcd to change the local directory).