New home page for developer.chrome.com

And pillar pages for DevTools, Multi-device, and Platform.

Review URL: https://codereview.chromium.org/140743011

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@246213 0039d316-1c4b-4281-b951-d872f2087c98

4 files changed, 761 insertions, 32 deletions

diff --git a/chrome/docs/devtools-pillar.html b/chrome/docs/devtools-pillar.html
new file mode 100644
index 0000000..00f5bca
--- /dev/null
+++ b/chrome/docs/devtools-pillar.html
@@ -0,0 +1,234 @@
+{{+content:partials.site}}
+<div class="pillar-content">
+
+  <h1>Chrome Developer Tools</h1>
+  
+  <section class="article-list g-section">
+    <article class="new">
+    <h4 class="label">Styles &amp; the DOM</h4>
+    <h2>Editing Styles and the DOM</h2>
+    <p>
+      Use DevTools to do real-time editing of your web page.  You can edit the DOM directly or the CSS Style and see your changes rendered immediately.
+    </p>
+    <p><a href="docs/dom-and-styles.html">Learn more</a></p>
+    <img src="{{static}}/images/devtools-pillar/dom-pillar.png" alt="these should have alt text">
+    </article>
+    
+    <article class="new">
+    <h4 class="label">Mobile DevTools</h4>
+    <h2>Remote Debugging on Android</h2>
+    <p>
+
+      You can now access your Android device directly in DevTools on your dev machine.  Just plug it in over USB and you can view and debug!
+    </p>
+    <p><a href="docs/remote-debugging.html">Learn more</a></p>
+    <img src="{{static}}/images/devtools-pillar/remote-debugging-pillar.jpg" alt="these should have alt text">
+    </article>
+
+    <article>
+    <h4 class="label">Learn Basics</h4>
+    <h2>DevTools Overview</h2>
+    <p>
+      A starting place if you haven't used DevTools before - this page will tell you everything you need to get started with the Chrome DevTools, from how to access the tools to a brief explanation of what the various menus and panels are used for.
+    </p>
+    <p><a href="index.html">Learn more</a></p>
+    </article>
+
+    <article>
+    <h4 class="label">Command-line debugging</h4>
+    <h2>Using the console</h2>
+    <p>
+      The Javascript console in DevTools can be used to debug your Javascript code and log diagnostics, or you can also just use it as a shell to try out Javascript commands and interact with pages.
+    </p>
+    <p><a href="docs/console.html">Learn more</a></p>
+    <img src="{{static}}/images/devtools-pillar/console-pillar.png" alt="these should have alt text">
+    </article>
+
+    <article>
+    <h4 class="label">Mobile DevTools</h4>
+    <h2>Mobile Emulation</h2>
+    <p>
+      Need to debug for a device but don't have the device on hand?  DevTools can emulate many devices -- screen dimensions, touch events, geolocation, and user spoofing.
+    </p>
+    <p><a href="docs/mobile-emulation.html">Learn more</a></p>
+    <img src="{{static}}/images/devtools-pillar/emulation-pillar.png" alt="these should have alt text">
+    </article>
+    
+    <article>
+    <h4 class="label">Learn Basics</h4>
+    <h2>Keyboard Shortcuts</h2>
+    <p>
+      Save more time in your development workflow -- here is a page full of keyboard shortcuts that will make things quicker when you are using DevTools.
+    </p>
+    <p><a href="docs/shortcuts.html">Learn more</a></p>
+    <img src="{{static}}/images/devtools-pillar/shortcuts-pillar.JPG" alt="these should have alt text">
+    </article>
+
+    <article>
+    <h4 class="label">Performance and Profiling</h4>
+    <h2>Javascript Memory Profiling</h2>
+    <p>
+      Does your page use too much memory or have a memory leak?  Find out how to get and analyze a heap profile.
+    </p>
+    <p><a href="docs/javascript-memory-profiling.html">Learn more</a></p>
+    <img src="{{static}}/images/devtools-pillar/memory-pillar.png" alt="these should have alt text">
+    </article>
+
+    <article>
+    <h4 class="label">Performance and Profiling</h4>
+    <h2>Performance Profiling: Timelines</h2>
+    <p>
+      Is your site running slow?  Analyze times for events, scripting, rendering, and painting using the Timeline.
+    </p>
+    <p><a href="docs/timeline.html">Learn more</a></p>
+    <img src="{{static}}/images/devtools-pillar/timeline-pillar.png" alt="these should have alt text">
+    </article>
+    
+    <article>
+    <h4 class="label">Performance and Profiling</h4>
+    <h2>Javascript CPU Profiler</h2>
+    <p>
+      Find out how much CPU is being spent on your various Javascript functions with the Javascript CPU Profiler.
+    </p>
+    <p><a href="docs/cpu-profiling.html">Learn more</a></p>
+    <img src="{{static}}/images/devtools-pillar/cpuprofiler-pillar.png" alt="these should have alt text">
+    </article>
+    
+    <article>
+    <h4 class="label">Performance and Profiling</h4>
+    <h2>Flame Charts</h2>
+    <p>
+      Flame charts show you a visualization of the call stack of your Javascript functions, and you can quickly find out how long each individual call takes.
+    </p>
+    <p><a href="docs/flame-charts.html">Learn more</a></p>
+    <img src="{{static}}/images/devtools-pillar/flamechart-pillar.png" alt="these should have alt text">
+    </article>
+
+    <article>
+    <h4 class="label">Debugging Tools</h4>
+    <h2>Javascript Debugging</h2>
+    <p>
+      Need to debug your Javascript?  DevTools has a suite of tools to let you step through code, set breakpoints, handle exceptions, and so on.
+    </p>
+    <p><a href="docs/javascript-debugging.html">Learn more</a></p>
+    <img src="{{static}}/images/devtools-pillar/jsdebugger-pillar.png" alt="these should have alt text">
+    </article>
+    
+    <article>
+    <h4 class="label">Command-line debugging</h4>
+    <h2>Console API reference</h2>
+    <p>
+      Javascript functions you can call within the console or within your programs to log various results to the console.
+    </p>
+    <p><a href="docs/console-api.html">Learn more</a></p>
+    </article>
+    
+    <article>
+    <h4 class="label">Command-line debugging</h4>
+    <h2>Command Line API reference</h2>
+    <p>
+      Functions that you can call in the console for performing common tasks within the DevTools.
+    </p>
+    <p><a href="docs/console-api.html">Learn more</a></p>
+    </article>
+    
+    <article>
+    <h4 class="label">Learn Basics</h4>
+    <h2>Tips and Tricks</h2>
+    <p>
+      Various tips and tricks on things within the DevTools.
+    </p>
+    <p><a href="docs/tips-and-tricks.html">Learn more</a></p>
+    </article>
+
+    <article>
+    <h4 class="label">DevTools Reference</h4>
+    <h2>Settings</h2>
+    <p>
+      Let's learn some more about what you can control in the Settings panel.
+    </p>
+    <p><a href="docs/settings.html">Learn more</a></p>
+    </article>
+
+    <article>
+    <h4 class="label">Learn Basics</h4>
+    <h2>Authoring and Development Workflow</h2>
+    <p>
+      Do you find that DevTools saves you some time and you wonder how to save more?  This page guides you through some ways to make your w\
+orkflow more efficient, both in editing files and styles but also with your Javascript and how you use the DevTools in general.
+    </p>
+    <p><a href="docs/authoring-development-workflow.html">Learn more\
+</a></p>
+    </article>
+
+    <article>
+    <h4 class="label">Styles & The DOM</h4>
+    <h2>Working with CSS Preprocessors</h2>
+    <p>
+      Are you using a CSS preprocessor such as Sass, Less, or Stylus?  You can live-edit your preprocessor source files in DevTools as easi\
+ly as editing straight CSS, and enable CSS source maps.
+    </p>
+    <p><a href="docs/css-preprocessors.html">Learn more</a></p>
+    </article>
+
+    <article>
+    <h4 class="label">Mobile DevTools</h4>
+    <h2>Remote Debugging Protocol</h2>
+    <p>
+      Although we encourage you to use the new Screencast for debugging your Android devices, we do have Javascript runtime bindings for al\
+lowing DevTools to interact with mobile Chrome devices.
+    </p>
+    <p><a href="docs/debugger-protocol.html">Learn more</a></p>
+    </article>
+
+    <article>
+    <h4 class="label">Contribute</h4>
+    <h2>Integrating with DevTools</h2>
+    <p>
+      Write new extensions and protocol clients to make new features for Chrome DevTools!
+    </p>
+    <p><a href="docs/integrating.html">Learn more</a></p>
+    </article>
+
+    <article>
+    <h4 class="label">Learn Basics</h4>
+    <h2>Videos</h2>
+    <p>
+      Videos to get you started learning about Chrome DevTools.
+    </p>
+    <p><a href="docs/videos.html">Learn more</a></p>
+    </article>
+
+  </section>
+
+  <section class="g-section g-tpl-33-67" id="further-resources">
+    <h2>Further Resources</h2>
+    <div class="g-unit g-first">
+      <article class="g-content">
+        <h2 class="school">Code School</h2>
+        <p>Explore and master the DevTools with our free "discover DevTools" courses. 
+        <p><a href="http://discover-devtools.codeschool.com/">Learn more</a></p>
+      </article>
+    </div>
+    <div class="g-unit">
+      <div class="g-section g-tpl-50-50">
+        <div class="g-unit g-first">
+          <article class="g-content">
+            <h2 class="chat">Get Involved</h2>
+            <p>Summit a bug or a feature request on DevTools, and help the community get better. 
+            <p><a href="docs/contributing.html">Learn more</a></p>
+          </article>
+        </div>
+        <div class="g-unit g-last">
+          <article class="g-content">
+            <h2 class="puzzle">Debug Extensions</h2>
+             <p>Looking to use the DevTools to debug Chrome extensions? Watch our videos for more info.
+            <p><a href="docs/videos.html">Learn more</a></p>
+          </article>
+        </div>
+      </div>
+    </div>
+  </section>
+
+</div>
+{{/partials.site}}
diff --git a/chrome/docs/index.html b/chrome/docs/index.html
index 7deb5b2..4c54f9f 100644
--- a/chrome/docs/index.html
+++ b/chrome/docs/index.html
@@ -3,26 +3,36 @@
 <section class="g-section g-tpl-67-33"> 
   <div class="g-unit g-first">
     <article class="g-content" id="featured">
