TO

DA

Y

1)Icebreaker

2)Check-in

3)Module 2 practice/example

4)Reading activity

5)Exit question/homework

IC

EB

RE

AK

Another day, another Icebreaker!

This time, we‘re going to do something

similar to last time but also just a little

different. Say your name, again, as

always. But then I want you to tell us all

who is your favorite

TV/Cartoon/Movie/Comic Book/Toy

character based entirely on character

design. Mine is below.

CH

EC

K IN

Before we get started on work, how

are things going so far for

everyone?

I will be grading Tumblr entries and

tweets for the first time tonight or

tomorrow, so I will have some news

for you Wednesday on how your

responses are going.

How is the group work? Everyone

getting a good start? Anything we

need to talk about?

X-A

MP

LE

As you work on Module 2, I wanted to

give you a hands-on example, so what

we‘re going to do is look quickly at a

literal example then do one together.

The first example– to show you how

this works– is my quick analysis of

James Paul Gee‘s website. Gee is a

scholar who researches and studies

video games (like myself).

I am unsure how I feel about his site,

but the prompts I gave you will help me.

Click to go to site

Q #1

Who is the audience for the site,

and what elements of the page

indicate the audience to you? Do

you sense conflicts between the

intended audience and the

audience the page actually

attracts?

A #1

It‘s unclear, just from looking at the

page, who EXACTLY the audience for

this page would be. Gee playfully

claims it is for himself, and that it is for

people who might want access to his

publications.

That‘s roughly accurate, I would

imagine. Most academics who have

web sites have them as hubs for their

research and teaching.

Gee could do a much better job of

making that transparent, though. Let‘s

talk about why.

Q #2

Similar to the first question, what is

the purpose of the site? What is it

meant to do? How do you know

that?

A #2

The ―cheap‖ answer is that the purpose of this

page is to be a blog. Gee claims in-text that it

is for him to vent, but that‘s probably not an

accurate description of the work it does. I think

he‘s being a bit playful there.

If we look at what is present, it seems more

likely that this is a launch pad for people who

see Gee speak or who are reading one of his

works to find more information.

This is clear by the emphasis that the site puts

on documents, though it is bizarre that such

primacy is given to comments on posts. One

has to wonder, from a design standpoint, why

this was done. It‘s also unclear why the vita is

a document and doesn‘t just display in-line as

a PDF.

Q #3

How well is the site designed?

Think about all elements of design

here—user experience, color,

image use, video use, use of java,

menus, tables, etc. Think about

what could be better, what is

perfect, etc.

A #3

I‘m going to say that this isn‘t a hideous

website, but I don‘t think the design is

particularly strong, either.

It appears to be a Wordpress theme (which in

and of itself isn‘t bad), but there‘s no real logic

to why the colors were chosen (nor is there

any real identification between Gee as a

scholar and that robot duck looking element).

What I question most, however, is the set-up

of the navigation and what the page seems to

value. There‘s tremendous space and

attention given to user comments. This might

not be a bad idea, but divorced from their

respective posts, one has to attempt to figure

out what they are responses to. There is no

other organization of links or posts.

Q #4

Looking at the site, what do you feel

like you need to know in order to

create websites in your field? What

would it take to replicate the site?

What would it take to improve on

what is there?

A #4

I have one major advantage here– I can tell

from looking at the page that it is

template/theme driven. It is actually a Drupal (I

theorized earlier that it was a Wordpress– I

looked at the code since).

So in order to recreate this page, all I‘d need

is the content, that weird image, the drupal

freeware and a server to install to. It would be

quick and easy to set up a doppleganger.

I think the site could be dramatically improved

by moving to Wordpress as a platform and

better organizing content. I also think it might

be nice to see something more about Dr. Gee

here (other than his vita, we get little info).

SK

IP

#5

I‘ll just talk to you a bit more to

cover #5– on your group

responses, this will be about your

conversations about the site, I‘d

think, so my lack of a collaborator

would make me repeat myself a

great deal if I answered.

PIC

K A

S

IT

E And I‘ll tab to the other window

so we can practice on it.

Do not pick a site you think

you might use for the project.

ON

2 D

WS

