CS301 Homeworks

HW #1: Learn HTML Basic, Scanning, Creating Personal Web Page Part 1 Due day 9/7 Part 2/3 Due 9/12/2005
HW #2: Capture/Edit Audio/Video File and Integrate Into Web Page Due day 9/12/2005
Homework #3 Creating On-line Catalog Web Applications Using Perl CGI Scripts Part 1 Due 9/21/2005; Part2 Due 9/26/2005
Homework #4 Javascript, CSS, Dynamic HTML Due 10/10/2005
Homework #5 Web-DB Interface and PHP Part 1 Due 10/29/2005 Parts 2-4 Due 11/7/2005

Homework #6 XML, DTD, and XSL Due 11/16/2005
Exercise #7Java Server Pages with SQL JSTL Tag and Tomcat

HW #1: Learn HTML Basic, Scanning, Creating Personal Web Page

Goal:

Learn HTML basics and how to create a web page using text editor.
Learn how to scan in photo or document in graphic file format, and convert them.
Learn how web system and HTTP protocol work.
Learn ways to improve web system performance.

Assignment Date: 8/24/2005

Due Date: Part 1 due 9/5/2005; Parts 2 and 3 due 9/12/2005

Description:
Part 1: Create a web page <your login>.html in your public_html directory on our CS Unix machines.

Using your login name in our CS Unix machines as the file name of your person web page.
CS Unix machines share the same Network File System, therefore you can login to any Unix machine in ENS 149 and see the same home directory.
CS Unix machines include wetterhorn.uccs.edu (Dual Pentium II 500MHz/512MB), redcloud (Dual Pentium II 350MHz/512MB), crestone.uccs.edu(Pentium II 500MHz/128MB), blanca.uccs.edu, crestone.uccs.edu (Dual Pentium III 1GHz/1GB), sanluis, shavano (Pentium II 500MHz/512MB), cs(Dual Pentium III, 1GHz/1GB). These 7 machines run Apache web servers.
Create a subdirectory with the name public_html under your home directory. (mkdir public_html).
Change the access rights to allow web server to access your home directory and that of public_html, by "chmod 755 ../<login>" and chmod 755 public_html.
Type "umaks" as command and observe the return value. If the return value is 2 or 22, you are ok. If you get 77, you should consider change the umask command in your .cshrc or .bashrc file from "umask 077" to "umask 022."
The reason for the access right changes is that the apache web server is running on an account called apache, and it needs to be able to look into your web directory for retrieving those web document files. .
In public_html, create an "images" directory and put your <login>.jpg file there.
You can refer the image file using the relative URL format, "images/<login>.jpg in the the <IMG> tag of your personal web page.
Scan your recent photo with face big enough and save in JPEG as <your login>.jpg. Here the web page with instructions for scanning photo image.
You can also use the image file captured with your digital camera. The library help desk has digitial camera for you to check out.
Transfer the .jpg image file to CS Unix Machine.
Include short vita and leaves email address, for privacy reason, you may choose not to give out phone number.
Include your interests and potential semester projects for CS301.
See web page examples in http://cs.uccs.edu/~cs522/CS522F99Photo.html
Put this web page in ~<your login>/public_html
Verify the correctness by enter url "http://cs.uccs.edu/~<login>/<login>html"
You can create a soft link using the command "ln -s <login>.html index.html" in your public_html directory.
Then you only need to type http://cs.uccs.edu/~<login>/ to show the login.html web page. You do not have to create such soft link if you already have a defalt index.html web page.
The Apache web server by default looking for index.html as the default web page. Microsoft IIS server by default looking for default.htm for the default web page.
I would like you to try out the <table> related tags, including <table>, <tr>, <td> and <frame> related features on your personal web page, similar to that in http://cs.uccs.edu/~cs301/indexframe.html.
For the simplest one, you can create a table with two table entries.
create an indexframe.html with the following content:
<HTML>
<HEAD>
<TITLE><your login> CS301 Class Web Pages</TITLE>
</HEAD>
<FRAMESET COLS = "20%, 80%" FRAMESPACING=0 BORDER=0>
<FRAME NAME="indices" SRC = "indices.html">
<FRAME NAME="home" SRC = "<login>.html">
</FRAMESET>
</HTML>
Replace the above <login> pattern with your CS Unix Machine login.
For the frame related exercise, you can follow the indexframe.html example by creating

