Wednesday, August 25, 2010

2010台灣美食展 官方網頁

2010台灣美食展


這張截圖已經可以說是最正常的畫面,請直接到網站上面看會更囧。

這哪家外包做的?好慘烈的畫面,原始碼更是品質低落。還是官方單位給錢太少,還是給得拖拖拉拉不夠乾脆?

Wednesday, July 21, 2010

金漫獎 GOLDEN COMIC AWARDS

金漫獎 GOLDEN COMIC AWARDS

這個網站對台灣的漫畫產業有沒有實質幫助或正面意義,不是這篇的目的,也用不著信任政府的表面功夫能有多大的幫助。

這首頁表面上看起來還算正常,實際上問題很大。
(畫面上那個劣質小圖放大圖的中式服裝娘就不用提了,美術人員該砍掉重練。)



首先,這頁除了綠框框起來的「政府網站」「執行單位」還有一篇內文是正常的連結,紅框那一大塊都是flash做出來的,所有網站本身的連結全都等於是廢物,搜尋引擎無法正常的爬網站內容建立索引,沒有裝flash的瀏覽器也不能正常瀏覽網站內容。

點進去內文:


同樣的,紅框的部分是用flash做出來的,一樣全部廢掉。

其他需要點flash連結的內頁就略過不提了,一開始就是 0 分的網站就不用談內容了。

--
叫首頁原始碼出來看看:


這是找學生做的便宜網站沒錯吧?

Monday, June 28, 2010

總統府新網站

總統府新網站 竟花7百萬


喔喔,當然要來看看有多蠢....

這網站是用 DotNetNuke 架設的,早上看的時候首頁原始碼還有版權宣告(長得類似下面這樣),現在已經被拿掉了,中國華民國總統府實在是很注重智慧財產權啊!


首頁的檔案載入分析,這張是平均左右的水準。


