Paragraph Typography

Another nice page about paragraph typography on the web, from the same site as my last post.

http://jontangerine.com/log/2008/06/the-paragraph-in-web-typography-and-design

Elastic Layouts

Here's a great site about how to make sure your pages scale well with elastic layouts:
http://jontangerine.com/log/2007/09/the-incredible-em-and-elastic-layouts-with-css

Client-Side Assignments Must Be Complete

Now that we will be switching focus from client-side technologies to server-side technologies, it's important for grading and other officious duties that you go back and make sure you have completed all the assignments from the first half of this course.

Please make sure I can easily find all the assignments to date by going to your blog. You should have easy-to-find links on your blog to each fully-functioning, completed, ready-to-be-grade assignment. You must have properly followed the instructions and requirements for each assignment. In other words, I'm giving you the chance to go back and clean up any sloppy work, so make sure it's good.

Here are the assignments I expect you to have completed before next class:

Class 1 - Information Architecture - Wireframing
http://nyuwebdevf2008.blogspot.com/2008/09/in-class-assignment.html

Class 2 - Basic XHTML / CSS Layout
http://nyuwebdevf2008.blogspot.com/2008/09/class-2-in-class-assignment.html

Class 3 - Intermediate XHTML / CSS Layout
http://nyuwebdevf2008.blogspot.com/2008/10/class-3-in-class-assignment-1.html

Class 4 - Forms with Javascript
http://nyuwebdevf2008.blogspot.com/2008/10/class-4-in-class-assignment.html

Class 5 - Advanced XHTML / CSS / Javascript
http://nyuwebdevf2008.blogspot.com/2008/10/class-5-in-class-assignment.html

Class Mailing List

Everyone should sign up for the class mailing list. If, for whatever reason, you feel you would like to send an email out to everyone in the class, you can send the email to the mailing list, and it will automatically be forwarded to eveyone.

This is the same list that I have used for several prior classes I have taught, so you should be aware that this list is open to anyone who has ever taken this class.

My former studets are all very nice, and if you post a problem to the lst, more often than not, a former student wil be more than happy to help you out with problems you come across, since they have been there and done that.

If you have not received an invitation to join this mailing list, please send me an email.

Preventing Flickering on Mouseover and Mouseout Events

As many of you noticed with your e-commerce pages, Javascript mouseover and mouseout events can sometimes behave in unexpected ways. Events can be triggered when you least expect them.

This site outlines the problem clearly:
http://dynamic-tools.net/toolbox/isMouseLeaveOrEnter/

However, since we are using the wonderful prototype.js framework, we can solve this problem more elegantly than this site's authors did using just basic horrible Javascript.

To exhibit my solution to this problem, I have "borrowed" Joanna's site:
http://onepotcooking.com/amosbloomberg/f2008/class6/ecommerce/

If you check the Javascript, you will see I have added some code in the mouseout event handler of the product info divs. In the assignment, we said that when a user mouses out of a product info div, we should hide the div. However, the browser triggers those mouseout events far too often.

The browser thinks a user moused out of one of those divs even when a user mouses over any other element within one of those divs. So we get a flickering effect as the mouseout event handlers hide the divs, and the mouseover event handlers on the thumbnail images immediately show them again. On off on off on off on off, etc.

To solve this, we don't just hide the product info div when the mouseout event is triggered. We first check to make sure the user really moused off of the product info div before hiding it. To do this we check the "relatedTarget" of the mouseout event and make sure it is not a child of the product info div.

The relatedTarget property of any mouseover or mouseout event in Javascript is a built-in property in all Javascript, not just in prototype.js. For mouseover events, it holds the element that the user just left. In the case of mouseout events, it holds the element that the user is going to.

So we chek this relatedTarget element for the mouseout events. If it is a child of the product info div that triggered the mouseout event, we don't hide the product info div. If it's not a child of the product info div, we do hid that div.

All this in a few lines of code, thanks to prototype.js's childOf() function that easily allows us to check whether one element is a child of another element.

Here's the relevant code:

  //whenever a user user mouses over the container div, call an event handler
Event.observe(el, 'mouseout', function(evt) {
   //regular javascript mouseover and mouseout events automatically have a property "relatedTarget"
   //in the case of mouseover events, this property holds the element that user came from before they moused over this element
   //in the case of mouseout events, this property holds the element that the user went to after they left this element
   var relTarg = $(evt.relatedTarget); //get the relatedTarget for this event, and make sure it has all the nice prototype.js extra functions
   //if the relatedTarget is not a child of the current element, and it is not the same element as the current element, hide the product info divs
   if (!relTarg.childOf(el) && !(relTarg == el)) {
    //prototype.js provides a nice function "childOf()" to check if one element is a child element of another element
    //in this case, we've checked to make sure the relatedTarget is not a child of the element that triggered the mouseout event
    hideAllContent();
   }
});

Class 6 - In-Class Assignment - Templating

Your in-class assignment, and homework assignment for Class 6 was to use PHP to templatize the e-commerce pages you made last class.

What do I mean templatize? If you had a real store with hundreds or thousands of products, you would not want to hand-code all the pages and hand code all of the image tags and information for all of the products. You would want to use templates for those elements that are common across all pages. You write one snippet of HTML somewhere and re-use it all across the site.

Not only do you not have to rewrite the same code hundreds of times, but templatizing also makes site maintenance easier. If someone wants to change slightly the design of how the products are displayed, for example, they only have to make a change in one place, not in thousands of different places.

For this assignment, you will be templatizing the top-nav section of your pages, the footer, and each of the products in the store. The product thumbnails and product detail information divs for all products in the store should be working off of one template that is applied to all products. Of course, this means that your Javascript code that creates the mouseover effect on all product thumbnails will also have to work with the templates.

You will want to look at the example code we worked on in Class 6 to see how we templatized certain parts of those pages.

PHP Tutorial

Here is the PHP tutorial site:

http://www.tizag.com/phpT/

Given how many of you are still working on the Javascript assignment, I am not requiring you to have read this by this Saturday. But you will be expected to have covered all of this tutorial by next Saturday.