indices.html file with hyperlinks to anchor places of your personal web page (specified using <a name="..."></a> tags) such as the following Hobby link, and other related web pages.

<html>
<body>
<table>
<tr bgcolor="#EDDFC9">
<td><a href="<login>.html" target="home">HomePage</a></td></tr>
<tr><td><a href="<login>.html#Hobby" target="home">Hobby</a></td></tr>
<tr><td><a href="hw1part2.html" target="home">hw1part2.html</a></td></tr>
<tr><td><a href="hw1part3.html" target="home">hw1part3.html</a></td></tr>
</table>
</body>
</html>

modify your <your login>.html with anchor names specified.
For example, you can wrap around the "Hobby" section of your <login>.html with a title such as

<a name="Hobby">My Hobby</a>

See the tutorial web page on the creation of Frames at http://cs.uccs.edu/~cs301/htmltutorial/HTMLnet2.html
One of the links in the indices.html can be your hw1part2.html web page. Later on you can create links to the web pages of your future homeworks

Part 2:

Go to any Unix machine with telnet software.
Execute % telnet cs.uccs.edu 80

Here % is the prompt generated by the Unix system.

This establish a TCP connection with the web server running at port 80 0f cs.uccs.edu.

Type the following three lines of a HTTP request:

GET / HTTP/1.0

<CR>

<CR> : hit Enter key.

You can also try % telnet cs.uccs.edu 80 > out

This will save the interaction of the session into a file name "out" in your current working directory.

In this case, you will not see the prompt or message sent back from the web server.

Report what you see the return web page saved in the file named "out"
Be brave to report what you have observed. If it reports errors such 404 or 500, that is ok.
Explain why you get such error msg.
Next, try GET /~chow/ HTTP/1.0 <CR> <CR> and report what happens. For the above two sessions, create a web page, hw1part2.html, containing the two responses from the web server.
Wrap the two responses with <pre> </pre> preformatted tag so that hw1part2.html will show the layout of the response with end-of-line. Without <pre> tag, the text will be formatted by the browser and end-of-line will be skipped and show no effect. With <pre> tag, the text will be displayed just like that showing in your telent window.
Replace the '<' of the tags in the response with "<". This will allow the browser to show the html source content in the HTTP response. If we did not perform such substitution, the browser will interpret the tag and format/display the content accordingly.
Test to see if you can click on that link on the indices.html to display the web page on the right hand side frame, the "home" frame.

Email me the url of your web page when you are done with the assignment.

HW #2: Capture/Edit Audio/Video File and Integrate Into Web Page

Goal:

Learn audio basics and how to record/edit audio files.
Learn how to capture video in mpeg
Learn how to convert MPEG files into compressed Real Media files.
Learn how to reference audio/video files using <A> tags for hyperlinks, <EMBED> and <OBJECT> tags for inline video display and control.
Learn how to use imagemap.

Assignment Date: 8/31/2005

Due Date: 9/12/2005

Description:
Part1 (Audio):

