Tuesday, May 20, 2008

FINAL PRESENTATIONS 2 OF 2

EVERYONE -- post a link to your final site and your final home work page to the comments of this blogpost (even people who presented last week- just to make it easy for me)

I'll start grading these on thursday...

Week 2 (tails)


Iwaszek, Sabina

Muhammed, Clifton

Antoine, Marie

Jeanty, Hans

Jara, William

Khan, Owais

Nishita, Yukiko

Smith, Travis

Yu, Ying
Posted by at 14 comments:

Tuesday, May 13, 2008

FINAL PRESENTATIONS 1 OF 2

People who are presenting this week:

Post a link to your final client site and your final homework page (or just the homework page if it links to your final client site) here as a comment on this page so that we can all see it on our own screens and don't have to go by the color on the projector, which is, as we have found out, not that great.

Here's the list again:
















Week 1 (heads)


Perez, Faiola

Yip, Winnie

Garcia, Giovanna "Kelly"

Clarke, Anthony

Quinones, Arthur

Kachanov, Boris "Johnny"

Vargas, Francis




Week 2 (tails)


Iwaszek, Sabina

Muhammed, Clifton

Antoine, Marie

Jeanty, Hans

Jara, William

Khan, Owais

Nishita, Yukiko

Smith, Travis

Yu, Ying
Posted by at 8 comments:

Tuesday, May 6, 2008

Week #13

Lesson 1



  • Introduction to FLASH




  • liquid menus

    -- this is not something we're going to be able to do iin class because these computers don't allow you to unzip files but those that are interested can download this file and look at it out side of class- it is the basic structure behind the menus on www.jeffbailey.com that we looked at above- here's how it works:

    • Download this FLA file (its inside a zip so when you click it, it should download) Unzip it and open it in flash.
      It is the source file for this little page that we will be working with today.


    • there is timeline inside each tab that shows the menu going down, and then back up

    • buttons inside each tab

    • code that sets "true" and "false" states on roll over- this is important because its the fact that this state changes that makes the movement of the menu happen- and its the fact that its a state change that then causes the movement, not a straight roll-over that accounts for the smoothness. If you start to roll over it and then roll off- the menu reverses direction right then rather than having to complete its downward motion first before starting back up.

    • buttons that cause those states to change

    • roll over areas that cause states to change back on the two large tabs







final presentation schedule















Week 1 (heads)


Perez, Faiola

Yip, Winnie

Garcia, Giovanna "Kelly"

Clarke, Anthony

Quinones, Arthur

Kachanov, Boris "Johnny"

Vargas, Francis




Week 2 (tails)


Iwaszek, Sabina

Muhammed, Clifton

Antoine, Marie

Jeanty, Hans

Jara, William

Khan, Owais

Nishita, Yukiko

Smith, Travis

Yu, Ying
Posted by at No comments:

Week #13

Lesson 1




  • Introduction to FLASH




  • liquid menus

    -- this is not something we're going to be able to do iin class because these computers don't allow you to unzip files but those that are interested can download this file and look at it out side of class- it is the basic structure behind the menus on www.jeffbailey.com that we looked at above- here's how it works:

    • Download this FLA file (its inside a zip so when you click it, it should download) Unzip it and open it in flash.
      It is the source file for this little page that we will be working with today.


    • there is timeline inside each tab that shows the menu going down, and then back up

    • buttons inside each tab

    • code that sets "true" and "false" states on roll over- this is important because its the fact that this state changes that makes the movement of the menu happen- and its the fact that its a state change that then causes the movement, not a straight roll-over that accounts for the smoothness. If you start to roll over it and then roll off- the menu reverses direction right then rather than having to complete its downward motion first before starting back up.

    • buttons that cause those states to change

    • roll over areas that cause states to change back on the two large tabs







final presentation schedule










Week 1 (heads)





Week 2 (tails)

Posted by at No comments:

Tuesday, April 29, 2008

Week #12

as usual... post links to your home work -- which is an html beta version of your site

multimedia


Posted by at 5 comments:

Tuesday, April 15, 2008

Week #11

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.
Posted by at 6 comments:

Tuesday, April 8, 2008

WEEK #10

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


as always post links to your homework for today which was to create interior mockups for each of your pagetypes

slicing, and starting to build html



Sever Side Includes




Homework for next week

- HTML version of your client's home page, Validated and TESTED on A PC! -- 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
Posted by at No comments:

Tuesday, April 1, 2008

Week #9

Design Discussion



Go ahead and post your 2nd round home page mockups (aka comps... i call them mockups some people call them comps, whatever) and lets talk about them

slicing, and starting to build html



Sever Side Includes


Posted by at 5 comments:

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
Posted by at 2 comments:

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.

Posted by at 3 comments:

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
    Posted by at 13 comments:

    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


    Posted by at 8 comments:

    Tuesday, February 26, 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




    Posted by at 7 comments:

    Wednesday, February 13, 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


    Posted by at 11 comments:

    Tuesday, February 5, 2008

    Week #2


    1. Post a link to your homework page (example) 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, we'll take a look at them in just a little bit

    2. what is web 2.0

    3. Bank Shots! (this is a theory i'm working on)

    4. SEO madness

    5. Top 25 APIs

    6. Bank Shots! (this is a theory i'm working on)

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

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

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


    10. A quick word aboutWeb Standards
      Workshop

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






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




    Posted by at 13 comments:

    Tuesday, January 29, 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
    Posted by at 16 comments:

    Syllabus

    Advanced Web Design 2231



    6:00 - 9:20 PM

    N/1102



    Spring 2008


    Instructor: Jay Van Buren

    Email: ad650@early-adopter.com


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



    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 now and how it will be used in the future will allow you to make your (or your client’s) content stand out.


    The main project will be the completion of a web site for an actual client, including all the stages that a professional web designer should go through on the way to creating the site. I’ll be including both information
    about how things are generally done by professionals in the field right now, and tips and tricks that I have learned personally (often the hard way) to help things run smoothly and achieve the best possible
    out come for you and your client.


    This class is not about learning to create web sites (you should already know that). This class is about creating truly excellent, beautiful, elegant web sites 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. The future will belong to designers
    who are able to grasp the implications of new technologies while they are still in their embryonic stages and creatively engage those implications, inventing new communication strategies before the need for them is clear to all.


    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. And during office hours -- Tuesday afternoon from 2 to 5pm




    • 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).If you borrowed it from somewhere, cite it. NO EXCEPTIONS



    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

    Posted by at 11 comments:
    Subscribe to: Posts (Atom)