This repository has been archived by the owner on Aug 10, 2020. It is now read-only.
/
index.html
471 lines (424 loc) · 36.8 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
<!DOCTYPE html public "i ♥ the web">
<!--[if lt IE 9]> <html class="no-js oldie no-fontface" lang="zh-cn"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js no-fontface" lang="zh-cn"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<title>推动Web向前发展 | 如何参与网页标准和浏览器的演化</title>
<meta name="description" content="前端开发人员能做的事情">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
<!-- For iPhone 4 with high-resolution Retina display: -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon-114x114-precomposed.png">
<!-- For first-generation iPad: -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon-72x72-precomposed.png">
<!-- For non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">
<link rel="stylesheet" href="../css/style.css">
<!-- Should be combined: -->
<script src="../js/libs/modernizr.min.js"></script>
<script src="../js/controller.js"></script>
</head>
<body>
<b class="gimmick"><i></i><i></i><i></i></b>
<header class="col-ab">
<div class="lead">
<h1 class="hed-lead">推动Web向前发展<span></span></h1>
<h2 class="subhed-lead">你可以让web变成你期望的那样。</h2>
<p class="subhed">喜欢web标准，也想要回馈社区，却不知道从哪儿下手？ <b>让我们从这里开始吧。</b></p>
</div>
<div class="col-split">
<p>不管你是一个天才web开发者、从table和<code>font</code>时代走过来的web老枪、还是一个骨灰级的电脑技术爱好者，都可以通过很多途径来回馈web平台，以下列出来的这些，任何人都可以去做。</p>
<p>我们的目标是让任何人都可以很容易的上手，开始为web这个平台做贡献，不管是去深入学习背后的工作原理、把经验分享给更多的人、还是编写具体的规范。web的成长源于你这样的贡献者，因此我们想让你们这些贡献者回馈的时候变得更加方便。</p>
<p>其他版本：<a href="../">English</a>、<a href="../ar">عربى</a>。</p>
</div>
</header>
<div id="nav_container">
<nav id="toc">
<ul>
<li><a href=#levelup>炼级</a></li>
<li><a href=#digdeep>入戏</a></li>
<li><a href=#virtuoso>大家</a></li>
</ul>
</nav>
</div>
<article class="section">
<div class="standout" id=levelup>
<h1 class="hed">炼级</h1>
<h2 class="subhed">在处理工作相关的技术问题上你已经十分厉害了，接下来让我们投入到社区中去吧！</h2>
</div>
<section id="learn" class="col-ab">
<div class="col-a">
<h1 class="hed">学习</h1>
<p>不断变化是web的一个重要特点，当这些变化发生的时候，我们需要迎头赶上。以下是一些非常有用的资源，可以让你了解浏览器工作原理，掌握他们的最新动态和特性更新。</p>
<h2 id="how_do_i_keep_up_with_what8217s_landing_in_browsers" class="subhed">紧跟浏览器们的步伐</h2>
<ul>
<li><a href="http://updates.html5rocks.com/2011/10/Keeping-up-with-HTML5-and-browser-support">HTML5新特性和浏览器兼容性</a> - HTML5和浏览器资讯相关资源列表
<li><a href="http://peter.sh/">Peter Beverloo’s Blog</a> - WebKit和Chrome相关，每周更新
<li><a href="http://blog.whatwg.org/">The WHATWG Blog</a> - web标准相关议案的每周摘要
<li><a href="http://www.w3.org/QA/archive/open_web/">W3C’s open web</a> - html、css、SVG、Web APIs、EcmaScript/JavaScript、HTTP等相关，每周更新
<li><a href="http://my.opera.com/ODIN/blog/">Opera Developer News</a> - Opera平台的相关资讯
<li><a href="http://updates.html5rocks.com">HTML5 Rocks updates</a> - HTML5和Chrome相关资讯
<li><a href="http://hacks.mozilla.org/">Mozilla Hacks</a> - 炫酷的apps和各种HTML5特性
<li><a href="http://blogs.msdn.com/b/ie/">IE Blog</a> - IE最新消息
</ul>
<h3 id="follow_them_on_twitter" class="subhed">在Twitter上Follow这些帐号</h3>
<p>
<a href="http://twitter.com/oDevRel">@oDevRel</a> (Opera developer relations)， <a href="http://twitter.com/ChromiumDev">@ChromiumDev</a> (Chrome developer relations)， <a href="http://twitter.com/mozhacks">@mozhacks</a> (Mozilla's web developer outpost) & <a href="http://twitter.com/ie">@IE</a> (Internet Explorer Team)。
</p>
<h2 id="how_do_i_understand_how_browsers_work" class="subhed">了解浏览器的工作原理？</h2>
<ul>
<li><a href="http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/">How Browsers Work: Behind the Scenes of Modern Web Browsers</a> - 深度剖析浏览器是怎么工作的</li>
<li><a href="http://ontwik.com/javascript/txjs-2011-a9-alex-russell-life-of-a-button-element/?utm_source=feedburner&utm_medium=twitter&utm_campaign=Feed%3A+Ontwik+%28Ontwik%29">Life of a <button> element (by Alex Russell)</a> - 关于布局渲染和CSS(vimeo视频-GFW)</li>
</ul>
<h2 id="other_learning_resources" class="subhed">其他学习资源</h2>
<ul>
<li><a href="http://www.qianduan.net/">前端观察</a> - 为前端技术人员提供所需的资讯及资源。</li>
<li><a href="http://css-tricks.com">CSS-tricks</a> - 提供大量的文章、教程、下载资源。</li>
<li><a href="http://html5doctor.com">HTML5doctor</a> - 关于HTML5、她的语义化、以及如何在项目中马上应用。</li>
<li><a href="http://diveintohtml5.info/">Dive into HTML5</a> - 深度解析部分HTML5特性。</li>
<li><a href="http://addyosmani.com/blog/">Addy Osmani’s blog</a> - jQuery、JavaScript、HTML5、CSS3相关的大量干货，作者已被google Chrome team 收编。</li>
<li><a href="http://paulirish.com">Paul Irish’s blog</a> - Paul Irish大牛，不局限于某项具体的技术，各种最新最酷。</li>
<li><a href="http://dev.opera.com">Dev.Opera</a> - HTML5特性相关的各种文章。</li>
<li><a href="http://paulirish.com/2011/web-browser-frontend-and-standards-feeds-to-follow/">浏览器、前端、标准相关的feeds集合。</a> </li>
<li><a href="http://yuilibrary.com/theater/">YUI Theater</a> - 前端开发web技术的视频。</li>
<li><a href="http://www.adobe.com/devnet/html5.html">Adobe Developer Connection</a> - HTML5、CSS3、手机开发相关的文章和视频。</li>
</ul>
<h2 id="reference_docs_wikis" class="subhed">参考文档/wikis</h2>
<ul>
<li><a href="https://developer.mozilla.org/en-US/">Mozilla’s MDN</a> - HTML、CSS、JavaScript、DOM...等相关的许多NB文档， 同时也可以贡献你自己的知识，请参考<a href="https://developer.mozilla.org/Project:en/How_to_Help">怎么帮忙？</a> 如何<a href="https://developer.mozilla.org/Project:en/Getting_started">上手</a>。</li>
<li><a href="http://dochub.io/">dochub.io</a> - 快速获取MDN文档，覆盖HTML、CSS、JavaScript、DOM...</li>
<li><a href="https://developer.mozilla.org/Writing_Forward_Compatible_Websites">向前兼容的网站</a> - 让你的网站在最新版的浏览器中正常工作的一系列最佳实践</li>
<li><a href="http://html5please.us/">HTML5 Please - Use new and shiny responsibly</a> - HTML5特性的浏览器兼容大全，方便查找、筛选各种特性。</li>
</ul>
</div>
<div class="col-b">
<section class="getinvolved">
<h2 class="subhed">心痒了？</h2>
<div class="task" data-hashtag="#learn">
<p>快速过一遍这些文章和tweets，你会发现有些东西和你理解的不一样！万事开头难，相信我们，只要你迈出了第一步，一切都会变得很容易。</p>
<a href="#" class="pledge">我要参与！</a>
<div class="pledges"><p>下面是一些和你志同道合的开发者:</p></div>
</div>
</section>
</div>
</section>
<section id="meetups" class="col-ab">
<div class="col-a">
<h1 class="hed">多接触志趣相同者</h1>
<p>出席一些本地的专业会议是个不错的选择，可以与其他开发者的相互学习、共享资源、思想碰撞、建立合作关系。<a href="http://meetup.com">Meetup</a> 和 <a href="http://lanyrd.com">Lanyrd</a> 这些网站可以帮你找到你所在区域的会议。国内比较不错的有<a href="http://www.w3ctech.com/">w3ctech</a>、<a href="http://www.webrebuild.org/">webrebuild</a>、<a href="http://www.d2forum.org/">d2论坛</a>等。</p>
</div>
</section>
<section id="askhelp" class="col-ab">
<div class="col-a">
<h1 class="hed">寻求帮助</h1>
<h2 id="answer_questions_and_participate_in_conversations_on_irc" class="subhed">在IRC上问问题、参加讨论</h2>
<p><a href="http://richard.esplins.org/siwi/2011/07/08/getting-started-freenode-irc/">如何使用freenode和irc</a></p>
<ul>
<li><b>Freenode IRC 频道：</b> #html5 / #css / #javascript / #whatwg / #jquery / #yui / #dojo / #web / <span title="browser based game development">#bbg</span> (on <a href="http://webchat.freenode.net">irc.freenode.net</a>) </li>
<li id="mozilla_irc"><b>Mozilla IRC 频道：</b> #js (on <a href="http://irc.mozilla.org">irc.mozilla.org</a>)</li>
</ul>
<h2 id="how_to_ask_for_help" class="subhed">怎样寻求帮助</h2>
<ol class="tasks">
<li>你需要先<a href="http://css-tricks.com/13414-seriously-just-make-a-jsfiddle/">在jsfiddle上做一个可以共享的demo</a>。</li>
<li><a href="http://css-tricks.com/6263-reduced-test-cases/">做一个精简的测试用例</a>。</li>
<li>记住：问题一定要具体、详细！</li>
<li>在IRC上、<a href="http://stackoverflow.com">StackOverflow</a>(以及<a href="http://chat.stackoverflow.com/rooms/17/javascript">javascript的聊天室</a>)上、朋友群(QQ群)上提问。
</ol>
</div>
<div class="col-b">
<section class="getinvolved">
<h2 class="subhed">伸出援手</h2>
<div class="task" data-hashtag="#ask4help">
<p>我们都是依靠他人的帮助成长起来的。不要害羞，只管提问就是！但是要先在jsfiddle上做好你的Demo。 =D</p>
<a href="#" class="pledge">我要参与！</a>
<div class="pledges"><p>下面是一些和你志同道合的开发者:</p></div>
</div>
</section>
</div>
</section>
</article>
<article class="section">
<div class="standout" id=digdeep>
<h1 class="hed">入戏</h1>
<h2 class="subhed">熟悉了舞台之后，就轮到你上场了。</h2>
</div>
<section id="helpothers" class="col-ab">
<div class="col-a">
<h1 class="hed">帮助他人</h1>
<p>我们都是过来人，帮助他人可以巩固你的知识，扩散你所领悟的一些想法、观点。以下是一些很好的开源项目，他们一致在寻求帮助。每一个补丁都是不容忽视的，不积跬步，无以至千里；不积小流，无以成江海。</p>
<h2 id="open_source_projects_worth_your_time" class="subhed">这些开源项目值得你为之付出。</h2>
<ul>
<li><a href="http://github.com/h5bp/html5-boilerplate">HTML5 Boilerplate</a> <span>- 前端开发最佳实践交流</span>
<li><a href="https://github.com/jquery/learn.jquery.com">jQuery Learning Site</a> <span>- 学习jQuery的网站</span>
<li><a href="https://github.com/jquery/jquery-mobile">jQuery Mobile</a> <span>- 手机端渐进增强最佳实践</span>
<li><a href="https://github.com/Modernizr/Modernizr">Modernizr</a> <span>- 最好的特性检测库，可以用作各种HTML5和CSS3的渐进增强和低版本浏览器兼容</span>
<li><a href="https://github.com/twitter/bootstrap">Twitter’s bootstrap</a> <span>- 一个快速启动webapp开发的工具包，包括css和js</span>
<li><a href="http://necolas.github.com/normalize.css/">Normalize.css</a> <span>- 让标签在所有浏览器上表现一致</span>
<li><a href="http://dojotoolkit.org/get-involved">Dojo</a> <span>- 综合性的前端工具包，可用于网站、终端、桌面应用开发</span>
<li><a href="https://github.com/paulirish/lazyweb-requests/issues?state=open">Lazyweb requests</a> <span>- 为web开发者服务的，有创意、实用的工具和解决方案收集</span>
<li><a href="https://github.com/jquery/standards">jQuery standards project</a> <span>- 和jQuery相关web标准问题和讨论</span>
<li><a href="http://yuilibrary.com/">YUI</a> <span>- 历史悠久的雅虎YUI库</span></li>
</ul>
<p>和上面所说的 <a href="#how_to_ask_for_help">‘如何寻求帮助’</a> 一样做， 同时去了解一下 <a href="http://addyosmani.com/blog/getting-involved-with-open-source/">Addy Osmani关于如何参与的podcast</a>！</p>
</div>
<div class="col-b">
<section class="getinvolved">
<h2 class="subhed">分享、传播</h2>
<div class="task" data-hashtag="#helpothers">
<p>多看好代码才能写出更NB的代码。深入研究下面这些项目，同时帮助她们不断成长，变得更好。</p>
<a href="#" class="pledge">我要参与！</a>
<div class="pledges"><p>下面是一些和你志同道合的开发者:</p></div>
</div>
</section>
</div>
</div>
</section>
<section id="specs" class="col-ab">
<div class="col-a">
<h1 class="hed">为规范提供反馈</h1>
<p>规范描绘出我们想要的特性。她们是工作组在邮件列表中，通过热烈的讨论发展而来。我们不能保证所有的浏览器都会遵循规范中阐述的规则，各个浏览器会给我们这些开发者提供一些和标准冲突的东西。</p>
<ul>
<li>学习 <a href="http://diveintohtml5.info/past.html">HTML的历史</a>。</li>
<li>去了解一下 <a href="http://fantasai.inkedblade.net/weblog/2011/inside-csswg/">CSS工作组是如何运作的</a>。</li>
<li>订阅这些邮件列表，跟进并参与那些推动web发展的讨论。
<ul class="resources">
<li><a href="http://lists.w3.org/Archives/Public/public-webapps/">public-webapps</a> - Web Applications工作组的技术讨论</li>
<li><a href="http://lists.w3.org/Archives/Public/www-style/">www-style</a> - CSS和相关规范的讨论</li>
<li><a href="http://lists.whatwg.org/pipermail/whatwg-whatwg.org/">whatwg</a> - WHATWG的邮件列表</li>
<li><a href="http://lists.w3.org/Archives/Public/public-html/">public-html</a> - W3C HTML工作组</li>
<li><a href="http://lists.w3.org/Archives/Public/www-dom/">www-dom</a> - DOM相关</li>
<li><a href="http://lists.w3.org/Archives/Public/public-fx/">public-fx</a> - CSS和SVG工作组相关的问题讨论</li>
</ul>
</li>
<li>仔细阅读 <a href="http://developers.whatwg.org/">HTML5开发者规范</a> (去掉了实现机制部分，格式更美观)。</li>
<li>对<a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/">HTML规范</a>进行注解和反馈最容易的方法：点击页面相关的部分，在页面下方的输入框输入你的想法，然后提交。</li>
<li>
在Twitter上关注HTML和CSS工作组的帐号，查看HTML和CSS规范的最新的注解：
<ul class="resources">
<li><a href="http://twitter.com/whatwg">@whatwg</a></li>
<li><a href="http://twitter.com/csscommits">@csscommits</a></li>
</ul>
</li>
</ul>
</div>
<div class="col-b">
<section class="getinvolved">
<h2 class="subhed">你为规范出力了吗?</h2>
<div class="task" data-hashtag="#feedback">
<p>我们是规范的使用者，为什么我们不帮助改善规范，让规范更合自己的胃口？支持标准，让规范越来越好！</p>
<a href="#" class="pledge">我要参与！</a>
<div class="pledges"><p>下面是一些和你志同道合的开发者:</p></div>
</div>
</section>
</div>
</section>
<section id="explore" class="col-ab">
<div class="col-a">
<h1 class="hed">发掘前端特性</h1>
<p>当你掌握了最基本的东西，就可以开始深入研究当前(和未来)的web标准了！好激动啊，因为我们这里有高级CSS、新的HTML特性/API、以及这些语言被期望的美好憧憬。有些新特性已经被一些浏览器支持，发掘这些新特性，会帮助我们推动web不断前行。</p>
<h2 id="examples_of_how_to_explore_features_well" class="subhed">如何更好地发掘特性的例子</h2>
<ul>
<li><a href="http://perfectionkills.com/global-eval-what-are-the-options/">全局 <code>eval</code>: 如何选择？</a> <span> - kangax</span>
<li><a href="http://nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/">CSS2.1中的多背景、多边框</a>(:before/:after) <span> - Nicolas Gallagher</span>
<li><a href="http://nicolasgallagher.com/css-background-image-hacks/">CSS background-image hacks</a>(:before/:after) <span> - Nicolas Gallagher</span>
<li><a href="http://www.webdirections.org/blog/let-the-web-move-you-css3-animations-and-transitions/">让Web动起来 — CSS3 Animations和Transitions</a> <span> - John Allsopp</span>
<li><a href="http://addyosmani.com/largescalejavascript/">大型可扩展JavaScript应用程序架构的模块</a> <span> - Addy Osmani</span>
<li><a href="http://designfestival.com/the-cicada-principle-and-why-it-matters-to-web-designers/">什么是蝉原则，她为什么对web设计人员很重要(图片组合的多种可能性)</a> <span> - Alex Walker</span>
<li><a href="http://css-tricks.com/snippets/css/webkit-keyframe-animation-syntax/">CSS关键帧动画的语法</a> <span> - Chris Coyier</span>
<li><a href="http://www.blog.highub.com/css/whats-new-in-css-selectors-level-4/">CSS选择器新特性(CSS4)</a> <span> - Shi Chuan</span>
<li><a href="http://mathiasbynens.be/notes/touch-icons">touch icons给移动设备的favicon</a> <span> - Mathias Bynens</span>
<li><a href="http://coding.smashingmagazine.com/2009/09/15/the-z-index-css-property-a-comprehensive-look/">CSS中的z-index综述</a> <span> - Louis Lazaris</span>
</ul>
<h2 id="cool_ideas_to_explore_more" class="subhed">发掘更多的好特性(并写下来分享之)</h2>
<p>浏览器总是在不断发布新的CSS特性。我们总是厌恶的浏览器的这些私有属性，但是这些私有属性已经存在，我们这些开发者能做的，是反馈给浏览器厂商，这些私有属性是否能满足我们的需求。如果这个属性是你需要的，主动去研究、应用！ 这个 <a href="http://peter.sh/experiments/vendor-prefixed-css-property-overview/">浏览器私有CSS属性纵览</a>，是Peter Beverloo整理的，有许多实验性的东西；许多还没有被完全理解。可以写一写文中提到的属性还有下面这些：
<ul>
<li><a href="https://developer.mozilla.org/En/CSS/%3Achecked">:checked 伪类选择器</a> / <a href="http://dev.w3.org/csswg/css3-images/#object-fit">object-fit</a> / <a href="https://developer.mozilla.org/en/CSS/background-clip">background-clip</a> / <a href="https://dvcs.w3.org/hg/FXTF/raw-file/tip/filters/index.html">fx blur css filter</a> / <a href="http://dropshado.ws/post/1015351370/webkit-line-clamp">-webkit-line-clamp</a> / <a href="https://developer.mozilla.org/en/CSS/text-overflow">text-overflow</a> / <a href="https://developer.mozilla.org/En/CSS/Box-sizing">box-sizing</a> / <a href="https://developer.mozilla.org/en/CSS3_Columns">CSS columns</a></li>
<li><code>history.pushState()</code>, HTML5 input <code>checkValidity()</code>, <code>getClientRects</code> / <code>getBoundingClientRect</code>, WebKit's <a href="http://developer.apple.com/library/safari/#documentation/DataManagement/Reference/DOMWindowAdditionsReference/DOMWindowAdditions/DOMWindowAdditions.html">ConvertPointFromPageToNode</a>
<li><a href="http://www.w3.org/TR/css3-gcpm/">CSS Generated Content for Paged Media Module (GCPM) 印刷出版物相关</a>
<li><code>word-wrap</code>、<code>word-break</code>和<code>white-space</code>之间的差异
<li>Harmony 的一些特性，比如 <a href="http://wiki.ecmascript.org/doku.php?id=harmony:let">let</a> / <a href="http://wiki.ecmascript.org/doku.php?id=harmony:block_scoped_bindings">block-scoped bindings</a> / block functions / <a href="http://wiki.ecmascript.org/doku.php?id=harmony:destructuring">destructuring</a> / <a href="http://wiki.ecmascript.org/doku.php?id=harmony:rest_parameters">rest parameters</a> / <a href="http://wiki.ecmascript.org/doku.php?id=harmony:parameter_default_values">default param values</a>.
<li><a href="http://dvcs.w3.org/hg/webcomponents/raw-file/tip/explainer/index.html">Web Components 释义</a>
<li><strong>以下这些分享中的任何特性：</strong>
<ul>
<li><a href="http://vimeo.com/32135328">CSS的未来</a> <span>- 未来的CSS值得期待的东西 - Tab Atkins</span>
<li><a href="http://infrequently.org/11/fronteers/fronteers.html">数据、语义、进化过程 </a> <span>- 浏览器进化，Component模型，MDV(Model-Driven View)</span>
<li><a href="http://infrequently.org/11/ldnjs/ldnjs.html">[JS|DOM].next()</a> <span>- 下一代的ECMAScript - Alex Russell</span>
<li><a href="http://lea.verou.me/css3-secrets/">CSS3的10个秘密</a> <span>- 一个关于高级CSS3功能的互动展示</span>
<li><a href="http://nimbu.in/w3conf/">CSS布局的未来</a> <span>- and how emerging specs will add 合适的布局控制</span>
<li><a href="http://mezzoblue.com/presentations/2011/fowd/FOWD.pdf">CSS的未来</a> <span>- 一系列CSS新特性概览</span>
</ul>
</ul>
</div>
<div class="col-b">
<section class="getinvolved">
<h2 class="subhed">探索未知的！</h2>
<div class="task" data-hashtag="#explore">
<p>行动起来！推动web前行的唯一途径是发掘和使用各种高级特性和API。</p>
<a href="#" class="pledge">我要参与！</a>
<div class="pledges"><p>下面是一些和你志同道合的开发者:</p></div>
</div>
</section>
</div>
</section>
<section id="write" class="col-ab">
<div class="col-a">
<h1 class="hed">写文章</h1>
<p>把你学到的东西写出来并发布在网上，不要害怕犯错。做一个你自己的博客，把你写的东西放上去，持续更新其内容。说出你自己的真实想法，不要人云亦云，这一点很重要。你的文章内容是不是绝对的正确、权威并不重要。保持提问、及时对话，世上没有错误的问题或者错误的答案。</p>
<p>教学相长，教是更有效的学习方法。即使只是初涉某个领域，写一些相关的文字也会对你自己有帮助。你可以请这方面的牛人或者朋友进行相关的技术评审。</p>
<h2 id="what_should_you_start_to_learn_about" class="subhed">你想写哪些方面的东西？</h2>
<p>你可以分享一些东西给他人！下面是一些不错的主意：</p>
<ul>
<li><code><br></code> 和 <code><hr></code> （或其他任何元素）存在的原因？</li>
<li>如何用最少的代码实现一个轮播？</li>
<li>DOM是什么？她为什么会存在？</li>
<li>看看浏览器是是如何实现规范中的某个条款的，并与规范进行比较。</li>
<li>分析某个流行的网站的首页（附上改进的建议）。</li>
<li>你会如何去弥补某个流行网站的短板（加载时间过长、无效的js脚本等）</li>
<li>分析一个流行的demo，用她做出另外的不一样的东西（或者在实际工作中应用她）。</li>
<li>总结最近流行某个概念或理念。</li>
<li>把你的经验贡献给某个开源项目。</li>
<li>CSS预处理（less、sass等）在管理不当的情况下是怎么造成不良后果的。</li>
<li>如果英语不是你的母语：
<ul class="resources">
<li>翻译时下流行的一些web开发相关的文章。</li>
<li>详细说明规范中的某些特性。</li>
</ul>
</li>
</ul>
</div>
<div class="col-b">
<section class="getinvolved">
<h2 class="subhed">写出来</h2>
<div class="task" data-hashtag="#write">
<p>不管你在twitter或者github有多少粉丝，把你学到的东西写出来！</p>
<a href="#" class="pledge">我要参与！</a>
<div class="pledges"><p>下面是一些和你志同道合的开发者:</p></div>
</div>
</section>
</div>
</section>
<section id="filebugs" class="col-ab">
<div class="col-a">
<h1 class="hed">bugs归档</h1>
<p>其实，所有的浏览器厂商都希望你帮她们做好bugs归档，而不是在twitter上报告bug，<a href="http://msdn.microsoft.com/library/hh673549.aspx">IE10的开发者指南</a> 提供了一个很好的提交bug的机制，所以这些bug在发布之前都被解决了。</p>
<ul>
<li><a href="http://coding.smashingmagazine.com/2011/09/07/help-the-community-report-browser-bugs/">帮助社区：提交浏览器Bugs</a> - Lea Verou</li>
<li><a href="http://ejohn.org/blog/a-web-developers-responsibility/">一个web开发者的义务</a> - John Resig</li>
<li><a href="http://a11ybugs.org/">处理浏览器无障碍相关的bugs</a> - Vlad Alexander</li>
<li>
<p>浏览器问题追踪 - 查找已经提交的bug或者提交新的bug：</p>
<ul class="resources">
<li><a href="https://bugzilla.mozilla.org/">Mozilla's bugzilla</a></li>
<li><a href="https://bugs.webkit.org/">WebKit bugs</a></li>
<li><a href="http://crbug.com/">Chrome bugs</a></li>
<li><a href="http://www.opera.com/support/bugs/">Opera bugs</a></li>
<li><a href="https://connect.microsoft.com/site/sitehome.aspx?SiteID=136">Help IE</a></li>
</ul>
</li>
</ul>
</div>
<div class="col-b">
<section class="getinvolved">
<h2 class="subhed">杜绝bug</h2>
<div class="task" data-hashtag="#filebugs">
<p>让浏览器变得更好的最快的方法，是给bug归档并解决这些bug。这只需要很少的时间，而且任何人都可以做。</p>
<a href="#" class="pledge">我要参与！</a>
<div class="pledges"><p>下面是一些和你志同道合的开发者:</p></div>
</div>
</section>
</div>
</section>
</article>
<article class="section">
<div class="standout" id=virtuoso>
<h1 class="hed">大家</h1>
<h2 class="subhed">你已经身经百战、经验丰富！我们能再给你一些建议吗？</h2>
</div>
<section id="hack" class="col-ab">
<div class="col-a">
<h1 class="hed">Hack！</h1>
<p>把web的潜能发挥到极限！研究CSS、高级HTML、JavaScript。研究浏览器渲染引擎。在github上fork项目、研究其源码、不断学习。让我们把web变得更帅，通过各种各样的途径：</p>
<h2 id="contribute_to_browsers" class="subhed">为浏览器的发展贡献一己之力</h2>
<ul>
<li>帮助打造像<a href="http://trac.webkit.org/wiki/WebInspector">WebKit Inspector</a>和<a href="https://bitbucket.org/scope/dragonfly-stp-1/">Dragonfly</a>一样的开发工具。
他们是用HTML、CSS、和JS写的，所以你不需要懂C++也一样可以贡献自己的力量。开始动手吧！</li>
<li><a href="https://developer.mozilla.org/en/Gecko_BugAThon">为Mozilla提供精简的测试用例</a></li>
<li>研究Gecko
<ul>
<li>阅读开发者指引：<a href="https://developer.mozilla.org/En/Developer_Guide">Gecko开发入门</a>.
<li><a href="https://bugzilla.mozilla.org/buglist.cgi?quicksearch=%22[mentor%3D%22&list_id=1800469">Firefox/Gecko的“good first bugs”列表</a>
<li>在<a href="#mozilla_irc">Mozilla's IRC的服务器上</a>加入 #introduction 和 #developers。
</ul>
<li>研究Webkit
<ul>
<li><a href="http://dev.chromium.org/developers/contributing-to-webkit">Google的怎么为WebKit添砖加瓦指引</a>
</ul>
</ul>
<h2 id="contribute_to_testsuites" class="subhed">贡献测试套件</h2>
<p>测试用例是标准和浏览器的基础，他们确保各种特性在所有浏览器中表现一致。然而，W3C现在的测试套件还没有达到他们需要的量。这些测试用web开发者所属性的语言写的：HTML、CSS、JavaScript。 </p>
<ul>
<li>去了解一下
<a href="http://www.w3.org/2008/webapps/wiki/Testing">w3c webapps 测试套件</a>、
<a href="http://www.w3.org/html/wg/wiki/Testing">w3c HTML5 测试套件</a>、
和 <a href="http://wiki.csswg.org/test">CSSWG 测试套件</a>。
</li>
<li>到W3C测试套件中去研究一下<a href="http://www.w3.org/html/wg/wiki/Testing#New_tests">最新的和已经有的测试</a>。</li>
<li>最新的<a href="http://trac.webkit.org/browser/trunk/LayoutTests">WebKit’s LayoutTests</a>. <span>同时了解一下LayoutTests的<a href="http://www.webkit.org/blog/1452/layout-tests-theory/">原理</a>和<a href="http://www.webkit.org/blog/1456/layout-tests-practice/">实践</a>。</span></li>
<li>最新的<a href="https://developer.mozilla.org/en/Mochitest">Mozilla’s Mochitests</a>。</li>
<li>加入讨论<a href="http://lists.w3.org/Archives/Public/public-webapps-testsuite/">public-webapps-testsuite</a>、<a href="http://lists.w3.org/Archives/Public/public-html-testsuite/">public-html-testsuite</a>、和<a href="http://lists.w3.org/Archives/Public/public-css-testsuite/">public-css-testsuite</a>的邮件列表。</li>
<li>参与HTML5 Audio相关的<a href="http://areweplayingyet.org">AreWePlayingYet?测试套件</a>。</li>
</ul>
<h2 id="contribute_to_specs" class="subhed">帮助完善规范</h2>
<ul>
<li>评审<a href="http://www.w3.org/Bugs/Public/">W3C bugzilla</a>上已经存在的bugs <span>- 并学习 <a href="http://wiki.whatwg.org/wiki/Bugzilla_conventions">Bugzilla公约</a>。</span>
<li>参与<a href="http://www.whatwg.org/mailing-list">WHATWG</a> / <a href="http://lists.w3.org/Archives/Public/public-webapps/">public-webapps</a> / <a href="http://lists.w3.org/Archives/Public/www-style/">www-style</a> / <a href="http://lists.w3.org/Archives/Public/public-fx/">public-fx</a> 的讨论。</li>
<li><a href="http://dev.chromium.org/developers/how-tos/make-a-web-standards-proposal">做一份web标准提案</a>。 <span>（这份指引告诉你怎么去做）</span>
<li><a href="http://wiki.whatwg.org/wiki/How_to_write_a_spec">编写规范！</a> <span>我们需要更多的规范编写者。</span></li>
</ul>
<h2 id="contribute_to_validators" class="subhed">为验证做贡献</h2>
<ul>
<li>
<a href="http://validator.nu/">HTML验证</a> <span>需要Java开发人员，详情请看<a href="https://github.com/h5bp/lazyweb-requests/issues/18">lazyweb-reqs/18</a></span>
<li>
<a href="http://lists.w3.org/Archives/Public/www-validator-css/">CSS验证</a> <span>订阅这个邮件列表，里面总是需要各种帮助。</span>
<li>
<a href="https://bitbucket.org/annevk/webvtt">WebVTT</a> <span>一种视频字幕格式。</span>
</ul>
</div>
<div class="col-b">
<section class="getinvolved">
<h2 class="subhed">置身代码</h2>
<div class="task" data-hashtag="#hack">
<p>书写你的代码。不断试验、在github上fork项目、深入源码。为浏览器、规范、验证或一些不错的<a href="#open_source_projects_worth_your_time">开源项目</a>提供帮助！</p>
<a href="#" class="pledge">我要参与！</a>
<div class="pledges"><p>下面是一些和你志同道合的开发者:</p></div>
</div>
</section>
</div>
</section>
</article>
<footer class="doc">
<p class="subhed summary">
你可以让web变成你期望的那样。浏览器厂商、标准编撰者、框架/类库的作者在等待你的反馈和参与。<br>我们共同努力就可以推动web不断地向前发展。
</p>
<img src="../img/pugerton.png" alt="Pugerton">
<p class="subhed">这是以下诸位爱与泪的结晶</p>
<ul class="builders">
<li><a href=http://twitter.com/wilto><img src="http://api.twitter.com/1/users/profile_image/wilto?size=normal"> <b>Mat</b> Marquis</a>
<li><a href=http://twitter.com/aaronforsander><img src="http://api.twitter.com/1/users/profile_image/aaronforsander?size=normal"> <b>Aaron</b> Forsander</a>
<li><a href=http://twitter.com/connor><img src="http://api.twitter.com/1/users/profile_image/connor?size=normal"> <b>Connor Montgomery</b></a>
<li><a href=http://twitter.com/paul_irish><img src="http://api.twitter.com/1/users/profile_image/paul_irish?size=normal"> <b>Paul</b> Irish</a>
<li><a href=http://twitter.com/divya><img src="http://api.twitter.com/1/users/profile_image/divya?size=normal"> <b>Divya</b> Manian</a>
<li><a href=http://twitter.com/necolas><img src="http://api.twitter.com/1/users/profile_image/necolas?size=normal"> <b>Nicolas</b> Gallagher</a>
<li><a href=http://twitter.com/addyosmani><img src="http://api.twitter.com/1/users/profile_image/addyosmani?size=normal"> <b>Addy</b> Osmani</a>
</ul>
<p class="others">还有<a href=https://github.com/h5bp/movethewebforward/contributors><span>所有这些可敬的人儿</span>。</a></p>
<p>恐龙插画由<a href="http://dribbble.com/deathbearbrown">Sue Lockwood</a>提供 • <a href=https://github.com/h5bp/movethewebforward>Contribute to this project!</a></p>
</footer>
<!-- script>
window._gaq=[['_setAccount','UA-17904194-2'],['_trackPageview']];
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
s.parentNode.insertBefore(g,s)}(document,'script'));
</script -->
</body>
</html>