Hermes-Online Help

http://www.con.wesleyan.edu/groups/hermes/index.htm Last Updated April 23, 1997 I'm writing this text file so that anyone at Hermes can run the webpage regardless of computer knowledge. I'll split all the info into lots of sections- look at what you think you need to know. All this info is what I learned, through trial and error, over a few months. I may not have worked out all the errors- so don't trust any of this info completely. Feel free to correct it if it's wrong. I. Needs - basic computer requirements and program info II. Organization - what all .HTM filenames refer to A. The Static pages - core pages that usually don't need changing B. Folder Organization - where everything else is kept C. Issue Pages - the files that make up an issue III. Updating the Webpage - How to update the webpage A. Intro/Basics - what you'll need to know B. Starting to Update - tips on what you should do to begin C. Getting the issue material - getting the issue text and graphics D. Coding the material - converting everything into HTML E. Uploading the issue - putting the files on the Wes server F. Updating the links - finally, making the new issue available IV. Hard Stuff - More complicated HTML changes

I. NEEDS

To edit the pages online all you need for your computer is: Net access An FTP client to upload/move files (you can get one anywhere) You should also know how to use FTP and Telnet A webpage browser

Info on these things WHAT IS TELNET? - telnet is a "terminal emulation" program. Most people use it to check mail from campus, but it can also be used to set file permissions and organize files. Basicaly it allows you to dial into a server (like Wesleyan's) and type in lots of commands. The Wes Server currently runs either UNIX/LINUX or SunOS. UNIX, SunOS? WHAT ARE THEY? - Unix/Linux SunOS are all program languages like DOS or windows. From a terminal they are text based, but that makes it simple and powerful. Like DOS you have a prompt and you type in commands. Basically you just navigate through various directories and edit various files. Section IV. has a VERY short list of some important commands. WHAT'S FTP? - File Transfer Protocol - this allows you to upload files onto Wesleyan's server. You can do other things too - like make directories and delete files, but you shouldn't need to do any of these things for Hermes. (If you ever do want to make a directory though, you might want to use FTP instead of telnet) Basic command Info for FTP and Telnet access current Wesleyan Server(hostname): www.wesleyan.edu (note: this server address has been known to change) Remote host directory (where all Hermes files are stored) /www/hermes

II. Organization of Web Files

A. The Static Pages

These are found in the root directory of the Hermes account. (and they are the ones that stay mostly same with each issue) Index.htm - this file directs web-browsers to either the frames or non-frames version. It can also be used for web-search indexing Title.htm - this is the default "about" page (News & Info) with the Hermes Logo and news updates Main.htm - this is the main news page for reports on the status of Hermes production and staff, etc... It has links to the news center and this FAQ Menu.htm - this is a page/frame that has the menubar. Backissues.htm - this page has links to all previous issues The rest of the static pages just house basic Hermes information. They are: subscribe.htm, submit.htm, contact.htm, stats.htm , linx.htm there are also two graphic files, indent.gif and letters.gif

B. Folder Organization

In the Hermes directory on the Wesleyan Server you will also find several folders: images (holds some important graphics) misc (for random junk, like letters, etc.) prev (folder for issues) -this folder contains all the folders in which all the issues are kept, as well as a few graphics formats (folder for the current base format of the webpage) -also contians a backup folder in case the formats get overwriten by accident FAQ (the folder with all this info)

C. Issue Folders

In the prev folder are several other folders dated by month and year. These contain the issues- some of the files you'll find in each folder should be: TOC.htm - the main Table of Contents SB.htm- the staff box page HI.htm- the Hermes Index CD.htm- the Campus Diary 1A.htm, 2A.htm, etc.- an article, numbered by it's place in the table of contents. L.htm- the letters page (if there is one) COV.gif- the cover graphic 1.gif, 2.gif, etc.- various pictures for the TOC page

III. Updating the Webpage
A. Intro/Basics

For this you'll have to understand basic HTML- it's horribly easy - you can find a tutorial on the web and learn the language in, seriously, a few hours...... but you don't even need to do that if you want to follow these instructions. You'll also need some sort of telnet, Unix (which you'll encounter thru in telnet), and FTP knowledge. Basic Unix commands you'll need to know for telnet are: "ls" - list everything in a directory "cd" - this command, followed by a directory name, will change the current directory "cp" this command, followed by a filename and destination directory will copy that file into the destination directory "rm" - deletes a file - make sure you don't ever want it again "chmod" - changes the access availability of a file

B. Starting off tips

It's a really good idea to use the ftp client to download the entire hermes webpage (with all the folder structures inctact) onto your computer. This makes it easy to edit things locally and then just upload them when you need to. At the very least, you hould download all the files inthe "Formats" folder. These are the HTML templates that you can paste things into.

C. Getting the material

1.)You'll need all the raw text from the latest issue- you'll have to copy it all out of Quark (from the Hermes Office) and into a text file or Word Document. 2.) You'll need the Campus Diary, Hermes Index (with sources), Staff Box, Table of Contents (with all article blurbs), and all the articles, with title, sub-title and author (because these often differ from the Table of Contents titles and subtitles). 3.) You'll probably have to scan in a printed copy of the cover page, because we almost never use just one graphic to make it. After scaning, you can shrink the image down to around a 75 pixel width. Save this as a grayscale gif file if you can, or a jpeg file if you can't. You might have to take these files elsewhere to an IBM PC at home or in a computer lab, because the Photoshop in the Office is slow and has very few features. Try saving the files to disk as a jpeg, putting them on an IBM, renaming them (with file extenions turned on, name the file 1.jpg- Mac's don't have file extensions, so unless you do this, the IBM can't tell what kind of file it is), and changing them to gifs there. 4.) Also pull out a couple of the pictures we used in the issue, and shrink them down to 200pixels width at the very largest- save them the same way.

D. Putting the articles into HTML form

Alright, more extensive editing requires knowing HTML, put you should be able to use the templates I've made in the "formats" folder to just plug in issue information.

E. Uploading the Issue

F. Updating the links- *IMPORTANT STEP*

1)make a link on the backissues.htm page to the TOC.htm file for the TOC.htm of the previous issue - just copy the format of the HTML tables already there. (each new semester gets a new row) 2)In menu.htm, make the second menubar link goto the new TOC.htm file 3)in index.htm, make the second link in the FRAMESET tag point to the newest issue that you've just uploaded.

IV. More complicated HTML explanations

Actually editing HTML code is pretty easy. Basically you can just replace all the writen content/dates/titles while leaving the HTML code intact. In the TOC page though, you may need to add more spaces for issues and other such things so I'll explain how some basic HTML things work. If you want to realy do new issues on your own just
mail me and I'll send you my folder of "template" .htm files for the new issue- pages with all the neccessary code already done so that you can just plug in new content. HTML lesson..... Everything in HTML is organized in terms of "tags". They are actually all over in this document but your web browser reads them as progrmaning information instead of text. If you were to look at HTML source (which you can get to by opening up any .htm or html file in a text editor rather then a web browser) you might see some tags that looks like this: <B> Hi </B> The output of these tags in a web browser would result in this: Hi In other words any text surrounded by "<B>" and "</B>" will be in bold. The first tag is an opening tag, and the second tag, with the addition of the "/" is a closing tag. It's that simple. Some tags don't require closing tags because they don't enclose text- they simply create a visual element. In the "current issue" page you'll find the tag "<HR>". This tag creates a line that looks like this:
There are also two images on that page, the hermes logo: and the issue's cover. Images are embedded in a HTML page by the tag: <IMG SRC="images/hermes.gif" ALIGN=TOP ALT="The Hermes" HEIGHT=25 WIDTH=100>> The filename in the quotes is the filename of the graphic to be displayed- everything else modifies that image - ALIGN=TOP aligns the image with the surrounding text, HEIGHT and WIDTH set the size of the image, etc. The "images/" before the filename is a directory listing telling the program where that image can be found (in this case- in the "image" directory). On the actual TOC.htm page it will actually be "../images/hermes.gif" because the "new" folder which the new issue is in is paralel to the "images" folder. the "../" tells the server to goto the bottom of the directory structure before thinking about the folder to goto. To update to a new issue you simply have to change the <IMG> tag to the latest cover graphic (example: COV3_97.gif). Of course you have to upload this graphic to the server first (put it in the "new" folder) The most important tag, however, is <A HREF=" "> </A> Any web address you put between the quotation marks will create a clickable link to that address. Any text between the opening and closing tag will be that clickable link. <A HREF="http://www.suck.com/"> Click here for a webzine </A> will result in Click here for a webzine You will use this tag to create links from the backissues.htm page to the TOC.htm pages and links from TOC.htm pages to the articles. _________________________________________ Thus endeth the lesson for now- if you need any more help mail me at atipson@wesleyan.edu. Or else you can ask someone who REALLY knows what they're talking about.