PageRenderTime 41ms CodeModel.GetById 27ms app.highlight 9ms RepoModel.GetById 1ms app.codeStats 0ms

/_site/ideas/2010/11/22/Web-Graffiti/index.html

https://github.com/yuinchien/cloud9-github-com-repo
HTML | 255 lines | 131 code | 106 blank | 18 comment | 0 complexity | abec04e60e5e08a46137e406f478dd9a MD5 | raw file
  1<!DOCTYPE html>
  2<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en-us">
  3<head>
  4   <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  5   <title>Web Graffiti for Self-Expression</title>
  6   <meta name="author" content="" />
  7
  8   <!-- syntax highlighting CSS -->
  9   <link rel="stylesheet" href="/css/syntax.css" type="text/css" />
 10
 11   <!-- Homepage CSS -->
 12   <link rel="stylesheet" href="/css/screen.css" type="text/css" media="screen, projection" />
 13
 14   <!-- Typekit -->
 15   <!-- <script type="text/javascript" src="http://use.typekit.com/qai1onp.js"></script>
 16   <script type="text/javascript">try{Typekit.load();}catch(e){}</script> -->
 17    
 18   <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
 19   
 20   <script type="text/javascript">
 21   	$(document).ready(function() {
 22   		$('.external').attr('target', '_blank');
 23   	});
 24   </script>
 25   
 26</head>
 27<body>
 28
 29<!-- ClickTale Top part -->
 30<script type="text/javascript">
 31var WRInitTime=(new Date()).getTime();
 32</script>
 33<!-- ClickTale end of Top part -->
 34
 35<div id="_page" class="site">
 36	<!-- <div id="menuBg"></div> -->
 37  <div id="menu" style="width:200px;float:left;">
 38		<div class="homeTitle title"><a href="/">Remix Interactions</a></div>
 39    <div class="title process_link"><a href="/process">process</a></div>
 40		<div class="title ideas_link"><a href="/ideas">ideas</a></div>
 41		<div class="title context_link"><a href="/context">context</a></div>
 42		<!-- <span class="title manifesto_link"><a href="/manifesto">_manifesto</a></span> -->
 43  </div>         
 44  
 45  <div id="sideBar">
 46  	<div class="section">
 47			<div class="title">tags</div>
 48			
 49			
 50			<span class="tag"><a href="/tags/Play">Play</a></span>
 51			
 52			
 53			
 54			<span class="tag"><a href="/tags/Gen Y">Gen Y</a></span>
 55			
 56			
 57			
 58			<span class="tag"><a href="/tags/Swear">Swear</a></span>
 59			
 60			
 61			
 62			<span class="tag"><a href="/tags/Web Standards">Web Standards</a></span>
 63			
 64			
 65			
 66			<span class="tag"><a href="/tags/Corporation">Corporation</a></span>
 67			
 68			
 69			
 70			<span class="tag"><a href="/tags/Surrealism">Surrealism</a></span>
 71			
 72			
 73			
 74			<span class="tag"><a href="/tags/Graffiti">Graffiti</a></span>
 75			
 76			
 77			
 78			<span class="tag"><a href="/tags/Reversing">Reversing</a></span>
 79			
 80			
 81			
 82			<span class="tag"><a href="/tags/Ad">Ad</a></span>
 83			
 84			
 85			
 86			<span class="tag"><a href="/tags/Hack">Hack</a></span>
 87			
 88			
 89			
 90			<span class="tag"><a href="/tags/lit review">lit review</a></span>
 91			
 92			
 93			
 94			<span class="tag"><a href="/tags/Html Canvas">Html Canvas</a></span>
 95			
 96			
 97			
 98			<span class="tag"><a href="/tags/dirty word">dirty word</a></span>
 99			
