迅猛龍 袁艾菲 膝上襪

Read more

UiGathering Talk

這個月UiGathering的主題，光看到ppt我就整個熱血起來，這個才是真的有價值的東西阿!!! 下次要來參加一下了。

UiGathering Talk - Motion User Interface / by Ivan Wei

View more presentations from uigathering

UiGathering Talk - Masters of visualization / by Allen Chan

View more presentations from uigathering

Devils in the Detail!!

Read more

jQuery-使用Validation來驗證表單

在製作網站的時候常常會有機會用到驗證使用者輸入資料的時候，比方說請他輸入數字，你要知道他是不是有輸入非數字的字員，請他輸入email，他有沒有照email的格式來輸入，資料輸入錯誤，都會造成取得資料上的困擾，於是就必須要靠javascript來做一些資料驗證的動作，讓資料送出去時，確保起碼的正確性，但其實要做資料的驗證也是頗麻煩的一件事，加上如果發現他資料輸入錯誤，又要出現提示錯誤的訊息，每次都要重做一次就會顯得很麻煩，但我們可以使用jQuery的外掛Validation來簡單的做到驗證資料的功能。

當然首先請到官網去下載外掛，並在網頁中引入外掛的js檔。

Read more

CSS3 Media Queries

CSS3 Media Queries

View more presentations from Russ Weakley

行動裝置的普及，可以使用CSS3 Media Queries來達成每個device的顯示都能正常呈現，雖然還沒有正式確定規則。不過還是可以先使用看看。

介紹:
Media Queries 與 CSS
W3C文件

Read more

php資料庫連結

因為很常用，所以記錄一下。

<?
//資料庫連結
$link=mysql_connect("主機url", "帳號", "密碼");
if(!$link)die("建立資料庫連結失敗");
//設定語系，這邊有設定就不會出現亂碼
mysql_query("SET CHARACTER 'UTF8'", $link);
開啟資料庫
$db_slected=mysql_select_db("資料庫名稱", $link);
if(!db_selected)die("開啟資料庫失敗");
//SQL命令
$sql="select no, name, address, hobby from data order by no DESC";
$result=mysql_query($sql,$link);
if(!result)die("執行SQL命令失敗");
?>

Read more

Get out of here, and change the world!

昨天去參加HP23的活動，算算我可是從HP3參加到現在，參加HP的人也從最開始30個左右，到現在每場都一百多個起跳，我也是因為這個活動而認識了許多的朋友，還有開始了解到什麼是UE那些東西，那些是很大的學問。參與人來自各種不同背景，對同一件事情，出發點不同，看法就很不一樣，可能他的工作是行銷，可能是網站企劃，也有像我這樣的美工人，或技術人在裡面，因為這個世界很大，才更應該時時謙虛。

昨天因為在趕一個計畫，所以一邊工作一邊聽台上的人分享，其實這場很精彩，但我沒辦法好好仔細聽，不過一個講者說到他求學時教授的一句話"Get out of here, and change the world!" ，可是引起了我的共鳴，我一直覺得年輕人應該做些事情去改變這個世界，我也認識不少年紀比我大一截的人，也一直試著在改變著這個世界，因為人生很短，去做自己喜歡的事情，還有什麼好猶豫的，Just do it!

而今天組長帶我去跟所長見面，雖然被劈哩啪啦刮了半個小時，不過我覺得很開心，因為所長說的是我不知道什麼叫Usability，代表他重視這一塊，技術以上，就是要像有這樣的知識，才有辦法做出好的產品，也讓我知道光是參加一些UI/UE的聚會，不見得就代表我就了解那些東西。我也相信我強的是實務經驗，可是實務強不見得就比較好，相對的理論強而不會實作也不好，如果這樣讓我可以好好的去研究這些東西，我覺得這會是讓我覺得非常棒的一件事。

因為google Usability，讓我找到這個vgod's blog，這世界的神人太多，請記得要持續努力。

Read more

jQuery-UI Sortable

