WDS 07: Advanced CSS + Process 10/17/17

REVIEW:
Read: Chapter 3, 15, and 16.
Complete Code review for 3, 15, and 16
– Create a single page with the following:
– Try CSS opacity hover:
Opacity – roll over using JavaScript:
Try it using the CSS – hover property
– Try JavaScript opacity hover (copy the code)
– A list of any kind
– Any variation of the “display” property (none, inline, inline-block, etc.)
– Create a navigation menu from a list and the “display” property.

READING:
Ch. 15
They have semantic difference – a “div” element is designed to describe a container of data whereas a “p” element is designed to describe a paragraph of content. (Nesting: you can not nest anything in a “p” tag)
Best review
The power of “Z” and test code
Floaters
Float and Clear
Another explanation of the FLOAT
Example
Next Week: 2 column, and 3 column layout. Media queries – using multiple CSS

Ch. 16
Image Size
Alignment (Note: using Float)
Centering options
The float is key
Next Week: Image Rollovers and Sprites

INTRO TO PROCESS:
What process? Why do we need it?
The bad.
What?, just plain ugly
Still pretty bad
Wow!
Oh,Boy.
Oh my.
Are you kidding??
All kinds of “bad”

PROCESS + PROTOTYPING
REQUIREMENTS:
– Who is the site for, Why would people Visit this site, What are your visitors trying to achieve? What information do your visitors need?
DELIVERABLE: Requirements, Target Audience, Research/sketches

USABILITY (UIX):
DELIVERABLE: User Scenarios, Usability maps, Competitive Analysis

SITE STRUCTURE
Deliverables: Site Inventory/Site Map,. Layout grids (Wire frames and HTML Prototype

PROTOTYPING:
HTML prototype

DESIGN:
Deliverables: Interface in JPG

OUTSTANDING ISSUES:
– Think ahead. What do you think will be challenges to development? Keep a list trhough project life cycle

DEVELOPMENT:
-Technical Production: Deliverables: Alpha Site
-QA: Testing. Deliverables: Bug List, Beta Site
-Launch: Deliverables: Final Site

Example Mid
A bit much

Studio 07: CSS and Process
Read: Chapter 12, 14, 17, and 18
Complete Code review for 12, 14, and 17.
Start Process Documentation:
– Start thinking about the site you want to build. Draft requirements.
– Who is the audience? Determine the target demographic.
– Based on Ch 18, start thinking about the kind of site you want to develop (Requirements). Answer questions on page 455.