4926: Added 'getting started' section with three image galleries.
authorNancy Ouyang <nancy.ouyang@gmail.com>
Wed, 21 Jan 2015 05:10:05 +0000 (00:10 -0500)
committerNancy Ouyang <nancy.ouyang@gmail.com>
Wed, 21 Jan 2015 16:13:14 +0000 (11:13 -0500)
35 files changed:
doc/_config.yml
doc/_includes/_navbar_top.liquid
doc/_layouts/default.html.liquid
doc/css/carousel-override.css [new file with mode: 0644]
doc/images/keyfeatures/chooseinputs.png [new file with mode: 0644]
doc/images/keyfeatures/collectionpage.png [new file with mode: 0644]
doc/images/keyfeatures/dashboard2.png [new file with mode: 0644]
doc/images/keyfeatures/graph.png [new file with mode: 0644]
doc/images/keyfeatures/log.png [new file with mode: 0644]
doc/images/keyfeatures/provenance.png [new file with mode: 0644]
doc/images/keyfeatures/rerun.png [new file with mode: 0644]
doc/images/keyfeatures/running2.png [new file with mode: 0644]
doc/images/keyfeatures/shared.png [new file with mode: 0644]
doc/images/keyfeatures/webupload.png [new file with mode: 0644]
doc/images/quickstart/1.png [new file with mode: 0644]
doc/images/quickstart/2.png [new file with mode: 0644]
doc/images/quickstart/3.png [new file with mode: 0644]
doc/images/quickstart/4.png [new file with mode: 0644]
doc/images/quickstart/5.png [new file with mode: 0644]
doc/images/quickstart/6.png [new file with mode: 0644]
doc/images/quickstart/7.png [new file with mode: 0644]
doc/images/uses/choosefiles.png [new file with mode: 0644]
doc/images/uses/gotohome.png [new file with mode: 0644]
doc/images/uses/rename.png [new file with mode: 0644]
doc/images/uses/share.png [new file with mode: 0644]
doc/images/uses/shared.png [new file with mode: 0644]
doc/images/uses/sharedsubdirs.png [new file with mode: 0644]
doc/images/uses/uploaddata.png [new file with mode: 0644]
doc/images/uses/uploading.png [new file with mode: 0644]
doc/index.html.liquid
doc/start/getting_started/firstpipeline.html.textile.liquid [new file with mode: 0644]
doc/start/getting_started/keyfeatures.html.textile.liquid [new file with mode: 0644]
doc/start/getting_started/sharedata.html.textile.liquid [new file with mode: 0644]
doc/start/index.html.textile.liquid [new file with mode: 0644]
doc/start/index.html.textile.liquid.bkup [new file with mode: 0644]

index af5160f52602af292cf6470987200510a91dc03b..ee2d96c2035d2cb6155d13adfa27d781e96170b1 100644 (file)
@@ -13,6 +13,14 @@ arvados_workbench_host: localhost
 exclude: ["Rakefile", "tmp", "vendor"]
 
 navbar:
+  start:
+    - Getting Started:
+      - start/index.html.textile.liquid
+    - Quickstart:
+      - start/getting_started/firstpipeline.html.textile.liquid
+    - Simple Use Cases:
+      - start/getting_started/sharedata.html.textile.liquid
+
   userguide:
     - Getting Started:
       - user/index.html.textile.liquid
index 9123893c38b95ce10a493349924171530fa8e5aa..73b7abb9a355f6647c78fb98f9ca38074ab1b056 100644 (file)
@@ -11,6 +11,7 @@
     </div>
     <div class="collapse navbar-collapse" id="bs-navbar-collapse">
       <ul class="nav navbar-nav">
+        <li {% if page.navsection == 'start' %} class="active" {% endif %}><a href="{{ site.baseurl }}/start/index.html">Getting&nbsp;Started</a></li>
         <li {% if page.navsection == 'userguide' %} class="active" {% endif %}><a href="{{ site.baseurl }}/user/index.html">User&nbsp;Guide</a></li>
         <li {% if page.navsection == 'sdk' %} class="active" {% endif %}><a href="{{ site.baseurl }}/sdk/index.html">SDK&nbsp;Reference</a></li>
         <li {% if page.navsection == 'api' %} class="active" {% endif %}><a href="{{ site.baseurl }}/api/index.html">API&nbsp;Reference</a></li>
