SlideShare a Scribd company logo
1 of 34
Icebreaker Check-in Module 2 practice/example Reading activity Exit question/homework  TODAY
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
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
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
Click to go to site
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
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
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
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
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
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
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
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
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
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
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 today I will compile your answers on-screen, but let’s take a few minutes to talk about this.  ON 2 DWS
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. PHILL’S DEF
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 SO WHAT?
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
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
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?
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
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
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: SAMEFORM/PRESENTATION: NOT
THE DOM.(it’s a little dramatic)
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!  HOMEWORK

More Related Content

Viewers also liked

Scholenaanbod bib 2015 2016
Scholenaanbod bib 2015 2016Scholenaanbod bib 2015 2016
Scholenaanbod bib 2015 2016Bibwesterlo
 
Pier9PresentationSmall
Pier9PresentationSmallPier9PresentationSmall
Pier9PresentationSmallXander Bremer
 
Oracle eBS setting up org specific flex fields
Oracle eBS setting up org specific flex fieldsOracle eBS setting up org specific flex fields
Oracle eBS setting up org specific flex fieldsJay Tracewell
 
Kai.Kang.Resume
Kai.Kang.ResumeKai.Kang.Resume
Kai.Kang.ResumeKai Kang
 
كراسة رسم تتبع بالنقط
كراسة رسم تتبع بالنقطكراسة رسم تتبع بالنقط
كراسة رسم تتبع بالنقطأمنية وجدى
 

Viewers also liked (6)

Scholenaanbod bib 2015 2016
Scholenaanbod bib 2015 2016Scholenaanbod bib 2015 2016
Scholenaanbod bib 2015 2016
 
August 2015 CV
August 2015 CVAugust 2015 CV
August 2015 CV
 
Pier9PresentationSmall
Pier9PresentationSmallPier9PresentationSmall
Pier9PresentationSmall
 
Oracle eBS setting up org specific flex fields
Oracle eBS setting up org specific flex fieldsOracle eBS setting up org specific flex fields
Oracle eBS setting up org specific flex fields
 
Kai.Kang.Resume
Kai.Kang.ResumeKai.Kang.Resume
Kai.Kang.Resume
 
كراسة رسم تتبع بالنقط
كراسة رسم تتبع بالنقطكراسة رسم تتبع بالنقط
كراسة رسم تتبع بالنقط
 

Similar to WRA 210 January 18, 2011

WRA 210 April 14th PowerPoint
WRA 210 April 14th PowerPointWRA 210 April 14th PowerPoint
WRA 210 April 14th PowerPointMiami University
 
Visual Rhetoric March 25th
Visual Rhetoric March 25thVisual Rhetoric March 25th
Visual Rhetoric March 25thMiami University
 
English/IMS 224, January 29th, 2013
English/IMS 224, January 29th, 2013English/IMS 224, January 29th, 2013
English/IMS 224, January 29th, 2013Miami University
 
Visual rhetoric, April 22, 2013
Visual rhetoric, April 22, 2013Visual rhetoric, April 22, 2013
Visual rhetoric, April 22, 2013Miami University
 
WRA 210 February 3, 2011 - Snow Day
WRA 210 February 3, 2011 - Snow DayWRA 210 February 3, 2011 - Snow Day
WRA 210 February 3, 2011 - Snow DayMiami University
 
Know thy interaction – How interaction is changing what we create on the web
Know thy interaction – How interaction is changing what we create on the webKnow thy interaction – How interaction is changing what we create on the web
Know thy interaction – How interaction is changing what we create on the webnolly00
 
Visual Rhetoric, August 28th
Visual Rhetoric, August 28thVisual Rhetoric, August 28th
Visual Rhetoric, August 28thMiami University
 
Visual Rhetoric, Feb 5th, 2014
Visual Rhetoric, Feb 5th, 2014Visual Rhetoric, Feb 5th, 2014
Visual Rhetoric, Feb 5th, 2014Miami University
 
Intro to Drupal Slides - DrupalCampSC 2014
Intro to Drupal Slides - DrupalCampSC 2014Intro to Drupal Slides - DrupalCampSC 2014
Intro to Drupal Slides - DrupalCampSC 2014Sarah Shealy
 
Visual Rhetoric: Worlds Collide
Visual Rhetoric: Worlds CollideVisual Rhetoric: Worlds Collide
Visual Rhetoric: Worlds CollideMiami University
 
Visual Rhetoric, Monday March 10, 2014
Visual Rhetoric, Monday March 10, 2014Visual Rhetoric, Monday March 10, 2014
Visual Rhetoric, Monday March 10, 2014Miami University
 
Build your website before you install wordpress.
Build your website before you install wordpress.Build your website before you install wordpress.
Build your website before you install wordpress.Russell Aaron
 
Monday Night, March 3rd, Visual Rhetoric
Monday Night, March 3rd, Visual RhetoricMonday Night, March 3rd, Visual Rhetoric
Monday Night, March 3rd, Visual RhetoricMiami University
 
Visual Rhetoric, Feb 11, 2013
Visual Rhetoric, Feb 11, 2013Visual Rhetoric, Feb 11, 2013
Visual Rhetoric, Feb 11, 2013Miami University
 

Similar to WRA 210 January 18, 2011 (20)

WRA 210 January 20, 2011
WRA 210 January 20, 2011WRA 210 January 20, 2011
WRA 210 January 20, 2011
 
