Professional Web Development

ProfessionalFront-end Engineering

2008.11.17Yahoo! Course @ 中央大學（第九週）

http://tw.developer.yahoo.com/course/

講者：josephj

•YDN 改版

•YAP 上線

•ITHome 專訪跑步環島

•SA@Taipei 分享 Open 與 YUI 3.0

•Yahoo! Live 與野草莓學運

就是愛分享

Links• http://developer.yahoo.com/r3/

• http://devzone.zend.com/article/2585-Using-YAML-With-PHP-and-PECL

• http://farm4.static.flickr.com/3251/3017901989_17f1bc4a5e_b.jpg

• http://www.sun-line.idv.tw/blog/index.php?load=read&id=521

• http://profiles.yahoo.com/josephj6802

• http://apps.yahoo.com/-MMT5Q550/YahooFullView/index.php

• http://www.slideshare.net/josephj/slideshows

今日上課大綱

•YUI Grids 功課檢討

•用 Yahoo! Pipes 整理資料

•前端工程半日班

YUI Grids 功課檢討認識 Box Model：盒模型

用 Pipes 整理資料不用寫程式，來整理網路上的資料來源

每個 Web 2.0 的服務都提供了各式各樣的輸出 Format

http://www.flickr.com/photos/tags/twopenhack08

http://api.flickr.com/services/feeds/photos_public.gne?tags=twopenhack08&lang=en-us&format=atom

http://api.flickr.com/services/feeds/photos_public.gne?tags=twopenhack08&lang=en-us&format=php

http://api.flickr.com/services/feeds/photos_public.gne?tags=twopenhack08&format=json&jsoncallback=getFlickrData

<script src=””></script>

http://api.flickr.com/services/feeds/photos_public.gne?tags=twopenhack08&format=lol

每當碰到要結合多個 API 的 Feed，格式、Schema 都不一樣！ 頭大！

從不同 Service 取得資料...

JavaScript 組合成 HTML ...

抓取資料、處理 Schema 得寫超多的程式有可能不寫 Code 就做到嗎？

是的！用 Pipes 來 Remix Feed

拖拉、填寫、完成

前端工程半日班Yahoo!奇摩 F2E 的新人訓練精華版

1. HTML 模組在 Yahoo! 每一頁都是由許多的模組所構成

<div id=”nav”> <div class=”hd”> <h2>標題</h2> </div> <div class=”bd”> <p>內文</p> </div> <div class=”ft”> <a href=”...”>更多... </a> </div></div>

<div id=”nav”> <div class=”hd”> <h2>標題</h2> </div> <div class=”bd”> <p>內文</p> </div> <div class=”ft”> <a href=”...”>更多... </a> </div></div>

模組的結構

一個 ID 代表一個模組不能重複

.hd, .bd, .ft 分別代表模組的header、body、footer

＃yhtw_masthead

＃ykpmt

＃ykpsb

＃ykpimt

＃ykpimqa ＃ykpimr

＃ykpadv

＃ykpug

＃ykpiht＃ykpiht

＃ykpsb

•ykp 為知識+ 的 prefix

•sb 為 search box 的縮寫

•檔案：inc/search_box.php

<div id=”ykpsb”> <div class=”bd clearfix”> <form ...> ... </form> <div class=”extra”> ... </div> </div></div>

form .extra

[HTML]<style>#ykpsb { margin-bottom:10px;}#ykpsb form { float:left;}#ykpsb .extra { float:right;}</style>

[CSS]

因每個模組有 id，所以 CSS 可以寫得很 namespace

好處就是很安全，不同模組不會互相干擾

練習 1：HTML 模組 （3 Mins）http://josephj.com/training/ncu/html-module.html

1. 替此文章模組取個適合的 id2. 加上 hd, bd, ft 的 class3. 利用前頁的方法設定 CSS

color:#369;background:#ffe;

font:bold 16px;

2. CSS 浮動float 是排版的常用技巧

過去：常用 <table> 來做到下面的版型：

靠左文字 靠右文字

<table border=”1”> <tr> <td align=”left”>靠左文字</td> <td align=”right”>靠右文字</td> </tr></table>

現在：使用 CSS 的 float 屬性來做到

<div id=”masthead” style=”border:solid 1px #000”> <span style=”float:left”> 靠左文字 </span> <span style=”float:right”> 靠右文字 </span></div>

靠左文字 靠右文字

但 float 之後的區塊是不會佔空間的實際情況會是：

靠左文字 靠右文字

border 不會被文字的高度給撐開！

對 IE 的解法：對上一層設 zoom:1

<div id=”masthead” style=”zoom:1;border:solid 1px #000”> <span style=”float:left”> 靠左文字 </span> <span style=”float:right”> 靠右文字 </span></div>

對其他瀏覽器的解法：<div id=”masthead” style=”zoom:1;border:solid 1px #000”> <span style=”float:left”> 靠左文字 </span> <span style=”float:right”> 靠右文字 </span></div>

<style>/* 作用是增加了一個有 clear:both 屬性的區塊 */#masthead:after { content:’’; display:block; clear:both;

}</style>

練習 2：CSS 浮動（3 Mins）http://josephj.com/training/ncu/float.html

1. 標題浮到左邊2. YUI 圖浮到右邊3. 替整個模組設 border4. 用前一頁的方法清除 float

border:solid 5px #ccc;

font:bold 197%;

3. CSS 背景圖適當地將 <img> 改用 CSS background 可以讓 User 讀取更順暢

在 Yahoo! 所有裝飾性的圖都是 CSS 背景圖

在網路很慢時<img> 會把畫面卡住

background-image 則無此問題

background:[背景色] [url(圖檔路徑)]

[x, y 位置] [重複];

background:#369 url(ico_yui.gif) left top repeat-x;repeat-y

no-repeat

0 100%

0 -12px

background-color:#369;background-image:url(ico_yui.gif); background-position:left top;background-repeat:repeat-x;

或

練習 3：CSS 背景（3 Mins）http://josephj.com/training/ncu/background.html

1. 設定背景圖為http://josephj.com/training/ncu/bg_nav.png

4. CSS 相對與絕對位置不管是做圓角、位置微調都會用到

• position

• position:static; 預設

• position:absolute; 絕對定位

• position:relative; 相對定位

• position:fixed;

• top, right, bottom, left 的配合

•在目前的位置往下移 5pxposition:relative; top:5px;

•整份文件中的右下角：position:absolute; right:0; left:0;

•可視區域的最下方（IE6不支援）：position:fixed;bottom:0;

<div/>

<div/>

<div/>

<div/>

什麼都沒設時（position:static;）

<div/>

<div/>

<div/>

<div style=”position:absolute;bottom:0;right:0;”>

當對某個區塊設了 position:absolute; 時就脫離原有區塊的範圍、不佔空間

<div style=”position:relative;” />

<div/>

<div/>

<div style=”position:absolute;bottom:0;right:0;”>

對母區塊設定 position:relative; 則會限制住 position:absolute; 的子區塊

練習 4：CSS 相對與絕對位置http://josephj.com/training/ncu/position.html

1.將 li 設定為 position:relative;2.將 img 設定為 position:absolute; 並利用 top, right 做微調

5. CSS Hack 基本針對不同瀏覽器做樣式處理

解決 IE 6,7 與其他瀏覽器在樣式上的差異

• 一般瀏覽器• background:blue;

• IE 6 與 7 都會套用 * 開頭的 CSS Rule• *background:red;

• IE 6 會套用 _ 開頭的 CSS RuleIE 7 則不理會

• _background:green;

IE 6, IE7, Firefox 會有不同的底色

#article .bd { background:blue; *background:green; _background:red;}

FF, IE 6, IE 7, Safari...

IE 6, IE 7

IE 6

練習 5：CSS Hack 基本http://josephj.com/training/ncu/css-hack.html

1.讓 #article .bd 在 FF 的底色為 pink, IE7 為 green, IE6 為 red

6. CSS 圓角最不會干擾到內容的作法

72px

18px

background:100% 0;

background:100% -18px;

18px

background:0 -36px;

background:0 -54px;

CSS Sprites：將多張背景合成一張http://www.lesliesommer.com/wdw07/html/images/cr_big.gif

•待製品：一個普通的模組http://josephj.com/training/ncu/round-corner.html

•了解原理：替四個角上背景色http://josephj.com/training/ncu/round-corner-sample.html

•融會貫通：放上圓角圖、定位http://josephj.com/training/ncu/round-corner-sample-2.html

•完成品：去除背景色http://josephj.com/training/ncu/round-corner-sample-3.html

7. YUI 選單輕鬆地做出巢狀式浮動選單

練習 7：YUI 選單http://josephj.com/training/ncu/yui-menu.html

1.請以 new YAHOO.widget.MenuBar([模組id]); 新增一個 YUI 選單物件

2.執行這個物件的 render() 方法

練習 7：YUI 選單http://josephj.com/training/ncu/yui-menu.html

autosubmenudisplay (true 或 false) 是否自動顯示子選單

hidedelay （毫秒）滑鼠移開 n 毫秒後才隱藏

lazyload (true 或 false) 是否滑過去時才建立子選單

常用屬性：

8. YUI 按鈕輕鬆做出互動性豐富的按鈕 UI

YUI Button

一個按鈕該有的互動效果， YUI Button 都提供

更提供各種形式的按鈕

HTML 預設的按鈕醜又缺乏互動

練習 8：YUI 按鈕http://josephj.com/training/ncu/yui-button.html

1.請以 new YAHOO.widget.Button([連結 id]); 將連結轉換為按鈕

6. YUI 視窗Web 2.0 的「開新視窗」

YUI Container 家族

YAHOO.widget.Panel

YAHOO.widget.Panel

YAHOO.widget.Dialog

YAHOO.widget.SimpleDialog

練習 9：YUI 視窗http://josephj.com/training/ncu/yui-panel.html

1. 請以 var oPanel = new YAHOO.widget.Panel([模組 id], [屬性]); 將 #panel 模組轉換為視窗（屬性設定請看下一頁）

2. oPanel.render(document.body)： 將模組 append 到最外層3. oButton.addListener(‘click’, onButtonClick)

onButtonClick 函式：oPanel.show();

練習 9：YUI 視窗http://josephj.com/training/ncu/yui-panel.html

close 是否要有關閉的按鈕

fixedcenter 是否要置中對齊

modal 是否為獨佔模式

underlay shadow’, ‘matte’

visible 預設是否顯示

width 視窗的寬度

{屬性1 : 屬性值 1, 屬性 2 : 屬性值 2}