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

Side by Side Diff: src/site/index.html

Issue 83663005: added front page samples to testing, plus a couple of tweaks to front page and code lab (Closed) Base URL: https://github.com/dart-lang/dartlang.org.git@master
Patch Set: put front page code snippets under testing, minor tweaks, fixed carousel height problem Created 7 years, 1 month 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: homepage 2 layout: homepage
3 googleapi: true 3 googleapi: true
4 js: 4 js:
5 - url: /js/display-news.js 5 - url: /js/display-news.js
6 - url: /js/os-switcher.js 6 - url: /js/os-switcher.js
7 defer: true 7 defer: true
8 - url: /js/editor-downloads-analytics.js 8 - url: /js/editor-downloads-analytics.js
9 defer: true 9 defer: true
10 - url: /js/front-page-analytics.js 10 - url: /js/front-page-analytics.js
(...skipping 26 matching lines...) Expand all
37 <div class="row"> 37 <div class="row">
38 <div class="col-md-10 col-md-offset-1"> 38 <div class="col-md-10 col-md-offset-1">
39 <div class="row"> 39 <div class="row">
40 <div class="col-md-4"> 40 <div class="col-md-4">
41 <h2>See Dart</h2> 41 <h2>See Dart</h2>
42 <p class="timer"><i class="sprite-icon-timer"></i>About 5 minute s</p> 42 <p class="timer"><i class="sprite-icon-timer"></i>About 5 minute s</p>
43 <p>Dart is class based and object oriented, without being dogmat ic.</p> 43 <p>Dart is class based and object oriented, without being dogmat ic.</p>
44 <a id="see-code" href="#code"><i class="sprite-icon-triangle"></ i>See code</a> 44 <a id="see-code" href="#code"><i class="sprite-icon-triangle"></ i>See code</a>
45 </div> 45 </div>
46 <div class="col-md-4"> 46 <div class="col-md-4">
47 <h2>Try Dart</h2> 47 <h2>Write Dart</h2>
48 <p class="timer"><i class="sprite-icon-timer"></i>About 1 hour</ p> 48 <p class="timer"><i class="sprite-icon-timer"></i>About 1 hour</ p>
49 <p>Write a Dart web app, even if you've never written 49 <p>Follow this code lab to create a Dart web app, even if you've never written
50 a web app before. </p> 50 a web app before. </p>
51 <a href="/codelabs/darrrt/"><i class="sprite-icon-triangle"></i> Write code</a> 51 <a href="/codelabs/darrrt/"><i class="sprite-icon-triangle"></i> Write code</a>
52 </div> 52 </div>
53 <div class="col-md-4"> 53 <div class="col-md-4">
54 <h2>Dive deep</h2> 54 <h2>Dive deep</h2>
55 <p class="timer"><i class="sprite-icon-timer"></i>About 1 day</p > 55 <p class="timer"><i class="sprite-icon-timer"></i>About 1 day</p >
56 <p>Dart has lots of <a href="#tools">tools</a>, 56 <p>Dart has lots of <a href="#tools">tools</a>,
57 <a href="#libraries">libraries</a>, and documentation, 57 <a href="#libraries">libraries</a>, and documentation,
58 plus a developer community.</p> 58 plus a developer community.</p>
59 <a href="/docs/"><i class="sprite-icon-triangle"></i>Learn more< /a> 59 <a href="/docs/"><i class="sprite-icon-triangle"></i>Learn more< /a>
(...skipping 25 matching lines...) Expand all
85 </ol> 85 </ol>
86 <!-- Wrapper for slides --> 86 <!-- Wrapper for slides -->
87 <div class="carousel-inner"> 87 <div class="carousel-inner">
88 <div class="item active"> 88 <div class="item active">
89 <p>You can probably already read and even write Dart code. <a href="/samples/">See more samples.</a> </p> 89 <p>You can probably already read and even write Dart code. <a href="/samples/">See more samples.</a> </p>
90 <div class="code-hldr"> 90 <div class="code-hldr">
91 <pre class="prettyprint lang-dart"> 91 <pre class="prettyprint lang-dart">
92 import 'dart:math' show Random; // Import a class from a library. 92 import 'dart:math' show Random; // Import a class from a library.
93 93
94 void main() { // This is where the app starts executing . 94 void main() { // This is where the app starts executing .
95 print(new Die(<a href="#" class="dart-popover" data-toggle="popover" title="Na med parameters" data-html="true" data-trigger="hover focus" data-content="Set th e value of a named optional parameter. In this case, set the number of sides for a new Die object to 12.">n:12</a>).roll()); // Print a new object's valu e. Chain method calls. 95 print(new Die(<a href="#" class="dart-popover" data-toggle="popover" title="Na med parameters" data-html="true" data-trigger="hover focus" data-content="Set th e value of a named optional parameter. In this case, set the number of sides for a new Die object to 12.">n: 12</a>).roll()); // Print a new object's valu e. Chain method calls.
96 } 96 }
97 97
98 class Die { // Define a class. 98 class Die { // Define a class.
99 static Random shaker = new Random(); // Define a class variable. 99 static Random shaker = new Random(); // Define a class variable.
100 int sides, value; // Define instance variables. 100 int sides, value; // Define instance variables.
101 101
102 String toString() => '<a href="#" class="dart-popover" data-toggle="popover" t itle="String interpolation" data-html="true" data-trigger="hover focus" data-con tent="Use $identifier to insert the value of an identifier (in this case, the in teger value of 'value') into a string.">$value</a>'; // Define a method usi ng shorthand syntax. 102 String toString() => '<a href="#" class="dart-popover" data-toggle="popover" t itle="String interpolation" data-html="true" data-trigger="hover focus" data-con tent="Use $identifier to insert the value of an identifier (in this case, the in teger value of 'value') into a string.">$value</a>'; // Define a method usi ng shorthand syntax.
103 103
104 Die(<a href="#" class="dart-popover" data-toggle="popover" title="Optional nam ed parameters" data-html="true" data-trigger="hover focus" data-content="Paramet ers within curly brackets are optional. Set them by name when you call the funct ion, method or, in this case, constructor. Here, the default value of 'n' is set to 6.">{int n: 6}</a>) { // Define a constructor. 104 Die(<a href="#" class="dart-popover" data-toggle="popover" title="Optional nam ed parameters" data-html="true" data-trigger="hover focus" data-content="Paramet ers within curly brackets are optional. Set them by name when you call the funct ion, method or, in this case, constructor. Here, the default value of 'n' is set to 6.">{int n: 6}</a>) { // Define a constructor.
105 if (4 <= n && n <= 20) { 105 if (4 <= n && n <= 20) {
(...skipping 31 matching lines...) Expand 10 before | Expand all | Expand 10 after
137 class Ellipse { 137 class Ellipse {
138 num minorAxis, majorAxis; 138 num minorAxis, majorAxis;
139 // Syntactic sugar to set members before the constructor body runs. 139 // Syntactic sugar to set members before the constructor body runs.
140 Ellipse(this.minorAxis, this.majorAxis); 140 Ellipse(this.minorAxis, this.majorAxis);
141 } 141 }
142 </pre> 142 </pre>
143 </div> 143 </div>
144 </div> 144 </div>
145 <div class="item"> 145 <div class="item">
146 <p>Add types to your code to help people and tools. 146 <p>Add types to your code to help people and tools.
147 Or don’t. You can always go dynamic.</p> 147 Or don’t. Dart is truly dynamic.</p>
148 <div class="code-hldr"> 148 <div class="code-hldr">
149 <div class="code-hldr"> 149 <div style="padding-top:20px;">While prototyping, code freely without worrying about types.</div>
150 <div class="item" style="margin-top:23px"> 150 <pre class="prettyprint lang-dart">
151 Without types, code freely.<br> 151 // A function without types.
152 <img src="imgs/no_types.png"> 152 recalculate(origin, offset, estimate) {
153 </div> 153 // ...
154 <div class="item" style="margin-top:23px;"> 154 }
155 With types, learn about errors early.<br> 155 </pre>
156 <img src="imgs/with_types.png"> 156 <div style="padding-top:20px;">During production, use types to learn about errors early,
157 </div> 157 communicate intent, and get help with code completion. </div>
158 </div> 158 <pre class="prettyprint lang-dart">
159 // A function with types (and an optional parameter).
160 num recalculate(Point origin, num offset, {bool estimate: false}) {
161 // ...
162 }
163 </pre>
159 </div> 164 </div>
160 </div> 165 </div>
161 <div class="item"> 166 <div class="item">
162 <p>Structure that scales. Organize your code with functions, 167 <p>Structure that scales. Organize your code with functions,
163 classes, mixins, and libraries.</p> 168 classes, mixins, and libraries.</p>
164 <div class="code-hldr"> 169 <div class="code-hldr">
165 <img src="imgs/modular.png"> 170 <img src="imgs/modular.png">
166 </div> 171 </div>
167 </div> 172 </div>
168 </div> 173 </div>
(...skipping 251 matching lines...) Expand 10 before | Expand all | Expand 10 after
420 <b>Note:</b> 425 <b>Note:</b>
421 You can write Dart apps using any recent version of 426 You can write Dart apps using any recent version of
422 {% include os-choices.html %} 427 {% include os-choices.html %}
423 The Dart development tools <b>do not&nbsp;support Windows XP</b>. 428 The Dart development tools <b>do not&nbsp;support Windows XP</b>.
424 Dart Editor requires Java version 6 or higher. 429 Dart Editor requires Java version 6 or higher.
425 </aside> 430 </aside>
426 </div> 431 </div>
427 </section> 432 </section>
428 </div> <!-- end container --> 433 </div> <!-- end container -->
429 </div> <!-- end container-page --> 434 </div> <!-- end container-page -->
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698