WRA 210 February 24, 2011
WRA 210 February 24, 2011WRA 210 February 24, 2011
WRA 210 February 24, 2011
 
WRA 210 April 14th PowerPoint
WRA 210 April 14th PowerPointWRA 210 April 14th PowerPoint
WRA 210 April 14th PowerPoint
 
Visual Rhetoric March 25th
Visual Rhetoric March 25thVisual Rhetoric March 25th
Visual Rhetoric March 25th
 
Wireframing
WireframingWireframing
Wireframing
 
English/IMS 224, January 29th, 2013
English/IMS 224, January 29th, 2013English/IMS 224, January 29th, 2013
English/IMS 224, January 29th, 2013
 
Visual rhetoric, April 22, 2013
Visual rhetoric, April 22, 2013Visual rhetoric, April 22, 2013
Visual rhetoric, April 22, 2013
 
January 29th PowerPoint
January 29th PowerPointJanuary 29th PowerPoint
January 29th PowerPoint
 
WRA 210 February 3, 2011 - Snow Day
WRA 210 February 3, 2011 - Snow DayWRA 210 February 3, 2011 - Snow Day
WRA 210 February 3, 2011 - Snow Day
 
Know thy interaction – How interaction is changing what we create on the web
Know thy interaction – How interaction is changing what we create on the webKnow thy interaction – How interaction is changing what we create on the web
Know thy interaction – How interaction is changing what we create on the web
 
Visual Rhetoric, August 28th
Visual Rhetoric, August 28thVisual Rhetoric, August 28th
Visual Rhetoric, August 28th
 
Visual Rhetoric, Feb 5th, 2014
Visual Rhetoric, Feb 5th, 2014Visual Rhetoric, Feb 5th, 2014
Visual Rhetoric, Feb 5th, 2014
 
Intro to Drupal Slides - DrupalCampSC 2014
Intro to Drupal Slides - DrupalCampSC 2014Intro to Drupal Slides - DrupalCampSC 2014
Intro to Drupal Slides - DrupalCampSC 2014
 
WRA 210 February 17, 2011
WRA 210 February 17, 2011WRA 210 February 17, 2011
WRA 210 February 17, 2011
 
Visual Rhetoric: Worlds Collide
Visual Rhetoric: Worlds CollideVisual Rhetoric: Worlds Collide
Visual Rhetoric: Worlds Collide
 
Visual Rhetoric, Monday March 10, 2014
Visual Rhetoric, Monday March 10, 2014Visual Rhetoric, Monday March 10, 2014
Visual Rhetoric, Monday March 10, 2014
 
Build your website before you install wordpress.
Build your website before you install wordpress.Build your website before you install wordpress.
Build your website before you install wordpress.
 
Monday Night, March 3rd, Visual Rhetoric
Monday Night, March 3rd, Visual RhetoricMonday Night, March 3rd, Visual Rhetoric
Monday Night, March 3rd, Visual Rhetoric
 
Visual Rhetoric, Feb 11, 2013
Visual Rhetoric, Feb 11, 2013Visual Rhetoric, Feb 11, 2013
Visual Rhetoric, Feb 11, 2013
 
WRA 210 January 25, 2011
WRA 210 January 25, 2011WRA 210 January 25, 2011
WRA 210 January 25, 2011
 

More from Miami University (20)

At nasty
At nastyAt nasty
At nasty
 
Crap
CrapCrap
Crap
 
Rhetanal
RhetanalRhetanal
Rhetanal
 
Visual Rhetoric 4
Visual Rhetoric 4Visual Rhetoric 4
Visual Rhetoric 4
 
Visual Rhetoric 3
Visual Rhetoric 3Visual Rhetoric 3
Visual Rhetoric 3
 
Capstone Day 3
Capstone Day 3Capstone Day 3
Capstone Day 3
 
Capstone Day 4
Capstone Day 4Capstone Day 4
Capstone Day 4
 
Capstone Day 2
Capstone Day 2Capstone Day 2
Capstone Day 2
 
Capstone Day 1
Capstone Day 1Capstone Day 1
Capstone Day 1
 
Visual Rhetoric 2
Visual Rhetoric 2Visual Rhetoric 2
Visual Rhetoric 2
 
Visual Rhetoric 1
Visual Rhetoric 1Visual Rhetoric 1
Visual Rhetoric 1
 
224 summerfinal
224 summerfinal224 summerfinal
224 summerfinal
 
Dr philleval211
Dr philleval211Dr philleval211
Dr philleval211
 
211 finalreview
211 finalreview211 finalreview
211 finalreview
 
Week 2
Week 2Week 2
Week 2
 
Brief Video Game History
Brief Video Game HistoryBrief Video Game History
Brief Video Game History
 
Dungeons & Dragons history
Dungeons & Dragons historyDungeons & Dragons history
Dungeons & Dragons history
 
Rhetoric of Advertising
Rhetoric of AdvertisingRhetoric of Advertising
Rhetoric of Advertising
 
Logos
LogosLogos
Logos
 
411 Personal Logo PowerPoint
411 Personal Logo PowerPoint411 Personal Logo PowerPoint
411 Personal Logo PowerPoint
 

WRA 210 January 18, 2011

  • 1.
  • 2. Icebreaker Check-in Module 2 practice/example Reading activity Exit 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 today I 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=/= content These 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 crazy SO 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.
  • 27.
  • 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.
  • 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 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! HOMEWORK