大高雄Linux使用者協會

善心人士翻譯的一篇好文, 裡面寫的內容, 只要常在網路遊走, 應該都會感同身受, 譯者將此做整理、翻譯的動作. (感謝 MUKI 的翻譯)

這篇文章讓不懂網站的業者看過, (他們有看的話)應該可以省點口水~

• 原文: 43 Web Design Mistakes You Should Avoid
• 翻譯原文: 43點設計網站時應避免的錯誤 - MUKI space 

43點設計網站時應避免的錯誤

下述摘錄大標題:

1. 你必須要讓讀者在第一時間瞭解你的blog在幹麻
2. 讓文章容易閱讀
3. 不要用一些不容易閱讀的花俏字型
4. 不要使用過小的迷你字體
5. 不要設定開新視窗
6. 不要改變讀者視窗的大小
7. 除非需要且必要，否則不要強制讀者註冊
8. 請勿未經過他人同意發送訂閱給他
9. Flash不要使用過度
10. 不要自動播放音樂
11. 如果你必須要放影音，請預設關閉，讓讀者選擇要不要播放
12. 不要因為部落格掛件而干擾你的主頁面
13. 不要用個只有「enter」的首頁，直接進入你真正的網站
14. 確定blog有包含聯絡我的細節
15. 確定你的網站能使用「上一頁」按鈕
16. 不要使用閃爍的文字
17. 避免複雜的網址結構
18. 使用css取代html的table語法
19. 確定讀者可以搜尋到你整個網站(blog)
20. 避免使用下拉式選單
21. 選單儘量使用文字
22. 如果你有連接PDF檔案，請顯示他們
23. 不要讓讀者干擾了你製作網站的版本
24. 不要把廣告跟你的文章內容參雜在一起
25. 使用簡單的導覽結構
26. 避免「向內發展」
27. 不要使用FrontPage
28. 確定你的blog兼容於每種瀏覽器
29. 確定包含錨文本連結
30. 不要把連結藏起來
31. 讓讀者可以清楚看到連結
32. 不要對文字作底線及顏色的標記
33. 已經拜訪過的連結設定其他顏色
34. 不要使用動畫圖檔
35. 在圖片的設置多使用alt以及title的屬性
36. 不要用刺眼的顏色搭配
37. 不要用跳出視窗
38. 避免java script的連結
39. 在blog的頁尾放上網站的訊息
40. 避免過長的頁面
41. 不要出現水平捲軸
42. 不要有拼字和文法的錯誤(muki註：對國人而言，就是不要有錯字以及注音文)
43. 如果你有使用圖片驗證機制，請確保這張圖片可以讓讀者很清楚的閱讀

裡面並不是所有都該遵守, 還是有不少例外, 依環境狀況而定, 例如:

• 不要設定開新視窗: 我的習慣是外連的網站會開新視窗, 感覺對他們比較尊重 (不過這是見人見智, 這點我跟譯者的看法倒是非常一致. :P)
• Flash不要使用過度: 如果強調的只是展示 Flash功力 和 動畫特效的效果, 就盡量用吧~
• 不要因為部落格掛件而干擾你的主頁面: 個人覺得純花俏不實用的就別擺, 有用的還是擺上去.
• 不要使用FrontPage: 如果只會 FrontPage, 就用吧, 做完後建議測試過所有瀏覽器, 然後找個懂的人幫你做做程式碼的精簡化. :P
• 在圖片的設置多使用alt以及title的屬性: 圖片要用 alt 和 longdesc (詳見: Objects, Images, and Applets in HTML documents), 連結用 title (詳見: Links in HTML documents).

下面幾點是我在瀏覽時, 絕對不想遇到的狀況, 如果沒有特殊需求, 盡量避免吧. Orz.

• 不要改變讀者視窗的大小: 除非有特殊要求, 不然請注意, 瀏覽器的畫面現在不會只有你網頁, 會影響到很多頁面.
• 不要自動播放音、如果你必須要放影音，請預設關閉，讓讀者選擇要不要播放: 當你平常在聽音樂, 又聽到網頁來的聲音, 就需要找出是哪個網頁發出來的, 去關掉它.

