
之前在 Mobile01 就有這個主題討論串「設計師就設計師 為什麼要叫美工呢?」,本人理所當然地戰下去…
不說結論,單以最簡單的網頁設計來說,和我合作過的不下十人,只是每個幾乎都沒底子;難道真的只要會 Photoshop 合成圖庫、Dreamweaver 拉 HTML 就可以自稱設計師?
(閱讀全文…)

之前在 Mobile01 就有這個主題討論串「設計師就設計師 為什麼要叫美工呢?」,本人理所當然地戰下去…
不說結論,單以最簡單的網頁設計來說,和我合作過的不下十人,只是每個幾乎都沒底子;難道真的只要會 Photoshop 合成圖庫、Dreamweaver 拉 HTML 就可以自稱設計師?
(閱讀全文…)
我想應該很少吧?XD
<!DOCTYPE html PUBLIC "-/W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
(略)
<style type="text/css">
body{padding:3px}
.box{width:500px;margin:0 auto}
.year{color:#c00;}
</style>
(略)
<div class="box">
<p>你知道嗎?</p>
<ul>
<li>哪一部電影獲得<span class="year">2006</span>年第59屆康城影展金棕櫚獎?</li>
<li>哪一位耶穌會傳教士是把儒家的五經翻譯成拉丁文的第一人?(圖)</li>
<li>康熙年間哪位清朝官員在廣州創立了羊城書院的前身-穗城書院與嶺南義學?</li>
</ul>
</div>
</pre>
<div> </div>
body{
padding-top:3px;
padding-right:3px;
padding-bottom:3px;
padding-left:3px;
}
.style1{color:#cc0000;}
<table width="500" cellpadding="1" cellspacing="1" border="0" align="center">
<tr>
<td align="left" height="30">你知道嗎?</td>
</tr>
<tr>
<td align="left"">
<table width="300" cellpadding="1" cellspacing="1" border="0">
<tr>
<td width="10"><div align="left"><span>.</span></div></td>
<td width="290"><div align="left"><span>哪一部電影獲得<span class="style1">2006</span>年第59屆康城影展金棕櫚獎?</span></div>
</td></tr>
<tr>
<td width="10"><div align="left"><span>.</span></div></td>
<td width="290"><div align="left"><span>哪一位耶穌會傳教士是把儒家的五經翻譯成拉丁文的第一人?(圖)</span></div></td>
</tr>
<tr>
<td width="10"><div align="left"><span>.</span></div></td>
<td width="290"><div align="left"><span>康熙年間哪位清朝官員在廣州創立了羊城書院的前身-穗城書院與嶺南義學?</span></div></td>
</tr>
</table>
</td>
</tr>
</table>
範例連結:jQuery FlyDOM 樣板系統範例
這個範例將伺服器端定位為資料提供者,所有的排版、定位等都交給使用者端來運算,也因為如此,所以特地試做了「檢視方式」清單,效果還不錯,只是還有幾個小問題要解決。
除了三種樣式作成樣板物件之外,包括分頁選擇也都獨立成樣板,伺服器端的頁數資料我也是用 JSON:
//css 的值就是各頁數的樣式類別
[{'page':'1', 'css':'selected'}, {'page':'2', 'css':''}]
為了讓總筆數和「目前顯示」資料能正確使用並減少伺服器存取的次數,我把這個項目也列入資料產出的 JSON 並放到最後,所以每次查詢資料就會有這項資訊可以使用,不用再額外撈一次:
[{'id':'1', 'player':'Paul Konerko'....}, ......, {'records':'18', 'display':'1-9'}]
※ 資料使用 MLB 2009-04-07 白襪對皇家例行賽的打者成績,直接建立成 JSON 所以無法進行刪除,而修改也沒完成,反正只是 FlyDOM 的範例嘛…
這是預設的「詳細資料」樣式。

檢視方式的下拉選擇清單,只需要簡單的定位就能完成。

圖示檢視,這個順便用了 jQuery UI 做了拖曳排序的效果。

清單檢視

參考資料:
前幾天裝了 XML-Google Maps Plugin,預設會輸出 iframe 來內嵌 Google Maps,只是 XHTML 1.0 Strict 已經不支援 iframe 這個標籤,所以改用下列方式替代:
原來的用法:
<iframe id="embeddedhtml" src ="http://www.ashcombe.surrey.sch.uk/MM_french/1a_self_family/self_family_fset.htm" width="100%" height="600"></iframe>
改成:
<object id="embeddedhtml" type="text/html" data="http://www.ashcombe.surrey.sch.uk/MM_french/1a_self_family/self_family_fset.htm" width="100%" height="600"></object>>
參考來源:[#MDL-17702] iframe is not supported in XHTML 1.0 Strict – Moodle Tracker
這次加入了 Yahoo! Video 及 Google Video 的支援,以及可即時播放轉換後的語法,並增加全螢幕的 param 選項。
※ Yahoo! Video 在 Firefox 下不支援 transparent,所以預設將不能勾選透明背景。
以後的更新可能只有影片網站的支援了…
因為之前轉換器的主機拆下來清灰塵之後就懶得組裝回去,所以這個轉換器就消失了,趁著今天閒閒改寫一下程式碼,並且除了 YouTube 之外還加入 Vimeo 的轉換。
在 param 選項部份,除了預設的 allowscriptaccess 為 always 以外,可以再選擇是否顯示影片選單、wmode 透明等,其餘 param 之後再視情況增加了。
使用方法一樣:
今年四月份響應了「救救設計師,對 IE6 勇敢說不!」的網站活動,活動發起人沒有刻意要推廣那一套瀏覽器,所以列出了下列這張圖:

不過今天我在整理佈景主題的時候試著連過去 savethedevelopers.org,卻發現網站導向了 Microsoft Get Internet Explorer 7,看了一下 DNS 異動記錄是 10 月 17 日進行最後一次變更。
應該是活動發起人被微軟和諧了吧?XD
SaveTheDevelopers.org :: Making The Web A Better Place, One Campaign At A Time…
這是一個對網頁設計者很有意義的活動,
現在開始,只要在網站上加入一段簡單的 javascript,就能讓使用 IE6 的訪客在瀏覽網站時,瀏覽器上方浮現這張圖:

請記得!儘速參與活動,救贖自己(或設計師朋友) XD
使用語法:
其實我對紀念 T-shirt 更有興趣,不知道有沒有人要辦團購?XD

延伸閱讀: