「白木怡言」部落格的設計問題

這裡不是「白木怡言」部落格。 XD


這個部落格是用asp開發架設的，操作流程表面上是沒問題的，不過有幾個問題存在著：

1. 左下「留下您的足跡」的「主旨：」「內容：」的td應該要加上nowrap避免文字自動換行。不過加上去之後會產生別的問題，後述。
2. 「其他主題」「下一頁」和左邊選頁數的連結，其實是用javascript做submit的動作，所以搜尋引擎是找不到這些後續的內容。若是有人想把「其他主題」的某一篇標記到書籤網站或是嵌入內文連結，就沒有正確的網址能用。(或許這是故意的？)
3. 內文切頁看起來像是用每行字數來除，然後以行數做切頁的依據，就會斷文斷得怪怪的，加上字體又不是用monospace這種固定字寬的字型，當全形字半形字混用的時候，會導致每一行的長短不一。


這是用網頁工具把做排版的table/cell以框線方式顯示出來的畫面，明顯可以看到幾個問題存在：

1. 文章標題/內文/分頁 應該要包在同一個 table 裡面，這樣頁面寬度看起來才一致。
2. 「主旨：」「內容：」加上nowrap避免自動換行後，會導致藍框整個往右擠，導致其他主題所在的綠框也往右移動而不在預定的位置，「內容：」右邊的textarea寬度應酌量縮小，或是綠框的寬度(甚至是表格分佈)重新設計。

其他不明顯易見的問題：
1. 叫出原始碼來看，會發現有 CSS style 寫錯。網頁完成請記得找個CSS Validation Service檢查一下。
2. 都什麼年代了，網頁還在用big5編碼，該換UTF-8了。
3. 寫這個部落格程式的人，趕快去把程式輸入檢查做好。(謎)

桃園長庚醫院外科系網頁的問題

桃園長庚醫院外科系的網頁，有一個做網頁的人常發生的毛病，那就是抄別人網頁裡的東西，沒有把屁股擦乾淨，尤其是用FrontPage或是DreamWeaver之類的網頁編寫軟體，常常會忽略檢查屁股乾不乾淨。


姑且不論這種愛心的圖案適不適合用在這種地方，外包著愛心圖案的連結也該記得清掉啊，要不然大家都知道這是去日本網頁抄來的圖了。

--
遙想當年2004年2月的時候，大陸浙江大學數學科學研究中心抄襲台灣清華大學的網頁，經披露後幾天就消失了。不過web archieve的記錄還在，直接網頁原始碼叫出來一看：


這還真是明顯的抄襲證據啊。


這是當時清華大學的網頁，可惜 web archieve 沒存到背景藍色的橫條圖片，要不然看起來就一模一樣了。

新竹科學工業園區 勞工育樂中心 的網頁

今天因為要去某個活動，所以上網路找了一下新竹科學工業園區勞工育樂中心的網頁。


很奇怪的，Google 是直接找不到這個網站的，都是其他一些活動辦在這個地方的訊息，裡面有些才有連結到上面這個網站。


看了一下新竹科學工業園區勞工育樂中心網頁的原始碼，如下圖：


喂喂，連堂堂「新竹科學工業園區」這個名號都沒掛上去啊，難怪搜尋關鍵字下「新竹科學工業園區 勞工育樂中心」會找不到。那好，我找找「勞工育樂中心」看看：


每一頁的列表我都看過了，全部都找不到新竹科學工業園區的勞工育樂中心網頁，限定搜尋網址再找一次看看：


真是太偉大了，完全找不到真正的網頁。
試了一下，還真的有個 robots.txt 叫搜尋引擎滾蛋咧。

--
這是一個很明顯的沒用網頁範例。

1. 標題記得要放完整。
2. 網站要能讓搜尋引擎找得到。
3. 網站請放在網路穩定的地方，動不動就連不上或是查不到網址是怎樣。