Web 2.0 這個詞從 Tim O'Reilly 提出來後, 現在到處都聽的到這個名字, 衍生出很多 XX 2.0, OO 3.0 等.

Tim O'Reilly 關於 Web 2.0 的解釋說明, 就是這篇文章: What Is Web 2.0

感謝 盧澤宇 把此篇翻成中文, 詳見: (因為此篇文章有點長, 所以分成 2篇, 原作分 5篇.)

1. 什麼是Web 2.0 (1)
2. 什麼是Web 2.0 (2)

摘要整理

完整的就回去看上述文章, 下面都是節錄內容摘要, 而且只有節錄大標題和結論, 沒看過的還是建議回去讀全文~ :P

由 Web 1.0 的成功案例 分解出 Web 2.0 的重要原則

1. 網路應當被視為是平台
2. 引領群體智慧
3. 資料是下一個「Intel Inside」
4. 軟體升級模式走到盡頭
5. 輕巧的程式設計模式
6. 超越單一裝置的軟體
7. 豐富使用者的感受

結論

Web 2.0公司的核心競爭力

以上所探討的七種Web 2.0原則，針對其中一些特性申論較多，所提到的每一個例子，都能驗證一到多個關鍵原則，但或許仍有不足之處。

現在讓我們總結一下Web 2.0公司的核心競爭優勢如下：

• 提供服務，而不是套裝軟體，能以符合成本效益的方式擴充
• 控制獨特的、難以再製的資料來源，隨著越多人使用而累積越豐富的資料
• 信任使用者為共同的開發者
• 善用眾人的集體智慧
• 善用大末端使用者的自助服務效能
• 超越單一裝置層級的軟體應用
• 輕巧的使用者介面、開發模式、及商業模式

以後若有公司宣稱其為Web 2.0的應用服務，可以用上述原則來檢驗其真實性，得分越多就越名實相符。記住，在其中某個領域能表現傑出，勝於在七種原則都只沾上一點邊！

想知道某個 IP 到底來自哪個國家, 除了查 GeoIP(Geolocation and Online Fraud Prevention from MaxMind) 的 DB外, 還可以參考這個網站的資訊.

由 台灣網際網路資訊中心 提供的 全球IP位址統計表:

• IPv4位址統計表
• IPv6位址統計表

PHP 在撰寫時常會要判斷 Email、產生亂數密碼、抓取 IP(Proxy 背後的IP)、寄送信件、上傳檔案 及 秀出目錄檔案列表 等等.

這篇文章幫你將上述 等 10個程式片段整理起來, 並分別有寫出 Open Source 的網址, 只要將程式抓下來, 再照範例使用即可.

詳見: 10 code snippets for PHP developers

網站要前進大陸市場, 有很多要注意的事項, 例如某些詞/某些影片不能出現等等. 只要那些詞出現, 就會被大陸從網路源頭整個封鎖掉.

這個網站可以查詢你的網站是否有被大陸封鎖: Website Test behind the Great Firewall of China

把網站網址輸入進去即可查詢~ :)

感謝 Hedger 提供的資訊, 可以試試: China Channel Firefox Add-on - Experience the censored Chinese internet at home!

CSS 的屬性值 和 Javascript 設定 CSS 屬性值 的命名規則上有點差異, 簡單的說, 大多數的差異, 都是 CSS 屬性有 - 或 : 號的, 就是去掉 - 或 :, 後面接的字轉大寫, ex:

• background-color => backgroundColor
• background-image => backgroundImage
• background-position => backgroundPosition
• background-repeat => backgroundRepeat
• text-decoration: line-through => textDecorationLineThrough
• text-decoration: none => textDecorationNone
• 要注意的例外狀況是: float => styleFloat 這個.

CSS 屬性 與 Javascript 的轉換對照表

