Message board

It's ugly (I applied hardly any CSS), not sanitized, and you can't log in, but it does have an If statement adding a div if the user uploaded an image or not.

http://onepotcooking.com/nickmcmaster/class7/addpost/index.php

Here is my templatized ecommerce page:

http://onepotcooking.com/nickmcmaster/class6/assignment/ecommerce.php
I used a multi-dimensional array and put the product div in a foreach loop containing a multi-line echo statement, using double quotes rather than concatenation to print the raw html along with extrapolated variable values.

also, just for fun, some jquery effects i've been messing with:
http://onepotcooking.com/nickmcmaster/class6/jquery/animated_list.html

All the assignments!

Ok, here are links to all the assignments. In some cases, I've rebuilt them, so pay attention to these over the versions posted below:

Tic Tac Toe (Unfortunately, I misinterpreted this assignment, and did it in straight javascript, not using jquery, and didn't have time to redo. I will try to do so for next week, but I'm still proud of this, and the related selective-rollover exercise I made for a generic clothing store with much of the same behaviors).

http://onepotcooking.com/nickmcmaster/samples/tic/tic.html

http://onepotcooking.com/nickmcmaster/samples/clothing/clothing.html

other rollover store assignment: http://onepotcooking.com/nickmcmaster/samples/ecommerce/ecommerce.html

Form-copying assignment:
http://onepotcooking.com/nickmcmaster/class4/doubleform.html

MTV design comp:
http://onepotcooking.com/nickmcmaster/samples/MTV/mtv.html

Blackbook design comp:

http://onepotcooking.com/nickmcmaster/samples/blackbook/blackbook.html

Several musician wireframes, rendered as html layouts:

http://onepotcooking.com/nickmcmaster/samples/musician/bio.html
http://onepotcooking.com/nickmcmaster/samples/musician/liquidbio.html
http://onepotcooking.com/nickmcmaster/samples/musician/disco.html
http://onepotcooking.com/nickmcmaster/samples/musician/gallery.html
http://onepotcooking.com/nickmcmaster/samples/musician/singles.html

Here's two versions of the simple wireframe assignment from class 2:
http://onepotcooking.com/nickmcmaster/class2/css/wireframeassignment.html
http://onepotcooking.com/nickmcmaster/class2/css/wireframeassignment2.html

Original powerpoint wireframes are down at the bottom of the blog.

E-Commerce- Class 4

I didn't get a chance to make the design as spiffy as I wanted, but the rollover behavior is there.

Class 4 Assignment: E-Commerce Store

Class 3 CSS assignments

The CSS assignments.

Assignment 1


Assignment 2

Musician website assignment

Here are a few pages I made based on my wireframes. Although it wasn't absolutely necessary, I tried to mimic the use of stylesheets on a pro website, where general styles are dictated by one stylesheet, with more specific css applied by another linked lower in the cascade.

The first is a discography page: nothing too fancy here, just a div with 5 left-floated divs containing images and paragraphs, separated by a br s assigned to clear: both. There's also a foot with some :hover rollover properties.

http://onepotcooking.com/nickmcmaster/class2/musician/disco.html

Two versions of a bio page:

The first is a fixed-width, float-based layout with a fixed footer. I'm having an issue with the footer: it's composed of float-left li s, which have a problem with stacking when you reside the browser window. I tried putting them in a fixed-height div, and that at least stopped it from stacking, but the individual list items still disappear and reappear in a way that doesn't look great.

http://onepotcooking.com/nickmcmaster/class2/musician/bio.html

Next we have a liquid version of the bio made with absolute positioning for the sidebar and the right-side picture. I wrapped the head in two div s to achieve the double-background effect--the graphics look a little wonky, especially when you slide over far enough for the right image to cover the left one, and here on window firefox the black of the right jpg doesn't quite match the black background, but i just wanted to be able to get the effect of an expandable header along with the layout.

http://onepotcooking.com/nickmcmaster/class2/musician/liquidbio.html

Next we have another discography page, ostensibly for singles: nothing too crazy here, just wanted to experiment with floats-within-floats. The gallery is floated right, allowing sidebar to populate the left field (it's just normal HTML). Then the image is floated right, allowing the "credits" textbox to slide up, (just like the two parent divs) and the layout is solidified with a clear:both br Below that, I've put a textbox with overflow: auto and enough text to prompt it to make a text box.

The other sidebar has several img's, ideally these would be links but i didn't bother. They are separated with br s, but interestingly, they don't need to be floated, since img is an inline element. Ideally, the big div to the right would be dynamic content that could be loaded by clicking on the img links, but I'm not there yet!

http://onepotcooking.com/nickmcmaster/class2/musician/singles.html

Last musician page is yet another discography gallery. I made this page to test out a technique I'd heard about for dynamic CSS. Sidebar is floated left, and then I made a gallery with floated img s, some of which are, sneakily, actually divs. These divs contain other divs, with an explanatory paragraph and a background image, that compose a pop-up window. The pop-up div is set with "visibility: hidden" and then a descendant selector is used to change that value to visible on :hover.

That command looks like this:

#makepop1:hover #pop1 {
visibility: visible;
}

Pretty fun! Sadly, a descendant selector seems to be the only way to have :hover trigger a change in property for an element other than the one you're hovering over. I guess javascript is necessary for such remote triggering! Also, I note that here on windows firefox the text is rendering a slightly different size, meaning my careful formatting to keep it within the bounds of the background image is wasted. I thought specifying the text size and padding in pixels would prevent that...I guess a developer's work is never done!

http://onepotcooking.com/nickmcmaster/class2/musician/gallery.html

Lastly, and not really related, I made a version of the CSS Zen Garden. This is a page people are invited to modify, but only by changing the CSS--the HTML remains the same. Mine is pretty sad, especially given my lackluster graphic design, but note the header done with negative margins, the absolutely-positioned side bar (outside the wrapper div), and the fixed framing image. Also, I didn't really get a chance to finish this--the paragraphs and paragraph headings need spacing out. But I figured I'd post it anyway.

http://onepotcooking.com/nickmcmaster/class2/zengardenpage/zengarden.html

Here is my solution to the Class 2 wire-frame assignment, with a few extra features.

Assignment 1

I've added two things using some CSS tricks. One is the bottom underline, which is actually a div with nothing in it but a top-border, moved up with a negative margin.

The other is an image that changes with rollover. It's actually a"sprite," or so I've heard such things called, which is two image states in the same image fit into a box only big enough to display one of them. On :hover, the second part of the image (for our purposes, the second image) moves into view, kindof like an old-fashioned slide show. This uses the background-position property.

Class 1 Assignment

Here are the wireframes for the class 1 assignment.



Here is the "Discography" page. It links to 2 sub-pages not accessible from the main footer link bar, which follow.


And the rest of the pages:

Hello! Here is an interesting new site. Interesting!

And here is a maine coon! Two of them!

Hi! This is my first post on blogger.