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

Working on Javascript Form

I am desperately trying to get the Javascript on my billing/shipping form correct, but I am still having a brain-block when it comes to Javascript principles. It's difficult to remember what you need and where, especially when starting from the beginning. Right now my form is just showing the values associated with each field - I am trying to get one field to copy over to another without naming out every variable. I don't think I'm going about this the right way, so I'll probably start over.

Also, I can't remember what (i=0; i < formEl.billing.length; i++) means exactly.

My code:

//will first determine value of checkbox, true or false - check = true or check=false

function validateForm() {
var formEl = document.getElementById("billing_form");
var selectedCheck = copyOver();

return false;
}

function copyOver() {
var formEl = document.getElementById("billing_form");
for (i=0; i < formEl.billing.length; i++) {
if (formEl.checkme.checked) {
formEl.shipping[i].value = formEl.billing[i].value;
}

else { //if false, then leave blank
formEl.shipping[i].value = "";
}
}
}


//code Submit button

Javascript

I don't really get Javascript. Am I alone?

Class 3 - Intermediate XHTML / CSS Layout

I found that putting together the basic structure of my Social Networking Web Page was a lot easier than previous projects, so at least there's an improvement! I spent a lot of time styling, though, and I hope to get faster at this as time goes on.

Class 3

We went over everyone's websites today. It was interesting to see that people had similar challenges - it made me feel a little better about my struggles (especially with margins). One of the things I've noticed about CSS is that everything can seem haphazard at times; whereas things are very easily lined up using tables in HTML, you have to move things around in a trial-and-error kind of way using padding, margins, etc. in CSS.

We expanded our knowledge of CSS by looking at parent:child relationships, lists, and form elements. Notes from today:

• It is suggested we not use heights for divs
• In Firefox, headings come with padding built in
• #topnav ul li = the li within the ul within the topnav id
• ul.round li.special = any li of class special within any ul of class round
• ul li:hover { }
• ul li#special_item
• Mouse out: ul li img { display: none; }
• Mouse over/hover: ul li:hover img { display:block }
• #container > div = will apply to first level of descendants
  

We also did a quick review of Photoshop CS3.

Good reminders regarding <br class="clear" />:

• Used at the end of every row of floats
• Breaks up rows of divs, not columns
  

Update

I was able to tinker more with the webpage and fixed some of the margin and placement issues. My page happens to look totally different (and a lot worse in IE).

I still could not figure out how to vertically align text to a div, but I adjusted the line-height in my title div to be very small and for some reason this moved the text up. Using vertical-align does not work.

I am still unable to center my page in the browser. I have no idea why this doesn't work, especially since I copied it over from an in-class assignment!

Notes from this week's reading:

• selector:pseudo-class {property: value}

• Use a before or after pseudo-element when you want something repeated multiple times
• The onmouseover attribute defines what will happen when the mouse pointer moves over the image. In this case we want the image to NOT be transparent when we move the mouse pointer over it.

  The syntax for this in Firefox is: this.style.opacity=1 and the syntax in IE is: this.filters.alpha.opacity=100.

• The @media rule allows different style rules for different media in the same style sheet.

• @media screen
  {
  p.test {font-family:verdana,sans-serif; font-size:14px}
  }
  
  @media print
  {
  p.test {font-family:times,serif; font-size:10px}
  }

  @media screen,print
  {
  p.test {font-weight:bold}
  }

Some of the items that confuse me from this week's reading:

- first child: the structure of the selector

• p < em:first-child
  {
  font-weight:bold
  }
• p:first-child em
  {
  font-weight:bold
  }
• img
  {
  opacity:0.4; /* Firefox */
  filter:alpha(opacity=40) /* IE */
  }

- The difference between focus and active for links.

CSS Assignment: Pet Shop

Here is my stab at completing the homework assignment to create our Pet Shop pages using CSS.

I ran into a lot of problems while constructing this page, including the following:

• Margins: These were one of the biggest challenges for me, whether I had to account for 1px borders or margins specific to a div to figure out the overall container size or to understand why certain elements were not lining up. I didn't realize that when adding padding to a div, the text does not automatically re-wrap to fit - rather it makes the div wider, which messes up the margins. I ended up spending most of my time trying to do calculations in my head and getting frustrated when I reloaded my page only to find that everything had shifted around strangely. Moving forward, I will come up with a wireframe that include margin calculations so I can keep track of any changes.
• {display: block}: I tried to get this to work with the <h3> tag so that I didn't have to make the "Pet of the Month" nav bar a whole separate div, but it didn't work. Does display: block only work with divs?
• Spacing elements within divs: How do you increase spacing between text/image elements without using margin or padding (both of which mess up the overall margins) or putting in a lot of nbsp's?
• Vertical alignment: How do you vertically align text in a div? Is this some old-fashioned idea I inherited from HTML?
• Tables: When is it okay to use tables in conjunction with CSS? To post the awards badges, I was tempted to use a table, but maybe there is a better way to do this with CSS only.
  
• Centering my page in the browser: For some reason, I can't get this to work, even though I copied the code over from one of our exercises in class.
  

Class 2 - Basic XHTML / CSS Layout

Here is my first webpage using CSS!

Notes from Today's Class 9/27: CSS

• To link an XHTML file to a CSS file: <link rel="stylesheet" type="text/css" href="styles/main.css" />
  
• To avoid wrapping: <div class="container">
• To put everything on the same line: {float: left;}
• To keep text from wrapping around boxes: <br class="clear" />
• To make sure there is nothing to the left or the right of the break: .clear {clear: both;}
• **Account for border widths in your container (pixels or %s): i.e. 3 bordered boxes with 1px borders (1 on left and 1 on right) = 6px of border width
  

Learned from W3 Schools

HTML: http://www.w3schools.com/html/html_quick.asp

XHTML
XML was designed to describe data and HTML was designed to display data.

1. XHTML elements must be properly nested
2. XHTML elements must always be closed
3. XHTML elements must be in lowercase
4. XHTML documents must have one root element
5. Attribute names must be in lower case
6. Attribute values must be quoted
7. Attribute minimization is forbidden
8. The id attribute replaces the name attribute
9. The XHTML DTD (Document Type Definition) defines mandatory elements

• The lang attribute applies to almost every XHTML element. It specifies the language of the content within an element.
• All XHTML documents must have a DOCTYPE declaration. The html, head and body elements must be present, and the title must be present inside the head element. The DOCTYPE declaration defines the document type: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
• Modules: By splitting XHTML into modules, the W3C (World Wide web Consortium) has created small and well-defined sets of XHTML elements that can be used separately for small devices, or combined with other XML standards into larger and more complex applications.
• DOCTYPE describes in precise, computer-readable language, the allowed syntax and grammar of XHTML markup.

• There are currently 3 XHTML document types:

• STRICT: Use this when you want really clean markup, free of presentational clutter. Use this together with Cascading Style Sheets. Includes elements and attributes that have not been deprecated or do not appear in framesets.
• TRANSITIONAL: Use this when you need to take advantage of HTML's presentational features and when you want to support browsers that don't understand Cascading Style Sheets. Includes everything in the strict DTD plus deprecated elements and attributes.
• FRAMESET: Use this when you want to use HTML Frames to partition the browser window into two or more frames. Includes everything in the transitional DTD plus frames as well.
• XHTML Validator
• Dave Raggett's HTML TIDY
• There are attributes that can be inserted into HTML tags to define event actions. - onmouseover

CSS

• Styles can be specified inside a single HTML element, inside the element of an HTML page, or in an external CSS file. Even multiple external style sheets can be referenced inside a single HTML document.
• All the styles will "cascade" into a new "virtual" style sheet by the following rules, where number four has the highest priority:
1. Browser default
2. External style sheet: Each page must link to the style sheet using the tag. The link tag goes inside the head section: <link rel="stylesheet" type="text/css" style="font-family: monospace;" href=".css>
3. Internal style sheet (inside the tag): An internal style sheet should be used when a single document has a unique style. You define internal styles in the head section by using the

Class 1: Information Architecture: Wireframes

Today we worked on Information Architectures.

A sitemap reveals all of the pages and how they link together.

A wireframe shows the underlying layout of the page.
Here is the wireframe I created for our hypothetical Pet Shop page (click for a larger image):

First Web Development Class

Welcome to my blog!!!!