getting started button format update, voting app services topic intro

added more concept definitions to intro topics copy edit to clarify something changed topic title updated topic title in TOC as well text formatting, re-push for new Jenkins fixed installer download buttons in Getting Startd to specify a button type Signed-off-by: Victoria Bialas <[email protected]>
aaronmarkham · Jan 25, 2017 · 9adbe01 · 9adbe01
1 parent 8e89b43
commit 9adbe01
Show file tree

Hide file tree

Showing 7 changed files with 90 additions and 36 deletions.
diff --git a/_data/toc.yaml b/_data/toc.yaml
@@ -140,7 +140,7 @@ toc:
   - sectiontitle: Define and deploy your app
     section:
     - path: /engine/getstarted-voting-app/
-      title: Tour the voting app sample
+      title: Sample app overview
     - path: /engine/getstarted-voting-app/node-setup/
       title: Set up Dockerized machines
     - path: /engine/getstarted-voting-app/create-swarm/

diff --git a/css/documentation.css b/css/documentation.css
@@ -137,13 +137,34 @@
 /* reset away from #008AB5 */
 
 #DocumentationText a.button {
-	color: #fff;
 }
 
 #DocumentationText .darkblue-btn {
     color: #ffffff;
     margin-top: 15px;
 }
+
+#DocumentationText .secondary-btn,
+   button .secondary-btn {
+     border: 2px solid #1488c6;
+     color: #1488c6;
+     background: white;
+     margin-top: 15px;
+     font-size: 14px;
+     padding: 12px 30px 12px 30px;
+     text-decoration: none;
+     font-family: Open Sans, sans-serif;
+     font-weight: 700;
+}
+
+#DocumentationText button.secondary-btn {
+    background: transparent;
+}
+#DocumentationText .secondary-btn:hover,
+   button .secondary-btn:hover {
+   opacity: .8;
+}
+
 #DocumentationText table {
     margin: 1.25rem 0;
     width: 100%;

diff --git a/engine/getstarted-voting-app/index.md b/engine/getstarted-voting-app/index.md
@@ -1,30 +1,34 @@
 ---
 description: overview of voting app example
 keywords: docker-stack.yml, stack deploy, compose, multi-container, services, swarm mode, cluster, voting app,
-title: Tour the voting app
+title: Sample app overview
 ---
 