100			
101			
102			<span class="tag"><a href="/tags/HTML5 Canvas">HTML5 Canvas</a></span>
103			
104			
105			
106			<span class="tag"><a href="/tags/Facebook">Facebook</a></span>
107			
108			
109			
110			<span class="tag"><a href="/tags/Kid">Kid</a></span>
111			
112			
113			
114			<span class="tag"><a href="/tags/Processing.js">Processing.js</a></span>
115			
116			
117			
118			<span class="tag"><a href="/tags/Google">Google</a></span>
119			
120			
121			
122			<span class="tag"><a href="/tags/Browser Extension">Browser Extension</a></span>
123			
124			
125			
126			<span class="tag"><a href="/tags/Web">Web</a></span>
127			
128			
129			
130			<span class="tag"><a href="/tags/Code Violation">Code Violation</a></span>
131			
132			
133			
134			<span class="tag"><a href="/tags/swear">swear</a></span>
135			
136			
137			
138			<span class="tag"><a href="/tags/Privacy">Privacy</a></span>
139			
140			
141			
142			<span class="tag"><a href="/tags/Quote">Quote</a></span>
143			
144			
145		</div>
146		<div class="section">
147			<div class="title"><span class="contactType">work</span><span><a href="http://yuinchien.com" target="_blank">yuinchien.com</a></span></div>
148			<div class="title"><span class="contactType">email</span><span><a href="mailto:tinyuin.chien@gmail.com" target="_blank">tinyuin.chien@gmail.com</a></span></div>
149			<div class="title"><span class="contactType">code</span><span><a href="http://github.com/cloud9" target="_blank">github.com/cloud9</a></span></div>
150			<div class="title"><span class="contactType">photo</span><span><a href="http://www.flickr.com/photos/yuinchien" target="_blank">flickr.com/photos/yuinchien</a></span></div>
151	  </div>
152  </div>  
153
154  <div id="ideas" class="category">
155	
156	<div class="posts">
157				
158		<div class="post_container">
159
160    	<div class="post">
161       	<div class="titleBar">
162       		<a href="">Web Graffiti for Self-Expression</a>
163  				<span class="date">22 Nov 2010</span>
164       	</div>
165  			<div class="content">
166  				<p><strong>Can virtual space provide corners and walls for people to comment, to create, to shout, to be heard, to play, and to share, but in other forms of blogging or twitter feeds?</strong></p>
167<p>I think browser extension and html5 canvas is good platform to start, for it&#8217;s ability to easily integrated with existing browser, and access to the web.</p>
168<p><strong>What does it mean to do graffiti or vandalize in the browser on the web page, what are the affordances of webpages?</strong></p>
169<p>UI is a significant element of webpages, and with the html5 Canvas, essentially we can draw on the it.</p>
170  			</div>
171  			<div class="tags clearfix">
172  				
173  				<span class="tag"><a href="/tags/Gen Y">Gen Y</a></span>
174  				
175  				<span class="tag"><a href="/tags/Graffiti">Graffiti</a></span>
176  				
177  				<span class="tag"><a href="/tags/Browser Extension">Browser Extension</a></span>
178  				
179  				<span class="tag"><a href="/tags/HTML5 Canvas">HTML5 Canvas</a></span>
180  				
181  			</div>
182			</div>
183			
184			<!-- commenting system-->
185      <div id="disqus_thread"></div>
186          <script type="text/javascript">
187              /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
188              var disqus_shortname = 'cloud9-github-com'; // required: replace example with your forum shortname
189              var disqus_developer = 1; // developer mode is on
190            
191              // The following are highly recommended additional parameters. Remove the slashes in front to use.
192              // var disqus_identifier = 'unique_dynamic_id_1234';
193              // var disqus_url = 'http://example.com/permalink-to-page.html';
194
195              /* * * DON'T EDIT BELOW THIS LINE * * */
196              (function() {
197                  var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
198                  dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
199                  (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
200              })();
201          </script>
202          <!-- <noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
203          <a href="http://disqus.com" class="dsq-brlink">blog comments powered by <span class="logo-disqus">Disqus</span></a> -->
204      
205  	</div>
206  </div>
207
208</div>
209
210
211  
212
213  
214</div> 
215
216<!-- Comment Count -->
217<script type="text/javascript">
218    /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
219    var disqus_shortname = 'cloud9-github-com'; // required: replace example with your forum shortname
220    var disqus_developer = 1; // developer mode is on
221    
222    /* * * DON'T EDIT BELOW THIS LINE * * */
223    (function () {
224        var s = document.createElement('script'); s.async = true;
225        s.type = 'text/javascript';
226        s.src = 'http://disqus.com/forums/' + disqus_shortname + '/count.js';
227        (document.getElementsByTagName('HEAD')[0] || document.getElementsByTagName('BODY')[0]).appendChild(s);
228    }());
229</script>
230<!-- Comment Count End -->
231
232<!-- ClickTale Bottom part -->
233<div id="ClickTaleDiv" style="display: none;"></div>
234<script type="text/javascript">
235if(document.location.protocol!='https:')
236  document.write(unescape("%3Cscript%20src='http://s.clicktale.net/WRb.js'%20type='text/javascript'%3E%3C/script%3E"));
237</script>
238<script type="text/javascript">
239if(typeof ClickTale=='function') ClickTale(206,0.3,"www03");
240</script>
241<!-- ClickTale end of Bottom part -->
242
243<!-- Google Analytics -->
244<script type="text/javascript">
245var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
246document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
247</script>
248<script type="text/javascript">
249var pageTracker = _gat._getTracker("UA-6016902-1");
250pageTracker._trackPageview();
251</script>
252<!-- Google Analytics end -->
253
254</body>
255</html>