Please Send completed homework by email and use a subject line such as "WDP-1: CS HW1 for CS Student" or "WDP-1: VCD HW1 for CS 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 these 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.

grid experimentation

Your goal is to take the associated Photoshop file (wdp1-05-cs.psd, found in the VCD Notes section of the class site) and create three designs using the shapes. Turn layers on or off to create a dynamic and interesting design. They are aligned to the underlying four column grid. You should consider this grid in designing, but are allowed to move the shapes from the grid if needed. You are not allowed to color the shapes, though you can change their value (opacity). Shapes can be re-sized, but do not rotate them. Begin to think of the rectangular shapes as navigational elements or areas of content. Your layout should look and feel like a web page. Examples of contrast could include all of the previous contrast types from the first exercise, as well as contrast of direction, texture, shape, or rhythm. An element could be made up of a grouping of shapes.

You are required to submit 3 final layouts.

• Layout 1 should have 3-5 elements.
• Layout 2 should have 6-10 elements.
• Layout 3 should have 11-15 elements.

Save these as flattened png, gif or jpeg files. Zip them into one file and email the zip file to me. Name the files appropriately.

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.

Do assignment number 1 and 10 Chapter 8 as one combined problem. Be sure to style the response page of your CGI program consistently with your form page.

Your cgi program will check for all input to be present and then lists the received info in a response page. Also have this cgi program send email to yourself listing the info collected by the form and a CC to the email address collected on the form.

Follow directions in the CS notes on Setting up your own cgi-bin and on Upload and Test A CGI Progarm to place and test your CGI program.

When done simply send the URL of your working CGI program and a file containing your CGI program source code to the grader.

Hint:

/bin/mail -s "subject" -c copy-receiver receiver-addr1  receiver-addr2 

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.

Create a Your Contact Information page to collect the usual name, address, phone, and email information from an end user. Using Javascript, add client-side form checking to this page. Each form field is checked immediately after it is filled in. The entire form is checked again on the client side when it is submitted. Be sure to apply the email address checking code given on the textbook demo site.

Only when the form passes the client side check does it get actually submitted to the server side. You can use the same Perl program from the previous CS homework to process the form input. Be sure that the server-side processing also checks the input values independently.