Scripts

Here are the scripts for my site:

Form mail on simple_form.html page
Slideshow on home.html (animal images)
Search feature on home.html
Drop down menu
Secret Club php form on secret.html
Weather update on midterm/weather.html
Weight question on xhtmlrecipe.html (javascript)

Secret Squirrels and PHP

I just finished the first PHP assignment. We were asked to create a form to enter a secret page. I thought of the classic Secret Squirrel cartoon and used that as the theme. PHP is incredibly easy, especially after learning Java.

CSS Poem

Today's in-class exercise was done out of class, as we had our first quiz to complete. I had a lot of fun creating a page containing a poem and adding css style. I always have considered Paul Simon a poet, and thought of his song "Night Game" from "Still Crazy After All These Years."

I tried to mirror the feeling of the song, which is about a pitcher who dies during a night baseball game. I used Photoshop to create two images of a ballpark and a pitcher, with a gradient and feathering to fade it out to black.

I used a black background and made the text gray, sans-serif. I positioned everything using divs, spans and some relative positioning. I added a link back to my homepage with white font so it would stand out and show clearly how to return to the index. I wanted it to be unobtrusive and fit in with the theme, so I placed it at home plate.

Exercise your right to vote

I finished the form project for the last in-class exercise. I included radio buttons to vote for a favorite animal photo. It was a very simple project, there's nothing complicated about creating forms. I did add css -- line height to space the inputs out a bit, and I used the same java script as on the main page to rotate images and implement the pull down menu.

Zen Garden Picks

This week we worked as a team to pick out pages on CSS Zen Garden and critique them. I worked with Josh Wilson and Tom Ryan and we agreed that Retro Theater was an example of a poorly designed page.



There is so much to confound the user in this page, it's a great example of what not to do. To start with, the section above has 4 columns which must be scrolled down to the bottom then back up to the top to read the next column, repeating that painful exercise three times if you actually want to read the text. The columns are only two or three words wide, which is just plain annoying.

The fonts are all over the map, alternating between regular and small caps. The text area is such a small portion of the page, and at first it's not clear where the scroll bar is located. You don't even really know if there is any text to view.

The page that I liked very much was Bugs.



I really like the combination of a seamless flow and clearly defined sections. The bugs create movement throughout the page, while the content is clearly divided into segments. I like the curved border sections and the color scheme. The fonts are well chosen and the page has an elegant, playful feel. The only thing I would like to see is a slightly larger font as I find it a little small to read.

Moving ahead with scripts

We covered a lot of ground today in class. We worked on nesting divs, which was very helpful, especially if you want control over your page design. Then it was time to work on image optimization, thumbnails, and a script to open a full-size version of a jpg.

I expanded my thumbnail script to incorporate a slideshow of four thumbnail images, using a tutorial on banner rotation that I found in Javascript Demystified by Jim Keogh. I had to do a lot of rewriting to get what I wanted, but I was happy with the results. I added css to remove borders from the image links and underlines from text links. I also did a bit more image processing to tie the design together, repeating colors and the leaf imagery and using the color from the title as the anchor link color.

All in all, I am finding Javascript a lot easier than Java.

Week 2

This week's project was a bit more work, getting the script to work with xhmtl gave lots of validation errors that I didn't know quite how to interpret. I finally had to switch to html transitional to get the form to validate.

I was pretty happy with the layout in the end, though there is not much content. I used the css layout #27 from Code-Sucks.com and used the green from my photo to create the header, and chose a lighter shade for the right column.

I like the dropdown list for links. However, it leaves the column looking pretty empty as I think having links below would be redundant with the dropdown.

Back to Web Design

I thoroughly enjoyed the assignment in 409 today, though I was worried at first that my web skills may have slipped a bit since last spring when I took IMM. Happily most of it came back pretty quickly.

I have learned a lot already in 409 and it has only been 2 classes. Prof. Habermas inspires confidence, so I am looking forward to our sessions. For guidance, I looked back to my IMM final project, which I was able to salvage after getting the word in class today that you could still access your files from Grace by using ftp. --Many thanks to whoever the classmate was that provided that very helpful tip!

I used a lot of images in the xhtml version, all through CSS by setting them as the background image to divs. I worked in Photoshop and used the hex codes to match colors so I could get a more seamless look between the images and the html coded colors. For added depth I created a gradient in Photoshop and set it as a background image to repeat horizontally.

I had some validation errors that made no sense at first, but it turns out that BBEdit uses a closing slash in the UTF tag that should not be there for html. It set off a bunch of errors but once I figured it out, the other errors went away. I also wanted to put some content on the right of the main section of my xhtml recipe but had some positioning problems. I hope to work that out in class at some point and figure out how to make it work.

I used Fugu for my ftp and Terminal to set the permissions -- it's way too frustrating to have to do that all the time with Gibson!! I also learned some new pico tricks from Prof. Habermas today, which I appreciate.

I adapted the recipe so that it would be vegan candy, as that's how I live. It sure made me hungry by the time I was finished.

See the XHTML recipe here.
See the HTML recipe here.