如果用過一些相簿服務，比方facebook，你想要去改變相簿裡相片的順序，你可以很直覺的直接拖曳相片，這樣就可以改變相簿裡相片的順序，因為最近想做類似這樣的功能，於是去找了外掛，發現jQuery UI的Sortable就可以實踐了。

照著頁面的說明設定一下就可以了，差別是範例是垂直的，而facebook的相簿是一個區塊一個區塊，而且會換行，不過只要在block內下float:left ，讓區塊自動排列，之後再加上sortable就可以做到拖曳排序的功能了。

看看範例

Read more

jQuery Plusin-farbtastic

在網頁上呈現顏色，必須要使用16進制數字的表示來代表各個顏色，這跟我們一般認知的紅色、黃色...等文字表示顏色有很大的不同，所以在photoshop有顏色選擇器可以讓使用者用是決選出自己喜歡的顏色，而如果想要在網頁上也有一樣的效果，就可以使用farbtastic這個外掛。

先從上面的網址去下載外掛，然後依規則使用外掛，就可以達成效果了。

首先把外掛跟css引入，記得圖片也要放上去同一個資料夾。
<script src="farbtastic.js" type="text/javascript">
</script>
<link href="farbtastic.css" rel="stylesheet" type="text/css"></link>
然後依下面的規則建立元件。
<form><input type="text" id="color" name="color" value="#123456" /></form>
<div id="colorpicker"></div>

最後再在jquery裡把外掛指定給特定元素。
<script type="text/javascript">
$(document).ready(function() {
$('#colorpicker').farbtastic('#color');
});
</script>
然後就可以很簡單的使用這個外掛了，更詳細的說明可以到官網去看看。

範例

Read more

CSS Hack

只要是網頁設計師，就沒辦法避免碰到IE的惡夢，網路上也有提供一些CSS Hack的方法，讓設計師可以解決IE不聽話的問題。

基本上用的方法是使用IE瀏覽器會認的一些符號，而其他瀏覽器認不出來的方式去做CSS Hack的動作。
color: red; /* all browsers, of course */
color : green\9; /* IE8 and below */
*color : yellow; /* IE7 and below */
_color : orange; /* IE6 */
像這樣照順序，在CSS前面加個符號就可以做到CSS Hack了。

另外也可以使用html去辨識IE的版本來做分辨CSS的動作。
<!--[if lt IE 7]>
IE6 才會執行
<![endif]-->
<!--[if IE]>
IE 才會執行
<![endif]-->
<!--[if gte IE 8]>
IE8以上(包含IE8)才會
<![endif]-->
<!--[if !IE]>-->
<>使用的瀏覽器不是IE 。</>
<!--<![endif]-->

祝大家使用愉快。

參考資料

Read more

你一定要懂技術

從去年我朋友一句"我會讓你有接不完的案子"，我就從那時候忙到現在了，當然忙得不只是外面的案子，老實說我不是很想過著只是接案的生活，接案的目的很多時候對我而言還是能夠練到技術是最好的，我也從這些案子裡確實經進了我的技術。

手邊好幾個計畫在跑，大概過一陣子就可以一個一個把成品給丟上來了，無中生有實在是人生最快樂的事情。其實從工作後就開始有創業的打算，那時候也跟過好幾個team想過創業的點子，不過後來要不是team沒有向前衝的動力，不然就是技術還不純熟，就一直沒有做出什麼東西出來，最近大概是該練的功也差不多了，身邊的夥伴也越來越強了，於是想要一個服務，就可以用比較快的速度把他產生出來，我都相信只有技術到一定程度，去談創意才有價值，如果你沒有夠好的技術，永遠都只能看著你的"創意"變成別人實作出來的作品。

所以你一定要懂技術，技術的範圍當然很廣，以我想做的網路來說，你想架網站，你就要懂怎麼處理主機那方面的事情，怎麼去寫程式，怎麼去做美工，怎麼去寫好一個好的網站架構，以及怎麼去做出一個好的使用者經驗的網站，這個絕對不會是用DW或PS拉一拉就可以拉出來的東西，如果你不去追求一些應該要有的技能，等發生問題的時候你永遠不會知道為什麼。

