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
@@ skipping 23 matching lines @@
 
 <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 81 matching lines @@
         </div>
         <div class="span6">
 
         </div>
       </div>
     </div> <!-- end Packages tab -->
 
   <!-- 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>
@@ skipping 16 matching lines @@
           <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 -->
 
   <!-- 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/"><img src="images/target.png" height="20" width="20">&nbsp;Polymer Elements</a></h4>
+          <p>Create new HTML tags with Polymer elements.</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 %}