2011年7月28日 星期四

2011年7月22日 星期五

UiGathering Talk

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



Devils in the Detail!!
Read more

2011年7月20日 星期三

jQuery-使用Validation來驗證表單

268520_2170889401574_3250508_n

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

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

2011年7月19日 星期二

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

2011年7月15日 星期五

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

2011年7月12日 星期二

CSS Hack

284136_2149569028578_8211536_n

只要是網頁設計師,就沒辦法避免碰到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

2011年7月11日 星期一

你一定要懂技術

268501_2146969923602_7883862_n

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

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

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

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

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

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

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

2011年7月7日 星期四

jQuery UI-Dialog

268801_2138894481721_6294899_n

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

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

可以到這邊看效果

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

2011年7月5日 星期二

jQuery UI-頁籤及時間選擇器

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

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

268548_2134554733230_6435062_n
Date Picker

269777_2134554813232_7794389_n
Tabs

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

2011年7月4日 星期一

Superfish-用jquery建立下拉式選單

264674_2131955228244_5594662_n

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

觀看效果

外掛網址
Read more

2011年7月1日 星期五

html5的表單元素

269824_2125752913190_7888969_n

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

不過在大多的瀏覽器看起來都還是一樣的,只有opera會長的不大一樣。
一般瀏覽器長這樣。
268757_2125739312850_5779419_n
opera上會長這樣。
260225_2125739432853_3636482_n

新的type類型有以下幾種:
type="tel" :輸入電話
type="url" :輸入網址格式
type="email" :輸入mail格式
type="number" :輸入數字
type="datetime" :日期
type="date"

date跟datetime雖然都是日期,不過在opera長相會有些不一樣,有興趣的可以自己試試看。
263024_2125746273024_4868555_n

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

http://www.wingzero.tw/html5/form.html
Read more
Related Posts Plugin for WordPress, Blogger...