阿呆看世界

關於CSS HACK的一些建議

2011-05-15T01:23:00.000-07:00

padding-left:5px;padding-left:0\9;*padding-left:5px;

前幾天在社團貼了這段code，一直沒時間好好把它寫完，趁現在沒事要忙來寫一下說明好了。這個狀況是發生在修改同事完成的頁面，姑且把它定義成區塊偏移了5px，在大部分瀏覽器都在他該在的地方，可是有個瀏覽器就是與眾不同，更有趣的是還自己跟自己不同，你應該知道我說哪個吧，不知道的話這篇文章就不用往下看囉。

這個特殊偏移現象只會發生在IE8，IE7不會偏移，至於IE6已經埋在土裡就不考慮了。padding-left:5px;是給所有瀏覽器看的，但IE8硬是多出5px，這時候已經不是去問這是誰寫的問題了，得先解決再說，所以就加了這一行padding-left:0\9;只有IE才看的懂的code，可是這樣會出問題啊，IE7是正常的怎麼辦?於是又多了這行*padding-left:5px;，因為這行code只有IE7看的懂，於是皆大歡喜，可是重點在哪?

重點在順序，一定要由大到小排列，IE8，IE7，IE6。為什麼順序重要，因為串接的關係，越後面出現的權限越大，如果對調順序會造成後面的值覆蓋掉前面的值，這樣會很難發現錯誤，明明程式碼都是正確的，畫面卻完全沒有任何改變，所以才要提醒大家在設定時要注意優先順序。

這樣的問題如果事先有做好瀏覽器的 Reset 通常是不會發生的，我非常少用到HACK的方法，但救急很好用，遇到這樣的問題通常會先跟視覺溝通取得一個較好的呈現方式，不是只能用HACK來解決問題，但如果非用不可就用吧。

如何讓表單更友善

2011-05-03T23:02:00.000-07:00

如何讓表單更友善

當用戶按下送出表單卻出現錯誤時，表示你的表單設計出問題了。

構成表單的三個主要元件:

標籤：欄位名稱，姓名，密碼，電子郵件等
欄位：一個輸入框應標示為必填或非必填，通常以星號（*）為提示符號。
提示：幫助提示功能，給用戶更多的提示關於如何格式化他們的信息。例如，一個幫助提示會告訴用戶什麼密碼要求是：（如下圖所示）。

1.明確標示必填欄位

2.提供明確的錯誤訊息

Yahoo

Gowalla

常用驗證用戶輸入資料方式:

Server-side Validation :資料送出後於伺服器端驗證用戶輸入資料是否正確，如錯誤返回錯誤訊息。
Client-side Validation :資料送出後於客戶(用戶)端驗證用戶輸入資料是否正確，如錯誤返回錯誤訊息。
Real-time Validation :資料透過AJAX直接對伺服器端做驗證，用戶不需送出資料才確認資料的正確性，即時查詢可減少用戶錯誤發生次數，提供更好的用戶體驗。

3.使用客戶端（JavaScript）的資料格式驗證

live validation

4.聚焦表單域視覺風格，讓使用者知道他們在哪裡(底色，加粗框)

wufoo

5.明確顯示完成進度(多頁表單)

如需完成表單分成多個頁面，須明確告知用戶表單頁數及目前完成進度。

ex:Groupon : 有趣的註冊流程

6.記憶/暫存表單資料

用戶在完成表單送出後如有錯誤會將用戶帶回未完成表單，不要讓用戶重新填寫已完成欄位，須將原有已完成資料自動填入。

7.明確定義送出按鈕

讓用戶清楚的知道點擊按鈕後代表的意義，而不是所有按鈕都叫完成或送出。

8.提供取消按鈕前要想清楚

提供用戶取消按鈕須是先確認需求，就購物結帳流程來看，當用戶完成每個結帳步驟表示已確認購物，提供一個讓用戶反悔的按鈕是不是個正確的選擇?