I had you read about the DOM today.

So, really quickly, I want you to pair up (it

doesn‘t have to be your team, but why

not?) and complete the following task:

1) Define the DOM in your own words

2) articulate why you believe it is

important based on the reading for today

I will compile your answers on-screen,

but let‘s take a few minutes to talk about

this.

PH

IL

L’S

D

EF The DOM (Document Object

Model) is the backbone of

current web design.

A number of things about the

DOM are important, but the

concept I want you to start

trying to get your mind around

now is this:

Form=/= content

These two are SEPARATE.

SO

W

HA

T?

You might ask why that matters.

And that would be a good question. So

let me tell you a story. When I first

started coding, there was only a browser

called Lynx. It was text based. In a text-

based web scenario, there‘s very little

design. All was well, because all you

needed to do was find a way to get Lynx

to put your text and textual links in front

of people.

Then came MOSAIC (the first visual web

browser– you‘ll read more about this

soon) and the whole thing went crazy

IN

T

HE

9

0s

Oh those free-wheeling 1990s.

Bill Clinton was President, Kurt Cobain

was alive, and people were developing

for the web all willy-nilly ™

This caused a problem. There was a

long battle of browsers that ended up

being essentially Netscape (then

Firefox) vs. Internet Explorer (then vs.

Safari, Opera, and now Chrome).

The browser is an ‗end‘ receiver. It

takes content from the server and

displays it for the user.

TH

E IS

SU

E

I‘m going to try a sports metaphor for

this, but it might blow up on me.

I‘m a Colts fan (yeah, Indiana guy– it

explains A LOT). Peyton Manning– AKA

football‘s gift to metaphors everywhere–

used to talk about his timing passes with

Marvin Harrison (now retired) and

Reggie Wayne (still the man). Manning

would point out that a ―Marvin‖ pass had

to go to a different place than a ―Reggie‖

pass (meaning relative to the player)

because they catch differently.

Marvin would miss a Reggie pass, and

vice versa.

WH

AT

?

Think of the Web as a jugs machine.

It‘s tossing passes.

Just passes. Not special passes. It‘s just

chucking balls out there into the field for

someone to catch.

IF you were designing just for Firefox (Reggie

Wayne), you could throw ―Reggie‖ passes and

score touchdown after touchdown because

the web plays terrible defense.

But… users don‘t ALL use Firefox. Some use

IE. Some use Opera. Some use Safari

(because they need to learn to do better).

Some use Chrome.

SO

M

ETA

Think of Chrome as Rodney Harrison.

You don‘t want your Peyton Manning

pass in Rodney Harrison‘s hands, but he

could snag the interception. Then the

play doesn‘t go right.

Suddenly the ball is going the other way.

BU

T T

HE

D

OM

So in the late 1990s, and even into the early

2000s, there are ―frontpage plugins‖ that allow

you to design a page in MS Frontpage and

there are code differences for IE, for Firefox,

for Opera, etc.

The DOM attempts to smooth that out in a

cool version of network socialism. It basically

says ―hey, dude, do it this way. Then people

can use whatever browser they like and it‘ll

still work.‖

It‘s a standardization that allows for all

browsers to access the same basic

documents (there are still hiccups– this isn‘t

Xanadu), and it also allows for user

customization of presentation.

BECAUSE CONTENT IS

DIVORCED FROM DESIGN.

LET ME SHOW YOU

SOMETHING. LET’S CALL

THIS CSS PREVIEW 1.

This is the Tumblr I used with my

fall class. The post you see here is

a 5 song mix CD description

One CSS theme change and it’s

this.

One CSS theme change and it’s

this.

One CSS theme change and it’s

this.

CONTENT: SAME

FORM/PRESENTATION: NOT

THE DOM.(it’s a little dramatic)

HO

ME

WO

RK

For next class: Read for class: How to Build Web Sites(click on “Start with Lesson One now” then follow along—read as much as you’d like, but you only have to read lesson one), 10 Principles of Effective Web Design , and How to Ruin a Web Design

Your Twitter exit question is this: on

a scale from 1-10, how comfortable

were you with the reading for today,

and why (within your limited

characters ).

See you Thursday!