Image Maps, CSS, and SVG

So you think you want to create an image map and you have an image or graphic that you’re ready to slice away at. Wait! There are alternatives to create the same type of basic interaction, that might be more appropriate.

An Image and CSS
There’s a good article on A List Apart, titled Night of the Map, which explains how to use a simple image and divs to create the hotspots over the full image. Explains the method and a bit about process. It’s a pretty easy approach and quite effective, also imagine different kinds of effects and interactions you could create with some animation of those divs and swaping image background. Could be quite fun.

Interactive SVG
The other approach, particularly if you’re already working with scalable vector graphics (SVG) already in an application like Illustrator, is to make those SVGs interactive. Codedrops has a good tutorial on how to do this and an interactive demo of the results.

jQuery Animate

If you’re interested in learning how to animate with jQuery, you may want to take a look at this short, clear and useful tutorial by Elated. It shows you how to do things such as fade, scale, and position objects on a page. The examples also include basic user interaction on click.

Animate Along a Path

In order to animate along a path you might consider one of these 2 basic approaches depending on whether your browser is compatible with CSS3 or if your user has javascript turned off (why they would these days, I have no idea):

use the jquery.path plugin developed by Weepy, it’s available on Github at the link below.

CSS3 Translate
Use the CSS3 translate, nested elements and opposite rotation to create the effect just with CSS. There’s good documentation and fiddles available on this Stack Overflow post below.

Finally here is a really cool online tool to create animations across multiple points (no curves that I can see though). It uses a simple GUI (graphical user interface) to allow you to visually see the effect and graphically modify it. It then generates the code needed for your files. It’s called Stylie and it’s pretty cool.

George Lakoff on Framing and Metaphors

In this video George Lakoff, Professor of Cognitive Linguistics at U.C. Berkeley and co-author of Metaphors We Live By (with Mark Johnson), speaks about frames and the impact of methphor on our everyday life.

Literary Terms

Karishma has recommended a book titled ‘A Glossary of Literary Terms‘ by M.H.Abrams and Geoffrey Galt Harpham, and has suggested that it could be quite useful in terms of better understanding discussions of rhetoric, semiotics, pragmatics and so forth. Will update the post when she provides further links.

Binding Overview

print binding
The designer’s insights web site has a really good resource on different binding methods for your print publications. It covers a broad selection of the most traditional or common methods and gives diagrams and descriptions of each. Check it out at the link below:

They also have a few useful links on folds, grids (and binding implications), and print signatures. They’re all quite visual and clearly explain the options and issues quite effectively, all listed below respectively.

All About Folds | Basic Grids | Print Signatures

Semiotics Terms

Below are some terms used in semiotics and, to some degree, in rhetoric and visual rhetoric. The list will be added to as I come across further useful definitions. Originally adapted from Semiotic Terminology.

Signifier: any material thing that signifies, e.g., words on a page, a facial expression, an image, a graphic.

Signified: the concept that a signifier refers to.
Together, the signifier and signified make up a sign.
Sign: the smallest unit of meaning. Anything that can be used to communicate.

Charles Sanders Peirce believed that the process of semiosis, the creation of a sign, required three relationships.
Object: the thing itself, similar to Saussure’s signified (which was more a concept of the object)
Representamen: roughly equivalent to Saussure’s signifier, any material representation of the object itself.
Interpretant: the disposition or readiness of an reader/viewer/listner to respond to, or interpret, a sign.

Peirce also thought signs were classifiable according to how their object functioned in signification, the following are his classifications.

Denotation and Connotation

Beyond its literal meaning, or its denotation, a particular word may have connotations: for instance, sexual connotations. “Is that a gun in your pocket or are you just happy to see me”. In semiotics, denotation and connotation are terms describing the relationship between the signifier and its signified, and a distinction is made between two types of signifieds: a denotative signified and a connotative signified. As a result, meaning is composed of both denotation and connotation.

Denotation tends to be described as the definitional, ‘literal’, ‘obvious’ or ‘commonsense’ meaning of a sign. In the case of linguistic signs, the denotative meaning is what the dictionary attempts to provide. For the art historian Erwin Panofsky, the denotation of a representational visual image is what all viewers from any culture and at any time would recognize the image as depicting (Panofsky 1970a, 51-3).
Connotation is used to refer to the socio-cultural and personal associations (ideological, emotional etc.) of the sign. These are typically related to the interpreter’s class, age, gender, ethnicity and so on. As such, a connotative signified is considered to be polysemic, or more open to interpretation, than denotated aspects of the signified.
Denotation is sometimes regarded as a digital code and connotation as an analogue code (Wilden 1987, 224), and Barthes makes use of these descriptors in “Rhetoric of the Image”.

Goffman’s Frame Analysis

” …definitions of a situation are built up in accordance with principals of organization which govern events, and our subjective involvement in them;
frame is the word I use to refer to such of these basic elements as I am able to identify…” — Goffman, 1974

