Lots of changes, updates to content, new images, new files, renamed f…

…iles. Still a work in progress. Checking in today's latest.
phonegap · Mar 20, 2015 · 10ce075 · 10ce075
1 parent 3aa6a8f
commit 10ce075
Show file tree

Hide file tree

Showing 25 changed files with 232 additions and 44 deletions.
diff --git a/docs/guides/create/cli b/docs/guides/create/cli
diff --git a/docs/guides/create/cli-create.md b/docs/guides/create/cli-create.md
@@ -0,0 1,44 @@
 <link href="../css/styles.css" rel="stylesheet">
 <link href="../css/bootstrap.css" rel="stylesheet">
 
 ###PhoneGap CLI - Creating a Project
 
 There are multiple ways to create a PhoneGap mobile app project using the CLI. You can use a shortcut, which will create a default project based on a Hello World app with a project name and identifier set to the default Hello World project. You can also specify your own name and identifier to replace in the generated Hello World project by specifiying them as parameters on the project. 
 
 <div class="callout callout-info"><button class="btn-info">?</button>
 For quick help at any time, type `help` i.e.: `$ phonegap help` or `$ phonegap create help`</div>
 
 1. In this step, we're going to create the default Hello World project with the PhoneGap CLI, but specify our name and identifier for it to keep it unique. 
 
 
  To create a project with an id and name, use a command like shown below, replacing the values with your own:
 
   $ phonegap create path/to/appSample "org.myapp.sample" "appSample" 
   
 
  You could also specify the `--` with the parameters to explicitly identify them as shown below:
 
 
   $ phonegap create path/to/appSample --id "org.myapp.sample" --name "appSample" 
 
 
  Each of the `create` command options is documented in the help text and the CLI Reference guide.
 
 2. Verify that you see output like the following in your console after you run the command:
 
   Creating a new cordova project with name "appSample" and id "org.myapp.sample" at location "path/to/appSample"
 
   Using custom www assets from https://github.com/phonegap/phonegap-app-hello-world/archive/master.tar.gz`
   
 3. Change into the new project directory with the `cd` command:
 
   $ cd path/to/appSample
 
 4. Check to be sure you see what looks like the set of files and folders here below:
 
   config.xml hooks platforms plugins www
 
 <hr>
 Congratulations! You've created your own uniquely named version of the default PhoneGap Hello World project. In the next step we'll learn how we can make it available for preview by the PhoneGap Developer App on your mobile device with one simple command!
 <hr>
 <a href="cli-install.html"><button class="btn">Previous</button></a><a href="../run/cli-serve.html"><button class="btn" style="float:right">Next</button></a>
diff --git a/docs/guides/create/desktop b/docs/guides/create/desktop
diff --git a/docs/guides/create/desktop-create.md b/docs/guides/create/desktop-create.md
@@ -0,0 1,30 @@
 <link href="../css/styles.css" rel="stylesheet">
 <link href="../css/bootstrap.css" rel="stylesheet">
 
 ###PhoneGap Desktop App - Creating a Project
 
 
 Now let's get our feet wet and create our first PhoneGap project. This project will become a mobile app with the ability to run on multiple devices and across operating systems in minutes with just a few simple steps.
 <hr>
 ####Hello World
 The PhoneGap desktop tools include a default Hello World project for beginners to start with. It's proven to be the quickest and easiest way to understand the basics of building a mobile PhoneGap app so let's start there:
 
 1. Click the plus sign and select Create new PhoneGap project' as shown below:
 
  <img src="../images/desktop-app-plus-sm.png"/>
 2. You will be presented with a screen to enter information about your project. Enter the path on your local hard drive to create the project, a designated name and optional *identifier*. 
 
  <img src="../images/desktop-app-create-info.jpg" width="350" height="500"/>
 
  <div class="callout callout-info"><button class="btn-info">i</button> Be aware that the ID field is also known as the *package identifier* for Android and the *bundle identifier* for iOS.</div>
 
  Once the information has been entered, click the green *Create Project* button.
 
 3. Now you should be presented with a view like below, with your new project shown and a green play button next to it. Also note the green bar at the bottom with a server address, we'll need this in our next step. 
 
  <img src="../images/desktop-app-create.jpg" width="350" height="500"/>
 
 <hr>
 Congratulations! You've created your own uniquely named version of the default PhoneGap Hello World project. In the next step we'll learn how we can make it available for preview by the PhoneGap Developer App on your mobile device with one simple command!
 <hr>
 <a href="../install/desktop-install.html"><button class="btn">Previous</button></a><a href="../run/desktop-serve.html"><button class="btn" style="float:right">Next</button></a>
