Category Archives: 1. UARTS

WDS 14: Final Presentation 04/30/18

FINAL DELIVERABLES:
A. The Development Process Documents (This was your midterm. Make sure you include a link to your Prototype + interface): Did you turn it in?? Make sure.

B. Homework Assignments.

Studio 11
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

Studio 07
HOMEWORK:
– Make sure you understand the “Z-index”. Try either example.
– Try the Float and Clear Examples
– Try CSS Dropdown

Studio 06
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

Studio 05
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

Studio 04:
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

Studio 02:
– 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.

Studio 01:
Create a splash page for your website (use anything you want) with an image and a link.

PROVIDE A LINK TO HOMEWORK

C. WordPress site. Installed and customized (Include a link if this is not your final site)

D. Final Site (URL) AND a screen shot of your site.

Please do not forget to fill out a course survey. Have a great summer!

DH 13: VISUAL COMM + POSTMODERNISM 04/27/18

MAJOR PROJECT – FINAL: Due 05/04/18
Part 1a: Building from Plans
Examples
Part 1b: Designing from History
Ex: Alarm Clock, Atlatl 2.0, Posters

The Bauhaus
Italian Dynamism, was about motion
Russian style
Graphic Impact
Seeds for the future
VIDEO: Soviet Montage
VIDEO: BSP
Brands are symbols
VC for ages
Type for reading
Master type from a Master
Not Just a symbol
Test of Time
Roots and Rank
Old Signs
When brands are too good?
What’s the big deal? It’s all the same, no?

Watch!
Postmodern eraout with modernism
Performance Art
Robert Rauschenberg, a new aesthetic?
Pop Art for the masses
New Styles away from the old
Interactive installations
Leads to interactive video art
And we end with the Makers
FIN

ASSIGNMENT:
VIDEO: “Stadsmuziek” Akko Goldenbeld
READ: History of Visual Communication
READ: Russian Constructivists

EMP2 13: Work on Final Project 04/25/18


INTRO:
Review Site Interface Design.
Make sure you have completed Sitemap and Wireframes.

-Designing the visual interface:
Deliverables: Interface in JPG, PNG or PDF

Slideshows:
jquery picks
ready to slide?

FINAL DELIVERABLES:
Homework:

01
– Create a sitemap. Create Wireframes for you major pages.

02
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”

03
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

04
– 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.

05
– 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.

06
Create a splash page for your website (use anything you want) with an image and a link. Example?

Final HTML Project:
1. Sitemap
2. wire frames
3. Interface
4. A full site (HTML/CSS + images in a folder)

WDS 13: Final Projects 04/23/18

Work on your Final Projects. Alpha due today at 3 PM. What is “Alpha”?
Typically, software goes through two stages of testing before it is considered finished. The first stage, called alpha testing, is often performed only by users within the organization developing the software. The second stage, called beta testing, generally involves a limited number of external users. Think of your final as a “Beta” release.

FINAL DELIVERABLES:
A. The Development Process Documents (This was your midterm. Make sure you include a link to your Prototype + interface):

B. Homework Assignments.

Studio 11
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

Studio 07
HOMEWORK:
– Make sure you understand the “Z-index”. Try either example.
– Try the Float and Clear Examples
– Try CSS Dropdown

Studio 06
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

Studio 05
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

Studio 04:
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

Studio 02:
– 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.

Studio 01:
Create a splash page for your website (use anything you want) with an image and a link.

C. WordPress site. Installed and customized (Include a link if this is not your final site)

D. Final Site (URL) AND a screen shot of your site.

DH 12: Design in the Modern Era 04/20/18

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

Modernism in a Painting…
or two.
A new Visual Language
Sagrada Familia, inside and outside
At around the same time
Casa Batllo: Dragon
The Basilica

VIDEO: Craft Movement
Examples: Form and Function
Furniture, and much more
VIDEO: Bauhaus in a Nutshell
VIDEO: Walter Gropius – The Dessau Bauhaus

FINAL:

MAJOR PROJECT – FINAL: Due 05/04/18
Part 1a: Building from Plans
Examples
Part 1b: Designing from History
Ex: Alarm Clock, Atlatl 2.0, Posters

EMP2 12: Review Sitemaps, Wireframes 04/18/18

INTRO:
Present Sitemap + Wireframes. Talk about in DETAIL.
NEXT:
– Create your interface based on your wireframes.
– Start building your HTML structure

REVIEW:
Wire frames: Read about
Explore site styles
RWD

FINAL DELIVERABLES:
Homework:

01
– Create a sitemap. Create Wireframes for you major pages.
– Intro to frameworks
– Fluid Template
– Responsive Designs

02
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”

03
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

04
– 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.

05
– 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.

06
Create a splash page for your website (use anything you want) with an image and a link. Example?

Final HTML Project:
1. Sitemap
2. wire frames
3. Interface
4. A full site (HTML/CSS + images in a folder)

WDS 12: Final Projects 04/16/18


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

REVIEW:
All about favicons.

STUDIO 12:
FINAL DELIVERABLES:
A. The Development Process Documents (This was your midterm. Make sure you include a link to your Prototype + interface):

B. Homework Assignments.

Studio 11
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

Studio 07
HOMEWORK:
– Make sure you understand the “Z-index”. Try either example.
– Try the Float and Clear Examples
– Try CSS Dropdown

Studio 06
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

Studio 05
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

Studio 04:
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

Studio 02:
– 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.

Studio 01:
Create a splash page for your website (use anything you want) with an image and a link.

C. WordPress site. Installed and customized (Include a link if this is not your final site)

D. Final Site (URL) AND a screen shot of your site.

WORK on your final

DH 11: AGE OF ENLIGHTENMENT 04/13/18


Some of the Greats
Map: Italy
Map: Europe
The Press leads to a backlash
Changed the world
Age of Science continues
Dennis D’s Wikipedia
VIDEO: His Encyclopedia
Classification EN
Revolution
Machine Tools – Example
Steam Power
Water Power Plus
The Steam Age
Powered Transportation
How does it work?
French Steel
Penn Hospital is born from the Enlightenment.
Industry

Philly Steel
Birth of digital computing
Babbage
Diff Eng
Ancient calculator
Pascaline and innards
Leibniz wheel
Automata at the FI
VIDEO: Lost art of Automatons alive
VIDEO: Diff Engine in action
VIDEO: TED ED
Countess
Live hard, die young
Jacquard Loom in acton and results
First Program
First Computer, that never was…
…but may still be

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

FINAL:
MAJOR PROJECT – FINAL: Due 05/04/18
Part 1a: Building from Plans
Examples
Part 1b: Designing from History

EMP2 11: HTML/CSS Quiz

Intro:
Quiz! Some helpful tools.
Review instructions and start.

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

REVIEW:
LAYOUT:
Inline vs float
Remember This? Try using the above instead

PROCESS:
-Generating schematic wireframes for key interfaces and interactions:
Deliverables: Site Inventory/Site Map,
Layout grids – Wire Frames.
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.
Sources to Review:
More on the Hover
Advanced Hover effects
Zen Garden

HOMEWORK:
Start Work on your Final
– Create a sitemap. Create Wireframes for you major pages.
– Intro to frameworks
Fluid Template
Responsive Designs

1 2 3 37