9.顯示用戶正確的資料輸入格式(2011/04/28 0938-123456)

csskarma
Apple : 用戶點擊輸入框提示字元不會消失，如果用戶填表過程暫時離開，回來後還是可以繼續完成未完成表單。

10.確認表單動線

表單動線須一致，這樣可降低用戶填寫表單的困擾，也可讓用戶更專注於完成表單，能有效減少填表錯誤。

iPhone Web App Supported Meta Tags

2011-04-21T02:48:00.000-07:00

iPhone Supported Meta Tags

viewport
<meta name = "viewport" content = "width = device-width, initial-scale = 1.0, user-scalable = no">

開發者決定手持裝置的縮放比例設定
- width=device-width 定義手持式裝置網頁寬度。設定成device-width可讓瀏覽器自行判斷手持式裝置寬度，也可以直接設定大小，如width=320。
- initial-scale 畫面是以多少倍的 viewport 來顯示
- minimum-scale 畫面縮小倍率限制。
- maximum-scale 畫面放大倍率限制。: 0 < user-scalable < 10.0，預設值0.25。
- user-scalable 是否允許放大或縮小視窗(預設為YES)。
apple-mobile-web-app-capable
<meta name="apple-mobile-web-app-capable" content="yes">

定義用戶是否將視窗啟用為全螢幕模式，用戶可透過新增書籤將網頁連結新增為一個桌面ICON，這樣用戶在啟動時就不會出線瀏覽器的上下選單，畫面看起來就像一個App
apple-mobile-web-app-status-bar-style
設定iPhone狀態列的顏色
<meta name="apple-mobile-web-app-status-bar-style" content="black">
- default:灰色
- black:黑色
- black-translucent:黑色半透明(不建議使用)
format-detection
啟用或關閉瀏覽器自動偵測，如將電話自動轉換為連結
<meta name="format-detection" content="telephone=no">
apple-touch-icon
設定桌面ICON圖片(57px x 57px)
<link rel="apple-touch-icon" href="img/troie_icon.png" />
<link rel="apple-touch-icon-precomposed" href="img/troie_icon.png" />
apple-touch-startup-image
載入網頁時的等待畫面(320px x 460px)
<link rel="apple-touch-startup-image" href="img/wait.png">

神奇的藍色筆芯

2011-04-16T02:26:00.000-07:00

Step 01 首先用藍色筆描繪出你想畫的東西。

Step 02 用顏色較深的筆(2B)描繪邊框，然後掃描或用相機拍下來。

Step 03 用Photoshop開啟圖檔

Image -> Adjustments -> Black & White(中文版自己猜吧)

Step 04 濾除藍色草繪線條

Preset 下拉選單選擇 Blue Filter

Step 05 完美的手繪框線完成

Finish

Where are you come from?

2010-10-19T01:56:00.000-07:00

When....

發了10000封eDM有多少人點擊?
張貼在Facebook的連結是不是有效?
廣告貼在yahoo還是google好?
花錢請部落客推文效益如何?

How ....

Click Me 然後照下面的說明填入資料

有了連結就可以貼到任何你想(該)貼的地方

Then...

「使用者經驗設計」系列之四：以系統化方法評估設計的易用性

2010-09-12T01:32:00.000-07:00

第一場由交通大學傳播研究所李峻德副教授主講，非常專業的解說，只是跟現實環境不符，李教授也提到很多理論跟實際要面對的問題會有所衝突，既然理論無法解決或解釋現有環境的問題是不是該檢討理論本身是錯誤的，如果把現實因素排除不考慮這樣得出的結果是不是正確，答案的正確性是不是會嚴重偏離呢?

第二場由神達電腦行動通訊部門人機介面處使用者經驗研究員王秀娟主講，提到非常多現實環境在操作使用者研究會遇到的問題，也看出目前業界不重視使用者的心態，我們總是抱著有做總比沒做好，這是個不錯的想法，偏離幾個百分點是可以接受的，但如果這幾個百分點就是跟其他品牌的差距呢?A是個不錯的選擇，只是A+更好。

