Friday, February 27, 2009

Class 2 HW (part 2) - This one is for the children

So, I had my 6th grade students decide which celebrity should get the privilege of being featured in my Homework Assignment. The consensus was Rihanna. Students produced most of the text and found pictures, I provided the grunt work.

Here is our Rihanna Page.

I wanted to add a little bit more to this than I actually wound up doing. I checked out the tab resource on the Lunarpages' link provided by Jack. It didn't look like it would be all that hard to get the tabs in there, but I wasn't 100% how to make them fully functional. I imagine this would be done with frames, and while I think I could have figured it out, I'd rather go to bed at this point.

Other notes:

1) I really wanted to get the video to autoplay. I found a lot of possible answers, only 1 that worked. Basically you need to add &autoplay=1 to the end of the "src" in the embed code. Unfortunately I did this in the beginning of working on this site, and thus listened to Umbrella every time I reloaded.

2) I would have really liked to have had the pictures all open up in the headshot space. The only way I could think to do this was with frames. Since I didn't want to start playing with frames, I just had them open in a seperate page. Any other ideas?

3) I wound up centering most things, which I didn't really want to do. I probably could have been fixed using some "spans", but it was a little late and I figured sleep was more important.

4) Once again, lining up the different divs became a little bit of a pain. They are fairly well lined up, but not perfect. I'm really hoping that there is an easy way to deal with this.

Thursday, February 26, 2009

Class 2 Homework (part 1) - Actor Webpage Wireframe

This exercise took me a little longer than I was expecting it to. While it came out looking exactly how I wanted it to, I'm not all to sure that I accomplished it in the most efficient way possible.

The wireframe can be found here.

One thing I found extremely annoying was formatting. I found myself doing A LOT of trial and error with widths, trying to line everything up. Is there a better way to manage alignment?

Some other thoughts while I was doing this.

1) I wound up using 4 different div containers for this wireframe.
  • The large container which held all of the divs

  • A container for all of the things on the left side of my wireframe

  • A container for all the things in the main body of my wireframe

  • A small div within my "main" container which held the two video thumbs
The left side div and the main div definitely made things a little easier when doing this. I'm not quite sure how I would have done it without them. I wasn't sure if was necessary to make the div to hold the video thumbnails. I wanted to keep other things along the same line, so I wasn't sure how to put one on top of the others without that small div.

2) I had to make 3 different types of clear. One was a small clear, which basically just ended the line without making any space between that one and the next. I made a regular clear, which had a height of 5 pixels. Finally, I made a big clear, which had a height of 20 pixels. These were mainly just for formatting purposes. Is there a better way to handle this?

3) I wound up with 16 different items in my css file. I'm not sure what the norm with this was. I would obviously like to keep things simpler if it is possible. On top of that, I feel like certain entries were wasteful. For example, I declared in almost all the divs that they should float: left. I wanted to do this for all divs, but when that seemed to mess up the centering of my main container.

Saturday, February 21, 2009

Font Tester

Here's a good resource I found for selecting font types. It also helps produce the CSS code:

Font Tester

Saturday, February 14, 2009

Flower Shop

Heres my flower shop from today's assignment:
There is a search and browse in the left nav bar. Most of the page is taken up by what would be a rotating image gallery, going through the tabs and whatever thumbnails are in each tab. These would be images of any promotions, top sellers, or other pre-made packages. On the right is a quick way for users to purchase any of the things they saw on the homepage.

I figured that most of the shipping costs, shipping locations, store locations, etc. could be handled through the location finder on the top right. Once a person put in their zip code, that information would be handled on a seperate page.