47fd270958f5b8c0c12d85312530db4ac25e08db
[hermes] / www / index.html
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2 <!--
3 hermes 1.0 by tim@samoff.com
4 http://samoff.com
5 -->
6 <html xmlns="http://www.w3.org/1999/xhtml">
7 <head>
8 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
9 <title>Hermes: Contacts Delivered</title>
10 <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
11 <link rel="stylesheet" type="text/css" href="reset.css"/>
12 <link rel="stylesheet" type="text/css" href="hermes.css"/>
13
14 <script src="js/jquery-1.3.1.min.js" type="text/javascript"></script>
15 <script src="js/jquery.corner.js" type="text/javascript"></script>
16 <script src="js/jquery.juitter.js" type="text/javascript"></script>
17 <script src="js/system.js" type="text/javascript"></script>
18
19 <script type="text/javascript">
20
21 $(document).ready(function() {
22     // Rounded Corners
23     $("div#content,div#devmenu").corner("round");
24
25         //Default Tab Action
26         $(".tab_content").hide(); //Hide all content
27         $("ul.tabs li:first").addClass("active").show(); //Activate first tab
28         $(".tab_content:first").show(); //Show first tab content
29         
30         //onClick Tab Event
31         $("ul.tabs li").click(function() {
32                 $("ul.tabs li").removeClass("active"); //Remove any "active" class
33                 $(this).addClass("active"); //Add "active" class to selected tab
34                 $(".tab_content").hide(); //Hide all tab content
35                 var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
36                 $(activeTab).fadeIn(); //Fade in the active content
37                 return false;
38         });
39 });
40 </script>
41
42 </head>
43 <body>
44 <!-- Brand -->
45 <div>
46     <img src="ui/bg.jpg" class="bg" alt="" />
47 </div>
48
49 <div id="header">
50     <h1><a href="index.htm">Hermes</a></h1>
51     <img src="ui/hermes-logo.png" alt="Hermes" class="logo" />
52
53     <!-- Tab Navigation -->
54     <ul class="tabs">
55         <li><a href="#tab1">About Hermes</a></li>
56         <li><a href="#tab2">What it does</a></li>
57         <li><a href="#tab3">Get it</a></li>
58         <li class="last"><a href="#tab4">Development</a></li>
59     </ul>
60 </div>
61
62 <!-- Page Content -->
63 <div id="content">
64     <div class="tab_container">
65
66     <!-- Tab #1 -->
67     <div id="tab1" class="tab_content">
68         <p>So, you've copied an address book full of contacts to your new N900. Unfortunately, the lovely interface and gorgeous screen are completely let down by the fact that all you see are generic, blue men as you contacts' pictures. Contacting people via the <em>Phone</em> or <em>Conversations</em> just doesn't seem very slick.</p>
69         <p>With Hermes, you will enrich your Maemo 5 address book with photos, birthdates, homepage addresses, and more from online services such as Facebook and Twitter.</p>
70
71         <h2>Latest News</h2>
72
73         <!-- Twitter Content -->
74         <div id="tweets"></div>
75     </div>
76     
77     <!-- Tab #2 -->
78     <div id="tab2" class="tab_content">
79
80         <!-- YouTube Video -->
81         <object type="application/x-shockwave-flash" style="width:560px; height:340px;" data="http://www.youtube.com/v/G_6ZC8n9nKs&amp;hl=en&amp;fs=1&amp;">
82             <param name="movie" value="http://www.youtube.com/v/G_6ZC8n9nKs&amp;hl=en&amp;fs=1&amp;" />
83         </object>
84
85         <h2>In Detail</h2>
86         <p>Hermes will connect your Contacts app to your Facebook and Twitter accounts, matching existing Contacts entries to the ones on the social networking sites that are configured in the application settings. Hermes is smart and will deal intelligently with even the smallest name variations.</p>
87         <p>If a contact is matched between the Contacts app and an online identity, Hermes will update the contact on the device with a photo (from Facebook or Twitter), birthday (from Facebook), profile URLs (on Facebook and Twitter) and homepage (from Twitter). As an added bonus, all birthdates will also appear automatically in your Calendar.</p>
88         <p>There are two modes of operation, "Retrieve" and "Update." Retrieve will fill in <strong>missing</strong> data for a contact. Update will <strong>overwrite</strong> any contacts that have matches on the social networks (i.e., your Contacts entries will be reset to the information found online).</p>
89         <p>Hermes uses the official Facebook and Twitter APIs, designed and intended by these companies to allow third party applications such as Hermes.</p>
90
91     </div>
92
93     <!-- Tab #3 -->
94     <div id="tab3" class="tab_content">
95
96         <img src="ui/application_install.png" alt="" class="download" />
97         <p>Hermes is currently under development. It can be installed from the <a href="http://maemo.org/packages/view/hermes/">Extras Testing</a> repository.</p>
98         <p class="note"><strong>Note:</strong> It is not yet suitable for end-users.</p>
99
100     </div>
101
102     <!-- Tab #4 -->
103     <div id="tab4" class="tab_content">
104
105         <div id="devmenu">
106             <ul>
107                 <li><a href="https://bugs.maemo.org/buglist.cgi?product=Hermes">Current bug list</a></li>
108                 <li><a href="https://bugs.maemo.org/enter_bug.cgi?product=Hermes">Report a bug</a></li>
109                 <li><a href="https://garage.maemo.org/plugins/ggit/browse.php/?p=hermes">Get the source code</a></li>
110                 <li><a href="https://garage.maemo.org/projects/hermes/">Hermes at Maemo Garage</a></li>
111             </ul>
112         </div>
113
114         <h2>Roadmap</h2>
115         <h3>Current developments</h3>
116         <ul class="strike">
117             <li>Improved error handling &amp; user messages.</li>
118             <li>Slightly clearer "Accounts" dialogue.</li>
119             <li>Pull down homepage from Facebook as well as Twitter.</li>
120             <li>Handling of accents being present/missing between online and Contacts.</li>
121             <li>Allow creation of "empty" contacts containing birthday &amp; homepage info so that Facebook friends' birthdays will appear in Calendar, even if you have no other contact info for them.</li>
122             <li>Improved web page at <a href="http://hermes.garage.maemo.org/">hermes.garage.maemo.org</a>.</li>
123             <li>Manual matching for contacts which the heuristic doesn't pick up.</li>
124         </ul>
125
126         <h3>Immediate plans</h3>
127         <ul>
128             <li>Store a history of all images that Hermes has ever downloaded to allow the user to pick from them.</li>
129             <li>Add an "auto-update" mode for people who regularly change their Facebook profile pictures to allow Hermes to track them.</li>
130         </ul>
131
132         <h3>Long-term plans/possibilities</h3>
133         <ul>
134             <li>Match "nickname" against <a href="http://maemo.org/profile/list/">maemo.org username</a>.</li>
135             <li>Match email address against <a href="http://www.gravatar.com/">gravatar.com</a>.</li>
136             <li>Investigate pulling contact images from Google Contacts (apparently Mail for Exchange doesn't download images).</li>
137         </ul>
138     </div>
139     
140     </div>
141 </div>
142
143 <!-- Footer Content -->
144 <div id="footer">
145     <p>Copyright &copy; <a href="mailto:andrew@bleb.org">Andrew Flegg</a> 2009. Released under the Artistic Licence.<br />Webpage design and Hermes graphics by <a href="http://samoff.com">Tim Samoff</a>.</p>
146 </div>
147
148 <!-- Google Analytics -->
149 <script type="text/javascript">
150 var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
151 document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
152 </script>
153 <script type="text/javascript">
154 try {
155 var pageTracker = _gat._getTracker("UA-4946570-3");
156 pageTracker._trackPageview();
157 } catch(err) {}</script>
158
159 </body>
160 </html>