[iSearch 愛搜尋] SEO同好會會後心得

2010-05-31T05:59:00.000-07:00

很精采的一場活動。小小的場地上演了一場精采的SEO秀，感謝awoo用心舉辦這樣的活動，每個小細節都做的很好，下次可能要用搶的了，不過聽說寫心得就能取得參加資格，我也來用心一下囉。

SEO+UEO的完美結合-SEO領袖awoo 林思吾(Jose)

阿物國際總經理Jose精采的開場，從不同角度分析讓與會者對SEO及UEO有了初步的認知，原本以為只會談到皮毛，但Jose的大方分享值得給他一個最熱烈的掌聲，不只談理論，連如何實作都毫不保留的分享，精采的數字分析，淺顯易懂的案例解說，本來對SEO一知半解的人相信經過這次活動會有更深入的體會。

頂尖網管人食夢黑膜分享他看到的SEO世界

從不同的工作層面來解讀該如何參予SEO，直接點出SEO不是一個人或一個TEAM可以獨立完成的，必須是不同部門分工合作的結晶。分享中提到一個很重要卻常常被忽略的觀念，好的SEO是建構在WSO之上，沒有WSO，SEO只是空談。後段提供了一些未來趨勢分析及如何使用工具來讓SEO更加完善。

SEO硬是要做的10件事情與3個SEO大撇步-王國連(Mr.King)

從網站架構的底層開始分析做好SEO該完成哪些工作，可惜的是時間太短無法做更詳細的說明，提到一些比較技術面的方法，無法做一些簡單的DEMO，不過與會者大部分都不是技術人員，應該不用做到這麼詳盡的解說。很簡單的帶過一些重要的技術，礙於時間限制也只能這樣囉。

Sorting Study現場帶您一起動手做-awoo廖玟珊(Ingrid)

這是今天唯一的收穫，並不是前面的講者講的不好，每個都非常精采，對一個想進一步了解SEO的人來說。我不是個初學者，所以只要能學會一點東西就該滿足了。Ingrid透過詳細的解說讓與會者了解何謂Card Sorting，很久以前就瞭解這個方法，只是一直沒有機會實作，透過這次會議的實作過程讓我對Card Sorting有了更完整的認知，也更清楚在一個網站規劃或改版時運用的時間點。順便提供一個我發現的小問題，我不知道其他組是不是有相同問題，也許是太趕了，活動一開始大家都是一臉疑惑不知道該怎麼做，應該是有點趕所以大家還沒反應過來吧，這是我看的的狀況，提供參考囉。

對這次活動想更清楚的了解請點擊這個連結
http://blog.awoo.com.tw/2010/05/isearch-report/

你真的清楚按下同意代表的意義嗎

2010-03-23T09:33:00.000-07:00

今天看到一個常逛的粉絲專頁舉辦投票活動，想説點進去看看，既然是朋友辦的活動當然要捧場囉，卻發現一個值得探討的現象，看完這篇文章不知道你還會不會點下"同意"。

我必須先說明網站企劃是個很棒的粉絲專頁，請不要誤會了，我非常推薦對網站企劃有興趣的一定要加入，有問題的是這個活動程序。下面這張圖是活動說明，我當然是樂意參予活動囉，理所當然點了投票

問題來了，我必須允許投票箱存取代表你同意該程式取得你的個人檔案、相片、朋友以及其他相關所需資料，注意喔，是投票箱，不是網站企劃，先繼續往下看

有沒有發現什麼地方怪怪的，應用程式多了一個投票箱，代表什麼?代表它能存取你的個人資料。

因為信任網站企劃粉絲專頁所以按下同意，但"投票箱"是一個Facebook的AP，兩個應該不能畫上等號吧，可是當你因為信任網站企劃而按下同意時代表你同意投票箱存取你的"個資"喔，這樣是不是會有很大的問題呢?

