Class Weblogs (10 March 2008)
Each of you will have a weblog created for this class. I'll be sending instructions to each of you regarding login instructions. You should log in and configure your weblog by the end of the first week of class.
I expect you to post a weblog entry for each studio exercise assigned in class, whether or not you choose to attend the in-class studio session. The entry should be posted no later than midnight on Saturday of the week in which the exercise is assigned. If there are multiple exercises, you can combine the writeups and links into one entry, or split them into multiple entries.
To receive a B on the weblog portion of your grade, your entries must be complete (including descriptions of the exercise and links to the completed work) and posted in a timely fashion. To receive an A your entries must also be well-written, and appropriately organized with categories (at a minimum you should have a specific category for in-class exercises).
Studio Exercise: Basic HTML and XHTML Coding and Validation (12 March 2008)
This exercise should primarily be review from your 320/741 coursework.
Begin by copying the text of the following recipe into a text file:
Ingredients:
* 1 1/2 pkgs. (12 oz.) Baker's Semi-Sweet Chocolate
* 1 pkg. (8oz) Philadelphia Brand Cream Cheese, softened
* 3 c. powdered sugar
* 1 1/2 tsp. vanilla
* Ground nuts,unsweetened cocoa,or Baker's Angel Flaked Coconut (toasted)
Melt chocolate in large microwavable bowl on high 2 to 3 minutes or until almost melted, stirring after each minute. Stir until chocolate is completely melted. Set Aside. Beat cream cheese until smooth. Gradually add sugar, beating until well blended. Add melted chocolate and vanilla; mix well. Refrigerate about 1 hour. Shape into 1-inch balls. Roll in nuts, cocoa, or coconut. Store in refrigerator. Makes about 5 dozen candies.
Now turn that text file into an HTML 4.01 document. (Make sure you use the right DOCTYPE.) The title of the recipe should use a heading tag, the ingredients list should be an unordered list, and the description should be paragraphs. Add some basic CSS to the document to format the appearance of the text. When you're done, save it as htmlrecipe.html, and validate it (use the "validate local HTML" option in the web developer toolbar, or upload the file directly to the W3C HTML validator. If the validator finds problems, correct them. When you're done, upload the file to Gibson (I suggest creating a subdirectory in the www directory to hold in-class exercises, but you can put the file wherever you want so long as you link to it in your blog entry about the exercise.)
Now make a copy of the file, and name it xhtmlrecipe.html. Modify the DOCTYPE and the markup so that it is XHTML compliant. Remember that the following things are true about XHTML:
- all elements and attribute names must appear in lower case
- all attribute values must be quoted
- non-empty Elements require a closing tag (e.g. <p> and </p>
- empty elements are terminated using a space and a trailing slash (e.g. <br /> or <img src="image.gif" alt="Picture" />)
- in strict XHTML, all inline elements must be contained in a block element (a quick guide to block vs inline html)
Once you've completed and validated your XHTML document, place it online, as well.
Write a blog entry that discusses any problems you had with creating and/or validating the document, or any questions you have about HTML and XHTML validation. Make sure that you link to your two completed files from the blog entry.
Studio Exercise: CSS Positioning (19 March 2008)
Revise the chocolate truffle recipe from last week's exercise, using CSS positioning for layout. Create two different designs, both with the same HTML code--only the external CSS should be different.
I've collected links to a wide variety of CSS positioning and layout guides and templates, all of which can be found at http://del.icio.us/mamamusings/css/.
A few that you may find particularly helpful:
- CSS Layouts from Code-Sucks.com
- Multi-Column Layouts Climb Out of the Box (which also links to some other useful tutorials)
- WestCiv's quick tutorial on floated page layout and layout with CSS
(You may also find WestCiv's excellent CSS Guide helpful in remembering syntax and properties.)
When you're done, upload the files to Gibson, and write up the exercise in your blog.
Studio Exercise: CSS Zen Garden Critique (19 March 2008)
Go to the CSS Zen Garden web site, and look at a minimum of ten different designs. Pick one that you really like, and one that you don't.
Write a blog entry identifying your favorite and least favorite, and explain what you think is particularly good or bad about the implementation.
Studio Exercise: CSS Formatting (19 March 2008)
Select a poem that you like from the "Verse" section of Bartleby.com.
Use CSS to modify the appearance of the poem. Use a variety of CSS properties (color, typography, background images, etc) to try to create an appropriate context for the poem.
Use Dean Allen's Textile tool to generate valid HTML entities for punctuation, as needed.
When you're done, upload the html file to Gibson, and add an entry to your weblog describing the exercise (make sure you include a link to your completed exercise).
Assessing Accessibility: Studio Exercise ( 2 April 2008)
Use Cynthia Says to evaluate at least two of your own web pages (with at least one of those being on an RIT server). If the server is refuses to accept any more URLs from rit.edu, review a page that you visit frequently. Make note of all of the priority 1, 2, and 3 problems identified.
If you reviewed your own web page, fix the Priority 1 problems. Remember that to pass the W3C recommendations, you must not have any Priority 1 problems. (You may find it helpful to use the WCAG checklist.)
After you've fixed your Priority 1 problems, look at the other comments in the report provided. Your efforts should now be directed towards fixing any Priority 2 problems. Finally, Priority 3 problems may also be fixed to provide maximum accommodations.
Post an entry to your blog (blogs.it.rit.edu/mt/mt.cgi) that describes what problems you found on your site. Which problems were you able to fix? Were there any you couldn't? (If you weren't able to test your site in class, do this before Saturday.)
Accessibility Simulations: Studio Exercise ( 2 April 2008)
If you have headphones with you, complete the tasks on WebAIM's Screen Simulator. If you don't have headphones, do this exercise outside of class; it's a valuable experience.
Go to the Cognitive Simulator on the same site, and complete those tasks as well.
On the Vischeck site, provide a URL to a web page you've created, and see how it would appear to a person with color blindness. Try it with some of the web pages you frequent most often.
When you're done, post an entry to your blog describing the experience.
Studio Exercise: Usability ( 2 April 2008)
Try the following activities, and assess the usability of the web sites you're working with. Was it obvious where to click? Could you tell where you were in the site? Was it confusing or clear?
1) As you know, all RIT faculty, staff, and students now have a University ID that replaces their social security number for all non-salary transactions. How can you find your University ID? Where did you go to find this information? How long did it take you?
2) How many concentration areas are available to BS in IT students?
3) What's the first day of classes at RIT for winter quarter 2007-2008?
Basic Javascript Exercises ( 9 April 2008)
Download this archive of Javascript examples, and test each one out in a browser to see how it works.
Create a blog entry answering the following questions about 5promptexercises.html:
- In 5promptexercises.html, there are two different options for displaying the red box on rollover. What's the difference between them? Why would one be preferable to the other?
- Given the program logic in 5promptexercises.html, why do we need three different variables related to color (color, boxcolor, and textcolor)?
- In the 7detect folder, there are several approaches to determining what browser is currently being used. Which one is the best approach? (Hint: Take a look at this page on object dection for a clue.)
DHTML: Studio Exercise (16 April 2008)
Today you'll be building DHTML menus using the Suckerfish Dropdowns tutorial on A List Apart.
If you'd like to try your hand at multi-level dropdown menus using the same approach, you should take a look at Son of Suckerfish Dropdowns on the HTML Dog site.
As your CSS becomes more complex, you may find this CSS Selectors guide useful. There's also this CSS Hacks page.
I've also linked to a number of DHTML and Javascript resources over on del.icio.us.
AJAX Libraries Studio Exercise (23 April 2008)
Today you'll be working with the Yahoo! UI library, a free set of CSS and Javascript libraries that can provide a wide range of functionality for your sites.
Create a working folder on your hard drive called "ajax", and then download Yahoo! UI library. Put the resulting yui, you'll have a yui folder inside your ajax folder.
Now use the documentation on the YUI site to experiment with adding animation, drag-and-drop, or other DHTML functionality to a web page.
Make sure to take a look at the documentation for the Yahoo! UI CSS reset files, as well, which are designed to make browsers with different default CSS settings operate in a consistent manner.
When you're done, upload the entire ajax directory (including the yui subdirectory) to your Gibson account, and provide a link to your example page(s) from a blog entry. (If you don't have enough space on your Gibson account, you can try linking to the YUI files remotely; I find that sometimes works. If not, just make sure you document what you tried to do.)
Server-Side Authentication: Studio Exercise (30 April 2008)
On many web servers, you can create your own user and password file to restrict access to a web directory. On Gibson, access control is managed not via a user-created password file but instead using the campus-wide authentication system. If you password protect a directory using this method, your page(s) will have to be referenced using the https protocol, i.e. https://people.rit.edu/~abc1234/protected_directory/
To limit access to any and all RIT users with valid (DCE) login, use the following .htaccess syntax:
AuthType Basic AuthName "RIT" AuthBasicProvider ldap SSLRequireSSL AuthLDAPUrl ldaps://ldap.rit.edu/ou=people,dc=rit,dc=edu?uid?sub AuthzLDAPAuthoritative off require valid-user
To limit access to only specific RIT user(s), use the following .htaccess syntax, placing the usernames of the users who should have access (e.g. ellics or abc1234) in place of the "username1", "username2" examples.
AuthType basic AuthName "Your Description Here" AuthBasicProvider ldap SSLRequireSSL AuthLDAPUrl ldaps://ldap.rit.edu/ou=people,dc=rit,dc=edu?uid?sub require ldap-user username1 username2
(This information is taken from the RIT "Technical Information" site for the gibson server.)
Server-Side Includes: Studio Exercise (30 April 2008)
Look over this SSI Tutorial page, and/or the Webmonkey XSSI tutorial. Using those examples as a starting point, create a page that automatically shows the current date and time, and also includes a copyright statement (or some other fragment of text) taken from an external file in another directory.
Remember, pages with server-side includes must have the .shtml file extension to be parsed properly by the server!
Dynamic Sites & Basic CGI: Studio Exercise ( 7 May 2008)
We need to start this exercise by making sure that you are able to install and run simple CGI programs on Gibson written in Perl.
Setup: Create a subdirectory in your 'www' directory on gibson called "cgi-bin". Set the permissions for this directory to 755.
Create the Program File: Using a text editor type in the following program, _exactly_ as it appears below:
Install the Program File: If you created it on your PC or Mac, now upload it to your cgi subdirectory. Make sure you transfer the file in "ASCII" or "Text" mode and not "binary." Then login to grace and view the file using a Unix text editor (like pico or vi). Make sure it looks okay (are the line endings in the right place? are there strange characters? if there are problems, you may need to save it in a different format, or upload it differently...)
What should the output of this program be? (Describe it in your blog entry?)
Make sure you understand what the program is supposed to be doing, so you will recognize correct output when you see it.
Test the Program File: Now, run the program directly on Gibson, by typing this command at the prompt:
perl first.cgiIf all goes well, your program should execute. If it doesn't, track down and fix the syntax errors until it runs.
Capture the output: To more accurately simulate how the web server will execute your program, use redirection of output to capture the output of your program into a text file. Try running your program a slightly different way:
perl first.cgi > firstout.txt
Notice we don't _have_ to use the "Perl" command at the command line.
Examine the output to make sure it is formed correctly by viewing the file firstout.txt. If everything looks okay, keep going. If not, see if you can find the problem.
Question to answer in your blog entry: What precedes the html in your output? Why would that need to be there?
Now you are ready to see if the program can be run as a cgi program.
Note: on some systems the program must end in a .cgi suffix regardless of the language in which it was written, in order to run as a cgi program. Gibson is one of them. Some servers also require that all cgi files be placed in a "cgi-bin" directory in your main web directory, but Gibson does not require this; you can place .cgi files anywhere in your web directory. For the purposes of this exercise, however, we're goig to try to keep your cgi files together in a cgi-bin directory.
Test your cgi program by loading it in a browser (http://people.rit.edu/~yourid/409/cgi/first.cgi).
Create Another CGI Program: If that works, create a second cgi program--call it second.cgi. This second program will not produce a web page. All that it will do is output an http response header to send the user to a new location. Not surprisingly, this uses a Location: header, and works much like a html refresh meta-tag. It tells the browser to request another document at another location. Have the program redirect to your 409 personal page. (http://people.rit.edu/~yourid/409/).
Here's an example of a Location header:
Location: http://www.w3.org/pub/WWW/People.html
How would you output this? You use a print statement to output this type of header, of course. The header is for the browser and tells it to look elsewhere for a document. Remember to output a blank line after the header! There is no html output by this program and that means, you do not return content from your program (so what header don't you need?).
Test the Second Program: Create an index.html file for your cgi directory, and include a link to both cgi programs. When a user clicks on the link to the second.cgi program, s/he should be redirected immediately to your main 409 page.
Question to answer on your blog: Is this a useful thing? Why bother?
Implementing CGI Scripts: Simple Search Exercise ( 7 May 2008)
In this exercise, you're going to retrieve a CGI script from an archive, install it into your account on Grace, and modify the HTML form that accesses it.
We'll be using a script from Matt's Script Archive called Simple Search, which is used to search the text of documents in a specified directory. Go to the site and download the search.pl script and the search.html file from that site You should also review the documentation for the script.
Part 1: Creating the Directory to be Searched
Begin by creating a new directory in your www directory on Gibson, and call the new directory "searchme". Make sure permissions are set to 755 to allow reading.
Put a few HTML files in the directory--each needs to have only a few lines of text, but put different text in each one.
Part 2: Configuring and Installing Simple Search
You'll be installing the search script into the same directory where you placed the first.cgi script from the last exercise. The permissions should already be set properly on that directory.
Because Gibson requires that CGI files be named with a .cgi extension, you will need to rename search.pl as search.cgi. Then open search.cgi so that you can edit the necessary variables.
The first line of the file needs to show the location of perl on the server. The default line shown in the script will work.
After that, you need to modify the variables at the beginning of the script.
$basedir should be set to the full UNIX path for your searchme directory. Mine, for example, would be /home/ellics/www/searchme -- but yours will be unique to your UNIX directory path. (Use the UNIX pwd command to find the path if you don't know it.)
$baseurl will be the URL path to the directory--e.g. http://people.rit.edu/~ellics/searchme/
@files specifies which files you want to search. For this exercise, leave it at the default of *.html, which will search all .html files in the searchme directory.
You can edit the $title and $title_url if you want, or leave them at the defaults.
$search_url will be the link to your search form; for this exercise, it will be a file called search.html in the searchme directory (e.g. http://people.rit.edu/~ellics/searchme/search.html for my site).
When you're done, upload the file to your www/cgi-bin directory on Gibson.
Part 3: Adding the Search Form
Open the search.html file you downloaded. This is the form that calls the search script.
In the action attribute of the form, change the URL to your search script (in my case, that would be http://people.rit.edu/~ellics/cgi-bin/search.cgi).
You can leave the rest of the form alone, or modify it aesthetically if you prefer. Upload it to the searchme directory when you're done.
Part 4: Testing Your Script
Load your search form in a browser (http://people.rit.edu/~yourid/searchme/search.html). Try searching for a word that you know is in one of the HTML files you uploaded to the searchme directory. Does it show up?
PHP Email Exercise (12 May 2008)
Before starting this exercise, make sure that you've completed the Webmonkey PHP from the Ground Up tutorial in this week's readings. You should understand basic PHP syntax, as well as passing variables from a form on one page to a PHP script on another.
In this exercise, you're going to work with two PHP files--one that gathers information from the user using a contact form, and one that takes the information from the form, checks it for errors, and sends out the message.
I've created the starting versions of both of these pages; you should download the zip archive with the two files before you begin.
Start with the the phpmailform file. The only thing it contains is an HTML form, with an action of phpmail.php (the second file we're working with).
The first section of the PHP code grabs several environmental variables, including the user's IP address, the address of the referring page, and the browser's self-identifying information. The getenv() function is used to retrieve those, and they're assigned to PHP variables. Those variables are then used to populate hidden form variables, so that the information can be passed with the form data using either GET or POST methods.
Then the user is prompted for name, email address, subject, and message text, using a variety of HTML form inputs.
Clicking on the send button causes the values of all the form fields to be sent to the phpmail.php script--so now open that one and let's look at how it works.
The first part of the phpmail.php page starts by assigning the POST variables to local variables for easier use in the program. It then does error checking against the form values. It checks to be sure that there are values in the fields (name, email, and message body), and then checks to be sure that the email has both an @ and a . -- without which it would be invalid. If it fails either test, an error message is output and the script processing is ended using the return function.
If the form has been completed properly, the script then cleans up the form data (using the stripslashes() function), generates the email message body by combining the user's message with the data from the hidden fields, and then uses the PHP mail() function to send the message. After sending the message, the user sees a web page showing the data that they submitted, with a link back to the original form.
You'll need to change two things in the phpmail.php script: Your email should go into the mail() function, in place of the YourEmailHere string. And your name should go into the success message, in place of Your Name Here.
Once you've made those changes, upload both files to the server, and test using the form. Try three versions: one filled out properly, to make sure it sends you the email, one with the form blank to make sure it checks for missing inputs, and one with an incomplete email address. Make sure that it catches the error states properly.
After you have it working, think about how you could change the form a bit. For example, what if you wanted the user to be able to pick from multiple recipients (e.g. you or your professor)? How would you implement that?
You should also clean the form up a bit aesthetically. Use CSS to format it. Here are some good resources for CSS form design:
- Smashing Magazine: CSS-Based Forms: Modern Solutions
- The Man in Blue: Accessible, Stylish Form Layout
Another thing to consider is using Javascript to check the form before it's sent to the second page. Here's a good tutorial on that
Once you've finished with this exercise, make sure you add a blog entry pointing to the completed form.
