Future Past Present — Posters

For your 4th project, you will design and produce 2 posters, one print (24 x 36 inches) and one digital (600 x 900 pixels). These posters will announce the series of 3 books you've made this semester. 

Put together content and forms from all 3 books.

We should get a sense of the total history of your subject, articulated in distinct but related temporalities (future, past, present). 

Additionally, find ways to index the different media in which you produced your books — print, epub, web (tumblr) — so we can see that you've produced a series which travels through different materialities, platforms, codes, forms. (Note: these media have their own temporal or historical characteristics.)

Consider:
Is there a single "argument" to your series, or is it more heterogeneous (perhaps there are interesting contradictions within)? Is there an argument about time itself somewhere in the conjunction of your 3 books? Can this be communicated on the poster?

Consider the 2 posters as different versions which each address the particularities of its own medium. The digital poster should quickly communicate its subject; the print one can introduce significantly more complexity (for starters ...)

Include the titles and urls of your 3 books in the posters.

Make something cool!

Schedule

Mon 21 April

Show 2 sketches of each poster by projection

Wed 23 April

Studio day

Mon 28 April

Present final posters (print and projection)

Wed 30 April

Discussion

Wrap up

Book Number 3

  +  The Present

Your last "book" will be a Tumblr blog. 

You will produce, in Tumblr form, a networked recirculation of material which indexes the present tense of your subject —- and one which additionally investigates the unique potentials of the networked blog as a publication medium.

A major concern in this project is to uncover and experiment with the things that Tumblr is especially suited to, with Tumblr-logic if you will.

How do images and texts relate in this medium? What is the difference between found and invented material? How can you activate tumblr's "social" and networked capacities? You need not merely reproduce the well known tropes like animated gifs -— you can also experiment against the grain and force tumblr to do things it wasn't meant for.

Think about the overall organizational logic. Is your Tumblr a narrative, with a beginning, middle and end; or is it a database, marked up with tags which allow multiple navigational paths? Both?

Is your Tumblr open and iterative -- i.e. will it be something which might be continuously updated into the future, or is it a closed set of materials?

  +  Content

Images: 30 reposts from other Tumblrs, 30 "original"

Caption all of them!

You may include video content as an image.

Remember: images are the currency in this medium!!

Texts: 10 citations with source and links (if possible).

These can be either html or print (scans or photos of pages).

These should be both image captions (for shortish citations) or individual posts (longer-form essays).

Words: 10 words related to your subject. These should be individual posts with unique CSS. They might be links.

Introduction: your 500 intro text.

Navigation: develop at least 5 tags for your content and use these as a basis for your site navigation.

  +  Schedule

M 31 March

Register your tumblr. Find a name. Choose a theme. Collect content.

Present to the class your first research as well as 5 Tumblrs which will serve as reference models: conceptually, formally, etc. These may be direct references or more "inspirational".

W 2 April

Studio day and desk crits

M 7 April

Tumblr CSS demo

Possible forms. What are the unique formal possibilities of this platform? 

Studio day

W 9 April

due: Intro text posted to blogspot

Presentation of Tumblrs

M 14 April

W 16 April

Final site presentations

Interesting Tumblrs

http://p-dpa.tumblr.com/

http://francescacoluzzi.tumblr.com/

http://contentawaretypography.tumblr.com/

http://my-tumblrisbetterthanyours.tumblr.com/

http://craigslistmirrors.tumblr.com/

http://traditionaldoom.tumblr.com/

http://luxurycommunism.tumblr.com/

http://fuckyeahbrutalism.tumblr.com/

http://otletsshelf.tumblr.com/

http://libraryoftheprintedweb.tumblr.com/

http://bookshop-index.tumblr.com/

http://pleasecometotheshow.tumblr.com/

http://p-exclamation.org/

http://criticalgraphicdesign.tumblr.com/

http://readingforms.com/

http://slide-shows.tumblr.com/

http://mthvn.tumblr.com/

http://francescacoluzzi.tumblr.com/

CSS stuff

link to style sheet in HTML:

<link rel="stylesheet" type="text/css" href="style.css">

CSS

Selector and Declaration

Declaration: Property and Value

CSS selectors are html tags, classes, or ids

units:

percentage, pixels, em

@charset "UTF-8";

/* CSS Document */

PROPERTIES

font-family: 

font-style: 

font-weight:

font-size:

line-height:

letter-spacing:

text-decoration:

text-align: center;

text-indent:

color:

background:

background-image: url("seashell.jpg");

background-repeat: repeat-x;

border: .25em solid red;

border-radius:

-webkit-border-radius:

margin: 0 0 1em 0; (top, right, bottom, left)

padding: 0 0 1em 0; (top, right, bottom, left)

display: 

float:

clear:

page-break-after:

page-break-before:

list-style-type: 

list-style-position: 

list-style-image: url(bullet.gif);

add 5 classes 

.caption {

display:inline-block;

text-align:center;

         }

.page-break {

page-break-before: always;

}

try one css3 property

gradient

box shadow

box-shadow: -10px 10px 10px #999;

-webkit-box-shadow: -10px 10px 10px #999;

@font-face

{

font-family: "My Awesome Font";

src: url("orbitron-medium.otf");

}

Font must be located in the same directory as CSS file.

Fonts files must be either OpenType (.otf) or TrueType (.ttf) format. 

You have to add a font file for every variation of a typeface: bold italic etc

Test in Browser

Test in different browser widths

http://whatsmy.browsersize.com/

http://wiki.mobileread.com/wiki/EReader_Screens

Indesign Tag Hack

Indesign find and replace hack for getting the <p> around all your paragraphs

1. Select the text you want to tag
2. find: "end of paragraph"
   replace: </p><p>
3. and then, to clean the text up visually,
   find: </p>
   replace: </p> "end of paragraph"

Voila!
This should enclose all your paragraphs in the <p> tag.

you will have to manually add the <p> to the first paragraph.

Read eBooks without a Kindle

Check it out.

Theses on the Philosophy of History

Look at these paragraphs by Walter Benjamin, first published in Neue Rundschau, 1950, and translated into English in the collection Illuminations, 1969.

Pick one thesis (one section) from the text which might inspire or guide you, however loosely, as you assemble research materials this week. This is a tough text I know. See what you can make of it, in the project of constructing an image of the past of your subject.