Category Archives: 1. UARTS

DH 10: Cartography – Map to the Renaissance 03/16/18

Don’t forget the buildings…
Time
There’s a starman waiting in the sky
First Atlas
Is this a map?
Survey all of the land
Egypt and Geometry
One of the oldest
World according to Greeks
Silk Map
Tabula
Medieval World
The age of exploration
History of Cartography.
We are used to this. Have a look at older examples I brought in.
READ: 12 Maps

Proto Movable type
Pictograph to actual “writing”
Before Printing Press. Tiresome but lovely….
Pre printing
The mother of all printing presses.
Significance of the mint
My man, Johanne
Holy MT!
Who paid for this?
Luther and the broadsheet and how he went “viral”
Changed the world?

READ: Luther went “Viral”
VIDEO: Watch

EMP2 09: More CSS 03/26/18

INTRO:
Create at 3 HTML/CSS interlinked pages, and complete the following on each page:
— 1. place background image or color using CSS
— 2. Use the “box model”
— 3. Use pseudo-classes
— 4. One page should use external CSS
— Practice CSS priorities
EXAMPLE | CODE

REVIEW:
Ch. 11
Color names
Opacity
Opacity Roll-over: try it using the CSS – hover property

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

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

HOMEWORK:
Read Chapter 11, 13, 15.
Practice code: 11, 13, and 15.
At least 3 HTML/CSS pages with the following:
– Try Color names
– Make sure you understand the “Z-index”. Try either example.
– Try the Float and Clear Examples
– Use “Display – Block/Inline”

HOMEWORK:
Read Chapter 12, 14, 17.
Practice code: 12, 14, and 17

WDS 09: Documentation Due – Process Document. 03/26/18

Process:
Modify wire frame
Create an HTML Prototype
– Revise Wireframes and Prototype
– Create site interface design.
– Mid-term due next TODAY @ 4PM

Document should consist of your process work, including:
1. Requirements: what is it? why? who is the site for?
2. Usability: user scenarios and/or experience maps
3. Competitive Analysis: Similar sites
4. Sitemap
5. Wire Frames + Prototype
6. Interface Design:
7. Outstanding issues

Mid
Mid
Mid

WDS 08: Advanced CSS2 03/19/18

REVIEW:
Read: Chapter 3, 14, and 15.
Complete Code review for 3, 14, and 15
HOMEWORK:
Watch Video
– Make sure you understand the “Z-index”
– 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

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
Wire frames should be worked up to scale.
Virtual Space is as old as art.
Stats for size
Think of a grid
Stats for Browsers
Don’t forget the “Mobile” Experience
Mobile sizes are helpful.
You need a strategy

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

Mid-term:
Mid
Mid
Mid

STUDIO 08: PROCESS
– Revise Wireframes and Prototype
– Create site interface design.
– Mid-term due next week @ 4PM

EMP2 08: Intro to CSS 03/19/18

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

Homework Due:
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.
Example. Code

REVIEW:
Read: 10.
Complete Code review for 10

CSS in Action!
CSS parts
CSS Propertes
CSS Selector
The box
Pseudo class
External CSS. Here is how
Class, ID and Grouping Book, pg. 238.
Cascading – Book, pg. 239.
CSS priorities

HOMEWORK:
Create at 3 HTML/CSS interlinked pages, and complete the following on each page:
— 1. place background image or color using CSS
— 2. Use the “box model”
— 3. Use pseudo classes
— 4. One page should use external CSS
— Practice CSS priorities

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