-      <img src="{{static}}/images/mocks/multidevice.png" class="screenshot">
+      <a href="/devtools/remote-debugging.html"><img src="{{static}}/images/mocks/multidevice.png" class="screenshot"></a>
       <h4 class="label">Featured article</h4>
-      <h1>The World Has Gone Multiscreen: How The Mobile Internet Changes Our Lives</h1>
-      <p class="description">It's a new age in the UK: people connect on an average of three devices, which is higher than the global average. Tablet and mobile use is rising, and consumers are using their smartphones more than ever. Shoppers research extensively on their smartphones ...
+      <a href="/devtools/remote-debugging.html"><h1>Mobile DevTools: Remote Debugging for Android with Screencast</h1></a>
+      <p class="description">
+      Until now, while remote debugging a mobile device,
+      you had to shift your eyes back and forth between the device and your desktop machine.
+      Now Screencast displays your device's screen right inside of Chrome DevTools on your desktop.
       </p>
-      <p><button class="button">Learn more</button></p>
+
+      <p>
+      You can also interact with your mobile device from your desktop,
+      as clicks on the screencast get translated into taps and touch events.
+      Typing on the desktop keyboard also sends keystrokes to the device --
+      much better than typing with your thumbs!
+      </p>
+      <p><button class="button"><a href ="/devtools/remote-debugging.html">Learn more</a></button></p>
     </article>
   </div>
   <div class="g-unit g-last" id="upcoming-events">
     <article class="g-content">