• 好站: CSS Properties To JavaScript Reference Conversion

另外若有使用 jQuery 的, 雖然 jQuery 幫我們做很多簡化, 不過 .css() 這個方法, 還是照這個規則走(本來是希望可以 'background-color' 設. XD), 這個對照表還是記起來比較好~ .css 的方法是照這個規則走, 如果要使用 'background-color', 要用 " 括起來.

• jQuery 使用範例:
• $("a").css({backgroundColor:"yellow", fontWeight:"bolder"});
• $("a").css({"background-color": "yellow", "font-weight": "bolder"});

相關網頁

• CSS, JavaScript 轉換表

現在有很多網頁, 特別是論壇類的, 大多都沒有提供 RSS Feed, 要知道是否有更新, 就得要回到原站去, 或者用其它瀏覽器的外掛去做偵測(不想再讓 Firefox 的外掛再多下去了).

之前就有想要幫網站來做個 Parse, 然後來產生 RSS Feed, 這邊已經有網站做好囉~

• Page2RSS - Create an RSS feed for any web page

只要輸入網址後, 找到頁面寫 To receive updates for this page in RSS format copy-paste this link into your feed reader., 點 this link, 將此 URL 加入 RSS Feed 做監控就好囉~ :)

感謝 SJH 推薦: Feed43 : Convert any web page to news feed on the fly

申請 ADSL/光纖, 怎麼知道他實際速度到底有沒有達到, 通常會用HiNet的測試連線速率來測試.

HiNet 基本測試很簡單, Ctrl + F5 就可以知道速度了, 不過這個通常不是很準確.

比較準的方式就是實際丟一個檔案上傳, 然後再拉一個檔案下載, 分別看執行時後的速度, HiNet的測試連線速率 的網站上都有提供這種服務.

聽起來不錯, 但是對不懂電腦的人來說, 似乎操作還是過於複雜.

發現 IP-address 有提供一個服務:

• Bandwidth Speed Test - Free Broadband Speedtest, 只要點 Begin Test, 就會自動幫你跑 上傳/下載, 圖形的動畫也畫的很清楚, 測試完的數據也蠻正確的(至少我是正確的. XD), 有需要可以試玩看看囉~ :)

其它相關網站

• IP-address.com, 測試你的連線速度

設計師用的螢幕比較挑剔, 而且於印刷業, 都還要把螢幕拿去請專人做色彩校正的動作, 若想要自己手動來做校正, 該如何做呢?

這篇文章教你如何用小畫家來做色彩校正的動作: 螢幕色彩校正輕鬆免費做

通常如果要於網頁上指定字型, 都會建議轉成圖片後再做, 這樣子才能於各種平台都能讀取(Windows, Linux, Mac 等).

沒想到有人這麼認真的做字型於各平台的測試.

詳見: List of Web Safe Fonts

先列結論, 可用的字型語法如下(CSS 語法), 最新請詳見原作者網頁:

font-family: Arial, Helvetica, sans-serif;
font-family: 'Arial Black', Gadget, sans-serif;
font-family: 'Bookman Old Style', serif;
font-family: 'Comic Sans MS', cursive;
font-family: Courier, monospace;
font-family: 'Courier New', Courier, monospace;
font-family: Garamond, serif;
font-family: Georgia, serif;
font-family: Impact, Charcoal, sans-serif;
font-family: 'Lucida Console', Monaco, monospace;
font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
font-family: 'MS Sans Serif', Geneva, sans-serif;
font-family: 'MS Serif', 'New York', sans-serif;
font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
font-family: Symbol, sans-serif;
font-family: Tahoma, Geneva, sans-serif;
font-family: 'Times New Roman', Times, serif;
font-family: 'Trebuchet MS', Helvetica, sans-serif;
font-family: Verdana, Geneva, sans-serif;
font-family: Webdings, sans-serif;
font-family: Wingdings, 'Zapf Dingbats', sans-serif;

其它相關網頁

