Update README.md

josephj · Jul 5, 2012 · 42eb7a3 · 42eb7a3
1 parent fee35a2
commit 42eb7a3
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 11 deletions.
diff --git a/README.md b/README.md
@@ -6,6 +6,32 @@
 * 目標：對於 HTML 有正確的觀念
 * 投影片：[語意與HTML](https://speakerdeck.com/u/josephj/p/html)
 * 推薦參考資料：[The Elements of Meaningful XHTML](http://tantek.com/presentations/2005/09/elements-of-xhtml)
+* 常用到的 HTML 樣板：
+
+    <!DOCTYPE html>
+    <html>
+    <head>
+    <meta charset="utf-8">
+    <title>Prototype</title>
+    <link rel="stylesheet" href="http://yui.yahooapis.com/3.5.1/build/cssreset/reset-min.css">
+    <link rel="stylesheet" href="http://yui.yahooapis.com/3.5.1/build/cssfonts/fonts-min.css">
+    <script type="text/javascript" src="http://yui.yahooapis.com/3.5.1/build/yui/yui-min.js"></script>
+    <style type="text/css">
+
+    </style>
+    </head>
+    <body class="yui-skin-sam">
+
+        <div id="foo">
+        </div>
+
+        <script>
+        YUI().use("node", function (Y) {
+
+        });
+        </script>
+    </body>
+    </html>
 
 ## Lesson 2 - 樣式之美 (CSS)
 * 目標：使用 CSS
@@ -76,7 +102,8 @@
   * [以 Y.YQL 取得 Flickr 的資料](http://josephj.com/training/f2e-training/sample/yui-yql.html)
     * [Flickr API Key 申請頁面](http://www.flickr.com/services/apps/create/)
   * [以 Y.jsonp 取得 Yahoo! Pipes 所組合出來的 Flickr 資料](http://josephj.com/training/f2e-training/sample/yui-pipes.html)
-    * [帥哥與正妹的 Y! Pipes](http://pipes.yahoo.com/pipes/pipe.info?_id=7d48dfb65ddd5ee643dce51df2326a33) - JSON Feed 可以多加一個 _callback 的 GET 參數
+    * [帥哥與正妹的 Y! Pipes](http://pipes.yahoo.com/pipes/pipe.info?_id=7d48dfb65ddd5ee643dce51df2326a33)
+      * JSON Feed 可以多加一個 "_callback" 的 GET 參數
     * [帥哥 Feed](http://api.flickr.com/services/feeds/photos_public.gne?id=10912301@N06&tags=%E7%BE%8E%E5%A5%B3&lang=en-us&format=rss_200)
     * [正妹 Feed](http://api.flickr.com/services/feeds/photos_public.gne?id=33784581@N07&tags=%E5%B8%A5%E5%93%A5&lang=en-us&format=rss_200)
 
@@ -86,9 +113,12 @@
     * [Fiddler 下載點](http://www.fiddler2.com/fiddler2/version.asp)
 * &lt;script/&gt; 的擺放位置
   * 在 &lt;/head&gt; 前
-  * 在 &lt;/body&gt; 後
-  * 在 body 中
-* 為什麼一般廣告討人厭？
+    * 所有 DOM 物件皆未產生，需要配合 load 或 domready 事件（或其他偵測的方式）。
+    * 因 JavaScript 有 Blocking 的行為，使用者得等到 JavaScript 下載完畢才能看到網頁內容。
+  * 在 &lt;/body&gt; 前
+    * 所有 DOM 物件皆已經產生，不需要特別的處理即可存取。
+    * 所有的內容皆會在第一時間被看到。
+* 在 &lt;/body&gt; 到處都有的廣告 &lt;script/&gt; 為何討人厭？
   * [大圖不會 Block 頁面讀取](http://josephj.com/training/f2e-training/sample/blocking-image.html) - 我錯了 :p
   * [會在 Server 等 10 秒才結束的 JavaScript](http://josephj.com/training/f2e-training/sample/sleep-10.php)
   * [Blocking JavaScript](http://josephj.com/training/f2e-training/sample/blocking-javacript.html)
@@ -99,6 +129,9 @@
  * [Non-blocking 載入 JavaScript](josephj.com/entry.php?id=349)
  * [Non-blocking JavaScript Downloads](http://www.yuiblog.com/blog/2008/07/22/non-blocking-scripts/)
  * [Put Scripts at the bottom](http://developer.yahoo.com/performance/rules.html#js_bottom)
+ * [Bye Bye Embed - A List Apart](http://www.alistapart.com/articles/byebyeembed/)
+ * [Cross Frame: 與不同網域的 Frame 做互動 - josephj.com](http://josephj.com/entry.php?id=338)
+ * [Fiddler Extensions](http://www.fiddler2.com/Fiddler2/extensions.asp)
 
 ## Lesson 8 - Performance
 * [Performance Rules](http://developer.yahoo.com/performance/rules.html)

diff --git a/sample/non-blocking-javacript.html b/sample/non-blocking-javacript.html
@@ -8,11 +8,13 @@
     <div>
         <h1>容實高大小時為標關者</h1>
         <h2>展現首人前一！</h2>
+
         <script>
         var scriptEl = document.createElement("script");
         scriptEl.src = "http://josephj.com/training/f2e-training/sample/sleep-10.php";
         document.head.appendChild(scriptEl);
         </script>
+
         <p>息也成無究成留下政，比教接時我花了應中自們……先過真。解該給報亞？直一那器業會們起可常建交，童牛是我經見車良？的首辦他子助山為性化歌，計票的開有資生人香地，建對見野、面方自變青是境邊月，的設直心話民東它性多友大社個天；因遊失散可參社，直統那世少門前的海叫照破導車量落利美腳心有身一，題上名會我來員、我說造們接的水電近樂之夫怎最另見一流了那害意手天般的房乎。</p>
         <p>天基人空：有國國家！</p>
         <p>非起留先。</p>

diff --git a/sample/template.html b/sample/template.html
@@ -2,15 +2,30 @@
 <html>
 <head>
 <meta charset="utf-8">
-<title>Template</title>
-<script>
-window.onload = function () {
-    alert(document.getElementById("foo"));
-}
-</script>
+<title>YUI YQL Sample</title>
+<link rel="stylesheet" href="http://yui.yahooapis.com/3.5.0/build/cssreset/reset-min.css">
+<link rel="stylesheet" href="http://yui.yahooapis.com/3.5.0/build/cssfonts/fonts-min.css">
+<style type="text/css">
+
+</style>
 </head>
 <body>
     <div id="foo"></div>
-    <script>alert(document.getElementById("foo"));</script>
+    <script>
+    YUI().use('node', 'jsonp', function (Y) {
+        var url = "http://pipes.yahoo.com/pipes/pipe.run?_id=7d48dfb65ddd5ee643dce51df2326a33&_render=json&_callback={callback}"
+        Y.jsonp(url, function (data) {
+            var items = data.value.items,
+                html = [];
+            html.push("<ul>");
+            Y.each(items, function (item) {
+                html.push("<li>" + item.description + "</li>");
+            });
+            html.push("</ul>");
+            Y.one("#foo").setContent(html.join(""));
+        });
+    });
+    </script>
+    <script type="text/javascript" src="http://yui.yahooapis.com/3.5.0/build/yui/yui-min.js"></script>
 </body>
 </html>