myspace civilized
phidias showing frieze of parthenon to his friends
Sunday, August 13, 2006
Myspace Template Object Model
From typography, I'm moving on to the even gnarlier issue of myspace layout. My goal is to produce a detailed (perhaps definitive) document on the myspace layout -- a map of sorts. I call it the Myspace Template Object Model as a reference to the Document Object Model.

I started out with a quick and dirty Background Emission Topography scan. The results are currently on display on the moshi profile. (I'll add a screenshot when I have time.)

The BET-scan gives some insight into myspace layout. But to really master it, I found it necessary to actually scrutinize the html code itself. I'll post the full results of my analysis later when I have had a chance to double check. I can say for the time being: Wow. Talk about being patched together out of chewing gum and string!

Here is a preliminary schematic based on a detailed reading of the mark-up for the moshi profile. More on this later:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Myspace Template Object Model</title>

<style type="text/css">

/* BASIC LAYOUT */
body { background:black; }
table { background:#ccc; }
table td { background:#666; font-size:12px; }
table table { background:#fee; }
table table td { background:#efe; padding:4px; color:blue; font-weight:bold; border:1px solid #00f; }
table table td.text { background:#eef; }
table table table { background:#999; margin:4px 0; }
table table table td { background:#fff; padding:4px; color:red; font-weight:bold; border:1px solid #f00; }

/* ADDITIONAL STYLING */
body { font-family:arial,sans-serif; }
table, td { border:0px solid #333; text-align:center; border-collapse:collapse; }
</style>

</head>



<body>

<!-- MASTHEAD STACK -->
<div align="center">
<table width="800" align="center"><tr><td>table 1: above ad navbar</td></tr></table>
<table width="800" align="center"><tr><td>table 2: ad</td></tr></table>
</div>

<div align="center">
<table width="800"><tr><td>table 3: below ad navbar</td></tr></table>
</div>
<!-- end MASTHEAD STACK -->



<!-- TABLE 4 : PROFILE STACK -->
<table width="800" align="center"><tr><td width="780" align="center">
table 4 : profile stack
<table><tr>

<!-- PROFILE CORE LEFT (table table td) -->

<!-- Filler Col -->
<td width="20">(15px)</td>

<td width="275" height="33" align="center" valign="top">
table table td : profile left (width="275")

<!-- TABLE^3 4lA-D -->
<table><tr><td>name box (4lA)</td></tr></table>
<table><tr><td>.contactTable (4lB)</td></tr></table>
<table><tr><td>myspace url (4lC)</td></tr></table>
<embed>mp3 player</embed>
<table><tr><td>detail box (4lD)</td></tr></table>
<table><tr><td>school box (4lE)</td></tr></table>
</td>

<!-- Filler Col -->
<td>(20px)</td>

<!-- PROFILE CORE RIGHT (table table td .text) -->
<td class="text" valign="top" align="center" width="435">
table table td.text : profile right (width="435")
<!-- TABLE^3 4rA-D -->
<table><tr><td>network box (4rA)</td></tr></table>
<table><tr><td>blog box (4rB)</td></tr></table>
<table><tr><td>blurb box (4rC)</td></tr></table>
<table><tr><td>friend space (4rD)</td></tr></table>
<table><tr><td>comment box (4rE)</td></tr></table>
</td>

</tr></table></td></tr></table>
<!-- end TABLE PROFILE STACK -->



<!-- FOOTER STACK -->
<table width="100%"><tr><td>table 5: page footer</td></tr></table>
<!-- end FOOTER STACK -->

</body>
</html>


Here is a screenshot (they may some additional incidental styling for visibility -- click for larger view):

» add your own comment