Recording short (<30 seconds) audio and save it as window PCM file and mp3 file.
We will use Adobe Audition 1.5 as a tool for recording and file compression. A tryout version can be downloaded from http://www.adobe.com/products/tryadobe/main.jsp#product=92
- Choice 1: Recording using ardor.uccs.edu XP Pc in EAS 143.
  - Drop by my office, check out the headset with microphone.
  - Plug in the red recording connector to the red recording socket of the sound card on the back of the Ardor.
  - Click on the Adobe Audition 1.5 icon on the desktop to bring up the Audition window.
  - Select File| New to bring up New Waveform dialog window.
  - Select 11025 sampling frequency, mono channel, and 8 bit per sample resolution.
  - Bring the microphone closer to your mouth. Click the red circle button to start and the gray squre button to stop. For the location of the button, see the red circles in the image of Audition window below.
  - You can the play back triangle button to play back the recorded voice. Click and drag the region of the voice to select the area (will highlight the area) for play back or remove (hit the delete button) the region.
  - Select File | Save As. Choose the C:\cs301. Create a subdirectory there with your login name.
  - Enter your login name as file name. Select "Window PCM .wav" in the "Save as Type" dropdown list menu. Hit OK. This will save the recording voice in PCM encoding format.
  - To compress the voice file, Select File | Save As again. Go to C:\cs301\<login>. Enter your login name as file name. Select "mp3PRO(FHG) (*mp3)" in "Save as Type" drop down list menu. Hit OK. This will save the recording voice in MP3 encoding format.
  - Compare the file size.
  - On CS Unix machine, create an audio subdirectory under public_html directory . You remote login to a CS Unix machine by clicking the putty icon on the desktop.
  - Transfer the <login>.wav and <login>.mp3 files to your CS Unix machine public_html/audio directory (create an audio subdirectory under public_html directory).
  - In c:\cs301\<login> directory, you can use "pscp <login>.* <login>@sanluis:public_html/audio
- Choice 2: Recording using your own PC and install the trial version of Adobe Audition 1.5. Follow the steps as in Choice 1
- Choice 3: Recording using Multimedia PC Multimedia PC Lab of El Pomar library.
  - using CoolEdit Pro in Multimedia PC Lab of El Pomar library and save it in .wav and .mp3 file formats. For student health reason, you need to bring in your own headset. Save the audio files in your ufp account or D drive. You can check out the microphone from the front desk.
Create hyperlinks in your personal web page using <a> tag to these two audio files.
See http://cs.uccs.edu/~cs525/audio/audioSimple.html#cooledit2000 for detailed info (There is a homework there at the end. It is for CS525. You do not have do it).
Option: You can also try to use <BGSOUND SRC="the mid file"> to include midi music file.
Add your answer for the following questions, right after the audio links, to your personal web page
Question 1. With mono, 8 bits, 22kHz, PCM encoding, how many bytes of data will be generated by a
30 second sound recording?
Question 2. What is the compression ratio (pcm file size/mp3 file size) achieved by mp3 encoding scheme?

Part2 (Video):

Use digital camcorder or digial camera to record short video MPEG file (say 5 sec.).
Choice 1: Using the Sony Maverick MVC-CD1000 which you can check out from the Help Desk of the library.
- It requires the use of min CD-R which you can purchase from the Book Store, 59cents. 21 minutes of Audio, 185 MB.
- Bring the min CD-R with you when you check out the camera and ask the front desk helper to show you
  - how to load the min CD-R.
  - how to use the menu control button to initialize the CD. Select File | initialize. When you finish your recording or fill up the CD, you can choose "finalize" to concluding the recording. Note that this is a multi-session CD. You can write multiple times before your "finalize" it.
  - There is a usb cable you can plug in to your computer and transfer images or video out from the camera.
  - On the top of the camera, there is a button allow you to choose still image or movie capture mode.
  - Shoot a few seconds of movie. It will be saved as MPEG file.
  - Using the USB cable that comes with the camera to connect to a PC. It will show as folder. Look for the mpeg video file there.
  - Transfer the mpeg file to CS Unix machines under public_html/video
  - Transfer the mpeg file to \\ardor.uccs.edu\cs301\<login> shared folder. You can do this by
    - Select start | run
    - Type in \\ardor.uccs.edu\cs301\<login>\
    - A login window will pop up with username containing \\ardor\guest
    - Type in the password (same as your cs301 password).
    - A folder with your login name will appear. You can drag and drop files between that and your local folder.
  - We will compress the video using real producer basic 10 from real.com. It is freeware available from http://forms.real.com/rnforms/products/tools/producerbasic/ web page. The "Free Download" link at the bottom of the web page.
  - Click on the RealProducer Basic 10 icon on the desktop of ardor.uccs.edu to bring up the Real Producer window.
  - Click on the browse button to select the input file or Select File | Open Input File
  - Choose the mpeg file you just transfer in.
  - Click on the Audiences button to select the compression ratio by specifying the type of download link speed.
  - If you have high speed link you can remove those low speed 28 or 56kbps by dropping them the garbage can icon and select the 512k DSL or Cable (450kbps) setting.
  - If you have only dial up modem link, choose 56kbps setting. The compressed real movie file will be smaller, faster to download, but the trade-off is quality degradation.
  - Click Encode button to start the video compression.
  - The result is a file with .rm (real movie) file type.
  - Transfer the real movie file to CS Unix machines under public_html/video.
  - Compare and document the file types difference between the original mpeg file and the compressed .rm file.
