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

DH 07: CATHEDRALS AND ARMS 03/02/18

Pride before the fall
Change
Byzantine architecture
Roman sculpting
The Devil is in the Detail
Light inside
Temple vs Church
Basilica to the Cross
Hold up, now!
Domes to domes
Back to the cross
Massive and delicate
Gothic Arches
Let there be light
The Hybrids
Many Examples to see
The best Jewel in the Crown.
My personal favorite – Mt. Saint Michel

Romans and Post Roman
Like the Movies
VIDEO: Crecy
The Winner?
Can and opener
Move around
VIDEO: Armor

ASSIGNMENT:
READ: Medieval Architecture
VIDEO: Armor
DESN200 Major Project #1: Due – 03/23/18

EMP2 07: Forms, Meta, and A/V 02/28/18

INTRO:
Create the following:
– At least 3 HTML pages set up in Parent, Child, and Grandchild directories.
– Include a list
– Use the “id” attribute, to link to “top” or “bottom”
– Use the “id” attribute to link to a specific section on another page
– Use the link attribute, to generate a new page (link to a new page or tab)
– Mount a large image in an HTML table using Photoshop. Next, put text over the image as demonstrated in class.
Example and the Code.

REVIEW:
Read: Chapter 7, 8, and 9.

7. Forms – Practice formatting.
Code review for 7
Adding PHP and functionality.
Example

8. Extra Markup
Code review for 8.
Review types of HTML
ID and Class, Declaration or “Doctypes”
Comments are useful.
Be very clear on Block and Inline elements
iframes are everywhere.
Meta basics – Here are EXAMPLES
Meta from Google
Meta today
Special Characters, Escape
Ch8, Summary

9. Video, Audio, Flash
Examples.

ASSIGNMENT:
Read: Chapter 7, 8, and 9.
Complete Code review for 7, 8, and 9.

Homework:
1. Read the chapters above
2. Create the following:
– At least 3 HTML pages set up in Root, second Level, and third level directories. Help?
– Create forms (Remember: they will not work yet)
– Include a META refresh and redirect
– Include iframes
– Include video, audio. Compare to embedding.

WDS 06: MORE CSS 02/26/18

REVIEW:
PROCESS: Requirements.
What are you building? Why? What for? For who?
Read Chapter 18: Use the Questions on page 455 as a starting point.
Catch up on Assignments
Create at 3 HTML/CSS interlinked pages, and complete the following on each page:
— 1. place background image with CSS.
— 2. Use the “box model”
— 3. Use pseudo classes

READING:
Ch. 10
External CSS. Here is how
Class, ID and Grouping Book, pg. 238.
Cascading – Book, pg. 239.
Review CSS priorities
Demo – Google > Developer Tools
Old Web Emulator

Looking Ahead:
Ch. 11
Color names
Opacity
Opacity – roll over using JavaScript:
Try it using the CSS – hover property

Ch. 13
Make sure you are familiar with this.
And, you did all of these…
display /BlockInline

PROCESS:

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):
– Anticipating end-user scenarios: Example, Example 2 and a quick Usability Map
– Modeling the user experience: Design Document: Audience Scenarios, and Competitive Analysis.
DELIVERABLE: User Scenarios, Usability maps, Competitive Analysis

Resources:
UX diagram examples
Read This
UPA
Experience Maps