這個活動因為我的多事已經暫時停止了，最後還是要強調網站企劃是個很認真經營的粉絲專頁，我相信也會有其他粉絲專頁遇到相同的情形，所以，下次在按下同意按鈕時請記得先確認再按啊。

很差的線上購物經驗-YAHOO購物中心

2010-03-01T03:12:00.000-08:00

阿姨想買個用途不明的主機架，很認真的上網搜尋了半天，選好之後卻不知道要怎麼購買，你可以說她不會用，但購物網站可以把這當成藉口嗎?線上購物還需要看說明書那不是註定會失敗嗎?

這個神聖的任務最後就落到我頭上啦，其實已經先幫阿姨看過，因為太麻煩建議她直接去商場購買，誰知她堅持要線上購買只好幫她下單了，還真的不是普通難用，我們還要忍受這樣的爛服務多久呢?接下來看看我的購買過程吧。

注意超商付款是可連結的，ATM不行，我可以解釋成可以超商付款嗎?如果不行是不是不該出現呢?接下來點我要購買進入下一步。
超商付款有一個很重要的限制必須要購買金額500以上，2000以下。

當選擇我要購買後會出現上面這張圖，299不符合超商付款的條件是不是不該出現這個選項，這裡並沒有，你還是可以選擇，只是當你按下下一步之後會出現上面那段提示。有趣的是你可以選擇確定繼續使用超商付款(不是低於500嗎)或取消選擇其他方式(一開始就關閉不合的條件選項是不是就能省掉這個步驟)

Q1.網站很貼心的幫我帶入姓名，但我登記的是英文，當我送出後彈出一段有趣的文字限用中文，如果上面的提示是請填中文全名是不是能減少這個問題
Q2.身分證字號?!!買東西要查驗我的身分?!
Q3.手機跟市內電話都是必填，是不是該做詳細的提示，而不是按下送出才出現提示。規劃上也不該是必填，使用者只需要提供一組能聯絡的電話，多填壹個字對使用者都是麻煩。
必填項目未作明確提示。

又提醒我一次未滿500不能使用超商付款，然後很好心的提供我ATM轉帳帳號@#$%^&*()

有些事情如果經過思考可以做的更好，工程師可以說企劃沒寫出這些規則，企劃可以推說這些基本的規則工程師應該知道，不管是誰的責任，但多個人用心是不是能提供更好的使用者體驗。

一隻滑鼠搞定Chrome(chrome-mouse-stroke)

2010-02-22T00:54:00.000-08:00

如果你是Chrome的愛用者，這個好用的擴充工具絕對不能錯過。

Chrome Mouse Stroke(以下簡稱CMS)是一個利用滑鼠拖拉放來操作你的Chrome瀏覽器的擴充工具，習慣使用Firefox的使用者應該很熟悉，操作方式幾乎不需要學習，"安裝"然後"使用"完全無障礙。

CMS是用來做什麼呢?簡單說就是讓瀏覽器操作變的更容易，讓我們在上網常做的動作只要一支滑鼠就能搞定，上一頁，下一頁，開新分頁，關閉分頁，重新整理....這些工作都只要用"畫"的就能完成(如下圖)。

注意:您的Chrome瀏覽器必須是4.0以上版本，否則無法使用擴充功能。(下載最新版本)

開始安裝Chrome Mouse Stroke

