body {\n margin: 0;\n padding: 0;\n height:100%;\n}\n#passages {\n margin:0;\n padding: 0;\n height:100%;\n}\n#passages * {\n box-sizing: border-box;\n -moz-box-sizing: border-box;\n}\n.passage {\n position:relative;\n width: 60%;\n font-size:1.5em;\n font-family: "Lucida Sans Typewriter", Consolas, Monaco, monospace;\n margin: 2em auto 0 auto;\n}\n.passage .header {\n background-image: [img[amazon.png]];\n width:100%;\n height:320px;\n min-height: 320px;\n border: #fff double 0.5em;\n border-radius: 1em;\n margin: 0 auto 1.5em auto;\n padding: 0;\n background-position: center;\n background-repeat: no-repeat;\n}\n.passage .content {\n top: 500px;\n width:100%;\n border: #fff double 0.5em;\n border-radius: 1em;\n padding: 1em;\n}\na.internalLink, a.externalLink {\n border-bottom: solid #fff 1px;\n color:#eee;\n font-weight:normal;\n}\na.internalLink:hover, a.externalLink:hover {\n text-decoration:none;\n border-bottom: none;\n color:#000;\n background-color:#fff;\n font-weight:normal;\n padding-left: 0;\n}\na.internalLink:active, a.externalLink:active {\n border-bottom: 0;\n}\n@media screen and (max-width: 960px) {\n .passage {\n font-size: 1.5em;\n width: 75%;\n }\n}\n@media screen and (max-width: 640px) {\n .passage {\n font-size: 1.25em;\n width: 95%;\n }\n}

Oh dear. You've gone off the rails this time. A parking ticket on top of lingering damage to your credit history? And who knows if you even did the required reading since you spent all that money at [[Amazon|AMAZON]]? You've gotta fix this, and fast. Maybe you should go on to the [[next slide|Ahmed]] and think about the choices you've made.

