Embed Size (px)
DESCRIPTION
Citation preview
Session I
Digital Portfolio Production Workshop
AAA 408/508 – WRK DIGITAL PORTFOLIO
Instructor – Scott Huette
Scott Huette
• BFA in Photography – 1993
• Master’s Degree in Arts Management – 1996
• Art Director for Computer Games, 8 Yrs. – 1997 to 2005
• Teaching for 6 years – 2002 to Present
• Professional Photographic Artist – 2005 to Present
• Board Member and Artist Services Chair at DIVA – 2005 to Present
Introductions To Each Other
• Pair up with someone you do not know already.
• Share Name, Major
• Important/Interesting Tidbit of information
• Overall Technology Skill Level
Information Design
What Is The Product?
Critical Tasks of Information Design
• Define goals of the product
• Define what the audience wants
• Decide how the product will reach its audience
• Choose the authoring tool
• Create a content inventory list
• Organize the content
• Produce a Site Map
Design a Site Map
Development Choices
Comparison of Development Options
ToolsMultimedia Authoring
Online Publishing
Portfolio Templates
Examples FlashXHTML
CSSDreamweaver
Artician, Coroflot, Moonfruit, Wordpress
LimitationsSteep Learning
CurveSteep Learning
Curve
Limited capability to customize experience
Skill Level Advanced Intermediate Basic
Content Is King
Resolution
Are They The Same Resolution?
213 x 320 pixels.71” x 1.067”
300 ppi
213 x 320 pixels2.958” x 4.444”
72 ppi
Anti-aliasing
Anti-aliasing Fringe
Colors and Palettes
8-bit
16-bit
24-bit
Palettes & Dithering
Compression
Introduction to XHTML, CSS & DreamWeaver
The Tech
What is XHTML?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>Untitled Document</title></head>
<body></body></html>
Example XHTML Elements
• Paragraph <p></p>
• Break <br />
• Heading 1 <h1></h1>
• Heading 2 <h2> </h2>
• Unordered List <ul><li></li></ul>
• Table <table><tr><td></td></tr></table>
• Anchor <a href=”#”></a>
• Image <img src=”image.jpg” />
• Bold <strong></strong>
• Italics <em></em>
What is CSS?
A CSS Rule
h1 { color: navy; border-bottom: 1px solid black;}
“h1” is a selector. It identifies the html element to style. In this case all <h1> elements.
“color” is a property and “navy” is its value.
There are over 100 css properties.
CSS Selectors
h1, h2 { color: navy; } – this is an element or type selector.
.blogentry { color: navy; } – this is a class selector.
<p class=”blogentry”>...</p> – classes can be assigned to any html element.
#logo { position: absolute; top: 0px; left: 0px; } – this is an id selector.
<img id=”logo” src=”logo.gif” /> – id’s can only be used once per page.
Attaching a Style Sheet
…<head>
/*this is an internal style sheet*/<style type=”text/css”>
h1 { color: blue; } </style>
</head>…
…<head>
/* this is an external style sheet*/<link rel=”stylesheet” href=”path/to/stylesheet.css” type=”text/css” />
</head>…
Homework – Due Feb. 5
Tier 1 & 2
• Digitize content
• Read Designing A Digital Portfolio Ch. 1 & 2
• Create Site Map
Tier 1
• Explore Portfolio Creation Tools
• Create an account on the System of your choice
Tier 2
• Read DreamWeaver Ch. 1 & 2