SITE STRUCTURE
-Generating schematic wireframes for key interfaces and interactions:
Site map: Examples
User experience/wireframes
Wireframes
Deliverables: Site Inventory/Site Map,. Layout grids (Wire frames and HTML Prototype

Resources:
Sketches
Sketches 2
Digital
With annotations
With Annotations 2

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 (END of documentation)

DEVELOPMENT (Actually building your site):
-Technical Production: Deliverables: Alpha Site
-QA: Testing. Deliverables: Bug List, Beta Site
-Launch: Deliverables: Final Site

Studio 06: CSS 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
Example

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/05/18
Documentation due 03/26

EMP2 06: HTML – From semantics to tables 02/21/18

INTRO:
Read Chapter 1, 2
Code Work: Review 1, 2 – Practice (create several HTML files)
Create a splash page for your web site (use anything you want) with an image and a link. Example?
How to organize your HW

READING REVIEW:
HTML is a hierarchy.
Attributes
HTML Summary
All the tags
HTML Summary 2
Good resource

Looking Ahead:
Read: 3, 4, 5, and 6.
HTML: Try out all the code samples: 3, 4, 5 and 6.

Lists:

Links:
– HTML link attributes
– Ch4 – Examples,
HTML depends on file paths pg. 81
Path demo. Should end up at this LINK. You can also download the files
E-mail link magic

Images:

Tables:
– Tables: Basic
– Tables: Colspan, Rowspan
Table: Photoshop Demo
HTML and the background image
Tables: background attribute

ASSIGNMENT:
Read: 3, 4, 5, and 6.
HTML: Try out all the code samples: 3, 4, and 5 and 6.

Homework:
1. Read the chapters above
2. Create the following:
– At least 3 HTML pages set up in Parent, Child, and Grandchild directories.
– Include a list
– Use the “id” attribute, to link to “top” or “bottom”
– Use the “id” attribute to link to a specific section on another page
– Use the link attribute, to generate a new page (link to a new page or tab)
– Mount a large image in an HTML table using Photoshop. Next, put text over the image as demonstrated in class.

WDS 05: CSS 02/19/18

INTRO:
Previous Class
Read: 10.
Complete Code review for 10

REVIEW:
Ch. 10.
CSS in Action!
CSS parts
CSS Propertes
CSS Selector
The box
Pseudo class

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

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 05: HTML/CSS:
PROCESS: Requirements.
What are you building? Why? What for? For who?
Read Chapter 18: Use the Questions on page 455 as a starting point.
Catch up on Assignments
Create at 3 HTML/CSS interlinked pages, and complete the following on each page:
— 1. place background image with CSS.
— 2. Use the “box model”
— 3. Use pseudo classes

EMP2 05: Project #1 Due + Intro to HTML 02/14/18

Project1 Editorial (Photoshop, Illustrator & InDesign) Due: Present in class.
Email me the competed package (JPARADA@UARTS.EDU)

Introduction to HTML/and Web Development:
Book:
HTML and CSS: Design and Build Websites. John Wiley & Sons. 2011.
…and companion Site.

Storage:
– USB Drive/ external Drive
– Pad or notebook + pen/pencil

Software:
Editors – BBEdit, TextWrangler
Brackets
My new favorite

Practice:
Real-time editor
W3
HTML: START
Review:
– Setting up a development environment
– Viewing Code
– Testing code
– Version control
– Introduction to HTML

Assignment
Read: Chapter 1, 2
Code Work: Review 1, 2
– Practice (create several HTML files)
Create a splash page for your web site (use anything you want) with an image and a link. Example?
We will review at the start of class next week.

WDS 04: Into to CSS 02/12/18

INTRO:
Read: 4, 5, and 6.
Code Review?
Create the following:
– At least 3 HTML pages set up in Parent, Child, and Grandchild directories.
– Use the “id” attribute, to link to “top”
– Use the “id” attribute to link to a specific section on another page.
– Use the link attribute, to generate a new page (link to a new page or tab)
– Mount a large image in an HTML table using Photoshop. Next, put text over the image as demonstrated in class.*

AT THIS POINT, YOU SHOULD BE ABLE TO BUILD HTML PAGES WITH TABLES.

Read: Chapter 7 and 8.
Complete Code review for 7 and 8

REVIEW:
7. Forms – Practice formatting.
Code review for 7

8. Extra Markup
Code review for 8.
Review types of HTML
ID and Class, Declaration or “Doctypes”
Comments are useful.
Be very clear on Block and Inline elements
iframes are everywhere.
Meta basics – Here are EXAMPLES
Meta from Google
Meta today
Special Characters, Escape
Ch8, Summary

Studio 04: HTML + Intro to CSS
Class Project:
HTML/CSS:
– Create HTML pages with iframes, examples of block and inline elements, specifically “div” and “span” and a sample form (no PHP)
– Use the META tag to refresh and redirect
Read: 10.
Complete Code review for 10