PageRenderTime 73ms CodeModel.GetById 27ms RepoModel.GetById 0ms 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. 

  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en-us">
    3. 

  3. <head>
    4. 

  4.    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    5. 

  5.    <title>Web Graffiti for Self-Expression</title>
    6. 

  6.    <meta name="author" content="" />
    7. 

  7. 

  8.    <!-- syntax highlighting CSS -->
    9. 

  9.    <link rel="stylesheet" href="/css/syntax.css" type="text/css" />
    10. 

  10. 

  11.    <!-- Homepage CSS -->
    12. 

  12.    <link rel="stylesheet" href="/css/screen.css" type="text/css" media="screen, projection" />
    13. 

  13. 

  14.    <!-- Typekit -->
    15. 

  15.    <!-- <script type="text/javascript" src="http://use.typekit.com/qai1onp.js"></script>
    16. 

  16.    <script type="text/javascript">try{Typekit.load();}catch(e){}</script> -->
    17. 

  17.     
    18. 

  18.    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
    19. 

  19.    
    20. 

  20.    <script type="text/javascript">
    21. 

  21.    	$(document).ready(function() {
    22. 

  22.    		$('.external').attr('target', '_blank');
    23. 

  23.    	});
    24. 

  24.    </script>
    25. 

  25.    
    26. 

  26. </head>
    27. 

  27. <body>
    28. 

  28. 

  29. <!-- ClickTale Top part -->
    30. 

  30. <script type="text/javascript">
    31. 

  31. var WRInitTime=(new Date()).getTime();
    32. 

  32. </script>
    33. 

  33. <!-- ClickTale end of Top part -->
    34. 

  34. 

  35. <div id="_page" class="site">
    36. 

  36. 	<!-- <div id="menuBg"></div> -->
    37. 

  37.   <div id="menu" style="width:200px;float:left;">
    38. 

  38. 		<div class="homeTitle title"><a href="/">Remix Interactions</a></div>
    39. 

  39.     <div class="title process_link"><a href="/process">process</a></div>
    40. 

  40. 		<div class="title ideas_link"><a href="/ideas">ideas</a></div>
    41. 

  41. 		<div class="title context_link"><a href="/context">context</a></div>
    42. 

  42. 		<!-- <span class="title manifesto_link"><a href="/manifesto">_manifesto</a></span> -->
    43. 

  43.   </div>         
    44. 

  44.   
    45. 

  45.   <div id="sideBar">
    46. 

  46.   	<div class="section">
    47. 

  47. 			<div class="title">tags</div>
    48. 

  48. 			
    49. 

  49. 			
    50. 

  50. 			<span class="tag"><a href="/tags/Play">Play</a></span>
    51. 

  51. 			
    52. 

  52. 			
    53. 

  53. 			
    54. 

  54. 			<span class="tag"><a href="/tags/Gen Y">Gen Y</a></span>
    55. 

  55. 			
    56. 

  56. 			
    57. 

  57. 			
    58. 

  58. 			<span class="tag"><a href="/tags/Swear">Swear</a></span>
    59. 

  59. 			
    60. 

  60. 			
    61. 

  61. 			
    62. 

  62. 			<span class="tag"><a href="/tags/Web Standards">Web Standards</a></span>
    63. 

  63. 			
    64. 

  64. 			
    65. 

  65. 			
    66. 

  66. 			<span class="tag"><a href="/tags/Corporation">Corporation</a></span>
    67. 

  67. 			
    68. 

  68. 			
    69. 

  69. 			
    70. 

  70. 			<span class="tag"><a href="/tags/Surrealism">Surrealism</a></span>
    71. 

  71. 			
    72. 

  72. 			
    73. 

  73. 			
    74. 

  74. 			<span class="tag"><a href="/tags/Graffiti">Graffiti</a></span>
    75. 

  75. 			
    76. 

  76. 			
    77. 

  77. 			
    78. 

  78. 			<span class="tag"><a href="/tags/Reversing">Reversing</a></span>
    79. 

  79. 			
    80. 

  80. 			
    81. 

  81. 			
    82. 

  82. 			<span class="tag"><a href="/tags/Ad">Ad</a></span>
    83. 

  83. 			
    84. 

  84. 			
    85. 

  85. 			
    86. 

  86. 			<span class="tag"><a href="/tags/Hack">Hack</a></span>
    87. 

  87. 			
    88. 

  88. 			
    89. 

  89. 			
    90. 

  90. 			<span class="tag"><a href="/tags/lit review">lit review</a></span>
    91. 

  91. 			
    92. 

  92. 			
    93. 

  93. 			
    94. 

  94. 			<span class="tag"><a href="/tags/Html Canvas">Html Canvas</a></span>
    95. 

  95. 			
    96. 

  96. 			
    97. 

  97. 			
    98. 

  98. 			<span class="tag"><a href="/tags/dirty word">dirty word</a></span>
    99. 

  99. 			
    100. 

  100. 			
    101. 

  101. 			
    102. 

  102. 			<span class="tag"><a href="/tags/HTML5 Canvas">HTML5 Canvas</a></span>
    103. 

  103. 			
    104. 

  104. 			
    105. 

  105. 			
    106. 

  106. 			<span class="tag"><a href="/tags/Facebook">Facebook</a></span>
    107. 

  107. 			
    108. 

  108. 			
    109. 

  109. 			
    110. 

  110. 			<span class="tag"><a href="/tags/Kid">Kid</a></span>
    111. 

  111. 			
    112. 

  112. 			
    113. 

  113. 			
    114. 

  114. 			<span class="tag"><a href="/tags/Processing.js">Processing.js</a></span>
    115. 

  115. 			
    116. 

  116. 			
    117. 

  117. 			
    118. 

  118. 			<span class="tag"><a href="/tags/Google">Google</a></span>
    119. 

  119. 			
    120. 

  120. 			
    121. 

  121. 			
    122. 

  122. 			<span class="tag"><a href="/tags/Browser Extension">Browser Extension</a></span>
    123. 

  123. 			
    124. 

  124. 			
    125. 

  125. 			
    126. 

  126. 			<span class="tag"><a href="/tags/Web">Web</a></span>
    127. 

  127. 			
    128. 

  128. 			
    129. 

  129. 			
    130. 

  130. 			<span class="tag"><a href="/tags/Code Violation">Code Violation</a></span>
    131. 

  131. 			
    132. 

  132. 			
    133. 

  133. 			
    134. 

  134. 			<span class="tag"><a href="/tags/swear">swear</a></span>
    135. 

  135. 			
    136. 

  136. 			
    137. 

  137. 			
    138. 

  138. 			<span class="tag"><a href="/tags/Privacy">Privacy</a></span>
    139. 

  139. 			
    140. 

  140. 			
    141. 

  141. 			
    142. 

  142. 			<span class="tag"><a href="/tags/Quote">Quote</a></span>
    143. 

  143. 			
    144. 

  144. 			
    145. 

  145. 		</div>
    146. 

  146. 		<div class="section">
    147. 

  147. 			<div class="title"><span class="contactType">work</span><span><a href="http://yuinchien.com" target="_blank">yuinchien.com</a></span></div>
    148. 

  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. 

  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. 

  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. 

  151. 	  </div>
    152. 

  152.   </div>  
    153. 

  153. 

  154.   <div id="ideas" class="category">
    155. 

  155. 	
    156. 

  156. 	<div class="posts">
    157. 

  157. 				
    158. 

  158. 		<div class="post_container">
    159. 

  159. 

  160.     	<div class="post">
    161. 

  161.        	<div class="titleBar">
    162. 

  162.        		<a href="">Web Graffiti for Self-Expression</a>
    163. 

  163.   				<span class="date">22 Nov 2010</span>
    164. 

  164.        	</div>
    165. 

  165.   			<div class="content">
    166. 

  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. 

  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. 

  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. 

  169. <p>UI is a significant element of webpages, and with the html5 Canvas, essentially we can draw on the it.</p>
    170. 

  170.   			</div>
    171. 

  171.   			<div class="tags clearfix">
    172. 

  172.   				
    173. 

  173.   				<span class="tag"><a href="/tags/Gen Y">Gen Y</a></span>
    174. 

  174.   				
    175. 

  175.   				<span class="tag"><a href="/tags/Graffiti">Graffiti</a></span>
    176. 

  176.   				
    177. 

  177.   				<span class="tag"><a href="/tags/Browser Extension">Browser Extension</a></span>
    178. 

  178.   				
    179. 

  179.   				<span class="tag"><a href="/tags/HTML5 Canvas">HTML5 Canvas</a></span>
    180. 

  180.   				
    181. 

  181.   			</div>
    182. 

  182. 			</div>
    183. 

  183. 			
    184. 

  184. 			<!-- commenting system-->
    185. 

  185.       <div id="disqus_thread"></div>
    186. 

  186.           <script type="text/javascript">
    187. 

  187.               /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
    188. 

  188.               var disqus_shortname = 'cloud9-github-com'; // required: replace example with your forum shortname
    189. 

  189.               var disqus_developer = 1; // developer mode is on
    190. 

  190.             
    191. 

  191.               // The following are highly recommended additional parameters. Remove the slashes in front to use.
    192. 

  192.               // var disqus_identifier = 'unique_dynamic_id_1234';
    193. 

  193.               // var disqus_url = 'http://example.com/permalink-to-page.html';
    194. 

  194. 

  195.               /* * * DON'T EDIT BELOW THIS LINE * * */
    196. 

  196.               (function() {
    197. 

  197.                   var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
    198. 

  198.                   dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
    199. 

  199.                   (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
    200. 

  200.               })();
    201. 

  201.           </script>
    202. 

  202.           <!-- <noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
    203. 

  203.           <a href="http://disqus.com" class="dsq-brlink">blog comments powered by <span class="logo-disqus">Disqus</span></a> -->
    204. 

  204.       
    205. 

  205.   	</div>
    206. 

  206.   </div>
    207. 

  207. 

  208. </div>
    209. 

  209. 

  210. 

  211.   
    212. 

  212. 

  213.   
    214. 

  214. </div> 
    215. 

  215. 

  216. <!-- Comment Count -->
    217. 

  217. <script type="text/javascript">
    218. 

  218.     /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
    219. 

  219.     var disqus_shortname = 'cloud9-github-com'; // required: replace example with your forum shortname
    220. 

  220.     var disqus_developer = 1; // developer mode is on
    221. 

  221.     
    222. 

  222.     /* * * DON'T EDIT BELOW THIS LINE * * */
    223. 

  223.     (function () {
    224. 

  224.         var s = document.createElement('script'); s.async = true;
    225. 

  225.         s.type = 'text/javascript';
    226. 

  226.         s.src = 'http://disqus.com/forums/' + disqus_shortname + '/count.js';
    227. 

  227.         (document.getElementsByTagName('HEAD')[0] || document.getElementsByTagName('BODY')[0]).appendChild(s);
    228. 

  228.     }());
    229. 

  229. </script>
    230. 

  230. <!-- Comment Count End -->
    231. 

  231. 

  232. <!-- ClickTale Bottom part -->
    233. 

  233. <div id="ClickTaleDiv" style="display: none;"></div>
    234. 

  234. <script type="text/javascript">
    235. 

  235. if(document.location.protocol!='https:')
    236. 

  236.   document.write(unescape("%3Cscript%20src='http://s.clicktale.net/WRb.js'%20type='text/javascript'%3E%3C/script%3E"));
    237. 

  237. </script>
    238. 

  238. <script type="text/javascript">
    239. 

  239. if(typeof ClickTale=='function') ClickTale(206,0.3,"www03");
    240. 

  240. </script>
    241. 

  241. <!-- ClickTale end of Bottom part -->
    242. 

  242. 

  243. <!-- Google Analytics -->
    244. 

  244. <script type="text/javascript">
    245. 

  245. var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
    246. 

  246. document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
    247. 

  247. </script>
    248. 

  248. <script type="text/javascript">
    249. 

  249. var pageTracker = _gat._getTracker("UA-6016902-1");
    250. 

  250. pageTracker._trackPageview();
    251. 

  251. </script>
    252. 

  252. <!-- Google Analytics end -->
    253. 

  253. 

  254. </body>
    255. 

  255. </html>
    256. 

  256.