Category Archives: 1. UARTS

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

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

1 2 3 36