-      <img src="{{static}}/images/mocks/devsummit.png" class="screenshot">
+      <a href="https://developers.google.com/live/shows/5371585095532544-5707702298738688"><img src="{{static}}/images/mocks/udacity.png" class="screenshot"></a>
       <h4 class="label">Upcoming Event</h4>
-      <h2>Chrome Developer Summit</h2>
-      <p class="description"><a href="">Learn more</a></p>
+      <a href="https://developers.google.com/live/shows/5371585095532544-5707702298738688"><h2>Udacity Mobile Web Dev Office Hours</h2></a>
+      <p class="description"><a href="https://developers.google.com/live/shows/5371585095532544-5707702298738688">Learn more</a></p>
     </article>
     <article class="g-content">
-      <img src="{{static}}/images/mocks/colt.png" class="screenshot">
+      <a href="https://developers.google.com/live/shows/5035410623299584"><img src="{{static}}/images/mocks/webview_video_thumb.png" class="screenshot"></a>
       <h4 class="label">Google Developers Live</h4>
-      <h2>GZIP is not enough!</h2>
-      <p class="description"><a href="">Watch the episode</a></p>
+      <a href="https://developers.google.com/live/shows/5035410623299584"><h2>Chrome WebView Debugging</h2></a>
+      <p class="description"><a href="https://developers.google.com/live/shows/5035410623299584">Watch the episode</a></p>
     </article>
   </div>
 </section>
@@ -30,25 +40,27 @@
 <section id="site-sections" class="g-section g-tpl-33-67">
   <div class="g-unit g-first">
     <article class="g-content">
-      <h2 class="devtools">Chrome DevTools</h2>
+      <a href="/home/devtools-pillar.html"><h2 class="devtools">Chrome DevTools</h2></a>
       <p class="description">The Chrome Developer Tools are a set of web authoring and debugging tools built right into Google Chrome.</p>
-      <p><a href="">Learn more about DevTools</a></p>
+      <p><a href="/home/devtools-pillar.html">Learn more about DevTools</a></p>
     </article>
   </div>
   <div class="g-unit">
     <div class="g-section g-tpl-50-50">
       <div class="g-unit g-first">
         <article class="g-content">
-          <h2 class="multidevice">Multi-Device</h2>
-          <p class="description">The mobile web has evolved to enable increasingly sophisticated applications, which we often wish to debug.</p>
-          <p><a href="">Learn more about Multi-Device</a></p>
+          <a href="/home/multi-device-pillar.html"><h2 class="multidevice">Multi-Device</h2></a>
+          <p class="description">Chrome runs on tablets, smartphones, and other devices.
+          Make your content ready for the multi-device web!</p>
+          <p><a href="/home/multi-device-pillar.html">Learn more about Multi-Device</a></p>
         </article>
       </div>
       <div class="g-unit g-last">
         <article class="g-content">