Choice 2: Using your own digital camera. Follow the same steps as above.
Create a hw2part2.htm web page with a hyper link to your_login.avi file. Indicate the file size of the video. Here is an example:
<a href="video/your_login.mpg">My video clip, kid's birthday with 66MB </a>
Create an inline video web page, realvideo.htm, with the following <embed> tag
<EMBED NAME=inlineRMvideo
SRC="video/your_login.rm"
WIDTH=240 HEIGHT=180
CONSOLE=one
CONTROLS=ImageWindow
BACKGROUNDCOLOR=white
CENTER=true
>
<FORM>
<INPUT TYPE="button" VALUE="Play" onClick="document.inlineRMvideo.DoPlay()">
<INPUT TYPE="button" VALUE="Pause" onClick="document.inlineRMvideo.DoPause()">
<INPUT TYPE="button" VALUE="Stop" onClick="document.inlineRMvideo.DoStop()">
</FORM>
Adjust the width and height for your video source in the above tag. See embeded video web page for more example.
Create hyperlinks from your hw2part2 web page using <a> tag to the realvideo.htm web page. Indicate the .rm file size, e.g.,
<a href="realvideo.htm">My real movie file, kid's birthday, 200KB</a>
Note that your Window Media Player browser Plug-in does not recognize and cannot play back video in real movie file format (.rm). You need to download real player from http://forms.real.com/netzip/arcade.html?h=software-dl.real.com&r=02e817bc77e7bc63e219&f=windows/RealPlayer10-5GOLD_bb.exe. The current version is version 10. The basic version is free.

Part3 (Client-side Imagemap):

Copy the ~cs301/public_html/imagemap/uccsprintmap.jpg, uccsprintmap.map, and newimagemap.htm file to your public_html/imagemap directory.
Edit the newimagemap.htm to include a client-side imagemap, where the Dwire Hall Building is a hot area with a link to the web page of the Business College.
The upper left and low right coordinates for Dwire Hall Building in the uccscamp.jpg is about (207,1) and (256, 27) respectively. You only need to use RECT for the hot area but you can also try the polygon.
You bring up the web page http://cs.uccs.edu/~cs301/imagmap/newimagemap.htm and move mouse on top of the server-side imagemap. The cursor position relative to the imagemap will show on the status window in the bottom of the browser.
You can also use MS Photo Editor to bring up the uccscamp.jpg and the curso position will show up on the bottom status window too.
Create a link from your indices.html to your imagemap web page.
See http://cs.uccs.edu/~cs301/imagemap/imagemap.htm

Create a web page hw2.html with the above answers. Create a hypetext link on the left hand side frame of your indexframe.html. You probably will have the following table row line inserted before </table> tag.
<tr><td><a href="hw2.html" target="home">homework 2</a></td></tr>

Send an email with the full qualified url to your hw2.html web pages to chow@cs.uccs.edu. Include "CS301 HW2" in the subject field of your email and the url of hw2.html in the content. This will make it easier for me to sort the emails and examine your hw2 quicker.

CS301 Homeworks

HW #1: Learn HTML Basic, Scanning, Creating Personal Web Page

Goal:

Assignment Date: 8/24/2005

Due Date: Part 1 due 9/5/2005; Parts 2 and 3 due 9/12/2005

Description: Part 1: Create a web page <your login>.html in your public_html directory on our CS Unix machines.

Part 2:

HW #2: Capture/Edit Audio/Video File and Integrate Into Web Page

Goal:

Assignment Date: 8/31/2005

Due Date: 9/12/2005

Description:
Part 1: Create a web page <your login>.html in your public_html directory on our CS Unix machines.