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.
@@ -0,0 +1,171 @@
1
+ <!DOCTYPE HTML>
2
+ <html>
3
+ <head>
4
+ <title>Google Code: Web Authoring Statistics: Classes</title>
5
+ <link rel="stylesheet" href="../webstats.css">
6
+ </head>
7
+ <body>
8
+ <div class="header">
9
+ <p><a href="/"><img src="../../images/google_sm.gif" alt="Google&#x2122;"></a></p>
10
+
11
+ <h1>Classes</h1>
12
+ </div>
13
+ <div class="article">
14
+
15
+ <p>How many different class names do pages use? Well, most pages
16
+ apparently don't use the <code>class</code> attribute at all, and
17
+ it's downhill from there:</p>
18
+
19
+ <p><object data="charts/unique-classes-per-page.svg">Most pages
20
+ have 0 <code>class</code> attributes, one <code>class</code>
21
+
22
+ attribute is the next most common case, etc.</object></p>
23
+
24
+ <p>Which class names are used on the most pages? Here are the top
25
+ 20:</p>
26
+
27
+ <p><object data="charts/top20-classes.svg"> <code>footer</code>,
28
+ <code>menu</code>, <code>title</code>, <code>small</code>,
29
+ <code>text</code>, <code>content</code>, <code>headev</code>,
30
+ <code>nav</code>, <code>copyright</code>, <code>button</code>,
31
+ <code>main</code>, <code>search</code>, <code>msnnormal</code>,
32
+ <code>date</code>, <code>smalltext</code>, <code>body</code>,
33
+ <code>style1</code>, <code>top</code>, <code>white</code>,
34
+ <code>link</code>.</object></p>
35
+
36
+ <p>This actually maps very well to the elements that are being
37
+ proposed in HTML5:</p>
38
+
39
+ <table>
40
+ <thead>
41
+ <tr>
42
+ <th>Popular Class</th>
43
+ <th>HTML5 Element</th>
44
+
45
+ </tr>
46
+ </thead>
47
+ <tbody>
48
+ <tr>
49
+ <td>footer</td>
50
+ <td><a href="http://whatwg.org/specs/web-apps/current-work/#the-footer">footer</a></td>
51
+ </tr>
52
+ <tr>
53
+
54
+ <td>menu</td>
55
+ <td><a href="http://whatwg.org/specs/web-apps/current-work/#the-menu">menu</a></td>
56
+ </tr>
57
+ <tr>
58
+ <td>title, header, top (?)</td>
59
+ <td><a href="http://whatwg.org/specs/web-apps/current-work/#the-header">header</a></td>
60
+ </tr>
61
+
62
+ <tr>
63
+ <td>small, smalltext</td>
64
+ <td><a href="http://whatwg.org/specs/web-apps/current-work/#the-small">small</a></td>
65
+ </tr>
66
+ <tr>
67
+ <td>text, content, main, body</td>
68
+ <td><a href="http://whatwg.org/specs/web-apps/current-work/#the-article">article</a></td>
69
+
70
+ </tr>
71
+ <tr>
72
+ <td>nav</td>
73
+ <td><a href="http://whatwg.org/specs/web-apps/current-work/#the-nav">nav</a></td>
74
+ </tr>
75
+ <tr>
76
+ <td>copyright</td>
77
+
78
+ <td><em>none yet</em></td>
79
+ </tr>
80
+ <tr>
81
+ <td>button</td>
82
+ <td><em>working around an IE6 limitation</em></td>
83
+ </tr>
84
+ <tr>
85
+
86
+ <td>search</td>
87
+ <td><em>none yet</em></td>
88
+ </tr>
89
+ <tr>
90
+ <td>date</td>
91
+ <td><a href="http://whatwg.org/specs/web-apps/current-work/#the-date">date</a></td>
92
+ </tr>
93
+
94
+ <tr>
95
+ <td>link</td>
96
+ <td><em>?</em></td>
97
+ </tr>
98
+ </tbody>
99
+ </table>
100
+
101
+ <p>The rest of the top 20 classes are either presentational or
102
+ otherwise meaningless (<code>msonormal</code>, for example, which
103
+ is one of the classes that Microsoft Office uses in its "HTML"
104
+ output). Of the top 20, the two classes that are used the most that
105
+ are currently not covered by HTML5 are <code>copyright</code> and
106
+ <code>search</code>.</p>
107
+
108
+ <p>The <code>button</code> class is apparently used to target
109
+ <code>input</code> elements in CSS, because IE6 doesn't support
110
+ attribute selectors.</p>
111
+
112
+ <p>The <code>link</code> class baffles us. We can't really tell
113
+ what what it is used for. Why would authors label something with
114
+ that class? Something like the <code>button</code> class maybe?</p>
115
+
116
+ <p>Beyond the top 20, many of the classes are of a presentational
117
+ nature (<code>clear</code>, <code>style2</code>,
118
+ <code>bold</code>...), and most of the values that don't fall into
119
+ <em>that</em> bucket are synonyms for the top 20, like
120
+ <code>h1</code> and <code>pageheading</code> (presumably both used
121
+ for multi-level headers, which is handled by
122
+ <code>&lt;header></code> in HTML5), or <code>class="post"</code>
123
+
124
+ (handled by <code>&lt;article></code> in HTML5).</p>
125
+
126
+ <p>There are some interesting values that are widely used,
127
+ though. We found <code>class="breadcrumb"</code> in 34th position;
128
+ should HTML be extended to support breadcrumb-style navigation in
129
+ some way? Similarly, in 40th place we found
130
+ <code>class="price"</code>; should a <code>&lt;price></code>
131
+ element with, e.g., attributes for unambiguous specification of
132
+ currency, be considered for future versions of HTML? These probably
133
+ deserve a little more study.</p>
134
+
135
+ </div>
136
+ <div class="nav">
137
+ <ul>
138
+ <li><a rel="up" href="/">Google Code Home</a></li>
139
+ <li><a href="../index.html">Web Authoring Stats</a></li>
140
+ <li><a href="pages.html">Pages</a></li>
141
+ <li><a href="elements.html">Elements</a></li>
142
+
143
+ <li><a class="current" href="classes.html">Classes</a></li>
144
+ <li><a href="httpheaders.html">HTTP headers</a></li>
145
+ <li><a href="pageheaders.html">Page headers</a></li>
146
+ <li><a href="metadata.html">Metadata</a></li>
147
+ <li><a href="element-body.html">The <code>body</code> element</a></li>
148
+
149
+ <li><a href="text.html">Text elements</a></li>
150
+ <li><a href="tables.html">Table elements</a></li>
151
+ <li><a href="linkrels.html">Link relationships</a></li>
152
+ <li><a href="element-a.html">The <code>a</code> element</a></li>
153
+ <li><a href="element-img.html">The <code>img</code> element</a></li>
154
+
155
+ <li><a href="scripting.html">Scripting</a></li>
156
+ <li><a href="editors.html">Editors</a></li>
157
+ </ul>
158
+ </div>
159
+ <div class="footer">
160
+ <p>
161
+ &#x00A9;2006 Google -
162
+ <a href="http://www.google.com/">Home</a> -
163
+ <a href="http://www.google.com/jobs/">We're Hiring</a> -
164
+ <a href="http://www.google.com/privacy.html">Privacy Policy</a> -
165
+ <a href="http://www.google.com/terms_of_service.html">Terms of Service</a> -
166
+ <a href="mailto:coderesearch@google.com">Contact Us</a>
167
+
168
+ </p>
169
+ </div>
170
+ </body>
171
+ </html>
@@ -0,0 +1,199 @@
1
+ <html>
2
+ <head profile="http://gmpg.org/xfn/11 http://www.w3.org/2006/03/hcard http://microformats.org/wiki/hcalendar-profile">
3
+ <title>XML to JSONML Client-side Proxy</title>
4
+
5
+ <link href="http://feeds.feedburner.com/dominiek" rel="alternate" title="Articles Atom" type="application/atom+xml" />
6
+
7
+ <link href="http://dominiek.com/stream.rss" rel="alternate" title="Lifestream RSS" type="application/rss+xml" />
8
+ <link href="http://dominiek.com/stream.atom" rel="alternate" title="Lifestream Atom" type="application/atom+xml" />
9
+ <link href="/stylesheets/html.css?1231171270" media="screen" rel="stylesheet" type="text/css" />
10
+ <link href="/stylesheets/application.css?1231171270" media="screen" rel="stylesheet" type="text/css" />
11
+
12
+ <link href="/stylesheets/custom/dominiek.css?1230829845" media="screen" rel="stylesheet" type="text/css" />
13
+
14
+
15
+ <link href="/stylesheets/coderay.css?1231171270" media="screen" rel="stylesheet" type="text/css" />
16
+ <script src="/javascripts/prototype.js?1231171270" type="text/javascript"></script>
17
+ <script src="/javascripts/effects.js?1231171270" type="text/javascript"></script>
18
+ <script src="/javascripts/dragdrop.js?1231171270" type="text/javascript"></script>
19
+ <script src="/javascripts/controls.js?1231171270" type="text/javascript"></script>
20
+ <script src="/javascripts/application.js?1231171270" type="text/javascript"></script>
21
+ <meta name="generator" content="Kakuteru" />
22
+
23
+ <meta name="description" content="When integrating with other web services, there are often shortcomings in third-party API's. One of the most common ones I've had to deal with is the lack of JSON+callback support. To circumvent this problem, I wrote a tool that can use an API's XML calls to do the same trick. " />
24
+
25
+
26
+ <meta name="keywords" content="xml, json, jsonml, proxy, api, hack, convert, integration" />
27
+ <meta name="robots" content="index, follow" />
28
+ <meta name="GOOGLEBOT" content="index, follow" />
29
+ <meta name="MSSmartTagsPreventParsing" content="yes" />
30
+ <meta http-equiv="expires" content="3600" />
31
+
32
+
33
+ </head>
34
+
35
+ <body>
36
+ <div class="header">
37
+
38
+ <div class="inner">
39
+
40
+ <a href="/" class="title" rel="directory">Dominiek</a>
41
+
42
+ <span class="subtitle">web, technology and startups</span>
43
+
44
+ <div class="hide vcard">
45
+ <a class="fn org url" href="/19592-xml-to-jsonml-client-side-proxy">Dominiek ter Heide</a>
46
+ </div>
47
+ </div>
48
+ </div>
49
+
50
+
51
+ <div class="read page">
52
+ <abbr class="published" title="2009-01-01T21:13:31Z">
53
+ 4 days ago
54
+ </abbr>
55
+ <div class="share">
56
+
57
+ <a href="http://twitter.com/home/?status=Check+out%3A+http%3A%2F%2Fdominiek.kakuteru.com%2F19592-xml-to-jsonml-client-side-proxy" class="tweet_this">Tweet this</a>
58
+ <script type="text/javascript">
59
+ digg_url = 'http://dominiek.kakuteru.com/19592-xml-to-jsonml-client-side-proxy';
60
+ digg_skin = 'compact';
61
+ digg_window = 'new';
62
+ </script>
63
+ <script src="http://digg.com/tools/diggthis.js" type="text/javascript"></script>
64
+
65
+
66
+ <a href="http://www.addthis.com/bookmark.php" onclick="window.open('http://www.addthis.com/bookmark.php?wt=nw&pub=dominiek&url='+encodeURIComponent(location.href)+'&title='+encodeURIComponent(document.title), 'addthis', 'scrollbars=yes,menubar=no,width=620,height=520,resizable=yes,toolbar=no,location=no,status=no,screenX=200,screenY=100,left=200,top=100'); return false;" title="Bookmark and Share" target="_blank"><img src="http://s9.addthis.com/button1-addthis.gif" width="125" height="16" border="0" alt="Bookmark and Share" /></a>
67
+
68
+
69
+ </div>
70
+
71
+
72
+ <div class="hentry show article tag-xml tag-json tag-jsonml tag-proxy tag-api tag-hack tag-convert tag-integration" rel="articles">
73
+ <abbr class="published hide" title="2009-01-01T21:13:31Z"></abbr>
74
+ <div class="entry-content article">
75
+
76
+ <h1>XML to JSONML Client-side Proxy</h1>
77
+ <p id="super_paragraph"><p>When integrating with other web services, there are often shortcomings in third-party API&#8217;s. One of the most common ones I&#8217;ve had to deal with is the lack of JSON+callback support. To circumvent this problem, I wrote a tool that can use an API&#8217;s <span class="caps">XML</span> calls to do the same trick.</p>
78
+
79
+ <p>JSON+callback allows you to do loose integrations in Javascript, requiring no development on the server-side of things. This is really useful if you for example, quickly want to fetch Lastfm&#8217;s track information and render a player, like on <a href="http://dominiek.com/19478-trentem-ller-miss-you#disqus_thread">this Kakuteru page</a>. Lastfm didn&#8217;t support JSON+callback support in their <span class="caps">API</span> until recently. After a lot of <a href="http://www.last.fm/group/Last.fm+Web+Services/forum/21604/_/427670" title="including me">whining by developers</a>, they finally dadded support.</p>
80
+ <p>Still, services like Imeem, don&#8217;t support the <span class="caps">JSON</span> callback yet. So for those service, you can use this tool. Basically, it is a Adobe Flash based converter (written in ActionsScript 3) that converts the <span class="caps">XML</span> to a <a href="http://jsonml.org/"><span class="caps">JSONML</span></a> compatible Javascript Object (<span class="caps">JSON</span>).</p>
81
+
82
+ <p>All you have to do is put a <a href="http://github.com/dominiek/xml-to-json-proxy/tree/master/xml_json_proxy.swf">swf_to_json.swf</a> and a <a href="http://github.com/dominiek/xml-to-json-proxy/tree/master/xml_json_proxy.js">swf_to_json.js</a> file in your codebase, and use simple Javascript syntax to do remote calls:</p>
83
+ <table class="CodeRay"><tr>
84
+ <td class="line_numbers" title="click to toggle" onclick="with (this.firstChild.style) { display = (display == '') ? 'none' : '' }"><pre>1<tt>
85
+ </tt>2<tt>
86
+ </tt>3<tt>
87
+ </tt>4<tt>
88
+
89
+ </tt>5<tt>
90
+ </tt>6<tt>
91
+ </tt>7<tt>
92
+ </tt>8<tt>
93
+ </tt>9<tt>
94
+ </tt><strong>10</strong><tt>
95
+ </tt></pre></td>
96
+ <td class="code"><pre ondblclick="with (this.style) { overflow = (overflow == 'auto' || overflow == '') ? 'visible' : 'auto' }"> <span class="ta">&lt;script</span> <span class="an">type</span>=<span class="s"><span class="dl">&quot;</span><span class="k">text/javascript</span><span class="dl">&quot;</span></span> <span class="an">src</span>=<span class="s"><span class="dl">&quot;</span><span class="k">xml_json_proxy.js</span><span class="dl">&quot;</span></span><span class="ta">&gt;</span><span class="ta">&lt;/script&gt;</span><tt>
97
+
98
+ </tt> <span class="ta">&lt;script</span> <span class="an">type</span>=<span class="s"><span class="dl">&quot;</span><span class="k">text/javascript</span><span class="dl">&quot;</span></span><span class="ta">&gt;</span><tt>
99
+ </tt> function callback_on_error(code, message) {<tt>
100
+ </tt> alert(code + ': '+ message);<tt>
101
+ </tt> }<tt>
102
+ </tt> function callback_on_success(url, jsonml) {<tt>
103
+
104
+ </tt> alert(jsonml);<tt>
105
+ </tt> }<tt>
106
+ </tt> proxy = new XMLJSONProxy('error_callback');<tt>
107
+ </tt> <span class="ta">&lt;/script&gt;</span><tt>
108
+ </tt></pre></td>
109
+ </tr></table><p>Performing a <span class="caps">GET</span> call (<span class="caps">POST</span> support is yet to come):</p>
110
+
111
+ <table class="CodeRay"><tr>
112
+ <td class="line_numbers" title="click to toggle" onclick="with (this.firstChild.style) { display = (display == '') ? 'none' : '' }"><pre>1<tt>
113
+ </tt></pre></td>
114
+ <td class="code"><pre ondblclick="with (this.style) { overflow = (overflow == 'auto' || overflow == '') ? 'visible' : 'auto' }"> proxy.get('callback_on_success', 'http://url.of.call.xml/');<tt>
115
+ </tt></pre></td>
116
+ </tr></table><p>Check the <a href="http://github.com/dominiek/xml-to-json-proxy/tree/master"><span class="caps">XML</span> to <span class="caps">JSON</span> Github repository</a> for more documentation, example code and the source code.</p>
117
+
118
+ <p><em>Note: While developing this my stupid Flash <span class="caps">IDE</span> didn&#8217;t tell me that the crossdomain.xml was set to deny on video.google.com, so make sure that the crossdomain policy on the <span class="caps">API</span> side is set to open.</em></p></p>
119
+
120
+ </div>
121
+ <div class="attribution">
122
+
123
+ </div>
124
+ </div>
125
+
126
+ <div class="related_and_tags">
127
+
128
+ <div class="tags">
129
+ <label for="tags">tags</label> <a href="/tag/api" class="tag-api" rel="tag directory">api</a>, <a href="/tag/convert" class="tag-convert" rel="tag directory">convert</a>, <a href="/tag/hack" class="tag-hack" rel="tag directory">hack</a>, <a href="/tag/integration" class="tag-integration" rel="tag directory">integration</a>, <a href="/tag/json" class="tag-json" rel="tag directory">json</a>, <a href="/tag/jsonml" class="tag-jsonml" rel="tag directory">jsonml</a>, <a href="/tag/proxy" class="tag-proxy" rel="tag directory">proxy</a>, <a href="/tag/xml" class="tag-xml" rel="tag directory">xml</a>
130
+
131
+ </div>
132
+
133
+ </div>
134
+
135
+
136
+ <div class="related">
137
+ <h3>Related Content</h3>
138
+ <ul>
139
+
140
+ <li class="with_icon message"><a href="http://dominiek.com/420-cool-jsonml-is-exactly-what-i-needed-for-my-xml-to-json-flash-proxy-http-jsonml-org">Cool! JsonML is exactly what I needed for my XML-to-JSON Flash proxy. http://jsonml.org/</a> <!-- 3 tags matched --></li>
141
+
142
+ <li class="with_icon article"><a href="http://dominiek.com/107-radical-transparency-and-web-integration">Radical Transparency and Web Integration</a> <!-- 2 tags matched --></li>
143
+
144
+
145
+ <li class="with_icon article"><a href="http://dominiek.com/121-next-opportunities-in-seamless-web-integration">Next Opportunities in Seamless Web Integration</a> <!-- 2 tags matched --></li>
146
+
147
+ <li class="with_icon article"><a href="http://dominiek.com/131-actual-contact-finder-using-the-social-graph-api">Actual Contact Finder using the Social Graph API</a> <!-- 2 tags matched --></li>
148
+
149
+ <li class="with_icon message"><a href="http://dominiek.com/19928-today-i-finished-my-xml-to-jsonml-client-side-proxy-http-tinyurl-com-7k4728">Today I finished my XML to JSONML Client-side Proxy. http://tinyurl.com/7k4728</a> <!-- 2 tags matched --></li>
150
+
151
+ </ul>
152
+ </div>
153
+
154
+
155
+ <a name="disqus_thread"/>
156
+
157
+ <div class="discussion">
158
+ <div id="disqus_thread"></div>
159
+ <noscript><a href="http://dominiek.disqus.com/?url=ref">View the discussion thread.</a></noscript>
160
+ <a href="http://disqus.com" class="dsq-brlink">blog comments powered by <span class="logo-disqus">Disqus</span></a>
161
+
162
+ </div>
163
+
164
+ </div>
165
+
166
+ <div class="clear"></div>
167
+
168
+ <div class="about">
169
+ <div class="inner">
170
+ <h2>About</h2>
171
+ <p>I'm a 22 year old Web Developer who is currently engaged in RubyOnRails consulting.
172
+ Apart from obsessing about many technology related topics, I enjoy traveling and international life.
173
+ In the coming months I intend to boost up my entrepreneurial activities, so stay tuned!</p>
174
+ <a rel="license" class="license" href="http://creativecommons.org/licenses/by/3.0/nl/"><img alt="Creative Commons License" style="border-width:0" src="http://i.creativecommons.org/l/by/3.0/nl/88x31.png" /></a>
175
+ <p>All content on this blog is available under the <a href="http://creativecommons.org/licenses/by/3.0/" rel="license">Creative Commons Attribution 3.0 License</a>. Dominiek.com is running <a href="http://github.com/dominiek/kakuteru/tree">Kakuteru</a> a new Semantic-Web enabled lifestreamer. Design and interaction inspired by <a href="http://yongfook.com/">Yonfook's Sweetcron</a>. Most icons used are by <a href="http://sweetie.sublink.ca/">Joseph North</a>.</p>
176
+
177
+ <script type="text/javascript">
178
+ var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
179
+ document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
180
+ </script>
181
+ <script type="text/javascript">
182
+ var pageTracker = _gat._getTracker("UA-2485654-2");
183
+ pageTracker._trackPageview();
184
+ </script>
185
+ <div class="generator attribution">
186
+ <a href="http://dominiek.kakuteru.com/">dominiek.kakuteru.com</a> is powered by <a href="http://kakuteru.com/">Kakuteru</a>, <a href="http://friendfeed.com/">Friendfeed</a> and <a href="http://zementa.com/">Zemanta</a>.
187
+ </div>
188
+
189
+ </div>
190
+ </div>
191
+
192
+ <script type="text/javascript" src="http://disqus.com/forums/dominiek/embed.js"></script>
193
+ <script type="text/javascript">
194
+ var thread = $('disqus_thread');
195
+ thread.insertBefore($('dsq-comments-count'), thread.firstChild);
196
+ </script>
197
+
198
+ </body>
199
+ </html>