用 firebug 看看網站的下載記錄,結果第一行就直接不及格,堂堂總統府網站的第一頁檔案要花一秒左右才會有回應資料出來,最糟的情況下還有超過五秒的,而且不只第一頁,而是每一頁都是這種低水準的速度。
---request begin---
GET http://www.president.gov.tw/ HTTP/1.0
Accept: */*
Host: www.president.gov.tw

---request end---
Proxy request sent, awaiting response...
---response begin---
HTTP/1.0 200 OK
Cache-Control: private
Content-Length: 57760
Content-Type: text/html; charset=utf-8
Server: Microsoft-IIS/7.0
X-AspNet-Version: 2.0.50727
Set-Cookie: .ASPXANONYMOUS=(略); expires=(略); path=/; HttpOnly
Set-Cookie: language=zh-TW; path=/; HttpOnly
X-Powered-By: ASP.NET
Date: ####
好吧,先天不良....

靜態檔案跟網頁放在一起,真是沒有效率的做法,還會拖慢網站載入的速度。

最下面還有一個 piwik 分析器,從 IP 來看大概是架在網站主機附近的另外一台機器,執行效率甚至比網站本身更差,有出現超過10秒的反應時間。

然後,這是手機版網頁.....


在真正手機上面看的效果是這樣:(轉載自 AC個人作品網站)

連螞蟻都看不到字啊!(╯‵□′)╯︵┴─┴

花了七百萬的價值到底在哪裡啊?

--
Update:有人開始玩新聞稿


Update:手機殼不見了,看起來更蠢了,這包商到底知不知道手機版網頁的重點啊。

Thursday, April 08, 2010

維大力網站

維大力網站


第一次看到有網頁做得這麼蠢有特色,連同意的按鈕都用 flash 做,避免搜尋引擎爬進來掃網站。

點下同意之後:


網址列的 %A5D%AD%B6.html 是 主頁.html .... (無言)
最佳瀏覽解析度為1440x900 .... (依然無言)
網頁內容設計與排版 .... (還是無言)

這網頁的作者真是太有才了。

Wednesday, April 29, 2009

中央氣象局全球資訊網 V6

(我的 Firefox 有裝 adblock 擋廣告,所以 flash 的上面或下面會出現「封鎖」的功能)

中央氣象局全球資訊網


用動畫 GIF 就可以做到的事情,為什麼要用 Flash 來拖累使用者的瀏覽器呢?

1週天氣預報


我把工作中的 Firefox 一開這頁就立刻爛掉,哪個白痴把中間幾十個圖樣全部都用 flash 做的啊 -_-

Tuesday, March 03, 2009

中華電信首頁

中華電信首頁:


此圖來自 othree 的錯誤的替代文字使用範例 第2號。

其實這個 icon 是很小的一個 ,可是卻沒有先 load 進來,讓人看到長長的 img alt 破壞畫面。

Monday, February 09, 2009

只要三小時學會專業三年功?

Mr.6每周六網站實作小聚 + 專為創業家設計的PHP、CSS/切圖、Flash、Photoshop、AJAX快速訓練課程


photoshop?真高級,不知道學員捨不捨得花錢買正版來用,亦或者是(嗶~~)一份來用。以我個人經驗來說,教教小畫家(對,就是那個小畫家),和一些免費的圖形處理小軟體的活用還比較重要,不過,或許Mr.6只會用photoshop?

flash?這個說簡單是可以教得很簡單,說難也有很特別的應用,更不用說版本之間的差異導致瀏覽器和網站系統來回的問題了,三個小時夠嗎?現在做flash的軟體應該是Macromedia Flash...喔,現在是叫Adobe Flash了,也是要花錢買的,怎麼教人創業都在用商業軟體啊...

html/css切圖?(看了看 beta20.org,到現在都還沒修好)連網頁基本切版的穩定和文字處理的專業性都有問題了,還拿出來誤人子弟?拿 dream weaver(這也是商業軟體,要錢的)隨便切一切就當作是教切圖切版,倒是不用三個小時就能學會了。更何況切圖切版大部分時候還要跟其他部分的人員合作(像是程式或是flash),不知道身為總經理的經驗夠不夠多?還是自己發想後叫下面去做,或是改爛後叫下面去收拾而已?

ajax?現在要學javascript網頁互動技術的是從jquery最快最容易上手,Mr.6 該跟上時代了,不要閒著在那邊曲解國外訊息又寫落落長的怪文章了。

網站創業家有程式能力是好事,可是有錯誤的程式能力,或是半調子能力還對員工頤指氣使要求甚嚴的,那就是災難了。

成本低?我怎麼覺得這樣教出來的先期投資(尤其是軟體)應該會不小?不要再把黑的說成白的啦~

--
如果有上課的學員照著這些課程內容做出拿上檯面的網站,請通知我去觀摩一下,謝謝。

Monday, January 26, 2009

Thursday, January 15, 2009

檢閱 Mr.6 的 beta20.org

各位或許還不知道 Mr.6 是誰,請參考 mr6.cc 或是下圖:
(只剪接用到的地方,其他用不到的地方都塗掉了)


簡單說就是一位有高學歷和豐富經驗,程式技術可以到開班授課程度的網路創業達人。

beta20.org 是 Mr.6 的「讓你紅工具網」或是「爆紅工具網」或是「網路爆紅工具網」。
(名稱的問題後面再說....)


這首頁表面上看起來很正常,實際上問題還不少。

首先,先點選左上角的「首頁」:


俗話說「好的開始是成功的第一步」,很明顯的,連最基本的上線檢查都沒做好的網頁,是失敗的第一步。身為一個網路工作者,不該犯這種新手才會發生的錯誤。

文字的切字也有問題,仔細看就發現是什麼字爛掉了....

來看一下 html 原始碼(「首頁」的錯誤就不用再看了):


一個好的網頁,就該設定好文檔類型(DOCTYPE,Document Type),並且遵照這文檔類型的設定來撰寫或產生整份 html 的內容,理所當然不應該有任何 html warnning 才對,除非遇到不得已的情況。可是,這份首頁原始碼就有 20 個 warning 存在,而且幾乎都是明顯可以改到好的問題,這是一個不嚴謹的做事態度,也可以看出網頁編寫者的專業度不足。
(首頁 20 個 warning 已經是最少的,其他頁面的數量比這個還要多....)

而且這份原始碼的 doctype 配合 html 的內容來看,也有用錯的地方。因為 html 有特定的某段內容,所以 doctype 的內容也不能這樣寫。

<TITLE>的內容竟然是空白的,以一個搞網路趨勢及SEO行銷的人來說,這是不可原諒的大錯誤。

再往下看:


這份原始碼應該有經過人為再次的撰寫或修改,而不是以工具(像是 dream weaver)來產生的完成版本,所以明顯看得出來格式不一致,且有一種這是新手寫 html 的感覺。當然,專業人士就算是手動編修 html 內容,也是會符合工具產生 html 的樣式(style)。

裡面還有一個自以為是正確,實際上是新手才會犯的嚴重錯誤,仔細看就看得出來喔。

看了一下「關於本站」:


又看到一個初學者才會犯的錯誤:前後文字不一。

這邊寫著首頁版面設計是 DreamLogic,連過去看了一下(以及 html 內容),DreamLogic 網站應該是提供網頁版型讓網頁編寫者直接使用的,而以上的錯誤跟網頁版型無關,幾乎可以確定是 beta20.org 網頁編寫者自己造成的問題。

看了一下「使用條款」:


首頁沒有寫明網站名稱已經是個大錯誤(標題是空白的,內文也沒寫),再看過「關於本站」(或是「關於我們」)「使用條款」之後,會發現有嚴重「名不正」的問題,也就是上面為什麼會寫出「讓你紅工具網」或是「爆紅工具網」或是「網路爆紅工具網」三種名稱的原因,這是網站及網路行銷的大忌,是絕對不該犯的錯誤。

請搜尋下頁中的笨點在哪裡:


找到了嗎?我絕對不是在說這簡介是笨點喔。

最後,把「讓你紅工具網」和「黑白網站庫」的網址丟到 pagerank checker 看看,順便查一下 whois 的記錄:

Domain Name:BETA20.ORG
Created On:20-Oct-2008 07:04:06 UTC


Domain Name: BLACKWHITEWEB.COM
Created on: 26-Nov-08

兩個都註冊超過一個月的網站,雖然 Google 沒有公開 pagerank 的更新週期,可是這兩個網站在這個時間點(2009/01/16)竟然 pagerank 還是 0,對於網站行銷來說完全是個失敗的範例,想要透過這兩個網站來行銷網站,以 pagerank 0 來說,大概等於是沒用吧。

有圖有真相,下面兩張圖片是證明 Google 已經有造訪過這兩個網站:


Monday, March 24, 2008

未支援分頁瀏覽的 PChome 24h 購物

今天本來想買個硬碟用的3.5吋外接盒,連上去找了一下....


圖一:產品的圖和文都是執行javascript做換頁。


圖二:五個相似產品。不過左邊的排行榜是用<a> tag做換頁。

現在已經是IE都有分頁瀏覽(tabbed browsing)的時代了,竟然還會看到這種用javascript換頁的設計。更加鳥蛋的是,這還不是開一個新視窗來看詳細產品內容的javascript,而只是做個href的動作重導到指定的網頁去。

商品無論大小圖和文字的連結都是這個 javascript的指令,結果導致我想要一次點出五個相似的商品來做比較,卻得多手多腳多弄幾次才能把這五個商品都開出來,真是讓人不愉快。

--
之前講過遊戲基地(Gamebase)購物區的狀況,目前已經沒用javascript來做跳頁的設計了。

Sunday, January 20, 2008

興奇購物網結帳程序中, 填寫資料的問題

這是跟聯合新聞網合作的興奇購物網,以超商取貨付款的方式來結帳。


咦?都已經是超商取貨付款了,為什麼還要我填身分證字號?姓名和手機電話還不夠用來確認是取貨者本人嗎?會不會是便利商店系統要求的呢?來看看另一家網路購物的系統....

這是博客來系統的結帳畫面:


同樣是便利商店取貨付現的方式,卻不像興奇購物網那樣「一定」要填寫身分證字號才讓訂單通過,所以很明顯「身分證字號」不是便利商店系統要求要有的資料。

再來看看興奇購物網的隱私權政策說明:


我看不出來身分證字號跟「興奇科技確保僅為履行訂單及行銷之目的使用消費者的資料」有什麼關係,更何況「我們絕不會將您的個人資料提供予任何與本購物網站服務無關之第三人」並沒有積極保護個人資料的意思。

那麼,為什麼這個購物網站一定要取得訂購者的身分證字號呢?

Thursday, December 27, 2007

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

這裡不是「白木怡言」部落格。 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. 寫這個部落格程式的人,趕快去把程式輸入檢查做好。(謎)

Tuesday, September 04, 2007

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

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


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

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


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


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

Monday, September 03, 2007

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

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


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


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


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


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


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

--
這是一個很明顯的沒用網頁範例。
  1. 標題記得要放完整。
  2. 網站要能讓搜尋引擎找得到。
  3. 網站請放在網路穩定的地方,動不動就連不上或是查不到網址是怎樣。
做這種網站有什麼怕人知道的啊..... -_-