Merge branch '44-rewrite' into style-foundation

phonegap · Mar 30, 2015 · 34bcd7f · 34bcd7f
2 parents b791d9e 2bd7455
commit 34bcd7f
Show file tree

Hide file tree

Showing 34 changed files with 399 additions and 69 deletions.
diff --git a/docs/guides/cli-quickstart.md b/docs/guides/cli-quickstart.md
@@ -1,7 1,7 @@
 <link href="css/styles.css" rel="stylesheet">
 <link href="css/bootstrap.css" rel="stylesheet">
 
-#PhoneGap CLI Quick Start
 ###PhoneGap CLI Quick Start
 
 1. Install the PhoneGap CLI
 

diff --git a/docs/guides/create/cli-create.md b/docs/guides/create/cli-create.md
@@ -0,0 1,39 @@
 <link href="../css/styles.css" rel="stylesheet">
 <link href="../css/bootstrap.css" rel="stylesheet">
 <div class="sidebar"></div>
 
 ##Step 3: Create a PhoneGap Project
 <hr>
 ### Hello PhoneGap
 There are multiple ways to create a PhoneGap mobile app project using the CLI. You can use a very simple shortcut command which will create a default project based on a Hello World app with a project name and identifier set to the defaults by running `$ phonegap create myApp`. 
 
 This will create a folder named *myApp* in the current path location with a default project name of "Hello World" and id "com.phonegap.helloworld". However, you can also specify your own name and identifier to ensure the project is unique but still have the advantage of using the default Hello World code by specifying a couple extra attributes at create time.
 
 1. In this step, we're going to create the default Hello World project with the PhoneGap CLI, but specify a name and identifier to make it unique. 
  <br><br>To create a project with an id and name, use the command shown below with your own values:
 
   $ phonegap create path/to/appSample "org.myapp.sample" "appSample" 
 You could also specify `--` with the parameters to explicitly identify them as shown below:
  $ phonegap create path/to/appSample --id "org.myapp.sample" --name "appSample" 
  <div class="alert alert-info">**TIP:** Each of the `create` command options is documented in the help text and can be accessed with `$ phonegap create help`. To access general help from the CLI, type `-h` or `help` with any command.</div>
 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`
 
  This output makes it clear that we have created a new project with our own unique name and id but using the Hello World default PhoneGap project as the content. 
 3. Change into the new project directory with the `cd` command:
 
   $ cd path/to/appSample
 
 4. Check to be sure you see the following set of files and folders shown below:
 
   config.xml hooks platforms plugins www
 5. `cd` into the *www* folder and look around at the files and subfolders in there, this is the content of your app, with the entry point being the **index.html** file. 
  <div class="alert alert-warning">**NOTE:** Details about the rest of the files and folders created in the root project will be covered in guides further along. For now just focus on the *www* folder and its contents since that is the essence of your app.</div>
 
 <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/developer-install.html"><button class="btn-prev"><- Step 2: Install the PhoneGap Developer App</button></a><a href="../run/cli-serve.html"><button class="btn-next">Step 4: Run your App! -></button></a>
diff --git a/docs/guides/create/desktop-create.md b/docs/guides/create/desktop-create.md
@@ -0,0 1,32 @@
 <link href="../css/styles.css" rel="stylesheet">
 <link href="../css/bootstrap.css" rel="stylesheet">
 <div class="sidebar"></div>
 
 ##Step 3: Create a PhoneGap Project
 <hr>
 
 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 with just a few simple steps.
 <hr>
 ####Default 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*. Once the information has been entered, click the green *Create project* button.
 
 
  <img src="../images/desktop-app-create-info2.jpg" width="504" height="500"/>
 
  <div class="alert alert-warning">**NOTE:** Be aware that the ID field is also known as the *package identifier* for Android and the *bundle identifier* for iOS.</div>
 
 
 3. You should now see a view like below, with your new project shown and marked with a left green sidebar, a green play button next to it and a green bar at the bottom with a server address indicating it's the active project and running. 
 
  <img src="../images/desktop-app-create.jpg" width="350" height="500"/>
 
  <div class="alert alert-info">**TIP:** The server address shown for your project at the bottom in the green bar will be used in the next step so make note of it or keep it running. </div>
 <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/developer-install.html"><button class="btn-prev"><- Step 2: Install the PhoneGap Developer App</button></a><a href="../run/desktop-serve.html"><button class="btn-next">Step 4: Run your App! -></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,20 @@
 body {
  margin-left: 250px;
 
 }
 .sidebar {
  position: absolute;
  top: 0;
  left: 0;
  width: 230px;
  height: 4000px;
  background-color: #0b4f69;
 }
 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,8 54,71 @@ 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;
 }
 .btn {
 
 }
 .btn-next {
  float: right;
  background-color: #238fb8;
  color: white;
  margin-bottom: 7px;
  border-radius: 8px;
  border-style: solid;
 
 }
 .btn-prev {
  float: left;
  background-color: #238fb8;
  color: white;
  margin-bottom: 7px;
  border-radius: 8px;
  border-style: solid;
 }
 .btn-large {
  height: 150px;
  width: 150px;
  font-size: 30px;
 }
 .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-info2.jpg b/docs/guides/images/desktop-app-create-info2.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-code-update.jpg b/docs/guides/images/dev-app-code-update.jpg
diff --git a/docs/guides/images/dev-app-enter-add.jpg b/docs/guides/images/dev-app-enter-add.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/dev-app-preview.jpg b/docs/guides/images/dev-app-preview.jpg
diff --git a/docs/guides/images/dev-app-success.jpg b/docs/guides/images/dev-app-success.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/editor.jpg b/docs/guides/images/editor.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">
 <div class="sidebar"></div>
 
 ##Step 1: Install the PhoneGap CLI 
 
 
 <hr>
 ###Requirements
 
 - [node.js](http://nodejs.org/) - a JavaScript runtime to build your JavaScript code
 - [ios-sim](https://github.com/phonegap/ios-sim#installation) - an 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](https://www.npmjs.com/package/phonegap) via `npm` with the following command from the Terminal app (Mac) or Command Prompt (Win). 
 `$ npm install -g phonegap`
 
  <div class="callout callout-info">**QUICK TIPS** 
   - The `$` symbol is used throughout this guide to indicate the command prompt, it should not be typed.
   - `npm` is the node package manager and installed with node.js. The `npm` command fetches the necessary dependencies for the PhoneGap CLI to run on your local machine. It creates a *node_modules* folder with the necessary code needed to run the CLI. The `-g` flag specifies that folder to be installed at the global location so it can be accessed from anywhere on your machine (defaults to */usr/local/lib/node_modules/phonegap* on Mac).
  </div>
 
  <div class="alert alert-warning">**OS X Users:** You may need to prefix this command with `sudo` to allow installation to restricted directories and type the following instead: `$ sudo npm install -g phonegap`<br><br>
  **Windows 8 Users:** If you just installed Node.js, be sure to start the *Node.js Command Prompt* application specifically.</div>
 2. Test to ensure the PhoneGap CLI is properly installed by typing `phonegap` on the command line to ensure you see the following output `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="alert alert-info">**TIP:** You can access the PhoneGap CLI usage text at any time by adding the keyword `help`, `-h` or `--h` with any phonegap command i.e.: `phonegap create help`,`phonegap serve -h`.</div>
 <hr>
 <a href="install-guide.html"><button class="btn-prev"><- Step 0: Choose a Desktop Tool</button></a><a href="developer-install-cli.html"><button class="btn-next">Step 2: Install the Developer App -></button></a>
