Merge branch 'master' of git@wendt.se:hermes
[hermes] / www / index.html
index c92fa4f..1e8980f 100644 (file)
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<!--
+hermes 1.0 by tim@samoff.com
+http://samoff.com
+-->
 <html xmlns="http://www.w3.org/1999/xhtml">
-<!-- THIS IS TEMPORARY. PLEASE FEEL FREE TO HACK ON -->
 <head>
-<title>Hermes</title>
-<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-<link rel="stylesheet" type="text/css" href="style.css" />
+<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+<title>Hermes: Contacts Delivered</title>
+<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
+<link rel="stylesheet" type="text/css" href="reset.css"/>
+<link rel="stylesheet" type="text/css" href="hermes.css"/>
+
+<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
+<script src="js/jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script>
+<script src="js/jquery.corner.js" type="text/javascript"></script>
+<script src="js/jquery.juitter.js" type="text/javascript"></script>
+<script src="js/system.js" type="text/javascript"></script>
+
+<script type="text/javascript">
+$(document).ready(function() {
+    // Rounded Corners
+    $("div#content,div#devmenu").corner("round");
+    
+    // Tabs
+       $('#tabs').tabs({ fx: { opacity: 'toggle' } });
+});
+</script>
+
 </head>
 <body>
+<!-- Brand -->
+<div>
+    <img src="ui/bg.jpg" class="bg" alt="" />
+</div>
 
