2011年7月28日 星期四
2011年7月22日 星期五
UiGathering Talk
這個月UiGathering的主題,光看到ppt我就整個熱血起來,這個才是真的有價值的東西阿!!! 下次要來參加一下了。
Devils in the Detail!!
Read more
UiGathering Talk - Masters of visualization / by Allen Chan
View more presentations from uigathering
Devils in the Detail!!
2011年7月20日 星期三
jQuery-使用Validation來驗證表單

在製作網站的時候常常會有機會用到驗證使用者輸入資料的時候,比方說請他輸入數字,你要知道他是不是有輸入非數字的字員,請他輸入email,他有沒有照email的格式來輸入,資料輸入錯誤,都會造成取得資料上的困擾,於是就必須要靠javascript來做一些資料驗證的動作,讓資料送出去時,確保起碼的正確性,但其實要做資料的驗證也是頗麻煩的一件事,加上如果發現他資料輸入錯誤,又要出現提示錯誤的訊息,每次都要重做一次就會顯得很麻煩,但我們可以使用jQuery的外掛Validation來簡單的做到驗證資料的功能。
當然首先請到官網去下載外掛,並在網頁中引入外掛的js檔。
2011年7月19日 星期二
CSS3 Media Queries
CSS3 Media Queries
View more presentations from Russ Weakley
行動裝置的普及,可以使用CSS3 Media Queries來達成每個device的顯示都能正常呈現,雖然還沒有正式確定規則。不過還是可以先使用看看。
介紹:
Media Queries 與 CSS
W3C文件
php資料庫連結
因為很常用,所以記錄一下。
Read more
<?
//資料庫連結
$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命令失敗");
?>
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
昨天因為在趕一個計畫,所以一邊工作一邊聽台上的人分享,其實這場很精彩,但我沒辦法好好仔細聽,不過一個講者說到他求學時教授的一句話"Get out of here, and change the world!" ,可是引起了我的共鳴,我一直覺得年輕人應該做些事情去改變這個世界,我也認識不少年紀比我大一截的人,也一直試著在改變著這個世界,因為人生很短,去做自己喜歡的事情,還有什麼好猶豫的,Just do it!
而今天組長帶我去跟所長見面,雖然被劈哩啪啦刮了半個小時,不過我覺得很開心,因為所長說的是我不知道什麼叫Usability,代表他重視這一塊,技術以上,就是要像有這樣的知識,才有辦法做出好的產品,也讓我知道光是參加一些UI/UE的聚會,不見得就代表我就了解那些東西。我也相信我強的是實務經驗,可是實務強不見得就比較好,相對的理論強而不會實作也不好,如果這樣讓我可以好好的去研究這些東西,我覺得這會是讓我覺得非常棒的一件事。
因為google Usability,讓我找到這個vgod's blog,這世界的神人太多,請記得要持續努力。
jQuery-UI Sortable

如果用過一些相簿服務,比方facebook,你想要去改變相簿裡相片的順序,你可以很直覺的直接拖曳相片,這樣就可以改變相簿裡相片的順序,因為最近想做類似這樣的功能,於是去找了外掛,發現jQuery UI的Sortable就可以實踐了。
照著頁面的說明設定一下就可以了,差別是範例是垂直的,而facebook的相簿是一個區塊一個區塊,而且會換行,不過只要在block內下float:left ,讓區塊自動排列,之後再加上sortable就可以做到拖曳排序的功能了。
看看範例
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>
然後就可以很簡單的使用這個外掛了,更詳細的說明可以到官網去看看。
範例
2011年7月12日 星期二
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]-->
祝大家使用愉快。
參考資料
2011年7月11日 星期一
你一定要懂技術

從去年我朋友一句"我會讓你有接不完的案子",我就從那時候忙到現在了,當然忙得不只是外面的案子,老實說我不是很想過著只是接案的生活,接案的目的很多時候對我而言還是能夠練到技術是最好的,我也從這些案子裡確實經進了我的技術。
手邊好幾個計畫在跑,大概過一陣子就可以一個一個把成品給丟上來了,無中生有實在是人生最快樂的事情。其實從工作後就開始有創業的打算,那時候也跟過好幾個team想過創業的點子,不過後來要不是team沒有向前衝的動力,不然就是技術還不純熟,就一直沒有做出什麼東西出來,最近大概是該練的功也差不多了,身邊的夥伴也越來越強了,於是想要一個服務,就可以用比較快的速度把他產生出來,我都相信只有技術到一定程度,去談創意才有價值,如果你沒有夠好的技術,永遠都只能看著你的"創意"變成別人實作出來的作品。
所以你一定要懂技術,技術的範圍當然很廣,以我想做的網路來說,你想架網站,你就要懂怎麼處理主機那方面的事情,怎麼去寫程式,怎麼去做美工,怎麼去寫好一個好的網站架構,以及怎麼去做出一個好的使用者經驗的網站,這個絕對不會是用DW或PS拉一拉就可以拉出來的東西,如果你不去追求一些應該要有的技能,等發生問題的時候你永遠不會知道為什麼。
為什麼你要懂技術? "因為工程師很便宜阿",我看過很多人總是說"我有一個點子,我希望可以找到好的美工跟工程師來做出我想要的東西,到時候我們再來一起賺錢",可是真的找到好的工程師跟美工,就可以做出你想要的東西嗎? 我想這個想法有很大的可能性會出問題。
第一是:你怎麼知道這個工程師或美工是好或不好? 如果你不懂技術,不管是美工或程式都一樣,你根本就沒辦法判斷這個美工或工程師的能力好或不好,如果找來的只是一個可以講出一口"專業"的工程師,那麼那個工程師只能讓你一直燒錢,你卻不知道為什麼他做不出好東西。
第二是,開發產品的過程中,有太多時候你必須去做一個Pivot的動作,如果你沒有好的技術背景,沒辦法去判斷是不是該轉換前進方向,就只能注定繼續走錯誤的路。這點你請的工程師不見得會告訴你,因為他可能只是一個工程師,又或者他沒義務告訴你這些事。
所以技術真的很重要,我尊敬每一個努力在追求技術的人。
2011年7月7日 星期四
jQuery UI-Dialog