-          <h2 class="platform">Platform</h2>
-          <p class="description">Chrome Apps deliver an experience as capable as a native app, but as safe as a web page. Just like web apps.</p>
-          <p><a href="">Learn more about Platform</a></p>
+          <a href="/home/platform-pillar.html"><h2 class="platform">Platform</h2></a>
+          <p class="description">Build Chrome Apps and Extensions and publish in Store. With Native Client,
+compile native code and run in any website.</p>
+          <p><a href="/home/platform-pillar.html">Learn more about Platform</a></p>
         </article>
       </div>
     </div>
@@ -56,36 +68,48 @@
 </section>
 
 <section id="developer-news" class="g-section g-tpl-33-67 more-section">
-  <h1>Google Developers News</h1>
+  <h1>Further Resources</h1>
   <div class="g-unit g-first">
     <article class="g-content">
-      <h4 class="label">Google Developers Blog</h4>
-      <a href=""><h2>A new look for managing your APIs</h2></a>
-      <p class="published">Posted: <time>29 October 2013</time> by Akshay Kannan, Product 
-      Manager, Google Cloud Platform</p>
-      <p class="description"><a href="">Learn more about DevTools</a></p>
+      <h2>Forums</h2>
+	<p>
+          <ul>
+          <li><a href="https://groups.google.com/a/chromium.org/">chromium.org Groups</a></li>
+          <li><a href="https://groups.google.com/forum/#!forum/native-client-discuss">Native Client Group</a></li>
+          <li><a href="http://stackoverflow.com/tags/google-chrome">google-chrome on Stack Overflow</a>
+          </li>
+          </ul>
+	</p>      
     </article>
   </div>
   <div class="g-unit">
     <div class="g-section g-tpl-50-50">
       <div class="g-unit g-first">
         <article class="g-content">
-          <h4 class="label">Youtube API Blog</h4>
-          <a href=""><h2>Let your users discover live events and track their audience</h2></a>
-          <p class="published">Posted: <time>29 October 2013</time></p>
-          <p class="description"><a href="">Learn more about Multi-Device</a></p>
+          <h2>Languages & Libraries</h2>
+          <p>
+	    <ul>
+	      <li><a href="http://www.polymer-project.org/">Polymer</a></li>
+	      <li><a href="https://www.dartlang.org/">Dart</a>
+              </li>
+            </ul>
+          </p>
         </article>
       </div>
       <div class="g-unit g-last">
         <article class="g-content">
-          <h4 class="label">Google Developers Blog</h4>
-          <a href=""><h2>New AdSense data in the Analytics Core Reporting API</h2></a>
-          <p class="published">Posted: <time>28 October 2013</time> by Nick Mihailovksi, Product Manager, Google Analytics API Team</p>
-          <p class="description"><a href="">Learn more about Apps &amp; Extensions</a></p>
+          <h2>Open Web Docs</h2>
+            <ul>
+              <li><a href="http://www.html5rocks.com/en/">HTML5 Rocks</a>
+              </li>
+              <li><a href="http://www.webplatform.org/">WebPlatform.org</a></li>
+            </ul>
+          </p>
         </article>
       </div>
     </div>
   </div>
 </section>
+
 {{/partials.site}}
 