-<div id="content">
-<h1>Hermes</h1>
-<p class="subtitle"><em>Enrich your Maemo 5 address book with photos and meta-data from online services such as Facebook and Twitter</em></p>
-
-<h2>Why do I want it?</h2>
-<p>You've copied an address book of contacts to your new N900.
-Unfortunately, the lovely interface and gorgeous screen are let down
-by the fact that you see the plain blue man as an picture when
-contacting people via <var>Phone</var> or <var>Conversations</var>.</p>
-
-<h2>How do I get it?</h2>
-<p>Hermes is currently under development and is in
-<a href="http://maemo.org/packages/view/hermes/">Extras Testing</a>. It is not
-yet suitable for end-users.</p>
-
-<h2>What it does</h2>
-<p>Hermes connects to the user's Facebook and Twitter accounts and
-matches <em>existing</em> Contacts entries to their friends on these social
-networking sites. It uses a heuristic to try and cope with small name
-variations.</p>
-
-<p>If a contact is matched between the address book and the online
-identity, Hermes will update the contact on the device with photo
-(from Facebook or Twitter), birthday - which will appear in Calendar
-automatically (from Facebook), profile URL (on Facebook and Twitter)
-and homepage (from Twitter).</p>
-
-<p>There are two modes of operation, "Retrieve" and "Update". The former
-will fill in MISSING data for a contact; whereas the latter will
-overwrite (this needs some improvement in terms of documentation).</p>
-
-<p>It uses the official Facebook and Twitter APIs, designed and intended
-by these companies to allow third party applications such as Hermes.</p>
-
-<h2>Future developments</h2>
-<h3>Current developments</h3>
-<ul>
-<li>Improved error handling &amp; user messages</li>
-<li>Slightly clearer "Accounts" dialogue</li>
-<li>Pull down homepage from Facebook as well as Twitter</li>
-</ul>
-
-<h3>Immediate plans</h3>
-<ul>
-<li>Improved web page at <a href="http://hermes.garage.maemo.org/">hermes.garage.maemo.org</a></li>
-<li>Manual matching for contacts which the heuristic doesn't pick up</li>
-<li>Handling of accents being present/missing between online and <var>Contacts</var>.</li>
-</ul>
-
-<h3>Longer term plans/possibilities</h3>
-<ol>
-<li>Match &quot;nickname&quot; against <a href="http://maemo.org/profile/list/">maemo.org username</a>.</li>
-<li>Match email address against <a href="http://www.gravatar.com/">gravatar.com</a>.</li>
-<li>Allow creation of "empty" contacts containing birthday &amp; homepage info
-so that Facebook friends' birthdays will appear in <var>Calendar</var>, even if
-you have no other contact info for them.</li>
-<li>Investigate pulling contact images from Google Contacts
-   (apparently <var>Mail for Exchange</var> doesn't download images)</li>
-<li>Add an "auto-update" mode for people who regularly change their
-   Facebook profile pictures to allow Hermes to track them.</li>
-<li>Store a history of all images that Hermes has ever downloaded
-   to allow the user to pick from them.</li>
-</ol>
+<div id="header">
+    <h1><a href="index.htm">Hermes</a></h1>
+    <img src="ui/hermes-logo.png" alt="Hermes" class="logo" />
 </div>
 
+<!-- Tab Navigation -->
+<div id="tabs">
+
+    <ul class="nav">
+        <li><a href="#about">About Hermes</a></li>
+        <li><a href="#what">What it does</a></li>
+        <li><a href="#download">Get it</a></li>
+        <li class="last"><a href="#development">Development</a></li>
+    </ul>
+
+<!-- Page Content -->
+<div id="content">
+
+    <!-- Tab #1 -->
+    <div id="about">
+        <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>
+        <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>
+
+        <h2>Latest News</h2>
 
-<div id="sidebar">
-<div class="logo"><img src="logo.png" width="256" height="256" alt="[Hermes]" /></div>
+        <!-- Twitter Content -->
+        <div id="tweets"></div>
+    </div>
+    
+    <!-- Tab #2 -->
+    <div id="what">
+        <!-- YouTube Video -->
+        <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;">
+            <param name="movie" value="http://www.youtube.com/v/G_6ZC8n9nKs&amp;hl=en&amp;fs=1&amp;" />
+        </object>
 
-<ul>
-<li><a href="http://thenokiablog.com/2009/10/14/nokia-n900-andrew-flegg-hermes/">thenokiablog.com interview &amp; video</a></li>
-<li><a href="https://bugs.maemo.org/buglist.cgi?product=Hermes">Bug list</a></li>
-<li><a href="https://bugs.maemo.org/enter_bug.cgi?product=Hermes">Raise bug</a></li>
-<li><a href="https://garage.maemo.org/plugins/ggit/browse.php/?p=hermes">Source code</a></li>
-<li><a href="https://garage.maemo.org/projects/hermes/">Project admin</a></li>
-</ul>
+        <h2>In Detail</h2>
+        <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>
+        <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>
+        <p>There are two modes of operation, "Retrieve" and "Refresh." Retrieve will fill in <strong>missing</strong> data for a contact. Refresh 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>
+        <p>Hermes uses the official Facebook and Twitter APIs, designed and intended by these companies to allow third party applications such as Hermes.</p>
+    </div>
+
+    <!-- Tab #3 -->
+    <div id="download">
+        <a href="http://maemo.org/downloads/product/raw/Maemo5/hermes/?get_installfile"><img src="ui/application_install.png" alt="" class="download" /></a>
+        <p>The <em>released</em> version of Hermes can be installed from the <a href="http://wiki.maemo.org/Extras">Maemo Extras</a> repository, and can be seen at <a href="http://maemo.org/downloads/product/Maemo5/hermes/">maemo.org downloads</a>.</p>
+        <p class="aside">The <em>testing</em> version of Hermes is not suitable for end-users, but can be found in the
+        <a href="http://maemo.org/packages/view/hermes/">Extras Testing</a> repository for those willing
+        to help with <a href="http://wiki.maemo.org/Extras-testing#The_extras-testing_QA_queue_.26_you">Extras quality assurance</a>.</p>
+
+    </div>
+
+    <!-- Tab #4 -->
+    <div id="development">
+        <div id="devmenu">
+            <ul>
+                <li><a href="https://bugs.maemo.org/buglist.cgi?product=Hermes">Current bug list</a></li>
+                <li><a href="https://bugs.maemo.org/enter_bug.cgi?product=Hermes">Report a bug</a></li>
+                <li><a href="https://garage.maemo.org/plugins/ggit/browse.php/?p=hermes">Get the source code</a></li>
+                <li><a href="https://garage.maemo.org/projects/hermes/">Hermes at Maemo Garage</a> (project host)</li>
+                <li><a href="http://www.transifex.net/projects/p/hermes/c/master/">Hermes at Transifex</a> (i18n)</li>
+            </ul>
+        </div>
+
+        <h2>Roadmap</h2>
+        <h3>Current developments</h3>
+        <ul>
+            <li>Match email address against <a href="http://www.gravatar.com/">gravatar.com</a>. [<a href="https://bugs.maemo.org/show_bug.cgi?id=5983">MB#5983</a>]</li>
+        </ul>
+
+        <h3>Immediate plans</h3>
+        <ul>
+            <li>Store a history of all images that Hermes has ever downloaded to allow the user to pick from them. [<a href="https://bugs.maemo.org/show_bug.cgi?id=5452">MB#5452</a>]</li>
+            <li>Add an "auto-update" mode for people who regularly change their Facebook profile pictures to allow Hermes to track them.</li>
+        </ul>
+
+        <h3>Long-term plans/possibilities</h3>
+        <ul>
+            <li>Match "nickname" against <a href="http://maemo.org/profile/list/">maemo.org username</a>.</li>
+            <li>Investigate pulling contact images from Google Contacts (apparently Mail for Exchange doesn't download images). [<a href="https://bugs.maemo.org/show_bug.cgi?id=5453">MB#5453</a>]</li>
+        </ul>
+        
+        <h3>Historical developments</h3>
+        <p>All of these developments have now been implemented:</p>
+        <ul>
+            <li>Improved error handling &amp; user messages.</li>
+            <li>Slightly clearer "Accounts" dialogue.</li>
+            <li>Pull down homepage from Facebook as well as Twitter.</li>
+            <li>Handling of accents being present/missing between online and Contacts.</li>
+            <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>
+            <li>Improved web page at <a href="http://hermes.garage.maemo.org/">hermes.garage.maemo.org</a>.</li>
+            <li>Manual matching for contacts which the heuristic doesn't pick up.</li>
+        </ul>
+    </div>
+    
+    </div>
+</div>
+
+<!-- Footer Content -->
+<div id="footer">
+    <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>
 </div>
+
+<!-- Google Analytics -->
+<script type="text/javascript">
+var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
+document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
+</script>
+<script type="text/javascript">
+try {
+var pageTracker = _gat._getTracker("UA-4946570-3");
+pageTracker._trackPageview();
+} catch(err) {}</script>
+
 </body>
 </html>