Final Project

Here is my final project (click to enter site):


Wireframes

Class 9 Assignment - RSS Feed

I was able to create the RSS feed with some modicum of difficulty:

I had trouble undoing some of things I had done in the original uploader, like removing the cookies.

Please note: This does not work in Google Chrome, since that browser does not support RSS feeds.

Class 8 Assignment - Finally Completed

I was finally able to complete the Class 8 assignment - the blog with comments that appear for each post underneath each post. I did a little styling as well:

Now to work on the RSS feed assignment and finish up the final!

Issues with Final Project - Javascript Rollover Nav

I am trying desperately to make my nav button for the javascript rollover work, to no avail.

My idea was that when someone rolls over the Artwork nav button (li with the class 'artwork'), a sub nav (div with class .sub_over) appears with offerings for Painting, Photography, and Writings. I made sure the bottom border for the top nav was applied to each li, as opposed to the whole div, so that I could achieve some flexibility with the javascript.

When the user mouses over the li Artwork, the javascript is supposed to first apply a bottom border of 0px and bottom padding of 10px to the li Artwork - this is to avoid problems when the person mouses down to the sub nav. If there was a bottom border on the Artwork button, this 1px would be considered a mouseout event and would make the sub nav disappear. By eliminating the bottom border and increasing the size of button by 1px on rollover, I create a seamless connection between the button and the sub nav.

Here is my code, which does not work - if anybody has any suggestions, it would be much appreciated!

Event.observe(window, 'load', function() {

setNavBehaviors();

});

function setNavBehaviors() {

$$('.artwork').each( function(el) {

Event.observe(el, 'mouseover', function(evt) {

//make the sub_nav visible by adding visibility to the .sub_over div

showSubNav();

//make sure this even doesn't trigger any other Event observers

Event.stop(evt);

});

//whenever i mouseout of the li, the sub_nav content disappears

Event.observe(el, 'mouseout', function(evt) {

var relTarg = $(evt.relatedTarget);

if (!relTarg.childOf(el) && !(relTarg == el)) {

hideNavContent();

}

});

});

$$('.sub_over').each( function(el) {

Event.observe(el, 'mouseout', function(evt) {

var relTarg = $(evt.relatedTarget); 

if (!relTarg.childOf(el) && !(relTarg == el)) {

hideNavContent();

}

});

});

}

function showSubNav(){

    var ell = $$('.artwork');

ell.each( function(el) {

el.setStyle({

border-bottom: '0px'

padding-bottom: '10px'

});

});

var els = $$('.sub_over');

    els.each( function(el) {

         el.setStyle({

             visibility:'visible'

        });

    });

}

function hideNavContent() {

var els = $$('.sub_over');

    els.each( function(el) {

        el.setStyle({

             visibility:'hidden'

        });

    });

}

Update on Final Project - Dynamic Additions

I was able to get pretty far today with implementing the dynamic functionalities of my site.  

What this first entailed was fixing the gallery pages so that the thumbnail images actually showed up! After creating my thumbnails in Photoshop and putting the image locations in a database, I tried to pull data from the database just as we had learned in class. Nothing appeared on my page! I could not for the life of me figure out why.

Amos pointed out that in my gallery controller page I had the gallery view page before I got the paintings for the page. This means that the page loaded and the paintings were received after the load! I switched things around and the paintings showed up:

//get the paintings page - function in paintings_model

$paintings = getPaintings();

//print_r($paintings);

require_once("paintings_view.php");

I was able to use lightbox.js to create a dynamic and fancy-looking gallery - I grouped the paintings by series using a lightbox command. This means that when you view the main paintings page, which shows all of the series together, you can click on an image and have it pop up over the page, then scroll through only that series by hitting the next image in the pop-up window. Pretty fancy!

After that, I was having issues with my gallery left nav bar. When you go to the paintings page, selections for paintings series appear on the left nav, and by clicking a series, only those paintings were supposed to appear. This turned out to need an Ajax command with a PHP variable passed in to for the series name. Enabling this functionality was a lot more difficult than I expected!

Now I'm working on cleaning everything up, getting the photograph and show images in there, and creating a roll-over for the Artwork nav button that pops up a sub nav with Paintings, Photography, and Writings options.

I've decided to nix the Mailing List as no other artist webpage has this - for these kinds of pages I think the motto is the simpler the better.

Today's Class

In today's class we went over webpage security protocol, basic search engine methods, and Google Analytics. Facebook applications were also part of the discussion, as we looked at the Facebook developer site.

Additionally, we had an information architect speak to us about her practice. She is a graduate of the NYU ITP and developed the site FoodEvents.com with a designer. In her words, an information architect is responsible for a site's content structure and usability, as opposed to the web designer who looks primarily at the style and layout aspects.

For part of the presentation, she showed us her ideas for a redesign of the site in the style of craigslist and asked for our opinions. In addition to her work as an information architect, she also gives food tours of NYC.

We spent the rest of class working on our final projects - I'll give an update in my next post!

Update - Front Page Complete

With the holidays, it's been difficult to grab some time to work on the final project, but I managed to hammer out the structure and style for the main page of the site and am now working on the view for the artwork pages, which include a left nav.

I created a Javascript rollover for the front page and am going to try to do a rollover show/hide to pop up a sub nav when you roll over the Artwork option on the main nav bar.

I have been doing a little cross-browser testing as I go along (including Google Chrome), and strangely enough my only issue so far has been with Firefox. When you roll over a nav item, all browsers have a hover background and the text color changes, except in Firefox you have to hover your mouse within a certain area of the button for the text to change color. I am going to continue playing around with the CSS until I get this right.