Update tutorials

source/_includes/guides/owm-api-key-notice.html

@@ -17,5 +17,5 @@
 <div class="alert alert--bg-purple alert--fg-white">
   <b>API KEY REQUIRED</b>
   <p>As of October 2015, an API key is required to fetch OpenWeatherMap data. 
-    These can be freely obtained from <a href="http://openweathermap.org/appid">OpenWeatherMap.org</a>.</p>
+    These can be freely obtained from <a href="https://openweathermap.org">OpenWeatherMap.org</a>.</p>
 </div>

source/mobilenav.html

@@ -26,45 +26,26 @@
             <li><a href="/tutorials/beginner/more-c/">More C Concepts</a></li>
           </ul>
         </li>
-        <li><a href="/tutorials/watchface-tutorial/part1/">Create a C Watchface</a>
+        <li><a href="/tutorials/watchface-tutorial/part1/">Build a Watchface in C</a>
           <ul>
-            <li><a href="/tutorials/watchface-tutorial/part1/">Build Your Own Watchface</a></li>
-            <li><a href="/tutorials/watchface-tutorial/part2/">Customize Your Watchface</a></li>
-            <li><a href="/tutorials/watchface-tutorial/part3/">Adding Content From The Web</a></li>
+            <li><a href="/tutorials/watchface-tutorial/part1/">Part 1 - Displaying the Time</a></li>
+            <li><a href="/tutorials/watchface-tutorial/part2/">Part 2 - Customizing the Watchface</a></li>
+            <li><a href="/tutorials/watchface-tutorial/part3/">Part 3 - Adding Web Content</a></li>
+            <li><a href="/tutorials/watchface-tutorial/part4/">Part 4 - Adding a Battery Bar</a></li>
+            <li><a href="/tutorials/watchface-tutorial/part5/">Part 5 - Vibrate on Disconnect</a></li>
           </ul>
         </li>
-        <li><a href="/tutorials/pebble-js-tutorial/part1/">Create a JS Watchapp</a>
+        <li><a href="/tutorials/js-watchface-tutorial/part1/">Build a Watchface in JS</a>
           <ul>
-            <li><a href="/tutorials/pebble-js-tutorial/part1/">Build A Watchapp with Pebble.js</a></li>
-            <li><a href="/tutorials/pebble-js-tutorial/part2/">Expanded Weather Forecasts</a></li>
-            <li><a href="/tutorials/pebble-js-tutorial/part3/">Adding More Details</a></li>
+            <li><a href="/tutorials/js-watchface-tutorial/part1/">Part 1 - Displaying the Time</a></li>
+            <li><a href="/tutorials/js-watchface-tutorial/part2/">Part 2 - Adding Web Content</a></li>
           </ul>
         </li>
-        <li><a href="/tutorials/intermediate/">Add More Features</a>
-          <ul>
-            <li><a href="/tutorials/intermediate/add-date/">Add a Date View</a></li>
-            <li><a href="/tutorials/intermediate/add-date/">Add a Battery Meter</a></li>
-            <li><a href="/tutorials/intermediate/add-date/">Add Connection Alerts</a></li>
-          </ul>
-        </li>
-        <li><a href="/tutorials/advanced/">Go Beyond</a>
+        <li><a href="/tutorials/advanced/">Advanced Tutorials</a>
           <ul>
             <li><a href="/tutorials/advanced/vector-animations/">Vector Animations</a></li>
           </ul>
         </li>
-        <li><a href="/tutorials/android-tutorial/">PebbleKit Android Tutorial</a>
-          <ul>
-            <li><a href="/tutorials/android-tutorial/part1/">Integrating with Android</a></li>
-            <li><a href="/tutorials/android-tutorial/part2/">Controlling Apps From Pebble</a></li>
-            <li><a href="/tutorials/android-tutorial/part3/">Rock, Paper, Scissors with Pebble</a></li>
-          </ul>
-        <li><a href="/tutorials/ios-tutorial">PebbleKit iOS Tutorial</a>
-          <ul>
-            <li><a href="/tutorials/ios-tutorial/part1/">Integrating with iOS</a></li>
-            <li><a href="/tutorials/ios-tutorial/part2/">Controlling Apps From Pebble</a></li>
-            <li><a href="/tutorials/ios-tutorial/part3/">Rock, Paper, Scissors with Pebble</a></li>
-          </ul>
-        </li>
       </ul>
     </li>
     <li class="mobile-nav--sdk"><a href="/sdk/">Get the SDK</a></li>

source/tutorials/index.html

