FInal PRESENTATIONS 2

Everyone, please post links to your final projects as comments to this post even if you went last week (just so its easy for me and I have all of them in one place).

Last Week:

• Najlah


• Rashida


• Ara


• Chris


• Jae Hwan


• Tyler

TODAY:

• Lev


• Miliam


• Yelena


• Andre


• Ji Young

FINAL PRESENTATIONS #1 of 2

Today people, post links to your final sites in "comments"

TODAY:

• Najlah


• Rashida


• Ara


• Chris


• Jae Hwan


• Tyler

NEXT WEEK:

• Lev


• Miliam


• Yelena


• Andre


• Ji Young

Week #13

post links to your html versions of your site

multimedia

• As we discussed last week because of the active content bug on ie, putting multimedia files into your HTML is tricky. There is basically no agreement within the industry on what the best way to do this is because the ways that actually work best in the real world are inelegant and not standards compliant. Because of this, i'm taking the practical road on these and showing you some techniques that work now. If you continue in this field, you'll need to keep yourself up-to-date as the argument rages on, and when someone figures out a way that is elegant, standards compliant, and works well on all major browsers and platforms, you'll need to learn that technique in order to provide the best service to your clients.


• There is an excellent and full introduction to these issues on the teaching blog of Catherine Garnier



• EXAMPLES:
  all of these, except the youtube example, use the external javascript method of putting content into your site
  
  
  
  
  • example of quicktime embedded in the old fashioned, simple, pre-windows-active-content-bug way
  
  
  • YouTube example
  
  
  • Good Flash example
  
  
  • Quick Time example
  
  
  • using a streaming video server
  
  
  
  
  
  
  
  
  
  
  
  


• From the horse's mouth, as they say:
  
  
  
  • apple on how to embed quicktime
  
  
  • all my multimedia bookmarks
  
  
  
  
  

final presentations list:

May 1:
Najlah
Rashida
Ara
Chris
Jae Hwan
Tyler


May 8
Lev
Miliam
Yelena
Andre
Ji Young

Week #12

Ok-- its time to present your HTML - the assignment from last week was to have an HTML version of your home page that you have validated and have checked on a PC - please post links to your home work pages and post links to this home work on those pages.

We will spend most of the day talking about techniques for making your pages work in HTML- but we will also look at these three things:

• Formmail


• JQuery


• flexcroll I believe we already talked about

The Rule about Javascript is that you are free to use code from anywhwere so long as you a) cite it and b) fully understand how it works. There can be exceptions- For example if you want to use some very complex javascript, so complex that you probably can't figure out how all of it works yourself, like in JQuery or in the Flexcroll above, you just need to talk to me about it- if you have a good reason to use it, and what you want to use it for is not something you could figure out how to do yourself, then i'll make an exception. NO EXCEPTIONS WITHOUT TALKING TO ME FIRST! - some of you already have....and of course you still have to cite where you got the code from - that never changes.

home work

Next week is spring break, so for two weeks from today- the assignment is to have a working beta version of your site.

what is a working beta?

its a version of your site that has all the pages built, and all the pages linking to each other. It might still have some "Lorem Iposom" text in it, it might have stand-in pictures instead of real pictures. It should NOT- have big blank spaces- put in fake text and pictures if you don't have the real text and real pictures so you know how you're going to style them and how you're going to space them. A beta version of a site may still have some bugs and may not look right in all browsers but its got all of its major parts and it pretty-much works. That is your goal for when we come back and you'll be showing them in class on that day. Belive me you want to have all of the remaining weeks to polish and tweak and make every little detail work just right, you're going to need that time- the last little bits always take longer than you think.

Week #11

Post your homework to the comments of this post! which, i believe, was an HTML version of your home page, no?

Last week we spent the whole time talking about design (which is really kind of a good thing) so this week we'll talk about what we were going to do last time, and then, if we get time, we'll talk about mashups and API's

Form Processing with PHP

In order to process the information submitted by a user to a form on your site, you need a way to capture that data. Because HTML, CSS, and JavaScript all happen on the client-side, and can’t send information back to the browser, you need something like PHP, working on the server side, to do this. We’re going to go over two very simple form processing scripts today.

The first example is for sending the results of a form as an email.

Sample Files: (control+click or right click to download)

• Form


• Form Handler

download the zip file containing the php

Step 1, Set the Form Action

To invoke the PHP code you are going to use to process the form, you are going to submit the form to a .php page. This is accomplished by setting the form action to the name of the page:

<form action=”email_form.php” method=”post”>

Step 2, Create the handler script

Next, you are going to create a .php file to process the form contents. In this example, we are going to name this script email_form.php

By submitting our form to this script, the values from the form are passed to it. These values are automatically stored in an array called $_POST. We can now access the values in this array, and the first thing we need to do is to make them easier to work with:

//Change post variables to regular variables

$ipod = $_POST['ipod'];


$laptop = $_POST['laptop'];

$cell_phone = $_POST['cell_phone'];

$borough = $_POST['borough'];

Note that the values between the brackets [’…’] match the names of the inputs you passed from your form.

The next thing you need to do is turn all these values into a single string so it can be emailed:

//Turn all the variables into a single string.

//Note: .= appends to the current variable value rather than replacing it

$formresults = "Ipod: ".$ipod."\n";


$formresults .= "Laptop: ".$laptop."\n";

$formresults .= "Cellphone: ".$cell_phone."\n";

$formresults .= "Borough: ".$borough;

Next, you will use the built-in function called mail to email the form results to the designated email:

//send values as email

mail("youremail@domain.com", "Form Results from Web site", $formresults, "From: youremailhere@yourdomain.com");

Now, it’s good practice to give your visitors a confirmation message so they know their information was submitted:

//print opening html