之前用jQuery UI做了一個drag的視窗,可是後來在測的時候才發現問題,本來想自己把draggable改得更好一些,問了同事才發現有更好用的dialog,我以前把dialog想的太簡單了,以為他只是單純的彈出視窗,現在把他整進來後就變得更強了。
dialog強就強在他整合了draggable跟resizable,當然你也可以單純使用draggable或resizable,而如果想一起使用的話,dialog就是好選擇,使用方法也很簡單,引進外掛後,像這樣去做設定。
$("#dialog").dialog();
$("#draggable").draggable();
$("#resizable").resizable();
可以到這邊看效果。
我把他整合起來,加上做一個選取跟切換視窗的動作,就是這次專案在玩的東西了。
2011年7月5日 星期二
jQuery UI-頁籤及時間選擇器
jQuery UI是一套很強的jQuery外掛,很多常用但不是那麼簡單可以寫出來的功能,他都幫忙解決。加上他有提供自製外觀的服務,你可以到這邊去設計一個你喜歡的外觀,然後按下download theme,就可以將jQuery UI下載回去使用了。
這邊使用了tabs和time picker兩個功能,想使用更多的功能,可以到Demos & Documentation查詢。

Date Picker

Tabs
有興趣可以從demo那邊去查詢該怎麼使用,或是觀看我範例的原始碼。
Read more
這邊使用了tabs和time picker兩個功能,想使用更多的功能,可以到Demos & Documentation查詢。

Date Picker

