Please Send completed homework by email and use a subject line such as "WDP-1: CS HW1 for VCD Student" or "WDP-1: VCD HW1 for VCD Student". Please submit your CS homework to the TA (Samer Khasawneh, skhasawn@cs.kent.edu). Please submit your VCD homework to the VCD instructor.

It is important to have the correct subject line when submiting homework to the TA or instructors. Our SPAM filters may delete email without such.

Also all XHTML code in this class must pass XHTML Strict validation using the W3C validator. CSS and links must also be checked with th ese tools.

CS HW1, due 9/18:

Each student will create his/her wdp1 project page and place it on your personal web space under your CS department account. (That is http://cgi.cs.kent.edu/~youruserid/wdp1.html). The project page should be titled "My WDP-I Project Page" and may contain links to other subpages you create for this homework. Include a picture of yourself and also use HTML table to layout the page (see Section 3.11 of textbook). Here is a sample HTML file to get you started. On cgi.cs.kent.edu you need to get around the PHP enabled Web server by replacing the first line of your XHTML file with

<?   print('<?xml version="1.0" encoding="UTF-8"?>'); ?>

Your project page will have a link to the homepage of this course and a place to log your own course project information where you are required to log the work you have done, the progress you have made, and the items to be done for your Web project on a contineous basis. The TA and instructors will check the course project pages from time to time to know how well each student is doing. Here is some of the info we are looking for.

• Basic personal info such as ugrad/grad, major, background, interests, programming experiences, and perhaps goals and ambitions.
• The name of the of your Web project team. A description of the specific tasks assigned to the individual student and how it fits in with the overall project.
• A log of activities and results with dates by the individual.
• A time table of when certain tasks will be done.
• Links to the current work under development.

To publish your homepage through your CS computer account:

1. Place your .html file in the public_html directory (folder) under your home directory. Make sure that your home directory and the public_html are executable by other. See notices page for how to access your CS department account and set up your public_html web space.
2. Your goal in this homework is to
   • Make a folder called public_html in your home directory (~user_id) on the cgi.cs.kent.edu computer (which is a multi-user Linux box).
   • Open public_html for web access (chmod a+rx public_html)
   • Upload files and folders of your homework (from your desktop/laptop) to the public_html folder on cgi.cs.kent.edu.
   • The files and folders you set up thusly must all be opened for Web access. Each folder must be open (chmod a+rx foldername) and each file must be open (chmod a+r filename).
3. When you are ready, just send email about your URL to the TA, with a cc to yourself and the instructors.

File preparation and ftp

You can use any regular text editor (don't use word or dreamweaver) to create your Web page HTML files. Then use an sftp (secure ftp) program to upload your files to your public_html folder on cgi. This means

1. sftp to cgi.cs.kent.edu using your CS computer account userid and password.
2. Go to your public_html folder (create one if it is not there).
3. Upload any files (such as index.html) and place them under the public_html folder.
4. Make sure your home folder, your public_html folder and all files and folders inside public_html are open for the Web. For a file it means adding read permission for other. For a folder it means adding read and execute permisisons for other.

Then you can access your page (say index.html) from your browser with http://cgi.cs.kent.edu/~your_userid/index.html

VCD HW1, due 9/23:

Create home page wireframes

Using the site map on slide 17 of the Information Architecture VCD lecture notes (WDP1-03-IA.pdf), create six (6) home page wireframes that include the elements below. Experiment with different navigation styles and content hierarchies. Use whatever medium you wish, but homework must be submitted electronically (PDF, JPG, AI, PPT). Select the wireframe you feel is the most successful and describe why.

Zip or Stuff your completed assignment and send it directly to your instructor (doyen@digiknow.com).

Required elements:

• Logo
• Brand message
• Global navigation
• Courtesy navigation
• Call to action (Donate)
• Featured content
• Latest news
• Promotions (4)

CS HW2, due 9/30:

Do Assignments 7 and 8 (page 69) in Chapter 2 and assignment 8 (page 105) in Chapter 3 of textbook. Put the links to pages in your project page (HW1) and submit by email links to your work online and the source code in a zip file.

layout/production exercise

Using your favorite wireframe from homework 1 as a basis, present one new design for the United Way home page (http://liveunited.org). I have provided a screen grab and United Way logo in the VCD Notes section of the class site under wdp1-05-vcd.psd.

Alter the page however you want, but you must use the same elements that are represented in your wireframe. You can use the existing text from the original site or fill it with placefiller text. Select one of the core Web fonts for the text (Verdana, Arial, Times, or Georgia).

Create a different color scheme in place of the existing primary blue/yellow/red, but retain at least one of the original brand colors. If you need help coming up with a new color scheme, visit http://kuler.adobe.com and select one that you find attractive for this layout. Keep all shapes sparp. If any edges get blurry due to enlargement or manipulation, recreate those shapes.

Replace all photos in the layout with images of your choosing. Sources for new photos include http://www.flickr.com and http://www.istockphoto.com. You may resize the logo if you would like. Make sure to harmonize the color palette of new photos to the rest of the layout. The goal of this manipulation is to create an interesting and fresh variation on the existing layout.

Export the entire final layout as a jpg or png image, then upload it to your CS or Kent server space. You are required to email me a link to a page that contains your final layout image. The link should not be a direct link to an image but to a html file that shows the image centered in the browser window when loaded, as if it were a complete web page.

CS HW3, due 10/23:

This homework combines coding with page design/layout.

Design a typical main page of a hypothetical site, with top banner and navigation bar(s). Use a fluid grid that adjusts well with window resizing as well as font size changes by the end user. It is your choice to use a layout HTML table or just CSS without a layout HTML table, or a combination of these two approaches.

The work involves XHTML coding of the content/layout, the graphical design, the content positioning and CSS styling for the entire page and for various parts in the page.

The XHTML coding and the design parts are equally important. Your page must also contain a graphic that is cut into at least six pieces (see Sunflower example on page 218) and pieced together seamlessly.

In the text of your page, please put down a detailed explanation of your layout grid and how rows and columns in your grid are lined up.

Also each picture piece must be clickable and link to some other page (like the class site). In practice, some of these picture pieces are navigation links. You are encouraged to use both style-based and image-based navigation bars (say image-based horizontal navbar and style-based left-side navbar). Make sure your code is XHTML strict and your CSS code pass validation as well.

Take the hello.cgi program, the one we studied in class and uploaded to your cgi-bin on the server cgi.cs.kent.edu (See CS Notes Setting Up Your Own cgi-bin and Upload and Test A CGI Progarm), (a) Based on the hello.html file, set up an HTML form page, in good visual style, to access this server-side CGI program. Add a group of radio buttons to the form and add programming to the CGI program for processing input from the radio buttons. It is good enough if your CGI response page simply includes info about which radio button had been selected. (b) Use HTML and CSS styling (via external style sheet) to make the result from the CGI program look good and consistent with your form design.

In terms of files to send in: (1) the modified hello.html file with radio buttons (2) the modified hello.cgi that returns a page with CSS styling. (3) A link to your working hello.html form.

Special note. We recommend that you start by making the hello.cgi work in your cgi-bin. It is important that the first line of your cgi script be correct. There can not be any other characters before or after it on the first line. Do not copy and paste. Download the hello.cgi following the hands on activities on the CS notes page: Setting Up Your Own cgi-bin, Upload and Test A CGI Progarm, Accessing The CGI Program from an HTML Form.

Then you can modify a copy of hello.cgi and modify it to do this homework

Every character in a Perl program is important--- The semicolon at the end of each statement, the upper and lower case for characters. Do not take a working example and retype it or cut and paste it. Use ftp to download/upload files. To modify Perl code, use a proper editor (BBEdit on Mac; wordpad on Windows; nano, vim, or emacs on Linux).

See this example on the textbook site for error checking and email sending Perl code.