Tuesday, March 25, 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.

Everyone will do a presentation-- introduce yourself and your client, show us your wireframe diagrams, your re-written version of your creative brief, and most importantly- your home page mockup

Tuesday, March 18, 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_fahrenheit = 95;
        var temp_celsius = 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.

Tuesday, March 11, 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 and the Single image roll-over nav that we talked about last week.


  • WE CAN NOW put our stuff up on the school's server. YAY!



    Here is the info:

    ftp Host: adga.citytech.cuny.edu
    directory: public_html/
    login: ad2231
    password: same as what its been only the o is a zero


    to hit this from a web browser use this URL: http://adga.citytech.cuny.edu/~ad2231/


  • 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

    Tuesday, March 4, 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. Image Replacement


      • Image Replacement methods Example








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






    9. 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.

    10. excellent resource



    11. Design Patterns


    HOMEWORK



    1. SIte Outline: this is a list of every page in your site, and then within each page, all the sub-parts of that page, every major piece of content that will reside on that page-- you will give this to your client also-- the point is to make sure you have every part of the content accounted for and you're not forgetting anything. You don't want to be halfway through the design and then say 'whoops i forgot the whatever page'- trust me.

    2. Project Schedule: this needs to show when you're going to do what from now till the end of the semester, and importantly , also what your client is going to do and when- you will give this to your client as well as turning it in as homework- it shows when they need to get back to you with feedback on each part of the job

    3. One example of the single image roll over menu that we did-- it needs to have at least 3 links, they should be in list form.... because....say it with me now... a menu is a list. and it needs to have a normal state and a roll over state for each item