Goffman’s frame analysis is a way of explaining “what is going on” and determining “what is salient” in a given event or experience. Typically, it involves organizing our experiences and structuring our individual perception of the events of experience. This includes filtering important information, discarding the noise and, according to Goffman, building frames and basic cognitive structures to guide us in our perception of reality. Human beings don’t consciously manufacture these life frames but unconsciously adopt and adapt them depending on the situation.

Goffman argues that humans frame things in order to organize their understanding of something and to guide future action. Frame analysis is therefore the study of cognitive organization of social experience. He uses picture frames as a metaphor to illustrate how people use frames (structure) to understand their pictures (context). Primary frames are the most basic frameworks which take an experience or event and make it more meaningful. Goffman concentrates on frameworks that aim to “…construct a general statement regarding the structure or form of experiences individuals have at any moment of their social life”.

Taken from’s_frame_analysis

Appealing Menus

HyoJinLee_pathosmenuThe following (after the break) are a series of menus created by students with a 30 minute deadline and emphasizing one of Aristotle’s appeals; logos, ethos, or pathos. Clicking on the image will open the high resolution version. If you wish to provide feedback in the comments section, please refer to the number before the image.

Interactive PDF in Acrobat

The following documents will help you to create a simple interactive PDF that can be used as a clickable prototype for your screen-based interaction projects (web sites, mobile apps, eBooks, etc.). They are courtesy of Kathleen Jacques, our Communication Design Technician, and you are welcome to contact either of us if you have any questions.
Included below are the demo version and a brief tutorial that takes you through the steps of creating that demo.

Demo: kj-iPDF.pdf
Tutorial: kj-iPDF-tutorial.pdf

Appealing links

Please comment on this post with links to material about Aristotle’s rhetorical appeals that you’ve found useful.

Think my keyboard may need a cleaning!


a GIF me more party

MTV mobile presents a GIF me more party in the form of an interactive video with music by Death Grips. The a very cool preloader fires through a series of images and stop motion that is meant to simulate an animated GIF. Looks as though it’s actually video shot at high speed, the films been really nicely graded, then frames are dropped and some filter applied before being converted to flash. The interactive video portion is really impressive, the idea that you can choose from three different character POV’s is a good concept but the fact you can choose from different party goers throughout the video is amazing. The whole thing is very slick, topped of with a great audio track. I’d love to see someone do something like this with HTML5+, now that would be really cool.
Check it out here:

Welcome to Pine Point

Pine Point
This is the Flash interactive narrative by the Goggles. It can be watched here.

3D Animated GIF

3D animated GIF

Just a cool animated GIF, that’s it.

CORE: Course on Research Ethics

This is the required online course that all 3rd year core students must take as part of the approval process for their research project. Here is some background on it:

student infoThe online tutorial TCPS 2: CORE (Course on Research Ethics) is an introduction to the 2nd edition of the Tri-Council Policy Statement: Ethical Conduct for Research Involving Humans (TCPS 2). TCPS 2:CORE consists of eight modules that reflect the content of TCPS 2. It is applicable to all researchers involved in human participant research, regardless of discipline or methodology. The purpose of TCPS 2: CORE is to provide an introduction to TCPS 2, primarily for researchers and, secondarily, for Research Ethics Board members.

The certificate of completion for the tutorial is required of all University researchers conducting primary research with human participants, and recommended for all REB members. A copy of the certificate should be sent to the Emily Carr University Research Ethics Board – Annual renewal is required for all University researchers conducting primary research with human participants.

And here’s the direct link below, it’s not that long of a course (relatively speaking) but it isn’t a quick quiz either. Will probably take you a few hours to complete so you may want to start as soon as you have a few spare moments (your progress is saved when you log out so you don’t have to do it all at once).

Okay, good luck. Or maybe I should say Gambare (Japanese for “Do your best”).


As the anniversary of the American dropping of the atomic bomb on Hiroshima approaches in just a few days, I thought I would post this important documentary online. It gets closer than many I’ve seen in explaining the reasons behind the US decision to drop a uranium atomic bomb on Hiroshima on the 6th of August followed by a plutonium atomic bomb on Nagasaki only 3 days later. It also speaks powerfully of the immense immediate and long term suffering inflicted on the civilians, who were the direct target of the attack, as they made their way to work that morning.

Whatever your beliefs are about the use of atomic weapons or justification for the bombing of Hiroshima and Nagasaki, this film will provide opportunity to think again about those events and the people they affected.

Modern or post modern

An excellent and concise explanation of the difference between modernism and postmodernism, courtesy of the Open Learning University.
The modernist tradition rejected the mythical and religious views of the world and gave rise to science, democracy, liberation movements and a belief in the supremacy of rationality. Within this tradition there was an implicit belief that there existed a given external reality and that the task of all enquiry was to develop a better and better model (or map) of that external reality.
The postmodernist perspective is that the assumption about a pre-given external reality is not valid, especially in the domain of human culture, values, beliefs and organisations. In general, and particularly in these social domains, it is impossible for anyone to have a model of reality that does not constrain their perception in some way. So while postmodernists do not say that there is not an external reality, they would claim that it is impossible to have an unbiased perspective on what it is.