first draft of polymer element tutorial

src/site/docs/tutorials/index.markdown

 ---
 layout: default
 title: "Dart Tutorials"
 description: "A Game of Darts—Your guide to building great web apps."
 has-permalinks: true
 rel:
   author:
     - mary-campione
 tutorial:
   id: tut-home
 next: get-started/
 next-title: "Get Started"
 ---
 
 {% capture content %}
 
 <img src="images/banner.png">
 
 **A Game of Darts**
 is a collection of tutorials, _targets_,
-that teaches you how to build mobile web applications
+that teaches you how to build web applications
 using the Dart language, tools, and APIs.
 
 <strong>Who are you?</strong>
 <ul>
 <li> You already know how to program in a structured language like C or Java.</li>
 <li> You are familiar with object-oriented programming.</li>
 <li> You might not know how to program the browser through the DOM (Document Object Model).</li>
 </ul>
 
 <strong>Let's go!</strong> Follow the targets in order from left to right...or choose just the ones you need.
 
 <div class="tute-tabs">
 <div class="tabbable">
   <ul class="nav nav-tabs">
     <li class="active"><a href="#basics" data-toggle="tab">Basics</a></li>
     <li><a href="#dom" data-toggle="tab">Browser</a></li>
     <li><a href="#packages" data-toggle="tab">Packages</a></li>
-    <li><a href="#webui" data-toggle="tab">Web UI</a></li>
-    <!--<li><a href="#polymer" data-toggle="tab">Polymer</a></li>-->
+    <li><a href="#polymer" data-toggle="tab">Polymer</a></li>
     <li><a href="#forms" data-toggle="tab">Forms & Data</a></li>
     <!--<li><a href="#mobile" data-toggle="tab">Mobile</a></li>-->
   </ul>
 
   <div class="tab-content">
 
   <!-- BASICS TAB -->
     <div class="tab-pane active" id="basics">
 
       These two targets give a gentle introduction to writing Dart apps.
@@ skipping 78 matching lines @@
           <p>Organize and share code at <a href="http://pub.dartlang.org/">pub.dartlang.org</a>.</p>
           <img src="images/add-packages-screenshot.png" width="300">
           </section>
         </div>
         <div class="span6">
 
         </div>
       </div>
     </div> <!-- end Packages tab -->
 
-  <!-- WEB UI TAB -->
+  <!-- DEPRECATED: WEB UI TAB -->
+  <!--
     <div class="tab-pane" id="webui">
 
+<aside class="alert" style="background-color:Lavender;color:SlateBlue">
+  <font size="24">
+  <i class="icon-bullhorn"> </i>
+  </font>
+  Web UI is being upgraded to
+  <a href="/polymer-dart/" target="_blank">Polymer.dart</a>.
+  We've just added a tutorial about
+  <a href="/docs/tutorials/polymer/">Polymer Elements</a>,
+  one key feature of Polymer.
+  We've also provided Polymer.dart versions of the tutorial's Web UI apps.
+  Check out the
+  <a href="https://github.com/dart-lang/dart-tutorials-samples/tree/master/web/"
+         target="_blank">tutorials's code repo</a> on github.
+</aside>
+
       Web components and templates are the next great ideas in web application development.
       Together they provide the building blocks to create richer and more dynamic web applications.
       With the Dart team’s <a href="http://pub.dartlang.org/packages/web_ui">Web UI package</a>,
       you can get started using web components and templates now.
 
-<aside class="alert" style="background-color:Lavender;color:SlateBlue">
-  <font size="24">
-  <i class="icon-bullhorn"> </i>
-  </font>
-  Web UI is being upgraded to polymer.dart.
-  For more information about polymer.dart,
-  including tips on porting Web UI apps to polymer.dart
-  and the current status of the project,
-  check out the <a href="/polymer-dart/" target="_blank">polymer.dart</a>
-  home page.
-  For polymer.dart versions of the tutorial's Web UI apps,
-  check out the tutorial's
-  <a href="https://github.com/dart-lang/dart-tutorials-samples/tree/master/web/"
-         target="_blank">code repo</a> on github.
-</aside>
-
       <div class="row-fluid">
 
-        <!-- Get Started Web UI -->
         <div class="span6" style="border-right:1px solid Lavender">
           <section>
           <h4><a href="web-ui/"><img src="images/target.png" height="20" width="20">&nbsp;Get Started with Web UI</a></h4>
           <p>Bind Dart variables to UI elements.</p>
           <img src="images/shout-screenshot.png" width="300">
           </section>
         </div>
 
-        <!-- Templates -->
         <div class="span6" style="border-right:1px solid Lavender">
           <section>
           <h4><a href="templates/"><img src="images/target.png" height="20" width="20">&nbsp;Use Templates</a></h4>
           <p>Activate UI elements with loops and conditionals.</p>
           <img src="images/hangman-screenshot.png" width="300">
           </section>
         </div>
-      </div> <!-- end row-fluid -->
+      </div> 
 
       <div class="row-fluid">
-        <!-- Custom Elements -->
         <div class="span6">
           <section>
           <h4><a href="custom-elements/"><img src="images/target.png" height="20" width="20">&nbsp;Define a Custom DOM Tag</a></h4>
           <p>Create new HTML tags with custom elements.</p>
           <img src="images/convert-screenshot.png" width="300">
           </section>
         </div>
         <div class="span6">
         </div>
-      </div> <!-- end row-fluid -->
-    </div> <!-- end WEB UI tab -->
+      </div>
+    </div>
+  -->
 
   <!-- POLYMER TAB -->
-  <!--
     <div class="tab-pane" id="polymer">
+<!--
+<aside class="alert" style="background-color:Lavender;color:SlateBlue">
+  <font size="24">
+  <i class="icon-bullhorn"> </i>
+  </font>
+  <a href="/polymer-dart/" target="_blank">Polymer.dart</a>.
+  supersedes Web UI.
+  <a href="/docs/tutorials/polymer/">Polymer Elements</a>,
+  a new tutorial, covers one key feature of Polymer.dart.
+  We've also provided Polymer.dart versions of the tutorial's Web UI apps.
+  Check out the
+  <a href="https://github.com/dart-lang/dart-tutorials-samples/tree/master/web/"
+         target="_blank">tutorials's code repo</a> on github.
+</aside>
+-->
       <div class="row-fluid">
 
         <div class="span6" style="border-right:1px solid Lavender">
           <section>
-          <h4><a href="polymer/"><img src="images/target.png" height="20" width="20">&nbsp;Polymer</a></h4>
-          <p>Polymer - a shiny new package!</p>
-          <img src="images/countdown-screenshot.png" width="300">
+          <h4><a href="polymer-intro/"><img src="images/target.png" height="20" width="20">&nbsp;Define a Custom Element</a></h4>
+          <p>Create a custom HTML element using Polymer.</p>
+          <img src="images/stopwatch-screenshot.png" width="200">
           </section>
         </div>
 
         <div class="span6">
         </div>
 
       </div>
     </div>
-  -->
-    
+
   <!-- FORMS TAB -->
     <div class="tab-pane" id="forms">
 
       Various classes in the Dart libraries help you get, send and receive,
       and save user data.
       You can use input elements within forms to get data from users.
       You can use JSON to format data and HttpRequest to send requests and receive responses.
       And, finally, you can save data on the client with IndexedDB.
 
       <div class="row-fluid">
@@ skipping 51 matching lines @@
     </div>
   -->
 
   </div> <!-- end tab content-->
 </div> <!--end tabbable -->
 </div> <!-- end of tute-tabs -->
 
 {% endcapture %}
 
 {% include tutorial_main_page.html %}