• 上述字型呈現可於此觀看: Web Safe Fonts Preview
• 目前所有英文字型的 Preview: All Fonts Preview
• 8 fonts you probably don’t use in css, but should

Design Pattern: 把重覆的事情, 包成可以重覆利用的物件, 設計越有彈性且簡易使用, 就是好的 Design Pattern.

專家對 Design Pattern 的解釋, 下述轉載自: Design Pattern 新解

Pattern 最簡單的定義

只要是一再重複出現的事物，就是 Pattern。

什麼是 Design Pattern

Pattern 就是一種「千錘百鍊」的智慧結晶。有經驗的專家和沒經驗的新手，差別就在於：有經驗的專家知道如何在適當的時機>，套用某些公式（Pattern）以解決特定 的問題，這是專家經年累月所培養出來的 Know-How（請參見「軟體產業的知識經濟」一>文）。

一般來說，物件導向軟體開發的程序可以粗略分成 OOA（物件導向分析）、OOD（物件導向設計）、OOP（物件導向實作）。在 OOD（Object-Oriented Design）階段所採用的 Pattern 就稱為 Design Pattern。運用良好的 Design Pattern，可以使得系統架構更優良（也更快完成），對於後續的 OOP、測試、維護，都會有很大的 幫助。Design Pattern 會告訴你，什麼情況下用 Delegation 而不要用繼承、什麼情況下用 Interface 而不要用 Class... 諸如此類的知識。這些都是軟體界前輩的智慧結晶。

我要強調 Design Pattern 專指 Design 時期的 Pattern。但是 Coding 時的 Pattern（例如程式碼內縮）最好不要稱為 Pattern，以免混淆。Coding 時期的 Pattern 最好稱為 Coding Style（或 Code Style）。

Design Pattern 這個名詞也可沿用到許多地方。我認為孫子兵法就是一本軍事領域 Design Pattern 的書，它告訴你什麼時候該採什麼樣的軍事動作。至於怎麼去砍人，則是屬於 implementation 的部分，不屬於孫子兵法的範圍。

總之,Design Pattern 是一種概念, 不過非常抽象, 下面兩本經典本, 有前輩整理的許多設計模式:

• 深入淺出－設計模式
• 物件導向設計模式

網路上也有相關的整理:

• 設計模式筆記 - 推薦此篇
• Design pattern (computer science)
• 軟體設計模式
• 史帝芬心得筆記 -- Design Patterns (設計模式)

不過 Design Pattern 的概念很多都太過抽象, 就算看完還是有很多是懂非懂, 這時後需要的就是大量的範例, 不過 Design Pattern 大部份範例都是 Java 的程式, 前幾天總算看到 PHP 版 Design Patterns 的整理囉~

詳可見 Design Pattern for PHP 的範例實作與解說: Patterns For PHP

其它相關網頁

• Yahoo! Design Pattern Library

PHP 有很多方便的 function, 但是要轉換成 Ruby 的話, 需要另外花一點時間做摸索.

這個網站裡面有列了不少常用的 function, 假如要查 fpoen, 可以用 http://railsforphp.com/fopen 來查詢(會自動導到 http://railsforphp.com/reference/filesystem/fopen), 就可以查到 PHP 原本寫法, 然後在 Ruby 裡面該怎麼寫的範例.

詳細可見:

• Rails for PHP Developers
• Rails for PHP Developers - Reference

註: 真希望 Python 也有這種轉換的 Reference 可以看~ XD

Blog 想要生手機版的頁面, 想到就很辛苦, 有網站幫我產生多好, 這個想法總算有網站實現了~

只要到這個網站: Mobile websites creator - Wirenode 再依以下步驟就可以了~

1. 輸入自己的 Blog (會自動抓取 RSS URL)
2. 輸入 xxx.wirenode.mobi (確認這個 URL 是否有被使用)
3. 註冊帳號
4. 再來就可以於 http://tsung.wirenode.mobi 看到手機版的 Blog 內容囉~(PS: 我還沒有手機看過, 但是網頁上直接看, 似乎文字都是置中, 看起來似乎不是很好看, 或許手機上會比較好? 還是等他改進)

