Steps for building a webpage and interacting with the server are
listed below the actual homework.
---------------------------------------------------------------------
Homework #3:
Build a webpage for HW#2 (DDA Lines) that includes the following:
- Instructions for how to use your program and what it does.
- Explain any keyboard and mouse click behavior and functionality.
- An image of a line with slope greater than 1.
- An image of a line with slope less than -1
- An image of a line with slope between -1 and 1
- An image of a vertical (or near vertical line)
- An image of a horizontal (or near horizontal line)
- Answers to the following:
* Describe a problem you encountered while developing the DDA line
drawing solution and how you solved it.
* Describe if it more difficult to implement the algorithm or to
implement the user interface and why.
* Describe the most interesting portion of development during this
assignment.
When complete, email a link to your page to Dr. Ramsey.
(All other homeworks should follow this link and thus this is the last
email required for linking homework in this class.)
---------------------------------------------------------------------
Your following webpages will link to this one, but more on that later.
Some steps below will help you get started. These won't produce the
prettiest pages, but at least it will get you started!
1: Showing your webpage in a browser. In these examples, I use
"username" but you should use your sybil login name (like sramsey2).
Open a web browser and type in:
http://sybil.washcoll.edu/~username
Something should be displayed here - although it may say 404 - page
not found.
2: Setting up your web page
SSH to sybil.
-You can use putty, or mac osx terminal with ssh or
otherwise. Refer to my 201/202 documentation for ssh to a
server
Type 'cd public_html' to change directories.
-If this fails with No such file or directory, type 'mkdir
public_html' and then 'chmod 755 public_html' and then
retry 'cd public_html'
- public_html is where sybil knows to expect your webpage and
that's where your browser goes to look up what your webpage
should look like.
- Your default page is index.html. Most of you already have one of
these. You can edit index.html using emacs (or any other txt
editor like vi).
- emacs index.html
-In this file you can see all the code required to render
your page as you see it. You'll need only to know three or
four html tags to operate.
-First: The stuff that shows up on the page itself is mostly
after
-Second: To add a link, there is a link component and a text
component. Try adding this inside the body of your html
page:
Let's click it
Save your file in emacs (ctrl-x ctrl-s) and then go to
your browser and hit reload. You should see a new link
pop up.
You'll need links to link your projects together from
your first project.
-Third: You'll need to be able to source images. There is
currently a disturbing version of img sourced on the
webpage already.
You'll use this most often:
-Fourth: page breaks and line breaks are the beginning of
your ability to actually format your html page. If you
place
in your html document, you'll cause a line
break to occur.
3. Getting your images and posting them.
PrtScr is the key to press to get a screen shot in Windows.
Open paint (or your image editor of choice - I use gimp).
Resize the paint window to about 550x550 pixels.
Paste into a new window in paint.
Move the paste around so that your OpenGL window is fully visible.
Make a rectangular selection around the OpenGL Window.
Choose crop.
Select save-as png picture.
Name your image. I saved mine as first.png
Note the images saved direction for later retrieval.
Open WinSCP or Filezilla or another preferred FTP application.
Connect to sybil.washcoll.edu with scp.
Transfer the image to your public_html directory.
You'll usually need more than one image. You'll also want to
upload your .cpp file. Rename it to something like "first.cpp"
Go back to your sybil terminal window.
Add this line to your index.html in the body tag:
Refresh your page in a browser and see the new result.
You can now see the image in the page! Grats!
Now link your cpp file by adding:
First.cpp
4. Setting up a second page for the next homework!
First, just copy index.html to a new html file from the command line with:
cp index.html hw4.html
Now you can edit hw4.html with your homework 4 stuff (emacs hw4.html)
When you're done with that, open index.html (emacs index.html)
Somewhere near the top - right after the add this:
Link to HW4