Browse files

Merge pull request #70 from seektan/master

chinese version
  • Loading branch information...
2 parents e9d1359 + e08aebf commit 95b213763afbb563fcb31643541e26b8ec1d0041 @paulirish paulirish committed May 11, 2012
Showing with 470 additions and 0 deletions.
  1. +470 −0 cn/index.html
View
470 cn/index.html
@@ -0,0 +1,470 @@
+<!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>
+ </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&#8217;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&#8217;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 &lt;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&#8217;s blog</a> - jQuery、JavaScript、HTML5、CSS3相关的大量干货,作者已被google Chrome team 收编。</li>
+ <li><a href="http://paulirish.com">Paul Irish&#8217;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&#8217;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 / <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&#8217;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">&#8216;如何寻求帮助&#8217;</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前行的唯一途径是发掘和使用各种高级特性和AP。</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>&lt;br&gt;</code> 和 <code>&lt;hr&gt;</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的&#8220;good first bugs&#8221;列表</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&#8217;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&#8217;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>

0 comments on commit 95b2137

Please sign in to comment.