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.

Basic Prototype.js Examples

• $() is short-hand for document.getElementById()
• $$() allows you to use CSS-style selectors to get a list of matching XHTML elements
• the .setStyle() function allows you to set styles of any Element
• create "event observers" to detect page loads, mouseover events, mouseout events, and click events on any element
• The functions .addClassName() and .removeClassName() allow you to add and remove class names from any element. This example also shows how to use event observers.
• Using the .cumulativeOffset() function of any element gives you its exact position (in pixels) on the page
• Using the .getDimensions() function of any element gives you its exact width and height in pixels

Basic Javascript Examples

• How to create a "for loop"
• Another example of loops (from class #4)
• How to create if/then statements (a.k.a. conditionals)
• How to define and call a function
• Another example of functions (from class #4)
• How to make things disappear
• Another example of making things appear and disappear (from class #4)
• How to put a print button on your page
• How to make a simple onclick event handler (from class #4)
• How to make a simple onmouseover event handler (from class #4)
• The three most common event handlers
• How to change an element's class attribute (from class #4)
• How to change an element's style (from class #4)
• Very very basic form validation (from class #4)
• How to determine whether a checkbox has been checked or not (from class #4)
• How to determine the value of a radio button (from class #4)

Prototype.js - A Javascript Framework

Prototype.js is a "javascript framework". It is a very popular set of Javascript functions and objects that add extra functionality to the basic Javascript commands available in most browsers. Prototype is useful on at least three levels:

1. it simplifies many things that are normally very complicated in Javascript
2. it provides a single cross-browser compatible way of doing many routine task that used to have to be done differently for different browsers
3. Javascript is erratic, moody, and idiosyncratic. Prototype provides a consistent, "reasonable" set of interfaces that act as you would expect them to.
   

Here are some useful links:
The official prototype.js site
An unofficial (but very popular) guide to prototype.js

Class 5 - In Class Assignment

Your assignment, should you choose to accept it, is to convert this wireframe of an e-commerce store into an actual web page, using XHTML, CSS, and Javascript.

When a user mouses over any of the product thumbnails, more information about that product "pops up" over the thumbnail. When a user mouses off of the thumbnail, the product info disappears again.





Suggestions for how to structure your javascript for this assignment:

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

Some example files that will help:
How to get the position of any element on the page using prototype.js
An example of a tabbed layout using prototype.js

Standard Ad Sizes

Banner ads come in a variety of shapes and sizes. When you're designing a site where you intend to show ads, it sometimes helps to have "placeholder" ads so you can make sure that you are leaving enough space available for the ads you will end up running.

This site provides placeholder images of all the common ad sizes.
http://www.webpencil.com/bannersizes.php

Regular Expressions

In class, we have only scratched the surface of how to validate the data that a user enters in a form. For a variety of reasons, you sometimes want to know more exactly whether a user has entered in the type of data that you are expecting to receive from the form.

To do so, you need to use Regular Expressions. Regular Expressions syntax is almost an entire language in itself, and is very confusing to the uninitiated reader. There are thick books devoted to the topic available at most book stores, if you are so inclined.

This site does a decent (but not stellar) job of explaining how Regular Expressions are used.
http://www.regular-expressions.info/

Once you are familiar with the theory behind Regular Expressions, this page will instruct you on how to use them in Javascript.
http://www.regular-expressions.info/javascript.html

Class 4 - In Class Assignment

Your assignment:

imagine you are creating a shopping cart checkout page. The user has to enter his/her Shipping Address and Billing Address. Often, these two addresses are the same. So you want to make it possible for a user to only enter his/her Billing Address and click a checkbox to automatically fill in the Shipping Address with the same info as the Billing Address.

Additionally, if a user unchecks the checkbox, you want to wipe out the data that is entered in the Shipping Address.

Class 3 - In-Class Assignment #1

Convert this into code!


You must use the types of CSS selectors we discussed today in class, for example:
#container h1 {}
#container > div > h1
#container ul li p
#container ul.ready li p

And, you must make the horizontal top menu using <ul> and <li> tags.

Updated Class Blog List: Goodbye Netvibes

Netvibes has mysteriously deleted my entire list of class blogs. Due to my own difficulties with Netvibes, and based on some student feedback, I now recommend you switch to Google Reader, which is an alternative blog aggregator.

So you don't have to re-enter all the class blogs, I've created an OPML file with the entire list of class blogs in it. In Google Reader, you will be able to import the OPML file which will automatically set up the entire class blog list for you.

OPML is another subset of XML, like XHTML. But unlike XHTML, OPML is specifically designed to contain abstract lists of things. In this case, it contains a list of RSS feeds (another subset of XML) for all the blogs. (more on OPML here / more on RSS here)

To import the OPML file,

1. visit this URL in Firefox: http://onepotcooking.com/amosbloomberg/f2008/class_info/blogs/webdev_student_blogs.xml
2. click File->Save Page As... and save it to your hard drive.
3. go to your Google Reader page (http://www.google.com/reader) - you will need to set up an account if you don't already have one
4. on your Google Reader page, you will see a link at the bottom left that reads, "Manage subscriptions". Click it!
5. on the Settings page, click the tab called, "Import/Export"
6. Click "Browse" and find the file you saved on your hard drive
7. Click "Upload"
8. Done! Now the class blog list should show up on your main Google Reader page
   

The Secret to Layout: Float and Clear

As we discussed in class 2 (September 27), the secret to creating layouts with CSS depends upon the proper use of the properties "float" and "clear".

For example, say you were trying to code a page with the following layout:

The outer box is meant to represent the outline of the page. The layout is basically a grid: two rows and two columns.

The Question: How do you create that in XHTML and CSS?

The Answer: Using XHTML div tags, and the CSS properties float and clear.

Here is another version of the same diagram, but this one indicates how we would break the first diagram down into blocks of code:

First, a quick explanation of this diagram:

To make things obvious, the boxes in the diagram each show their respective CSS "selectors". In other words, the box titled "div#container" indicates that this is an xhtml div element with an id="container".

As you know, a tag like <div id="container" >

allows us to use a style sheet that is associated only with that id. Similarly, a tag like <div class="column" > allows us to use a style sheet that is associated with all elements that have class="column".

The dotted line around the "br.clear" box indicates that it will actually be invisible on the page.

So our XHTML will look something like this:

<div id="container">

<div class="column"></div>
<div class="column"></div>
<br class="clear" />

<div class="column"></div>
<div class="column"></div>
<br class="clear" />

</div>

And our CSS will look something like this:

#container {
width: 644px; /* the sum of the container padding, plus the widths of all the boxes inside the container, plus all their borders and margins */
/* do not specify the height of the container, this makes it somewhat flexible */
margin: 0 auto; /*centers the div on the page */
border: 1px solid red;
padding: 10px;
}

.column {
float: left; /* allows all divs with clas="column" to stack up horizontally */
width: 300px;
height: 300px;
border: 1px solid orange;
margin: 10px;
}

.clear {
clear: both; /* marks the end of a row. remember, every time you float, you must clear! */
height: 0px;
}

You can see what this looks like here