1) The document provides an example analysis of scholar James Paul Gee's website to demonstrate how to analyze a site using provided prompts. 2) It then discusses the importance of separating a website's form (design and presentation) from its content, using the example of how the DOM allows the same content to be presented differently across browsers. 3) The separation of form and content is important because it prevents websites from being designed for only one browser, since users can access the same content across different browsers.

2. IcebreakerCheck-inModule 2 practice/exampleReading activityExit question/homework TODAY

3. 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.ICEBREAK

4. 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? CHECK IN

5. 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. X-AMPLE

6. Click to go to site

7. 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?Q #1

8. 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.A #1

9. Similar to the first question, what is the purpose of the site? What is it meant to do? How do you know that?Q #2

10. 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. A #2

11. 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.Q #3

12. 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. A #3

13. 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?Q #4

14. 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). A #4

15. 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. SKIP #5

16. 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. PICK A SITE

17. 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 words2) articulate why you believe it is important based on the reading for todayI will compile your answers on-screen, but let’s take a few minutes to talk about this. ON 2 DWS

18. 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=/= contentThese two are SEPARATE.PHILL’S DEF

19. 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 crazySO WHAT?

20. 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. IN THE 90s

21. 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.THE ISSUE

22. 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.WHAT?

23. 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.SO META

24. 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.BUT THE DOM

25. BECAUSE CONTENT IS DIVORCED FROM DESIGN.

26. LET ME SHOW YOU SOMETHING. LET’S CALL THIS CSS PREVIEW 1.

28. This is the Tumblr I used with my fall class. The post you see here is a 5 song mix CD description

29. One CSS theme change and it’s this.

30. One CSS theme change and it’s this.

31. One CSS theme change and it’s this.

32. CONTENT: SAMEFORM/PRESENTATION: NOT

33. THE DOM.(it’s a little dramatic)

34. 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 DesignYour 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! HOMEWORK