At this point, we transition into digital spaces and the question of how we are oriented within them as well. When I say "digital space," I don't mean purely a depiction of a 3D explorable environment (though we will get to those). Rather, I want to look at how what we might often consider "flat" interfaces are spatial experiences too. Any website or program experienced through a visual medium will utilize space in some form or fashion - and oftentimes in order to direct your attention to the "right" places. In this sense, they become //possibility spaces// which open up some potential actions while closing off others.\n\nThis is a very useful tool, of course. No one would want to spend hours looking for the search bar on the Google homepage. However, in directing attention to what is usable (and how it is used), interfaces orient us to certain performances. We're going to consider two such interfaces today that are commonly used by people and talk about the ways in which the options and actions within them develop a version of "us". The first is [[LinkedIn|http://www.linkedin.com/]], the popular networking site for professionals - and a website with a very familar [[interface design|LinkedDesign]].

body {\n margin: 0;\n padding: 0;\n height:100%;\n}\n#passages {\n margin:0;\n padding: 0;\n height:100%;\n}\n#passages * {\n box-sizing: border-box;\n -moz-box-sizing: border-box;\n}\n.passage {\n position:relative;\n width: 60%;\n font-size:1.5em;\n font-family: "Lucida Sans Typewriter", Consolas, Monaco, monospace;\n margin: 2em auto 0 auto;\n}\n.passage .header {\n background-image: [img[bioarrow.jpg]];\n width:100%;\n height:320px;\n min-height: 320px;\n border: #fff double 0.5em;\n border-radius: 1em;\n margin: 0 auto 1.5em auto;\n padding: 0;\n background-position: center;\n background-repeat: no-repeat;\n}\n.passage .content {\n top: 500px;\n width:100%;\n border: #fff double 0.5em;\n border-radius: 1em;\n padding: 1em;\n}\na.internalLink, a.externalLink {\n border-bottom: solid #fff 1px;\n color:#eee;\n font-weight:normal;\n}\na.internalLink:hover, a.externalLink:hover {\n text-decoration:none;\n border-bottom: none;\n color:#000;\n background-color:#fff;\n font-weight:normal;\n padding-left: 0;\n}\na.internalLink:active, a.externalLink:active {\n border-bottom: 0;\n}\n@media screen and (max-width: 960px) {\n .passage {\n font-size: 1.5em;\n width: 75%;\n }\n}\n@media screen and (max-width: 640px) {\n .passage {\n font-size: 1.25em;\n width: 95%;\n }\n}

Here is an image of the room we're currently in. In many ways, this is a template of the college classroom: rows of desks all facing in one direction and directed towards a professor at the front of the audience. So how did you decide where to position yourself? What, in essence, determined your orientation?\n\nWithin any physical space, we are driven by the need to orient ourselves. But we might want to talk a bit about exactly what that word [[means|Orientation]]. \n\n

body {\n margin: 0;\n padding: 0;\n height:100%;\n}\n#passages {\n margin:0;\n padding: 0;\n height:100%;\n}\n#passages * {\n box-sizing: border-box;\n -moz-box-sizing: border-box;\n}\n.passage {\n position:relative;\n width: 60%;\n font-size:1.5em;\n font-family: "Lucida Sans Typewriter", Consolas, Monaco, monospace;\n margin: 2em auto 0 auto;\n}\n.passage .header {\n background-image: [img[AngryCredit.jpg]];\n width:100%;\n height:320px;\n min-height: 320px;\n border: #fff double 0.5em;\n border-radius: 1em;\n margin: 0 auto 1.5em auto;\n padding: 0;\n background-position: center;\n background-repeat: no-repeat;\n}\n.passage .content {\n top: 500px;\n width:100%;\n border: #fff double 0.5em;\n border-radius: 1em;\n padding: 1em;\n}\na.internalLink, a.externalLink {\n border-bottom: solid #fff 1px;\n color:#eee;\n font-weight:normal;\n}\na.internalLink:hover, a.externalLink:hover {\n text-decoration:none;\n border-bottom: none;\n color:#000;\n background-color:#fff;\n font-weight:normal;\n padding-left: 0;\n}\na.internalLink:active, a.externalLink:active {\n border-bottom: 0;\n}\n@media screen and (max-width: 960px) {\n .passage {\n font-size: 1.5em;\n width: 75%;\n }\n}\n@media screen and (max-width: 640px) {\n .passage {\n font-size: 1.25em;\n width: 95%;\n }\n}

body {\n margin: 0;\n padding: 0;\n height:100%;\n}\n#passages {\n margin:0;\n padding: 0;\n height:100%;\n}\n#passages * {\n box-sizing: border-box;\n -moz-box-sizing: border-box;\n}\n.passage {\n position:relative;\n width: 60%;\n font-size:1.5em;\n font-family: "Lucida Sans Typewriter", Consolas, Monaco, monospace;\n margin: 2em auto 0 auto;\n}\n.passage .header {\n background-image: [img[companioncube.jpg]];\n width:100%;\n height:320px;\n min-height: 320px;\n border: #fff double 0.5em;\n border-radius: 1em;\n margin: 0 auto 1.5em auto;\n padding: 0;\n background-position: center;\n background-repeat: no-repeat;\n}\n.passage .content {\n top: 500px;\n width:100%;\n border: #fff double 0.5em;\n border-radius: 1em;\n padding: 1em;\n}\na.internalLink, a.externalLink {\n border-bottom: solid #fff 1px;\n color:#eee;\n font-weight:normal;\n}\na.internalLink:hover, a.externalLink:hover {\n text-decoration:none;\n border-bottom: none;\n color:#000;\n background-color:#fff;\n font-weight:normal;\n padding-left: 0;\n}\na.internalLink:active, a.externalLink:active {\n border-bottom: 0;\n}\n@media screen and (max-width: 960px) {\n .passage {\n font-size: 1.5em;\n width: 75%;\n }\n}\n@media screen and (max-width: 640px) {\n .passage {\n font-size: 1.25em;\n width: 95%;\n }\n}

body {\n margin: 0;\n padding: 0;\n height:100%;\n}\n#passages {\n margin:0;\n padding: 0;\n height:100%;\n}\n#passages * {\n box-sizing: border-box;\n -moz-box-sizing: border-box;\n}\n.passage {\n position:relative;\n width: 60%;\n font-size:1.5em;\n font-family: "Lucida Sans Typewriter", Consolas, Monaco, monospace;\n margin: 2em auto 0 auto;\n}\n.passage .header {\n background-image: [img[wagfinger.jpg]];\n width:100%;\n height:320px;\n min-height: 320px;\n border: #fff double 0.5em;\n border-radius: 1em;\n margin: 0 auto 1.5em auto;\n padding: 0;\n background-position: center;\n background-repeat: no-repeat;\n}\n.passage .content {\n top: 500px;\n width:100%;\n border: #fff double 0.5em;\n border-radius: 1em;\n padding: 1em;\n}\na.internalLink, a.externalLink {\n border-bottom: solid #fff 1px;\n color:#eee;\n font-weight:normal;\n}\na.internalLink:hover, a.externalLink:hover {\n text-decoration:none;\n border-bottom: none;\n color:#000;\n background-color:#fff;\n font-weight:normal;\n padding-left: 0;\n}\na.internalLink:active, a.externalLink:active {\n border-bottom: 0;\n}\n@media screen and (max-width: 960px) {\n .passage {\n font-size: 1.5em;\n width: 75%;\n }\n}\n@media screen and (max-width: 640px) {\n .passage {\n font-size: 1.25em;\n width: 95%;\n }\n}

Well...sorta. As the above screen from //Bioshock Infinite// suggests, players often spend a lot of time following arrows and getting shoved down various corridors without a lot of say in the matter. The desire to dictate certain experiences of game space leads to very explicit moments of orientation. Consider almost any tutorial level in a game. Remind you of those first few days of college we talked about earlier?\n\nIn many ways, games make explicit some of the underlying logics of how our society constructs space and directs us towards certain objects within in while moving us away from others. The sample game I made for this presentation is a bit over-the-top in this regard, but more and more games are acknowledging the constructed nature of the play experience and how we, as users, are told what to love and what to hate.\nSometimes, this can boil down to something as seemingly mundane as a [[box with a heart on it|Portal]].

You've been so good up to this point! Are you going to throw it all away in the pursuit of something other than the true and absolute point of the lesson? We all go astray from time to time, I know. Here, let me direct your attention back to the [[right place|Ahmed]].

body {\n margin: 0;\n padding: 0;\n height:100%;\n}\n#passages {\n margin:0;\n padding: 0;\n height:100%;\n}\n#passages * {\n box-sizing: border-box;\n -moz-box-sizing: border-box;\n}\n.passage {\n position:relative;\n width: 60%;\n font-size:1.5em;\n font-family: "Lucida Sans Typewriter", Consolas, Monaco, monospace;\n margin: 2em auto 0 auto;\n}\n.passage .header {\n background-image: [img[twinecode.jpg]];\n width:100%;\n height:320px;\n min-height: 320px;\n border: #fff double 0.5em;\n border-radius: 1em;\n margin: 0 auto 1.5em auto;\n padding: 0;\n background-position: center;\n background-repeat: no-repeat;\n}\n.passage .content {\n top: 500px;\n width:100%;\n border: #fff double 0.5em;\n border-radius: 1em;\n padding: 1em;\n}\na.internalLink, a.externalLink {\n border-bottom: solid #fff 1px;\n color:#eee;\n font-weight:normal;\n}\na.internalLink:hover, a.externalLink:hover {\n text-decoration:none;\n border-bottom: none;\n color:#000;\n background-color:#fff;\n font-weight:normal;\n padding-left: 0;\n}\na.internalLink:active, a.externalLink:active {\n border-bottom: 0;\n}\n@media screen and (max-width: 960px) {\n .passage {\n font-size: 1.5em;\n width: 75%;\n }\n}\n@media screen and (max-width: 640px) {\n .passage {\n font-size: 1.25em;\n width: 95%;\n }\n}

Enter the Companion Cube from //Portal//, a box with no unexpected features outside of the fact that it has a series of hearts attached to it and that, from the moment it appears in the game, the player is told to [[take care of it|https://www.youtube.com/watch?v=IoYqPyOF18s]]. As the player progressed through more and more puzzles, using the cube as her loyal aid and friend, the constructed and arbitrarily enforced bond between the two grows until... you have to drop the cube in an incinerator in order to progress in the game. And then get [[taunted about your homicidal nature|https://theportalwiki.com/wiki/GLaDOS_voice_lines]].\n\n//Portal// takes advantage of the artificiality of a digital environment to ask some genuinely tough questions about why we come to love and care about the objects we do. Was it required of us? How does the requirement of sharing a space with that object - be it a car, a dog, or a person - deepen affection? How do we react upon being asked to let go of it? What spaces only open up to us based on our relationship to another object, and what others are closed off? \n\nThank goodness it's only a game. Otherwise, people might feel compelled to [[maintain that relationship even after the game is turned off|CubeFinal]].

body {\n margin: 0;\n padding: 0;\n height:100%;\n}\n#passages {\n margin:0;\n padding: 0;\n height:100%;\n}\n#passages * {\n box-sizing: border-box;\n -moz-box-sizing: border-box;\n}\n.passage {\n position:relative;\n width: 60%;\n font-size:1.5em;\n font-family: "Lucida Sans Typewriter", Consolas, Monaco, monospace;\n margin: 2em auto 0 auto;\n}\n.passage .header {\n background-image: [img[tiphat.jpg]];\n width:100%;\n height:320px;\n min-height: 320px;\n border: #fff double 0.5em;\n border-radius: 1em;\n margin: 0 auto 1.5em auto;\n padding: 0;\n background-position: center;\n background-repeat: no-repeat;\n}\n.passage .content {\n top: 500px;\n width:100%;\n border: #fff double 0.5em;\n border-radius: 1em;\n padding: 1em;\n}\na.internalLink, a.externalLink {\n border-bottom: solid #fff 1px;\n color:#eee;\n font-weight:normal;\n}\na.internalLink:hover, a.externalLink:hover {\n text-decoration:none;\n border-bottom: none;\n color:#000;\n background-color:#fff;\n font-weight:normal;\n padding-left: 0;\n}\na.internalLink:active, a.externalLink:active {\n border-bottom: 0;\n}\n@media screen and (max-width: 960px) {\n .passage {\n font-size: 1.5em;\n width: 75%;\n }\n}\n@media screen and (max-width: 640px) {\n .passage {\n font-size: 1.25em;\n width: 95%;\n }\n}

Prudent choices. You've followed the university guidelines and apparently the line of thought this lecture will follow! Let me continue to direct you on to the [[next slide|Ahmed]], unless of course you'd like to go [[somewhere else|Else]].

body {\n margin: 0;\n padding: 0;\n height:100%;\n}\n#passages {\n margin:0;\n padding: 0;\n height:100%;\n}\n#passages * {\n box-sizing: border-box;\n -moz-box-sizing: border-box;\n}\n.passage {\n position:relative;\n width: 60%;\n font-size:1.5em;\n font-family: "Lucida Sans Typewriter", Consolas, Monaco, monospace;\n margin: 2em auto 0 auto;\n}\n.passage .header {\n background-image: [img[hugcube.jpg]];\n width:100%;\n height:320px;\n min-height: 320px;\n border: #fff double 0.5em;\n border-radius: 1em;\n margin: 0 auto 1.5em auto;\n padding: 0;\n background-position: center;\n background-repeat: no-repeat;\n}\n.passage .content {\n top: 500px;\n width:100%;\n border: #fff double 0.5em;\n border-radius: 1em;\n padding: 1em;\n}\na.internalLink, a.externalLink {\n border-bottom: solid #fff 1px;\n color:#eee;\n font-weight:normal;\n}\na.internalLink:hover, a.externalLink:hover {\n text-decoration:none;\n border-bottom: none;\n color:#000;\n background-color:#fff;\n font-weight:normal;\n padding-left: 0;\n}\na.internalLink:active, a.externalLink:active {\n border-bottom: 0;\n}\n@media screen and (max-width: 960px) {\n .passage {\n font-size: 1.5em;\n width: 75%;\n }\n}\n@media screen and (max-width: 640px) {\n .passage {\n font-size: 1.25em;\n width: 95%;\n }\n}

Of course, to get to this slide, I forced you to make reductive, binarized decisions about "good" and "bad" behavior. You were directed to this point - and depending on your choices, even admonished for going astray. Even how far you could go astray was limited! Theorist Sara Ahmed puts it this way: \n\n"When we follow specific lines, some things become reachable and others remain or even become out of reach. Such exclusions—the constitution of a field of unreachable objects—are the indirect consequences of following lines that are before us: we do not have to consciously exclude those things that are not 'on line.' The direction we take excludes things for us, before we even get there." [[page 15|https://www.dukeupress.edu/Catalog/ViewProduct.php?productid=14891/]]\n\nWe've talked as a group now about what can dictate these kind of lines in something like our room. But what about when we go "online" - in a different [[sense|LinkedIn]]?\n\n\n\n

While the stakes of being appealing to the business world are certainly high, those of being appealing to someone else as a possible romantic option are even higher. I want us to consider the popular dating website OkCupid and its standard dating profile, a sample of which is available [[here|http://jonmillward.com/blog/wp-content/uploads/2012/06/Default-Profile-Large.png]]. Consider the spaces constructed here, and how this sample profile has attempted to engage them. How does OkCupid explicitly direct certain performances in order to connect users to the "proper" mate? What kinds of actions are available within these spaces? And what if you could [[pay money|http://gawker.com/okcupid-users-can-now-pay-to-weed-out-uggos-and-fatties-1440267204]] in order to weed certain objects out of your shared space?\n\nAs a supplement to our conversation, take a quick look at [[this article|http://www.wired.com/wiredscience/2014/01/how-to-hack-okcupid/all/]] published last week on Wired. In it, a mathematician creates a series of his own algorhythms in order to try and make his profile more visible to the kinds of women he wanted to attract. How does this language of visibility and attractiveness work in terms of orientation? Is there an ethics to digital orientation? Has he cheated, or "hacked," in order to achieve these results - or just used the space as effectively as possible? \n\nHaving dug our way through this discussion of how digital spaces construct and define us, it seems like a good time to just escape from the real world for a while and play a game. After all, games give us a breather from reality. [[Right|GameIntro]]?

Or you could buy your very own huggable, preservable companion cube to keep away from any fires and //truly// protect this time. Or you could consult [[this video|https://www.youtube.com/watch?v=n8ZpaZvohJ8]] to make a wooden one. Or make [[a cake in the shape of it|https://www.youtube.com/watch?v=JJ4hD1VUK84]]. Or build it [[out of paper|https://www.youtube.com/watch?v=CndDXtyKSnE]]. Or [[weave one|https://www.youtube.com/watch?v=r4HDyPeS24I]]. Or [[hear a love song about it|https://www.youtube.com/watch?v=JZXonGk7WrA]]. \n\nSuffice to say, relationships don't end at the limits of the digital. Our affections follow us into and out of such spaces. Ian Bogost calls this phenomenon "residue," where a mark is left both on the digital space and the user of it. It changes us, and we change it in return. As you leave today, I want you to keep thinking about the way spaces orient your life, and how even what seems like seemingly basic sets of instructions can in fact shape and define a variety of versions of "you." We are constantly being oriented in our lives, and the lines that construct lived experience should be recognized and analyzed for what they direct us towards. And if you need a companion cube to help you through it... well, I'll leave the links up there.\n\n[[Want to restart|Start]]?

Did you really think I'd let you go to Amazon after the financial decision-making you've already displayed? That'd be rather foolish of me. Instead, I'm going to make sure you end up at the [[proper slide|Ahmed]]. It's for the best.

body {\n margin: 0;\n padding: 0;\n height:100%;\n}\n#passages {\n margin:0;\n padding: 0;\n height:100%;\n}\n#passages * {\n box-sizing: border-box;\n -moz-box-sizing: border-box;\n}\n.passage {\n position:relative;\n width: 60%;\n font-size:1.5em;\n font-family: "Lucida Sans Typewriter", Consolas, Monaco, monospace;\n margin: 2em auto 0 auto;\n}\n.passage .header {\n background-image: [img[linkedprofpic.jpg]];\n width:100%;\n height:320px;\n min-height: 320px;\n border: #fff double 0.5em;\n border-radius: 1em;\n margin: 0 auto 1.5em auto;\n padding: 0;\n background-position: center;\n background-repeat: no-repeat;\n}\n.passage .content {\n top: 500px;\n width:100%;\n border: #fff double 0.5em;\n border-radius: 1em;\n padding: 1em;\n}\na.internalLink, a.externalLink {\n border-bottom: solid #fff 1px;\n color:#eee;\n font-weight:normal;\n}\na.internalLink:hover, a.externalLink:hover {\n text-decoration:none;\n border-bottom: none;\n color:#000;\n background-color:#fff;\n font-weight:normal;\n padding-left: 0;\n}\na.internalLink:active, a.externalLink:active {\n border-bottom: 0;\n}\n@media screen and (max-width: 960px) {\n .passage {\n font-size: 1.5em;\n width: 75%;\n }\n}\n@media screen and (max-width: 640px) {\n .passage {\n font-size: 1.25em;\n width: 95%;\n }\n}

I'm In Space: A Presentation on Orientation

body {\n margin: 0;\n padding: 0;\n height:100%;\n}\n#passages {\n margin:0;\n padding: 0;\n height:100%;\n}\n#passages * {\n box-sizing: border-box;\n -moz-box-sizing: border-box;\n}\n.passage {\n position:relative;\n width: 60%;\n font-size:1.5em;\n font-family: "Lucida Sans Typewriter", Consolas, Monaco, monospace;\n margin: 2em auto 0 auto;\n}\n.passage .header {\n background-image: [img[ECSUOrientation.jpg]];\n width:100%;\n height:320px;\n min-height: 320px;\n border: #fff double 0.5em;\n border-radius: 1em;\n margin: 0 auto 1.5em auto;\n padding: 0;\n background-position: center;\n background-repeat: no-repeat;\n}\n.passage .content {\n top: 500px;\n width:100%;\n border: #fff double 0.5em;\n border-radius: 1em;\n padding: 1em;\n}\na.internalLink, a.externalLink {\n border-bottom: solid #fff 1px;\n color:#eee;\n font-weight:normal;\n}\na.internalLink:hover, a.externalLink:hover {\n text-decoration:none;\n border-bottom: none;\n color:#000;\n background-color:#fff;\n font-weight:normal;\n padding-left: 0;\n}\na.internalLink:active, a.externalLink:active {\n border-bottom: 0;\n}\n@media screen and (max-width: 960px) {\n .passage {\n font-size: 1.5em;\n width: 75%;\n }\n}\n@media screen and (max-width: 640px) {\n .passage {\n font-size: 1.25em;\n width: 95%;\n }\n}

Orientation is a term that we closely affiliate with the college experience; in fact, it's probably the first event you undergo as a freshman. But orientation isn't simply two or three days of listening to people tell you about campus. It's a process of marking certain paths to certain objects and outcomes, and labeling some as desirable while others as not. If you need to "orient" yourself, you're typically trying to figure out the "right" direction to go - and the expectations of the situation often dictate those directions.\n\nFor example: Getting to the proper classroom on time having done the required reading? [[Good|GoodStudent]]. Parking your car in the faculty lot after a night of online spending using new credit cards? [[Bad|BadStudent]]. \n\n

body {\n margin: 0;\n padding: 0;\n height:100%;\n}\n#passages {\n margin:0;\n padding: 0;\n height:100%;\n}\n#passages * {\n box-sizing: border-box;\n -moz-box-sizing: border-box;\n}\n.passage {\n position:relative;\n width: 60%;\n font-size:1.5em;\n font-family: "Lucida Sans Typewriter", Consolas, Monaco, monospace;\n margin: 2em auto 0 auto;\n}\n.passage .header {\n background-image: [img[googlepage.jpg]];\n width:100%;\n height:320px;\n min-height: 320px;\n border: #fff double 0.5em;\n border-radius: 1em;\n margin: 0 auto 1.5em auto;\n padding: 0;\n background-position: center;\n background-repeat: no-repeat;\n}\n.passage .content {\n top: 500px;\n width:100%;\n border: #fff double 0.5em;\n border-radius: 1em;\n padding: 1em;\n}\na.internalLink, a.externalLink {\n border-bottom: solid #fff 1px;\n color:#eee;\n font-weight:normal;\n}\na.internalLink:hover, a.externalLink:hover {\n text-decoration:none;\n border-bottom: none;\n color:#000;\n background-color:#fff;\n font-weight:normal;\n padding-left: 0;\n}\na.internalLink:active, a.externalLink:active {\n border-bottom: 0;\n}\n@media screen and (max-width: 960px) {\n .passage {\n font-size: 1.5em;\n width: 75%;\n }\n}\n@media screen and (max-width: 640px) {\n .passage {\n font-size: 1.25em;\n width: 95%;\n }\n}

body {\n margin: 0;\n padding: 0;\n height:100%;\n}\n#passages {\n margin:0;\n padding: 0;\n height:100%;\n}\n#passages * {\n box-sizing: border-box;\n -moz-box-sizing: border-box;\n}\n.passage {\n position:relative;\n width: 60%;\n font-size:1.5em;\n font-family: "Lucida Sans Typewriter", Consolas, Monaco, monospace;\n margin: 2em auto 0 auto;\n}\n.passage .header {\n width:100%;\n height:320px;\n min-height: 320px;\n border: #fff double 0.5em;\n border-radius: 1em;\n margin: 0 auto 1.5em auto;\n padding: 0;\n background-position: center;\n background-repeat: no-repeat;\n}\n.passage .content {\n top: 500px;\n width:100%;\n border: #fff double 0.5em;\n border-radius: 1em;\n padding: 1em;\n}\na.internalLink, a.externalLink {\n border-bottom: solid #fff 1px;\n color:#eee;\n font-weight:normal;\n}\na.internalLink:hover, a.externalLink:hover {\n text-decoration:none;\n border-bottom: none;\n color:#000;\n background-color:#fff;\n font-weight:normal;\n padding-left: 0;\n}\na.internalLink:active, a.externalLink:active {\n border-bottom: 0;\n}\n@media screen and (max-width: 960px) {\n .passage {\n font-size: 1.5em;\n width: 75%;\n }\n}\n@media screen and (max-width: 640px) {\n .passage {\n font-size: 1.25em;\n width: 95%;\n }\n}

As you can tell from the above picture (which is available in larger form [[here|http://blogs-images.forbes.com/roberthof/files/2012/10/Profile-2nd-Degree-View-copy.jpg]]), LinkedIn shares a rather striking similarity to the design and format of Facebook. However, the performances both enabled and denied within LinkedIn differ in rather significant ways - and much of that has to do with the spaces the user is directed towards. Take a closer look around the linked picture as we discuss the site together, and be thinking about how LinkedIn constructs certain relationships between objects. What is considered valuable within these spaces? Who (or what) is dismissed? How would you orient yourself as a desirable individual within this space, and how does it orient you in turn?\n\nHaving considered some of these concepts, we may want to turn our attention to, well, [[a slightly different kind of networking|OkCupid]].

Jordan Youngblood

body {\n margin: 0;\n padding: 0;\n height:100%;\n}\n#passages {\n margin:0;\n padding: 0;\n height:100%;\n}\n#passages * {\n box-sizing: border-box;\n -moz-box-sizing: border-box;\n}\n.passage {\n position:relative;\n width: 60%;\n font-size:1.5em;\n font-family: "Lucida Sans Typewriter", Consolas, Monaco, monospace;\n margin: 2em auto 0 auto;\n}\n.passage .header {\n background-image: [img[Webb112Entrance.jpeg]];\n width:100%;\n height:320px;\n min-height: 320px;\n border: #fff double 0.5em;\n border-radius: 1em;\n margin: 0 auto 1.5em auto;\n padding: 0;\n background-position: center;\n background-repeat: no-repeat;\n}\n.passage .content {\n top: 500px;\n width:100%;\n border: #fff double 0.5em;\n border-radius: 1em;\n padding: 1em;\n}\na.internalLink, a.externalLink {\n border-bottom: solid #fff 1px;\n color:#eee;\n font-weight:normal;\n}\na.internalLink:hover, a.externalLink:hover {\n text-decoration:none;\n border-bottom: none;\n color:#000;\n background-color:#fff;\n font-weight:normal;\n padding-left: 0;\n}\na.internalLink:active, a.externalLink:active {\n border-bottom: 0;\n}\n@media screen and (max-width: 960px) {\n .passage {\n font-size: 1.5em;\n width: 75%;\n }\n}\n@media screen and (max-width: 640px) {\n .passage {\n font-size: 1.25em;\n width: 95%;\n }\n}

body {\n margin: 0;\n padding: 0;\n height:100%;\n}\n#passages {\n margin:0;\n padding: 0;\n height:100%;\n}\n#passages * {\n box-sizing: border-box;\n -moz-box-sizing: border-box;\n}\n.passage {\n position:relative;\n width: 60%;\n font-size:1.5em;\n font-family: "Lucida Sans Typewriter", Consolas, Monaco, monospace;\n margin: 2em auto 0 auto;\n}\n.passage .header {\n background-image: [img[okcupidlogo.png]];\n width:100%;\n height:320px;\n min-height: 320px;\n border: #fff double 0.5em;\n border-radius: 1em;\n margin: 0 auto 1.5em auto;\n padding: 0;\n background-position: center;\n background-repeat: no-repeat;\n}\n.passage .content {\n top: 500px;\n width:100%;\n border: #fff double 0.5em;\n border-radius: 1em;\n padding: 1em;\n}\na.internalLink, a.externalLink {\n border-bottom: solid #fff 1px;\n color:#eee;\n font-weight:normal;\n}\na.internalLink:hover, a.externalLink:hover {\n text-decoration:none;\n border-bottom: none;\n color:#000;\n background-color:#fff;\n font-weight:normal;\n padding-left: 0;\n}\na.internalLink:active, a.externalLink:active {\n border-bottom: 0;\n}\n@media screen and (max-width: 960px) {\n .passage {\n font-size: 1.5em;\n width: 75%;\n }\n}\n@media screen and (max-width: 640px) {\n .passage {\n font-size: 1.25em;\n width: 95%;\n }\n}