index 88da01b178669ee2065536e9e2e532f802ee1d35..2a45dd5bd053b6507210b26856fa81cfa92a82e6 100644 (file)
@@ -13,6 +13,7 @@
     <link href="{{ site.baseurl }}/css/badges.css" rel="stylesheet">
     <link href="{{ site.baseurl }}/css/code.css" rel="stylesheet">
     <link href="{{ site.baseurl }}/css/font-awesome.css" rel="stylesheet">
+    <link href="{{ site.baseurl }}/css/carousel-override.css" rel="stylesheet">
     <style>
       html {
       height:100%;
diff --git a/doc/css/carousel-override.css b/doc/css/carousel-override.css
new file mode 100644 (file)
index 0000000..fa2c150
--- /dev/null
@@ -0,0 +1,25 @@
+.carousel-control {
+  width: 5%;
+}
+
+.carousel-caption {
+  position: static;
+  background: rgba(0,0,0,0.6);
+  color: white;
+  padding-bottom: 35px;
+  padding-left: 1em;
+  padding-right: 1em;
+  padding-top: 15px;
+}
+
+.carousel {
+  overflow: hidden;
+  border-radius: 5px;
+  max-width: 900px;
+  margin: 1em;
+}
+
+.carousel-indicators {
+  bottom: 0px;
+}
+
diff --git a/doc/images/keyfeatures/chooseinputs.png b/doc/images/keyfeatures/chooseinputs.png
new file mode 100644 (file)
index 0000000..38d3766
Binary files /dev/null and b/doc/images/keyfeatures/chooseinputs.png differ
diff --git a/doc/images/keyfeatures/collectionpage.png b/doc/images/keyfeatures/collectionpage.png
new file mode 100644 (file)
index 0000000..c002073
Binary files /dev/null and b/doc/images/keyfeatures/collectionpage.png differ
diff --git a/doc/images/keyfeatures/dashboard2.png b/doc/images/keyfeatures/dashboard2.png
new file mode 100644 (file)
index 0000000..b14d49b
Binary files /dev/null and b/doc/images/keyfeatures/dashboard2.png differ
diff --git a/doc/images/keyfeatures/graph.png b/doc/images/keyfeatures/graph.png
new file mode 100644 (file)
index 0000000..df20ea5
Binary files /dev/null and b/doc/images/keyfeatures/graph.png differ
diff --git a/doc/images/keyfeatures/log.png b/doc/images/keyfeatures/log.png
new file mode 100644 (file)
index 0000000..d74c72a
Binary files /dev/null and b/doc/images/keyfeatures/log.png differ
diff --git a/doc/images/keyfeatures/provenance.png b/doc/images/keyfeatures/provenance.png
new file mode 100644 (file)
index 0000000..730c776
Binary files /dev/null and b/doc/images/keyfeatures/provenance.png differ
diff --git a/doc/images/keyfeatures/rerun.png b/doc/images/keyfeatures/rerun.png
new file mode 100644 (file)
index 0000000..ae20804
Binary files /dev/null and b/doc/images/keyfeatures/rerun.png differ
diff --git a/doc/images/keyfeatures/running2.png b/doc/images/keyfeatures/running2.png
new file mode 100644 (file)
index 0000000..0bac277
Binary files /dev/null and b/doc/images/keyfeatures/running2.png differ
diff --git a/doc/images/keyfeatures/shared.png b/doc/images/keyfeatures/shared.png
new file mode 100644 (file)
index 0000000..1199a4a
Binary files /dev/null and b/doc/images/keyfeatures/shared.png differ
diff --git a/doc/images/keyfeatures/webupload.png b/doc/images/keyfeatures/webupload.png
new file mode 100644 (file)
index 0000000..1475711
Binary files /dev/null and b/doc/images/keyfeatures/webupload.png differ
diff --git a/doc/images/quickstart/1.png b/doc/images/quickstart/1.png
new file mode 100644 (file)
index 0000000..21bc3f9
Binary files /dev/null and b/doc/images/quickstart/1.png differ
diff --git a/doc/images/quickstart/2.png b/doc/images/quickstart/2.png
new file mode 100644 (file)
index 0000000..fac32c4
Binary files /dev/null and b/doc/images/quickstart/2.png differ
diff --git a/doc/images/quickstart/3.png b/doc/images/quickstart/3.png
new file mode 100644 (file)
index 0000000..a080b01
Binary files /dev/null and b/doc/images/quickstart/3.png differ
diff --git a/doc/images/quickstart/4.png b/doc/images/quickstart/4.png
new file mode 100644 (file)
index 0000000..a6345ef
Binary files /dev/null and b/doc/images/quickstart/4.png differ
diff --git a/doc/images/quickstart/5.png b/doc/images/quickstart/5.png
new file mode 100644 (file)
index 0000000..754d0a3
Binary files /dev/null and b/doc/images/quickstart/5.png differ
diff --git a/doc/images/quickstart/6.png b/doc/images/quickstart/6.png
new file mode 100644 (file)
index 0000000..29fb7c0
Binary files /dev/null and b/doc/images/quickstart/6.png differ
diff --git a/doc/images/quickstart/7.png b/doc/images/quickstart/7.png
new file mode 100644 (file)
index 0000000..e7be5c2
Binary files /dev/null and b/doc/images/quickstart/7.png differ
diff --git a/doc/images/uses/choosefiles.png b/doc/images/uses/choosefiles.png
new file mode 100644 (file)
index 0000000..2d38363
Binary files /dev/null and b/doc/images/uses/choosefiles.png differ
diff --git a/doc/images/uses/gotohome.png b/doc/images/uses/gotohome.png
new file mode 100644 (file)
index 0000000..144a3b1
Binary files /dev/null and b/doc/images/uses/gotohome.png differ
diff --git a/doc/images/uses/rename.png b/doc/images/uses/rename.png
new file mode 100644 (file)
index 0000000..d633242
Binary files /dev/null and b/doc/images/uses/rename.png differ
diff --git a/doc/images/uses/share.png b/doc/images/uses/share.png
new file mode 100644 (file)
index 0000000..f578c48
Binary files /dev/null and b/doc/images/uses/share.png differ
diff --git a/doc/images/uses/shared.png b/doc/images/uses/shared.png
new file mode 100644 (file)
index 0000000..86b7d54
Binary files /dev/null and b/doc/images/uses/shared.png differ
diff --git a/doc/images/uses/sharedsubdirs.png b/doc/images/uses/sharedsubdirs.png
new file mode 100644 (file)
index 0000000..6778f54
Binary files /dev/null and b/doc/images/uses/sharedsubdirs.png differ
diff --git a/doc/images/uses/uploaddata.png b/doc/images/uses/uploaddata.png
new file mode 100644 (file)
index 0000000..f369270
Binary files /dev/null and b/doc/images/uses/uploaddata.png differ
diff --git a/doc/images/uses/uploading.png b/doc/images/uses/uploading.png
new file mode 100644 (file)
index 0000000..473fc5a
Binary files /dev/null and b/doc/images/uses/uploading.png differ
index a4255b65d29c1f3dd64fd23cb98ed042806f8f06..8dbf22360af67180ce4384d0e8e8d5179a5fce0d 100644 (file)
@@ -10,7 +10,7 @@ title: Arvados | Documentation
     <div class="row">
       <div class="col-sm-6">
         <h1>ARVADOS</h1>
-        <p>manuals, guides, and references</p>
+        <p>A free and open source bioinformatics platform for genomic and biomedical data</p>
       </div>
       <div class="col-sm-6">
         <img src="images/dax-reading-book.png" style="max-height: 10em" alt="Dax reading a book" />
@@ -22,9 +22,17 @@ title: Arvados | Documentation
 <div class="container-fluid">
   <div class="row">
     <div class="col-sm-5">
-      <p>This site contains documentation for the <a href="https://arvados.org/">Arvados platform</a>. The documentation is being developed as part of the open source project. It is a work in progress that has just gotten started. You can get involved by <a href="https://arvados.org/projects/arvados/wiki/Documentation">joining the documentation effort</a>.
+      <p><a href="https://arvados.org/">Arvados</a>  enables you to quickly begin using cloud computing resources in your bioinformatics work. It allows you to track and your methods and datasets, share them securely, and easily re-run analyses.
+      </p>
+      <p>Check out our <a href="{{ site.baseurl }}/start/index.html">key features</a>, complete with screenshots, and then follow our tutorial to <a href="{{ site.baseurl }}/start/getting_started/firstpipeline.html">run your first pipeline</a> using our <a href="http://lp.curoverse.com/beta-signup/">public beta</a>.
+      </p>
+      <p>On this page, you can also find more in-depth guides for using Arvados.
+      </p>
     </div>
     <div class="col-sm-7" style="border-left: solid; border-width: 1px">
+      <p>
+        <a href="{{ site.baseurl }}/start/index.html">Getting Started</a> &mdash; Start here if you're new to Arvados.
+      </p>
       <p>
         <a href="{{ site.baseurl }}/user/index.html">User Guide</a> &mdash; How to manage data and do analysis with Arvados.
       </p>
diff --git a/doc/start/getting_started/firstpipeline.html.textile.liquid b/doc/start/getting_started/firstpipeline.html.textile.liquid
new file mode 100644 (file)
index 0000000..c914d3b
--- /dev/null
@@ -0,0 +1,89 @@
+---
+layout: default
+navsection: start 
+title: Run your first pipeline in minutes
+...
+
+h2. LobSTR v3 
+
+In this quickstart guide, we'll run an existing pipeline with pre-existing data. Step-by-step instructions are shown below. You can follow along using your own local install or by using Curoverse's <a href="http://lp.curoverse.com/beta-signup/">hosted version of Arvados</a> (in public beta, any Google account can be used to login).
+
+(For more information about this pipeline, see our <a href="https://arvados.org/projects/arvados/wiki/LobSTR_tutorial">detailed lobSTR guide</a>).
+
+<div id="carousel-firstpipe" class="carousel slide">
+  <!-- Indicators -->
+  <ol class="carousel-indicators">
+    <li data-target="#carousel-firstpipe" data-slide-to="0" class="active"></li>
+    <li data-target="#carousel-firstpipe" data-slide-to="1"></li>
+    <li data-target="#carousel-firstpipe" data-slide-to="2"></li>
+    <li data-target="#carousel-firstpipe" data-slide-to="3"></li>
+    <li data-target="#carousel-firstpipe" data-slide-to="4"></li>
+    <li data-target="#carousel-firstpipe" data-slide-to="5"></li>
+    <li data-target="#carousel-firstpipe" data-slide-to="6"></li>
+  </ol>
+
+  <!-- Wrapper for slides -->
+  <div class="carousel-inner" role="listbox">
+    <div class="item active">
+      <img src="{{ site.baseurl }}/images/quickstart/1.png" alt="Step 1. At the dashboard, click 'Run a pipeline...'.">
+      <div class="carousel-caption">
+        Step 1. At the dashboard, click 'Run a pipeline...'.
+      </div>
+    </div>
+
+    <div class="item">
+      <img src="{{ site.baseurl }}/images/quickstart/2.png" alt="Choose 'lobstr v.3' and hit 'Next'.">
+      <div class="carousel-caption">
+        Choose 'lobstr v.3' and hit 'Next'.
+      </div>
+    </div>
+
+    <div class="item">
+      <img src="{{ site.baseurl }}/images/quickstart/3.png" alt="Rename the pipeline intance, then click 'Run'. Alternatively, choose new inputs.">
+      <div class="carousel-caption">
+        Rename the pipeline intance, then click 'Run'. Alternatively, choose new inputs.
+      </div>
+    </div>
+
+    <div class="item">
+      <img src="{{ site.baseurl }}/images/quickstart/4.png" alt="Here we search for and choose new inputs.">
+      <div class="carousel-caption">
+        Here we search for and choose new inputs.
+      </div>
+    </div>
+
+    <div class="item">
+      <img src="{{ site.baseurl }}/images/quickstart/5.png" alt="After the job completes, you can re-run it with one click.">
+      <div class="carousel-caption">
+        After the job completes, you can re-run it with one click.
+      </div>
+    </div>
+
+    <div class="item">
+      <img src="{{ site.baseurl }}/images/quickstart/6.png" alt="You can inspect details about the pipeline which are automatically logged.">
+      <div class="carousel-caption">
+        You can inspect automatically-logged details about the pipeline.
+      </div>
+    </div>
+
+    <div class="item">
+      <img src="{{ site.baseurl }}/images/quickstart/7.png" alt="Click 'Create sharing link' to share with people outside Arvados. [END]">
+      <div class="carousel-caption">
+        Click 'Create sharing link' to share with people outside Arvados. [END]
+      </div>
+    </div>
+
+  </div>
+
+  <!-- Controls -->
+  <a class="left carousel-control" href="#carousel-firstpipe" role="button" data-slide="prev">
+    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
+    <span class="sr-only">Previous</span>
+  </a>
+  <a class="right carousel-control" href="#carousel-firstpipe" role="button" data-slide="next">
+    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
+    <span class="sr-only">Next</span>
+  </a>
+</div>
+
+Tip: You may need to make your browser window bigger to see full-size images in the gallery above.
diff --git a/doc/start/getting_started/keyfeatures.html.textile.liquid b/doc/start/getting_started/keyfeatures.html.textile.liquid
new file mode 100644 (file)
index 0000000..0d422d0
--- /dev/null
@@ -0,0 +1,115 @@
+---
+layout: default
+navsection: start 
+title: "Key Features"
+...
+
+h2. Key Features
+
+<ul>
+<li><strong>Track your methods</strong><br/>
+We log every compute job: software versions, machine images, input and output data hashes. Rely on a computer, not your memory and your note-taking skills.</li>
+<li><strong>Share your methods</strong><br/>
+Show other people what you did. Let them use your workflow on their own data. Publish a permalink to your methods and data, so others can reproduce and build on them easily.</li>
+<li><strong>Track data origin</strong><br/>
+Did you really only use fully consented public data in this analysis?</li>
+<li><strong>Get results sooner</strong><br/>
+Run your compute jobs faster by using multi-nodes and multi-cores, even if your programs are single-threaded.</li>
+</ul>
+
+Check out the gallery below, which shows highlights of key features of Workbench, the web interface to Arvados.
+
+h3. Take a look (Screenshots gallery) 
+
+<div id="carousel-keyfeatures" class="carousel slide">
+  <!-- Indicators -->
+  <ol class="carousel-indicators">
+    <li data-target="#carousel-keyfeatures" data-slide-to="0" class="active"></li>
+    <li data-target="#carousel-keyfeatures" data-slide-to="1"></li>
+    <li data-target="#carousel-keyfeatures" data-slide-to="2"></li>
+    <li data-target="#carousel-keyfeatures" data-slide-to="3"></li>
+    <li data-target="#carousel-keyfeatures" data-slide-to="4"></li>
+    <li data-target="#carousel-keyfeatures" data-slide-to="5"></li>
+    <li data-target="#carousel-keyfeatures" data-slide-to="6"></li>
+    <li data-target="#carousel-keyfeatures" data-slide-to="7"></li>
+    <li data-target="#carousel-keyfeatures" data-slide-to="8"></li>
+  </ol>
+
+  <!-- Wrapper for slides -->
+  <div class="carousel-inner" role="listbox">
+    <div class="item active">
+      <img src="{{ site.baseurl }}/images/keyfeatures/dashboard2.png" alt="[START] After logging in, you see Workbench's dashboard.">
+      <div class="carousel-caption">
+        [START] After logging in, you see Workbench's dashboard.
+      </div>
+    </div>
+
+    <div class="item">
+      <img src="{{ site.baseurl }}/images/keyfeatures/running2.png" alt="Pipelines describe a set of computational tasks (jobs).">
+      <div class="carousel-caption">
+        Pipelines describe a set of computational tasks (jobs).
+      </div>
+    </div>
+
+    <div class="item">
+      <img src="{{ site.baseurl }}/images/keyfeatures/log.png" alt="The output of all jobs is logged and stored automatically.">
+      <div class="carousel-caption">
+        The output of all jobs is logged and stored automatically.
+      </div>
+    </div>
+
+    <div class="item">
+      <img src="{{ site.baseurl }}/images/keyfeatures/graph.png" alt="Pipelines can be also viewed in auto-generated graph form.">
+      <div class="carousel-caption">
+        Pipelines can be also viewed in auto-generated graph form.
+      </div>
+    </div>
+
+    <div class="item">
+      <img src="{{ site.baseurl }}/images/keyfeatures/rerun.png" alt="Pipelines can easily be re-run...">
+      <div class="carousel-caption">
+        Pipelines can easily be re-run...
+      </div>
+    </div>
+
+    <div class="item">
+      <img src="{{ site.baseurl }}/images/keyfeatures/chooseinputs.png" alt="...by changing parameters or picking new datasets...">
+      <div class="carousel-caption">
+        ...by changing parameters or picking new datasets...
+      </div>
+    </div>
+
+    <div class="item">
+      <img src="{{ site.baseurl }}/images/keyfeatures/webupload.png" alt="...which can be uploaded right in Workbench.">
+      <div class="carousel-caption">
+        ...which can be uploaded right in Workbench.
+      </div>
+    </div>
+
+    <div class="item">
+      <img src="{{ site.baseurl }}/images/keyfeatures/collectionpage.png" alt="Collections allow sharing datasets and job outputs easily.">
+      <div class="carousel-caption">
+        Collections allow sharing datasets and job outputs easily.
+      </div>
+    </div>
+
+    <div class="item">
+      <img src="{{ site.baseurl }}/images/keyfeatures/provenance.png" alt="Data provenance is tracked automatically. [END]">
+      <div class="carousel-caption">
+        Data provenance is tracked automatically. [END]
+      </div>
+    </div>
+
+
+  </div>
+
+  <!-- Controls -->
+  <a class="left carousel-control" href="#carousel-keyfeatures" role="button" data-slide="prev">
+    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
+    <span class="sr-only">Previous</span>
+  </a>
+  <a class="right carousel-control" href="#carousel-keyfeatures" role="button" data-slide="next">
+    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
+    <span class="sr-only">Next</span>
+  </a>
+</div>
diff --git a/doc/start/getting_started/sharedata.html.textile.liquid b/doc/start/getting_started/sharedata.html.textile.liquid
new file mode 100644 (file)
index 0000000..c8bdd5f
--- /dev/null
@@ -0,0 +1,97 @@
+---
+layout: default
+navsection: start 
+title: Sharing Data 
+...
+
+You can easily share data entirely through Workbench, the web interface to Arvados.
+
+h2. Upload and share your existing data
+
+Step-by-step instructions are shown below.
+
+<div id="carousel-sharedata" class="carousel slide">
+  <!-- Indicators -->
+  <ol class="carousel-indicators">
+    <li data-target="#carousel-sharedata" data-slide-to="0" class="active"></li>
+    <li data-target="#carousel-sharedata" data-slide-to="1"></li>
+    <li data-target="#carousel-sharedata" data-slide-to="2"></li>
+    <li data-target="#carousel-sharedata" data-slide-to="3"></li>
+    <li data-target="#carousel-sharedata" data-slide-to="4"></li>
+    <li data-target="#carousel-sharedata" data-slide-to="5"></li>
+    <li data-target="#carousel-sharedata" data-slide-to="6"></li>
+    <li data-target="#carousel-sharedata" data-slide-to="7"></li>
+  </ol>
+
+  <!-- Wrapper for slides -->
+  <div class="carousel-inner" role="listbox">
+    <div class="item active">
+      <img src="{{ site.baseurl }}/images/uses/gotohome.png" alt="Step 1. From the dashboard, go to your Home project.">
+      <div class="carousel-caption">
+        Step 1. From the dashboard, go to your Home project.
+      </div>
+    </div>
+
+    <div class="item">
+      <img src="{{ site.baseurl }}/images/uses/uploaddata.png" alt="Add data - Upload files.">
+      <div class="carousel-caption">
+        Add data - Upload files.
+      </div>
+    </div>
+
+    <div class="item">
+      <img src="{{ site.baseurl }}/images/uses/choosefiles.png" alt="A new collection is created automatically. Choose files to upload and hit Start.">
+      <div class="carousel-caption">
+        A new collection is created automatically. Choose files to upload and hit Start.
+      </div>
+    </div>
+
+    <div class="item">
+      <img src="{{ site.baseurl }}/images/uses/uploading.png" alt="Files will upload and stay uploaded even if the browser is closed.">
+      <div class="carousel-caption">
+        Files will upload and stay uploaded even if the browser is closed.
+      </div>
+    </div>
+
+    <div class="item">
+      <img src="{{ site.baseurl }}/images/uses/rename.png" alt="Rename the collection appropriately.">
+      <div class="carousel-caption">
+        Rename the collection appropriately.
+      </div>
+    </div>
+
+    <div class="item">
+      <img src="{{ site.baseurl }}/images/uses/share.png" alt="Click 'Create sharing link'. You can click 'unshare' at any later point.">
+      <div class="carousel-caption">
+        Click 'Create sharing link'. You can click 'unshare' at any later point.
+      </div>
+    </div>
+
+    <div class="item">
+      <img src="{{ site.baseurl }}/images/uses/shared.png" alt="Now just share this link with anyone you want.">
+      <div class="carousel-caption">
+        Now just share this link with anyone you want.
+      </div>
+    </div>
+
+    <div class="item">
+      <img src="{{ site.baseurl }}/images/uses/sharedsubdirs.png" alt="Here's a more complex collection. [END]">
+      <div class="carousel-caption">
+        Here's a more complex collection. [END]
+      </div>
+    </div>
+
+  </div>
+
+  <!-- Controls -->
+  <a class="left carousel-control" href="#carousel-sharedata" role="button" data-slide="prev">
+    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
+    <span class="sr-only">Previous</span>
+  </a>
+  <a class="right carousel-control" href="#carousel-sharedata" role="button" data-slide="next">
+    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
+    <span class="sr-only">Next</span>
+  </a>
+</div>
+
+Tip: You may need to make your browser window bigger to see full-size images in the gallery above.
diff --git a/doc/start/index.html.textile.liquid b/doc/start/index.html.textile.liquid
new file mode 100644 (file)
index 0000000..ddd856a
--- /dev/null
@@ -0,0 +1,127 @@
+---
+layout: default
+navsection: start 
+title: Welcome to Arvados!
+...
+
+This guide provides an introduction to using Arvados to solve big data bioinformatics problems.
+
+h2. What is Arvados?
+
+Arvados is a free and open source bioinformatics platform for genomic and biomedical data.
+
+We address the needs of IT directors, lab principals, and bioinformaticians.
+
+h2. Why use Arvados?
+
+Arvados enables you to quickly begin using cloud computing resources in your bioinformatics work. It allows you to track and your methods and datasets, share them securely, and easily re-run analyses.
+
+h3. Take a look (Screenshots gallery) 
+
+<div id="carousel-keyfeatures" class="carousel slide">
+  <!-- Indicators -->
+  <ol class="carousel-indicators">
+    <li data-target="#carousel-keyfeatures" data-slide-to="0" class="active"></li>
+    <li data-target="#carousel-keyfeatures" data-slide-to="1"></li>
+    <li data-target="#carousel-keyfeatures" data-slide-to="2"></li>
+    <li data-target="#carousel-keyfeatures" data-slide-to="3"></li>
+    <li data-target="#carousel-keyfeatures" data-slide-to="4"></li>
+    <li data-target="#carousel-keyfeatures" data-slide-to="5"></li>
+    <li data-target="#carousel-keyfeatures" data-slide-to="6"></li>
+    <li data-target="#carousel-keyfeatures" data-slide-to="7"></li>
+    <li data-target="#carousel-keyfeatures" data-slide-to="8"></li>
+  </ol>
+
+  <!-- Wrapper for slides -->
+  <div class="carousel-inner" role="listbox">
+    <div class="item active">
+      <img src="{{ site.baseurl }}/images/keyfeatures/dashboard2.png" alt="[START] After logging in, you see Workbench's dashboard.">
+      <div class="carousel-caption">
+        [START] After logging in, you see Workbench's dashboard.
+      </div>
+    </div>
+
+    <div class="item">
+      <img src="{{ site.baseurl }}/images/keyfeatures/running2.png" alt="Pipelines describe a set of computational tasks (jobs).">
+      <div class="carousel-caption">
+        Pipelines describe a set of computational tasks (jobs).
+      </div>
+    </div>
+
+    <div class="item">
+      <img src="{{ site.baseurl }}/images/keyfeatures/log.png" alt="The output of all jobs is logged and stored automatically.">
+      <div class="carousel-caption">
+        The output of all jobs is logged and stored automatically.
+      </div>
+    </div>
+
+    <div class="item">
+      <img src="{{ site.baseurl }}/images/keyfeatures/graph.png" alt="Pipelines can be also viewed in auto-generated graph form.">
+      <div class="carousel-caption">
+        Pipelines can be also viewed in auto-generated graph form.
+      </div>
+    </div>
+
+    <div class="item">
+      <img src="{{ site.baseurl }}/images/keyfeatures/rerun.png" alt="Pipelines can easily be re-run...">
+      <div class="carousel-caption">
+        Pipelines can easily be re-run...
+      </div>
+    </div>
+
+    <div class="item">
+      <img src="{{ site.baseurl }}/images/keyfeatures/chooseinputs.png" alt="...by changing parameters or picking new datasets...">
+      <div class="carousel-caption">
+        ...by changing parameters or picking new datasets...
+      </div>
+    </div>
+
+    <div class="item">
+      <img src="{{ site.baseurl }}/images/keyfeatures/webupload.png" alt="...which can be uploaded right in Workbench.">
+      <div class="carousel-caption">
+        ...which can be uploaded right in Workbench.
+      </div>
+    </div>
+
+    <div class="item">
+      <img src="{{ site.baseurl }}/images/keyfeatures/collectionpage.png" alt="Collections allow sharing datasets and job outputs easily.">
+      <div class="carousel-caption">
+        Collections allow sharing datasets and job outputs easily.
+      </div>
+    </div>
+
+    <div class="item">
+      <img src="{{ site.baseurl }}/images/keyfeatures/provenance.png" alt="Data provenance is tracked automatically. [END]">
+      <div class="carousel-caption">
+        Data provenance is tracked automatically. [END]
+      </div>
+    </div>
+
+
+  </div>
+
+  <!-- Controls -->
+  <a class="left carousel-control" href="#carousel-keyfeatures" role="button" data-slide="prev">
+    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
+    <span class="sr-only">Previous</span>
+  </a>
+  <a class="right carousel-control" href="#carousel-keyfeatures" role="button" data-slide="next">
+    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
+    <span class="sr-only">Next</span>
+  </a>
+</div>
+
+Tip: You may need to make your browser window bigger to see full-size images in the gallery above.
+
+h3. Key Features
+
+<ul>
+<li><strong>Track your methods</strong><br/>
+We log every compute job: software versions, machine images, input and output data hashes. Rely on a computer, not your memory and your note-taking skills.</li>
+<li><strong>Share your methods</strong><br/>
+Show other people what you did. Let them use your workflow on their own data. Publish a permalink to your methods and data, so others can reproduce and build on them easily.</li>
+<li><strong>Track data origin</strong><br/>
+Did you really only use fully consented public data in this analysis?</li>
+<li><strong>Get results sooner</strong><br/>
+Run your compute jobs faster by using multi-nodes and multi-cores, even if your programs are single-threaded.</li>
+</ul>
diff --git a/doc/start/index.html.textile.liquid.bkup b/doc/start/index.html.textile.liquid.bkup
new file mode 100644 (file)
index 0000000..339a84a
--- /dev/null
@@ -0,0 +1,50 @@
+---
+layout: default
+navsection: start 
+title: Welcome to Arvados!
+...
+
+This guide provides an introduction to using Arvados to solve big data bioinformatics problems.
+
+
+h2. Typographic conventions
+
+This manual uses the following typographic conventions:
+
+<notextile>
+<ul>
+<li>Code blocks which are set aside from the text indicate user input to the system.  Commands that should be entered into a Unix shell are indicated by the directory where you should  enter the command ('~' indicates your home directory) followed by '$', followed by the highlighted <span class="userinput">command to enter</span> (do not enter the '$'), and possibly followed by example command output in black.  For example, the following block indicates that you should type <code>ls foo.*</code> while in your home directory and the expected output will be "foo.input" and "foo.output".
+</notextile>
+
+<div class="custom-container key-features">
+<a class="prev" href="#">‹</a>
+
+<div class="carousel">
+    <ul>
+        <li><img class="hascaption" src="{{ site.baseurl }}/images/keyfeatures/dashboard2.png" style="width:909px; height:503px;" title="[START] After logging in, you see Workbench's dashboard."></li>
+        <li><img class="hascaption" src="{{ site.baseurl }}/images/keyfeatures/running2.png" style="width:909px; height:503px;" title="Pipelines describe a set of computational tasks (jobs)."></li>
+        <li><img class="hascaption" src="{{ site.baseurl }}/images/keyfeatures/log.png" style="width:909px; height:503px;" title="The output of all jobs is logged and stored automatically."></li>
+        <li><img class="hascaption" src="{{ site.baseurl }}/images/keyfeatures/graph.png" style="width:909px; height:503px;" title="Pipelines can be also viewed in auto-generated graph form."></li>
+        <li><img class="hascaption" src="{{ site.baseurl }}/images/keyfeatures/rerun.png" style="width:909px; height:503px;" title="Pipelines can easily be re-run..."></li>
+        <li><img class="hascaption" src="{{ site.baseurl }}/images/keyfeatures/chooseinputs.png" style="width:909px; height:503px;" title="...by changing parameters or picking new datasets..."></li>
+        <li><img class="hascaption" src="{{ site.baseurl }}/images/keyfeatures/webupload.png" style="width:909px; height:503px;" title="...which can be uploaded right in Workbench."></li>
+        <li><img class="hascaption" src="{{ site.baseurl }}/images/keyfeatures/collectionpage.png" style="width:909px; height:503px;" title="Collections allow sharing datasets and job outputs easily."></li>
+        <li><img class="hascaption" src="{{ site.baseurl }}/images/keyfeatures/provenance.png" style="width:909px; height:503px;" title="Data provenance is tracked automatically. [END]"></li>
+    </ul>
+</div>
+<a class="next" href="#">›</a>
+<div class="clear"></div>
+</div>
+
+<script type="text/javascript">
+(function() {
+    $(".key-features .carousel").jCarouselLite({
+        btnNext: ".key-features .next",
+        btnPrev: ".key-features .prev",
+        visible: 1,
+    });
+});
+('.hascaption').each(function() {
+    $(this).after( "<div style='background: rgba(0,0,0,0.6); color: white; padding: 1.4em;'>" + $(this).attr('title') + "</div>" ); 
+});
+</script>