CCSF Fall 2009 / CNIT 132 Homework Notes and Difficulties Page

HW 1
Ed's Home Page
HW 2
CNIT 132 Summary
HW 3
Graphics 
HW 4
Multimedia
HW 5
    CSS I   
HW 6
   CSS II   
HW 7
   Forms   
HW 8
CGI Scripts
HW 9
Javascript

Homework
Assignment
Notes on
Difficulties
HW 1 - Creation of Basic Web Site One of the neatest things I learned was to use inline CSS to manage things like font size, weight and color. Among other things... The one thing that was pretty daunting to figure out was how to do color changes without a line break or how to remove a border from an image that is click-able.
HW 2 - Creation of Homework Summary Page

HTML version
XHTML version
The most significant difficulties that I encountered was SPACING. The HTML version of the material designed in Homework 2 renders slightly differently when compared to the CSS-defined XHTML counterpart. Nothing major. A column width comes out different or a font size is a little different. But for a perfectionist like me, it is a little annoying. I think XHTML and CSS has shown itself to be a much cleaner way to go.

Next I have to stop using inline CSS and go with CSS at the top of my documents or have my CSS in a separate file. Inline kind of pollutes the XHTML more than I like.
HW 3 - Graphics I did get the CSS material into an external file... no more inline CSS in future projects. The thing I had to keep in mind was esthetics. Was the gamma version of my background washed out enough ? With the non-gamma photo, what font color would work best ?

I really like the image map thing but boy it takes work to set up the boundaries... or it CAN take work is more accurate.

I had some fun too. I used a mac based program called picturesque to give my thumbnail images rounded corners and I could have done more, like, perspective adjustments and drop shadows. All done fairly easily.

I have been coding to XHTML Strict because I have to do the same for another class and it is just easier for me to hold to one stricter standard for all my work. What I have been doing when validation fails for something like HSPACE="5", knowing I am not doing Transitional XHTML, I do a simple Google search for something like XHTML CSS HSPACE and I usually find leads to what will work in my situation.

I hope this helps.
HW 4 - Multimedia I had fun building my animated GIF. Also learning how to download a video from YouTube was a neat accomplishment. Adding Multimedia to a web page was pretty easy but I hope I can find a way to have the M4V video be resize-able on demand. The java applet was less impressive and disappears momentarily when you scroll the page.

I was able to do all my embedding while maintaining XHTML validation. To me that was important.
HW 5 - Cascading Style Sheets I I had two issues which chewed up a lot of time for me. One was figuring out a Font Family for a given font. I utilized the webpage that was given to us which shows the mapping of font to font families. However, I would like to find out if there is information in the font files that can be interrogated to get that information for any font we are working with. I have not been successful in finding out if such data exists.

Is such data stored within the fonts ? Are there utilities for seeing the information ?

The second item was trying to line up some text with the top of an image when the text is alongside the image. The issue here was that the text was subjected to some changes in size and color etc. These changes confused the layout and the image would appear noticeably higher than the image it was supposed to line up with. Adding image padding would move the image too low. Without image padding, all the text related to image would be right up against the edge of the image. I was got around it by having the image and the text in adjacent cells of a table... The cell helps the text line up with the top edge of the image and cell padding gives me distance between the side of the image and the text that appears next to it. The solution is not ideal but 99% what I was shooting for.
HW 6 - Cascading Style Sheets II I actually had a great time with Assignment #6! I found myself enjoying finding just the right content and colors for what I wanted to put together. I can see how the direct positioning of content can be helpful when you have a late-breaking addition or a temporary addition to a long standing page. Together with direct positioning and z-indexes, you could add a SALE splash on layer on your page easily... just add it to the bottom (or top) of the HTML and later when the SALE is over, a quick edit returns the page to it's normal condition. I think the hardest thing to 'get' was the rounded corners algorithm. I spent time with colors to see the components of what I was describing. Basically squares in the corners that get carved out by bullets. The positioning gets a bit confusing. The negative values help push the bullets to the edge of the colored box carving out rounded corners.
HW 7 - Forms I just happened to find this .... but it took time to resolve... you know one of that "Hey the work is done.... let's go validate" things and BOOM! I have more work to do.

Safari allows the textarea to be re-sized. The issue here was I used a liquid layout to place everything.. That took work. Through study of examples and some trial & error, I got it the way I wanted it. The resizing of the text area causes the floated div to move to the bottom of the page.

There are two ways to control that. In CSS 3.0 you can turn off textarea resizing which blocks the cause of the movement.

#1 (does not validate with CSS 2.1)
====
textarea{
resize:none;
}


#2 (vaidates in CSS 2.1)
===
So I contained the textarea in a one-cell table. Not as clean as I was hoping for but it does suppress the movement of the textarea.
HW 8 - CGI Scripts Well so much to talk about for this assignment.

Because I am stubborn, I chose to put up the assignment on my website instead of hills. That is how I have done all my assignments so far. Well there were technical issues I had to work through. I had to use CGI.pm (a different version of the PERL CGI interface) and that was a learning experience.

I did choose to use an array to hold the checkbox data and that took a little research.

As I typically develop on my MacBook Pro instead of working online as I debug, I had to figure out how to get Perl cgi processing activated on my local webserver.

Earthlink... my webhosting company is pretty archaic and does not offer shell access so that made debugging on the remote server a bit tougher. I did figure out how to get perl errors echoed back to the web browser.

The whole experience had more learning in it than I expected but I had fun with all of it.

Happy Thanksgiving!
HW 9 - JavaScript This lab was really kind of fun .. mouse rollover's etc.The programmatic access to web page attributes is neat. I can see where that can be REALLY useful. The use of onchange= takes away one extra mouse click.

The hardest thing was debugging the javascript... I resorted to alert messages to isolate the error. Old fashioned, but effective. It always boiled down to a typo on a variable name.

I have to say I have learned so much in this class. HTML and CSS are not black box magic anymore. However there is more stuff I want to master.


Valid XHTML 1.0 Strict Valid CSS!