寫好的網頁要測試...到底要測試哪些東西？

相信您聽過不只一個人說「測試乃品質之母」。很可惜的是，國內的網頁設計師要不就是知道但懶得測，要不就是根本不知道要測什麼。這篇文章特別把一個網站到底要測試哪些東西，非常詳細地列出來。很值得網頁設計師與專案經理參考喔！

一個做好的網站，應該測試下列項目：

1. 功能性測試（Functionality Test）
1-1. 測試所有連結：包含外連、內連、同頁連結、E-mail 連結、有無「孤兒頁面」（完全沒有連結可以抵達該頁的頁面）等。
1-2. 測試所有表單：所有輸入框是否會驗證輸入值正確與否（如：年齡輸入『負數』就不對了）、是否有預設值...等。
1-3. 測試所有 Cookie：瀏覽器關閉或打開 Cookie 時運作是否如預期、Cookie 寫入時是否加密、使用者可否繞過 Cookie 進入系統區等。
1-4. 測試 HTML/CSS 語法是否合法正確。
1-5. 測試資料庫：新增、修改、刪除、搜尋您的資料庫，看看功能是否正常。

2. 易用度測試（Usability Test）
2-1. 瀏覽順暢度：各種導覽列、側邊欄功能是否正常？所有功能是否平均按三個鍵即可抵達該頁面？
2-2. 內容易讀性：內容是否有錯字？有沒有配色不當導致文字不易讀取？字體、圖片大小是否適中？
2-3. 其它易用度：是否有「搜尋」、「網站導覽地圖」、「使用手冊」等。

3. 程式介面測試（Interface Test）
3-1. 網站的程式介面：網站伺服器與其他伺服器（如：資料庫伺服器）之間的介面等。
3-2. 測試項目：是否伺服器間函數呼叫都正常運作？伺服器發出錯誤訊息會不會赤裸裸地顯示給使用者看？有無預防意外情況（如：另一個伺服器無回應）？

4. 相容性測試（Compatibility Test）
4-1. 瀏覽器相容性測試：用 IE、Firefox、Chrome、Safari 四大瀏覽器看看您所有的頁面正常否？
4-2. 作業系統相容性測試：在 Windows、Mac、Linux 三大作業系統瀏覽您的網站正常否？
4-3. 移動式設備瀏覽測試：使用 iOS (iPhone/iPad）、Android 瀏覽您的網站正常否？
4-4. 列印相容性測試：若支援列印功能，用 HP、Epson 兩大廠牌的印表機印印看正常否？

5. 效能測試（Performance Test）
5-1. 負載測試（Load Testing）：測試同一頁面可以讓多少人同時存取。
5-2. 壓力測試（Stress Testing）：測試系統超過負荷時，何時會崩潰？以及是否有能力從崩潰中回復？
5-3. 建議使用 jMeter 這套軟體做效能測試。

6. 安全性測試（Security Test）
6-1. 在不登入的情況下，直接輸入所有會員頁面的 URL，是否無法進入？
6-2. 用一般方法登入，是否有 htt://您的網址/?ID=123 這類 URL 出現？將 ID=123 手工改成 ID=124 是否可不輸密碼登入？
6-3. 故意在登入頁面輸入非法的 Username、Password，網站的反應是否如預期？
6-4. 直接輸入網站內的每個已存在目錄，如： http://網址/images，不應該把整個目錄內的檔案全數列出。
6-5. 是否有驗證文字的輸入框（CAPTCHA），防止駭客用「非人類」（即：程式碼）做登入動作？
6-6. 所有與安全相關的動作（權限修改、登入登出、登入失敗次數與 IP...），是否都有寫入「日誌（Log）」中？

如果您有哪一點看不懂，歡迎您留言討論。原文網址在此，供您參考：

http://www.codeforest.net/web-application-testing

30 個讓你的網站看起來更優的點子

做網站的朋友，每天大多竭盡心思想著如何把網站變得更好看，但又不致於讓伺服器負擔太重。這裡有一篇「30 個立即可用的網站好點子」給大家參考。包含：

1. 使用者體驗測試
2. 適度的留白
3. 適當的字體
4. 以 CSS3 增加陰影，營造層次感
5. 添加背景紋理與樣板
6. 用 CSS3 替背景披上漸層色
7. 善用 Twitter 的 Bootstrap UI 函式庫
8. 善用 HTML5 Kickstart UI 函式庫
9. 使用 jQuery UI
10. 使用精美的全螢幕背景圖片
11. 以「圖示」（Icon）來代替單調的「選單（Menu）」
12. 常常更換整個網站的基礎色調
13. 盡可能將老舊瀏覽器的支援考慮在內
14. 善用搶眼的特殊字體營造網頁風格
15. 支援「社群分享」
16. 開放讀者討論
17. 較寬的「頁腳」設計（目前流行）
18. 使用相對大小來決定照片大小（如：以「100%」取代「180px」）
19. 提高「選單」的操作性（如：增加「首頁 > 產品 > 相機 > CM-100」這類超連結在頂端）
20. 為「照片」與「影片」以 HTML 屬性標籤添加關鍵字，方便搜尋引擎尋找
21. 別把選單項目埋得太深，讓使用者找不到
22. 增設「回到頁面頂部」（Back to Top）連結
23. 記得以 CSS 設定 與

 標籤，使之易讀明顯
24. 記得增加圖片的 width 與 height 屬性
25. 以 alertify.js 這類函式庫，製作彈出式視窗
26. 版面要能適應「桌機」或「手機」等不同螢幕大小
27. 友站連結
28. 善用看起來很像圖示的字型
29. 圖片框加上陰影，營造層次感
30. 盡量以 CSS 代替 HTML 標籤排版，以利輕鬆更換版面

原文連結如下：
http://www.hongkiat.com/blog/ideas-to-nicer-websites/