Study Guide
This is just a GUIDE
There will be 50 questions on the test
Not all of these questions will be on the test
Some questions will be on the test
that are not in this guide.
Study the lecture slides accordingly.
They are posted on Blackboard
UX & Interaction Design:
What are the six UX design principles?
• Visibility - can i see it?
• Feedback - what is it doing now?
• Affordance - how do I use it?
• Mapping - where am 1 and where can I go?
• Constraint - why can’t I do that?
• Consistency - I think I have seen this before?
In regards to interaction design what is an
affordance? What is a constraint?
Affordance:
Perceived and actual properties of an object that
give clues to its operation
Constraint:
Restricting the kind of interactions that can take
place, to reduce the chance of error and to focus
user’s attention to needed task
What are the six gestalt design principles?
Similarity
Continuation
Closure
Proximity
Figure/Ground
Symmetry and order
What is the difference between a high level
programming language and a low level
language?
Low level programming language:
Assembly level language, machine code.
Commands or functions in the language map closely to processor
instructions. Is not easily programmed or read by humans,
but does not require compiler to translate code to hardware.
High level programming language:
Fortran, C, Pascal, C++, Java
A programming language with strong abstraction from the details
of the computer. May use natural (human readable) language
elements, or may automate or hide areas of computing systems
(e.g. memory management), making the process of developing a
program simpler and more understandable relative to a lowerlevel language. Not hardware-specific, and must be translated
into machine language by a compiler or interpreter.
In the context of user interface what is a
metaphor?
An Interface metaphor is a set of user interface
visuals, actions and procedures that exploit specific
knowledge that users already have of other
domains. The purpose of the interface metaphor is
to give the user instantaneous knowledge about how
to interact with the user interface.
Name four of the most common metaphors
used for the desktop environment.
Folders, buttons, trash can, menus,
clock, calendar, mailbox…
What is the uncanny valley?
The uncanny valley is a hypothesis in the field of
aesthetics which holds that when features look and
move almost, but not exactly, like natural beings, it
causes a response of revulsion among some
observers. The "valley" refers to the dip in a graph of
the comfort level of beings as subjects move toward
a healthy, natural likeness described in a function of
a subject's aesthetic acceptability. Examples can be
found in the fields of robotics and 3D computer
animation, among others.
What is Eliza?
ELIZA is a computer program and an early example
of primitive natural language processing. ELIZA
operated by processing users' responses to scripts,
the most famous of which was DOCTOR, a
simulation of a Rogerian psychotherapist.
What is the Turing test?
The Turing test is a test of a machine's ability to
exhibit intelligent behavior equivalent to, or
indistinguishable from, that of a human.
Alan Turing proposed that a human evaluator
would judge natural language conversations
between a human and a machine that is designed to
generate human-like responses.
Collage:
From Photomontage to
Photoshop
Why was the introduction of the found object
in collage a radical shift in the early 20th
century in painting, how did it depart from
ways we traditionally see the artist as an
“author” and his/her skills?
• A move from technical skill
(creating illusions of space, realism)
to the conceptual (ideas, politics, criticism).
• Becomes more about quality of juxtapositions
than about craftsmanship.
• The inclusion of the everyday in the art questions
the notion of art as a precious, revered commodity.
What is a photomontage?
Photomontage is the process and the result
of making a composite photograph by
cutting, gluing, rearranging and overlapping
two or more photographs into a new image.
Compare and contrast the
photomontage work of the Berlin Dadaists
(Hoch, Heartfield) and the Russian
Constructivists (Rodchenko, Klutsis).
Both used photomontage.
Both viewed the new art form as opposition to
high art and high culture
Berlin Dadaists used photomontage in order to undermine
and criticize the government and popular culture.
Russian Constructivists used photomontage to
promote the ideology of the state.
How did digital technologies change the
photomontage?
“Digital technologies add an extra dimension to the
composite and collage, for disparate elements can be
blended more seamlessly, with the focus being on a ‘new’,
simulated form of reality than on the juxtaposition of
components with a distinct spatial or temporal history. Digital
collages and composites constitute a shift from he affirmation
of boundaries to their erasure.”
- Christian Paul, Digital Art
What is the hyperreal according to
Christian Paul?
“Apart from the shifts that digital technologies
have brought about in the realms of collage, montage,
and compositing, they also challenge traditional notions
of realism by facilitating the creation of alternative or
simulated forms of reality or a sense of the hyperreal.”
-Christian Paul, Digital Art
Affordances of
Digital Media
& Generative Media
What are the four affordances of the digital
medium, how would you characterize each of
these affordances and what are examples?
Encyclopedic
unequalled storage + infinite library
databases, archives, encyclopedias
Spatial
Navigating + GUI (graphical user interface)
maps, gps, navigation conventions, information spaces
Procedural
computer processes
game engines, search engines, spread sheets, control conventions
Participatory
Human interaction
blogs, media sharing sites, recommendation systems,
input devices, icon/command conventions
Explain the concept of parallel tendencies
between art and science since WWII, what
are examples?
Similar ideas and concepts were being articulated at roughly the same
times by artists and computer scientists.
In addition, they were using the same forms to deliver their message:
manifestos (theoretical programs by computer scientists)
& completed artworks (prototypes to demonstrate ideas).
Art as:
- temporal process (not an object)
- active participation of the audience
- open systems (conceptual systems & and instruction sets)
- Chance events
Fluxus scores and Allan Kaprow’s Happenings are comparable to
Sutherland & Licklider’s HCI (human computer interaction) concepts
How is generative media
different from a feature film or novel?
Novels and feature films, once created and released by the author, are linear and
unchangeable. They we remain the same each time they are watched/read by a passive
(non-contributing) audience.
Generative Media is music, art, video and text that uses systems that grow and change over
time. It is media that embraces randomness, feedback and probabilities in the process of its
production. Generative media uses a set of some initial conditions, then it is open to chance
occurrences in the environment. Generative artists embrace a process that delegates
essential decisions to computers, data sets, or even random variables. This allows important
metaphors to arise in their work, calling attention to the relationship between humans and
the computers that surround us, the mountains of information we generate, and the powerful
impact that technology has on our relationships with each other.
What are different forms can generative
media take?
Sound, text, image, video,
physical computing (sensors),
or any combination of these.
Non-linear Narrative
What is the main difference between a linear
and non-linear narrative?
Linear:
Reader goes through whole story in order
Non-Linear:
Reader chooses path through story.
Multiple story paths and outcomes.
Can a film be truly non-linear?
Not in the traditional format.
Films can have a non-linear plot, using
flashbacks, premonitions, etc., but ultimately
the story remains in one predetermined order.
The plot and outcome remain the same every
time it is viewed, and the viewer has no input.
What is the difference between
plot and story?
A story is a series of events recorded
in their chronological order.
A plot is a series of events deliberately arranged
so as to reveal their dramatic, thematic,
and emotional significance.
In regards to linear storytelling telling what
does the term suture mean?
Suture: Literally, to stitch up.
In film theory suture has come to mean, in its simplest sense, the means
by which the spectator is "stitched" into the filmic text.
The viewing subject's position is a supremely passive one, a fact
which is carefully concealed through cinematic sleight-of-hand.
This sleight-of-hand involves attributing to a character within the fiction
qualities which in fact belong to the machinery of enunciation:
the ability to generate narrative, the omnipotent and coercive gaze,
the castrating authority of the law."
Three ‘looks’ implied by film:
the look of the camera itself
the look of the audience watching the film
the look of the characters on screen
According to Janet Murray what are
the four essential elements
of digital environments?
Digital environments are:
procedural
participatory
spatial
encyclopedic
Datavisualization
& Data Aesthetics:
Why is it helpful to visualize data?
• Humans have amazing pattern recognition capabilities
• Data visualization takes advantage or our visual and
cognitive abilities to spot aberrations, trends and
spaces/interruptions
• We can see patterns we are unable to see when
looking at lists of numbers
• We can analyze data quickly
• It enables us to comprehend vast amounts of information
What is the difference between
a data visualization and an infographic?
Infographics
Are one of a kind, hand crafted, they are about a specific
set of data for a particular issue, they are context sensitive.
Data Visualizations
Are general and can be reused with new data plugged in.
They often use a program and are automated.
They are context free.
What are the five broad categories
that data visualizations are broken into?
2D
Temporal
Multidimensional
Hierarchical
Network
Identify and explain the difference between
a choropleth, dot distribution map,
arc diagram, polar diagram, stacked graph,
tree map and node-link diagram.
Choropleth (2D)
Choropleth show statistics that pertain to a particular location on a map with
shaded areas or patterns to convey the measurement or meaning of the data.
Ex. population density by state.
Dot distribution map (2D)
Dot Distribution Map displays data or a feature of a territory on a map using
dot symbols (sometimes referred to as a – dot density map)
Arc diagram (Temporal)
Arc Diagram – reveal patterns within data to graphically show repetition and
patterns within patterns (subsequences).
Polar diagram (Temporal)
Polar Area Diagram - use equal slices (angles) of a circle ,but extend outward
away from the center to visually display greater quantities of data in a
particular section. They are useful for showing cyclical information like data
over a year. In the example below you can see that the months where the most
deaths occurred were in the winter with January having the highest quantity.
Stacked graph (Multi-dimensional)
vertical and horizontal groupings that include subgroups of data stacked on
top of each other.
Tree map (Hierarchical)
uses nested rectangles to display hierarchical data
node-link diagram (Network)
Node - represented as a circle: Link - connecting line
These visualizations capture relationships between networks
What elements of art are
frequently used in data visualizations?
Line, Form, Shape, Color, Value
What are the tendencies of
the new media avant-garde according to Lev
Manovich and how are media works like
Thru-you, Listening Post, and A More Perfect
Union an example of this?
“The old media avant-garde of the 1920s came up with new forms, new ways
to represent reality and new ways to see the world (ex. Berlin Dada). The
new media avant-garde is about new ways of accessing and manipulating
information. Its techniques are hypermedia, databases, search engines,
data mining, image processing, visualization, and simulation.
The accumulation of huge media assets and the arrival of new electronic and
digital tools which made it very easy to access and re-work these assets play
a key role in this shift towards postmodernist aesthetics.
The new avant-garde is no longer concerned with seeing or representing the
world in new ways but rather with accessing and using in new ways
previously accumulated media. In this respect new media is post-media or
meta-media, as it uses old media as its primary material.”
– Lev Manovich
All pieces mentioned use data collected from online, previously existing
resources as source material for the final compositions
How are classification strategies applied to
media in the work of Candice Breitz,
Kevin and Jennifer McCoy
and Christian Marclay?
The use of categorical strategies in media art allows us to see clearer how
media constructs our identity, our politics, and our understanding of race
and gender. Reclassification empowers alternative visions, that challenge
the dominant tendencies of popular culture. It allows us to see the invisible.
Candice Breitz
Soliloquy Trilogy (2000) Re-edits 3 films using only the protagonists dialog,
she eliminates everything but the single character and their words.
Kevin and Jennifer McCoy
Learning from Las Vegas (2003) Appropriates 21 films which feature Las
Vegas prominently or as a back drop. 120 DVD’s that feature different
categories of what can be learned from different Hollywood portrayals of Las
Vegas. Categories include: Learning to Smoke, Learning from Sequins,
Learning from showgirls, etc…
Christian Marclay
The Clock - This piece uses the history of cinema as a database to be
fragmented and reordered to create a 24 hour clock.
Key Terms for
Contemporary Web Design
& Responsive Environments
What is SEO?
Search Engine Optimization
is the process of affecting the visibility
of a website or a web page
in a search engine's unpaid result
What does the term “long tail” mean
in relation to keywords?
Specific, niche search phrases,
usually more than 2 words in length,
that offer a low competition, low search volume
and high searcher intent.
What are the methods you should use
to optimize a website for better
search engine rankings?
URL
make your html file name be your keyword. (ex. green-juice-cleanse.html)
Title
make the title of your document the keyword, this goes in the head section of your site (not the body).
<title>green-juice-cleanse</title>
Description
this is not read by bots but can help with click through’s because the text is seen in the search results
and may entice a person to check out your site if it is relevant for what they are looking for. It also goes
into the head, this should include the keyword but add additional helpful information.
<meta name="description" content="Thirsty for something healthy?
Try our green juice cleanse from Awesome Juice.”</>
Headers
your h1 tag should have your keyword in it. Many web developers only like to have one h1 tag/page
<h1>Green Juice Cleanse - from Awesome Juice</h1>
Body Text
your paragraph text on the page should relate closely to what your keyword is. This can be an area
where the additional text that you researched in your planning stage can also be included. In our
example we may want to use the terms “healthy” and “organic” in these descriptions.
Images
make sure to name your image with the keyword and add the alt text, this is read by the bots as well.
<img src="images/green-juice-cleanse.jpg" alt=“super awesome green juice cleanse"> </img>
What kinds of image analysis are being applied to
the images in Selfiecity (head tilt, smile, etc…)?
City, Age, Gender, Looking up/down,
Turning Left/Right, Tilt, Eyes Open/Closed,
Mouth Open/Closed, Glasses,
Mood (Calm, Angry, Happy)
What is an Arduino and what does it
enable you to do?
Arduino is an open-source electronics prototyping
platform based on flexible, easy-to-use hardware
and software. It’s intended for artists, designers,
hobbyists, and anyone interested in creating
interactive objects or environments. Arduino’s
communicate with a PC using a usb port
(universal serial port).
What are some of the types of sensors
that are widely available?
Common sensors include
light sensors, motion sensors, pressure,
temperature, infrared, and
accelerometers.
Explain how the projects we looked at in class by
Camille Utterbeck, Jim Campbell and Steve Lambert
can be considered examples of
responsive environments.
These media makers create projects that rely on an
exchange between the physical world and media.
The works are participatory and engage with a user
or they respond to an eco-system or event in the
physical world. They foster a symbiotic exchange like
cells between the physical and mediated worlds.
Illustrator and
Web Design Questions:
In Adobe Illustrator, what tools allow you to add or
delete anchor points?
Add:
Add anchor point tool, pen tool
Delete:
Delete anchor point tool, direct selection tool
What is the difference between bit-map and vector
graphics?
bit-map (raster):
Images are comprised of pixels at a fixed resolution.
If the image is enlarged, clarity is lost.
vector graphics
the use of geometrical primitives such as points,
lines, curves, and shapes or polygons, all of which
are based on mathematical expressions,
to represent images
As these expressions are scalable,
the image does not loose quality when re-sized.
In Adobe Illustrator, how do you access the
pathfinder panel if it is not already visible?
Select Pathfinder from the Window menu
Explain the differences between
the align and distribute options in the align object.
Align:
Aligns all objects along a specified point in each
object, i.e. if you align vertically by center point,
the center points of all objects will be on the same
y coordinate.
Distribute:
Distributes objects with even spacing between
specified point in each object.
Why is it important not to leave
spaces when titling your images for the web?
Spaces confuse the file path, breaking the link.
When using HTML, certain characters tend to mean specific things
(space delineates the end of a command, / indicates a file path…)
and if you use them in your file name, the web page won’t
know how to read them.
file name: my file.jpg
HTML: <img src=“images/my file.jpg”>
will look for a file called “my” which does not exist.
file name: my/file.jpg
HTML: <img src=“images/my/file.jpg”>
will look for a file called “file.jpg” in a folder called “my” which does not exist.
Characters like &, $, (), #, <, etc also have specific meanings within various
web coding languages, and therefore should not be used in file names.