| OLD | NEW |
| 1 --- | 1 --- |
| 2 layout: default | 2 layout: default |
| 3 title: "Dart Tutorials" | 3 title: "Dart Tutorials" |
| 4 description: "The Dart Tutorials—Your guide to building great web apps." | 4 description: "The Dart Tutorials—Your guide to building great web apps." |
| 5 has-permalinks: true | 5 has-permalinks: true |
| 6 rel: | 6 rel: |
| 7 author: | 7 author: |
| 8 - mary-campione | 8 - mary-campione |
| 9 tutorial: | 9 tutorial: |
| 10 id: tut-home | 10 id: tut-home |
| (...skipping 43 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 54 | 54 |
| 55 <!-- Getting Started --> | 55 <!-- Getting Started --> |
| 56 <div class="span6"> | 56 <div class="span6"> |
| 57 <section> | 57 <section> |
| 58 <h4><a href="get-started/"><img src="images/target.png" height="20" wi
dth="20"> Get started</a></h4> | 58 <h4><a href="get-started/"><img src="images/target.png" height="20" wi
dth="20"> Get started</a></h4> |
| 59 <p>Get Dart. Run two apps. | 59 <p>Get Dart. Run two apps. |
| 60 </p> | 60 </p> |
| 61 <img src="images/clickme-screenshot.png" width="300"> | 61 <img src="images/clickme-screenshot.png" width="300"> |
| 62 </section> | 62 </section> |
| 63 </div> | 63 </div> |
| 64 <div class="span6"> |
| 65 <section> |
| 66 <h4>Get the sample code</h4> |
| 67 Before moving on, |
| 68 get the code for all the tutorials' samples. |
| 69 <ol> |
| 70 <li><a href="https://github.com/dart-lang/dart-tutorials-samples/a
rchive/master.zip"> |
| 71 Download the ZIP file. |
| 72 </a> |
| 73 </li> |
| 74 <li> |
| 75 Unzip it. |
| 76 </li> |
| 77 <li> |
| 78 Open the dart-tutorials-samples directory in Dart Editor. |
| 79 </li> |
| 80 <li> |
| 81 Go to the next tutorial, |
| 82 <a href="/docs/tutorials/connect-dart-html"> |
| 83 Connect Dart & HTML |
| 84 </a>. |
| 85 </li> |
| 86 </ol> |
| 87 </a> |
| 88 </section> |
| 89 </div> |
| 64 | 90 |
| 65 </div> <!-- end row-fluid --> | 91 </div> <!-- end row-fluid --> |
| 66 </div> <!-- end Getting Started tab --> | 92 </div> <!-- end Getting Started tab --> |
| 67 | 93 |
| 68 <!-- DOM TAB --> | 94 <!-- DOM TAB --> |
| 69 <div class="tab-pane" id="dom"> | 95 <div class="tab-pane" id="dom"> |
| 70 | 96 |
| 71 Web pages are programmed in HTML and represented | 97 Web pages are programmed in HTML and represented |
| 72 within the browser as a tree structure | 98 within the browser as a tree structure |
| 73 called the DOM (Document Object Model). | 99 called the DOM (Document Object Model). |
| (...skipping 57 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 131 </section> | 157 </section> |
| 132 </div> | 158 </div> |
| 133 <div class="span6"> | 159 <div class="span6"> |
| 134 | 160 |
| 135 </div> | 161 </div> |
| 136 </div> | 162 </div> |
| 137 </div> <!-- end Packages tab --> | 163 </div> <!-- end Packages tab --> |
| 138 | 164 |
| 139 <!-- POLYMER TAB --> | 165 <!-- POLYMER TAB --> |
| 140 <div class="tab-pane" id="polymer"> | 166 <div class="tab-pane" id="polymer"> |
| 141 <!-- | |
| 142 <aside class="alert" style="background-color:Lavender;color:SlateBlue"> | |
| 143 <font size="24"> | |
| 144 <i class="icon-bullhorn"> </i> | |
| 145 </font> | |
| 146 <a href="/polymer-dart/" target="_blank">Polymer.dart</a>. | |
| 147 supersedes Web UI. | |
| 148 <a href="/docs/tutorials/polymer/">Polymer Elements</a>, | |
| 149 a new tutorial, covers one key feature of Polymer.dart. | |
| 150 We've also provided Polymer.dart versions of the tutorial's Web UI apps. | |
| 151 Check out the | |
| 152 <a href="https://github.com/dart-lang/dart-tutorials-samples/tree/master/web/" | |
| 153 target="_blank">tutorials's code repo</a> on github. | |
| 154 </aside> | |
| 155 --> | |
| 156 <div class="row-fluid"> | 167 <div class="row-fluid"> |
| 157 | 168 |
| 158 <div class="span6"> | 169 <div class="span6"> |
| 159 <section> | 170 <section> |
| 160 <h4><a href="polymer-intro/"><img src="images/target.png" height="20"
width="20"> Define a Custom Element</a></h4> | 171 <h4><a href="polymer-intro/"><img src="images/target.png" height="20"
width="20"> Define a Custom Element</a></h4> |
| 161 <p>Create a custom HTML element using Polymer.</p> | 172 <p>Create a custom HTML element using Polymer.</p> |
| 162 <img src="images/stopwatch-screenshot.png" width="200"> | 173 <img src="images/stopwatch-screenshot.png" width="200"> |
| 163 </section> | 174 </section> |
| 164 </div> | 175 </div> |
| 165 | 176 |
| (...skipping 67 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 233 </div> | 244 </div> |
| 234 --> | 245 --> |
| 235 | 246 |
| 236 </div> <!-- end tab content--> | 247 </div> <!-- end tab content--> |
| 237 </div> <!--end tabbable --> | 248 </div> <!--end tabbable --> |
| 238 </div> <!-- end of tute-tabs --> | 249 </div> <!-- end of tute-tabs --> |
| 239 | 250 |
| 240 {% endcapture %} | 251 {% endcapture %} |
| 241 | 252 |
| 242 {% include tutorial_main_page.html %} | 253 {% include tutorial_main_page.html %} |
| OLD | NEW |