Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(269)

Side by Side Diff: src/site/docs/tutorials/index.markdown

Issue 26542002: edit pass on T3,4,5, updated images (Closed) Base URL: https://github.com/dart-lang/dartlang.org.git@master
Patch Set: merging with master Created 7 years, 2 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
OLDNEW
1 --- 1 ---
2 layout: default 2 layout: default
3 title: "Dart Tutorials" 3 title: "Dart Tutorials"
4 description: "A Game of Darts—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
11 next: get-started/ 11 next: get-started/
12 next-title: "Get Started" 12 next-title: "Get Started"
13 --- 13 ---
14 14
15 {% capture content %} 15 {% capture content %}
16 16
17 <img src="images/banner.png"> 17 <img src="images/banner.png">
18 18
19 **A Game of Darts** 19 **The Dart Tutorials** teach you how to build web applications
20 is a collection of tutorials, _targets_,
21 that teaches you how to build web applications
22 using the Dart language, tools, and APIs. 20 using the Dart language, tools, and APIs.
23 21
24 <strong>Who are you?</strong> 22 <strong>Who are you?</strong>
25 <ul> 23 <ul>
26 <li> You already know how to program in a structured language like C or Java.</l i> 24 <li> You already know how to program in a structured language like C or Java.</l i>
27 <li> You are familiar with object-oriented programming.</li> 25 <li> You are familiar with object-oriented programming.</li>
28 <li> You might not know how to program the browser through the DOM (Document Obj ect Model).</li> 26 <li> You might not know how to program the browser
27 through the DOM (Document Object Model).</li>
29 </ul> 28 </ul>
30 29
31 <strong>Let's go!</strong> Follow the targets in order from left to right...or c hoose just the ones you need. 30 <strong>Let's go!</strong> Follow the tutorials in order
31 from left to right...or choose just the ones you need.
32 32
33 <div class="tute-tabs"> 33 <div class="tute-tabs">
34 <div class="tabbable"> 34 <div class="tabbable">
35 <ul class="nav nav-tabs"> 35 <ul class="nav nav-tabs">
36 <li class="active"><a href="#basics" data-toggle="tab">Basics</a></li> 36 <li class="active"><a href="#basics" data-toggle="tab">Get started</a></li>
37 <li><a href="#dom" data-toggle="tab">Browser</a></li> 37 <li><a href="#dom" data-toggle="tab">Browser</a></li>
38 <li><a href="#packages" data-toggle="tab">Packages</a></li> 38 <li><a href="#packages" data-toggle="tab">Packages</a></li>
39 <li><a href="#polymer" data-toggle="tab">Polymer</a></li> 39 <li><a href="#polymer" data-toggle="tab">Polymer</a></li>
40 <li><a href="#forms" data-toggle="tab">Forms & Data</a></li> 40 <li><a href="#forms" data-toggle="tab">Forms & Data</a></li>
41 <!--<li><a href="#mobile" data-toggle="tab">Mobile</a></li>--> 41 <!--<li><a href="#mobile" data-toggle="tab">Mobile</a></li>-->
42 </ul> 42 </ul>
43 43
44 <div class="tab-content"> 44 <div class="tab-content">
45 45
46 <!-- BASICS TAB --> 46 <!-- BASICS TAB -->
47 <div class="tab-pane active" id="basics"> 47 <div class="tab-pane active" id="basics">
48 48
49 These two targets give a gentle introduction to writing Dart apps.
50 Download the software and 49 Download the software and
51 discover which tools and libraries you get with the bundle. 50 discover which tools and libraries you get with the bundle.
52 Run two sample apps. 51 Run two sample apps.
53 Learn how to embed Dart code in an HTML web page,
54 to provide it with an interactive user interface and dynamic functionality .
55 52
56 <div class="row-fluid"> 53 <div class="row-fluid">
57 54
58 <!-- Getting Started --> 55 <!-- Getting Started -->
59 <div class="span6" style="border-right:1px solid Lavender"> 56 <div class="span6">
60 <section> 57 <section>
61 <h4><a href="get-started/"><img src="images/target.png" height="20" wi dth="20">&nbsp;Get Started</a></h4> 58 <h4><a href="get-started/"><img src="images/target.png" height="20" wi dth="20">&nbsp;Get started</a></h4>
62 <p>Get Dart. Run two apps. 59 <p>Get Dart. Run two apps.
63 </p> 60 </p>
64 <img src="images/clickme-screenshot.png" width="300"> 61 <img src="images/clickme-screenshot.png" width="300">
65 </section> 62 </section>
66 </div> 63 </div>
67 64
68 <!-- Connect Dart & HTML -->
69 <div class="span6">
70 <section>
71 <h4><a href="connect-dart-html/"><img src="images/target.png" height=" 20" width="20">&nbsp;Connect Dart &amp; HTML</a></h4>
72 <p>Embed Dart in a web page.
73 </p>
74 <img src="images/miniapp-screenshot.png" width="300">
75 </section>
76 </div>
77
78 </div> <!-- end row-fluid --> 65 </div> <!-- end row-fluid -->
79 </div> <!-- end Getting Started tab --> 66 </div> <!-- end Getting Started tab -->
80 67
81 <!-- DOM TAB --> 68 <!-- DOM TAB -->
82 <div class="tab-pane" id="dom"> 69 <div class="tab-pane" id="dom">
83 70
84 Web pages are programmed in HTML and represented 71 Web pages are programmed in HTML and represented
85 within the browser as a tree structure 72 within the browser as a tree structure
86 called the DOM (Document Object Model). 73 called the DOM (Document Object Model).
87 Dart apps can modify the DOM programmatically, 74 Dart apps can modify the DOM programmatically,
88 thus dynamically changing the web page 75 thus dynamically changing the web page.
89 and responding to user input. 76 First, learn how to connect Dart and HTML.
90 Learn how to add, move, and remove DOM elements 77 Then learn how to add, move, and remove DOM elements.
91 in these two targets.
92 78
93 <div class="row-fluid"> 79 <div class="row-fluid">
80 <!-- Connect Dart & HTML -->
81 <div class="span6">
82 <section>
83 <h4><a href="connect-dart-html/"><img src="images/target.png" height=" 20" width="20">&nbsp;Connect Dart &amp; HTML</a></h4>
84 <p>Include a Dart script in an HTML page.
85 </p>
86 <img src="images/miniapp-screenshot.png" width="300">
87 </section>
88 </div>
94 89
95 <!-- Add Elements --> 90 <!-- Add Elements -->
96 <div class="span6" style="border-right:1px solid Lavender"> 91 <div class="span6">
97 <section> 92 <section>
98 <h4><a href="add-elements/"><img src="images/target.png" height="20" w idth="20">&nbsp;Add Elements to the DOM</a></h4> 93 <h4><a href="add-elements/"><img src="images/target.png" height="20" w idth="20">&nbsp;Add Elements to the DOM</a></h4>
99 <p>Add elements to the web page, move them...</p> 94 <p>Add elements to the web page and move them.</p>
100 <img src="images/todo-screenshot.png" width="300"> 95 <img src="images/todo-screenshot.png" width="300">
101 </section> 96 </section>
102 </div> 97 </div>
103 98
99 </div>
100
101
102 <div class="row-fluid">
104 <!-- Remove Elements --> 103 <!-- Remove Elements -->
105 <div class="span6"> 104 <div class="span6">
106 <section> 105 <section>
107 <h4><a href="remove-elements/"><img src="images/target.png" height="20 " width="20">&nbsp;Remove DOM Elements</a></h4> 106 <h4><a href="remove-elements/"><img src="images/target.png" height="20 " width="20">&nbsp;Remove DOM Elements</a></h4>
108 <p>... and delete them.</p> 107 <p>Delete elements from the web page.</p>
109 <img src="images/todo-with-delete-screenshot.png" width="300"> 108 <img src="images/todo-with-delete-screenshot.png" width="300">
110 </section> 109 </section>
111 </div> 110 </div>
111 <div class="span6">
112 </div>
112 113
113 </div> <!-- end row-fluid --> 114 </div> <!-- end row-fluid -->
114 </div> <!-- end DOM tab --> 115 </div> <!-- end DOM tab -->
115 116
116 <!-- PACKAGES TAB --> 117 <!-- PACKAGES TAB -->
117 <div class="tab-pane" id="packages"> 118 <div class="tab-pane" id="packages">
118 119
119 Dart developers have been busy creating code libraries that can help you b e more productive. 120 Dart developers have been busy creating code libraries that can help you b e more productive.
120 Leverage that code or put your code out in the world to share with others. 121 Leverage that code or put your code out in the world to share with others.
121 122
122 <div class="row-fluid"> 123 <div class="row-fluid">
123 124
124 <!-- Packages --> 125 <!-- Packages -->
125 <div class="span6" style="border-right:1px solid Lavender"> 126 <div class="span6">
126 <section> 127 <section>
127 <h4><a href="shared-pkgs/"><img src="images/target.png" height="20" wi dth="20">&nbsp;Install Shared Packages</a></h4> 128 <h4><a href="shared-pkgs/"><img src="images/target.png" height="20" wi dth="20">&nbsp;Install Shared Packages</a></h4>
128 <p>Organize and share code at <a href="http://pub.dartlang.org/">pub.d artlang.org</a>.</p> 129 <p>Organize and share code at <a href="http://pub.dartlang.org/">pub.d artlang.org</a>.</p>
129 <img src="images/add-packages-screenshot.png" width="300"> 130 <img src="images/add-packages-screenshot.png" width="300">
130 </section> 131 </section>
131 </div> 132 </div>
132 <div class="span6"> 133 <div class="span6">
133 134
134 </div> 135 </div>
135 </div> 136 </div>
(...skipping 68 matching lines...) Expand 10 before | Expand all | Expand 10 after
204 <a href="/docs/tutorials/polymer/">Polymer Elements</a>, 205 <a href="/docs/tutorials/polymer/">Polymer Elements</a>,
205 a new tutorial, covers one key feature of Polymer.dart. 206 a new tutorial, covers one key feature of Polymer.dart.
206 We've also provided Polymer.dart versions of the tutorial's Web UI apps. 207 We've also provided Polymer.dart versions of the tutorial's Web UI apps.
207 Check out the 208 Check out the
208 <a href="https://github.com/dart-lang/dart-tutorials-samples/tree/master/web/" 209 <a href="https://github.com/dart-lang/dart-tutorials-samples/tree/master/web/"
209 target="_blank">tutorials's code repo</a> on github. 210 target="_blank">tutorials's code repo</a> on github.
210 </aside> 211 </aside>
211 --> 212 -->
212 <div class="row-fluid"> 213 <div class="row-fluid">
213 214
214 <div class="span6" style="border-right:1px solid Lavender"> 215 <div class="span6">
215 <section> 216 <section>
216 <h4><a href="polymer-intro/"><img src="images/target.png" height="20" width="20">&nbsp;Define a Custom Element</a></h4> 217 <h4><a href="polymer-intro/"><img src="images/target.png" height="20" width="20">&nbsp;Define a Custom Element</a></h4>
217 <p>Create a custom HTML element using Polymer.</p> 218 <p>Create a custom HTML element using Polymer.</p>
218 <img src="images/stopwatch-screenshot.png" width="200"> 219 <img src="images/stopwatch-screenshot.png" width="200">
219 </section> 220 </section>
220 </div> 221 </div>
221 222
222 <div class="span6"> 223 <div class="span6">
223 </div> 224 </div>
224 225
225 </div> 226 </div>
226 </div> 227 </div>
227 228
228 <!-- FORMS TAB --> 229 <!-- FORMS TAB -->
229 <div class="tab-pane" id="forms"> 230 <div class="tab-pane" id="forms">
230 231
231 Various classes in the Dart libraries help you get, send and receive, 232 Various classes in the Dart libraries help you get, send, receive,
232 and save user data. 233 and save user data.
233 You can use input elements within forms to get data from users. 234 You can use input elements within forms to get data from users.
234 You can use JSON to format data and HttpRequest to send requests and recei ve responses. 235 You can use JSON to format data and HttpRequest to send requests and recei ve responses.
235 And, finally, you can save data on the client with IndexedDB. 236 And, finally, you can save data on the client with IndexedDB.
236 237
237 <div class="row-fluid"> 238 <div class="row-fluid">
238 239
239 <!-- Fetch Data --> 240 <!-- Fetch Data -->
240 <div class="span6" style="border-right:1px solid Lavender"> 241 <div class="span6">
241 <section> 242 <section>
242 <h4><a href="fetchdata/"><img src="images/target.png" height="20" widt h="20">&nbsp;Fetch Data Dynamically</a></h4> 243 <h4><a href="fetchdata/"><img src="images/target.png" height="20" widt h="20">&nbsp;Fetch Data Dynamically</a></h4>
243 <p>Load data from a static file or from a server.</p> 244 <p>Load data from a static file or from a server.</p>
244 <img src="images/allaboutyou-screenshot.png" width="300"> 245 <img src="images/allaboutyou-screenshot.png" width="300">
245 </section> 246 </section>
246 </div> 247 </div>
247 248
248 <!-- Forms --> 249 <!-- Forms -->
249 <div class="span6" style="border-right:1px solid Lavender"> 250 <div class="span6">
250 <section> 251 <section>
251 <h4><a href="forms/"><img src="images/target.png" height="20" width="2 0">&nbsp;Get Input from a Form</a></h4> 252 <h4><a href="forms/"><img src="images/target.png" height="20" width="2 0">&nbsp;Get Input from a Form</a></h4>
252 <p>Use forms and input elements to get data.</p> 253 <p>Use forms and input elements to get data.</p>
253 <img src="images/slambook-screenshot.png" width="300"> 254 <img src="images/slambook-screenshot.png" width="300">
254 </section> 255 </section>
255 </div> 256 </div>
256 </div> <!-- end row-fluid --> 257 </div> <!-- end row-fluid -->
257 258
258 <div class="row-fluid"> 259 <div class="row-fluid">
259 <!-- IndexedDB --> 260 <!-- IndexedDB -->
260 <div class="span6"> 261 <div class="span6">
261 <section> 262 <section>
262 <h4><a href="indexeddb/"><img src="images/target.png" height="20" widt h="20">&nbsp;Use IndexedDB</a></h4> 263 <h4><a href="indexeddb/"><img src="images/target.png" height="20" widt h="20">&nbsp;Use IndexedDB</a></h4>
263 <p>Save data on the client with IndexedDB!</p> 264 <p>Save data on the client with IndexedDB.</p>
264 <img src="images/countdown-screenshot.png" width="300"> 265 <img src="images/countdown-screenshot.png" width="300">
265 </section> 266 </section>
266 </div> 267 </div>
267 <div class="span6"> 268 <div class="span6">
268 </div> 269 </div>
269 </div> <!-- end row-fluid --> 270 </div> <!-- end row-fluid -->
270 </div> <!-- end FORMS tab --> 271 </div> <!-- end FORMS tab -->
271 272
272 <!-- MOBILE TAB --> 273 <!-- MOBILE TAB -->
273 <!-- 274 <!--
(...skipping 15 matching lines...) Expand all
289 </div> 290 </div>
290 --> 291 -->
291 292
292 </div> <!-- end tab content--> 293 </div> <!-- end tab content-->
293 </div> <!--end tabbable --> 294 </div> <!--end tabbable -->
294 </div> <!-- end of tute-tabs --> 295 </div> <!-- end of tute-tabs -->
295 296
296 {% endcapture %} 297 {% endcapture %}
297 298
298 {% include tutorial_main_page.html %} 299 {% include tutorial_main_page.html %}
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698