@@ -31,8 +31,8 @@
             <div class="vcenter">
               <h3>Build a Watchface</h3>
               <p>Learn how to create your first watchface. This tutorial will cover basic Pebble concepts, and is the recommended starting point for new developers.</p>
-              <a href="/tutorials/js-watchface-tutorial/" target="_blank" class="btn btn--fg-green btn--bg-white">Build with JS</a>
-              <a href="/tutorials/watchface-tutorial/" target="_blank" class="btn btn--fg-green btn--bg-white">Build with C</a>
+              <a href="/tutorials/watchface-tutorial/" class="btn btn--fg-green btn--bg-white">Build with C</a>
+              <a href="/tutorials/js-watchface-tutorial/" class="btn btn--fg-green btn--bg-white">Build with JS</a>
             </div>
           </div>
         </div>
@@ -48,7 +48,7 @@ <h3>Build a Watchface</h3>
             <div class="vcenter">
               <h3>Build a One Click Action</h3>
               <p>Learn how to create your first one click action watchapp. This guide explains how to create a watchapp that will makes a web request upon launch and display the result.</p>
-              <a href="/guides/design-and-interaction/one-click-actions/" target="_blank" class="btn btn--fg-lightblue btn--bg-white">Build with C</a>
+              <a href="/guides/design-and-interaction/one-click-actions/" class="btn btn--fg-lightblue btn--bg-white">Build with C</a>
             </div>
           </div>
         </div>
@@ -76,7 +76,7 @@ <h3>Learn C with Pebble</h3>
         <div class="vcenter">
           <h3>Publish Your App</h3>
           <p>Learn how to publish your watchface or watchapp on Pebble's appstore.</p>
-          <a href="/guides/appstore-publishing/publishing-an-app" target="_blank" class="btn btn--fg-lightblue btn--bg-dawk">Publish an App</a>
+          <a href="/guides/appstore-publishing/publishing-an-app" class="btn btn--fg-lightblue btn--bg-dawk">Publish an App</a>
         </div>
       </div>
     </div>

source/tutorials/js-watchface-tutorial/part1.md

@@ -58,13 +58,14 @@ structure required for a basic Rocky.js application.
 
 ## Watchface Basics
 
-Watchface are essentially long running applications that update the display at
+Watchfaces are essentially long running applications that update the display at
 a regular interval (typically once a minute, or when specific events occur). By
 minimizing the frequency that the screen is updated, we help to conserve
 battery life on the watch.
 
 The main entry point for the watchface is `/src/rocky/index.js`, so we'll
-start by editing this file.
+start by editing this file. You can remove the sample content provided for the
+code given below.
 
 The very first thing we must do is include the Rocky.js library, which gives us
 access to the APIs we need to create a Pebble watchface.
@@ -198,7 +199,9 @@ Another minute with your Pebble!
 ```
 
 > Note: You should prevent execution of the log statements by commenting the
-code, if you aren't using them. e.g. `//console.log();`
+> code, if you aren't using them. e.g. `// console.log();` before publishing the
+> watchface.
+
 
 ## Creating an Analog Watchface
 
@@ -221,7 +224,8 @@ representing the minute hand.
 
 We need to implement a function to draw the hands, to prevent duplicating the
 same drawing code for hours and minutes.  We're going to use a series of
-``CanvasRenderingContext2D`` methods to accomplish the desired effect.
+``CanvasRenderingContext2D`` methods to accomplish the desired effect in the
+`draw` callback we added earlier.
 
 First we need to find the center point in our display:
 
@@ -269,6 +273,9 @@ ctx.stroke();
 
 ### Putting It All Together
 
+This is the complete code assembled so far, including a helpful function for
+drawing the hands and converting a time fraction to a Radian angle.
+
 ```js
 var rocky = require('rocky');
 
@@ -421,8 +428,7 @@ output, it probably means there is an issue in the preceding code.
 ### I'm still having problems!
 
 If you've tried the steps above and you're still having problems, there are
-plenty of places to get help. You can post your question and code on the
-[Pebble Forums](https://forums.pebble.com/c/development) or join our
+plenty of places to get help. You can post your question and code on our
 [Discord Server]({{ site.links.discord_invite }}) and ask for assistance.
 
 
@@ -438,9 +444,7 @@ watchface using JavaScript! To do this we:
 5. Used drawing commands to draw text and lines on the display.
 
 If you have problems with your code, check it against the sample source code
-provided using the button below.
-
-[View Source Code >{center,bg-lightblue,fg-white}](https://github.com/pebble-examples/rocky-watchface-tutorial-part1)
+provided above.
 
 ## What's Next