下載CMS(http://code.google.com/p/chrome-mouse-stroke/)

點擊下載後瀏覽器左下角會出現一行文字擴充功能及主題可能損害您的電腦，確定要繼續?請按繼續，接下來會出現一個警告視窗您要安裝"Mouse Stroke"嗎?請選擇安裝，這樣安裝部份就完成了。
用過firefox的用戶重新啟動就可以使用了，沒用過的可以看看設定選項會有詳細的使用說明，不過是英文版(有中文版本等完成確認後再來更新)，操作方法如下圖
1. 點選右上角鈑手圖示
2. 選擇擴充功能(Extensions)
點選選項(options)按鈕
CMS操作說明

使用說明:按下滑鼠右鍵後依照下列常用指令拖拉滑鼠，完成後放開按鈕(L:向左，R:向右，U:向上，D:向下)
- 頁首:L U
- 頁尾:L D
- 上一頁:L
- 下一頁:R
- 上一個分頁:U L
- 下一個分頁:U R
- 回首頁:D U
- 頁面重新整理:U D
- 連結開啟新分頁:在連結上按下滑鼠右鍵 U
- 關閉分頁:D R
以上為常用功能說明，如需更詳細使用方式請參考選項說明頁。

LU30的第一次

2010-02-05T02:36:00.000-08:00

光看大綱我就覺得賺到了，以前都是幫別人上課，總算可以當學生了，哈哈

Axure RP Pro
主講人:李一詩比比王網站專案經理

課程大綱:

各種網頁元件的使用說明，例如圖片、文字區塊、按鈕、功能區塊、表格、資料表單的各種輸入元件等等
滑鼠點擊、移入、移出等互動效果的設定
各種互動效果範例實作，包括頁籤切換、月曆面板、照片左右捲動、自動完成、區塊展開與消失、多層次選單、連動的下拉式選單、LightBox等等
將共用模組或區塊放入各頁面中
加上區塊的註解
設定邏輯條件，以會員已登入、未登入為例，呈現不同頁面內容
問答

是不是跟我一樣覺得賺到了呢，所以這麼精彩的內容應該輪不到我獻醜啦，不過我還是會準備我該準備的內容

(暫定)
主題 : MVC細蝦密
主講人:我
豐功偉業:哪有那種東西啊

PS.如果時間不夠我會調整為工作必會的十大秘器(隨便說說的不知道是不是有十大)

什麼是MVC
怎樣的情況需要用MVC開發
為什麼要用MVC
了解MVC的好處

地圖如果怕找不到就把地圖左上角的黃色小人拖到箭頭指的地方，這樣就會有大神為你帶路了，時間是兩點到五點(可延長一小時)，費用是一百五，這是場地飲料費啊，我沒拿回扣喔，可以選兩杯飲料還會有一盤小點心，想用餐的話是兩百五，主餐之外還有飲料跟點心，還有任何疑問再留言給我吧。

果子咖啡

HP3會後心得 (網站企劃輕鬆聚第三次活動)

2010-01-14T00:58:00.000-08:00

會不會發文後下次不讓我參加呢，雖然有點失望還是很開心能參加這場聚會。

失望是因為我是為了想聽聽User Friendly才去的，可是沒聽到什麼東西，倒是結尾大河馬的分享給我大大的驚喜，老實說我沒注意到這場主題。

提供一些經驗分享"運用調查，提升網站使用者體驗"提到的使用著經驗分析其實有更好的方式，旁觀其實不是很好的方式，一般會用眼球分析或告知使用者然後錄影後分析使用者使用行為，旁觀會影響使用者而且無法取得正確數據，譬如停留時間。

「念心理系的人怎麼會來做網站企劃？」很高興台灣有公司這麼做了，將來更有希望了。就我所知GOOGLE有很多人類學跟歷史學家，韓國三星會送員工出國參加各式各樣的訓練其實為的都是從不同角度來了解需求，我們只是走的有點慢，不過我相信國內比較大的公司應該都已經這樣做了。

最後還是感謝講者分享親身體驗，只要有收穫就很開心，認識新朋友也是很大的收穫，可是我只認識一個，有點可惜，下次要加油。

何謂Chrome OS?

2009-12-10T20:03:00.000-08:00

前幾天參加GTUG讀書會，特別請來Google Chrome OS開發團隊的工程師講解何謂Chrome OS，目前Chrome OS能做些什麼以及未來發展方向。

一起來玩Google Chrome Extensions

2009-12-07T02:03:00.000-08:00

如何擴充Google Chrome的功能

不知道大家是不是有跟我一樣經驗。在開發網路應用程式我都用Firefox來測試開發，說它是最好用的瀏覽器也不為過，它可以依不同需求提供很多小工具，用過就很難再回頭去用那個爛IE了。等到Chrome出來後偶爾會用用，速度快就不用說了(那麼簡單的介面不快就很奇怪了)，可是用久了會上癮，變成不喜歡用Firefox了，習慣Chrome快速跟簡單的操作方式，只是要當成開發測試環境就有點功能不足了，如果只是上上網Chrome會是一個很好選擇。

回到正題，Chrome也要開始提供小工具囉，雖然只是起步還什麼都沒有，但相信不用多久就會有很多很棒的擴充套件可以安裝了。下面就透過一個簡單的範例讓大家了解如何製作Chrome Extensions。

開始之前請先更新你的Chrome瀏覽器，你必須安裝DEV版本才能安裝寫好的Extensions，先檢查你的瀏覽器，點選右上角的圖示，如果已經有Extensions這個選項就是DEV版本了，找不到的話請至Dev Channel下載更新版本。
準備開始囉，要用什麼方式開發呢，只要會HTML，CSS，JavaScript你就可以開發Chrome Extensions了，不需要什麼困難的程式語言。

這個小範例是抓取flickr的照片
首先建立一個Extensions存放資料夾，例:c:/extensions

Extensions包含哪些檔案
- 描述檔(manifest.json)
- HTML(背景執行的Extensions不需要)
- JavaScript檔(非必需)
- 其他檔案，如images(非必需)

描述檔(manifest.json)

{
"name": "My First Extension",
"version": "1.0",
"description": "The first extension that I made.",
"browser_action": {
"default_icon": "flickr.png",
"popup": "popup.html"
},
"permissions": [
"http://api.flickr.com/"
]
}

準備一個小圖檔(瀏覽器按鈕圖示)，將檔案複製到同一個資料夾，注意檔名要跟manifest.json檔的default_icon相同(粗體字)"default_icon": "flickr.png"，如不同請修改檔名。

popup.html

<style>
body {
min-width:357px;
overflow-x:hidden;
}

img {
margin:5px;
border:2px solid black;
vertical-align:middle;
width:75px;
height:75px;
}
</style>

<script>
var req = new XMLHttpRequest();
req.open(
"GET",
"http://api.flickr.com/services/rest/?" +
"method=flickr.photos.search&" +
"api_key=90485e931f687a9b9c2a66bf58a3861a&" +
"text=hello%20world&" +
"safe_search=1&" +  // 1 is "safe"
"content_type=1&" +  // 1 is "photos only"
"sort=relevance&" +  // another good one is "interestingness-desc"
"per_page=20",
true);
req.onload = showPhotos;
req.send(null);

function showPhotos() {
var photos = req.responseXML.getElementsByTagName("photo");

for (var i = 0, photo; photo = photos[i]; i++) {
var img = document.createElement("image");
img.src = constructImageURL(photo);
document.body.appendChild(img);
}
}

// See: http://www.flickr.com/services/api/misc.urls.html
function constructImageURL(photo) {
return "http://farm" + photo.getAttribute("farm") +
".static.flickr.com/" + photo.getAttribute("server") +
"/" + photo.getAttribute("id") +
"_" + photo.getAttribute("secret") +
"_s.jpg";
}
</script>

啟用你的Extensions

點選右上角的圖示，然後開啟Extensions

點選Load uupacked extension後找到存放完成的Extensions資料夾，確定，完成。
這只是一個很簡單的範例，先玩玩看吧。需要更詳細的資料請至Google Chrome Extensions

What is Google wave

2009-12-06T03:59:00.000-08:00

最近好不容易取得Google wave帳號，玩了幾天想說寫個說明跟大家分享我的使用心得。到底Google wave是什麼東西，又提供哪些功能?現在先看看就好，目前還是測試版，可能會增加很多新功能，也可能會有某些功能在正式上線會消失，開始試玩看看就知道囉。

簡單說Google wave包含所有即時通訊的功能(MSN，Yahoo即時通，GTalk等)，另外也整合了MAIL所提供的服務，我們可以想像成將即時通訊功能最大化，也就是GOOGLE將平常會用到的線上工具整合到Google wave，你不再需要安裝任何軟體，只要有瀏覽器就能使用。

目前還看不出他想提供怎樣的服務，也許GOOGLE也還在摸索，先釋出測試版讓大家幫他找答案。使用上其實有點複雜，對一般使用者來說會有點困難，不是自己摸索就能輕易上手，想普及到一般使用者可能還需要做很大的調整。

Google Wave使用說明

左上角那個區塊是wave(可想像成mail的管理分類區)的管理區

左下角是聯絡人管理區塊

中間那一大塊會顯示所有的wave

點選任何一則wave會將詳細內容顯示在右邊的大區塊

什麼是Wave?

你可以想像成一封email或一次聊天記錄，可以是一筆個人紀錄也可以是多人共同討論會議。事先訂好主題，參予討論的人可以隨時加入討論，方法很簡單，只要將右下角通訊錄的名單拖拉進這筆wave即可。討論過程會被記錄下來，後面才加入討論的人可以像播放影片的方式來了解整個討論的過程，在過程中可隨時加入你的想法或意見。另外討論進行中有任何檔案或文件需要分享只要將它拖拉進來就可以。

待續....

目前還有一些帳號，想玩看看的歡迎留下你的MAIL帳號

阿呆看世界

關於CSS HACK的一些建議

padding-left:5px;padding-left:0\9;*padding-left:5px;

如何讓表單更友善

如何讓表單更友善

構成表單的三個主要元件:

1.明確標示必填欄位

2.提供明確的錯誤訊息

常用驗證用戶輸入資料方式:

3.使用客戶端（JavaScript）的資料格式驗證

4.聚焦表單域視覺風格，讓使用者知道他們在哪裡(底色，加粗框)

5.明確顯示完成進度(多頁表單)

6.記憶/暫存表單資料

7.明確定義送出按鈕

8.提供取消按鈕前要想清楚

9.顯示用戶正確的資料輸入格式(2011/04/28 0938-123456)

10.確認表單動線

iPhone Web App Supported Meta Tags

iPhone Supported Meta Tags

viewport

apple-mobile-web-app-capable

apple-mobile-web-app-status-bar-style

format-detection

apple-touch-icon

apple-touch-startup-image

神奇的藍色筆芯

Step 01 首先用藍色筆描繪出你想畫的東西。

Step 02 用顏色較深的筆(2B)描繪邊框，然後掃描或用相機拍下來。

Step 03 用Photoshop開啟圖檔

Step 04 濾除藍色草繪線條

Step 05 完美的手繪框線完成

Finish

Where are you come from?

When....

How ....

Then...

「使用者經驗設計」系列之四：以系統化方法評估設計的易用性

[iSearch 愛搜尋] SEO同好會會後心得

SEO+UEO的完美結合-SEO領袖awoo 林思吾(Jose)

頂尖網管人食夢黑膜分享他看到的SEO世界

SEO硬是要做的10件事情與3個SEO大撇步-王國連(Mr.King)

Sorting Study現場帶您一起動手做-awoo廖玟珊(Ingrid)

你真的清楚按下同意代表的意義嗎

很差的線上購物經驗-YAHOO購物中心

一隻滑鼠搞定Chrome(chrome-mouse-stroke)

注意:您的Chrome瀏覽器必須是4.0以上版本，否則無法使用擴充功能。(下載最新版本)

開始安裝Chrome Mouse Stroke

LU30的第一次

HP3會後心得 (網站企劃輕鬆聚第三次活動)

何謂Chrome OS?

一起來玩Google Chrome Extensions

如何擴充Google Chrome的功能

Extensions包含哪些檔案

描述檔(manifest.json)

啟用你的Extensions

What is Google wave

Google Wave使用說明

什麼是Wave?