Exercise 2 Overview

Markup workflow. Use the unformatted copy below as the text for a simple, one-page website.

Copy To Use

Workflow Process working on workflow

Almost every company, firm, and designer has their own
process for creating websites. Let's delve into some of
these processes.

"Web ReDesign 2.0 | Workflow that Works,"
(http://www.web-redesign.com/) a book by Kelly Goto and
Emily Colter, describes what they call the "Core Process."
This has five main steps: 1. Define the project. 2. Develop
site structure. 3. Design visual interface. 4. Build and
integrate. 5. Launch and beyond.

There are other processes that web designers use. In an
interview on the website wise-women.org
(http://www.wise-women.org/features/kelly_goto/) Kelly
stated, "Web Redesign 2.0: Workflow that Works" is actually
touted as a 'one process fits all.' However this might be
misleading to some; even I don't believe you can have one
methodology to fit all types of projects."

In "Transcending CSS," (http://www.transcendingcss.com/)
Andy Clarke describes his "content-based process." His
process also has five steps: 1. Gather the content. 2. Work
with wireframes to organize and present that content. 3.
Create static designs to demonstrate creative concepts and
layout ideas. 4. Write meaningful markup that structures
content. 5. Work with CSS to implement the design.

Some things to keep in mind: * Process is important. * You
will follow the process I assign. * Keep track of your
process in a process book.

A couple of important terms and definitions: Process A
series of actions, changes, or functions bringing about a
result. Dictionary.com
http://dictionary.reference.com/browse/process 

Workflow The flow or progress of work done by a company,
industry, department, or person. 
http://dictionary.reference.com/browse/workflow
Dictionary.com

Instructions

Open a new file in TextWrangler. Create a new folder in your “exercises” folder that is inside your “web_media” folder called “2_exercise”. Save this new file as “2_exercise.html”.

Add your DTD (pgs 174-175) and basic web page structure (pg 58). Use the XHTML 1.0 Strict template found on the WaSP website: http://www.webstandards.org/learn/reference/templates/xhtml10s/ You may copy and paste this information directly into your 2_exercise.html file.

Decide what information is a:

  • h1
  • h2
  • p
  • img
  • a
  • ol
  • ul
  • blockquote
  • dl
  • dt
  • dd
  • cite
  • etc.

(Beginning Chapter 5, pg 71).

Make “Web ReDesign 2.0 | Workflow that Works” link to http://www.web-redesign.com/ (Chapter 6, pg 95).

Make “wise-women.org” link to http://www.wise-women.org/features/kelly_goto/

Make “Transcending CSS” link to http://www.transcendingcss.com/

Make sure the you use HTML Character Entities (pgs 89-90). Go to this website http://www.danshort.com/HTMLentities/ and use the “Code Decimal.”

Add an image of both of the books mentioned. To get these images go to the websites for the books that are listed and download the images. Create an “images” folder in your “2_exercise” folder. Then read and follow the information on page 105.