root/websites/twicli/index.en.html @ 35866

Revision 35866, 7.2 kB (checked in by NeoCat, 5 years ago)

add description, supress post 140+ letters, change some colors

Line 
1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
2<html lang="en">
3<head>
4<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
5<meta http-equiv="Content-Script-Type" content="text/javascript">
6<meta name="description" content="twicli is a web browser-based Twitter client. No need for installation. Automatically fetches timeline, and show with cool animation.">
7<title>twicli - A Web Browser-Based Lightweight Twitter Client</title>
8<style type="text/css"><!--
9body { background-color: #115; margin: 0; padding: 0; }
10.whole { width: 800px; padding: 20px; margin: 0; background-color: #fff; font-size: 90%; }
11.launch { margin-left: 100px; padding: 10px; text-align: center; color: #00f; background-color: #cfc; border: 2px solid #393; width: 200px; font-size: large; }
12.button { cursor:pointer; }
13li { margin: 4px; }
14h1 { border-bottom: solid 2px red; }
15h2 { border-left: solid 1.2em #cf6; padding-left: 4px; }
16h3 { border-left: solid 1.2em #fc0; padding-left: 4px; }
17img { border: none; }
18.language_selection { float:left; margin-left:700px;}
19--></style>
20</head>
21<body>
22<a class="language_selection" href="index.html">Japanese</a>
23<div class="whole">
24<h1><img alt="twicli" src="icon.png" width="32" height="32"> twicli</h1>
25<a href="http://delicious.com/save" onclick="window.open('http://delicious.com/save?v=5&amp;noui&amp;jump=close&amp;url='+encodeURIComponent(location.href)+'&amp;title='+encodeURIComponent(document.title), 'delicious','toolbar=no,width=550,height=550'); return false;"><img src="http://static.delicious.com/img/delicious.small.gif" height="12" width="12" alt="Delicious"> Bookmark this on Delicious</a>
26<table><tr><td>
27<p>
28twicli is a browser-based Twitter client.
29<ul>
30<li>No need for installation. All you need is a Web browser.
31<li>Automatically fetches timeline, and show with cool animation.
32<li>Use cross domain JavaScript to access Twitter directly (no server needed), so your password is sent to Twitter only.
33</ul>
34
35<p>
36Useful when you are in an Internet cafe, doing something else while viewing Twitter timeline.<br>
37Works on Firefox, Safari, Opera, IE8 at the moment, as well as
38Safari on iPhone/iPod touch<br>
39Works on IE7 too, but some parts aren't displayed properly.<br>
40<div class="launch"><a href="javascript:void window.open('http://www.geocities.jp/twicli/twicli.html', 'twicli', 'width=280,height=600,menubar=no,toolbar=no,scrollbars=yes,location=no,resizable=yes')">Launch twicli</a></div>
41</td><td>
42<img alt="screenshot" width="331" height="478" src="usage1.png" align="right">
43</td></tr></table>
44
45<h2>Usage</h2>
46<h3>Launch</h3>
47Just click the link above, or run it as a bookmarklet.<br>
48If you get asked for authorization, check if the origin is really "twitter.com", then enter your Twitter account/password.<br><br>
49Be careful not to hit <b>API request limit (150 requests per hour)</b> by clicking too much ^^;
50</p>
51
52<h3>How to Use</h3>
53<table width="100%"><tr>
54<td width="40"><img alt="prev" onClick="go(-1)" src="left.png" class="button"></td>
55<td align="center"><img alt="usage" id="usage" width="600" height="480" src="usage2.en.png"></td>
56<td width="40"><img alt="next" onClick="go(1)" src="right.png" class="button"></td>
57</tr></table>
58<script type="text/javascript">
59var i = 0;
60function go(d) {
61        i = (i + d + 4) % 4;
62        var usage = document.getElementById("usage");
63        usage.width = [600,600,480,620][i];
64        usage.height = [480,480,480,710][i];
65        usage.src = "usage"+(i+2)+".en.png";
66}
67</script>
68<img alt="usage" src="usage2.en.png" width="1" height="1">
69<img alt="usage" src="usage3.en.png" width="1" height="1">
70<img alt="usage" src="usage4.en.png" width="1" height="1">
71<img alt="usage" src="usage5.en.png" width="1" height="1">
72
73<h2>Customize</h2>
74<h3>User Stylesheet</h3>
75You can add your own CSS in "user stylesheet" section of the "+" tab. For example;
76<ul>
77<li>to hide user icons : <tt> .uicon { display: none; } </tt>
78<li>wider lines : <tt> .status { line-height: 1.5; } </tt>
79</ul>
80
81<h3>Plugins</h3>
82You can register plugins by setting them at the "Preferences" in the "+" tab.<br>
83Currently, there are plugins below:
84<ul>
85<li><b>regexp.js</b> : Add a tab that extracts timeline that has specific keywords, ID, etc. <a href="http://d.hatena.ne.jp/NeoCat/20090101">Detail(in Japanese)</a>
86<li><b>lists.js</b> : Add a tab that shows lists you following. Specify the name of lists to make tab in "+" tab.
87<li><b>outputz.js</b> : Count how many letters you tweet, and send it to <a href="http://outputz.com/">Outputz</a>.
88<li><b>search.js</b> : Add keyword search by <a href="http://search.twitter.com/">Twitter Search</a> to the "+" tab.
89<li><b>search2.js</b> : Add keyword search by <a href="http://pcod.no-ip.org/yats/">twitter search(yats)</a> to the "+" tab.
90<li><b>favotter.js</b> : Indicate latest popular favorited tweets like <span style="background-color:#6fc; color:#00c;">[fav:3]</span>. Thanks to <a href="http://favotter.matope.com/">Favotter</a>.
91<li><b>followers.js</b> : Colorize tweets of users that you don't follow in blue. To use this, you need to fetch the list of followers by clicking the "Renew" button at the "Color followers" section.
92<li><b>sound.js</b> : Play sound when updating timeline/reply. Not registedred as default.
93<li><b>resolve_url.js</b> : Replace short URLs with the originals in the timeline. (created by <a href="http://twitter.com/edvakf">@edvakf</a>)
94<li><b>shorten_url.js</b> : Typing a URL in the text area followed by three semicolons (;;;) makes a shortened URL. (created by <a href="http://twitter.com/edvakf">@edvakf</a>)
95</ul>
96
97<h2>FAQ</h2>
98<ul>
99<li><b>How to hide tweet which contains specified kerwords?</b><blockquote> => Write "-::keyword:1" into "Pickup Pattern" in the "+" tab.</blockquote></li>
100<li><b>My tweets are sometimes lost …</b><blockquote> => Twitter may be too crowded. Try writing just "r" and hit enter to re-post your previous tweet.</blockquote></li>
101<li><b>Appearance of this page is poor ...</b><blockquote> => Because of displaying many posts at once, and my laziness .... There are some guys publishing stylesheets for twicli. Your proposal is also appreciated. :-)</blockquote></li>
102</ul>
103
104<h2>Source</h2>
105"twicli" is developed at <a href="http://coderepos.org/share/browser/websites/twicli/">CodeRepos</a> under <a href="LICENSE.txt">MIT license</a>.
106<p><a href="http://coderepos.org/share/browser/websites/twicli/twicli.html">twicli.html</a> is the main file (HTML+CSS+JavaScript), others are plugins and images.</p>
107<p>Please report any bugs/wishes to <a href="http://twitter.com/NeoCat">@NeoCat</a>.</p>
108
109<h2>Links <small><small>(all in Japanese)</small></small></h2>
110<ul>
111<li><a href="http://d.hatena.ne.jp/NeoCat/20080819/1219133294">Development Memo</a>
112<li><a href="http://d.hatena.ne.jp/NeoCat/20080819/1219133294">About development of Plugins</a>
113<li><a href="http://d.hatena.ne.jp/NeoCat/20081121/1227282584">About Outputz plugin</a>
114<li><a href="http://d.hatena.ne.jp/NeoCat/20090101/1230838882">About Regexp plugin(1/2)</a>
115<li><a href="http://d.hatena.ne.jp/NeoCat/20090101/1230913660">About Regexp plugin(2/2)</a>
116<li><a href="http://d.hatena.ne.jp/NeoCat/20090824/1251125679">About Sound plugin</a>
117<li><a href="http://d.hatena.ne.jp/NeoCat/20091101/1257088158">About Lists plugin</a>
118</ul>
119
120<h2>Author</h2>
121<a href="http://twitter.com/NeoCat">@NeoCat</a>
122
123</div>
124</body>
125</html>
Note: See TracBrowser for help on using the browser.