做這種網站有什麼怕人知道的啊..... -_-

愚蠢的首頁：台視文化全球資訊網

這年頭網頁頗流行第一頁先放個 flash 或是影片之類的，然後再讓使用者點進去到真正提供內容的主要頁面去。就像下面這一頁一樣：



這個 flash 的大小有 2402977 bytes 這麼大，以現在一般 ADSL 2M 保障頻寬來算，至少也得 8 秒才傳得完，若是以 512K 來算的話，那至少得 32 秒才傳得完。

放 flash 的網頁為了頻寬不大的使用者著想，不需要浪費時間去傳完整個 flash 就可以直接進去主要頁面，所以才有了一個 SKIP 按鈕的設計放在 flash 外面來跳過載入 flash 的時間，以達到友善使用者介面的效果。

為什麼我會特別提出這一點，因為台視文化全球資訊網這個 flash 一開始是一個載入的畫面，得等到整個 flash 都傳完之後才會開始動，然後開始動了以後，右下角才出現 SKIP 的按鈕，完全沒有任何意義嘛，浪費使用者的時間和頻寬。更何況這網站還放在中華電信機房裡，應該浪費了不少頻寬費用在這上面吧，大概試了一下，這應該是租 100Mb 的頻寬吧，本錢很粗喔。

--
另外，這個 flash 檔名叫做 example.swf，網頁標題也叫做 example，只要花點時間還可以找到網頁後台的進入點，再花點時間就可以... 咳咳，我沒有看到什麼管理介面的，真的。

這樣的網頁竟然還能拿出來用，做這個網頁的人到底腦袋裡面裝的是什麼東西啊？(其實這網頁和主要內容頁都還有幾個明顯的問題，我懶得寫了，台視又沒付我顧問費 :P)

未支援分頁瀏覽的遊戲基地(Gamebase)網頁

下圖是遊戲基地購物區的產品列表畫面。



早些時期 FireFox 之類可以分頁瀏覽(tabbed browsing)的瀏覽器不普遍也就算了，現在連有分裂遊覽功能的IE7都光明正大藉由 Windows Update 硬幹強姦迫使用者升級，而遊戲基地的購物網頁卻還在用沒有必要的 JavaScript 阻礙使用者以分頁瀏覽的方式來觀看產品網頁。

不只上圖中最下面的分頁處，頁面上還有幾個超連結也是不友善的使用 JavaScript，更不用說購物車的結帳程序只有IE能夠正常執行。

--
這招超連結故意用 JavaScript 也對 Google 之類的搜尋引擎不友善，難道是怕被使用者用搜尋引擎尋價的時候，發現遊戲基地賣得比較貴而不來消費嗎？ :P

創見T.sonic 520產品網頁

其實這一篇不是寫網頁設計的問題，而是一個產品網頁該有卻沒有的內容。

因為某個原因，我在看創見T.sonic系列產品的網頁，符合我的需求的是T.sonic 520這個產品，產品的網頁如下圖：


唔，我想看看耳機孔位置、各個開關、USB孔、電池孔是放在側面哪些個地方，確定在使用中不會壓到或是發生進水之類的問題，所以點了一下顯示更多圖片.....



喂喂，這幾張圖片根本沒用啊，去看看T.sonic 310的網頁，下面這張才是有用的產品圖片啊 -_-



結果最後是在產品手冊裡面找到下面這張解說圖片，可是還是看不出來實物的 USB 孔是不是有防水的橡皮蓋...... -__-



我想一個產品的網頁，提供給消費者應該是能夠快速讓消費者查看及比對的內容，而不是讓消費者還得去下載一個 PDF 檔案在裡面找所需的資訊，找到的竟然還不是實機的圖片解說。

Update: 拿到實機後，下面的 USB 孔沒有橡皮蓋，旁邊 line-in 的孔也沒有，感覺上很容易進水就完蛋似的.... -___-