Tabs
有興趣可以從demo那邊去查詢該怎麼使用,或是觀看我範例的原始碼。
2011年7月4日 星期一
2011年7月1日 星期五
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
訂閱:
文章 (Atom)
文章
標籤雲
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
360
3D
3D Printer
3D Scanner
3D TV
3DS LL
3ds max
七大創意原則
七武海
九州
九型人格
人生
十大創新法則
三立
三立新聞網
三星
三國傳
千值練
大地盃
大阪
大津
大氣系
小田原
小朋友
小動畫
中央大學
中平商圈
中華職棒
互動設計
公視
天氣娃娃
心情日記
手機
手繪
日文
日本
日本戰國
日本職棒
日劇
月津港
火箭營
仙書紀
令和
北海岸
北海道
北關
可動群雄
台中
台南
台湾狼
台灣
台灣社群排行榜
台灣數位文化協會
台灣選舉地圖
史旺基
平面設計
未來國會
正妹
永平工商
生日
立委
光雕
印刷
名片
地科院
地球村
地圖
地震
好人卡
好軟體
好網站
年誌
成果展
早安
有聲書
江火明
自介
行銷
衣服
似顏繪
初音
完成品
尾牙
我的迷你城市
我要當女一
扭蛋盒玩
扭蛋戰士DASH
扭蛋戰士NEXT
汶萊
沖繩
狂新聞
京都
制服
制服大賞
制服女孩
命理
夜之祭
奈良
姊妹
宜蘭
東大特訓班
東京
武神降臨編
直播
社群日
股票
金流
金庸
侯文詠
勇者
厚生市集
咪醬
哆啦A夢
星座
活力熊
研究所
穿衣指數
紅色死神
美劇
風起雲湧
風雲祭
飛肯
香港
哥吉拉
展覽
座談會
旅行
旅遊
時報周刊
書
書單
栗原洋服店
格言
桃園
桌面寵物
氣象
氣象主播
氣象局
氣象預報
海洋堂
特殊符號
特攝
班服
神戶
神奇寶貝
紙公仔
紙模型
退休光碟
高中職博覽會
高校誌
假面騎士
偉大的航道
動物森友會
動畫
動畫術語
專家審查會議
專題
教學
產生器
設計
部落格
部落格小玩意
陳金鋒
創業
喬巴
媒體報導
減碳雙熊
無名
無障礙
程式
童顏app
絕對領域
萌
萌咩誌
評審
賀卡
超合金魂
超合金魂 F.A.
超級英雄圖譜
超級英熊
超級戰隊
跑馬燈
雲寶
黑襪
奧爾資訊
新聞易數
義大遊樂世界
聖鬥士星矢
資策會
路上觀察
遊記
遊戲
零秒出手
電子看板
電子書
電子報
電腦戰機
電影
預付卡
團體服
壽屋
夢想
慈幼社
漫畫
綠界
網頁
網頁作品
網站工具
網站優化
網路狂人週報
舞台背板
蜜月
酷瞧
颱風
餅乾
魂spec
彈珠台
影片
影音氣象
影集
影像處理
數位時代
樂樂小黃
模型
熱舞
獎金獵人
稻江護家
箱根
膝上襪
衛星雲圖
論壇
遮罩
戰鬥女子學園
戰隊
橋本環奈
機器人
機器人相關
講師
還願
黏土人
瀏覽器
翻譯
藍球教學
轉輪科技
鎌倉
雞排妹
顏文字
羅東
寶貝
籃球
蘋果日報
攝影
蘭友會
鐵啞鈴
魔神英雄傳
魔動王
讀書會
體育用品
ACA
ACE
AddThis
Adobe
Adobe XD
aerender
After Effect
AIR
AJAX
Android
AngularJS
AngularUI
Annual Analysis
ANSI
API
Apple
Apple Watch
AR
AR+
Arduino
array
Arrow
AS 3.0
background
BANDAI
Batman
BB戰士
bbs
blog
blogger
Blogger Touch
board game
bootstrap
Brave合金
browser
C3.js
CANDY醬
canvas
Card sorting
chrome
CI
CM's
cocos2D
CodeIgniter
color
COMPOSITE Ver. Ka
cookie
cosa
cosplay
css
css3
css教學
CW
CWB
D-Arts
D3.js
DC Comics
Death Note
deathhell
Decool
design
desktop
DeTools
Diablo
Discuz
display
dragon
embed
Emmet
EVA
excel
facebook
favicon
fc2
filter
Firebug
firefox
flash
Flex
FlickLinkr
flickr
FQL
fun電
Fun籃球
G Generation
G+
GARNiDELiA
GFF
GIGA合金
GIPHY
git
GleeFB
GleeShare
google
google adsense
Google Analytics
google datastudio
google fonts API
Google Geocoding API
Google Map API
google mapplets
google PageSpeed API
google tool bar
google+1
googlemaps
grid
GTI
GUNDAM
Gundam W
GUNDAM“EX-STANDARD”
Gunpla
GunXSword
hairbook
hairdodo
hairmap
Hami App
HG
HiRM
Homebook
HPX
htaccess
html
html5
iAngel
ichannel
ico
icon
IDEO
IE
III
illustrator
ImageMagick
InDesign
info graphic
instagram
iOS
iphone
Iron Man
ITCD
iTenki
IxD
javascript
JK
jquery
jquery plugin
jQuery UI
js
JSDC
JSON
JSON-LD
Keroro魂
Kobe
Koobii 高校誌
kuso
La new
lazyload
LEGO
less
life style
Line
Linux
localStorage
logo
LucyPop
Mac OS
MAD
mailgun
Maker Fair
Marvel Comics
MegaHouse
meta
Metal Robot 魂
MG
MIC
mit.jobs
MLB
mobile app
mobile web
movie
MSI
MSN小圖
MSN小綠人
msn表情符號
MSN機器人
mssql
MTK
My Weather
MySQL
NBA
NCU
NeoShop
node.js
nokia
NXEDGE STYLE
NXT
ONEPIECE
open data
OpenCart
ovomedia
Pantone
PChome
PDO
persona
photoshop
photoshop教學
php
phpFlickr
Picasa
pintrest
Pixnet
PIXOSTYLE
plurk
pokemon
Pokemon Go
Pokémon-Info
PPT
premiere
PTT
pv3d
PWA
Python
Raspberry Pi
react.js
reCAPTCHA
Restaurant City
RIOBOT
RoboInfo
robot
ROBOT魂
rockman
rockman X
RQ-Star
RWD
S.H.E
S.H.Figuarts
S市集
SCANDAL
scratch
Scss
SDCS
SDX
Semantic UI
SEO
showtenki
simpleXML
SketchUp
slideshow
sliding doors
spotlights
SQL
SQL Server
srw
SRW OG
star wars
Sublime Text
Super Heroes
Super MiniPla
Super Robot超合金
Supergirl
svg
switch
SyntaxHighlighter
TapFighters
TenkiMaps
TibaMe
Titanium
TP合金
TweenMax
twitter
U-Mobile
UCD
UI
UiGathering
Uniform Map
Unity
Usability
UX
video
vimeo
vQmod
Vue.js
WBC
WCF
weather
weather icon
weatherrisk
web
Web Design Theory
WebApp
WebConf
widget
Win7
wingzero
Wordpress
XAMPP
xml
XMLHttpRequest
Xuite
Yahoo API
Yahoo open hack
Yahoo!
Yam
YouTube
ZOIDS