diff --git a/docs/guides/css/bootstrap.css b/docs/guides/css/bootstrap.css
diff --git a/docs/guides/css/styles.css b/docs/guides/css/styles.css
@@ -1,6 1,9 @@
-body {
 
 p h1 h2 h3 h4 {
  font-family: "Helvetica Neue", Arial;
  margin-left: 20px;
 }
 
 @media only screen and (min-width: 64.0625em) {
  .path-item .circlenumber {
  position: absolute;
@@ -40,7 43,10 @@ body {
  border-left-color: #f0ad4e;
 }
 .callout-tip {
- border-left-color: #754799;
  border-left-color: #349981;
 }
 .callout-help {
  border-left-color: #994992;
 }
 .callout-success {
  border-left-color: #209940;
@@ -55,4 61,36 @@ body {
 }
 .btn-group {
  padding: 220px;
 }
 .btn-circle {
  width: 30px;
  height: 30px;
  padding: 6px 0;
  border-radius: 15px;
  text-align: center;
  font-size: 12px;
  line-height: 1.428571429;
 }
 .btn-info {
  width: 30px;
  height: 30px;
  padding: 6px 0;
  border-radius: 15px;
  text-align: center;
  font-size: 12px;
  line-height: 1.428571429;
  background-color: #006699;
  color: white;
 }
 
 .btn-help {
  width: 30px;
  height: 30px;
  padding: 6px 0;
  border-radius: 15px;
  text-align: center;
  font-size: 12px;
  line-height: 1.428571429;
  background-color: #994992;
  color: white;
 }
diff --git a/docs/guides/images/desktop-app-create-info.jpg b/docs/guides/images/desktop-app-create-info.jpg
diff --git a/docs/guides/images/desktop-app-create.jpg b/docs/guides/images/desktop-app-create.jpg
diff --git a/docs/guides/images/desktop-app-run.jpg b/docs/guides/images/desktop-app-run.jpg
diff --git a/docs/guides/images/dev-app-icon.png b/docs/guides/images/dev-app-icon.png
diff --git a/docs/guides/images/dev-app-main.jpg b/docs/guides/images/dev-app-main.jpg
diff --git a/docs/guides/images/drag-to-apps-folder.jpg b/docs/guides/images/drag-to-apps-folder.jpg
diff --git a/docs/guides/images/license-agreement.jpg b/docs/guides/images/license-agreement.jpg
diff --git a/docs/guides/images/phonegap-app-developer-workflow-v3.gif b/docs/guides/images/phonegap-app-developer-workflow-v3.gif
diff --git a/docs/guides/index.md b/docs/guides/index.md
@@ -1,3 1,5 @@
 # Guides
 
 This is here so that the navigation can be generated.
 
 <a href="install/install-guide.md"><h3>Install Guide</h3></a>
diff --git a/docs/guides/install/cli-install.md b/docs/guides/install/cli-install.md
@@ -0,0 1,42 @@
 <link href="../css/styles.css" rel="stylesheet">
 <link href="../css/bootstrap.css" rel="stylesheet">
 
 ###PhoneGap CLI Installation 
 
 
 <hr>
 ####Requirements
 
 - [node.js](http://nodejs.org/) - a server based app platform
 - [ios-sim]
 (https://github.com/phonegap/ios-sim#installation) - iOS simulator for iOS development (Mac only)
 - [git] (http://git-scm.com) - used in the background by the CLI to download assets. It comes pre-installed on some operating systems, to see if you already have it installed, type `git` from the command line. 
 
 ####Install Steps
 
 1. Install the PhoneGap CLI via `npm`
 
  `$ npm install -g phonegap`
 
  <div class="callout callout-help"> <button class="btn-help">Tip</button> OSX Users may need to prefix this command with `sudo` to allow installation to restricted directories.
 
   $ npm install -g phonegap
  </div>
 2. Try it! Type `phonegap` on the command line and check to ensure you see the following command line `help` text display:
 
   $ phonegap
   Usage: phonegap [options] [commands]
   Description:
   PhoneGap command-line tool.
   Commands:
   help [command] output usage information
   create <path> create a phonegap project
   ...
 
 <div class="callout callout-info"><button class="btn-info">?</button>
 For quick help at any time, type `help` i.e.: `$ phonegap help` or `$ phonegap create help`</div>
 
 <hr>
 You are now ready to move on to the next step and create your first project!
 <hr>
 <a href="install-guide.html"><button class="btn">Previous</button></a><a href="developer-install.html"><button class="btn" style="float:right">Next</button></a>
diff --git a/docs/guides/install/cli.md b/docs/guides/install/cli.md
diff --git a/docs/guides/install/desktop.md → docs/guides/install/desktop-install.md b/docs/guides/install/desktop.md → docs/guides/install/desktop-install.md
@@ -1,7 1,7 @@
 <link href="../css/styles.css" rel="stylesheet">
 <link href="../css/bootstrap.css" rel="stylesheet">
 
-### PhoneGap Desktop App Installation Guide
 ### PhoneGap Desktop App Installation
 
 1. Download the installer for your operating system
  - [Mac OSX](https://github.com/phonegap/phonegap-app-desktop/releases/download/0.1.3/PhoneGapDesktop.dmg)
@@ -13,13 13,19 @@
 
  <img src="../images/license-agreement.jpg" width="500" height="397"/>
 
-4. Move to the final desired location
 4. Move the app to the final desired location
 
  On a Mac, drag and drop the PhoneGap app to the Applications folder as shown below:
 
   <img src="../images/drag-to-apps-folder.jpg" width="500" height="397"/>
 
  On Windows, move the PhoneGap folder to your desired location.
 
 5. That's it! Click on the app icon <img src="../images/dev-app-icon.png" width="50" height="50" align="middle"/>and get started!
 
  <img src="../images/desktop-app-run.jpg" width="360" height="500" align="middle"/>
 
 <hr>
 You're now ready to move on to the next step and create your first project!
 <hr>
 <a href="install-guide.html"><button class="btn">Previous</button></a><a href="developer-install.html"><button class="btn" style="float:right">Next</button></a>
diff --git a/docs/guides/install/developer-install.md b/docs/guides/install/developer-install.md
@@ -0,0 1,26 @@
 <link href="../css/styles.css" rel="stylesheet">
 <link href="../css/bootstrap.css" rel="stylesheet">
 
 ###Part 2: Install the PhoneGap Developer App to your device
 
 The PhoneGap Developer app allows you to test and preview the PhoneGap mobile app projects you develop on your device quickly without having to hassle with any other installs.
 
 1. Locate the free PhoneGap Developer mobile app from one of the following app marketplaces and install it to your mobile device.
 
  - [iTunes](https://itunes.apple.com/app/id843536693)
  - [Google Play](https://play.google.com/store/apps/details?id=com.adobe.phonegap.app)
  - [Windows Phone Store](http://www.windowsphone.com/en-us/store/app/phonegap-developer/5c6a2d1e-4fad-4bf8-aaf7-71380cc84fe3)
 
 
 2. Once installed, click on the app icon <img src="../images/dev-app-icon.png" width="50" height="50" align="middle"/> to open it. You should see a screen that looks like below:
 
  <img src="../images/dev-app-main.jpg"/>
 
 <hr>
 Congratulations! You have completed the installation and can now move on to the fun part, creating a mobile app! Hit the **Next** button below to get started. 
 <hr>
 <!--TODO: Use history to determine where this came from and return to that page for the previous button (could be cli.html or desktop.html)-->
 <a href="cli-install.html"><button class="btn">CLI Previous</button></a><a href="../create/cli-create.html"><button class="btn" style="float:right">CLI Next</button></a>
 
 <br><hr>
 <a href="desktop-install.html"><button class="btn">Previous</button></a><a href="../create/desktop-create.html"><button class="btn" style="float:right">Next</button></a>
diff --git a/docs/guides/install/developer.md b/docs/guides/install/developer.md
diff --git a/docs/guides/install/install-guide.md b/docs/guides/install/install-guide.md
@@ -0,0 1,27 @@
 <link href="../css/styles.css" rel="stylesheet">
 <link href="../css/bootstrap.css" rel="stylesheet">
 
 ##PhoneGap Installation Guide
 
 In this guide we'll cover everything you need to know to get PhoneGap up and running so you can start building awesome mobile apps. 
 
 The fastest way to get started using PhoneGap is to install one of the PhoneGap desktop tools and pair it with the PhoneGap Developer app installed on your mobile device. 
 
 <div class="callout callout-info"><button class="btn-info">i</button> The desktop tools are used to **create** your mobile app projects, while the PhoneGap Developer App is used to **preview** and **test** the apps directly on your mobile device. </div>
 
 ###Part 1: Install a Desktop Tool
 Two desktop tools are available to choose from depending on your personal preference and comfort level. The PhoneGap Command Line Interface tool and the PhoneGap Desktop App. 
 
 Select one of the following options below for specific installation instructions. You will be taken to the next step from there. 
 
 1. [The PhoneGap Command Line Interface (CLI)](cli-install.html)
 
 2. [The PhoneGap Desktop App](desktop-install.html)
 
 
 <div class="callout callout-help"> <button class="btn-help">Tip</button> If you're most comfortable on the command line and using [Node.js](http://nodejs.org) and [npm](http://npmjs.org) then choose the CLI option, otherwise you may want to start with the Desktop App. Both tools use the same underlying libraries and will allow you to create, build and run your project. </div>
 
 
 
 
 
diff --git a/docs/guides/quickstart.md b/docs/guides/quickstart.md
@@ -3,6 3,8 @@
 
 ###PhoneGap Desktop App Quick Start
 
 1. Install 
 
 1. Download the [PhoneGap Desktop App](https://github.com/phonegap/phonegap-app-desktop/releases) to your desktop, install, and launch.
 
 2. Click the ** ** sign to create a new project or add an existing one to the workspace

diff --git a/docs/guides/run/cli-serve.md b/docs/guides/run/cli-serve.md
@@ -0,0 1,4 @@
 <link href="../css/styles.css" rel="stylesheet">
 <link href="../css/bootstrap.css" rel="stylesheet">
 
 ### PhoneGap CLI - Serve
diff --git a/docs/guides/run/desktop-serve.md b/docs/guides/run/desktop-serve.md
@@ -0,0 1,4 @@
 <link href="../css/styles.css" rel="stylesheet">
 <link href="../css/bootstrap.css" rel="stylesheet">
 
 ### PhoneGap Desktop App - Serve
diff --git a/docs/index.html.md b/docs/index.html.md
@@ -2,6 2,8 @@
 
 A search box may be here
 
 <a href="guides/"><h3>Guides</h3></a>
 
 ![New docs are getting packaged up!](/images/package-closed.png)
 
 A side bar may show the navigation