其它相關網頁

• Mobilizing Your Blog in 5 Minutes

我的 Ubuntu 沒有安裝嘸蝦米, 自己用不到, 就懶得去裝, 但是偶爾有人要用時, 就會請我幫他打...

今天在加 del.icio.us 的連結時, 正好看到以前加入的連結: 網．蝦米 Hyper Liu

這是在網路上直接打的無蝦米輸入法, 不用安裝, 臨時要用倒是可以在上面打一打, 再使用複製貼上大法即可~ :)

當初聽到老師說, 在 Windows 下載 gvim 來裝, 是覺得老師一定是瘋了.....

但是現在我在 Windows, 也是下載 gvim 來裝... Orz... (vim 真是太強大了)

Eamcs 應該也是一套強大又好用的編輯器, 雖然一直想學, 但是一直都還沒有動手~  正好看到下面兩篇好文, 應該是看一看, 就可以快速入手了吧~ :)

• Emacs文字模式熱鍵對應說明 - 特別推薦此篇
  
• Emacs / X window 鍵盤滑鼠定義

感謝作者的用心整理.

• 感謝 GMAN 提供: Emacs - Emacs 從入門到進階, 清楚說明的好筆記~
• 感謝 Zero 日落 提供: Emacs - PDF 的教學文件, 把快速鍵分類整理.

推薦兩篇好文, 主要是關於下述:

1. 為何要讀書?
2. 讀書目的?
3. 要如何讀書才會比較快?

第一篇: [讀書心得] 我為什麼愛念書、我怎麼讀書?

重點摘錄

1. 你必須要把書中的內容真正的吸收，才有辦法講出自己真正得到的心得 - 盡量在讀完書後, 寫出自己的心得, 或回想一下心得或收穫
2. 沒有所謂的沒有時間唸書，只有心裡面到底想不想唸書，當你真的去重視一件事情的時候，你就一定會在期限內把事情做完
3. 為什麼愛念書，其實也不是愛念書，而是覺得該適時的填充自己的腦袋
4. 實體的書店，在逛書店的時候，記下自己覺得印象深刻的書目名稱，然後回到家中網路上購買 - 我是直接拍下書名, 然後買書的地方依照下述: 水準書局, COSCO, 家樂福這些賣場/網路書局(依便宜到貴大概是這樣子排)
5. 很多時候你看過了書在心中烙下了記憶，但總會在某一天突然想到有一些好好的故事或很好的話，如果書是自己的，那就可以馬上的翻到回復記憶，而如果是用借的書可能就會造成遺憾 - 有時後書買回來不會全看, 但是我最少會大概都翻過, 然後有時後臨時想到, 至少可以快速找到需要的資料.
6. 既然你從書中得到了一些心得想法，那贊助一兩百元給作者、出版社、書店，我覺得其實是應該的，更何況知識是無價的，有時候會因為一些想法改變自己的未來 - 同感
7. 唸書的時間 - 基本上我隨時身上都帶 2本書(分要花點時間讀的, 和 短時間閱讀的, ex: 小說/背單字), 因為通常在外, 可能等個人, 或者坐捷運時, 都可以拿起來讀.
8. 讀書的目的是為了要吸取書中給你的內容，把好的觀念記在腦袋裡，而不是衝數量比誰念的書比較多

作者認為最關鍵的項目:

1. 一次一本、一次只念一本書 - 這個我覺得主要是書的種類差別.
2. 一定要寫心得 - 寫心得很有用, 邊讀書就邊做筆記也是一種, 然後整本書看完後再看筆記回想一下.
3. 重點是得到書中給的體悟而不只是看完它
4. 重點標示 - 現在有賣一種蠟筆, 捲動後才出來, 顏色不會太深, 然後不小心劃到擦子多擦幾下可以擦掉, 我覺得蠻好用的~

