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.

Wireframes

Click to see wireframes for my website:

Main page

Bio page

Artworks Page (Paintings and Photography)

Writings Page

Artist's Statement

Shows

Mailing List

Contact Info

Final Project Idea

For my final project, I intent to build a site to showcase the portfolio of one of my artist friends. For the most part, artist's sites are fairly bare, mostly showcasing the works, so I am going to try to add in interactivity in an unobtrusive manner.

CSS:
I am thinking of a top nav that directs you to general pages like Artwork, Biography, Artist's Statement, Shows, Contact/Mailing List, maybe a Blog, etc. When you select Artwork, a left nav will appear with the names of artistic series (e.g. Hand Paintings, Black and White photography) - I want a similar thing for the Shows option (left nav will have show names, locations.

Thumbnails of the artworks will appear in a style much like the eCommerce project we did and when you click on them, a window will pop up to show a larger version (see JavaScript ideas).

The overall look itself will be dark/mystical to match the feel of her paintings.

JavaScript:
I noticed that a lot of people used lightbox.js for their image uploader - I want to implement this for the artwork pages.

If I decide to make a blog, I also want to use JavaScript to implement a show/hide feature for the comments left by others.

PHP/mySQL:
I will create a mailing list sign-up that will allow my friend to send out reminders about shows, news, etc. If I decide to create a blog, there will be an authentication required for people to leave comments.

I'm sure more programming ideas will come to me in the next week.

Class 8 - Authentication & Blog Comments

So far I have the authentication working, but I've been having issues getting the comments to post to my blog - it looks like the comments don't capture the username, nor the comments themselves. Instead of comments, the blogger_id comes up. I've been staring at all of this for a while, so I'm probably just going to have to give it a break for now until I flesh out my final project idea.

No styling as of yet - I want to get the comments working!

Update to Image Uploader

I was able to correct a lot of the problems I had:

• I seemed to be able to fix the log-in issue by including /joannaslotkin in the path name instead of leaving this blank - I'm not sure if this was the real issue, but it seemed to fix it
  
• Now you can see everyone's uploaded files - whenever I replaced the files folder on the server, it would clear out any images I had
  
• Logging out works now because I actually directed it to the correct directory and file name :-p
  

I have had quite a bit of trouble formatting pages and remembering what classes are named where. The next time I do a project like this, I will be sure to leave a LOT of comments on my CSS sheet.

Class 7 - Image Uploader

So...I had a lot of trouble with this and there are still some things that don't work:

• For log-ins, you can register whatever username and password you want, but the usernames keep going in as the initial username you entered on the logins.txt page - if you try to login with a new username you register on the same computer, it doesn't work. It works if you enter your initial username and the new password you registered. Weird! Must be a cookie problem.
  
• Even though I changed the file permissions, you can only see the images you uploaded, not what others uploaded.
• Logging out doesn't work - I set the logout to go up a directory to the index page and show the message "Logout successful," but it keeps going up a directory and looking for images.php which is the name of my image services page

I still need to format the images page. Ugh!

Assignment Links

Here are links to the assignments I have completed in class so far:

Class 1 - Information Architecture - Wireframing

Class 2a - Basic XHTML / CSS Layout
Class 2b - Pet Shop

Class 3 - Intermediate XHTML / CSS Layout

Class 4 - Forms with Javascript

Class 5 - Advanced XHTML / CSS / Javascript

Class 6 - PHP (2 pages - click on page 2 or Next)

PHP Forms

Important link for all your php needs: php.net

For PHP forms you can use either the GET or POST parameters; alternately the REQUEST parameter will both GET and POST.

If somebody submits a form without entering any information, you can send them back to the form like so:

if (empty($fullName)) { //empty is a built-in php function
header("Location:forms.html"); //special HTTP header
}

You can also send an alert once they have been returned to the main form:

if (empty($fullName)) { //empty is a built-in php function
header("Location:forms.php?error=true"); //special HTTP header
}


In the body, you can put:

<?php if($hasError): ?> //: is an alternative to { } offered in php ?>
<p><? = $errorMessage ?></p>
<?php endif ?>


In the php section put:

<?php

$hasError = false; //initially false on first visit because they have not clicked submit yet
if ($_REQUEST['error'] == 'true') { //error is the name or key
$errorMessage = "Please enter something";
$hasError = true; //sets the flag to true
}
?>

Class 6: PHP for eCommerce Page

Here is my PHP assignment - you can click on page 2 or Next and see the second page also created from PHP.

I fixed some of the styling and I was able to fix the flickering effect thanks to Amos' post.

I still have a few outlying issues with PHP, like knowing when it is best to use an array, or the fact that I get an error message whenever I create a php file for inclusion in my main php file and include the <?p ?> tags around it - are you not supposed to include these tags when the php file includes html?? I get really confused about when you use these tags and the html tags

Class 6 - PHP

Today we were introduced to PHP and given a homework assignment to read in its entirety for next week: PHP Tutorial

Good things to remember about PHP:

• PHP is server-side
• Before the server sends the requested .php doc to the client requester, it takes out the PHP and replaces it with what the PHP outputs - this means that when you "View Source" of a php webpage, it will show you the source code as it would read in the html
  
• Tags look like this: <?php ?>
• Always put dollar signs in front of variables
• You don't need to put PHP in the <head> since it is never seen by the browser
• Used to integrate with databases
• Can use the following Frameworks to simplify PHP: Symfony or Cake PHP
• Recommended to keep a separate file for functions
• Variables defined in the main PHP script can be reused in included scripts - what this means is if you define a variable in the PHP on your main page, you can reuse the same variable (with the same definition) in any "included" scripts
  

