CS301Home ClassInfo PhotoAlbum Grade Assignments Homeworks Q&A Projects News Exams

hw1 hw2 hw3 hw4 hw5 hw6 hw7

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/21/2006

Due Date: 8/28/2006

Description:
Part1a: Setting up a web site on Unix machines with Apache web server

• First login to CS Unix machines using Secure Shell Client.
  • You can remote login there to carry out our homework exercises. Your CS Unix account is different from that of UCCS Computing Service Account (may have different login and password). The login for the CS Unix server is first initial, second initial, last name (up to a total of eight characters). The newer account starts to follow that of UCCS Computing Service Account. The newer password will be initially set to the last digits of your student ID repeat twice. Please login and use yppasswd to change it.
  • 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, redcloud, crestone.uccs.edu, blanca.uccs.edu, crestone.uccs.edu, sanluis.uccs.edu, shavano.uccs.edu, windom.uccs.edu, and cs.uccs.edu. These 9 machines run Apache web servers.
  • If you use Windows system at home, try to use free SSH Secure Shelll software package with SSH Secure Shell Client,/Secure File Transfer Client, from http://www.ssh.org/support/downloads/secureshellwks/non-commercial.html, to login to CS Unix machines. It is secure since the password is not transmitted as clear text and all data are encrytped.
• Create a web page <your login>.html in your public_html/cs301 directory on our CS Unix machines.
  • Using your login name in our CS Unix machines as the file name of your person web page. For Raymond Deca Cruz, it will be rcdelacr.html
  • Create a subdirectory with the name public_html under your home directory. (using command "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 a sudirectory cs301,
• In public_html/cs301, 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.
• I will take snapshot of you in class 8/23 and edit them to reduce the size, and post them in ~cs301/public_html/images/. You can also 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/~cs301/CS301F2006Photo.html
  • Put your cs301 personal web page in ~<your login>/public_html/cs301
  • Verify the correctness by entering url "http://cs.uccs.edu/~<login>/cs301/<login>.html"
  • In public_html directory, You can create a soft link using the command "ln -s cs301/<login>.html index.html".
    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="hw1part1b.html" target="home">hw1part1b.html</a></td></tr>
<tr><td><a href="hw1part2.html" target="home">hw1part2.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 1b:

• Login to any Unix machine.
• Execute the command "telnet cs.uccs.edu 80"
  • 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>
<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>" instead of "GET / HTTP/1.0<CR><CR>" as http request and report what happens.
• For the above two sessions, create a web page, hw1part1b.html, containing the two responses from the web server.
• Wrap the two responses with <pre> </pre> preformatted element so that hw1part1b.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 "&lt;". 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.

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/23/2006

Due Date: 8/30/2006

• Reference recording voice and Use midi file as background sound
  • I have set up three machines (Walrus, Wind, and Walden) with Adobe Audition 1.5 in EN143 lab for recording your voice. Right now only Walrus is connected with a microphone. You can bring in your headset with microphone when using Wind or Walden.
  • 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 walrus.uccs.edu XP Pc in EAS 143.
      • Login to walrus using cs301 as login. Password to be announced in the email and in class.
      • Click on the Adobe Audition 1.5 icon on the desktop to bring up the Audition window.
        There three different views for the main subwindow. Make sure your select the Edit View for seeing the recording wave form.
        
      • 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 D:\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 D:\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).
      • ou can use SSH secure file transfer program to copy those audio file from D:\cs301\<login> directory to your audio directory on CS Unix machines.
    • 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 Audition 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.
• Create hyperlinks in your cs301 personal web page using <a> tag to the 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).
• Use <BGSOUND SRC="the mid file"> to include midi music file in your hw1part2.html. You can choose the midi file from Internet.
• Add  your answer for the following questions, right after  the audio links, to your hw1part2a.html 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?

• 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 walrus.uccs.edu\cs301\<login> shared folder. You can use SSH Secure File Transfer program on warlus.
    • We will compress the video using real producer 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 icon on the desktop of walrus.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 hw1part2b.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 hw1part2b 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.

• 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 hw1part2c.html (imagemap) web page.
• See http://cs.uccs.edu/~cs301/imagemap/imagemap.htm

Create a web page hw1.html with links to the above web pages. 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="hw1.html" target="home">homework1</a></td></tr>

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