WDS 07: Advanced CSS + Process 03/12/18

REVIEW:
HTML/CSS:
Read: Chapter 11 and 13.
Complete Code review for 11 and 13
In Class:
Create at 3 HTML/CSS interlinked pages, and complete the following on each page:
– Place background image and practice positioning and margins.
– Use external CSS
– Try CSS opacity hover
– Boxes of all types
Display: Inline/Block

Process:
UX – Think about how users will interact with your site.
Create a preliminary user scenario AND/OR an Experience Map.
Create a Content Inventory and Preliminary Site Map
Create a preliminary wire frame
Present 0n 03/12/18
Documentation due 03/26

READING:
Read: Chapter 3, 14, and 15.
Complete Code review for 3, 14, and 15

Ch. 14
List styles
List images
Table Properties
Even the Cursor can change
Lists are important for drop down menus:
Drop, example. JS Basics.
Can do it in CSS as well
Pick your poison

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

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
-Generating schematic wireframes for key interfaces and interactions:
Site map
User experience/wireframes
Wireframes. Some tools
Deliverables: Site Inventory/Site Map,. Layout grids (Wire frames and HTML Prototype

Resources:
Sketches
Sketches 2
Digital
With annotations
With Annotations 2

PROTOTYPING:
Examples

Resources:
Prototyping tools

DESIGN:
-Designing the visual interface:
Template mock-ups in PSD or IA.
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

Studio 07: CSS Review
Read: Chapter 3, 14, and 15.
Complete Code review for 3, 14, and 15
HOMEWORK:
– Make sure you understand the “Z-index”. Try either example.
– Try the Float and Clear Examples
– Try CSS Drop down

Process:
Modify wire frame
Create an HTML Prototype
Present 0n 03/19/18
Documentation due 03/26