These are all equivalents to printing to the screen:
echo "Hello PHP"
= print("Hello PHP"); //another way to write it in PHP
= document.write("Hello PHP"); //in JavaScript

Loops:
for ($i=0; $i<10; $i++) {
echo $i;
echo "<br />";
}

Calling a Function:
<?php printSomething(); ?>

Templatizing:
function printSomething($title, $imgsrc, $description) {
print <<<END //<<<END allows you to print a function for multiple items
<div class="product">
<h2>{$title}</h2>>
<p>{$description}</p>
<img src="{$imgsrc}" />
}

In the body:
<? php printSomething("Product 1","images/product1.jpg","something")?>

Including a separate PHP file for reusability across pages:
<?php include("includes/top_nav.php")> //include is a built-in PHP function

Shorthand for Echoing a Variable
<title><? = $pageTitle ?></title>

Class 6 - JavaScript Assignments Review

We spent the earlier part of today going over today's pop quiz answers and showing the class our eCommerce site with JavaScript rollovers. It looks like some people went with the Add/Remove class name technique, whereas others went with the setStyle technique.

Also, there were issues with flickering when mousing over an image and moving between product content text elements (e.g. moving your mouse between the product name and the product description) - Amos is looking into this. There are also issues with the product content "sticking," i.e. not always disappearing on mouseout.

Amos finally helped me figure out some of my page's JavaScript problems - perhaps the biggest of these was the fact that I had assigned the class name of my thumb images (class = "thumbs") to the thumb content (class = "thumbs content") as well!! Additionally, I neglected to add the left and top positions to the element itself, and accidentally added them to the element id:

var contentElId = el.id + "_content";
//alert(contentElId);
var contentEl = $(contentElId); //get the actual element, not the id
contentEl.style.left = leftPos + "px";
contentEl.style.top = topPos + "px";

The mouseout event on the content divs needs to be separated from the mouseover event, but still contained within the setThumbBehaviors function. Within the Event observed mouseout event, it should not be el.id+"_content", as you are getting the Elements by Id already for the class content:

$$('.content').each( function(el) {
var contentElId = el.id; //remove +_content

Working on eCommerce Site

I'm working on the current assignment: an eCommerce site where you mouseover images, revealing their product information in place of the product; when you roll off, the image returns to normal.

Right now, I have the page set up so that when you roll over an image, the div with product information appears...just not over the original image; instead, it appears in the div below and only disappears when I roll over the product info again. I need to come up with something in my code that positions the new div in the right place.

What this involves script-wise is adding a class name to the image div when rolled over, then remove the div name when rolled off. Easier said than done!

Another problem I have is with the CSS buttons - I can't get the link to apply to the entire button (button meaning inline un-ordered list), only to the linked text in the button. I tried putting the link around the <li> instead, but it made no difference.

A good starting place for me was Amos' list of steps:

1) create an event observer that detects the "load" of the window
2) that observer calls a function called setThumbBehaviors()
3) the function setThumbBehaviors should get a list of all the elements that are thumbnails (hopefully you've set up the thumbnails in your XHTML so that they all have the same class name)
4) loop through each thumbnail element (using the .each() function of prototype), and attach an event observer to each one that detects "mouseover" events
5) the "mouseover" event observer should call a function whenever a user mouses over a thumbnail
6) that function should calculate the exact position of the thumbnail that was moused over, and figure out which "product info" div is associated with that thumbnail (see the tabs example).
7) the function should then make the "product info" div visible, and position it at exactly the same spot as the thumbnail info

I did a lot of copying and pasting from class examples - I'm hoping to go back and understand everything later.

Recommended Websites

• JSON - JavaScript Object Notation
  

• Prototype Library
• JQuery
• Dojo
• Scriptaculous
• Yahoo User Interface Library
• Eclipse.org - Integrated Development Environment
• Expression Web2 - Microsoft
  

Billing Form from Class #4

So after reading the HTML DOM tutorial (pretty helpful), re-reading the JavaScript tutorial, and reading the DHTML tutorial, I am much more comfortable in my understanding of JavaScript - I still struggle with knowing how to begin coding, but I can read it comfortably and execute it once I have a little jumpstart. I know that this will still take me a long time to really "get," but I've made strides compared to last week.

At first I looked through all the scripts from the fourth class and tried to meld them together in some weird hybrid (see previous post), but that didn't really work. After a long time, I looked through other people's blogs for some kind of help. Robin W.'s blog really helped me - she had code hints with comments that described each step of the script, so that I at least had some direction. Hopefully, moving forward, I will really be able to do this all on my own.

//get checkbox element using its id
//get billing elements using ids
//get shipping elements using ids
//if checkbox is checked, copy billing info to shipping
//if checkbox is unchecked, remove info from shipping

I didn't get around to:
//Validate Form
//code Submit button

A few things I struggled with:

- Remembering how/when to pass parameters into a function - I kept forgetting to put the checkbox id in the method copyOver() :

• <input type="checkbox" name="checkme" id="checkme" onclick="copyOver('checkme');" />

- Remembering how variables and method parameters interact:

function copyOver(checkboxElId) {
//get checkbox element using its id
var checkboxEl = document.getElementById(checkboxElId);

later this would become checkboxEl.checked in the if statement