為什麼你要懂技術? "因為工程師很便宜阿"，我看過很多人總是說"我有一個點子，我希望可以找到好的美工跟工程師來做出我想要的東西，到時候我們再來一起賺錢"，可是真的找到好的工程師跟美工，就可以做出你想要的東西嗎? 我想這個想法有很大的可能性會出問題。

第一是：你怎麼知道這個工程師或美工是好或不好? 如果你不懂技術，不管是美工或程式都一樣，你根本就沒辦法判斷這個美工或工程師的能力好或不好，如果找來的只是一個可以講出一口"專業"的工程師，那麼那個工程師只能讓你一直燒錢，你卻不知道為什麼他做不出好東西。

第二是，開發產品的過程中，有太多時候你必須去做一個Pivot的動作，如果你沒有好的技術背景，沒辦法去判斷是不是該轉換前進方向，就只能注定繼續走錯誤的路。這點你請的工程師不見得會告訴你，因為他可能只是一個工程師，又或者他沒義務告訴你這些事。

所以技術真的很重要，我尊敬每一個努力在追求技術的人。

Read more

jQuery UI-Dialog

之前用jQuery UI做了一個drag的視窗，可是後來在測的時候才發現問題，本來想自己把draggable改得更好一些，問了同事才發現有更好用的dialog，我以前把dialog想的太簡單了，以為他只是單純的彈出視窗，現在把他整進來後就變得更強了。

dialog強就強在他整合了draggable跟resizable，當然你也可以單純使用draggable或resizable，而如果想一起使用的話，dialog就是好選擇，使用方法也很簡單，引進外掛後，像這樣去做設定。
$("#dialog").dialog();
$("#draggable").draggable();
$("#resizable").resizable();
可以到這邊看效果。

我把他整合起來，加上做一個選取跟切換視窗的動作，就是這次專案在玩的東西了。

Read more

jQuery UI-頁籤及時間選擇器

jQuery UI是一套很強的jQuery外掛，很多常用但不是那麼簡單可以寫出來的功能，他都幫忙解決。加上他有提供自製外觀的服務，你可以到這邊去設計一個你喜歡的外觀，然後按下download theme，就可以將jQuery UI下載回去使用了。

這邊使用了tabs和time picker兩個功能，想使用更多的功能，可以到Demos & Documentation查詢。


Date Picker


Tabs

有興趣可以從demo那邊去查詢該怎麼使用，或是觀看我範例的原始碼。

Read more

Superfish-用jquery建立下拉式選單

在網站裡很常用到的下拉式選單的功能，當然在jquery也可以輕鬆實現，下載Superfish外掛後，只要照著一般我們習慣做navigation的方式，用ul及li搭配來製作選單，然後用
$('ul.class name').superfish(); 就可以直接把它變成下拉式選單了，如果會css，還可以把下拉式選單改成你要的樣子。

觀看效果

外掛網址

Read more

html5的表單元素

html5多了不少新的表單的功能，以前只能用text去表達所有的狀態，現在你可以指定他是數字或網址，甚至是日期也可以，只要設一下type就可以了。

不過在大多的瀏覽器看起來都還是一樣的，只有opera會長的不大一樣。
一般瀏覽器長這樣。

opera上會長這樣。


新的type類型有以下幾種：
type="tel" :輸入電話
type="url" :輸入網址格式
type="email" :輸入mail格式
type="number" :輸入數字
type="datetime" :日期
type="date"
date跟datetime雖然都是日期，不過在opera長相會有些不一樣，有興趣的可以自己試試看。


另外更大的不同是如果type指定是數字或電話，在智慧型手機裡會跳出的鍵盤會是只有數字的鍵盤，有智慧型手機的可以來這邊看看效果。

http://www.wingzero.tw/html5/form.html

Read more

白鳥花子

Read more