diff --git a/docs/guides/install/cli.md b/docs/guides/install/cli.md
diff --git a/docs/guides/install/desktop-install.md b/docs/guides/install/desktop-install.md
@@ -0,0 1,31 @@
 <link href="../css/styles.css" rel="stylesheet">
 <link href="../css/bootstrap.css" rel="stylesheet">
 <div class="sidebar"></div>
 
 ## Step 1: Install the PhoneGap Desktop App
 <hr>
 
 
 1. Download the installer for your operating system:
  - [Mac OSX](https://github.com/phonegap/phonegap-app-desktop/releases/download/0.1.3/PhoneGapDesktop.dmg) 
  - [Windows](https://github.com/phonegap/phonegap-app-desktop/releases/download/0.1.3/PhoneGapSetup.exe)
 2. Double click the downloaded file to run the installer.
 3. Accept the license agreement that is shown as below:<br>
  <img src="../images/license-agreement.jpg" width="500" height="397"/>
 
 4. Move the app to its final 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, drag 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 mobile app project!
 <hr>
 <a href="install-guide.html"><button class="btn-prev"><- Step 0: Choose a Desktop Tool</button></a><a href="developer-install.html"><button class="btn-next">Step 2: Install the Developer App -></button></a>
diff --git a/docs/guides/install/desktop.md b/docs/guides/install/desktop.md
diff --git a/docs/guides/install/developer-install-cli.md b/docs/guides/install/developer-install-cli.md
@@ -0,0 1,24 @@
 <link href="../css/styles.css" rel="stylesheet">
 <link href="../css/bootstrap.css" rel="stylesheet">
 <div class="sidebar"></div>
 
 ##Step 2: Install the PhoneGap Developer App<hr>
 
 The *PhoneGap Developer App* allows you to preview and test the PhoneGap mobile app projects you build on multiple devices across different platforms without having to install and set up each platform SDK. All you need to do is install the app to the devices you would like to preview your own apps on and go through the next couple quick steps in this guide to see exactly how it works.
 
 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"/>
 3. At this point installation is as far as we need to go until we have an app to preview.
 <hr>
 Congratulations! You have completed the installation and can now move on to the fun part, creating your first mobile PhoneGap app. Click the Step 3 button below to get started! 
 
 <hr>
 <a href="cli-install.html"><button class="btn-prev"><- Step 1: Install CLI</button></a><a href="../create/cli-create.html"><button class="btn-next">Step 3: Create a PhoneGap Project -></button></a>
 
diff --git a/docs/guides/install/developer-install.md b/docs/guides/install/developer-install.md
@@ -0,0 1,23 @@
 <link href="../css/styles.css" rel="stylesheet">
 <link href="../css/bootstrap.css" rel="stylesheet">
 <div class="sidebar"></div>
 
 ##Step 2: Install the PhoneGap Developer App<hr>
 
 The *PhoneGap Developer App* allows you to preview and test the PhoneGap mobile app projects you build on multiple devices across different platforms without having to install and set up each platform SDK. All you need to do is install the app to the devices you would like to preview your own apps on and go through the next couple quick steps in this guide to see exactly how it works.
 
 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"/>
 3. At this point installation is as far as we need to go until we have an app to preview.
 <hr>
 Congratulations! You have completed the installation and can now move on to the fun part, creating your first mobile PhoneGap app. Click the Step 3 button below to get started! 
 
 <hr>
 <a href="desktop-install.html"><button class="btn-prev"><- Step 1: Install Desktop App</button></a><a href="../create/desktop-create.html"><button class="btn-next">Step 3: Create a PhoneGap Project -></button></a>
diff --git a/docs/guides/install/developer.md b/docs/guides/install/developer.md