This lab was a good one for the past couple of years, so I am reusing it.

Some amazing UNIX

Remember that this is 100X, and we agreed that X sometimes stood for UNIX. Well, I don't think you're really going to like this, but here goes.

Log on to a UNIX machine

Log onto your unix server. I think we are using cse100x@hilton.cec this semester. It's always good to look at where you've landed. Do an "ls" command. This lists the directory.

Change directories so that you are in the public_html directory. This is done with the "cd" command. "cd public_html" will get you there. Now do an "ls". In fact, do an "ls -l" (that's an L, not a ONE). Now make a directory with your own name, e.g., "mkdir myname" and do the "ls -l" command. Do you see your directory? Now say "chmod a+rx myname" and then do the "ls -l" again. What changed?

cd into your new directory. Make a file called "hello.html" by saying "echo hello > hello.html". Try to view it from your browser at wolf.cs.wustl.edu/~cs160/myname/hello.html. If it is forbidden, do a "chmod a+r hello.html" to make it public-readable. Now create another file that says goodbye. You might as well call it goodbye.html. You can add another hello to your hello by saying "echo hello >> hello.html". Try it.

Getting pictures

Now go find a web site with a lot of images you want for yourself. Let's say it's http://www.cs.wustl.edu/~loui/tigphoto.html. Do a "wget -r 'http://www.cs.wustl.edu/~loui/tigphoto.html'" where you substitute whatever your URL is. Do you see that the program downloaded a lot of stuff for you? Verify this in the browser. However, it may have put a lot of stuff in a subdirectory or a subdirectory of a subdirectory. So you must do a bunch of "cd" commands at this moment until you get to the directory with all the images. If you get stuck and can't go to subdirectory, you can go up to the parent directory with "cd .." ... this is called "diskwalking" in UNIX (used to be you could diskwalk your neighbor's directories with impunity, but no more). If you get really frustrated looking for the images, do a "ls -R".

Now let's say you're in the directory where "ls" reports a lot of files with jpg or gif extensions. Those are your images. Say "mv *.jpg *.gif ..", where you might have to say JPG or GIF or "mv *.jpg *.JPG .." or some such variation. You've just moved all your images to the parent folder. Now say "rm *" which removes all the other files. Say "cd .." and do an "ls". You should see all your images here. If you are not currently in the directory you created under your name (the same directory that contains hello.html and goodbye.html), do this move again. Keep moving your images up until they are in the same directory as hello.html.

Verify using the broswer that the images are all in the same directory as the hello.html and goodbye.html. You will have to refresh your view of the directory wolf.cs.wustl.edu/~cs160/myname/ .

Now the other stuff is garbage. You probably have a subfolder called "www.cs.wustl.edu" or some such thing. Do a "rm -r www.cs.wustl.edu" or whatever it is called. This should remove it and all of its subdirectories.

Making thumbnails

Now, you want some thumbnails? There are some nice programs called djpeg and cjpeg which will do this for you. But they only work on jpegs. So if you have gif files and no jpegs, re-do the last section with another site that has jpegs!

Try the command "ls -1 *.jpg > foo". That's a ONE, not an L, this time. This should give you a list of your images in the file foo, one per line. Say "cat foo" to verify this.

Now say "cat foo | sed -e 's/.*/djpeg -scale 1\/4 & | cjpeg > &.s.jpg/' > foo2 ". This should create a new file foo2. Try "cat foo2" to see what it looks like. If you have never used sed before, this command says literally: "take the file foo, and put it line by line on a pipe. Then the next command, sed, takes each line from the pipe, and substitutes .* with this long string starting with djpeg and ending sith .s.jpg. .* matches any length run of any character, i.e., all the characters on the line. & says you want the replacement string to contain the string that you matched (namely the whole line). backslash says you really want the slash in there, i.e. literally "1/4", so that the slash is not confused with the delimeter of the s command.

If it looks reasonable to you AND TO THE TA, say "source foo2". This will create thumbnails of all the images you have, each with the suffix s.jpg.

Verify this with the command "ls -s".

Now, can you think of the "ls" command that will create an index.html for you? First try "ls -1 *.s.jpg > foo3". Then use a sed command to generate something like "<img src=image1.jpg.s.jpg><br>" on each line, where there used to be image1.jpg.s.jpg as a line of foo3. Have your sed command write to foo4.html. Have a look at foo4.html in your browser.

Did you do it? If not, try again. Ask the TA to help. If so, try generate a foo5.html which has not only the images, but also links to each of the originals: <a href=image1.jpg><img src=image1.jpg.s.jpg></a><br>. Actually, it might be better to start with the large images, "ls -1 *jpg | grep -v 's.jpg'". Then use sed to create something like <a href=image1.jpg><img src=image1.jpg.></a><br>. Then add the s.jpg to the suffix of the files that are used in the img tags. Ha ha ha ha. That's going to be a real challenge for almost anyone. But with the right combination of sed commands, you should be able to do it.