content_focus 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- data/README.textile +33 -0
- data/examples/parse_twitter_profile.rb +11 -0
- data/lib/content_focus/html.rb +309 -0
- data/lib/content_focus/lexicon.txt +92662 -0
- data/lib/content_focus/linguistics.rb +147 -0
- data/lib/content_focus.rb +21 -0
- data/spec/content_focus_spec.rb +38 -0
- data/spec/data/confreaks.html +2634 -0
- data/spec/data/google_code_statistics.html +171 -0
- data/spec/data/kakuteru_article.html +199 -0
- data/spec/data/kakuteru_index.html +626 -0
- data/spec/data/movable_type_article.html +1243 -0
- data/spec/data/movable_type_index.html +1503 -0
- data/spec/data/simple_with_navigation.html +24 -0
- data/spec/data/twitter_profile.html +548 -0
- data/spec/data/typad_article.html +1421 -0
- data/spec/data/wordpress_article.html +2004 -0
- data/spec/data/wordpress_custom_article.html +527 -0
- metadata +83 -0
|
@@ -0,0 +1,1421 @@
|
|
|
1
|
+
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
|
2
|
+
|
|
3
|
+
<html xmlns="http://www.w3.org/1999/xhtml">
|
|
4
|
+
<head>
|
|
5
|
+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
6
|
+
<meta name="generator" content="http://www.typepad.com/" />
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
<title>dog or higher: Semantics in the wild</title>
|
|
10
|
+
|
|
11
|
+
<link rel="stylesheet" href="http://westciv.typepad.com/dog_or_higher/styles.css" type="text/css" />
|
|
12
|
+
<link rel="alternate" type="application/atom+xml" title="Atom" href="http://westciv.typepad.com/dog_or_higher/atom.xml" />
|
|
13
|
+
<link rel="alternate" type="application/rss+xml" title="RSS" href="http://westciv.typepad.com/dog_or_higher/index.rdf" />
|
|
14
|
+
|
|
15
|
+
<link rel="start" href="http://westciv.typepad.com/dog_or_higher/" title="Home" />
|
|
16
|
+
<link rel="prev" href="http://westciv.typepad.com/dog_or_higher/2005/10/site_watch_new_.html" title="Site watch: New Age and SMH online designs - much to like, but work to be done" />
|
|
17
|
+
|
|
18
|
+
<link rel="next" href="http://westciv.typepad.com/dog_or_higher/2005/11/web_blandards.html" title="Web Blandards" />
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
<!--
|
|
22
|
+
<rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
|
23
|
+
xmlns:trackback="http://madskills.com/public/xml/rss/module/trackback/"
|
|
24
|
+
xmlns:dc="http://purl.org/dc/elements/1.1/">
|
|
25
|
+
<rdf:Description
|
|
26
|
+
rdf:about="http://westciv.typepad.com/dog_or_higher/2005/11/real_world_sema.html"
|
|
27
|
+
trackback:ping="http://www.typepad.com/t/trackback/6131/3520365"
|
|
28
|
+
dc:title="Semantics in the wild"
|
|
29
|
+
dc:identifier="http://westciv.typepad.com/dog_or_higher/2005/11/real_world_sema.html"
|
|
30
|
+
dc:description="Regular readers will I hope by now have guessed that I am less of a fan of "handwaving" and more of research when it comes to reasoning about and understanding what developers actually do. For a long time now, I've..."
|
|
31
|
+
dc:creator="John Allsopp"
|
|
32
|
+
dc:date="2005-11-05T11:39:53+11:00" />
|
|
33
|
+
</rdf:RDF>
|
|
34
|
+
-->
|
|
35
|
+
|
|
36
|
+
|
|
37
|
+
|
|
38
|
+
|
|
39
|
+
<script type="text/javascript" src="/.shared-typepad/comments.js"></script>
|
|
40
|
+
<script type="text/javascript">
|
|
41
|
+
hostName = '.typepad.com';
|
|
42
|
+
</script>
|
|
43
|
+
|
|
44
|
+
</head>
|
|
45
|
+
|
|
46
|
+
<body>
|
|
47
|
+
|
|
48
|
+
<div id="container">
|
|
49
|
+
|
|
50
|
+
<a id="banner-img" href="http://westciv.typepad.com/dog_or_higher/"><span class="banner-alt"> </span></a>
|
|
51
|
+
<div id="banner">
|
|
52
|
+
<h1><a href="http://westciv.typepad.com/dog_or_higher/" accesskey="1">dog or higher</a></h1>
|
|
53
|
+
<h2>thoughts on software, technology, fatherhood, and other stuff</h2>
|
|
54
|
+
</div>
|
|
55
|
+
|
|
56
|
+
<div id="center">
|
|
57
|
+
<div class="content">
|
|
58
|
+
|
|
59
|
+
<p align="right">
|
|
60
|
+
<a href="http://westciv.typepad.com/dog_or_higher/2005/10/site_watch_new_.html">« Site watch: New Age and SMH online designs - much to like, but work to be done</a> |
|
|
61
|
+
|
|
62
|
+
|
|
63
|
+
<a href="http://westciv.typepad.com/dog_or_higher/">Main</a>
|
|
64
|
+
| <a href="http://westciv.typepad.com/dog_or_higher/2005/11/web_blandards.html">Web Blandards »</a>
|
|
65
|
+
|
|
66
|
+
</p>
|
|
67
|
+
|
|
68
|
+
<h2>November 05, 2005</h2>
|
|
69
|
+
|
|
70
|
+
|
|
71
|
+
<h3>Semantics in the wild</h3>
|
|
72
|
+
|
|
73
|
+
|
|
74
|
+
<p>Regular readers will I hope by now have guessed that I am less of a fan of "handwaving" and more of research when it comes to reasoning about and understanding what developers actually do.</p>
|
|
75
|
+
|
|
76
|
+
<p>For a long time now, I've been very interested in how developers use semantics in their pages - not just the semantics provided by HTML, like headings, but also the semantics developers create through the use of class and id values.</p>
|
|
77
|
+
|
|
78
|
+
<p>Afterall, for a long time developers have been using classes and ids to create informal semantics (as well as to provide "hooks" for CSS).</p>
|
|
79
|
+
|
|
80
|
+
<p>So, how are they actually doing this? In particular, I am interested to know whether common semantics emerge from what developers are doing in their code. Are there a set of frequently semantic class and id values we can "standardize" on (by convention)? Afterall, there are many common patterns (multi-column layouts, headers and footers, one, two and more order navigation systems, and many others) which sites feature over and over. You might think that perhaps by osmosis, conscious or unconscious emulation, or even <a href="http://en.wikipedia.org/wiki/Morphic_resonance">morphic resonance</a>, developers might have started using the same or similar class and id values for the same patterns.</p>
|
|
81
|
+
|
|
82
|
+
<p>So in my new found phase of experimentation, I wrote a very simple search engine. What it does is takes a URL, grabs all the class and id values for that page, then gets all the external links in that page, and visits these, and recursively does the same thing. I also tried to make sure that it did not visit any given domain (even where the server was different) more than once.</p>
|
|
83
|
+
|
|
84
|
+
<p>Thus equipped with this magnificent vessel of exploration (the equal at least of the Nina, Pinta or Santa Maria) I set sail for places unknown from my port of embarkation, stopdesign.com. I chose that domain because Douglas Bowman and I had discussed this whole issue in great detail last year while in New Zealand, and because I felt that at least in resources close to stopdesign I'd find sites that were developed by people with similar sensibilities.</p>
|
|
85
|
+
|
|
86
|
+
<p>So on this maiden voyage, what did I discover?</p>
|
|
87
|
+
|
|
88
|
+
<p>The crawl visited 1315 sites. In these sites it found 5374 different class values and 4789 different id values. So, what exactly emerged from all these values?</p>
|
|
89
|
+
|
|
90
|
+
<p>First that the noise to signal ratio is high - table 1 and 2 below, with their measure of how many id and class values appear a single time (88% of all id values, and 80% of all class values), as opposed to even 5 or more times (ids less than 1%, class about 5%) demonstrate that there is very little agreement as to specific class and id values for semantics. </p>
|
|
91
|
+
|
|
92
|
+
<p>Secondly, the class and id values reflect a very presentational way of viewing the contents of a page - with values including the words top, left, right, bottom, color names, sizes like small, words like spacer, style, all indicating that for most developers their informal "semantics" is highly presentational.</p>
|
|
93
|
+
|
|
94
|
+
<p>A very unscientific survey of values which appear 5 or more times finds that presentational class and ids values are at least as likely as non presentational ones, let alone strictly semantic one.
|
|
95
|
+
People also appear frequently to be creating class and id values which are either identical to, or clearly very close to existing HTML elements, like menu, submit, heading, and even body. A good many of the values appear by and large to be meaningless, probably created by applications. The number 1 id value afterall is "D27CDB6E-AE6D-11cf-96B8-444553540000" </p>
|
|
96
|
+
|
|
97
|
+
<p>But why don't I throw this over to you now? Much like <a href="http://www.simplebits.com/notebook/simplequiz/">Dan Cederholm's simplequiz</a> - based on the data here, and also your own experiences, what class and id values are (or at least should be) commonly used. In essence, what's missing from HTML/XHTML in terms of semantics - not in theory, but in the practical sense of the kinds of constructs developers use all the time.</p>
|
|
98
|
+
|
|
99
|
+
<p>Some pieces that that come straight to mind, based on this survey, include </p>
|
|
100
|
+
|
|
101
|
+
<ul>
|
|
102
|
+
<li>Navigation - this appears under many guises, as both id and class values, including navbar, nav, navigation (the #1 class value) and others. There are a number of different kinds of navigation, including site level navigation, page level navigation and doubtless others as well. Where these physically appear on a page should not be important (top, left and so on are presentational, not semantic)</li>
|
|
103
|
+
<li>breadcrumb trails</li>
|
|
104
|
+
<li>page header (is h1 enough for this, to revisit a SimpleQuiz?) In the sites surveyed this appears as all kinds of things like masthead, title, pagehead, header, logo </li>
|
|
105
|
+
<li>page footer (is this really semantic, or just a presentational chunk? Is there a more semantic name like "fine print". Yes I know that the term fine print is ironic. ) "footer" appears as a class value 73 times, fourth highest, and as the second highest id value, with 89 occurrences, making it overall the winner when combining class and id values.</li>
|
|
106
|
+
|
|
107
|
+
<li>Main content for a page. This appears quite frequently, in one guise or another.</li>
|
|
108
|
+
<li>Author - would the HTML address element be better for this? </li>
|
|
109
|
+
</ul>
|
|
110
|
+
|
|
111
|
+
<p><br />
|
|
112
|
+
<p>I could go on for some time I am sure, but I am much more interested in other people's take on this, based both on your experiences, and the data at hand. Fire away with your suggestions.</p></p>
|
|
113
|
+
|
|
114
|
+
<h3>Table 1</h3>
|
|
115
|
+
<table border="0" cellpadding="0" cellspacing="0">
|
|
116
|
+
<caption>Frequency of id values</caption>
|
|
117
|
+
|
|
118
|
+
<tr><th>Frequency id value appears</th><th>count </th></tr>
|
|
119
|
+
<tr><td>1</td><td>4203</td></tr>
|
|
120
|
+
<tr><td>2</td><td>302</td></tr>
|
|
121
|
+
<tr><td>3</td><td>220</td></tr>
|
|
122
|
+
<tr><td>4</td><td>41</td></tr>
|
|
123
|
+
<tr><td>5</td><td>26</td></tr>
|
|
124
|
+
|
|
125
|
+
<tr><td>6</td><td>13</td></tr>
|
|
126
|
+
<tr><td>7</td><td>17</td></tr>
|
|
127
|
+
<tr><td>8</td><td>8</td></tr>
|
|
128
|
+
<tr><td>9</td><td>25</td></tr>
|
|
129
|
+
<tr><td>10</td><td>5</td></tr>
|
|
130
|
+
<tr><td>11-20</td><td>15</td></tr>
|
|
131
|
+
|
|
132
|
+
<tr><td>21-30</td><td>6</td></tr>
|
|
133
|
+
<tr><td>31-40</td><td>2</td></tr>
|
|
134
|
+
<tr><td>41-50</td><td>1</td></tr>
|
|
135
|
+
<tr><td>51-60</td><td>5</td></tr>
|
|
136
|
+
<tr><td>61-70</td><td>3</td></tr>
|
|
137
|
+
<tr><td>71-80</td><td>0</td></tr>
|
|
138
|
+
|
|
139
|
+
<tr><td>81-90</td><td>1</td></tr>
|
|
140
|
+
<tr><td>91-100</td><td>1</td></tr>
|
|
141
|
+
<tr><td>100+</td><td>0</td></tr>
|
|
142
|
+
</table>
|
|
143
|
+
|
|
144
|
+
<h3>Table 2</h3>
|
|
145
|
+
|
|
146
|
+
<table border="0" cellpadding="0" cellspacing="0">
|
|
147
|
+
<caption>Frequency of class values</caption>
|
|
148
|
+
|
|
149
|
+
<tr><th>Frequency class value appears</th><th>count</th></tr>
|
|
150
|
+
<tr><td>1</td><td>4325</td></tr>
|
|
151
|
+
<tr><td>2</td><td>507</td></tr>
|
|
152
|
+
<tr><td>3</td><td>174</td></tr>
|
|
153
|
+
<tr><td>4</td><td>108</td></tr>
|
|
154
|
+
<tr><td>5</td><td>55</td></tr>
|
|
155
|
+
|
|
156
|
+
<tr><td>6</td><td>29</td></tr>
|
|
157
|
+
<tr><td>7</td><td>16</td></tr>
|
|
158
|
+
<tr><td>8</td><td>22</td></tr>
|
|
159
|
+
<tr><td>9</td><td>34</td></tr>
|
|
160
|
+
<tr><td>10</td><td>12</td></tr>
|
|
161
|
+
<tr><td>11-20</td><td>43</td></tr>
|
|
162
|
+
|
|
163
|
+
<tr><td>21-30</td><td>11</td></tr>
|
|
164
|
+
<tr><td>31-40</td><td>4</td></tr>
|
|
165
|
+
<tr><td>41-50</td><td>9</td></tr>
|
|
166
|
+
<tr><td>51-60</td><td>5</td></tr>
|
|
167
|
+
<tr><td>61-70</td><td>4</td></tr>
|
|
168
|
+
<tr><td>71-80</td><td>4</td></tr>
|
|
169
|
+
|
|
170
|
+
<tr><td>81-90</td><td>0</td></tr>
|
|
171
|
+
<tr><td>91-100</td><td>0</td></tr>
|
|
172
|
+
<tr><td>100+</td><td>2</td></tr>
|
|
173
|
+
</table>
|
|
174
|
+
|
|
175
|
+
<h3>Table 3</h3>
|
|
176
|
+
|
|
177
|
+
<table border="0" cellpadding="0" cellspacing="0">
|
|
178
|
+
<caption>id values which appeared 5 or more times (a couple of syntax errors have been removed)</caption><tr><th>Value</th><th>Count</th></tr>
|
|
179
|
+
|
|
180
|
+
<tr><td>clsidD27CDB6E-AE6D-11cf-96B8-444553540000</td><td>90</td></tr>
|
|
181
|
+
<tr><td>footer</td><td>89</td></tr>
|
|
182
|
+
<tr><td>BTAMarker</td><td>65</td></tr>
|
|
183
|
+
<tr><td>header</td><td>63</td></tr>
|
|
184
|
+
<tr><td>content</td><td>63</td></tr>
|
|
185
|
+
<tr><td>areaTitle</td><td>57</td></tr>
|
|
186
|
+
|
|
187
|
+
<tr><td>layout</td><td>52</td></tr>
|
|
188
|
+
<tr><td>noBulletContent</td><td>50</td></tr>
|
|
189
|
+
<tr><td>sqBulletContent</td><td>50</td></tr>
|
|
190
|
+
<tr><td>logo</td><td>50</td></tr>
|
|
191
|
+
<tr><td>search</td><td>42</td></tr>
|
|
192
|
+
<tr><td>main</td><td>33</td></tr>
|
|
193
|
+
|
|
194
|
+
<tr><td>banner</td><td>30</td></tr>
|
|
195
|
+
<tr><td>container</td><td>29</td></tr>
|
|
196
|
+
<tr><td>Top</td><td>26</td></tr>
|
|
197
|
+
<tr><td>sidebar</td><td>26</td></tr>
|
|
198
|
+
<tr><td>nav</td><td>23</td></tr>
|
|
199
|
+
<tr><td>wrapper</td><td>23</td></tr>
|
|
200
|
+
|
|
201
|
+
<tr><td>+</td><td>23</td></tr>
|
|
202
|
+
<tr><td>left</td><td>19</td></tr>
|
|
203
|
+
<tr><td>Table1</td><td>18</td></tr>
|
|
204
|
+
<tr><td>searchform</td><td>17</td></tr>
|
|
205
|
+
<tr><td>right</td><td>17</td></tr>
|
|
206
|
+
<tr><td>menu</td><td>17</td></tr>
|
|
207
|
+
|
|
208
|
+
<tr><td>home</td><td>16</td></tr>
|
|
209
|
+
<tr><td>Layer1</td><td>16</td></tr>
|
|
210
|
+
<tr><td>searchbox</td><td>15</td></tr>
|
|
211
|
+
<tr><td>Copyright</td><td>14</td></tr>
|
|
212
|
+
<tr><td>page</td><td>13</td></tr>
|
|
213
|
+
<tr><td>topMenu</td><td>12</td></tr>
|
|
214
|
+
|
|
215
|
+
<tr><td>AutoNumber1</td><td>12</td></tr>
|
|
216
|
+
<tr><td>Layer2</td><td>11</td></tr>
|
|
217
|
+
<tr><td>bottom</td><td>11</td></tr>
|
|
218
|
+
<tr><td>submit</td><td>11</td></tr>
|
|
219
|
+
<tr><td>Table2</td><td>11</td></tr>
|
|
220
|
+
<tr><td>Body</td><td>10</td></tr>
|
|
221
|
+
|
|
222
|
+
<tr><td>Image1</td><td>10</td></tr>
|
|
223
|
+
<tr><td>news</td><td>10</td></tr>
|
|
224
|
+
<tr><td>toptabs</td><td>10</td></tr>
|
|
225
|
+
<tr><td>breadcrumbs</td><td>10</td></tr>
|
|
226
|
+
<tr><td>ebGallery</td><td>9</td></tr>
|
|
227
|
+
<tr><td>links</td><td>9</td></tr>
|
|
228
|
+
|
|
229
|
+
<tr><td>menuitem</td><td>9</td></tr>
|
|
230
|
+
<tr><td>topNav</td><td>9</td></tr>
|
|
231
|
+
<tr><td>s</td><td>9</td></tr>
|
|
232
|
+
<tr><td>Table3</td><td>9</td></tr>
|
|
233
|
+
<tr><td>id-10</td><td>9</td></tr>
|
|
234
|
+
<tr><td>id-11</td><td>9</td></tr>
|
|
235
|
+
|
|
236
|
+
<tr><td>all-m</td><td>9</td></tr>
|
|
237
|
+
<tr><td>top-m</td><td>9</td></tr>
|
|
238
|
+
<tr><td>id-8</td><td>9</td></tr>
|
|
239
|
+
<tr><td>visual</td><td>9</td></tr>
|
|
240
|
+
<tr><td>l-m</td><td>9</td></tr>
|
|
241
|
+
<tr><td>id-7</td><td>9</td></tr>
|
|
242
|
+
|
|
243
|
+
<tr><td>id-6</td><td>9</td></tr>
|
|
244
|
+
<tr><td>id-height</td><td>9</td></tr>
|
|
245
|
+
<tr><td>id-b-1</td><td>9</td></tr>
|
|
246
|
+
<tr><td>id-b-2</td><td>9</td></tr>
|
|
247
|
+
<tr><td>id-b-3</td><td>9</td></tr>
|
|
248
|
+
<tr><td>id-b-4</td><td>9</td></tr>
|
|
249
|
+
|
|
250
|
+
<tr><td>id-b-5</td><td>9</td></tr>
|
|
251
|
+
<tr><td>id-9</td><td>9</td></tr>
|
|
252
|
+
<tr><td>Masthead</td><td>9</td></tr>
|
|
253
|
+
<tr><td>q</td><td>9</td></tr>
|
|
254
|
+
<tr><td>navBar</td><td>9</td></tr>
|
|
255
|
+
<tr><td>globalNav</td><td>9</td></tr>
|
|
256
|
+
|
|
257
|
+
<tr><td>Table_01</td><td>8</td></tr>
|
|
258
|
+
<tr><td>Image2</td><td>8</td></tr>
|
|
259
|
+
<tr><td>topmain</td><td>8</td></tr>
|
|
260
|
+
<tr><td>topmenu-b</td><td>8</td></tr>
|
|
261
|
+
<tr><td>gmo_foot</td><td>8</td></tr>
|
|
262
|
+
<tr><td>gmo_logo</td><td>8</td></tr>
|
|
263
|
+
|
|
264
|
+
<tr><td>main2</td><td>8</td></tr>
|
|
265
|
+
<tr><td>wrap</td><td>8</td></tr>
|
|
266
|
+
<tr><td>orphus</td><td>8</td></tr>
|
|
267
|
+
<tr><td>gmo_link</td><td>7</td></tr>
|
|
268
|
+
<tr><td>Title</td><td>7</td></tr>
|
|
269
|
+
<tr><td>Image4</td><td>7</td></tr>
|
|
270
|
+
|
|
271
|
+
<tr><td>password</td><td>7</td></tr>
|
|
272
|
+
<tr><td>AutoNumber5</td><td>7</td></tr>
|
|
273
|
+
<tr><td>gmo_img</td><td>7</td></tr>
|
|
274
|
+
<tr><td>gmo_ul</td><td>7</td></tr>
|
|
275
|
+
<tr><td>tophban</td><td>7</td></tr>
|
|
276
|
+
<tr><td>Table4</td><td>7</td></tr>
|
|
277
|
+
|
|
278
|
+
<tr><td>gmo_service</td><td>7</td></tr>
|
|
279
|
+
<tr><td>current</td><td>7</td></tr>
|
|
280
|
+
<tr><td>AutoNumber2</td><td>7</td></tr>
|
|
281
|
+
<tr><td>navigation</td><td>7</td></tr>
|
|
282
|
+
<tr><td>podlogo</td><td>7</td></tr>
|
|
283
|
+
<tr><td>binfo</td><td>7</td></tr>
|
|
284
|
+
|
|
285
|
+
<tr><td>banbox</td><td>7</td></tr>
|
|
286
|
+
<tr><td>email</td><td>7</td></tr>
|
|
287
|
+
<tr><td>Form1</td><td>6</td></tr>
|
|
288
|
+
<tr><td>query</td><td>6</td></tr>
|
|
289
|
+
<tr><td>Image5</td><td>6</td></tr>
|
|
290
|
+
<tr><td>searchsubmit</td><td>6</td></tr>
|
|
291
|
+
|
|
292
|
+
<tr><td>about</td><td>6</td></tr>
|
|
293
|
+
<tr><td>Image3</td><td>6</td></tr>
|
|
294
|
+
<tr><td>leftcol</td><td>6</td></tr>
|
|
295
|
+
<tr><td>AutoNumber3</td><td>6</td></tr>
|
|
296
|
+
<tr><td>maincol</td><td>6</td></tr>
|
|
297
|
+
<tr><td>jobs</td><td>6</td></tr>
|
|
298
|
+
|
|
299
|
+
<tr><td>AutoNumber4</td><td>6</td></tr>
|
|
300
|
+
<tr><td>login</td><td>6</td></tr>
|
|
301
|
+
<tr><td>gmo_copy</td><td>6</td></tr>
|
|
302
|
+
<tr><td>pas-m</td><td>6</td></tr>
|
|
303
|
+
<tr><td>contact</td><td>5</td></tr>
|
|
304
|
+
<tr><td>_x0000_i1025</td><td>5</td></tr>
|
|
305
|
+
|
|
306
|
+
<tr><td>site-switch</td><td>5</td></tr>
|
|
307
|
+
<tr><td>subhead</td><td>5</td></tr>
|
|
308
|
+
<tr><td>navright</td><td>5</td></tr>
|
|
309
|
+
<tr><td>intro</td><td>5</td></tr>
|
|
310
|
+
<tr><td>inseguitore</td><td>5</td></tr>
|
|
311
|
+
<tr><td>brdbott</td><td>5</td></tr>
|
|
312
|
+
|
|
313
|
+
<tr><td>ROOF</td><td>5</td></tr>
|
|
314
|
+
<tr><td>mainnav</td><td>5</td></tr>
|
|
315
|
+
<tr><td>WTL_TAG</td><td>5</td></tr>
|
|
316
|
+
<tr><td>udm</td><td>5</td></tr>
|
|
317
|
+
<tr><td>Image6</td><td>5</td></tr>
|
|
318
|
+
<tr><td>name</td><td>5</td></tr>
|
|
319
|
+
|
|
320
|
+
<tr><td>location</td><td>5</td></tr>
|
|
321
|
+
<tr><td>headernav</td><td>5</td></tr>
|
|
322
|
+
<tr><td>Company</td><td>5</td></tr>
|
|
323
|
+
<tr><td>Products</td><td>5</td></tr>
|
|
324
|
+
<tr><td>rightcol</td><td>5</td></tr>
|
|
325
|
+
<tr><td>newsletter</td><td>5</td></tr>
|
|
326
|
+
|
|
327
|
+
<tr><td>press</td><td>5</td></tr>
|
|
328
|
+
<tr><td>navcontainer</td><td>5</td></tr>
|
|
329
|
+
<tr><td>leftmenu</td><td>5</td></tr>
|
|
330
|
+
<tr><td>CONTENTBODY</td><td>5</td></tr>
|
|
331
|
+
<tr><td>calendar</td><td>5</td></tr>
|
|
332
|
+
<tr><td>Table5</td><td>5</td></tr></table>
|
|
333
|
+
|
|
334
|
+
<h3>Table 4</h3>
|
|
335
|
+
|
|
336
|
+
<p></p>
|
|
337
|
+
|
|
338
|
+
<table border="0" cellpadding="0" cellspacing="0">
|
|
339
|
+
<caption>Class values which appeared 5 or more times (a couple of syntax errors have been removed)</caption><tr><th>Value</th><th>Count</th></tr>
|
|
340
|
+
<tr><td>navigation</td><td>131</td></tr>
|
|
341
|
+
<tr><td>title</td><td>113</td></tr>
|
|
342
|
+
|
|
343
|
+
<tr><td>help</td><td>80</td></tr>
|
|
344
|
+
<tr><td>footer</td><td>73</td></tr>
|
|
345
|
+
<tr><td>content</td><td>71</td></tr>
|
|
346
|
+
<tr><td>pipe</td><td>71</td></tr>
|
|
347
|
+
<tr><td>noMargin</td><td>69</td></tr>
|
|
348
|
+
<tr><td>prefill</td><td>68</td></tr>
|
|
349
|
+
|
|
350
|
+
<tr><td>ebay</td><td>68</td></tr>
|
|
351
|
+
<tr><td>novisited</td><td>68</td></tr>
|
|
352
|
+
<tr><td>button</td><td>60</td></tr>
|
|
353
|
+
<tr><td>standard</td><td>58</td></tr>
|
|
354
|
+
<tr><td>section</td><td>58</td></tr>
|
|
355
|
+
<tr><td>Menu</td><td>57</td></tr>
|
|
356
|
+
|
|
357
|
+
<tr><td>text</td><td>55</td></tr>
|
|
358
|
+
<tr><td>searchFormSection</td><td>50</td></tr>
|
|
359
|
+
<tr><td>rightAnchor</td><td>50</td></tr>
|
|
360
|
+
<tr><td>catTable</td><td>50</td></tr>
|
|
361
|
+
<tr><td>metaCat</td><td>50</td></tr>
|
|
362
|
+
<tr><td>seeAllLink</td><td>50</td></tr>
|
|
363
|
+
|
|
364
|
+
<tr><td>seeAllBullet</td><td>50</td></tr>
|
|
365
|
+
<tr><td>adSpacer</td><td>50</td></tr>
|
|
366
|
+
<tr><td>boxSection</td><td>50</td></tr>
|
|
367
|
+
<tr><td>nav</td><td>43</td></tr>
|
|
368
|
+
<tr><td>ocDCP</td><td>42</td></tr>
|
|
369
|
+
<tr><td>white</td><td>39</td></tr>
|
|
370
|
+
|
|
371
|
+
<tr><td>Date</td><td>39</td></tr>
|
|
372
|
+
<tr><td>body</td><td>37</td></tr>
|
|
373
|
+
<tr><td>module</td><td>31</td></tr>
|
|
374
|
+
<tr><td>CIPpromo</td><td>30</td></tr>
|
|
375
|
+
<tr><td>small</td><td>29</td></tr>
|
|
376
|
+
<tr><td>main</td><td>28</td></tr>
|
|
377
|
+
|
|
378
|
+
<tr><td>header</td><td>28</td></tr>
|
|
379
|
+
<tr><td>copyright</td><td>26</td></tr>
|
|
380
|
+
<tr><td>tiny</td><td>26</td></tr>
|
|
381
|
+
<tr><td>hdr</td><td>24</td></tr>
|
|
382
|
+
<tr><td>clear</td><td>23</td></tr>
|
|
383
|
+
<tr><td>headline</td><td>23</td></tr>
|
|
384
|
+
|
|
385
|
+
<tr><td>link</td><td>22</td></tr>
|
|
386
|
+
<tr><td>search</td><td>22</td></tr>
|
|
387
|
+
<tr><td>links</td><td>22</td></tr>
|
|
388
|
+
<tr><td>v</td><td>20</td></tr>
|
|
389
|
+
<tr><td>style1</td><td>20</td></tr>
|
|
390
|
+
<tr><td>v1</td><td>19</td></tr>
|
|
391
|
+
|
|
392
|
+
<tr><td>topMenu</td><td>19</td></tr>
|
|
393
|
+
<tr><td>left</td><td>19</td></tr>
|
|
394
|
+
<tr><td>more</td><td>19</td></tr>
|
|
395
|
+
<tr><td>smalltext</td><td>18</td></tr>
|
|
396
|
+
<tr><td>prnav</td><td>18</td></tr>
|
|
397
|
+
<tr><td>prred</td><td>18</td></tr>
|
|
398
|
+
|
|
399
|
+
<tr><td>copy</td><td>18</td></tr>
|
|
400
|
+
<tr><td>box</td><td>18</td></tr>
|
|
401
|
+
<tr><td>hide</td><td>18</td></tr>
|
|
402
|
+
<tr><td>trans</td><td>17</td></tr>
|
|
403
|
+
<tr><td>news</td><td>17</td></tr>
|
|
404
|
+
<tr><td>logo</td><td>17</td></tr>
|
|
405
|
+
|
|
406
|
+
<tr><td>top</td><td>16</td></tr>
|
|
407
|
+
<tr><td>right</td><td>16</td></tr>
|
|
408
|
+
<tr><td>center</td><td>16</td></tr>
|
|
409
|
+
<tr><td>item</td><td>16</td></tr>
|
|
410
|
+
<tr><td>entry</td><td>15</td></tr>
|
|
411
|
+
<tr><td>gray</td><td>15</td></tr>
|
|
412
|
+
|
|
413
|
+
<tr><td>style2</td><td>15</td></tr>
|
|
414
|
+
<tr><td>spacer</td><td>15</td></tr>
|
|
415
|
+
<tr><td>description</td><td>15</td></tr>
|
|
416
|
+
<tr><td>bodytext</td><td>14</td></tr>
|
|
417
|
+
<tr><td>head</td><td>14</td></tr>
|
|
418
|
+
<tr><td>blue</td><td>14</td></tr>
|
|
419
|
+
|
|
420
|
+
<tr><td>MsoNormal</td><td>14</td></tr>
|
|
421
|
+
<tr><td>searchbox</td><td>13</td></tr>
|
|
422
|
+
<tr><td>post</td><td>13</td></tr>
|
|
423
|
+
<tr><td>posted</td><td>12</td></tr>
|
|
424
|
+
<tr><td>block</td><td>12</td></tr>
|
|
425
|
+
<tr><td>style3</td><td>12</td></tr>
|
|
426
|
+
|
|
427
|
+
<tr><td>yellow</td><td>12</td></tr>
|
|
428
|
+
<tr><td>gallery</td><td>12</td></tr>
|
|
429
|
+
<tr><td>home</td><td>11</td></tr>
|
|
430
|
+
<tr><td>subtitle</td><td>11</td></tr>
|
|
431
|
+
<tr><td>submit</td><td>11</td></tr>
|
|
432
|
+
<tr><td>leftnav</td><td>11</td></tr>
|
|
433
|
+
|
|
434
|
+
<tr><td>inputbox</td><td>11</td></tr>
|
|
435
|
+
<tr><td>topnav</td><td>11</td></tr>
|
|
436
|
+
<tr><td>author</td><td>11</td></tr>
|
|
437
|
+
<tr><td>back</td><td>10</td></tr>
|
|
438
|
+
<tr><td>option</td><td>10</td></tr>
|
|
439
|
+
<tr><td>caption</td><td>10</td></tr>
|
|
440
|
+
|
|
441
|
+
<tr><td>black</td><td>10</td></tr>
|
|
442
|
+
<tr><td>searchinput</td><td>10</td></tr>
|
|
443
|
+
<tr><td>border</td><td>10</td></tr>
|
|
444
|
+
<tr><td>side</td><td>10</td></tr>
|
|
445
|
+
<tr><td>selected</td><td>10</td></tr>
|
|
446
|
+
<tr><td>tbTitle</td><td>10</td></tr>
|
|
447
|
+
|
|
448
|
+
<tr><td>s2</td><td>10</td></tr>
|
|
449
|
+
<tr><td>bold</td><td>10</td></tr>
|
|
450
|
+
<tr><td>icons</td><td>10</td></tr>
|
|
451
|
+
<tr><td>helpblk</td><td>10</td></tr>
|
|
452
|
+
<tr><td>ebcPic</td><td>9</td></tr>
|
|
453
|
+
<tr><td>ebPicture</td><td>9</td></tr>
|
|
454
|
+
|
|
455
|
+
<tr><td>visual</td><td>9</td></tr>
|
|
456
|
+
<tr><td>topmenu-spacer</td><td>9</td></tr>
|
|
457
|
+
<tr><td>c-right</td><td>9</td></tr>
|
|
458
|
+
<tr><td>block1</td><td>9</td></tr>
|
|
459
|
+
<tr><td>s1</td><td>9</td></tr>
|
|
460
|
+
<tr><td>read</td><td>9</td></tr>
|
|
461
|
+
|
|
462
|
+
<tr><td>block2</td><td>9</td></tr>
|
|
463
|
+
<tr><td>ebDetails</td><td>9</td></tr>
|
|
464
|
+
<tr><td>ebPrc</td><td>9</td></tr>
|
|
465
|
+
<tr><td>projectsTable</td><td>9</td></tr>
|
|
466
|
+
<tr><td>bottomLine1</td><td>9</td></tr>
|
|
467
|
+
<tr><td>bottomRed</td><td>9</td></tr>
|
|
468
|
+
|
|
469
|
+
<tr><td>bottomAboutText</td><td>9</td></tr>
|
|
470
|
+
<tr><td>bottomAbout</td><td>9</td></tr>
|
|
471
|
+
<tr><td>bottomLine2</td><td>9</td></tr>
|
|
472
|
+
<tr><td>block-text</td><td>9</td></tr>
|
|
473
|
+
<tr><td>bottom-menu</td><td>9</td></tr>
|
|
474
|
+
<tr><td>style4</td><td>9</td></tr>
|
|
475
|
+
|
|
476
|
+
<tr><td>green</td><td>9</td></tr>
|
|
477
|
+
<tr><td>normal</td><td>9</td></tr>
|
|
478
|
+
<tr><td>style5</td><td>9</td></tr>
|
|
479
|
+
<tr><td>submenu</td><td>9</td></tr>
|
|
480
|
+
<tr><td>input</td><td>9</td></tr>
|
|
481
|
+
<tr><td>navbar</td><td>9</td></tr>
|
|
482
|
+
|
|
483
|
+
<tr><td>calendar</td><td>9</td></tr>
|
|
484
|
+
<tr><td>heading</td><td>9</td></tr>
|
|
485
|
+
<tr><td>foot</td><td>9</td></tr>
|
|
486
|
+
<tr><td>red</td><td>9</td></tr>
|
|
487
|
+
<tr><td>category</td><td>9</td></tr>
|
|
488
|
+
<tr><td>blogbody</td><td>9</td></tr>
|
|
489
|
+
|
|
490
|
+
<tr><td>divider</td><td>9</td></tr>
|
|
491
|
+
<tr><td>cnnLarge</td><td>9</td></tr>
|
|
492
|
+
<tr><td>cnnLeft</td><td>9</td></tr>
|
|
493
|
+
<tr><td>bottomSearchTable</td><td>8</td></tr>
|
|
494
|
+
<tr><td>bottomInput100</td><td>8</td></tr>
|
|
495
|
+
<tr><td>bottomSelect</td><td>8</td></tr>
|
|
496
|
+
|
|
497
|
+
<tr><td>BottomWhite</td><td>8</td></tr>
|
|
498
|
+
<tr><td>bottomAdv</td><td>8</td></tr>
|
|
499
|
+
<tr><td>summary</td><td>8</td></tr>
|
|
500
|
+
<tr><td>smaller</td><td>8</td></tr>
|
|
501
|
+
<tr><td>cnnEndCell</td><td>8</td></tr>
|
|
502
|
+
<tr><td>bottomDot</td><td>8</td></tr>
|
|
503
|
+
|
|
504
|
+
<tr><td>bottomServices</td><td>8</td></tr>
|
|
505
|
+
<tr><td>formbut</td><td>8</td></tr>
|
|
506
|
+
<tr><td>related</td><td>8</td></tr>
|
|
507
|
+
<tr><td>breadcrumb</td><td>8</td></tr>
|
|
508
|
+
<tr><td>style7</td><td>8</td></tr>
|
|
509
|
+
<tr><td>orange</td><td>8</td></tr>
|
|
510
|
+
|
|
511
|
+
<tr><td>navlinks</td><td>8</td></tr>
|
|
512
|
+
<tr><td>nwslink</td><td>8</td></tr>
|
|
513
|
+
<tr><td>leftmenu</td><td>8</td></tr>
|
|
514
|
+
<tr><td>maintext</td><td>8</td></tr>
|
|
515
|
+
<tr><td>txt</td><td>8</td></tr>
|
|
516
|
+
<tr><td>secondary</td><td>8</td></tr>
|
|
517
|
+
|
|
518
|
+
<tr><td>rub1</td><td>7</td></tr>
|
|
519
|
+
<tr><td>whitetext</td><td>7</td></tr>
|
|
520
|
+
<tr><td>container</td><td>7</td></tr>
|
|
521
|
+
<tr><td>cbox</td><td>7</td></tr>
|
|
522
|
+
<tr><td>ta-c</td><td>7</td></tr>
|
|
523
|
+
<tr><td>formtext</td><td>7</td></tr>
|
|
524
|
+
|
|
525
|
+
<tr><td>blurb</td><td>7</td></tr>
|
|
526
|
+
<tr><td>highlight</td><td>7</td></tr>
|
|
527
|
+
<tr><td>mainmenu</td><td>7</td></tr>
|
|
528
|
+
<tr><td>cal</td><td>7</td></tr>
|
|
529
|
+
<tr><td>searchtext</td><td>7</td></tr>
|
|
530
|
+
<tr><td>sidebar</td><td>7</td></tr>
|
|
531
|
+
|
|
532
|
+
<tr><td>s</td><td>7</td></tr>
|
|
533
|
+
<tr><td>bottom</td><td>7</td></tr>
|
|
534
|
+
<tr><td>blog</td><td>7</td></tr>
|
|
535
|
+
<tr><td>style</td><td>7</td></tr>
|
|
536
|
+
<tr><td>powered</td><td>7</td></tr>
|
|
537
|
+
<tr><td>footertext</td><td>6</td></tr>
|
|
538
|
+
|
|
539
|
+
<tr><td>mini</td><td>6</td></tr>
|
|
540
|
+
<tr><td>pagetitle</td><td>6</td></tr>
|
|
541
|
+
<tr><td>imagealign</td><td>6</td></tr>
|
|
542
|
+
<tr><td>grey</td><td>6</td></tr>
|
|
543
|
+
<tr><td>row1</td><td>6</td></tr>
|
|
544
|
+
<tr><td>catlist</td><td>6</td></tr>
|
|
545
|
+
|
|
546
|
+
<tr><td>ckCol</td><td>6</td></tr>
|
|
547
|
+
<tr><td>binImg</td><td>6</td></tr>
|
|
548
|
+
<tr><td>rubr</td><td>6</td></tr>
|
|
549
|
+
<tr><td>none</td><td>6</td></tr>
|
|
550
|
+
<tr><td>tm</td><td>6</td></tr>
|
|
551
|
+
<tr><td>LastItem</td><td>6</td></tr>
|
|
552
|
+
|
|
553
|
+
<tr><td>tagline</td><td>6</td></tr>
|
|
554
|
+
<tr><td>searchform</td><td>6</td></tr>
|
|
555
|
+
<tr><td>separator</td><td>6</td></tr>
|
|
556
|
+
<tr><td>btn</td><td>6</td></tr>
|
|
557
|
+
<tr><td>menu2</td><td>6</td></tr>
|
|
558
|
+
<tr><td>titre</td><td>6</td></tr>
|
|
559
|
+
|
|
560
|
+
<tr><td>foot_alt</td><td>6</td></tr>
|
|
561
|
+
<tr><td>module-content</td><td>6</td></tr>
|
|
562
|
+
<tr><td>bannerAd</td><td>6</td></tr>
|
|
563
|
+
<tr><td>smalllist</td><td>6</td></tr>
|
|
564
|
+
<tr><td>subject</td><td>6</td></tr>
|
|
565
|
+
<tr><td>sidetitle</td><td>6</td></tr>
|
|
566
|
+
|
|
567
|
+
<tr><td>subhead</td><td>6</td></tr>
|
|
568
|
+
<tr><td>alignleft</td><td>6</td></tr>
|
|
569
|
+
<tr><td>alignright</td><td>6</td></tr>
|
|
570
|
+
<tr><td>cnnData1</td><td>6</td></tr>
|
|
571
|
+
<tr><td>tabs</td><td>5</td></tr>
|
|
572
|
+
<tr><td>icomtb</td><td>5</td></tr>
|
|
573
|
+
|
|
574
|
+
<tr><td>last</td><td>5</td></tr>
|
|
575
|
+
<tr><td>ContentBorder</td><td>5</td></tr>
|
|
576
|
+
<tr><td>timestamp</td><td>5</td></tr>
|
|
577
|
+
<tr><td>Byline</td><td>5</td></tr>
|
|
578
|
+
<tr><td>TextAd</td><td>5</td></tr>
|
|
579
|
+
<tr><td>Label</td><td>5</td></tr>
|
|
580
|
+
|
|
581
|
+
<tr><td>default</td><td>5</td></tr>
|
|
582
|
+
<tr><td>banner</td><td>5</td></tr>
|
|
583
|
+
<tr><td>navtext</td><td>5</td></tr>
|
|
584
|
+
<tr><td>udm</td><td>5</td></tr>
|
|
585
|
+
<tr><td>hr</td><td>5</td></tr>
|
|
586
|
+
<tr><td>pagenav</td><td>5</td></tr>
|
|
587
|
+
|
|
588
|
+
<tr><td>style6</td><td>5</td></tr>
|
|
589
|
+
<tr><td>info</td><td>5</td></tr>
|
|
590
|
+
<tr><td>bottomnav</td><td>5</td></tr>
|
|
591
|
+
<tr><td>B</td><td>5</td></tr>
|
|
592
|
+
<tr><td>alt</td><td>5</td></tr>
|
|
593
|
+
<tr><td>entry-header</td><td>5</td></tr>
|
|
594
|
+
|
|
595
|
+
<tr><td>entry-body</td><td>5</td></tr>
|
|
596
|
+
<tr><td>entry-footer</td><td>5</td></tr>
|
|
597
|
+
<tr><td>permalink</td><td>5</td></tr>
|
|
598
|
+
<tr><td>TextBox</td><td>5</td></tr>
|
|
599
|
+
<tr><td>nav3</td><td>5</td></tr>
|
|
600
|
+
<tr><td>text2</td><td>5</td></tr>
|
|
601
|
+
|
|
602
|
+
<tr><td>m</td><td>5</td></tr>
|
|
603
|
+
<tr><td>rights</td><td>5</td></tr>
|
|
604
|
+
<tr><td>current</td><td>5</td></tr>
|
|
605
|
+
<tr><td>bot</td><td>5</td></tr>
|
|
606
|
+
<tr><td>narrowcolumn</td><td>5</td></tr>
|
|
607
|
+
<tr><td>postmetadata</td><td>5</td></tr>
|
|
608
|
+
|
|
609
|
+
<tr><td>cnnHeader</td><td>5</td></tr>
|
|
610
|
+
<tr><td>cnnNoBold</td><td>5</td></tr>
|
|
611
|
+
<tr><td>dark</td><td>5</td></tr>
|
|
612
|
+
<tr><td>clickPath</td><td>5</td></tr>
|
|
613
|
+
<tr><td>formbutt</td><td>5</td></tr>
|
|
614
|
+
<tr><td>pt-10</td><td>5</td></tr>
|
|
615
|
+
|
|
616
|
+
<tr><td>lnav</td><td>5</td></tr>
|
|
617
|
+
<tr><td>footmsg</td><td>5</td></tr>
|
|
618
|
+
<tr><td>navcolor</td><td>5</td></tr>
|
|
619
|
+
<tr><td>f-11</td><td>5</td></tr>
|
|
620
|
+
<tr><td>navMainSections</td><td>5</td></tr>
|
|
621
|
+
<tr><td>portletContent</td><td>5</td></tr>
|
|
622
|
+
|
|
623
|
+
<tr><td>stitle</td><td>5</td></tr>
|
|
624
|
+
<tr><td>mmsmall</td><td>5</td></tr>
|
|
625
|
+
<tr><td>mastertable</td><td>5</td></tr>
|
|
626
|
+
<tr><td>sidebarad</td><td>5</td></tr>
|
|
627
|
+
<tr><td>cattitle</td><td>5</td></tr>
|
|
628
|
+
<tr><td>f-gray</td><td>5</td></tr>
|
|
629
|
+
|
|
630
|
+
<tr><td>ens</td><td>5</td></tr>
|
|
631
|
+
<tr><td>toptab</td><td>5</td></tr>
|
|
632
|
+
<tr><td>fivevert</td><td>5</td></tr>
|
|
633
|
+
<tr><td>disclaimer</td><td>5</td></tr>
|
|
634
|
+
<tr><td>disclaimerlink</td><td>5</td></tr>
|
|
635
|
+
<tr><td>tenvert</td><td>5</td></tr></table>
|
|
636
|
+
|
|
637
|
+
<a id="more"></a>
|
|
638
|
+
|
|
639
|
+
|
|
640
|
+
<p class="posted">
|
|
641
|
+
November 5, 2005 | <a href="http://westciv.typepad.com/dog_or_higher/2005/11/real_world_sema.html">Permalink</a>
|
|
642
|
+
</p>
|
|
643
|
+
|
|
644
|
+
<h2><a id="trackback"></a>TrackBack</h2>
|
|
645
|
+
<p>TrackBack URL for this entry:<br />http://www.typepad.com/services/trackback/6a00d8341cbf7d53ef00e55021085b8833</p>
|
|
646
|
+
|
|
647
|
+
<p>Listed below are links to weblogs that reference <a href="http://westciv.typepad.com/dog_or_higher/2005/11/real_world_sema.html">Semantics in the wild</a>:</p>
|
|
648
|
+
|
|
649
|
+
<p><a id="p973163"></a>
|
|
650
|
+
» <a href="http://mar.anomy.net/entry/2006/04/28/10.58.08/">IceWeb 2006 notes - David Shea, "CSS Project Management"</a> from Már Örlygsson<br />
|
|
651
|
+
Uses his own site Mezzoblue.com as an hands-on example. Hey, Dave uses BBEdit to write CSS and HTML! I remember using BBEdit back in my Macintosh days (in the MacOs 7 8 era). Recommends commenting your CSS code.... <a href="http://mar.anomy.net/entry/2006/04/28/10.58.08/">[Read More]</a>
|
|
652
|
+
</p>
|
|
653
|
+
<p class="posted">Tracked on Apr 28, 2006 9:26:25 PM</p>
|
|
654
|
+
|
|
655
|
+
|
|
656
|
+
|
|
657
|
+
<h2><a id="comments"></a>Comments</h2>
|
|
658
|
+
|
|
659
|
+
<a id="c10939480"></a>
|
|
660
|
+
<p>John, are you proposing the adoption of a standardised set of naming conventions for CSS ids and classes to ensure semanticity, for lack of a better word (BTW that is a derivative of specificity which I picked up at the Canberra CSS workshop) in page layout and stylesheets?</p>
|
|
661
|
+
|
|
662
|
+
<p>Within reason if everyone was using the same naming conventions you could have some interesting experiments by applying other people's stylesheets to your site knowing that it will restyle your information fairly accurately.</p>
|
|
663
|
+
|
|
664
|
+
<p>Whilst I like the idea, is it going to be achievable, in a practical sense?</p>
|
|
665
|
+
|
|
666
|
+
<p>damo</p>
|
|
667
|
+
<p class="posted">Posted by: <a rel="nofollow" target="_blank" title="http://damo.otenko.com" href="http://damo.otenko.com">damo</a> | Nov 7, 2005 9:49:33 AM</p>
|
|
668
|
+
|
|
669
|
+
<a id="c10939584"></a>
|
|
670
|
+
<p>Damo,</p>
|
|
671
|
+
|
|
672
|
+
<p>got it in one.</p>
|
|
673
|
+
|
|
674
|
+
<p>Is it doable? I think that is in the realm of the imponderable. I certainly don't think that you could say it is impossible. It's really a social issue, in the sense that, what would motivate people to do it? </p>
|
|
675
|
+
|
|
676
|
+
<p>I think it would require</p>
|
|
677
|
+
|
|
678
|
+
<p>1. knowledge - people would need to know about the possibility, and the options<br />
|
|
679
|
+
2. motivation - people would need to see a benefit in doing it</p>
|
|
680
|
+
|
|
681
|
+
<p>I think a "top down" approach, of getting the major blog apps to adopt a common set of semantics would be a great start - but would that fly?</p>
|
|
682
|
+
|
|
683
|
+
<p>I know one or two smart people looking at this aspect, hopefully there will be some word of their efforts soon.</p>
|
|
684
|
+
|
|
685
|
+
<p>Thanks for the note,</p>
|
|
686
|
+
|
|
687
|
+
<p>j<br />
|
|
688
|
+
</p>
|
|
689
|
+
<p class="posted">Posted by: <a rel="nofollow" target="_blank" title="http://westciv.com" href="http://westciv.com">John Allsopp</a> | Nov 7, 2005 9:55:54 AM</p>
|
|
690
|
+
|
|
691
|
+
<a id="c10942309"></a>
|
|
692
|
+
<p>john, </p>
|
|
693
|
+
|
|
694
|
+
<p>I agree that if it can be and does get adopted it will be fantastic. Unfortunately web design/development is still a fledgling industry and it is only geeks like ourselves that keep up to speed on standards and find new/better ways of implementing code. Unfortunately, a lot of "designers/developers" are unaware of better practice.</p>
|
|
695
|
+
|
|
696
|
+
<p>The biggest problem facing "us" is ensuring adoption and compliance. As you mention, there will be a need to filter down the why's, how's and where's of semantic CSS and XHTML. It is in the best interests of everyone that uses the Net from casual surfers to coders, if only we can agree on a standard and implement it. I agree that top down is probably going to be the only way to successfully implement it however we are still learning ourselves. I think we are off to a good start.</p>
|
|
697
|
+
|
|
698
|
+
<p>damo</p>
|
|
699
|
+
<p class="posted">Posted by: <a rel="nofollow" target="_blank" title="http://damo.otenko.com" href="http://damo.otenko.com">damo</a> | Nov 7, 2005 12:19:31 PM</p>
|
|
700
|
+
|
|
701
|
+
<a id="c10961225"></a>
|
|
702
|
+
<p>John, this is really interesting. Here's an idea from the "weird and wacky" shelf:</p>
|
|
703
|
+
|
|
704
|
+
<p>I wonder if one could take your search engine results and create a del.icio.us-style app where one could browse all the class or id values the same as del.icio.us tags. When doing so, you would be presented with a representation of the tagged code. Might be an interesting way to see *what* developers are applying these tags to.</p>
|
|
705
|
+
|
|
706
|
+
<p>Probably useless, but as you mentioned that this is a "social" problem, why not experiment with social solutions?</p>
|
|
707
|
+
<p class="posted">Posted by: <a rel="nofollow" target="_blank" title="http://redmonk.net" href="http://redmonk.net">Steve Ivy</a> | Nov 8, 2005 6:29:55 AM</p>
|
|
708
|
+
<a id="c10962934"></a>
|
|
709
|
+
<p>It may be worth noting that clsidD27CDB6E-AE6D-11cf-96B8-444553540000 generally refers to the SWF classid attribute. Most likely a parsing error with your spider.</p>
|
|
710
|
+
|
|
711
|
+
<p class="posted">Posted by: Craig Bovis | Nov 8, 2005 7:23:05 AM</p>
|
|
712
|
+
<a id="c10963104"></a>
|
|
713
|
+
<p>This has all along been a concept that I have tried to work with... One standardized way to mark up all my website... That way I can swap style sheets on different sites all I want. I actually started my base nameing conventions from CSSZenGarden. It seemed they had more than enough blocks to create a universal layout framework.</p>
|
|
714
|
+
<p class="posted">Posted by: Rod Kesselring | Nov 8, 2005 7:27:23 AM</p>
|
|
715
|
+
<a id="c10964967"></a>
|
|
716
|
+
<p>This sounds similar to microformats <a href="http://microformats.org/," rel="nofollow">http://microformats.org/,</a> tho defining an entire page structure is a bit more ambitious. As you say, there would need to be some benefit for it to take hold.</p>
|
|
717
|
+
<p class="posted">Posted by: Brian | Nov 8, 2005 8:25:17 AM</p>
|
|
718
|
+
<a id="c10965306"></a>
|
|
719
|
+
<p>Just because quite a number of (english speaking) developers use the same class or id for something doesn't make it semantic.</p>
|
|
720
|
+
|
|
721
|
+
<p>Also, why would you? What would it help if all headers were marked 'header' ? (It'd also push people into a certain design mindset, resulting in sites that all look the same.)</p>
|
|
722
|
+
<p class="posted">Posted by: <a rel="nofollow" target="_blank" title="http://akaxaka.gameover.com/" href="http://akaxaka.gameover.com/">AkaXakA</a> | Nov 8, 2005 8:36:03 AM</p>
|
|
723
|
+
<a id="c10965628"></a>
|
|
724
|
+
<p>This is really great work - I've been thinking about subject this for ages too. It always seemed strange that XHTML and CSS are 'standards' but that they get applied in anything but a standard way when it comes to the links between them - the id and class names. I'd love to stop reinventing the wheel all the time with my reused names like 'nav' and 'footer' and 'container' etc. The benefits of standardising these things might be more than just cos you could swap stylesheets, and that things would be more efficient. It might be handy for search engines to only trawl the 'content' div, for example, rather than trawling though menus and adverts and other stuff.</p>
|
|
725
|
+
|
|
726
|
+
<p>My small comment (for what it's worth) is that the very broad, automated approach to your sampling may be less interesting than doing this sampling in a more directed way. By allowing the spider to go everywhere, you are looking at the web as a whole and the amount of noise in the data is inevitably going to drown out the revealing bits. Of course, it's interesting to know about the web as a whole, but for the purposes of finding out what the people who are actually *thinking* about it are doing, which I think would be more useful, your spider is too wide-ranging.</p>
|
|
727
|
+
|
|
728
|
+
<p>If, say, we knew that the 'title' 'nav' 'main' 'content' and 'footer' ids are found in the vast majority of sites where those id attributes were set by hand, then that might encourage more people to consider using those.</p>
|
|
729
|
+
|
|
730
|
+
<p>I don't know how an automated system might go about narrowing down to the more useful sites... maybe the spider should check to see if the page was done with BBEdit or similar editor before looking further? Not really possible in the vast majority of cases. Or maybe it could check for validity (which might be a good correlate with having been written by someone more deliberately?)... but that might not be very easy, and might lead to a small dataset.</p>
|
|
731
|
+
|
|
732
|
+
<p>All I'm getting at is that the sites that have automated id names (like 'Layer2' etc.) are just not that useful for what you're trying to find out - which is what people who are interested in semantics are using - and instead it tells us about the state of the web on average, semantic sites lumped in with the completely unsemantic.</p>
|
|
733
|
+
|
|
734
|
+
<p>What do you reckon?<br />
|
|
735
|
+
</p>
|
|
736
|
+
<p class="posted">Posted by: rich | Nov 8, 2005 8:45:27 AM</p>
|
|
737
|
+
<a id="c10966561"></a>
|
|
738
|
+
<p>I would quite gladly adopt a standardized set of class and id naming rules.</p>
|
|
739
|
+
|
|
740
|
+
<p>Can it be achieved? Yes and No.<br />
|
|
741
|
+
|
|
742
|
+
Like so many things we deal with penetration will only ever be limited. But like webstandards and microformats and so many other things we love, it can be done if we spread the word.</p>
|
|
743
|
+
<p class="posted">Posted by: <a rel="nofollow" target="_blank" title="http://www.kerihenare.com/" href="http://www.kerihenare.com/">Keri Henare</a> | Nov 8, 2005 9:15:59 AM</p>
|
|
744
|
+
<a id="c10967073"></a>
|
|
745
|
+
<p>Would you consider opening the source of your spider?</p>
|
|
746
|
+
|
|
747
|
+
<p>Slightly off topic, but I've been looking for a utility that would allow me to crawl a site and index all ids and classes. The output I seek is a list of all URLs where a given id or class occurs.</p>
|
|
748
|
+
|
|
749
|
+
<p>I need this because I don't always know which pages will be effected by a CSS edit.</p>
|
|
750
|
+
|
|
751
|
+
<p>I need an id/class search engine for a single (large) site. Your code is a step in that direction. Or can you suggest some other tool?</p>
|
|
752
|
+
<p class="posted">Posted by: <a rel="nofollow" target="_blank" title="http://crastinate.jonwiley.com/" href="http://crastinate.jonwiley.com/">Jon</a> | Nov 8, 2005 9:33:12 AM</p>
|
|
753
|
+
<a id="c10969652"></a>
|
|
754
|
+
<p>A standard, and semantically rich, format for naming CSS is a good idea, although I imagine the debate when trying to agree names will be lively. </p>
|
|
755
|
+
|
|
756
|
+
<p>I can't help thinking that although CSS is the only place to do this at present, it's fundamentally the wrong place - semantics should come from XHTML (or whichever markup language), not CSS. A page's header (if that's what you call it) should be it's -header-, not it's -div class="header"-. Shouldn't CSS be about applying styles to a page, and utilising the semantics of the page to do it? I'm not trying to devalue the exercise, just venting my frustration at HTML's lack of sophistication after all these years. </p>
|
|
757
|
+
|
|
758
|
+
<p>However, until XHTML modularisation and/or XAML comes along it definitely makes sense to agree this naming convention and then carry it across to the tags, otherwise we'll each end up modularising different markup code for exactly the same function - something we should really try avoid otherwise we'll have standards, and lots of them!</p>
|
|
759
|
+
<p class="posted">Posted by: Wholesome | Nov 8, 2005 11:18:30 AM</p>
|
|
760
|
+
|
|
761
|
+
<a id="c10971331"></a>
|
|
762
|
+
<p>Sorry to reply to all the comments in one - is this bad?</p>
|
|
763
|
+
|
|
764
|
+
<p>Steve,</p>
|
|
765
|
+
|
|
766
|
+
<p>>John, this is really interesting. Here's an idea from the "weird and wacky" shelf:<br />
|
|
767
|
+
>I wonder if one could take your search engine results and create a del.icio.us-style app where one could browse all the class or id values the same as del.icio.us tags. When doing so, you would be presented with a representation of the tagged code. Might be an interesting way to see *what* developers are applying these tags to.<br />
|
|
768
|
+
><br />
|
|
769
|
+
>Probably useless, but as you mentioned that this is a "social" problem, why not experiment with social solutions?</p>
|
|
770
|
+
|
|
771
|
+
<p>I've actually been playing around with the idea of "semantic search" for a while now. Indeed this project was an initial step in the direction. At present it would seem to be of no great value, as the noise to signal is so high. If however, there were standardizes semantics we could rely on, then it would be a more useful possibility.</p>
|
|
772
|
+
|
|
773
|
+
<p>j</p>
|
|
774
|
+
|
|
775
|
+
<p>>It may be worth noting that clsidD27CDB6E-AE6D-11cf-96B8-444553540000 generally refers to the SWF classid attribute. Most likely a parsing error with your spider.</p>
|
|
776
|
+
|
|
777
|
+
<p>Craig,</p>
|
|
778
|
+
|
|
779
|
+
<p>thanks for that, I'll adapt the spider to ignore these (I knew it was something, just couldn't workout what)</p>
|
|
780
|
+
|
|
781
|
+
<p>>This has all along been a concept that I have tried to work with... One standardized way to mark up all my website... That way I can swap style sheets on different sites all I want. I actually started my base naming conventions from CSSZenGarden. It seemed they had more than enough blocks to create a universal layout framework.</p>
|
|
782
|
+
|
|
783
|
+
<p>Rod,</p>
|
|
784
|
+
|
|
785
|
+
<p>the problem is that Dave's original class and id values were much more structural/presentational than semantic. I also don't think they really reflect the most common patterns people are using (though I don't really know what they are, look out for a post soon on that).</p>
|
|
786
|
+
|
|
787
|
+
<p>Someone we all know is looking at this issue to do something like the Zen Garden but for semantics, I've spoken with him at length about this for some time. Hopefully this research and subsequent conversations will be useful for that project.</p>
|
|
788
|
+
|
|
789
|
+
<p>thanks,</p>
|
|
790
|
+
|
|
791
|
+
<p>john</p>
|
|
792
|
+
|
|
793
|
+
<p>>This sounds similar to microformats <a href="http://microformats.org/," rel="nofollow">http://microformats.org/,</a> tho defining an entire page structure is a bit more ambitious. As you say, there would need to be some benefit for it to take hold.</p>
|
|
794
|
+
|
|
795
|
+
<p>Brian,</p>
|
|
796
|
+
|
|
797
|
+
<p>Tantek and I have spoken at length about some of these issues, and I spoke in Japan and WWW2005 on Microformats at the developer day. I think that Microformats focus on a particular level of granularity, and also on existing published, or essentially formal semantics (like vCard and iCalendar). The interest I have is helping to formalize by convention existing conventional uses. A kind of bottom up semantics. Of course this simplifies µF considerably, and is far from accurate. I certainly think you are right that there is at the every least a lot of inspiration to be drawn from what Tantek and others with µF have achieved.</p>
|
|
798
|
+
|
|
799
|
+
<p>>Just because quite a number of (english speaking) developers use the same class or id for something doesn't make it semantic.</p>
|
|
800
|
+
|
|
801
|
+
<p>AkaXakA,</p>
|
|
802
|
+
|
|
803
|
+
<p>I appreciate the point that semantics is not about English. This actually came up with Tantek at SxSW last year when he was talking about microformats and other ways of adding semantics to HTML. Douglas Bowman in particular raised the issue of internationalization. I believe that an approach like this is amenable to internationalization. But that would require a whole 'nother conversation (which I am happy to have).</p>
|
|
804
|
+
|
|
805
|
+
<p>I do however think that laving aside the issue of language, "quite a number of developers using the same class or id for something" does indeed make it semantic - it seems to me almost the definition of language - using the same signs to signify the same things gives meaning, and hence semantics.</p>
|
|
806
|
+
|
|
807
|
+
<p>>Also, why would you? What would it help if all headers were marked 'header' ? (It'd also push people into a certain design mindset, resulting in sites that all look the same.)</p>
|
|
808
|
+
|
|
809
|
+
<p>There is a fair bit here to unpack. Why would you? People already use the same patterns over and over - both personally, in organizations, and indeed across the web. So this is merely a suggestion that perhaps there is value in formalizing current practice (what Adam Bosworth calls "paving the cowpaths").</p>
|
|
810
|
+
|
|
811
|
+
<p>It is not proscriptive - you must have sites that use these elements, but rather descriptive of what people actually do.<br />
|
|
812
|
+
And unlike HTML, which is closed in terms of the elements is contains, this i pen ended, it allows for new patterns to be formalized with the existing HTML language and semantics unchanged.</p>
|
|
813
|
+
|
|
814
|
+
<p>Thanks for the thoughts,</p>
|
|
815
|
+
|
|
816
|
+
<p>john</p>
|
|
817
|
+
|
|
818
|
+
<p>Rich,</p>
|
|
819
|
+
|
|
820
|
+
<p>>This is really great work</p>
|
|
821
|
+
|
|
822
|
+
<p>many thanks</p>
|
|
823
|
+
|
|
824
|
+
<p>>I've been thinking about subject this for ages too. It always seemed strange that XHTML and CSS are 'standards' but that they get applied in anything but a standard way when it comes to the links between them - the id and class names. I'd love to stop reinventing the wheel all the time with my reused names like 'nav' and 'footer' and 'container' etc. The benefits of standardising these things might be more than just cos you could swap stylesheets, and that things would be more efficient. It might be handy for search engines to only trawl the 'content' div, for example, rather than trawling though menus and adverts and other stuff.</p>
|
|
825
|
+
|
|
826
|
+
<p>yes to all :-)</p>
|
|
827
|
+
|
|
828
|
+
<p><br />
|
|
829
|
+
|
|
830
|
+
>My small comment (for what it's worth) is that the very broad, automated approach to your sampling may be less interesting than doing this sampling in a more directed way.</p>
|
|
831
|
+
|
|
832
|
+
<p>Ah, stage two :-) Yes, that is something I am currently working on. What I wanted to do with the automated approach was to see just how much signal there was out there. This would show me the cowpaths, which Tantek Celik and Adam Bosworth (Tantek quotes Adam in this regard) talk about paving - look to where people are walking, and make them the path, rather than arbitrarily laying down paths, and "keep off the grass" signs, and hoping they stick to your plan, rather than theirs.</p>
|
|
833
|
+
|
|
834
|
+
<p>Now, I have found that there aren't too may paths in the sense of id and class values, but there are patterns people are using over andover. What I want to do next (with your help dear readers) is start cataloguing these patterns (I know others have done this, most notably Martijn van Welie [<a href="http://www.welie.com/patterns]," rel="nofollow">http://www.welie.com/patterns],</a> I'll talk more about why I think it warrants another go in a post shortly). Then, we can start looking for some consensus regarding these patterns.</p>
|
|
835
|
+
|
|
836
|
+
<p>%gt;By allowing the spider to go everywhere, you are looking at the web as a whole and the amount of noise in the data is inevitably going to drown out the revealing bits. Of course, it's interesting to know about the web as a whole, but for the purposes of finding out what the people who are actually *thinking* about it are doing, which I think would be more useful, your spider is too wide-ranging.</p>
|
|
837
|
+
|
|
838
|
+
<p><br />
|
|
839
|
+
As mentioned above, I don't disagree at all (only my goal was perhaps a little different for this particular phase). One reason I tried to cluster the spidering around stopdesign was the hope that this would at least give us a reasonable chance of sites that knew about this stuff.</p>
|
|
840
|
+
|
|
841
|
+
<p>>If, say, we knew that the 'title' 'nav' 'main' 'content' and 'footer' ids are found in the vast majority of sites where those id attributes were set by hand, then that might encourage more people to consider using those.<br />
|
|
842
|
+
></p>
|
|
843
|
+
|
|
844
|
+
<p>Precisely. But as we see from my results, that while people are doing this, there is no consensus (for example, probably well over a dozen ways of people specifying navigation in id and class values)</p>
|
|
845
|
+
|
|
846
|
+
<p>>I don't know how an automated system might go about narrowing down to the more useful sites... maybe the spider should check to see if the page was done with BBEdit or similar editor before looking further? Not really possible in the vast majority of cases. Or maybe it could check for validity (which might be a good correlate with having been written by someone more deliberately?)... but that might not be very easy, and might lead to a small dataset.</p>
|
|
847
|
+
|
|
848
|
+
<p>Good thoughts, I'll have a post soon about the next phases, we can return to this issue then!</p>
|
|
849
|
+
|
|
850
|
+
<p><br />
|
|
851
|
+
>All I'm getting at is that the sites that have automated id names (like 'Layer2' etc.) are just not that useful for what you're trying to find out - which is what people who are interested in semantics are using - and instead it tells us about the state of the web on average, semantic sites lumped in with the completely unsemantic.</p>
|
|
852
|
+
|
|
853
|
+
<p>Sure, but it is interesting to know what the id and class values are (my guess is that "layer" values come from dreamweaver, for instance). But as mentioned, the next phase should start focussing on meaningful semantics more specifically. </p>
|
|
854
|
+
|
|
855
|
+
<p>thanks for thoughts, hope to hear more in subsequent posts</p>
|
|
856
|
+
|
|
857
|
+
<p><br />
|
|
858
|
+
Keri,</p>
|
|
859
|
+
|
|
860
|
+
<p>>I would quite gladly adopt a standardized set of class and id naming rules.<br />
|
|
861
|
+
><br />
|
|
862
|
+
>Can it be achieved? Yes and No.<br />
|
|
863
|
+
|
|
864
|
+
>Like so many things we deal with penetration will only ever be limited. But like webstandards and microformats and so many other things we love, it can be done if we spread the word.</p>
|
|
865
|
+
|
|
866
|
+
<p>Indeed. I think if there is value, people will do it. Is there value in it? The consensus of the people I speak to about it is yes, but it does remain to be seen whether in reality that is the case</p>
|
|
867
|
+
|
|
868
|
+
<p>thanks</p>
|
|
869
|
+
|
|
870
|
+
<p>john</p>
|
|
871
|
+
|
|
872
|
+
<p>Jon,</p>
|
|
873
|
+
|
|
874
|
+
<p>>Would you consider opening the source of your spider?</p>
|
|
875
|
+
|
|
876
|
+
<p>I'd love to but it is a platform specific executable at present. I really should do it in Rails or something to get some practice in that :-)</p>
|
|
877
|
+
|
|
878
|
+
<p>>Slightly off topic, but I've been looking for a utility that would allow me to crawl a site and index all ids and classes. The output I seek is a list of all URLs where a given id or class occurs.</p>
|
|
879
|
+
|
|
880
|
+
<p>What I did is easily adaptable to that. I was thinking too of which elements get which values (for example, are people using dis for fotters, paragraphs? ...)</p>
|
|
881
|
+
|
|
882
|
+
<p>><br />
|
|
883
|
+
>I need this because I don't always know which pages will be effected by a CSS edit.</p>
|
|
884
|
+
|
|
885
|
+
<p>makes sense</p>
|
|
886
|
+
|
|
887
|
+
<p>><br />
|
|
888
|
+
>I need an id/class search engine for a single (large) site. Your code is a step in that direction. Or can you suggest some other tool?</p>
|
|
889
|
+
|
|
890
|
+
<p>Not off the top of my head, sadly. But it really isn't all that hard to do. Afterall, I managed it :-)</p>
|
|
891
|
+
|
|
892
|
+
<p>j</p>
|
|
893
|
+
|
|
894
|
+
<p><br />
|
|
895
|
+
Wholesome,</p>
|
|
896
|
+
|
|
897
|
+
<p>&>A standard, and semantically rich, format for naming CSS is a good idea, although I imagine the debate when trying to agree names will be lively.</p>
|
|
898
|
+
|
|
899
|
+
<p>indeed!</p>
|
|
900
|
+
|
|
901
|
+
<p>>I can't help thinking that although CSS is the only place to do this at present, it's fundamentally the wrong place - semantics should come from XHTML (or whichever markup language), not CSS. A page's header (if that's what you call it) should be it's -header-, not it's -div class="header"-. Shouldn't CSS be about applying styles to a page, and utilising the semantics of the page to do it? I'm not trying to devalue the exercise, just venting my frustration at HTML's lack of sophistication after all these years.</p>
|
|
902
|
+
|
|
903
|
+
<p>It's not really in the SS, its actually in the values of the attributes of your HTML. CSS just potentially uses this for styling hooks.</p>
|
|
904
|
+
|
|
905
|
+
<p>><br />
|
|
906
|
+
>However, until XHTML modularisation and/or XAML comes along it definitely makes sense to agree this naming convention and then carry it across to the tags, otherwise we'll each end up modularising different markup code for exactly the same function - something we should really try avoid otherwise we'll have standards, and lots of them!</p>
|
|
907
|
+
|
|
908
|
+
<p>I think in reality it will be a very very long time before we have XML on the web in any way shape or form, beyond the simplest mechanism of XHTML 1.x</p>
|
|
909
|
+
|
|
910
|
+
<p>The question is, do you really need semantics embedded in the elements, when there is a perfectly serviceable mechanism that works right now?</p>
|
|
911
|
+
|
|
912
|
+
<p>john</p>
|
|
913
|
+
<p class="posted">Posted by: <a rel="nofollow" target="_blank" title="http://westciv.com" href="http://westciv.com">john Allsopp</a> | Nov 8, 2005 12:27:12 PM</p>
|
|
914
|
+
<a id="c10971739"></a>
|
|
915
|
+
<p>All I know is... I'm worried about anyone who names a class "blue", "white", "gray", "orange" etc. Think a lot of people must still be missing the point of CSS...</p>
|
|
916
|
+
<p class="posted">Posted by: Alex | Nov 8, 2005 12:45:18 PM</p>
|
|
917
|
+
<a id="c11000367"></a>
|
|
918
|
+
|
|
919
|
+
<p>In my current redevelopment of my site I'm taking this kind of information quite seriously. I found What's In a Name (<a href="http://www.stuffandnonsense.co.uk/archives/whats_in_a_name_pt2.html)" rel="nofollow">http://www.stuffandnonsense.co.uk/archives/whats_in_a_name_pt2.html)</a> by Andy Clarke quite good and the names were similar to the ones I was already using. I think these set of names are pretty standard.</p>
|
|
920
|
+
|
|
921
|
+
<p>Maybe someone should publish some best practices on these class names/ids</p>
|
|
922
|
+
<p class="posted">Posted by: <a rel="nofollow" target="_blank" title="http://www.trovster.com" href="http://www.trovster.com">trovster</a> | Nov 8, 2005 9:04:03 PM</p>
|
|
923
|
+
<a id="c11001457"></a>
|
|
924
|
+
<p>If everyone uses the same tags, the same attributes and the same attribute values, guess what you'll end up with? Either:</p>
|
|
925
|
+
|
|
926
|
+
<p>a) An entire internets worth of the CSS Zen Garden?</p>
|
|
927
|
+
|
|
928
|
+
<p>b) A boring bland internet where design can on longer get around the mediums limitations?</p>
|
|
929
|
+
|
|
930
|
+
<p>Which do you think is more likely? Are there not enough bland default-styled blogs out there already?</p>
|
|
931
|
+
|
|
932
|
+
<p>While interesting simply for nerd quotient value ("who can come up with the nerdiest meme this week?", I see no benefit whatsoever to suggesting conformity in the use of id attributes which are intended to be *unique* markers. </p>
|
|
933
|
+
|
|
934
|
+
<p>CSS is for visual style and presentation, not semantics. <br />
|
|
935
|
+
</p>
|
|
936
|
+
<p class="posted">Posted by: hostyle | Nov 8, 2005 10:37:30 PM</p>
|
|
937
|
+
|
|
938
|
+
<a id="c11001596"></a>
|
|
939
|
+
<p>The conversation you had with Douglas Bowman must have been the result of you both drinking New Zealand water. I'm pretty sure it's where all the ingenuity comes from.</p>
|
|
940
|
+
<p class="posted">Posted by: <a rel="nofollow" target="_blank" title="http://www.kerihenare.com/" href="http://www.kerihenare.com/">Keri Henare</a> | Nov 8, 2005 10:47:19 PM</p>
|
|
941
|
+
<a id="c11013080"></a>
|
|
942
|
+
<p>Actually, hostyle, there is a c) alluded to by damo and Rod.<br />
|
|
943
|
+
c)An Internet where you can see all the pages in your own favourite style.</p>
|
|
944
|
+
<p class="posted">Posted by: <a rel="nofollow" target="_blank" title="http://www.threeld.info/" href="http://www.threeld.info/">Mike WS</a> | Nov 9, 2005 5:16:43 AM</p>
|
|
945
|
+
|
|
946
|
+
<a id="c11015731"></a>
|
|
947
|
+
<p>Semantic name conventions could make things easier, also for reusing classes and id's in a team collaboration. Then you have to give meaning to your style-elements which every body understands immediatly. </p>
|
|
948
|
+
|
|
949
|
+
<p>I think we should take a look at the DTP industry to begin. They have been naming their layout-elements in a traditional manner for a long time.</p>
|
|
950
|
+
|
|
951
|
+
<p><a href="http://www.tameri.com/dtp/elements.html" rel="nofollow">http://www.tameri.com/dtp/elements.html</a></p>
|
|
952
|
+
|
|
953
|
+
<p>for ecample:</p>
|
|
954
|
+
|
|
955
|
+
<p>h1.hammer {...}<br />
|
|
956
|
+
p.sig {...}<br />
|
|
957
|
+
|
|
958
|
+
p.byline img {..}<br />
|
|
959
|
+
a.kicker {..}</p>
|
|
960
|
+
|
|
961
|
+
<p><br />
|
|
962
|
+
</p>
|
|
963
|
+
<p class="posted">Posted by: <a rel="nofollow" target="_blank" title="http://www.ict-id.nl" href="http://www.ict-id.nl">wisbin</a> | Nov 9, 2005 6:02:56 AM</p>
|
|
964
|
+
<a id="c11017143"></a>
|
|
965
|
+
<p>Has anyone started a naming convention yet?</p>
|
|
966
|
+
|
|
967
|
+
<p>How about this?</p>
|
|
968
|
+
|
|
969
|
+
<p>div#wrapper<br />
|
|
970
|
+
div#container</p>
|
|
971
|
+
|
|
972
|
+
<p>div#intro<br />
|
|
973
|
+
h1#title<br />
|
|
974
|
+
ul#nav_page<br />
|
|
975
|
+
ul#nav_site</p>
|
|
976
|
+
|
|
977
|
+
<p>div#content<br />
|
|
978
|
+
div#content_main<br />
|
|
979
|
+
div#content_supp</p>
|
|
980
|
+
|
|
981
|
+
<p>div#supp<br />
|
|
982
|
+
ul#nav_global<br />
|
|
983
|
+
p#info_credits_photo<br />
|
|
984
|
+
|
|
985
|
+
address#info_street_address<br />
|
|
986
|
+
address#info_phone_number<br />
|
|
987
|
+
address#info_email<br />
|
|
988
|
+
address#info_copyright</p>
|
|
989
|
+
<p class="posted">Posted by: BrainO | Nov 9, 2005 7:04:41 AM</p>
|
|
990
|
+
<a id="c11017218"></a>
|
|
991
|
+
<p>Semantic name conventions could make things easier, also for reusing classes and id's in a team collaboration. Then you have to give meaning to your style-elements which every body understands immediatly. </p>
|
|
992
|
+
|
|
993
|
+
<p>I think we should take a look at the DTP industry to begin. They have been naming their layout-elements in a traditional manner for a long time.</p>
|
|
994
|
+
|
|
995
|
+
<p><a href="http://www.tameri.com/dtp/elements.html" rel="nofollow">http://www.tameri.com/dtp/elements.html</a></p>
|
|
996
|
+
|
|
997
|
+
<p>for ecample:</p>
|
|
998
|
+
|
|
999
|
+
<p>h1.hammer {...}<br />
|
|
1000
|
+
p.sig {...}<br />
|
|
1001
|
+
p.byline img {..}<br />
|
|
1002
|
+
a.kicker {..}</p>
|
|
1003
|
+
|
|
1004
|
+
<p><br />
|
|
1005
|
+
</p>
|
|
1006
|
+
<p class="posted">Posted by: <a rel="nofollow" target="_blank" title="http://www.ict-id.nl" href="http://www.ict-id.nl">wisbin</a> | Nov 9, 2005 7:12:08 AM</p>
|
|
1007
|
+
<a id="c11035320"></a>
|
|
1008
|
+
<p>I agree with wisbin!</p>
|
|
1009
|
+
<p class="posted">Posted by: <a rel="nofollow" target="_blank" title="http://www.hyperwhat.com" href="http://www.hyperwhat.com">Adrian D.</a> | Nov 9, 2005 11:24:33 PM</p>
|
|
1010
|
+
<a id="c11038706"></a>
|
|
1011
|
+
|
|
1012
|
+
<p>So many of the DTP elements are identified based on their place within a visual design. Elements like header, footer and sidebar don't make sense because they don't express their relationship to the whole.</p>
|
|
1013
|
+
<p class="posted">Posted by: BrainO | Nov 10, 2005 1:48:38 AM</p>
|
|
1014
|
+
<a id="c11052919"></a>
|
|
1015
|
+
<p>Well, I am not sure what the div#content stands for, but in my opinion, you should be able to name the classes and id's in their context, the DOM tree. The place of the layout-elements is what makes them semantic imo. </p>
|
|
1016
|
+
|
|
1017
|
+
<p><br />
|
|
1018
|
+
For example, if you layout your template, you could give meaning to the tree by using meaningfull relations, in your code.</p>
|
|
1019
|
+
|
|
1020
|
+
<p><br />
|
|
1021
|
+
»like a logo and text within a Header to the top of your template:</p>
|
|
1022
|
+
|
|
1023
|
+
<p>div#header<br />
|
|
1024
|
+
|
|
1025
|
+
p.nameplate<br />
|
|
1026
|
+
img.logo<br />
|
|
1027
|
+
----------- </p>
|
|
1028
|
+
|
|
1029
|
+
<p>» Or a Heading with some classifications (crumbs) and a subheader with a byline and a small summary to start an article:</p>
|
|
1030
|
+
|
|
1031
|
+
<p>div#article<br />
|
|
1032
|
+
a.kicker<br />
|
|
1033
|
+
|
|
1034
|
+
h1.hammer<br />
|
|
1035
|
+
h2.subhead<br />
|
|
1036
|
+
p.byline <br />
|
|
1037
|
+
p.deck<br />
|
|
1038
|
+
-----------</p>
|
|
1039
|
+
|
|
1040
|
+
<p>I think you should not use #sidebar for a column, but instead .sidebar for containers you want to place besides the maintext:</p>
|
|
1041
|
+
|
|
1042
|
+
<p>div#bodycopy<br />
|
|
1043
|
+
div.sidebar<br />
|
|
1044
|
+
p.pullquote<br />
|
|
1045
|
+
a.teaser</p>
|
|
1046
|
+
|
|
1047
|
+
<p><br />
|
|
1048
|
+
...</p>
|
|
1049
|
+
|
|
1050
|
+
<p><br />
|
|
1051
|
+
</p>
|
|
1052
|
+
<p class="posted">Posted by: <a rel="nofollow" target="_blank" title="http://www.ict-id.nl" href="http://www.ict-id.nl">wisbin</a> | Nov 10, 2005 9:11:30 AM</p>
|
|
1053
|
+
<a id="c11100338"></a>
|
|
1054
|
+
<p>Very interesting, thank you for this analysis.</p>
|
|
1055
|
+
|
|
1056
|
+
<p>By the way, scanning the comments: Well, there is certain CSS semantics in respect of class and ID naming (compare "error" and "redtext"). Regarding naming conventions, no, there is no real agreed-on set of names for common page elements (qed). And finally, use class and ID names which describe the function of the element, not its visualization (colors, position, etc.), or use at least "generic" names (for example, "alt" or "aux", some of my favorites).</p>
|
|
1057
|
+
<p class="posted">Posted by: <a rel="nofollow" target="_blank" title="http://meiert.com/" href="http://meiert.com/">Jens Meiert</a> | Nov 11, 2005 9:44:11 PM</p>
|
|
1058
|
+
|
|
1059
|
+
|
|
1060
|
+
|
|
1061
|
+
<h2>Post a comment</h2>
|
|
1062
|
+
|
|
1063
|
+
<form onsubmit="handleSubmit(this)" method="post" action="http://www.typepad.com/t/comments" name="comments_form">
|
|
1064
|
+
<input type="hidden" name="static" value="1" />
|
|
1065
|
+
<input type="hidden" name="entry_id" value="7255439" />
|
|
1066
|
+
|
|
1067
|
+
<div id="comment-data">
|
|
1068
|
+
<p><label for="author">Name:</label><br />
|
|
1069
|
+
<input onchange="handleChange(this)" tabindex="1" id="author" name="author" /></p>
|
|
1070
|
+
|
|
1071
|
+
<p><label for="email">Email Address:</label><br />
|
|
1072
|
+
|
|
1073
|
+
<input onchange="handleChange(this)" tabindex="2" id="email" name="email" /></p>
|
|
1074
|
+
|
|
1075
|
+
<p><label for="url">URL:</label><br />
|
|
1076
|
+
<input onchange="handleChange(this)" tabindex="3" id="url" name="url" /></p>
|
|
1077
|
+
</div>
|
|
1078
|
+
|
|
1079
|
+
<p><label><input tabindex="5" onclick="handleCheck(this)" type="checkbox" id="bakecookie" name="bakecookie" value="1" /> Remember personal info?</label></p>
|
|
1080
|
+
<br style="clear: both;" />
|
|
1081
|
+
|
|
1082
|
+
<p><label for="comment-text">Comments:</label><br />
|
|
1083
|
+
<textarea tabindex="4" id="comment-text" name="text" rows="10" cols="50"></textarea></p>
|
|
1084
|
+
|
|
1085
|
+
<div align="center">
|
|
1086
|
+
<input tabindex="6" type="submit" name="preview" value=" Preview " />
|
|
1087
|
+
<input tabindex="7" style="font-weight: bold;" type="submit" name="post" value=" Post " />
|
|
1088
|
+
</div>
|
|
1089
|
+
|
|
1090
|
+
</form>
|
|
1091
|
+
|
|
1092
|
+
|
|
1093
|
+
|
|
1094
|
+
|
|
1095
|
+
</div>
|
|
1096
|
+
</div>
|
|
1097
|
+
|
|
1098
|
+
<div id="right">
|
|
1099
|
+
<div class="sidebar">
|
|
1100
|
+
|
|
1101
|
+
<div id="right">
|
|
1102
|
+
|
|
1103
|
+
<h2>About</h2>
|
|
1104
|
+
|
|
1105
|
+
<ul>
|
|
1106
|
+
<li><a href="http://johnfallsopp.com">Read more about John Allsopp (that's me)</li>
|
|
1107
|
+
|
|
1108
|
+
<li><a href="http://north08.webdirections.org" style="border:none"><img src="http://westciv.com/images/bannerads/wdn08_blue.gif" alt="Web Directions North Conference" /></a></li>
|
|
1109
|
+
<li>Web Direction North Conference, Jan 2008, Vancouver</li>
|
|
1110
|
+
|
|
1111
|
+
<li><a href="http://microformatique.com/book/" style="border:none"><img src="http://microformatique.com/book/images/bookcoverdrop.png" alt="Microformats book cover" /></a></li>
|
|
1112
|
+
<li>My book on Microformats</li>
|
|
1113
|
+
</ul>
|
|
1114
|
+
|
|
1115
|
+
<div id="smlogo">
|
|
1116
|
+
<a href="http://westciv.com/style_master/">STYLE MASTER</a>
|
|
1117
|
+
</div>
|
|
1118
|
+
|
|
1119
|
+
<p align="center"><a href="http://claimid.com/johnallsopp" rel="me"><img src="http://claimid.com/images/claimid_badge.gif" border="0" alt="John Allsopp" title="John Allsopp"/></a></p>
|
|
1120
|
+
|
|
1121
|
+
<p align=center><a href="http://www.technorati.com/claim/27wgrb25ty" rel="me">Technorati Profile</a></p>
|
|
1122
|
+
|
|
1123
|
+
<h2>Brought to you by</h2>
|
|
1124
|
+
<ul>
|
|
1125
|
+
<li><a href="http://www.westciv.com/style_master/">Style Master: <strong>the</strong> CSS editor for Windows and Mac OS X</a></li>
|
|
1126
|
+
|
|
1127
|
+
<li><a href="http://www.westciv.com/courses/index.html">westciv's renowned standards based design courses</a></li>
|
|
1128
|
+
</ul>
|
|
1129
|
+
<h2>Subscribe</h2>
|
|
1130
|
+
<ul>
|
|
1131
|
+
<li><a href="http://feeds.feedburner.com/DogOrHigher" title="Subscribe to my feed"><img src="http://www.feedburner.com/fb/images/pub/fbapix.gif" alt="Feedburner icon" style="border:0"/><br />Subscribe to Dog or Higher</a></a></li>
|
|
1132
|
+
|
|
1133
|
+
<li><a onclick="window.open(this.href, 'blogroll', 'width=500,height=600,scrollbars=yes'); return false;" href="http://www.typepad.com/t/app/lists?__mode=quickpost&is_qp=1&type=1&qp_href=http%3A%2F%2Fwestciv.typepad.com%2Fdog_or_higher%2F">Add me to your TypePad People list</a></li>
|
|
1134
|
+
<li><script type="text/javascript">
|
|
1135
|
+
<!--
|
|
1136
|
+
document.write('<a href="ma' + 'ilto:sara@westciv.com">Email Me</a>');
|
|
1137
|
+
// -->
|
|
1138
|
+
</script>
|
|
1139
|
+
</li>
|
|
1140
|
+
<li></li>
|
|
1141
|
+
</ul>
|
|
1142
|
+
|
|
1143
|
+
<h2><a href="http://westciv.com/podcasts/Takethenoise.xml">My music [XML]</a></h2>
|
|
1144
|
+
<ul>
|
|
1145
|
+
<li><a href="http://westciv.com/podcasts/youmayknowmypoetry.mp3">you may know my poetry</a></li>
|
|
1146
|
+
<li><a href="http://we05.com/podcast/mp3/we05-17-we05-upbeat-remix.mp3">WE05 upbeat remix</a></li>
|
|
1147
|
+
<li><a href="http://we05.com/podcast/mp3/we05-16-we05-remixed-deep.mp3"> WE05 deep remix </a></li>
|
|
1148
|
+
|
|
1149
|
+
</ul>
|
|
1150
|
+
<h2>Recent Posts</h2>
|
|
1151
|
+
|
|
1152
|
+
<ul>
|
|
1153
|
+
<li><a href="http://westciv.typepad.com/dog_or_higher/2008/10/ok-ok-wayyyyy-t.html">OK OK, wayyyyy too long</a></li>
|
|
1154
|
+
|
|
1155
|
+
<li><a href="http://westciv.typepad.com/dog_or_higher/2008/09/yes-its-been-a.html">Yes, it's been a long time</a></li>
|
|
1156
|
+
<li><a href="http://westciv.typepad.com/dog_or_higher/2008/07/annals-of-trans.html">Annals of transport safety cluelessness</a></li>
|
|
1157
|
+
<li><a href="http://westciv.typepad.com/dog_or_higher/2008/06/in-fairness-to.html">In fairness to the SCOTUS</a></li>
|
|
1158
|
+
<li><a href="http://westciv.typepad.com/dog_or_higher/2008/05/speaking-dates.html">Speaking dates in Japan in June</a></li>
|
|
1159
|
+
<li><a href="http://westciv.typepad.com/dog_or_higher/2008/05/can-we-please.html">Can we please</a></li>
|
|
1160
|
+
<li><a href="http://westciv.typepad.com/dog_or_higher/2008/05/holiday-destina.html">Holiday destination Question</a></li>
|
|
1161
|
+
<li><a href="http://westciv.typepad.com/dog_or_higher/2008/05/on-marriage.html">On marriage</a></li>
|
|
1162
|
+
<li><a href="http://westciv.typepad.com/dog_or_higher/2008/04/deranged.html">Deranged</a></li>
|
|
1163
|
+
<li><a href="http://westciv.typepad.com/dog_or_higher/2008/04/apophenia.html">apophenia*?</a></li>
|
|
1164
|
+
|
|
1165
|
+
</ul>
|
|
1166
|
+
|
|
1167
|
+
<h2>Recent Comments</h2>
|
|
1168
|
+
|
|
1169
|
+
<ul>
|
|
1170
|
+
<li><a href="http://westciv.typepad.com/dog_or_higher/2008/10/ok-ok-wayyyyy-t.html#c143920998">blafband</a> on <a href="http://westciv.typepad.com/dog_or_higher/2008/10/ok-ok-wayyyyy-t.html">OK OK, wayyyyy too long</a></li>
|
|
1171
|
+
<li><a href="http://westciv.typepad.com/dog_or_higher/2007/08/web-directions-.html#c6a00d8341cbf7d53ef010536a6f447970c">digital dissertation</a> on <a href="http://westciv.typepad.com/dog_or_higher/2007/08/web-directions-.html">Web Directions student discounts</a></li>
|
|
1172
|
+
|
|
1173
|
+
<li><a href="http://westciv.typepad.com/dog_or_higher/2005/12/why_socialnetwo.html#c143213432">Glampaimajene</a> on <a href="http://westciv.typepad.com/dog_or_higher/2005/12/why_socialnetwo.html">Why social/networking sites will never really work</a></li>
|
|
1174
|
+
<li><a href="http://westciv.typepad.com/dog_or_higher/2005/11/webpatterns_and.html#c143212076">Increase Penis Size</a> on <a href="http://westciv.typepad.com/dog_or_higher/2005/11/webpatterns_and.html">WebPatterns and WebSemantics</a></li>
|
|
1175
|
+
<li><a href="http://westciv.typepad.com/dog_or_higher/2008/04/apophenia.html#c6a00d8341cbf7d53ef010536814265970c">pricewis</a> on <a href="http://westciv.typepad.com/dog_or_higher/2008/04/apophenia.html">apophenia*?</a></li>
|
|
1176
|
+
<li><a href="http://westciv.typepad.com/dog_or_higher/2004/03/windows_bug_run.html#c142333634">mass</a> on <a href="http://westciv.typepad.com/dog_or_higher/2004/03/windows_bug_run.html">Windows bug: Run-time error '339'
|
|
1177
|
+
Component 'GraphicsMil20Dialogs.dll'
|
|
1178
|
+
|
|
1179
|
+
</a></li>
|
|
1180
|
+
<li><a href="http://westciv.typepad.com/dog_or_higher/2004/03/windows_bug_run.html#c142333438">mass</a> on <a href="http://westciv.typepad.com/dog_or_higher/2004/03/windows_bug_run.html">Windows bug: Run-time error '339'
|
|
1181
|
+
Component 'GraphicsMil20Dialogs.dll'
|
|
1182
|
+
</a></li>
|
|
1183
|
+
<li><a href="http://westciv.typepad.com/dog_or_higher/2004/03/windows_bug_run.html#c142333414">mass</a> on <a href="http://westciv.typepad.com/dog_or_higher/2004/03/windows_bug_run.html">Windows bug: Run-time error '339'
|
|
1184
|
+
Component 'GraphicsMil20Dialogs.dll'
|
|
1185
|
+
</a></li>
|
|
1186
|
+
<li><a href="http://westciv.typepad.com/dog_or_higher/2004/03/windows_bug_run.html#c142333394">mass</a> on <a href="http://westciv.typepad.com/dog_or_higher/2004/03/windows_bug_run.html">Windows bug: Run-time error '339'
|
|
1187
|
+
Component 'GraphicsMil20Dialogs.dll'
|
|
1188
|
+
</a></li>
|
|
1189
|
+
<li><a href="http://westciv.typepad.com/dog_or_higher/2004/03/windows_bug_run.html#c142333290">mass</a> on <a href="http://westciv.typepad.com/dog_or_higher/2004/03/windows_bug_run.html">Windows bug: Run-time error '339'
|
|
1190
|
+
Component 'GraphicsMil20Dialogs.dll'
|
|
1191
|
+
|
|
1192
|
+
</a></li>
|
|
1193
|
+
|
|
1194
|
+
</ul>
|
|
1195
|
+
<h2><a href="/dog_or_higher/archives.html">Archives</a></h2>
|
|
1196
|
+
|
|
1197
|
+
<ul>
|
|
1198
|
+
<li><a href="http://westciv.typepad.com/dog_or_higher/2008/10/index.html">October 2008</a></li>
|
|
1199
|
+
<li><a href="http://westciv.typepad.com/dog_or_higher/2008/09/index.html">September 2008</a></li>
|
|
1200
|
+
<li><a href="http://westciv.typepad.com/dog_or_higher/2008/07/index.html">July 2008</a></li>
|
|
1201
|
+
<li><a href="http://westciv.typepad.com/dog_or_higher/2008/06/index.html">June 2008</a></li>
|
|
1202
|
+
<li><a href="http://westciv.typepad.com/dog_or_higher/2008/05/index.html">May 2008</a></li>
|
|
1203
|
+
|
|
1204
|
+
<li><a href="http://westciv.typepad.com/dog_or_higher/2008/04/index.html">April 2008</a></li>
|
|
1205
|
+
<li><a href="http://westciv.typepad.com/dog_or_higher/2008/03/index.html">March 2008</a></li>
|
|
1206
|
+
<li><a href="http://westciv.typepad.com/dog_or_higher/2008/02/index.html">February 2008</a></li>
|
|
1207
|
+
<li><a href="http://westciv.typepad.com/dog_or_higher/2008/01/index.html">January 2008</a></li>
|
|
1208
|
+
<li><a href="http://westciv.typepad.com/dog_or_higher/2007/12/index.html">December 2007</a></li>
|
|
1209
|
+
|
|
1210
|
+
</ul>
|
|
1211
|
+
|
|
1212
|
+
<div class="module-typelist module">
|
|
1213
|
+
<h2 class="module-header">need to read</h2>
|
|
1214
|
+
|
|
1215
|
+
<div class="module-content">
|
|
1216
|
+
<ul class="module-list">
|
|
1217
|
+
<li class="module-list-item"><a href="http://www.csszengarden.com">css Zen Garden: The Beauty in CSS Design</a><br />abandon all tables ye who enter here. <strong>Outstanding</strong></li>
|
|
1218
|
+
<li class="module-list-item"><a href="http://westciv.typepad.com/standards/">redemption through standards</a><br />my partner at westciv's eclectic, readable, informative round up of the freshest web standards reading and more</li>
|
|
1219
|
+
<li class="module-list-item"><a href="http://www.meyerweb.com/">meyerweb.com</a><br />The guy to read about CSS</li>
|
|
1220
|
+
|
|
1221
|
+
<li class="module-list-item"><a href="http://www.zeldman.com">Jeffrey Zeldman Presents: The Daily Report</a><br />things you have to know about web design and development</li>
|
|
1222
|
+
|
|
1223
|
+
</ul>
|
|
1224
|
+
</div>
|
|
1225
|
+
</div>
|
|
1226
|
+
|
|
1227
|
+
<div class="module-typelist module">
|
|
1228
|
+
<h2 class="module-header">words words words</h2>
|
|
1229
|
+
<div class="module-content">
|
|
1230
|
+
<ul class="module-list">
|
|
1231
|
+
|
|
1232
|
+
<li class="module-list-item"><a title="" href="https://sitepoint.com/bookstore/go/3/4250ba">HTML Utopia: Designing Without Tables Using CSS</a></li>
|
|
1233
|
+
<li class="module-list-item"><a title="" href="http://www.amazon.com/exec/obidos/ASIN/020172149X/ref%3Dnosim/thehouseofstyle">The Design of Sites: Patterns, Principles, and Processes for Crafting a Customer-Centered Web Experience</a></li>
|
|
1234
|
+
<li class="module-list-item"><a title="" href="http://www.amazon.com/exec/obidos/ASIN/073571245X/ref%3Dnosim/thehouseofstyle">Eric Meyer on CSS: Mastering the Language of Web Design</a></li>
|
|
1235
|
+
<li class="module-list-item"><a title="" href="http://www.amazon.com/exec/obidos/ASIN/0735712018/ref%3Dnosim/thehouseofstyle">Jeffrey Zeldman : Designing With Web Standards</a></li>
|
|
1236
|
+
|
|
1237
|
+
</ul>
|
|
1238
|
+
</div>
|
|
1239
|
+
</div>
|
|
1240
|
+
|
|
1241
|
+
<div class="link-note">
|
|
1242
|
+
<p><a href="http://www.technorati.com/profile/westciv/1050434/1d79eb236bd26c08dc8b7fe10c9b03b0">Technorati Profile</a></p></div>
|
|
1243
|
+
|
|
1244
|
+
<div><script lang="javascript" src="http://www.feedmap.net/blogmap/blogapi.ashx?method=blogmapbadge&feed=http://westciv.typepad.com/dog_or_higher/index.rdf"></script></div>
|
|
1245
|
+
|
|
1246
|
+
</div>
|
|
1247
|
+
</div>
|
|
1248
|
+
|
|
1249
|
+
<div style="clear: both;"> </div>
|
|
1250
|
+
|
|
1251
|
+
</div>
|
|
1252
|
+
|
|
1253
|
+
<script type="text/javascript">
|
|
1254
|
+
<!--
|
|
1255
|
+
var extra_happy = Math.floor(1000000000 * Math.random());
|
|
1256
|
+
document.write('<img src="http://www.typepad.com/t/stats?blog_id=9227&user_id=6131&page=' + escape(location.href) + '&referrer=' + escape(document.referrer) + '&i=' + extra_happy + '" width="1" height="1" alt="" style="position: absolute; top: 0; left: 0;" />');
|
|
1257
|
+
// -->
|
|
1258
|
+
</script>
|
|
1259
|
+
|
|
1260
|
+
<script type="text/javascript"><!--
|
|
1261
|
+
if(!mmposts){var mmposts=[];}mmposts[mmposts.length]="7255439";
|
|
1262
|
+
//--></script>
|
|
1263
|
+
<!-- mmp mmid:7255439 mmdate:20051105113953 mmurl:http://westciv.typepad.com/dog_or_higher/2005/11/real_world_sema.html mmtitle:Semantics in the wild -->
|
|
1264
|
+
<script type="text/javascript"><!--
|
|
1265
|
+
if(!mmcomments){var mmcomments=[];}mmcomments[mmcomments.length]="10939480";
|
|
1266
|
+
//--></script>
|
|
1267
|
+
<!-- mmc mmid:10939480 mmdate:20051107094933 mmauthor:damo -->
|
|
1268
|
+
<script type="text/javascript"><!--
|
|
1269
|
+
if(!mmcomments){var mmcomments=[];}mmcomments[mmcomments.length]="10939584";
|
|
1270
|
+
//--></script>
|
|
1271
|
+
<!-- mmc mmid:10939584 mmdate:20051107095554 mmauthor:John Allsopp -->
|
|
1272
|
+
<script type="text/javascript"><!--
|
|
1273
|
+
if(!mmcomments){var mmcomments=[];}mmcomments[mmcomments.length]="10942309";
|
|
1274
|
+
//--></script>
|
|
1275
|
+
<!-- mmc mmid:10942309 mmdate:20051107121931 mmauthor:damo -->
|
|
1276
|
+
<script type="text/javascript"><!--
|
|
1277
|
+
if(!mmcomments){var mmcomments=[];}mmcomments[mmcomments.length]="10961225";
|
|
1278
|
+
//--></script>
|
|
1279
|
+
<!-- mmc mmid:10961225 mmdate:20051108062955 mmauthor:Steve Ivy -->
|
|
1280
|
+
<script type="text/javascript"><!--
|
|
1281
|
+
if(!mmcomments){var mmcomments=[];}mmcomments[mmcomments.length]="10962934";
|
|
1282
|
+
//--></script>
|
|
1283
|
+
|
|
1284
|
+
<!-- mmc mmid:10962934 mmdate:20051108072305 mmauthor:Craig Bovis -->
|
|
1285
|
+
<script type="text/javascript"><!--
|
|
1286
|
+
if(!mmcomments){var mmcomments=[];}mmcomments[mmcomments.length]="10963104";
|
|
1287
|
+
//--></script>
|
|
1288
|
+
<!-- mmc mmid:10963104 mmdate:20051108072723 mmauthor:Rod Kesselring -->
|
|
1289
|
+
<script type="text/javascript"><!--
|
|
1290
|
+
if(!mmcomments){var mmcomments=[];}mmcomments[mmcomments.length]="10964967";
|
|
1291
|
+
//--></script>
|
|
1292
|
+
<!-- mmc mmid:10964967 mmdate:20051108082517 mmauthor:Brian -->
|
|
1293
|
+
<script type="text/javascript"><!--
|
|
1294
|
+
if(!mmcomments){var mmcomments=[];}mmcomments[mmcomments.length]="10965306";
|
|
1295
|
+
//--></script>
|
|
1296
|
+
<!-- mmc mmid:10965306 mmdate:20051108083603 mmauthor:AkaXakA -->
|
|
1297
|
+
<script type="text/javascript"><!--
|
|
1298
|
+
if(!mmcomments){var mmcomments=[];}mmcomments[mmcomments.length]="10965628";
|
|
1299
|
+
//--></script>
|
|
1300
|
+
<!-- mmc mmid:10965628 mmdate:20051108084527 mmauthor:rich -->
|
|
1301
|
+
<script type="text/javascript"><!--
|
|
1302
|
+
if(!mmcomments){var mmcomments=[];}mmcomments[mmcomments.length]="10966561";
|
|
1303
|
+
//--></script>
|
|
1304
|
+
<!-- mmc mmid:10966561 mmdate:20051108091559 mmauthor:Keri Henare -->
|
|
1305
|
+
<script type="text/javascript"><!--
|
|
1306
|
+
if(!mmcomments){var mmcomments=[];}mmcomments[mmcomments.length]="10967073";
|
|
1307
|
+
//--></script>
|
|
1308
|
+
|
|
1309
|
+
<!-- mmc mmid:10967073 mmdate:20051108093312 mmauthor:Jon -->
|
|
1310
|
+
<script type="text/javascript"><!--
|
|
1311
|
+
if(!mmcomments){var mmcomments=[];}mmcomments[mmcomments.length]="10969652";
|
|
1312
|
+
//--></script>
|
|
1313
|
+
<!-- mmc mmid:10969652 mmdate:20051108111830 mmauthor:Wholesome -->
|
|
1314
|
+
<script type="text/javascript"><!--
|
|
1315
|
+
if(!mmcomments){var mmcomments=[];}mmcomments[mmcomments.length]="10971331";
|
|
1316
|
+
//--></script>
|
|
1317
|
+
<!-- mmc mmid:10971331 mmdate:20051108122712 mmauthor:john Allsopp -->
|
|
1318
|
+
<script type="text/javascript"><!--
|
|
1319
|
+
if(!mmcomments){var mmcomments=[];}mmcomments[mmcomments.length]="10971739";
|
|
1320
|
+
//--></script>
|
|
1321
|
+
<!-- mmc mmid:10971739 mmdate:20051108124518 mmauthor:Alex -->
|
|
1322
|
+
<script type="text/javascript"><!--
|
|
1323
|
+
if(!mmcomments){var mmcomments=[];}mmcomments[mmcomments.length]="11000367";
|
|
1324
|
+
//--></script>
|
|
1325
|
+
<!-- mmc mmid:11000367 mmdate:20051108210403 mmauthor:trovster -->
|
|
1326
|
+
<script type="text/javascript"><!--
|
|
1327
|
+
if(!mmcomments){var mmcomments=[];}mmcomments[mmcomments.length]="11001457";
|
|
1328
|
+
//--></script>
|
|
1329
|
+
<!-- mmc mmid:11001457 mmdate:20051108223730 mmauthor:hostyle -->
|
|
1330
|
+
<script type="text/javascript"><!--
|
|
1331
|
+
if(!mmcomments){var mmcomments=[];}mmcomments[mmcomments.length]="11001596";
|
|
1332
|
+
//--></script>
|
|
1333
|
+
|
|
1334
|
+
<!-- mmc mmid:11001596 mmdate:20051108224719 mmauthor:Keri Henare -->
|
|
1335
|
+
<script type="text/javascript"><!--
|
|
1336
|
+
if(!mmcomments){var mmcomments=[];}mmcomments[mmcomments.length]="11013080";
|
|
1337
|
+
//--></script>
|
|
1338
|
+
<!-- mmc mmid:11013080 mmdate:20051109051643 mmauthor:Mike WS -->
|
|
1339
|
+
<script type="text/javascript"><!--
|
|
1340
|
+
if(!mmcomments){var mmcomments=[];}mmcomments[mmcomments.length]="11015731";
|
|
1341
|
+
//--></script>
|
|
1342
|
+
<!-- mmc mmid:11015731 mmdate:20051109060256 mmauthor:wisbin -->
|
|
1343
|
+
<script type="text/javascript"><!--
|
|
1344
|
+
if(!mmcomments){var mmcomments=[];}mmcomments[mmcomments.length]="11017143";
|
|
1345
|
+
//--></script>
|
|
1346
|
+
<!-- mmc mmid:11017143 mmdate:20051109070441 mmauthor:BrainO -->
|
|
1347
|
+
<script type="text/javascript"><!--
|
|
1348
|
+
if(!mmcomments){var mmcomments=[];}mmcomments[mmcomments.length]="11017218";
|
|
1349
|
+
//--></script>
|
|
1350
|
+
<!-- mmc mmid:11017218 mmdate:20051109071208 mmauthor:wisbin -->
|
|
1351
|
+
<script type="text/javascript"><!--
|
|
1352
|
+
if(!mmcomments){var mmcomments=[];}mmcomments[mmcomments.length]="11035320";
|
|
1353
|
+
//--></script>
|
|
1354
|
+
<!-- mmc mmid:11035320 mmdate:20051109232433 mmauthor:Adrian D. -->
|
|
1355
|
+
<script type="text/javascript"><!--
|
|
1356
|
+
if(!mmcomments){var mmcomments=[];}mmcomments[mmcomments.length]="11038706";
|
|
1357
|
+
//--></script>
|
|
1358
|
+
|
|
1359
|
+
<!-- mmc mmid:11038706 mmdate:20051110014838 mmauthor:BrainO -->
|
|
1360
|
+
<script type="text/javascript"><!--
|
|
1361
|
+
if(!mmcomments){var mmcomments=[];}mmcomments[mmcomments.length]="11052919";
|
|
1362
|
+
//--></script>
|
|
1363
|
+
<!-- mmc mmid:11052919 mmdate:20051110091130 mmauthor:wisbin -->
|
|
1364
|
+
<script type="text/javascript"><!--
|
|
1365
|
+
if(!mmcomments){var mmcomments=[];}mmcomments[mmcomments.length]="11100338";
|
|
1366
|
+
//--></script>
|
|
1367
|
+
<!-- mmc mmid:11100338 mmdate:20051111214411 mmauthor:Jens Meiert -->
|
|
1368
|
+
|
|
1369
|
+
<script type="text/javascript" src="http://tracker.measuremap.com/a/780"></script>
|
|
1370
|
+
<!-- Start Quantcast tag -->
|
|
1371
|
+
<script type="text/javascript" src="http://edge.quantserve.com/quant.js"></script>
|
|
1372
|
+
<script type="text/javascript">_qoptions = { tags:"typepad.core" }; _qacct="p-fcYWUmj5YbYKM"; quantserve();</script>
|
|
1373
|
+
<noscript>
|
|
1374
|
+
<a href="http://www.quantcast.com/p-fcYWUmj5YbYKM" target="_blank"><img src="http://pixel.quantserve.com/pixel/p-fcYWUmj5YbYKM.gif?tags=typepad.core" style="display: none" border="0" height="1" width="1" alt="Quantcast"/></a>
|
|
1375
|
+
</noscript>
|
|
1376
|
+
|
|
1377
|
+
<!-- End Quantcast tag -->
|
|
1378
|
+
</body>
|
|
1379
|
+
</html>
|
|
1380
|
+
<script type="text/javascript">
|
|
1381
|
+
var captchaImgAttempts = 0;
|
|
1382
|
+
var allowAnonComments = '0';
|
|
1383
|
+
var registrationRequired = 0;
|
|
1384
|
+
var registrationOptional = 1;
|
|
1385
|
+
var emailRequired = 1;
|
|
1386
|
+
var jsonURL = "/.services/json-rpc";
|
|
1387
|
+
|
|
1388
|
+
var captchaSrc = "/.services/captcha?code_encrypted=";
|
|
1389
|
+
var alertCommentCannotBeBlank = "You can not leave an empty comment. Please enter some text in the Comment field.";
|
|
1390
|
+
|
|
1391
|
+
var alertAuthorCannotBeBlank = "Name must not be blank.";
|
|
1392
|
+
var alertEmailCannotBeBlank = "Email Address must not be blank.";
|
|
1393
|
+
var alertAuthorAndEmailCannotBeBlank = "Name and email address are both required!";
|
|
1394
|
+
var alertEmailIsInvalid = "The Email Address you entered is invalid. Please enter a valid email address.";
|
|
1395
|
+
var alertUnauthorizedAction = "The comments on this post are closed.";
|
|
1396
|
+
var msgPostReplyTo = "Reply to ";
|
|
1397
|
+
var msgInReplyTo = "In reply to ";
|
|
1398
|
+
var msgPostAComment = "Post a comment ";
|
|
1399
|
+
var atpCommentsPath = "/.shared/js/atpcomments_yui.js?v=2";
|
|
1400
|
+
var hasChanged = 0;
|
|
1401
|
+
var hostName = "westciv.typepad.com";
|
|
1402
|
+
var tp_comment_token = "1231267240-65f7af0313d607f8231eb55163332c2afd0bad2e:Zr4NALv2nmsctC6A";
|
|
1403
|
+
|
|
1404
|
+
var isPage = 0;
|
|
1405
|
+
var blog_xid = "6a00d8341cbf7d53ef00e5502107298833";
|
|
1406
|
+
var xid = "";
|
|
1407
|
+
var injectCode = '<div id=\"comment-preview\" class=\"hiddenBox\">\n\t<h3 id=\"header-verify-comment\" class=\"comments-header hiddenBox\">Verify your Comment<\/h3>\n <h3 id=\"header-preview-comment\" class=\"comments-header hiddenBox\">Previewing your Comment<\/h3>\n\t<div class=\"comments-content\">\n\t\t<div class=\"comment\">\n\t\t\t<div id=\"comment-preview-content\" class=\"comment-content\">\n\t\t\t<\/div>\n\t\t\t<p class=\"comment-footer\">\n\t\t\t\tPosted by: \n\t\t\t\t<span id=\"comment-preview-author\"><\/span> | <span id=\"comment-preview-datetime\"><\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t<\/div>\n<\/div>\n<div id=\"comment-preview-confirmation\" class=\"hiddenBox yellowBox\">\n <p>This is only a preview. Your comment has not yet been posted.<\/p>\n \t<form id=\"comment-preview-form\"\n \t\tmethod=\"post\"\n \t\tonsubmit=\"atpComments.interceptPost(commentFormNum); return false;\">\n\t\t<input type=\"submit\" name=\"post\" id=\"comment-confirm-post\" value=\" Post \" onclick=\"atpComments.interceptPost(commentFormNum); return false;\"/>\t\t \n\t\t<input type=\"submit\" name=\"edit\" id=\"comment-edit\" value=\" Edit \" onclick=\"atpComments.previewOnly(commentFormNum, 2); return false;\"/>\n <span id=\"previewFormSpinner\" class=\"hiddenBox\"><img src=\"/.shared/images/spinner.gif\" alt=\"Working...\" /><\/span>\n\t<\/form>\n<\/div>\n<div id=\"comment-error\" class=\"hiddenBox redBox\">\t \n Your comment could not be posted. Error type: <span id=\"comment-error-msg\"><\/span> \n<\/div>\t\n<div id=\"comment-complete\" class=\"hiddenBox yellowGreenBox\">\n Your comment has been posted. <a href=\"javascript:void 0;\" onclick=\"window.location.hash=\'#comment-form\';window.location.reload(false)\">Post another comment<\/a>\n<\/div>\t\n<div id=\"comment-captcha\" class=\"hiddenBox yellowBox\">\t\n <div id=\"captchaText\">\n\t <p id=\"captchaFailMsg\" class=\"captchaErrorText hiddenBox\">The letters and numbers you entered did not match the image. Please try again.<\/p>\t \t \n\t <p>As a final step before posting your comment, enter the letters and numbers you see in the image below. This prevents automated programs from posting comments.<\/p>\n\t <p><span id=\"comment-captcha-viewalt\">Having trouble reading this image? <a href=\"#comment-captcha\" onClick=\"atpComments.generateCaptcha(commentFormNum);\">View an alternate.<\/a><\/span><\/p>\n <\/div>\n <p class=\"\"><img id=\"captchaImg\" /><\/p>\t\t\n <form id=\"comment-captcha-form\" \n\t\t method=\"post\"\n\t\t onsubmit=\"atpComments.submitWithCaptcha(commentFormNum); return false;\">\n\t\t<input type=\"hidden\" name=\"captcha_chal\" id=\"comment-captcha-chal\" value=\"\" />\n <p>\n\t <input id=\"comment-captcha-text\" name=\"captcha_text\" size=\"10\" />\n <\/p>\n <p>\n <input type=\"submit\" name=\"continue\" id=\"captcha-continue\" value=\" Continue \" />\n <span id=\"captchaFormSpinner\" class=\"commentSpinner hiddenBox\"><img src=\"/.shared/images/spinner.gif\" alt=\"Working...\" /><\/span>\n <\/p>\n <\/form>\n<\/div>\n';
|
|
1408
|
+
var commentFormNum;
|
|
1409
|
+
var entryPermalink = "http://westciv.typepad.com/dog_or_higher/2005/11/real_world_sema.html";
|
|
1410
|
+
var inlineReply = document.createElement("div");
|
|
1411
|
+
var commentFooterLinks;
|
|
1412
|
+
var commentHeader;
|
|
1413
|
+
var commentReplyXID;
|
|
1414
|
+
var commentReplyAuthor;
|
|
1415
|
+
var commentReplyComplete;
|
|
1416
|
+
var inlineReplyLoaded = 0;
|
|
1417
|
+
</script>
|
|
1418
|
+
<script type="text/javascript" src="/.shared/js/yui/yuiloader-beta-min.js"></script>
|
|
1419
|
+
<script type="text/javascript" src="/.shared/js/atpcomments.js?v=2"></script>
|
|
1420
|
+
<!-- ph=1 -->
|
|
1421
|
+
<!-- nhm:from_kauri -->
|