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

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


    1. My Semantic Markup bookmarks

    2. Using Meaningful (Semantic)

    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

    | Week 2

    For next class:


    • 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