print("<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"


\"http://www.w3.org/TR/html4/loose.dtd\">

<html>

<head>

<title>Form Example</title>

<meta name=\"generator\" content=\"BBEdit 8.2\">

</head>

<body>");

//Print confirmation message to the screen

print("Your answers have been emailed to our secret headquarters. Thanks for playing!");

//print closing html

print("</body>

</html>");

Last, don’t forget to close your php tag:

?>

Saving Form Results to a File

Say instead of emailing your results you just want to store them in a file on your server. This example shows you how.

Sample Files: (control+click or right click to download)

• Form


• Form Handler

Your form file remains the same, but for the purpose of this example, we are going to change the action to this:

<form action=”file_form.php” method=”post”>

This time we are processing the form with a php script called file_form.php

The beginning of this script is identical to the previous example.

//Change post variables to regular variables

$ipod = $_POST['ipod'];

$laptop = $_POST['laptop'];

$cell_phone = $_POST['cell_phone'];

$borough = $_POST['borough'];

//Turn all the variables into a single string.

//Note: .= appends to the current variable value rather than replacing it

$formresults = "Ipod: ".$ipod."\n>";


$formresults .= "Laptop: ".$laptop."\n";

$formresults .= "Cellphone: ".$cell_phone."\n";

$formresults .= "Borough: ".$borough;

This time, however, you are going to use a number of functions that are designed to handle opening, writing, and closing files on the server.

//this code is adapted from Example 1 at http://us3.php.net/manual/en/function.fwrite.php

//identify the file

$filename = "formdata.txt";

//see if the file exists and is writable




// Let's make sure the file exists and is writable first.

if (is_writable($filename)) {

// the function fopen opens the specified file. The 'a' argument opens the file in append mode

if (!$handle = fopen($filename, 'a')) {

echo "Cannot open file ($filename)";

exit;

}

// Write $file to our opened file.

if (fwrite($handle, $formresults) === FALSE) {


echo "Cannot write to file ($filename)";

exit;

}

//close the file

fclose($handle);

} else {

echo "The file $filename is not writable";

exit;

}

The last thing you need to do is create the text file. Open up a text editor and save a blank document as formdata.txt. Upload it to your site. You may need change the file permissions in order for the script to work right. The permissions should be 666, readable and writeable by everyone.

---

Mashups, "the distributed web" how to leverage other people's technology for your own client's benifit

• best of list for mashups
• Best Mashup Awards
• Twitter and Twitter Mashups
• Good article 10 API's you can really use


• Delicious Javascript API's


• You Tube's Javascript API

oh, yeah one more thing about Server Side includes (discussed in week 9)

• How to use them cleverly with CSS

Homework for next week

-Revised HTML versions of your client's home page, Validated and tested on A PC! --layout need not be perfect on a PC but I want you to know what problems you are going to have to deal with now, not later - therefore i want a screenshot of your page on a pc to prove you tested it! can be a jpg or any kind of digital file- and it can be anywhere on the web- so long as i can see it

Week 10

Post your homework to the comments of this post!

Form Processing with PHP

In order to process the information submitted by a user to a form on your site, you need a way to capture that data. Because HTML, CSS, and JavaScript all happen on the client-side, and can’t send information back to the browser, you need something like PHP, working on the server side, to do this. We’re going to go over two very simple form processing scripts today.

The first example is for sending the results of a form as an email.

Sample Files: (control+click or right click to download)

• Form


• Form Handler

Step 1, Set the Form Action

To invoke the PHP code you are going to use to process the form, you are going to submit the form to a .php page. This is accomplished by setting the form action to the name of the page:

<form action=”email_form.php” method=”post”>

Step 2, Create the handler script

Next, you are going to create a .php file to process the form contents. In this example, we are going to name this script email_form.php

By submitting our form to this script, the values from the form are passed to it. These values are automatically stored in an array called $_POST. We can now access the values in this array, and the first thing we need to do is to make them easier to work with:

//Change post variables to regular variables

$ipod = $_POST['ipod'];


$laptop = $_POST['laptop'];

$cell_phone = $_POST['cell_phone'];

$borough = $_POST['borough'];

Note that the values between the brackets [’…’] match the names of the inputs you passed from your form.

The next thing you need to do is turn all these values into a single string so it can be emailed:

//Turn all the variables into a single string.

//Note: .= appends to the current variable value rather than replacing it

$formresults = "Ipod: ".$ipod."\n";


$formresults .= "Laptop: ".$laptop."\n";

$formresults .= "Cellphone: ".$cell_phone."\n";

$formresults .= "Borough: ".$borough;

Next, you will use the built-in function called mail to email the form results to the designated email:

//send values as email

mail("youremail@domain.com", "Form Results from Web site", $formresults, "From: youremailhere@yourdomain.com");

Now, it’s good practice to give your visitors a confirmation message so they know their information was submitted:

//print opening html

print("<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"


\"http://www.w3.org/TR/html4/loose.dtd\">

<html>

<head>

<title>Form Example</title>

<meta name=\"generator\" content=\"BBEdit 8.2\">

</head>

<body>");

//Print confirmation message to the screen

print("Your answers have been emailed to our secret headquarters. Thanks for playing!");

//print closing html

print("</body>

</html>");

Last, don’t forget to close your php tag:

?>

Saving Form Results to a File

Say instead of emailing your results you just want to store them in a file on your server. This example shows you how.

Sample Files: (control+click or right click to download)

• Form


• Form Handler

Your form file remains the same, but for the purpose of this example, we are going to change the action to this:

<form action=”file_form.php” method=”post”>

This time we are processing the form with a php script called file_form.php

The beginning of this script is identical to the previous example.

//Change post variables to regular variables

$ipod = $_POST['ipod'];

$laptop = $_POST['laptop'];

$cell_phone = $_POST['cell_phone'];

$borough = $_POST['borough'];

//Turn all the variables into a single string.

//Note: .= appends to the current variable value rather than replacing it

$formresults = "Ipod: ".$ipod."\n>";


$formresults .= "Laptop: ".$laptop."\n";

$formresults .= "Cellphone: ".$cell_phone."\n";

$formresults .= "Borough: ".$borough;

This time, however, you are going to use a number of functions that are designed to handle opening, writing, and closing files on the server.

//this code is adapted from Example 1 at http://us3.php.net/manual/en/function.fwrite.php

//identify the file

$filename = "formdata.txt";

//see if the file exists and is writable




// Let's make sure the file exists and is writable first.

if (is_writable($filename)) {

// the function fopen opens the specified file. The 'a' argument opens the file in append mode

if (!$handle = fopen($filename, 'a')) {

echo "Cannot open file ($filename)";

exit;

}

// Write $file to our opened file.

if (fwrite($handle, $formresults) === FALSE) {


echo "Cannot write to file ($filename)";

exit;

}

//close the file

fclose($handle);

} else {

echo "The file $filename is not writable";

exit;

}

The last thing you need to do is create the text file. Open up a text editor and save a blank document as formdata.txt. Upload it to your site. You may need change the file permissions in order for the script to work right. The permissions should be 666, readable and writeable by everyone.

---

WEEK #9

CATHERINE GARNIER WAS THE GUEST LECTURER

HER BLOG IS HERE:


http://classes.catherinegarnier.com/spr08/advanced_web/?paged=2

Week #8

Today we're talking about design -- post up links to homework page which should link to your home page mockup (among other things) Also- lets go over the other homework, which was the javascript flyout menu and the single image CSS roll over menu.

week #7

• More Javascript
  
  
  
  1. Arrays, Review: A grouping of multiple values under the
     same name, for example you can have a variable called Beatles that
     contains all four band members.

     
     
     var beatles = Array(4);
     beatles[0] = "John";
     beatles[1] = "Paul";
     beatles[2] = "George";
     beatles[3] = "Ringo";
     
       the syntax is working like this:
        
     var name_of_array = Array(length);
     name_of_array[index] ="value_of_this_element";
     
     
     

     
     
     
     
     • An Element is a one of the values in an array.
     
     
     • The Length is the number of elements that you want the array
       to contain.
     
     
     • Populating is adding elements to an array.
     
     
     • The Index is where you specify the order of the array.
     
     
     
     
  
  
  2. Numeric Arrays have an incremental number index
     starting from 0, like the example above.
  
  
  3. Associative Arrays
     
     
     
     • Associative Array uses a string instead of a number for its
       index.
     
     
     • If you use an Associative Array you can reference elements by
       name instead of number.
       

       
       
       var beatles = Array(); // notice that the length can be left blank if you want
       beatles[vocalist] = "John";
       beatles[Rhythmguitar] = "Paul";
       beatles[bass] = "George";
       beatles[drummer] = "Ringo";
       
       

       
       
       
     
     
     
     
     • You can also create an Array to hold other arrays.

       
       
       
       var beatles = Array(); // notice that the length can be left blank if you want
       beatles[vocalist] = lennon;
       beatles[Rhythmguitar] = mccartney;
       beatles[bass] = harrison;
       beatles[drummer] = star;
       
       var lennon = Array();
       lennon[firstname] = "John"; //notice that the value of these elements can be
       lennon[birthyear] = 1940; //numbers
       lennon[living] = false; //or boolean values
       
       

     
     
     • Remember the example to play with
     
     
     
     
     
  
  
  4. Operations
     
     
     
     • Operations allow you to do calculations and manipulate data.
     
     
     • Operators are symbols that Javascript uses to perform operations.
     
     
     • We've been using (=) operator to perform assignments.
     
     
     • Arithmetic operators: Addition (+), Subtraction
       (-), Multiplication (*), Division (/)
     
     
     • Operations can be combined.
     
     
     • Operations can be used in
       a variable and performed
       on a variable.
     
     
     • Operations shortcuts:
       
       
       
       • (++) increases the value of a numeric variable by 1.
       
       
       • (--) decreases the value of a numeric variable by 1.
       
       
       • (+=) performs addition (or concatenation) and assignment
         at the same time.

         
         
         var year = 2005;
         var message = "the year is";
         message += year;
         
         alert (message);
         
         
         

       
       
       
       
     
     
     • Concatenations:
       
       
       
       • Concatenations join strings, numbers or variables together
         using the (+) operator.
         

         
         
         
         var mood = "happy";
         var message = "I am feeling"+mood;
         
         

         
         
       
       
       
       
     
     
     
     
  
  
  5. Conditional Statements
     
     
     
     • Javascript uses conditional statements to make decisions based
       on the criteria given. A conditional statement sets up a condition
       that must be evaluated before the rest of the script can be read.
       
       
       

       
       if (condition){
           statements;
           }
       
       for example:
       
       if (1>2) {
          alert("the world has gone made");
           }
       
       

       
       
       
     
     
     • The if statement is the most common. The condition
       is always going to be either true or false.
     
     
     • The if statement can be expanded using else.
       Statements inside of the else clause will be executed only when
       the if condition is false.
       

       
       
       if(1>2){
       alert("the world has gone mad!!!!! OMG!!!!");
       }
       else {
       alert("everything is fine, chill out");
       }
       
       

       
       
       
     
     
     • Comparison Operators: greater than (>),
       less than (<), greater than or equal to (>=), less than
       or equal to (<=), equality (==) and inequality (!=).
       
       
       
       • Check for equality the right way.
       
       
       • Don't try to check for equality the wrong way. Remember the = sign is
         used for assignments.
       
       
       • Check for inequality.
       
       
       
       
     
     
     • Operands: are operations combined in a conditional
       statement
     
     
     • Logical Operators: and (&&) and or
       (||) are used to combine operators, and not (!)
       is used to reverse the value of a statement. All three
       return Boolean values of either true or false.
       
       
       
       • The and operation (&&)
         will only be true if both operands are true.
       
       
       • The or operation (||)
         will be true if one of its operands is true or if both of
         its operands are true. It will be false only when both operands
         are false.
       
       
       • The not operation (!)
         works on a single operand and switches the returned value
         from true to false or false to true.
       
       
       
       
     
     
     
     
  
  
  6. Looping Statements
     
     
     
     • Looping is used to execute the same statement a number of times.
       The code with in the looping statement executes until the condition
       is no longer true.
     
     
     • while: the code within the curly braces will
       be executed until the condition is false. In this example the
       code will execute 10 times until the value of the count turns
       11 and the condition becomes false. If nothing happens to affect
       the condition the loop will execute forever.
       
       

       
       
       while (condition){
             statements;
       
              }
       
       var count = 1;
       while (count < 11) {
       alert(cont);
       count++;
       }
       
       
       

       
       
     
     
     • do while: similar to the syntax of a regular
       loop, but this loop will execute even if the condition is false.
       
       

       
       
       do{
       statements;
       } while (condition);
       
       
       

       
       
       
     
     
     • for: a cleaner way of executing loops. Everything
       relevant to the loop is contained within the parentheses.
       

       
       
       for (initial condition; test condition; alter condition){
           statements;
           }
       
       example:
       
       for (var count =1; count < 11; count++){
       alert (count);
       }
       
       and a more complex example:
       
       var beatles = Array("John","Paul","George","Ringo");
       for (var count=0; count < beatles.length; count++){
           alert(beatles[count]);
           }
       
       
       

       
       
       
     
     
     
     
  
  
  7. Functions
     
     
     
     • A function is a group of statements that can be invoked from
       anywhere in your code.
       
       

       
       
       function name(arguments){
           statements;
           }
       
       example:
       
       function multiply(num1, num2) {
           var total = num1 * num2;
           alert(total);
       }
       
       

       
       
     
     
     • Functions are good for reusing pieces of code. Once you define
       a function, you can reuse it by simply calling it by name.
     
     
     • You can pass data to a function and have them act on that data.
       These are called arguments. A function can use
       multiple arguments, separated by commas. Once the arguments are
       passed to the function they can be used like variables.
       

       
       
       multiply(10,2);
       
       

       
       
       
     
     
     • Use the return statement to return a number,
       string, array or Boolean value. In this example the function take
       one argument, returns a number and then assigns the number to
       a new variable.
       
       
       

       
       
       function convertToCelsius(temp) {
          var result = temp -32;
          result = result / 1.8;
          return result;
          }
       
       var temp_farhenheit = 95;
       var temp_celcius = convertToCelsius(temp_fahrenheit);
       alert(temp_celsius);
       
       
       

       
       
       
     
     
     
     
  
  
  8. Objects
     
     
     
     • An object is a self-contained collection of data that takes
       two forms: property and method. Properties and
       methods are combined to form an object.
     
     
     • A property is a variable (like mood or age)
       that belongs to an object.
     
     
     • A method is a function (like walk or sleep)
       that can be invoked by the object.
     
     
     • To use a specific object an instance of that
       object must be created.
     
     
     • Native Objects are those that come pre-made
       for use in your scripts.
     
     
     • You can create your own User-Defined Objects,
       but not quite yet.
     
     
     • Host Objects are objects provided by the browser.
       Early Javascript used the properties and methods of the window
       object, sometimes called the Browser Object Model. Stay away
       from the the window object and work with the Document Object.
     
     
     
     
  
  
  
  



• IF we Have Time, even More Javascript
  
  
  
• Intro to the Document Object Model
  
• The Document Object Model represents the web page that is currently
  loaded in the browser. Think of the DOM as map of the web page and
  think of using JavaScript to read the map.


• The document is represented as a family tree or document
  tree.


• Nodes
  
  
  
  • Element Nodes: All the elements , like h1, p,
    ul, etc. are all nodes on the tree. The have relationships to each
    other, like parent, child, sibling. All elements contain other elements,
    except <html> which is the root of the tree.
  
  
  • Text Nodes: are the text the elements contain,
    like <h2>Resume</h2>. Text nodes are
    always contained inside an element node.
  
  
  • Attribute Nodes: give more specific info about
    an element, like <h2 title="my resume">Resume</h2>
  
  
  
  


• DOM Methods
  
  
  
  • getElementById: This method is a function associated
    with the document object. It takes just one argument: the id of
    the element you want to get.
    

    
    
    document.getElementById(id);
    

    
    See Example on w3c site
    
  
  
  • getElementsByTagName: Using this method gives
    you access to an array that is populated with every instance of
    the tag. You have access to multiple elements.
    

    
    document.getElementByTagName(tag);
    
    

    
    See Example on w3c site
    
    
  
  
  • getAttribute: This method can only be used on
    an element node.
    

    
    
    object.getAttribute(attribute);
    

    
    
    here is an example
    Combined with getElementsByTagName, use it to get
    the attribute of a specific element, or in this example the title attributes of each of the "p" tags in the document .
    

    
    
    var paras = document.getElementByTagName("p");
    for (var i=0; i < paras.length; i++){
    alert(paras[1].getAttribute("title"));
    }
    
    

    
    
    
  
  
  • setAttribute: This method allows you to change
    the value of an attribute node. Unlike the others, it takes two
    arguments: one for attribute and one for value.
    

    
    object.setAttribute(attriute,value);
    

    
    
    
  
  
  
  
• http://icant.co.uk/articles/domessentials/



• Now we will talk about this Sub nav flyout example of a fly-out secondary menu

Homework

1. Make your own version of the Sub nav flyout example This is due in two weeks



2. Make your own version of the single image roll over from two weeks ago click here for example - this i assigned last week in class but didn't write down so its due next week


3. OPTIONAL EXTRA CREDIT CHALLENGE - if you DARE! (OMG its so exciting!) create a menu that combines a single image rollover with a javascript subnav.


4. First Draft of Home page mockup (comp) -- this is a JPG file, you can create it in photoshop, and its your first idea for the over-all design of your client's site using the home page as an example. Once the design direction is approved by your client, you will use the design of this first designed home page to guide the style of all the pages.

Week #6

• as always, post a link to your homework page where i should be able to see your revised creative brief (that you should have sent to you client for approval, btw, if i didn't say that before) and your site outline



• Rick Rollingdo not click this link


• Design Phase:
  • How to Make a Functional Spec
    • wireframes
    • site map
  - Navigation: Main Nav. Vs. alt Nav. Motivated user vs. unmotivated user - When navigation strategy becomes part of marketing message, eg. SENSEI

1. Examples and Tips in image production -- Take Notes!



2. Browser Cam introduction and
   user set up.


3. XTHML, CSS and JavaScript (the
   Behavior Layer)


4. Introduction to Javascript (from the DOM Scripting
   book):
   
   
   
   • JavaScript Defined
     
     JavaScript is a scripting language that's used to add interactivity
     and dynamic behaviors to web pages and applications. JavaScript can
     interact with other components of a web page, such as HTML and CSS,
     to make them change in real time, or respond to user events.... more.
   
   
   • A Brief History of JavaScript
     
     JavaScript fist appeared in 1995 in Netscape 2. IE quickly released
     it's own version called VBScript in IE3. A standard was created by
     the European Computer Manufacturers Association (ECMA) called ECMA
     script. DHTML became a popular and then dirty buzzword as the browser
     wars were fought in the late 1990's and as each browser used it's
     own Document Object Model. DOM Scripting is the correct term for describing
     the interaction of XHTML, CSS and Javascript.
   
   
   • The DOM
     
     The Document Object Model is an API (Application Programming
     Interface). It is an agreed upon standard that makes it possible for
     programs and scripts to dynamically access and update documents on
     the web. The W3C created a DOM that could be used by many different
     programming languages. Real world examples are Morse Code, Time Zones,
     the Periodic Table of Elements.
   
   
   
   


5. JavaScript Syntax (the structural rules of a language)
   
   
   
   1. Statements: A series of instructions

      
      //comments look like this
      // and need slashes on each line
      /*unless
      you do this */
      statement;
      statement;
      statement;
      

   
   
   2. Comments: Like HTML comments, they are used to
      keep track what's happening in your script.

      
      //comments look like this
      // and need slashes on each line
      /*unless
      you do this */
      
      

   
   
   3. Keywords: Predefined terms, like var or
      Array
   
   
   4. Variables: Things that are subject to change, like
      mood and age.
      
      
      
      • Parts of a Variable
        
      
      
      • Variable names are case sensitive and can't
        contain spaces or puncuation.
      
      
      • Assignment: Giving value to a variable, like
        happy or 25
      
      
      • Contains: When an assignment has been given,
        the variable mood "contains" the value happy.
      
      
      • Declare: Before assignment values to a variable
        the variable should be introduced or "declared".
      
      
      • Literal: Something that is literally written
        out in Javascript code, like "happy".
      
      
      • Scalars: A variable that can only have one
        value at a time, like Strings, Numbers and Boolean Values
      
      
      • Data Types
      
      
      • Data Types: Strings
        
        
        
        • Strings consist of 0 or more characters and must be enclosed
          in either single or double quotes.
        
        
        • Escaping is used when a quote is used as part of a the string.
          The backslash character is used.
        
        
        
        
      
      
      • W3C's excellent example page
      
      
      
      • Data Types: Numbers
        
        
        
        • Floating-point numbers (decimals) and negative numbers can
          be used.
        
        
        
        
      
      
      • Data Types: Boolean Values
        
        
        
        • Boolean data has only two possible values: true or false
        
        
        
        
      
      
      • Arrays: A grouping of multiple values under
        the same name, for example you can have a variable called Beatles
        
        that contains all four band members.
        
        
        
        • An Element is a one of the values in an array.
        
        
        • The Length is the number of elements that you want the array
          to contain.
        
        
        • Populating is adding elements to an array.
        
        
        • The Index is where you specify the order of the array.
        
        
        • Numeric Array has an incremental number index starting from
          0
        
        
        • Associative Array uses a string instead of a number for
          its index.
        
        
        
        
      
      
      
      
   
   
   
   

Homework|

1. DOM Scripting Prep
   
   
   
   • Read through Chapter 1 and 2 from the DOM Scripting book to get
     an understanding of the Javascript basics.
   
   
   
   

• Site Outline Due today / Functional Spec Assigned, it will be due next week, Functional Spec, in this case includes two things:
• wireframes
• site map

Week #5

1. Post a link to your homework page to the comments section of this todays page here, and make sure there are links to your homework for today which was..... a) a competitive analysis b) creative brief, c) adding rounder corners to some part of your bill of rights page



2. Initial Project Presentations
   
   



3. Live Text vs. Graphic Text




4. Foreground vs. Background Image




5. Discovery Phase: How to Write a Site Outline




6. How to write a project schedule




7. Background Images and Image Replacement examples
   
   
   
   • Tiled backgrounds exmaples
   
   
   • Background image positioning syntax examples
   
   
   • Rounded corners: fixed and flexible example of flexible corners
   
   
   • Image Replacement methods Example
   
   
   
   



8. Styling Lists and Links
   
   
   
   • Creating Buttons and Simple Rollovers using CSS (no javascript) example, another way to go
   
   
   • Visited-link styles some good ideas
   
   
   • Highlighting the current page in the nav bar
   
   
   • Creating a horizontal nav bar
   
   
   
   




9. Fun with background images
   
   
   
   • This site has good examples of many things that you can do with a background image.
     
   • lets play with background image position a little
   
   
   • How to do Rounded Corners
     
     • 
       My Bookmarks on corners
     
     
     • Lets try getting this to work in class
     
     
     • shadows on boxes -- we can look at the example on my site where this image gets inserted by this rule

       div.projectsimg {
       float:left;
       width:236px;
       height:79px;
       background-image:url(images/shadow.png);
       background-repeat:no-repeat;
       margin:0px 25px 10px 14px;
       padding:0px 0px 12px 12px;
       background-position:12px 3px;}
       

     
     
     
     
   
   
   
   
   
   



10. Now we will talk about how to do a Single-image menu roll over







11. Interaction
    Design | Interaction
    Patterns: Types of Navigation-- Horizontal Navigation, Vertical
    Navigation, Horizontal Global Navigation and Vertical Local Navigation,
    Tabbed Navigation, Drop-Down Navigation, Breadcrumb Navigation.


12. excellent resource




13. Design Patterns

Week #4

• make a link to a digital version of your completed client survey and all of your css layout examples on your homework page and post a link to the homework page to the comments section of this blog post (just to make it easy for me) thank you. We'll talk about them in class


• Quick Lecture on how to structure your files


• Discovery Phase: How to Write A Creative Brief
  three sections:
  
  • what is it, what will it do?
  • style
  • technical specifications
  
  
  
  
  


• here's an example from one of mine

  ======================|Overview|======================
  This estimate includes the details for designing and implementing an elegant and
  beautiful website for the Drawing on Film exhibition including a blog, an interactive
  flash home page module, and multimedia info about the artists and works included in
  the exhibition. The lead designer will be Catherine (Katy) Garnier, a multimedia artist
  with a particular passion for and knowledge of the history of direct film including
  many of the artists in the exhibition. The design will express the spirit of the
  exhibition and be a key communication tool for the drawing center and subsequent
  venues. The site will allow DC staff to maintain the site and upload new content
  through WordPress. Our numbers are based on our hourly rates of $100/hr for
  design and WordPress php coding.
  ===================|Technical Standards|==================
  The web site will conform to current best practices and standards for professional
  quality web sites. It will be optimized for the latest versions of Microsoft Internet
  Explorer, Safari, and Firefox along with the latest version of the Flash plug-in. It will
  also maintain a consistent appearance (to the extent practicable) on both the Mac
  and Windows platforms.



• User Types, Task Analysis, Competitive Analysis


• Now we can talk about someone's users while using this cool web based white board




• Live Text vs. Graphic Text, Foreground vs. Background Image





• PRESENTATION REVIEW:
  
• CSS Beginner Tutorial, CSS Intermediate Tutorial


• The Document Tree


• Selectors




• Type Selectors (also called element or simple selectors)


• Descendant Selectors


• Class and ID Selectors


• Pseudo-classes


• Universal Selector


• Child and Adjacent Sibling Selectors (Advanced)


• Attribute Selectors (Advanced)




• Cascade, Specificity and Inheritance


• Advance CSS Rule practice
  
  1. bare with me, you will be very glad near the end of your semester when you are writing specific rules to make tiny tweaks to your design if you know this stuff backwards and forwards
  
  
  2. Look at this silly example page that we will use
  
  
  3. Now, lets open this example page and use it to get some practice in-- lets try these:
     
     
     
     • make the word "even" red in one rule without also making the words "random" and "bananas"
     
     
     • make the words "stone age village" and only those words be red as simply as possible
     
     
     • make only the second "mushroom" be red as simply as possible
     
     
     • make the word 'animals' blue and nothing else
     
     
     • make the first link on the page have no underline while the second one keeps its underline
     
     
     
  
  
  
  
  
  


• Fun with background images
  
  
  
  • This site has good examples of many things that you can do with a background image.
    
  • lets play with background image position a little
  
  
  • How to do Rounded Corners
    
    • 
      My Bookmarks on corners
    
    
    • Lets try getting this to work in class
    
    
    • shadows on boxes -- we can look at the example on my site where this image gets inserted by this rule

      div.projectsimg {
      float:left;
      width:236px;
      height:79px;
      background-image:url(images/shadow.png);
      background-repeat:no-repeat;
      margin:0px 25px 10px 14px;
      padding:0px 0px 12px 12px;
      background-position:12px 3px;}
      

    
    
    
    
  
  
  
  
  
  



• 
  

  HOMEWORK

  
  
  • create a creative brief for your client and a competitive analysis of 3 - 5 sites that are like your clients site
  
  
  • Pick on part of your Bill of Rights document or your homework page and add rounded corners using one of the techniques we talked about
  
  
  
  
  

Week #3

1. post a link to your homework on the comments section of this blog post!


2. An overview of Visual Formatting Model--- THINK INSIDE THE BOX!
   
   
   
   1. Box
      Model: The box model defines how elements are displayed. Every
      CSS element forms a "box" composed of these components:
      
      
      
      • Content - The actual content of the element such as text or
        an image. When using the width property, you are defining the
        width of the content.
      
      
      • Padding - Define the space around the content using the padding-top,
        padding-right, padding-bottom, padding-left properties.
      
      
      • Border - Define a stroke around the content and padding using
        the border-top, border-right, border-bottom, border-left properties.
      
      
      • Margin - Define the space around the combined content, padding
        and border using the margin-top, margin-right, margin-bottom,
        margin-left properties.
      
      
      
      
   
   
   
   2. IE/Win
      Box Model Quirks
      
      
      
      1. Diagram:
         Comparison between W3C and IE/Win box models.
      
      
      
      
   
   
   3. Margin
      Collapsing: When two or more vertical margins meet they will collapse
      to form a single margin with the height of the larger of the two margins.
      The vertical margins of nested elements will also collapse if they
      are not separated by padding or borders.
   
   
   4. Boxes: Block vs. Inline vs. Anonymous
      
      
      
      1. Block elements are elements such as <div>, <p>,
         or headers <h1>…<h6>. When their content is
         displayed the next element within the document structure will
         be positioned below it, not next to it. The vertical distance
         between boxes is calculated by the boxes vertical margins.
      
      
      2. more on the box: Inline elements are elements such as <a>. <strong>,
         <em> or <span>. Their content is displayed horizontally,
         within lines. Horizontal spacing between inline elements can be
         adjusted using padding, borders and margins. Vertical spacing
         has no affect on inline elements.
      
      
      3. Inline
         Elements and Padding
      
      
      4. Anonymous
         Boxes: A block or inline box that has not been explicitly
         defined as an element. You cannot style anonymous block or line
         boxes since there is nothing to connect to. (see link example)
      
      
      
      
   
   
   
   


3. CSS Positioning
   
   
   
   1. Static or Normal
      Flow: Normal flow is the default scheme used for positioning.
      Block boxes flow vertically starting at the top of their containing
      block with each placed directly below the preceding one. Inline boxes
      flow horizontally from left to right.
   
   
   2. Relative:
      Relatively positioned elements are positioned within the normal flow
      and then moved using x and y coordinates. Elements that come after
      a relatively-positioned element behave as if the relatively-positioned
      element was still in its ‘normal flow’ position - leaving
      a gap for it.
   
   
   3. Absolute:
      An absolute positioned box is moved out of the normal flow entirely
      using x and y coordinates. Absolutely positioned boxes can overlap
      other elements on the page. Control the stacking order with the Z-index.
      The higher the Z-index, the higher the box is in the stack. Elements
      that come before or after an absolutely positioned box ignore it completely.
      an example of absolutely positioned DIVs
      
      
      1. Fixed:
         Fixed positioned elements are moved out of the normal flow entirely
         - relative to the viewport. This means that they don't move if
         the page is scrolled. Win/IE5 and Win/IE6 do not support this
         positioning method at all.
      
      
      
      
   
   
   4. Floating
      : A floated box is taken out of the flow and shifted to the left or
      right until it touches the outer edge of its containing box or another
      floating box. Block-boxes in the normal flow behave as if the floated
      box wasn't there. Paragraphs of text (line boxes) next to a floated
      box can flow down the right side of a left-floated box and down the
      left side of a right-floated box. More good info on floats
      
      
      
      1. Clearing:
         Elements following a floated element will wrap around the floated
         element. To stop this from happening the "clear" property
         can be applied to "clear" a vertical space for all elements
         following the float.
      
      
      
      
   
   
   
   


4. Layout
   
   
   
   1. Horizontally Centered
      
      
      
      1. Example
      
      
      
      
      
   
   
   2. Liquid: Dimensions are set using percentages, allowing layouts to
      scale to fit the browser window. On some monitors layouts can feel
      stretched and line heights can get too long or too short.
      
      
      
      1. Three-Column
         using floats
      
      
      2. Two-Column using
         absolute-P
      
      
      
      
   
   
   3. Elastic: Dimensions are determined by the width of elements using
      ems. This is relative to the font size, not the browser width.
      
      
      
      1. good article about the debate
      
      
      2. Elastic example
      
      
      3. The px to em Calculator
      
      
      
      
   
   
   4. Elastic-liquid hybrid: Widths are set in ems and maximum widths
      are set as percentages.
      
      
      
      1. Hybrid example
         
      
      
      
      
   
   
   5. Other Sample
      CSS Layouts
   
   
   
   


5. PHASE ONE: Site Definition
   
   
   
   1. Outline of the development process; what is going to happen at each
      step; everyone's jobs (both the clients' and yours); and a timeline.
      
      
   
   
   2. A few useful Articles:
      
      
      
      • The
        Development Process
      
      
      • Web
        Development Life Cycle
      
      
      • Web
        Development Process
      
      
      
      
   
   
   
   




6. lets discuss the positioning Exercises

Homework

CLIENT WORK

1. Get Your Clients to fill out the Client survey- its due in class next week.
   


2. do all 4 of the DARPA CSS POSITIONING EXERCISES
   
   
3. Choose one, and make your Bill of Rights page liquid, elastic, or elastic liquid hybrid.

TECHNICAL PREPARATION

• Read Chapter 2 from the book CSS Mastery

Week #2

1. Post a link to your homework page to the comments section of this blog post, your home work page should contain a link to your delicious tags and show your 5 bookmarks of sites that are excellent, lets take a look at them


2. what is web 2.0


3. SEO madness


4. Top 25 APIs


5. an aside -- the possibility of a new artformis Carl Rove a Genius on Par with Marcel Duchamp?


6. We will be looking at the pirate page and thinking about how it would be best done but first we need to cover some other material


7. First Get the Web Developer Tools! Do it now!



8. A quick word aboutWeb Standards
   Workshop


9. STRUCTURE REVIEW and SEMANTIC MARKUP:
   
   
   
   
   1. My Semantic Markup bookmarks
   
   
   2. Using Meaningful (Semantic)
      Markup
   
   
   3. Logical Structure using Meaningful Elements (examples)
   
   
   4. Additional Structure using divs and spans with meaningful,
      structural IDs and class names.
   
   
   5. Validation and
      meaning extraction
   
   
   6. Document
      types, DOCTYPE switching, browser modes
   
   
   7. How would be the best way to have done the Pirate Page
   
   
   
   8. Bill of RIghts
   
   
   
   
   





Resources



• XHTML Beginner
  Tutorial, XHTHL
  Intermediate Tutorial



Homework
| Week 2




For next class:




CLIENT WORK





• Contact your client and ask them to fill out a Client Survey form.


• Create your own form or use this as a guide:
  
  
  
  • Sample Client
    Survey
  
  
  
  


• Only offer services you are able to provide and make sure the client
  understands that this is a class project and you have a schedule to keep.


• Please ask them to return the form by next class meeting.





Skills practice and Reading





• Semantic Markup practice finish and style Bill of Rights-- all semantic markup try to use as simple CSS as you can


• Read Chapter 1 in CSS Mastery

Week #1

Topics Covered in Class:

1. Introduction to the class
   
   
   
   1. Syllabus
   
   
   2. Schedule
   
   
   
   


2. Introduction to Jay
   
   
   
   1. parsons
   
   
   2. multex
   
   
   3. bellwether
   
   
   4. thirdmind
   
   
   5. SENSEI
   
   
   6. E-A
   
   
   7. Art
   
   
   
   


3. Tools we'll be using
   
   
   
   • del.icio.us
     My Delicious tags are here and my tags for this class are here. (this was the course number for the first advanced web design course i taught and i've just kept this-- bookmark it for yourself so you don't forget it!
   
   
   
   • this blog
   
   
   
   



4. Introduction to web 2.0


5. REVIEW:
   
   
   
   • What is Functionality? "Functionality" refers to the features or functions provided by the product. The primary focus is on what the user can do with the product.
   
   
   
   • What is Usability? "Usability" refers to the ability to use a product easily, effectively, and efficiently to perform a task. The primary focus is on how people work with a product.
   
   
   • What are Aesthetics? "Aesthetics" are
     a set of generally agreed upon ideas about what makes effective communication in a given medium. Establishing an aesthetical sensibility requires that you look beyond your own personal likes and dislikes to evaluate a work within the medium in which it is presented.
   
   
   • The FUTURE of web design and avoiding obsolescence as a web designer
   
   
   
   
   


6. REVIEW:
   
   
   
   • What are Web Standards?
   
   
   • Ten
     reasons to learn and use web standards
   
   
   
   
   


7. REVIEW:
   
   
   
   • What is Accessibility? "Accessibility" is used to describe how easy something is for everybody to use, regardless of impairment or disability.
   
   
   • Why is Accessibility important?
   
   
   • 10
     Reasons Clients Don't Care About Accessibility
   
   
   
   • LEGAL PRECEDENT SET FOR WEB ACCESSIBILITY: NFB v. Target
   
   
   
   






8. Day One Skills Test

   
   In this in-class test you will be asked to create a simple web page from scratch.
   
   
   
   • Step 1, download this zip file right here
   
   
   • Step 2, unzip the file you will see
     • one photoshop document
     • one png screenshot
   
   
   • Step 3, using the photoshop file to find exact colors, sizes, and fonts and for the image of the "pirates" which you can crop out of the photoshop doc, recreate this screenshot as an html page as accurately as you can
   
   
   
   If you know how to use css do it, and make your page have an external style sheet, if you don't just build it however you know how to. If you know what i mean by "semantic markup" make the markup as semantic as you can. If you are unable to build a page like this, you should not be in this class.
   
   


9. Finding a Client
   
   
   
   • Look for someone with an existing business who is interested in having a web site designed or redesigned. The services you are offering are low or no-cost web design. You will complete the project within the next 15 weeks, so your client must be available by phone or email during that time.
   
   
   • Some good places to contact are:
     
     
     
     • Manhattan Small Business Development Center
     
     
     • Brooklyn Economic Development Corporation
     
     
     • Small Business Development Center at Brooklyn
     
     
     • Brooklyn
       Chamber of Commerce
     
     
     
     
   
   
   • You can also try advertising around the school. Many students and faculty have small-businesses and are often looking for a web site designer. Again, make sure the business is an existing one, not a startup.
   
   
   • Start by asking your client to fill out a Client Survey
     
     
     
     
     • Sample Client Survey
     
     
     
     
   
   
   
   

Homework Week 1

1. Buy the required textbooks from Amazon or Barnes & Noble. OR - Read them on Online Library
   
   
   
   • CSS
     Mastery, friends of ED (February 13, 2006), ISBN#1590596145
   
   
   
   • DOM
     Scripting, friends of ED (September 20, 2005), ISBN#1590595335
   
   
   
   


2. Start looking for a small business client to work with this semester.
   



3. Find five sites that are examples of excellence in web design and Del.icio.us them, include why you chose them in the notes field


4. Reading: The section of Chapter five of the Cluetrain Manifesto called Fort Business. If you are interested read the whole chapter.


5. Create homework index page and post homework link (that is a link to your delicious tags) to it (or blog if necessary). Link homework page to this blog's comments section.

Resources

• If you're not familiar with coding with web standards, or don't know much about structure vs. presentation and the basic rules and syntax of XHTML and CSS you'll want to refresh your XHTML and/or CSS skills complete the following two tutorials before next week.
  
  
  
  
  • XHTML Beginner Tutorial
  
  
  • XHTHL Intermediate Tutorial
  
  
  • CSS Beginner Tutorial
  
  
  • CSS Intermediate Tutorial
  
  
  
  


• If you feel totally lost, I recommend that you take the basic web design class instead, but if you're determined to catch up, complete the tutorials above and buy the additional book below:
  
  
  
  
  • Build Your Own Web Site the Right Way Using HTML & CSS, Ian Lloyd, SitePoint (May 2, 2006), ISBN#0975240293
  
  
  
  

Syllabus

Advanced Web Design



CRN 3053

Spring 2008

Instructor: Jay Van Buren

Email: ad650@early-adopter.com


Course URL: http://vanburen-adv-web.blogspot.com/

Hours: Thursday, 9:00 - 11:40

Location: 55 W. 13th, Rm. 425

Course Description:

The Web may be a turning point in human history that rivals the taming of fire or the invention of the printing press. It's been changing profoundly how we do business and communicate for the past 10 years and its just getting started. New technologies are ensuring that as the haystack of information grows exponentially our ability to find the needle we need at any particular moment is growing too.

Whether you are selling a product or service, trying to convince people of an idea, or creating interactive art, the web is the air we all breathe. Understanding how to use this medium as well as it can be used will help your (or your client's) content stand out both now and in the future.

The main projects will be the completion of a website for an actual client, including all the stages that a professional web designer should go through on the way to creating the site. This class is not about learning to create websites (you should already know that). This class is about creating truly excellent, beautiful, elegant websites that are built using the best possible practices, and match the needs of your client in both form and function. We'll also spend some time talking about and trying to understand both where we are right now and where we are headed.

Course Goals:

Upon successful completion of this class, the student will have gained the skills be a professional web designer, and will have a thorough grasp of the state of the art of web design including both aesthetic, conceptual and technical issues.

Grading:

10% - Attendance and Class Participation

40% - Weekly Assignments (each one will be worth 6 points 6=excellent, 5=average, 4=acceptable, not turned in = 0)

50% - Final Project

Course Requirements:

• Come to class on time. Students arriving more than 20 minutes late may be marked absent.

• Attend all classes. Each week we will build on the work learned the week before. If you must miss a class, please let me know ahead of time. It is your responsibility to obtain any missed material from your fellow classmates, and to turn assignments in on time even if you are absent. Students missing more than three classes may fail the course.

• Turn in assignments on time. Work turned in late will lose one point (from a possible 6) every week that it is late. Final projects may not be turned in late.

• Ask Questions. This is a technical class, and we will be covering a lot of information in a short time. If you are confused, lost, need clarification, etc, please don’t hesitate to ask questions in class. Chance are your fellow students will benefit from the answers AND this will add to your class participation grade! I am also available between classes via email.

• Academic Integrity. Plagiarism and cheating of any kind in the course of academic work will not be tolerated. Academic honesty includes accurate use of quotations, as well as appropriate and explicit citation of sources in instances of paraphrasing and describing ideas, or reporting on research findings or any aspect of the work of others (including that of instructors and other students). These standards of academic honesty and citation of sources apply to all forms of academic work (examinations, essays, theses, computer work, art and design work, oral presentations, and other projects).

• It is the responsibility of students to learn the procedures specific to their discipline for correctly and appropriately differentiating their own work from that of others. Compromising your academic integrity may lead to serious consequences, including (but not limited to) one or more of the following: failure of the assignment, failure of the course, academic warning, disciplinary probation, suspension from the university, or dismissal from the university.

• Every student at Parsons signs an Academic Integrity Statement as a part of the registration process. Thus, you are held responsible for being familiar with, understanding, adhering to and upholding the spirit and standards of academic integrity as set forth by the Parsons Student Handbook.

Reading and Resources:

There are two texts that we'll be reading from

• CSS
  Mastery, friends of ED (February 13, 2006), ISBN#1590596145



• DOM
  Scripting, friends of ED (September 20, 2005), ISBN#1590595335