diff --git a/chrome/docs/multi-device-pillar.html b/chrome/docs/multi-device-pillar.html
new file mode 100644
index 0000000..65b7610
--- /dev/null
+++ b/chrome/docs/multi-device-pillar.html
@@ -0,0 +1,96 @@
+{{+content:partials.site}}
+<div class="pillar-content">
+
+  <h1>Multi-Device Chrome</h1>
+  
+  <section class="article-list g-section">
+    <article>
+    <h4 class="label">Overview</h4>
+    <h2>Chrome for a Multi-Device World</h2>
+    <p>Chrome runs on computers, tablets, smartphones, and other devices.
+    Learn how to tailor your sites and apps for a multi-device world.
+    </p>
+    <p><a href="/multidevice/index.html">Learn more</a></p>
+    <img src="{{static}}/images/multi-device-pillar/multidevice.png" alt="mobile devices running Chrome">
+    </article>
+    
+    <article class="new">
+    <h4 class="label">Chrome for Android</h4>
+    <h2>Add to Homescreen</h2>
+    <p><b>Add to homescreen</b> lets Android users add an application shortcut icon to their 
+    device's homescreen. Applications launched from the shortcut icon run in fullscreen
+	mode, and appear as separate applications in the task switcher. 
+    </p>
+    <p><a href="/multidevice/android/installtohomescreen.html">Learn more</a></p>
+    <img src="{{static}}/images/multi-device-pillar/addtohomescreen.png" alt="add to homescreen item">
+    </article>
+    
+    <article class="new">
+    <h4 class="label">Chrome WebView for Android</h4>
+    <h2>Getting Started</h2>
+    <p><b>Get started writing a WebView-based application.</b> A primer on using the 
+    Android WebView to host web content.</p>
+    <p><a href="/multidevice/webview/gettingstarted.html">Learn more</a></p>
+    <img src="{{static}}/images/multi-device-pillar/webview_gs.png" alt="Android device running WebView app">
+    </article>
+
+    <article class="new">
+    <h4 class="label">Chrome WebView for Android</h4>
+    <h2>WebView Workflow</h2>
+    <p><b>Add web libraries and tools to your WebView-based application.</b> Update the Android Studio 
+    build scripts to add web-specific build steps, and integrate Grunt into the Android build process.</p>
+    <p><a href="/multidevice/webview/workflow.html">Learn more</a></p>
+    <img src="{{static}}/images/multi-device-pillar/workflow.png" alt="Grunt and Yeoman logos">
+    </article>
+
+    <article>
+    <h4 class="label">Chrome for iOS</h4>
+    <h2>Opening links in Chrome for iOS</h2>
+    <p><b>In iOS, there are several methods for opening links in Chrome.</b> On iOS, URLs are opened in 
+    Safari by default.  However, applications can check whether Chrome is installed, and explicitly 
+    open links in Chrome if desired.
+    </p>
+    <p><a href="/multidevice/ios/links.html">Learn more</a></p>
+    </article>
+
+    <article>
+    <h4 class="label">Chrome for Android</h4>
+    <h2>Android Intents with Chrome</h2>
+    <p><b>Using an Android Intent URI lets you launch Android apps directly from a web page 
+    or web application.</b>
+    </p>
+    <p><a href="/multidevice/android/intents.html">Learn more</a></p>
+    </article>
+
+
+	<!--
+    <div class="load-more-articles">
+      <a href="" class="nav-arrow down-arrow">More articles</a>
+    </div>
+    -->
+
+  </section>
+
+  <section class="g-section g-tpl-50-50">
+    <h2>Further Resources</h2>
+    <div class="g-unit g-first">
+      <article class="g-content">
+        <h2>Debug with DevTools</h2>
+        <p>Use Chrome DevTools to debug apps running in your Android devices.</p>
+        <p><a href="/devtools/docs/remote-debugging.html">Learn more</a></p>
+      </article>
+    </div>
+        <div class="g-unit g-last">
+          <article class="g-content">
+            <h2>Mobile Emulation</h2>
+             <p>Use the Chrome DevTools Mobile Emulation features to test how your web app will work
+             on different devices. </p>
+            <p><a href="/devtools/docs/mobile-emulation.html">Learn more</a></p>
+          </article>
+        </div>
+      </div>
+    </div>
+  </section>
+
+</div>
+{{/partials.site}}
diff --git a/chrome/docs/platform-pillar.html b/chrome/docs/platform-pillar.html
new file mode 100644
index 0000000..2a0989c
--- /dev/null
+++ b/chrome/docs/platform-pillar.html
@@ -0,0 +1,375 @@
+{{+content:partials.site}}
+<div class="pillar-content">
+
+  <h1>Chrome Platform</h1>
+  
+  <section class="article-list g-section">
+    <article class="new">
+    <h4 class="label">Apps</h4>
+    <h2>Learn Basics</h2>
+    <p>Develop your first Chrome App and discover
+    how they look, how they behave, and how they are modeled.
+    Launch your Apps from your native platform
+    using the
+    <a href="http://chrome.blogspot.com/2013/12/a-new-breed-of-chrome-apps-now.html">Chrome App Launcher</a>:
+    </p>
+    <p><a href="/apps/first_app.html">Learn more</a></p>
+    <img src="{{static}}/images/platform-pillar/chrome_apps.png" alt="500px Chrome App launched from Chrome App Launcher">
+    </article>
+    
+    <article>
+    <h4 class="label">Apps</h4>
+    <h2>Learn with Codelab</h2>
+    <p>The goal of this codelab is to get you building Chrome Apps fast.
+    Once you've completed this codelab, you will have a simple Todo app.</p>
+    <p><a href="/apps/app_codelab1_setup.html">Learn more</a></p>
+    <img src="{{static}}/images/platform-pillar/todo_codelab.png"
+         width="110%"
+         alt="Create this simple Todo Chrome App.">
+    </article>
+
+    <article>
+    <h4 class="label">Apps</h4>
+    <h2>Samples</h2>
+    <p>Browse official Chrome Apps samples in the
+    <a href="https://github.com/GoogleChrome/chrome-app-samples">chrome-apps-samples GitHub repository</a>.
+    The <a href="https://github.com/GoogleChrome/chrome-app-samples/blob/master/README.md">README.md</a>
+    lists each sample's APIs and provides a link to download in the Chrome Web Store.</p>
+    <img src="{{static}}/images/platform-pillar/chrome_app_samples.png" alt="Chrome apps samples maintained in GitHub repository">
+    </article>
+
+    <article>
+    <h4 class="label">Apps</h4>
+    <h2>Reference</h2>
+    <p>Chrome Apps have access to Chrome APIs not available to traditional web sites.
+    With these APIs,
+    you can build powerful apps that interact
+    with network and hardware devices, media tools, and much more.
+    <ul>
+        <li><a href="/apps/api_index.html">Chrome Platform APIs</a>: lists APIs available in each Chrome channel</li>
+        <li><a href="/apps/manifest.html">Manifest File Format</a>: lists supported manifest fields</li>
+        <li><a href="/apps/app_deprecated.html">Disabled Web Features</a>: lists disabled open web platform features</li>
+    </ul></p>
+    <p><a href="/apps/api_index.html">Learn more</a></p>
+    </article>
+
+    <article>
+    <h4 class="label">Apps</h4>
+    <h2>Develop in Cloud</h2>
+    <p>Chrome Apps leverage the Google Cloud Platform to store and access data.
+    They work offline by default
+    and can sync back to the cloud once connectivity is restored.
+    Use the
+    <a href="/apps/syncFileSystem.html">syncFileSystem API</a>
+    to save and synchronize caching data in Google Drive.</p>
+    <p><a href="/apps/offline_apps.html">Learn more</a></p>
+    <img src="{{static}}/images/platform-pillar/sync_file_system.png" alt="Use Google Drive to store Chrome Apps data in the cloud.">
+    </article>
+
+    <article>
+    <h4 class="label">Apps</h4>
+    <h2>Network and Hardware APIs</h2>
+    <p> Chrome Apps can interact with low-level system services.
+    Using the network and hardware APIs, they can:
+    <ul>
+      <li>Act as <a href="/apps/socket.html">network clients</a>
+for TCP and UDP connections.</li>
+      <li>Communicate with <a href="/apps/usb.html">usb devices</a>.</li>
+      <li>Read and write to devices connected to <a href="/apps/serial.html">serial ports</a>.</li>
+      <li>Connect to <a href="/apps/bluetooth.html">bluetooth devices</a>.</li>
+    </ul></p>
+    <p><a href="/apps/app_usb.html">Learn more</a></p>
+    </article>
+
+    <article>
+    <h4 class="label">Extensions</h4>
+    <h2>Learn Basics</h2>
+    <p>Extensions are small software programs that can modify and
+    enhance the functionality of the Chrome browser.
+    Write extensions using web technologies: HTML, JavaScript, and CSS.</p>
+    <p><a href="/extensions/overview.html">Learn more</a></p>
+    <img src="{{static}}/images/platform-pillar/extensions.png" alt="Browser action and page actions are common extension types.">
+    </article>
+
+    <article>
+    <h4 class="label">Extensions</h4>
+    <h2>Getting Started Tutorial</h2>
+    <p>This tutorial walks you through the construction
+    of a simple browser action extension.
+    Clicking the browser action UI element opens a pop-up window.</p>
+    <p><a href="/extensions/getstarted.html">Learn more</a></p>
+    <img src="{{static}}/images/platform-pillar/one_click_kittens.png" alt="One-click kittens tutorial">
+    </article>
+
+    <article>
+    <h4 class="label">Extensions</h4>
+    <h2>Samples</h2>
+    <p>Browse official Chrome Extensions samples;
+    each sample lists API methods and links to source files.
+    Filter by keyword or API:</p>
+    <p><a href="/extensions/samples.html">Learn more</a></p>
+    <img src="{{static}}/images/platform-pillar/extension_samples.png" alt="Extension samples page">
+    </article>
+
+    <article>
+    <h4 class="label">Extensions</h4>
+    <h2>Reference</h2>
+    <p>Extensions are essentially web pages;
+    they can use all APIs that the browser provides to web pages.
+    Using Extensions APIs, they can also interact programmatically with browser features
+    such as bookmarks and tabs.
+    Read the reference docs to find out more:
+    <ul>
+        <li><a href="/extensions/whats_new.html">What's New</a>: lists what's new in stable Chrome versions</li>
+        <li><a href="/extensions/api_index.html">Chrome Platform APIs</a>: lists APIs available in each Chrome channel</li>
+        <li><a href="/extensions/manifest.html">Manifest File Format</a>: describes supported manifest fields</li>
+        <li><a href="/extensions/permission_warnings.html">Permissions</a>: describes permission warnings</li>
+    </ul>
+    </p>
+    <p><a href="/extensions/api_index.html">Learn more</a></p>
+    </article>
+
+    <article class="new">
+    <h4 class="label">Extensions</h4>
+    <h2>Distribute Extensions</h2>
+    <p><a href="/extensions/packaging.html">Upload your extension</a>
+    to test it in developer channels,
+    then <a href="/extensions/hosting.html">publish your extension</a>
+    in the Chrome Web Store.
+    New feature! You can now
+    <a href="/webstore/payments-otp">monetize your extensions</a>!</p>
+    <p><a href="/extensions/hosting.html">Learn more</a></p>
+    <img src="{{static}}/images/platform-pillar/upload_extensions.png" alt="Upload extensions on chrome://extensions page.">
+    </article> 
+    <article>
+    <h4 class="label">Extensions</h4>
+    <h2>Themes</h2>
+    <p>A theme is a special kind of extension that changes the way the browser looks.
+    Themes are <a href="/extensions/packaging.html">packaged</a> like regular extensions,
+    but they don't contain JavaScript or HTML code.
+    Distribute your themes in the
+    <a href="https://chrome.google.com/webstore/category/themes">Chrome Web Store</a>.
+    </p>
+    <p><a href="/extensions/themes.html">Learn more</a></p>
+    <img src="{{static}}/images/platform-pillar/theme.png" alt="Grass theme">
+    </article>
+
+    <article class="new">
+    <h4 class="label">Native Client</h4>
+    <h2>Learn Basics</h2>
+    <p>Native Client is a sandbox for running compiled C and C++ code in the browser.
+    Portable Native Client extends that technology with architecture independence,
+    letting developers compile their code once to run in any website and on any architecture.</p>
+    <p><a href="/native-client/index.html">Learn more</a></p>
+    <img src="{{static}}/images/platform-pillar/pnacl_intro.png" alt="Watch a live recorded conversation on Native Client.">
+    </article>
+
+    <article>
+    <h4 class="label">Native Client</h4>
+    <h2>Tutorial</h2>
+    
+    <p>This multi-part tutorial explains how to get started developing applications with Native Client.</p>
+
+    <p><a href="/native-client/devguide/tutorial/tutorial-part1">Part one</a>
+    shows how to build and run a simple web application
+    using Portable Native Client (PNaCl).</p>
+    
+    <p><a href="/native-client/devguide/tutorial/tutorial-part2">Part two</a>
+    shows how to convert the finished PNaCl web application
+    to use the Native Client SDK build system and common JavaScript files.
+    </p>
+    <p><a href="/native-client/devguide/tutorial/tutorial-part1">Learn more</a></p>
+    </article>
+
+    <article>
+    <h4 class="label">Native Client</h4>
+    <h2>SDK</h2>
+    <p>Follow these steps to download
+    and install the Native Client SDK:
+    <ol>
+      <li>Download the SDK update utility and unzip.</li>
+      <li>See which versions are available.</li>
+      <li>Run <code>naclsdk</code> with the “update” command
+      to download particular bundles that are available.</li>
+    </ol>
+    </p>
+    <p><a href="/native-client/sdk/download">Learn more</a></p>
+    </article>
+
+    <article>
+    <h4 class="label">Native Client</h4>
+    <h2>Development Cycle</h2>
+    <p>End-to-end native client development workflow:
+    <ul>
+    <li><a href="/native-client/devguide/devcycle/building.html">Build</a>
+Native Client modules.</li>
+    <li><a href="/native-client/devguide/devcycle/running.html">Run</a>
+Native Client applications during development.</li>
+    <li><a href="/native-client/devguide/devcycle/debugging.html">Debug, monitor, and measure</a>
+Native Client application performance.</li>
+    </ul></p>
+    <p><a href="/native-client/devguide/devcycle/building.html">Learn more</a></p>
+    </article>
+
+    <article>
+    <h4 class="label">Native Client</h4>
+    <h2>Coding Your Application</h2>
+    <p>Dive deeper into Native Client development.
+    Learn:
+    <ul>
+    <li>How Native Client applications are
+    <a href="/native-client/devguide/coding/application-structure.html">structured</a></li>
+    <li>Which classes and functions to implement in your
+<a href="/native-client/devguide/coding/native-client-modules.html">Native Client module</a> for Chrome to load, initialize, and run it</li>
+    <li>How to use the
+    <a href="/native-client/devguide/coding/message-system.html">messaging system</a>
+    to communicate between the JavaScript code and
+    the Native Client module's C or C++code</li>
+    </ul>    
+    And much more!</p>
+    <p><a href="/native-client/devguide/coding/application-structure.html">Learn more</a></p>
+    </article>
+
+    <article>
+    <h4 class="label">Native Client</h4>
+    <h2>Pepper API</h2>
+    <p>The Pepper API lets Native Client modules communicate
+    with the hosting browser and access system-level functions in a safe and portable way.
+    Pepper has both a
+    <a href="/native-client/pepperc/index.html">C API</a> and a
+    <a href="/native-client/peppercpp/index.html">C++ API</a>.</p>
+
+    <p>These APIs are generally divided into two parts:
+    <ul><li>Functions implemented in the browser
+    that you call from your Native Client module</li>
+    <li>Functions the browser invokes so you must implement them
+    in your Native Client module
+    </li>
+    </ul>
+    </p>
+    <p><a href="/native-client/overview.html#pepper-plugin-api">Learn more</a></p>
+    </article>
+
+    <article>
+    <h4 class="label">Store</h4>
+    <h2>What Is the Chrome Web Store?</h2>
+    <p>The Chrome Web Store lets you
+    <a href="/webstore/publish.html">publish</a>
+    your Chrome Apps, Extensions, and Themes
+    where Chrome users can easily find them.</p>
+    <p><a href="/webstore/index.html">Learn more</a></p>
+    <img src="{{static}}/images/platform-pillar/chrome_web_store.png" alt="Publish apps, extensions, and themes in Chrome Web Store.">
+    </article>
+
+    <article>
+    <h4 class="label">Store</h4>
+    <h2>Tutorial: Getting Started</h2>
+    <p>Follow these simple steps
+    to publish your app, extension,
+    or theme to the Chrome Web Store:
+    <ol>
+      <li>Create manifest file.</li>
+      <li>Get image assets.</li>
+      <li>Test app.</li>
+      <li>Zip app.</li>
+      <li>Upload your app to store.</li>
+    </ol>
+    </p>
+    <p><a href="/webstore/get_started_simple.html">Learn more</a></p>
+    </article>
+
+    <article>
+    <h4 class="label">Store</h4>
+    <h2>Branding</h2>
+    <p>Follow the Chrome Web Store branding guidelines
+for supplying images and promotional assets.</p>
+    <p><a href="/webstore/branding.html">Learn more</a></p>
+    <img src="{{static}}/images/platform-pillar/ChromeWebStore_BadgeWBorder_v2_206x58.png" alt="Using the Chrome Web Store badge">
+    </article>
+
+    <article class="new">
+    <h4 class="label">Store</h4>
+    <h2>Monetizing</h2>
+    <p>Two options for charging your users:
+    Chrome Web Store Payments for
+    <a href="/webstore/payments-otp">one-time payments</a> or
+    <a href="/apps/google_wallet.html">Google Wallet for Digital Goods</a>
+    to sell digital or virtual goods in your Chrome Apps or Extensions.</p>
+    <p><a href="/webstore/money.html">Learn more</a></p>
+    <img src="{{static}}/images/platform-pillar/wallet-review.png"
+         width="250px"
+         alt="Using Google Wallet in apps and extensions">
+    </article>
+
+    <article>
+    <h4 class="label">Store</h4>
+    <h2>Publishing</h2>
+    <p>When your app, extension, or theme is finished (if not before),
+    upload it with the
+    <a href="https://chrome.google.com/webstore/developer/dashboard">Developer Dashboard</a>.
+    Uploading generates an app ID,
+    which you may need to complete your application code.</p>
+    <p><a href="/webstore/publish.html">Learn more</a></p>
+    <img src="{{static}}/images/platform-pillar/store_developer_dashboard.png" alt="Chrome Web Store Developer Dashboard">
+    </article>
+
+    <article>
+    <h4 class="label">Store</h4>
+    <h2>Best Practices</h2>
+    <p>When publishing in the store,
+    follow these <a href="/webstore/best_practices.html">best practices</a>:
+    <ul>
+      <li>Support Google Accounts.</li>
+      <li>Keep ex-user data for 30 days.</li>
+      <li>Cache license data.</li>
+      <li>Create a compelling store listing.</li>
+    </ul>
+    </p>
+    <p><a href="/webstore/best_practices.html">Learn more</a></p>
+    </article>
+
+  </section>
+
+<section class="g-section g-tpl-33-67" id="further-resources">
+    <h2>Further Resources</h2>
+    <div class="g-unit g-first">
+      <article class="g-content">
+          <h2 class="school">Office Hours</h2>
+          <p>Watch demos of the Platform and get help in Chrome Office Hours on
+          <a href="https://developers.google.com/live/chrome/">Google Developers Live</a>.</p>
+      </article>
+    </div>
+    <div class="g-unit">
+      <div class="g-section g-tpl-50-50">
+        <div class="g-unit g-first">
+          <article class="g-content">
+          <h2 class="chat">Ask Questions</h2>
+          <p>Ask questions and get answers on these Stack Overflow channels:
+          <ul>
+          <li><a href="http://stackoverflow.com/questions/tagged/google-chrome">google-chrome</a>
+          </li>
+          <li><a href="http://stackoverflow.com/questions/tagged/google-chrome-extension">google-chrome-extension</a></li>
+          <li><a href="http://stackoverflow.com/questions/tagged/google-chrome-app">google-chrome-app</a></li>
+          </ul>
+          </p>
+          </article>
+        </div>
+        <div class="g-unit g-last">
+          <article class="g-content">
+          <h2 class="puzzle">Join a Group</h2>
+          <p>Help us make the Chrome Platform better!
+          Join a Chrome Platform group:
+          <ul>
+          <li><a href="https://groups.google.com/a/chromium.org/forum/#!forum/chromium-apps">Chrome Apps</a></li>
+          <li><a href="https://groups.google.com/a/chromium.org/forum/#!forum/chromium-extensions">Chrome Extensions</a></li>
+          <li><a href="https://groups.google.com/forum/#!forum/native-client-discuss">Native Client</a></li>
+          </ul>
+          </p>             
+          </article>
+        </div>
+      </div>
+    </div>
+  </section>
+
+</div>
+{{/partials.site}}