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

    • 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
      you do this */

    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
      you do this */

    3. Keywords: Predefined terms, like var or

    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

        • Associative Array uses a string instead of a number for
          its index.


  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
      | Interaction
      : 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
      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

    • 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


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

      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



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


    3. Choose one, and make your Bill of Rights page liquid, elastic, or elastic liquid hybrid.


    • Read Chapter 2 from the book CSS Mastery