Complete the optimization for introduction documentation

zxsrendong · Oct 11, 2012 · cfe144a · cfe144a
1 parent 6c8cd22
commit cfe144a
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 93 deletions.
diff --git a/docs/assets/companies/more.png b/docs/assets/companies/more.png
diff --git a/docs/assets/home.css b/docs/assets/home.css
@@ -29,7 +29,7 @@ h2 {
 
 h3 {
   margin: 1.2em 0 .6em 0;
-  font-size: 22px;
+  font-size: 28px;
   font-weight: normal;
 }
 
@@ -186,69 +186,48 @@ a:hover { text-decoration: underline; }
 
 .button {
   border: 1px solid #e9e9e9;
+  *border-color: #dadada;
   border-radius: 3px;
   -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
   -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
-  display: inline-block;
   font-weight: bold;
-  padding: 4px 13px 3px;
   text-align: center;
   -moz-text-shadow: 1px 1px 0 #fff;
   -webkit-text-shadow: 1px 1px 0 #fff;
   text-shadow: 1px 1px 0 #fff;
   white-space: nowrap;
-  background: #EFEFEF; /* old browsers */
-  background: -moz-linear-gradient(top, #f5f5f5 0%, #efefef 50%, #e5e5e5 51%, #dfdfdf 100%); /* firefox */
-  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f5f5f5), color-stop(50%,#efefef), color-stop(51%,#e5e5e5), color-stop(100%,#dfdfdf)); /* webkit */
-  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f5f5', endColorstr='#dfdfdf',GradientType=0 ); /* ie */
-  *border-color: #dadada;
-  *padding-bottom: 5px;
-}
-
-.button:hover {
-  border-color: #466899;
-  -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
-  -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
-  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
-  color: #fff;
-  text-decoration: none;
-  -moz-text-shadow: 1px 1px 0 #222;
-  -webkit-text-shadow: 1px 1px 0 #222;
-  text-shadow: 1px 1px 0 #222;
-  background: #6396D8; /* old browsers */
-  background: -moz-linear-gradient(top, #6396D8 0%, #5A83BC 50%, #547AB7 51%, #466899 100%); /* firefox */
-  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6396D8), color-stop(50%,#5A83BC), color-stop(51%,#547AB7), color-stop(100%,#466899)); /* webkit */
-  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6396D8', endColorstr='#466899',GradientType=0 ); /* ie */
-}
-
-.quick-start .button {
   display: block;
   font-size: 22px;
   margin: 2em auto;
   padding: 9px 0 10px;
+  *padding-bottom: 5px;
   width: 340px;
+  background: #EFEFEF; /* old browsers */
   background: -moz-linear-gradient(top,#F7F7F7 0,#DFDFDF 100%);
   background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#F7F7F7),color-stop(100%,#DFDFDF));
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f7f7f7',endColorstr='#dfdfdf',GradientType=0);
+  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f5f5', endColorstr='#dfdfdf',GradientType=0 ); /* ie */
 }
 
-.quick-start .button:hover {
-  background: -moz-linear-gradient(top,#6396D8 0,#466899 100%);
-  background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#6396D8),color-stop(100%,#466899));
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6396D8',endColorstr='#466899',GradientType=0);
+.button:hover {
+  border-color: #63BDA8;
+  color: #fff;
+  font-weight: normal;
+  text-decoration: none;
+  -moz-text-shadow: none;
+  -webkit-text-shadow: none;
+  text-shadow: none;
+  background: #95D9C8;
+  background: -moz-linear-gradient(top,#95D9C8 0,#63C8B8 100%);
+  background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#95D9C8),color-stop(100%,#63C8B8));
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#95D9C8',endColorstr='#63C8B8',GradientType=0);
 }
 
 .quick-start .extra {
   display: block;
   font-size: 14px;
 }
 
-#page-intro .sea-pic {
-  float: right;
-  margin-left: 10px;
-}
-
 #company-logos {
   list-style: none;
 }

diff --git a/docs/assets/home.js b/docs/assets/home.js
@@ -84,13 +84,7 @@ define('home', [], function(require) {
       highlight.init()
     })
 
-    require.async('github', function(github) {
-      document.getElementById('github').style.display = 'block'
-      github('seajs/seajs').issues()//.commits()
-    })
-
-    require.async(['jquery', 'hello'], function($, hello) {
-      $('#beautiful-sea').click(hello.sayHello)
+    require.async(['jquery'], function($) {
       initLazySrc($)
     })
 

diff --git a/docs/index.html b/docs/index.html
@@ -35,8 +35,7 @@ <h2>Loading ...</h2>
   <div class="page" id="page-intro">
 
     <div class="headline">
-      <h2>SeaJS 是一个适用于 Web 端的模块加载器。</h2>
-      <p>使用 SeaJS，可以更好地组织 JavaScript 代码。</p>
+      <h2>SeaJS 是一个适用于 Web 端的模块加载器</h2>
       <p>A Module Loader for the Web</p>
     </div>
 
@@ -48,93 +47,76 @@ <h2>SeaJS 是一个适用于 Web 端的模块加载器。</h2>
 
     <div class="words">
 
-      <h3 id="why">为什么要用 SeaJS ？</h3>
+      <h3 id="why">为什么使用 SeaJS ？</h3>
 
       <p>
-        <img class="sea-pic" src="assets/images/sea.jpg" width="300" height="300">
-        Web 前端开发日趋复杂，当 JavaScript 代码达到几千行、文件超过十几个时，
-
-        无论是中小型站点，还是大型复杂应用，使用 SeaJS，都可以让我们的工作变得更轻松愉悦。SeaJS 具有以下核心特性：
+        SeaJS 追求简单、自然的代码书写和组织方式。使用 SeaJS，可以让我们的工作更轻松愉快：
       </p>
 
       <ul>
-        <li>简单一致的模块格式</li>
-        <li>依赖的自动管理</li>
-        <li>脚本的异步并行加载</li>
-        <li>丰富的插件</li>
-        <li>友好的调试</li>
+        <li><strong>简单易用</strong>：提供与 <a href="http://nodejs.org/">NodeJS</a> 一般的模块化开发体验。</li>
+        <li><strong>体系化</strong>：通过包管理工具 <a href="https://github.com/seajs/spm/wiki">SPM</a> 提供预编译、打包部署等功能。</li>
       </ul>
 
       <p>
-        SeaJS 带来的最大好处是：提升代码的可维护性。上面的每一项特性，在使用文档中都会有详细阐述。如果一个网站的 JS
-        文件超过 3 个，就适合用 SeaJS 来组织和维护代码。涉及的 JS 文件越多，SeaJS 就越适合。
-      </p>
-
-      <p>
-        SeaJS 追求的是更简单、自然的代码书写和组织方式。
-      </p>
-
-
-      <h3 id="compatible">兼容性</h3>
-
-      <p>
-        SeaJS 兼容所有 PC 和 Mobile 端的主流浏览器：
+        SeaJS 的最大好处是：<strong>提升代码的可维护性</strong>。如果一个网站的 JS 文件超过 3 个，就适合用
+        SeaJS 来组织和维护代码。涉及的 JS 代码越多，SeaJS 就越适合。SeaJS
+        还提供常用插件，对开发和调试友好，并具有丰富的可扩展接口。
       </p>
 
-<pre class="text">
-IE 5.5+           ✔
-Chrome 3+         ✔
-Firefox 2+        ✔
-Safari 3.2+       ✔
-Opera 10+         ✔
-</pre>
-
       <p>
-        下面是 SeaJS 的 Test Suite：
-        <br>
-        <br>
-        <a href="http://seajs.org/test/runner.html" target="_blank">http://seajs.org/test/runner.html</a>
-        <br>
-        <br>
-        欢迎各位朋友继续帮忙测试，用例比较多，需耐心等待 2 - 30 分钟。若测试未通过，请将测试结果和浏览器 UA 信息通过 <a href="mailto:[email protected]">邮件</a> 或 <a href="http://weibo.com/lifesinger" target="_blank">微博</a> 反馈给我们。
+        SeaJS 期望让程序员享受编码的乐趣，让你的生活更美好。
       </p>
 
 
-      <h3 id="companies">哪些公司在用</h3>
+      <h3 id="companies">使用 SeaJS 的产品</h3>
 
       <p>
-        感谢以下公司、产品对 SeaJS 的信任：
+        感谢以下公司、产品对 SeaJS 的信赖与支持：
       </p>
 
       <ol id="company-logos">
         <li><a href="https://www.alipay.com/" target="_blank"><img alt="支付宝" data-src="assets/companies/alipay.png" width="103" height="44"></a></li>
         <li><a href="http://taobao.com/" target="_blank"><img alt="淘宝网" data-src="assets/companies/taobao.png" width="164" height="44"></a></li>
         <li><a href="http://etao.com/" target="_blank"><img alt="一淘" data-src="assets/companies/etao.png" width="64" height="44"></a></li>
-        <li><a href="http://laiwang.com/" target="_blank"><img alt="来往" data-src="assets/companies/laiwang.png" width="46" height="44"></a></li>
-        <li class="clear"></li>
         <li><a href="http://pengyou.com/" target="_blank"><img alt="朋友" data-src="assets/companies/pengyou.png" width="126" height="44"></a></li>
         <li><a href="http://baixing.com/" target="_blank"><img alt="百姓网" data-src="assets/companies/baixing.png" width="104" height="44"></a></li>
         <li><a href="http://faxianla.com/" target="_blank"><img alt="发现啦" data-src="assets/companies/faxianla.png?v2" width="133" height="44"></a></li>
         <li><a href="http://howzhi.com/" target="_blank"><img alt="好知" data-src="assets/companies/howzhi.png" width="84" height="44"></a></li>
-        <li class="clear"></li>
         <li><a href="http://t.163.com/" target="_blank"><img alt="网易微博" data-src="assets/companies/t163.png" width="122" height="44"></a></li>
         <li><a href="http://clicki.cn/" target="_blank"><img alt="Clicki" data-src="assets/companies/clicki.png" width="106" height="44"></a></li>
         <li><a href="http://xueqiu.com/" target="_blank"><img alt="雪球" data-src="assets/companies/xueqiu.png" width="88" height="44"></a></li>
         <li><a href="http://edoctor.cn/" target="_blank"><img alt="医道网" data-src="assets/companies/edoctor.png" width="131" height="44"></a></li>
-        <li class="clear"></li>
         <li><a href="http://mbaobao.com/" target="_blank"><img alt="麦包包" data-src="assets/companies/mbaobao.png" width="103" height="44"></a></li>
+        <li><a href="http://laiwang.com/" target="_blank"><img alt="来往" data-src="assets/companies/laiwang.png" width="46" height="44"></a></li>
         <li><a href="http://sodao.com/" target="_blank"><img alt="搜道网" data-src="assets/companies/sodao.png" width="171" height="44"></a></li>
         <li><a href="http://dnspod.cn/" target="_blank"><img alt="DNSPOD" data-src="assets/companies/dnspod.png" width="138" height="44"></a></li>
+        <li><a href="https://github.com/seajs/seajs/issues/272" target="_blank"><img alt="更多使用者" data-src="assets/companies/more.png" width="146" height="44"></a></li>
       </ol>
 
       <div class="clear"></div>
 
       <p>
-        期待出现与你相关的名字，更多使用者请参见：<a href="https://github.com/seajs/seajs/issues/272" target="_blank">SeaJS Users</a>
+        SeaJS 遵循 <a href="../LICENSE.md">MIT 协议</a>，无论个人还是公司，都可以免费自由使用。
       </p>
 
+
+      <h3 id="compatible">兼容性</h3>
+
       <p>
-        SeaJS 遵循 <a href="../LICENSE.md">MIT 协议</a>，无论个人还是公司，都可以免费自由使用。
+        SeaJS 具备完善的<a href="../test/runner.html">测试用例</a>，兼容所有主流浏览器：
+      </p>
+
+<pre class="text">
+IE 5.5+           ✔
+Chrome 3+         ✔
+Firefox 2+        ✔
+Safari 3.2+       ✔
+Opera 10+         ✔
+</pre>
+
+      <p>
+        SeaJS 还可运行在 Mobile 端，包括 Hybrid 模式的 App 上。理论上，是个浏览器引擎，SeaJS 就可以跑。
       </p>
 
     </div>