CS074: The Digital World
Lab 1
Assigned: Wednesday, January 14
Due: Monday, January 26
Read the general advice in the syllabus on 'How to do the lab
assignments'.
You should also read the last section of this assignment on how
and what to hand in.
Exercise 1 is about understanding file sizes and the exact meanings of
terms like kilobyte, megabyte, etc.
Exercise 2 asks you to create a Web page from scratch and should
help you understand the workings of a low-level representation (in this
case, ordinary text) of a high-level
object (a Web page with complex formattting, images, and links.)
Both these exercises use the TextEditor program.
Exercise 3 is mostly just for fun, but the last two parts really do
have something important to teach about computers and Computer Science.
(The first part probably has something important to teach, too, but I'm
not sure exactly what it is!)
To complete the exercises, you will need some information on how to
find the size of a file on your system, and how to use the TextEditor.
How to Find the Size of a File
In
Windows you find the file size by right-clicking on the file
icon and
selecting "Properties" from the pop-up menu. You will see four
numbers displayed--the "size" given both in units of KB or MB and as an
exact number of bytes; and the "size on disk" similarly expressed in
two different ways.
On a Mac, you get somewhat less
information: You
find the file size by clicking on the file icon, and then selecting
"Get Info" from the "File Menu". You will see the size on disk
given in units of KB or MB, as well as the exact size in bytes.
How to Use the Text Editor
The editor has an interface pretty much like every other program
you use, but it was deliberately designed to have very few
special features. You can use it to open files, create a blank
document, type in the document, and save the result. One of the
few real features is that it lets you save the file in any several
standard formats for representing text. For this Lab, you should
always use the format "US ASCII-Basic Latin Characters".
Exercise 1-File Sizes
Review the material in the first lecture on powers of two and the exact
meaning of kilobyte, megabyte, etc.
(a)
Examine the sizes of several files, both large (larger than1MB in
size),
medium (10 or 20 KB) and small (less than 2KB). You can use the
TextEditor to create the small files, as described above. Note down the
results you see--you should get results from at least
three different files. Pay close attention to the numbers you see for
"size on disk". You should also indicate what the file is (e.g.,
an audio file in your iTunes library, a Microsoft Word document, the
program file that contains Microsoft Word itself, etc.)
(b) Describe as precisely as you can the relationship between (i)
the exact size in
bytes; (ii) the size expressed in KB or MB (if you're using Windows);
(iii) the "size on disk" expressed in KB or MB. Suppose a file's exact
size is 8100 bytes. What do you think will be its
"size on disk" expressed in KB? What if the exact size is 8200
bytes? Explain how you found the answer.
Now, if you haven't already done so, use the Text Editor to create a
small file. Make sure to include some blank spaces, several
different lines, and
some tabs, but don't go overboard, as you will need to count all the
characters you type. When you've finished, save the result (using
the option "Save" from the "File" menu) in the format "US ASCII-Basic
Latin Characters" with the name "file1".
(c) What is the exact
relationship between the number of visible
characters, spaces, tabs, and lines in the file, and the exact file
size in bytes? Does a space count for one byte? no bytes?
more? Does a tab (which looks like 6 or so spaces) count as 6
bytes? less? more? What about a blank line? You may have to experiment
a little, revising the
file, to be sure of the answer. (This is not a trick question; in the
end, the answer is very simple and probably what you thought.)
(d) Use the text editor to
make a text file that is more than 1 MB in size, with as little typing
as possible. Tell me how you did it, but PLEASE don't mail me the
file!
Exercise 2 -Make a Web Page
You may have already used fancy software for editing
and creating Web pages. I usually use a program called NVU to
make the not-very-fancy pages on the course website. Since our goal in
this course is
understanding rather than productivity or efficiency, I will often have
you work with plain and simple tools, so you can see in detail how
things work. In this exercise you will use a text editor to edit
a Web page.
Save a copy of my home page www.cs.bc.edu/~straubin
to your CS0 folder. The "File" menu of your Web browser will
offer you several alternative methods for saving it, either as a
"complete Web page" or "HTML only"---exactly how the alternatives are
described depends upon the browser you use. You should save in
the minimal format, which will
be described as something like "HTML
only" or "Page Source".
You can open the saved copy of the page in your Web browser.
Choose the "Open file" option from the "File" menu of the
browser--again, exactly how this is phrased will depend on the browser
you are using--and navigate to the copy that you saved. If you
did the download correctly, you should see the web page, but without
the picture.
Keep the browser window open, start up the Text Editor program,
and use it to open the saved copy of the page. You'll see
something completely different: The file consists entirely of
text. This text file is in a language called HTML (which stands
for HyperText Markup Language)---it consists of both the text that
appears on the page, and instructions to the Web browser about how to
display the page. These instructions are enclosed between <
and
>. Your Web browser will also allow you to view the
HTML source of a page, but by opening it in the Text Editor, you can
modify the page. In this exercise you will make a few changes to
the page.
(a) Change my name to yours.
Replace my name (which occurs twice--once in the title and once in the
body) by yours (using the Text Editor) and save the result.(Use the
US-ASCII format.) To see the changes in the page, click the
Reload button on the browser window. (You can call yourself Professor
if you want!) Also change the
text: you can write real stuff about yourself, or just
make up nonsense.
(b) Change the size of the headings.
The headings are the text printed in bold, like "Publications".
Pairs of matching tags like <h2>....</h2>
enclose the heading, and the number (2 in this example) indicates
the size of the heading. Revise the file so that all the
headings are larger.
What's hyper about HyperText is this business about links-the text you
click on to go to another Web page. If you look at the HTML
source of one of these links you'll see
<a href="DigitalWorld/syllabus.html">CS074: The Digital World
</a>
The "tag" a
href tells
the
browser that this is a link. The thing in quotation marks is the
name of the file on our department Web server that contains the HTML
code of the syllabus for The Digital World. You'll observe that
on the saved copy of the Web page, this link is broken---that's because
there is no file with the same name on your computer. (Actually the
browser looks for a folder called DigitalWorld07 contained in the same
folder as the html file, and for a folder called
lecturenotes within this one.) The phrase contained between the
start and end of
the tag is of course the link text that is displayed on the page.
Now, links don't have to link to other web pages---they can link to
images or audio files or many other sorts of file. Your Web
browser contains some facility for displaying or playing these.
Also, what you click on doesn't have to be text. Both these
things are illustrated in the link:
<a href="hs.jpg"><img src="hs.jpg" height="125" width="125"></a>
The link target is an image file (again, on the department Web server)
called "hs.jpg", the last good photograph that was taken of me, around
1955.
The thing you click on is the same image: the tag img src tells the browser to
display the image file "hs.jpg" on the page, and the other stuff
tells the
browser to fit the image to certain dimensions.
(c) Change the Pictures. Find
two .jpg files (they could be pictures of you, but they don't
have to be---you can get any .jpg files you like off of the web) and save copies of them into the same folder
as your saved copy of the web page. Edit the link
with the picture of me so that (i) the link shown on the page is one of
your two pictures and (ii) when you click on this link, the other
picture is displayed.
One of the instructions on the page specifies the background
color. The the color as six hex digits, in this case
EEEEEE. But the way to read this is as the hexadecimal
representations of three separate byte values: EE EE EE. These
represent, respectively, the red, green and blue components of the
color. Higher means brighter, and when all three components are the
same, you get some shade of grey. FF FF FF (255 255 255 in
decimal) gives you white. EE EE EE (224 224 224 in decimal) is a very
light grey, FF 00 00 (255 0 0) is a very rich red.
(I'll show you in class how to convert the hex digits to decimal, and
vice-versa.) We'll
have more to say in a couple of weeks about this way of representing
colors.
(d) Change the Background Color.
Edit the hex encoding of the background color so that it the
background becomes yellow.
(It's not obvious---not to me, at any
rate--how to get yellow by mixing different proportions of red, green
and blue. You can come up with the answer by guessing and trying it
out. Another way is to hunt around in some standard application
like Microsoft Word or Power Point that contains drawing tools or ways
to change the color of text. These include some way of specifying
a "custom color" in terms of its red, green and blue components.)
(e) How do you...? Suppose
you
wanted the text of your web page to contain the symbols < and >.
The problem is that if you just typed them as text, your browser
would try to interpret them as part of tags and get all fouled up (try
it and see). So how do you do it? You can find the answer
by perusing an HTML manual, which is fine, but there's also a quicker
way to figure it out. Whichever way you choose, revise the text
of your web page so that it contains these symbols. In the
writeup of your solutions, explain how you did it.
Exercise 3-Fun and Games
Amazing Telepathic Program
Computers are now capable of reading minds, as you can see from this on-line
demonstration of computer ESP.
The site also contains many efforts astonished users of
this program have made to explain this extraordinary
phenomenon. You might want to offer your own explanation.
(Try the test once, then think hard about it. This doesn't
have a whole lot to do with computer science, except that it's a good
workout for your powers of logical reasoning, powers that come in
pretty handy in this course.)
Twenty Questions
Here is another "mind-reading" program, one that plays the classic game
Twenty Questions.. Check out a more
sophisticated Web-based version of the same game.
Try to stump it (but don't try too hard; think about
relatively familiar objects) and provide a transcript of your
exchange with the program. (You can copy this directly from the
website and paste it into the answers you submit.) I stumped
Classic 20Q with "bay leaf", although it came pretty close guessing
sage and mint. If the program guesses correctly, it will go back and
dispute some of your answers. (I insisted that eggplant can be
used in salad; 20Q disagrees.)
This one does have quite a lot to do with computer science. We'll
discuss in class how a program like this might work, and return to the
point later on.
Language Translation
In a course filled with marvelous things computers can do, it's
refreshing to see something that they're really really bad at. You'll find several
pages on the Web for language translation. This one is part
of Google's site:
http://translate.google.com/translate_t?hl=en#
Type a phrase in English, use the tool to translate it into
another language, and then translate it into a third language, then
back into English. You
don't have to know a foreign language, and you don't have to type
anything after the original sentence--just copy and paste.
If your computer can display characters from foreign character
sets like Japanese or Chinese, you can include these as well.
The goal of the exercise is to find perfectly reasonable English
sentences that yield ridiculous translations when processed in this
way. Submit your silliest example, preferably starting with a
reasonable straightforward English sentence. When I first gave
this assignment several years ago, I translated "My
cat has fleas" into Japanese and back into English again. The result
was "there
is a chisel in my cat". The translation programs have improved a
lot in the meantime, and I have found that they do very well with
simple declarative sentences, but they're still not great if the
sentence contains more than a single clause. (The example I
demonstrated in class was "I studied piano for ten years before I
played my first concert", translated from English to Japanese to
Vietnamese and back to English again.)
It's worth thinking about why this is so hard for computers. If
you find a language translation website that you think does a better
job than this one, let me know.
What to Submit and How to Submit it
Instructions for Submission
You should follow these instructions for all lab submissions (although of
course you should change the number of the assignment).
1. Make a folder called Lab_1_yourLastName. (I mean, if your last
name is Shrdlu, then the folder should be called Lab_1_Shrdlu.
And if you're submitting Lab 3 instead of this one you should
call the folder Lab_3_Shrdlu.)
2. Place into this folder all the files that you are submitting for the
lab. In the present case, there are three files to submit:
(i) A text file that contains your answers to the questions in
Exercise 1, as well as your theory about the ESP program, your
conversation with 20Q, and your ridiculous translation; (ii) the edited
HTML file for Exercise 2; and (iii),(iv) the two image files. In
addition, print out the text file from (i) and make sure your name
appears somewhere on the printout.
3. Zip the folder, to create a compressed file with the extension .zip.
To do this on a Windows machine, you should click on the folder with
the right mouse button, and select the option "Send To..Compressed
Folder" from the popup menu. On a Mac, you
click on the folder icon, and then select "Create Archive of
Lab_0_yourLastName" from the File menu.
4. E-mail the zipped file as an attachment to the TA at bo.wen.1@bc.edu. The Subject
line for the e-mail message should be: YourLastName-Lab 1
5. Bring the printout from Step 2 to class.