第二篇: [讀書心得] 十分鐘內倍增閱讀速度

這篇文章講的, 跟速讀講的東西差不多, 原文有圖文並茂的說明, 我覺得速讀比較適用在小說就是了, 其它通常快速看前文後, 之後的內容都還是會停下來慢慢看~

重點摘錄 

1. 兩分鐘 - 用筆或手指沿著每一行劃過，盡快讀過
2. 三分鐘 - 開始讀每一行時，專注於第一字數來的第三個字，而在每一行的結尾，專注再從最後一字倒數的第三個字
3. 兩分鐘 - 等你能熟練地盯住兩側屬來的第三或第四字後，試著只做兩次掃視(又稱(視線停留))，只讀行首和行尾的焦點字
4. 三分鐘 - 練習快速道無法吸收的閱讀速度，但要使用上述正確的三個技巧，讀五頁後，在用你習慣的速度閱讀
5. 還是要記得，閱讀的目的是為了要得到書中給的內容，如果發現這樣的方法對於你其實會降低理解的能力的話，那還是回到原本的平常的閱讀吧
   

其它相關網頁:

• [讀書心得] 有錢人想的和你不一樣
• [讀書心得] 一週工作四小時，晉身新富族

壽司的吃法這麼講就, 在看這篇之前, 我只知道壽司要沾醬, 不是拿飯去沾, 而是拿料去沾..... 原來各種包法有各種不同的吃法.

詳細可見此文: 常見握壽司吃法分享 

這篇文章主要分:

1. 平常握壽司的吃法
2. 甜蝦的吃法
3. 立體壽司的吃法

雖然只有介紹三種, 但是圖文並茂講解的蠻清楚的, 改天來找找手卷的吃法...

看完的心得就是.... 好餓呀.... XD

其它相關:

• 嚴長壽教你吃大閘蟹 (大閘蟹吃乾淨後, 還要能組回去才叫高明.) - 此文的 重點摘要整理
  

檢驗 HTML/XHTML/CSS 是否有問題, 直接將網址往下述網站丟就可以做測試囉 :)

W3C:

• The W3C CSS Validation Service
• The W3C Markup Validation Service (驗證 HTML/XHTML)

其它的驗證網站:

• XHTML-CSS Validator (驗證 XHTML/CSS, 速度蠻快的, 而且註解也比較清楚好看)

現在為了 YSlow 能加分, 然後讓網站速度能更快, 就會把 css/js 都做壓縮, 但是對於要去看一些寫法, 就很頭痛..

這個網站只要把 Javascript 的程式貼進去, 就會自動幫你排版對齊.... 或許在 commit 前, 都將 code 先經過這個站排版一次也不錯 :P

直接試用看看比較實在: Online beautifier for javascript (js beautify, pretty-print)

這邊有此 JavaScript Beautify 的 PHP 原始碼, 備份 

其它相關:

• Pretty Printer for PHP, Java, C++, C, Perl, JavaScript, CSS

Javascript 平常在寫, 主要是 click/submit/change... 等, 偶爾 Event(Form 的製作, Event 會用比較多).

Javascript 的 Key Event 文章於: JavaScript Madness: Keyboard Events

此篇 作者研究 Javascript Event 在 各種瀏覽器/系統 觸發的情況, 並把結果寫下來(哪些 Event 會在哪個環境有作用), 很詳細, 還有清楚的表格對照說明.

作者的其它文章 還有 Mouse Event, Dynamic Script Loading .. 等, 我猜作者可能是拿 Javascript 在寫線上遊戲?... XD

想用 Javascript 寫線上遊戲的話, 可以直接參考作者主站: Javascript Madness: Introduction, 我想應該會有不少收穫~ :)

相關網頁: 

• Tips For Creating Great Web Forms - Form 的製作, 看到目前寫的最淺顯易懂, 也是最實用的一篇
• Better Web Forms: Redesigning eBay's Registration