Creative Computing: Week 2

HTML and your Web Server

Assignments for Next Week

• Text Adventure: Use HTML tags to build a multi-page, hyperlinked text adventure. Each step of the adventure should have at least two choices, and your adventure should go at least four levels deep (for a minimum of 15 pages).

  When working on your text adventure, consider the experience you want to convey and how what we've learned in class can help you design that experience. Is your adventure literal, figurative, or somewhere in-between? How can the organization, content and linking of your pages be manipulated to allow for expression?

  Due week 3.

• wwwwwwwww.jodi.org, Jodi, 1995

Assignment References

• You Feel Like Shit: An Interactive Self Care Guide, Jace Harr, 2015
• Cat Petting Simulator 2014, neongrey, 2014
• Just about everything by Porpentine, such as Beautiful Frog or High End Customizable Sauna Experience

Class Notes

Jump to Folder Structure, Local Server or FTP

Folder Structure

We modified our folder structure so that we can run the same code on our local machine and on the Parsons server. First, save all of your work, then update your folder structure so that looks something like this:

• creative-computing is the folder that will hold everything for this class. If you want to put reading PDFs, notes, or other files in here that you don't intend to put on the internet, you can put them directly in here. This is also the folder that we will start our local web server from.
• ~your-net-id (which in my case is ~brenners) is the folder where you will put everything you intend to put on the internet. We name with a tilde (~) followed by your New School Net ID. This is because your website's address on the Parsons server is formatted the same way. My website on the Parsons server, for example, is http://b.parsons.edu/~brenners.
• week1, week2 and any other folders you create within your ~net-id folder will become subdirectories in your website. You can create these as you wish to organize your classwork and projects for this class.

After updating your folder structure, you might have to start a new Sublime project. With Sublime open, click File > New Window and then drag your ~net-id folder over the new Sublime window. Then you can close your old one without saving the changes.

Local Server

We started a web server on our laptops to mimic the web server we will ultimately upload our files to. The web server on your laptop can also be called a local server, as opposed to the Parsons server, which is a remote server.

To start our local server, we opened the program Terminal. This program is located in your computer's /Applications/Utilities/ folder. With terminal open, type cd (note that there is a space after the letters) and then drag your creative-computing folder from Finder onto Terminal. Then press enter.

If you type ls into Terminal and hit enter, you should see your ~net-id folder. Now, we can start our web server by typing python -m SimpleHTTPServer and hitting enter.

Now we can navigate our browser to http://0.0.0.0:8000/~your-net-id/ to view our webpage being served locally. Note that only you will be able to see this website - it's not on the internet yet. You can see how we don't have to type /index.html at the end of the web address - this is because web servers know to automatically look for an index.html file in every directory. If we tried to go to http://0.0.0.0:8000/~your-net-id/week1, it wouldn't work, because we don't have an index file in that directory.

To stop the web server in Terminal, press Ctrl-C (that's the Control key, not the Command key). To start it again, you can retype the command or hit the up arrow until you see it again, and then press enter.

Links

We also updated the links in our web pages to reflect the new folder structure. We have a few options for how we format the href attribute of our links.

• We can make our href relative to our present directory. For example, from ~brenners/index.html, we could access ~brenners/week2/week2.html by making a link with href="week2/week2.html". We can create the backwards link, from ~brenners/week2/week2.html to ~brenners/index.html, by making a link with href="../" or href="../index.html" (remember that our web server is automatically looking for an index file, so we don't have to include it in our href if we don't want). When dealing with folder structures on a computer, .. means "up one directory." If you wanted to go up two directories, you would use ../../.
• We can make our href relative to the root of our web server. The root of our local server is the creative-computing folder, to so link from anywhere on the website to ~brenners/week2/week2.html we would make a link with href="/~brenners/week2/week2.html". Note the initial /, which refers to the folder from which our website is being served. To get back to the index from anywhere on the site, we can make a link with href="/~brenners/".
• We can also provide an absolute link. Absolute links are what you would paste in to your browser to go to a website: href="http://b.parsons.edu/~brenners/week1/week1.html". This is not recommended because the address of your website will be different on your local server than on your remote server.

FTP

Finally, we covered how to upload your files to the Parsons server. To do this, we use the program Cyberduck. With Cyberduck open, click "Open Connection" in the top left and fill in the following fields:

• First, select SFTP (SSH File Transfer Protocol) from the dropdown menu.
• Server is b.parsons.edu.
• Port is 222.
• Username is your New School Net ID.
• Password is your password.

You will get a message saying Unknown fingerprint, check the "Always" box and click "Allow".

Then you should see this screen:

Double click on public_html. This folder is like the ~your-net-id folder that we created on your local machine. Everything in this folder will be put on the internet at the address http://b.parsons.edu/~your-net-id. Now, you can drag all of your files from the ~your-net-id folder in Finder and over on to Cyberduck.

Keep in Mind...

• Often in class, I will talk about right clicking. On a Mac, you can right click by holding down the Ctrl key and clicking. I might even sometimes say "control click" instead of "right click," but they are the same thing.
• You will have an easier time if all of your file and folder names are lower case and without spaces. You can use a dash (-) or underscore (_) if you want to separate words.
• Make sure any applications you've installed are placed in your computer's /Applications directory.
• When dragging files or folders, make sure you are dragging the main window of Finder, not from the sidebar.

Terminology

• A server that runs on your machine is called a local server. A server that runs on the internet is called a remote server.
• FTP stands for File Transfer Protocol. It is a simple way for us to upload files to a remote server.