Thursday, May 8, 2008

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

Thursday, May 1, 2008

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

Thursday, April 24, 2008

Week #13

post links to your html versions of your site

multimedia




final presentations list:

May 1:
Najlah
Rashida
Ara
Chris
Jae Hwan
Tyler


May 8
Lev
Miliam
Yelena
Andre
Ji Young

Thursday, April 17, 2008

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:



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.

Wednesday, April 9, 2008

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)




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)



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




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


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

Thursday, April 3, 2008

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)




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)



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.



Thursday, March 27, 2008

Thursday, March 13, 2008

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.

Wednesday, March 5, 2008

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.

Wednesday, February 27, 2008

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
    • - 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

    Wednesday, February 20, 2008

    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



    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




    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

    Wednesday, February 13, 2008

    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


    • 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





    • 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




    Wednesday, February 6, 2008

    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:






    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


    Wednesday, January 30, 2008

    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






    10. Resources



      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:


      • 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




    Wednesday, January 23, 2008

    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:



    7. REVIEW:





    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



    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

    Friday, January 18, 2008

    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