-This example is built around a web-based voting application that collects,
-tallies, and returns the results of votes (for cats and dogs, or other choices
-you specify). The voting app includes several services, each one running in its
-own container. We'll deploy the app as a _stack_ to introduce some new concepts
-surfaced in [Compose Version 3](/compose/compose-file.md#version-3), and also
-use [swarm mode](/engine/swarm/index.md), which is cluster management and
-orchestration capability built into Docker Engine.
+This example is built around a web-based voting application
+that collects, tallies, and returns the results of votes
+(for cats and dogs, or other choices you specify). The voting
+app includes several services, each one running in its
+own container. We'll deploy the app as a _stack_ to introduce
+some new concepts surfaced in
+[Compose Version 3](/compose/compose-file.md#version-3), and
+also use [swarm mode](/engine/swarm/index.md), which is
+cluster management and orchestration capability built into
+Docker Engine.
 
 ## Got Docker?
 
-If you haven't yet downloaded Docker or installed it, go to [Get
-Docker](/engine/getstarted/step_one.md#step-1-get-docker) and grab Docker for
-your platform.  You can follow along and run this example using Docker for Mac,
-Docker for Windows or Docker for Linux.
+If you haven't yet downloaded Docker or installed it, go to
+[Get Docker](/engine/getstarted/step_one.md#step-1-get-docker)
+and grab Docker for your platform.  You can follow along and
+run this example using Docker for Mac, Docker for Windows or
+Docker for Linux.
 
-Once you have Docker installed, you can run `docker hello-world` or other
-commands described in the Get Started with Docker tutorial to [verify your
-installation](/engine/getstarted/step_one.md#step-3-verify-your-installation).
-If you are totally new to Docker, you might continue through the full [Get
-Started with Docker tutorial](/engine/getstarted/index.md) first, then come
-back.
+Once you have Docker installed, you can run `docker hello-world`
+or other commands described in the Get Started with Docker
+tutorial to [verify your installation](/engine/getstarted/step_one.md#step-3-verify-your-installation).
+If you are totally new to Docker, you might continue through
+the full [Get Started with Docker tutorial](/engine/getstarted/index.md)
+first, then come back.
 
 ## What you'll learn and do
 
@@ -41,10 +45,17 @@ the `docker stack deploy` command
 `vote` image to implement a poll on different choices
 * Use features new in Compose Version 3, highlighted in the sample app
 
-## Anatomy of the voting app
+## Services and images overview
 
-The voting app you are about to deploy is composed of several services:
+A service is a bit of executable code designed to accomplish
+a specific task. A service can run in one or more
+containers. Defining a service configuration for your app
+(above and beyond `docker run` commands) enables you to
+deploy it to a swarm and manage it as a distributed
+multi-container application.
 
+The voting app you are about to deploy is composed
+of several services, each based on an image:
 
 | Service        | Description | Base Image  |
 | ------------- |--------------| -----|
@@ -89,16 +100,37 @@ The `deploy` key specifies aspects of a swarm deployment, as described below in
 [Compose Version 3 features and
 compatibility](#compose-v3-features-and-compatibility).
 
-## docker-stack.yml deployment configuration
+## docker-stack.yml deployment configuration file
 
-We'll deploy the app using `docker-stack.yml`, which is a type of [Compose
+In addition to defining a set of build and run commands in a Dockerfile, you can
+define services in a [Compose file](/compose/compose-file.md), along with
+details about how and where those services will run.
+
+In the Getting Started with Docker tutorial, you wrote a
+[Dockerfile for the whalesay app](/engine/getstarted/step_four.md) then used
+it to build the image and run it in a container.
+
+For this tutorial, the Dockerfiles for our services are already written, the
+images are pre-built, and when we deploy, each service will run in a container
+(or more than one, for those that have replicas defined to scale the app).
+
+To understand the relationship between Compose files and Dockerfiles, take a
+quick look at the [source code for the voting app
+here](https://github.com/docker/example-voting-app). For example, the vote
+service is based on a Python image built using the [Dockerfile for
+`vote`](https://github.com/docker/example-voting-app/blob/master/vote/Dockerfile)
+and the vote result service is based on vote result service is based on a
+Node.js image built using the [Dockerfile for
+`vote_result`](https://github.com/docker/example-voting-app/blob/master/result/Dockerfile).
+
+We'll deploy this app using `docker-stack.yml`, which is a type of [Compose
 file](/compose/compose-file.md) new in Compose Version 3.  
 
-To follow along with the example, you need only have Docker running and the copy
-of `docker-stack.yml` we provide here. This file defines all the services shown
-in the [table above](#anatomy-of-the-voting-app), their base images,
-configuration details such as ports and networks, application dependencies, and
-the swarm configuration.
+To follow along with the example, you need only have Docker running and
+the copy of `docker-stack.yml` we provide here. This file defines all
+the services shown in the [table above](#services-and-images-overview),
+their base images, configuration details such as ports and
+networks, application dependencies, and the swarm configuration.
 
 ```
 version: "3"

diff --git a/engine/getstarted/step_four.md b/engine/getstarted/step_four.md
@@ -24,7 +24,8 @@ version that "talks on its own" and requires fewer words to run.
 
 ## Step 1: Write a Dockerfile
 
-In this step, you use a text editor to write a short Dockerfile.  A Dockerfile
+In this step, you use a text editor to write a short
+[Dockerfile](/engine/reference/builder.md).  A Dockerfile
 is a recipe which describes the files, environment, and commands that make up an
 image. Your recipe is going to be very short.
 

diff --git a/engine/getstarted/step_one.md b/engine/getstarted/step_one.md
@@ -25,7 +25,7 @@ title: Install Docker and run hello-world
 
 Docker for Mac is our newest offering for the Mac. It runs as a native Mac application and uses <a href="https://github.com/mist64/xhyve/" target="_blank">xhyve</a> to virtualize the Docker Engine environment and Linux kernel-specific features for the Docker daemon.
 
-<a class="button" href="https://download.docker.com/mac/stable/Docker.dmg">Get Docker for Mac</a>
+<a class="button darkblue-btn" href="https://download.docker.com/mac/stable/Docker.dmg">Get Docker for Mac</a>
 
 **Requirements**
 
@@ -47,7 +47,7 @@ See [Docker Toolbox Overview](/toolbox/overview.md) for help on installing Docke
 
 Docker for Windows is our newest offering for PCs. It runs as a native Windows application and uses Hyper-V to virtualize the Docker Engine environment and Linux kernel-specific features for the Docker daemon.
 
-<a class="button" href="https://download.docker.com/win/stable/InstallDocker.msi">Get Docker for Windows</a>
+<a class="button darkblue-btn" href="https://download.docker.com/win/stable/InstallDocker.msi">Get Docker for Windows</a>
 
 **Requirements**
 

diff --git a/index.md b/index.md
@@ -32,9 +32,9 @@ production environment. Highlights [Compose Version 3 new features](/engine/gets
 </td></tr>
 
 <tr valign="top">
-<td width="50%">{% capture basics %}[Start the basic tutorial](/engine/getstarted/){: class="button darkblue-btn"}{% endcapture %}{{ basics | markdownify }}
+<td width="50%">{% capture basics %}[Start the basic tutorial](/engine/getstarted/){: class="button secondary-btn"}{% endcapture %}{{ basics | markdownify }}
 </td>
-<td width="50%">{% capture apps %}[Start the application tutorial](/engine/getstarted-voting-app/){: class="button darkblue-btn"}{% endcapture %}{{ apps | markdownify }}
+<td width="50%">{% capture apps %}[Start the application tutorial](/engine/getstarted-voting-app/){: class="button secondary-btn"}{% endcapture %}{{ apps | markdownify }}
 </td>
 </tr>
 </table>

diff --git a/learn.md b/learn.md
@@ -33,12 +33,12 @@ production environment. Highlights [Compose Version 3 new features](/engine/gets
 <tr valign="top">
 <td width="50%">
 {% capture basics %}
-[Start the basic tutorial](/engine/getstarted/){: class="button darkblue-btn"}
+[Start the basic tutorial](/engine/getstarted/){: class="button secondary-btn"}
 {% endcapture %}{{ basics | markdownify }}
 </td>
 <td width="50%">
 {% capture apps %}
-[Start the application tutorial](/engine/getstarted-voting-app/){: class="button darkblue-btn"}
+[Start the application tutorial](/engine/getstarted-voting-app/){: class="button secondary-btn"}
 {% endcapture %}{{ apps | markdownify }}
 </td>
 </tr>