WDS 11: WordPress + Final Details 04/09/18

REVIEW:
Make sure you understand previous chapters.

Domain + Hosting:
Practice using FTP – Start migrating Homework to your server.
Install WP. Play!

READING:
Ch. 9.
Example

Ch. 16
Images

Ch 14
More Lists.
Leads to Drop-down menu

JS Redirect:
– Start with a subdomain
– How do I create a subdomain? DEMO
How to redirect?
Put it all together…

Work on your Final
Fluid Template
Responsive Designs

STUDIO 11: WordPress + Final
Sources to Review:
More on the Hover
Advanced Hover effects
Zen Garden

CREATE: 1 HTML/CSS page. Include:
– multiple columns (2 or 3)
– Use @import for CSS and Fonts
– try a simple media rule
– try a CSS drop-down menu
– UPLOAD TO YOUR SERVER

Start working on your final
– How to start?

DH 11: THE RISE OF THE INDIVIDUAL DESIGNER 04/06/18

Original design: The Wheel
Classics in style
Leo
Designer vs Artist?
Peas in a pod?
Works
Fame from important painting and drawing. Classic!
The Human Form
And then the gears of war
Hand of David
La Mama Mia
Technological Leap called a “lock”
Crank and Rod

Valuable? Hell yes!!!
READ: Leonardo or Michelangelo: who is the greatest?

WATCH:
Leonardo da Vinci Technology

MINOR PROJECT #2: Due 04/27/18
Enlightenment /Denis Diderot
FINAL: Due 05/04/18

EMP2 10: ADVANCED CSS 04/04/18

INTRO
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”
EXAMPLE
–OR–
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

READING
Ch. 15
2 column, and 3 column layout.
@import. + Layout example
But, when presented as a media rule: @media – used for different purposes:
Media Rules
– More Media info
Which leads to….
Ch. 12
– Can also import fonts
Can also use Google Fonts
Some Examples

Ch 14
More Lists.
Leads to Drop-down menu

Ch. 17
The old
The new
How it works
Older Browser?

HOMEWORK:
Complete Code review for 14, 12, and 17

CREATE: 1 HTML/CSS page. Include:
– multiple columns (2 or 3)
– Use @import for CSS and Fonts
– try a simple media rule
– try a CSS drop-down menu

Next week: HTML/CSS Quiz covering EVERYTHING

WDS 10: JUST CSS3 04/02/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

READING
Ch. 15
2 column, and 3 column layout.
@import. + Layout example
But, when presented as a media rule: @media – used for different purposes:
Media Rules
– More Media info
Which leads to….
Ch. 12
– Can also import fonts
Can also use Google Fonts
Some Examples

Ch. 17
The old
The new
How it works
Older Browser?

DOMAIN + HOSTING
So many options.
– Hosting: Linux (not Windows), Basic (don’t spend more $ than you have to)
– Time Period: 3 months – a year
– WRITE everything down. User name and passwprds in particular.
– Make sure you have an FTP client (software)

STUDIO 10:
– Get Domain + Hosting
– FTP Demo.
– Practice
Read: Chapter 15, 12, and 17.
Complete Code review for 15, 12, and 17

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