2013年1月31日 星期四

GleeShare 齊享資訊 官網

GleeShare 齊享資訊
GleeShare 齊享資訊

最近完成的齊享資訊的官網,就是我跟朋友組成的團隊,接案是其中的一部分,從接案中可以磨練技術跟認識新朋友,都很不錯。

GleeShare 齊享資訊

目前資訊還很簡單,主要我們還是希望可以開發出好玩的東西,最近也已經在著手下一個計劃,敬請期待。

另外就是也歡迎大家有app、web或整合性質的開發,都可以找我們談談,也歡迎來交交朋友。
Read more

2013年1月30日 星期三

2013年1月29日 星期二

ActionScript 3.0 播放聲音

在flash裡面要控制聲音要用sound,可以呼叫外部的音檔。

  1. var url:String = "song1.mp3";   
  2. var request:URLRequest = new URLRequest(url);   
  3. var snd:Sound = new Sound(request);  

或是從元件庫匯出給flash使用
sound
  1. var snd:Sound = new sound();   

播放與停止聲音
  1. var sc:SoundChannel;   
  2. sc = snd.play(); //開始播放   
  3. snd.stop();  //停止播放  

參考
ActionScript 3.0 播放聲音
Read more

2013年1月28日 星期一

jQuery 漂亮的動畫讀取進度條

loader

想要一個漂亮的loading頁面嗎? 可以用用這個plugin

外掛網址:
jQuery animation Percentage Loader plugin

引入外掛後先初始化
  1. var $topLoader = $("#topLoader").percentageLoader({width: 256, height: 256, controllable : true, progress : 0.5, onProgressUpdate : function(val) {   
  2. $topLoader.setValue(Math.round(val * 100.0));   
  3. }});  
Read more

費茲定律(Fitts’ Law)

費茲定律(Fitts' Law)是心理學家 Paul Fitts 所提出的人機介面設計法則,主要定義了游標移動到目標之間的距離、目標物的大小和所花費的時間之間的關係。費茲定律目前廣泛應用在許多使用者介面設計上,以提高介面的使用性、操作度和效能。長得就像下面這個公式:

Fitts's Law

其中 T 代表所花費的時間,a 是系統一定會花費的時間,b 是系統速率,D 代表啟始點到目標之間的距離,而 W 則是目標物平行於運動軌跡的長度。

簡單應用,就是使用者要操作一個介面, a 跟 b 取決系統,而把 D 減小與把 W 加大,都可以讓使用者在使用的時候有更好的體驗。

參考資料
按鈕要多大?費茲定律告訴你
[HCI] 費茲定律Fitts’ Law與使用者介面設計



Read more

jQuery 修改元素屬性- attr

jQuery的attr很好用也很常用到,列一下基礎會用到的方法。

1. 獲取屬性的值attr(name)
  1. $("img").attr("src");   

2. 修改屬性attr(name,value)
  1. $("img").attr("src","test.jpg");  

3. 一次修改多個屬性attr(properties)
  1. $("img").attr({ src: "test.jpg", alt: "Test Image" });  

4. 用function變更屬性的值 attr(key, function(index, attr))
  1. $("img").attr("title"function() { return this.src });  
這個會把所有的src的值套到title去

5. 移除屬性removeAttr(name)
  1. $("img").removeAttr("src");  
Read more

2013年1月27日 星期日

2013年1月26日 星期六

2013年1月23日 星期三

jQuery plugin- 圖片文字說明效果

imageoverlay

當滑鼠移到圖片上,有時候會希望上面有一些說明文字出來,像這種有一個小方塊滑出來的說明就是不錯的選擇。
外掛網址:
jQuery Image Overlay

一樣引入plugin,然後要使用plugin只要這樣使用
  1. $("#firstGallery").ImageOverlay();  

另外有些選擇可以設:
always_show_overlay: Allows pinning of overlay if set to true. Overrides overlay_speed, animate. Default: false.
animate: Whether to animate the overlay as it is being shown. Overrides overlay_speed. Default: true.
border_color: Any color value. Default: '#666'.
overlay_color: The color of the semi-opaque overlay layer. Default: '#000'
overlay_origin: The side which the overlay comes in from. Valid values are 'top' and 'bottom'. Default: 'bottom'
overlay_speed: The speed of the overlay animation. Valid values are 'slow', 'normal', 'fast', and numbers for millis. Default: 'normal'
overlay_speed_out: The speed of the overlay animation when hover is removed. Valid values are 'slow', 'normal', 'fast', and numbers for millis. Default is value of overlay_speed.
overlay_text_color: The color of the text on the overlay. Default: '#666'

  1. $("#secondGallery").ImageOverlay({ border_color: "#FF8000", overlay_color: "#610B38", overlay_origin: "top", overlay_text_color: "#FF8000", overlay_speed: 'fast', overlay_speed_out : 'slow' });  

Demo

Read more

2013年1月22日 星期二

G Generation World 破啦

老實說我真的覺得這是個空虛的遊戲,後面都只為了開發機體而已,也因為專注在練機體,本身很強的機體沒幾隻,最後一關只有希洛的天使鋼彈能看(掩面)。

所以就放一下BGM


原創的也一些不錯的


再來是我很愛的骷髏鋼彈系列


主題曲


這真的是一個給粉絲玩的空虛的遊戲啊..
Read more

在SQL Server上執行php

最近因為案子需求,需要在MS的SQL Server上跑php,雖然說不難,可是搞環境卻搞很久,如果有需要的也可以參考一下。

以前是直接把mysql改成mssql就可以,不過後來微軟自己寫了一個for php的規則,所以那個方法就不行啦,要注意一下。

現在是用這個方法。
  1. $serverName = "server address";   
  2. $uid = "user";    
  3. $pwd = "password";    
  4.   
  5. $connectionInfo = array("UID"=>$uid"PWD"=>$pwd"Database"=>"fateblood""CharacterSet"=>"UTF-8");   
  6. $conn = sqlsrv_connect( $serverName$connectionInfo) ;   
  7.   
  8. if$conn === false )   
  9. {   
  10.     echo "無法連接伺服器 ".$serverName." 裡的資料庫,錯誤訊息如下:</br></br>";   
  11.     die( print_r( sqlsrv_errors(), true));   
  12. }  

執行sql的語法:
  1. $sql="select * from db";   
  2. $query=sqlsrv_query($conn,$sql);  
Read more

靜心國小NXT機器人班

一直很想玩的樂高機器人,沒想到因為老師最近合作的廠商要開班,就讓我有機會可以玩到了,而且第一次接觸就是當助教。

靜心國小機器人班
靜心國小機器人班
開班的地點是文山區的私立靜心國小,樂高機器人就是像這樣的東西,組合都是樂高,然後會搭配一些感音器還有電子晶片,再輸入一些程式後就可以動了。
Read more

2013年1月20日 星期日

jQuery麵包屑導覽- jBreadCrumb

jbread

麵包屑(crumb)是許多網站在讓使用者知道目前是在哪一層,很常用的方法,這個是一個比較特別的麵包屑plugin,除了幫你寫好麵包屑的CSS外,另外他也縮短了麵包屑的長度,當把滑鼠移到該個層級時才會展開,詳細看了就知道了。

Plugin網址:
jBreadCrumb

首先html照他的排列方法

<div id="breadCrumb" class="breadCrumb module">
<ul>
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">Biocompare Home</a>
</li>
<li>
<a href="#">Product Discovery</a>
</li>
<li>
<a href="#">Life Science Products / Laboratory Supplies</a>
</li>
<li>
<a href="#">Kits and Assays</a>
</li>
<li>
<a href="#">Mutagenesis Kits</a>
</li>
<li>
Mutation Generation System&trade;
</li>
</ul>
</div>
</div>


然後引入plugin,樣式也可以引入css後再作調整。

  1. $("#breadCrumb").jBreadCrumb();  

Demo

Read more

2013年1月18日 星期五

[D-Arts] Rockman

D-Art Rockman

最近洛克人又開始推出模型,仰賴模型技術的進步,模型的可動性跟造型都很棒了,比較早是有壽屋的系列,不過最近懶得組模型,加上壽屋的大小我不喜歡,所以才一直沒出手,然後看到D-Arts出了洛克人 X,就開始期待他也會出其他的系列,然後就讓我盼到元祖洛克人了。

Rockman
Rockman
好熟悉的造型阿..
Read more

2013年1月17日 星期四

偵測瀏覽器縮放比例

之前提過如果設計的頁面,chrome預設字級最小是12px,也就是說小於12px的字體,都會設為12px,要解決的方法就是使用-webkit-text-size-adjust:none;這個方法,可是即使用了這個方法,在Zoom out的時候,字體也不會縮到12px以下,這也是chrome的限制,所以網頁就會破版啦..

所以後來我們決定,當縮小到一定程度,提示使用者再下去會破版,所以也找到這個幫忙偵測zoom scale的plugin。

Plugin網址:
yonran / detect-zoom
Read more

瀏覽圖片好工具 ACDSee Free

acdsee

是說雖然windows有內建看圖軟體,google也有Picasa,可是我還是最愛最早就在用的ACDSee,重灌後今天才又想到他,沒想到就看到他有免費版的了。

官網:ACDSee Free

免費版雖然只剩下瀏覽圖片的功能,不過我之前也都沒用過他的相片編輯功能,處理圖片還是Photoshop上手多了。所以可以免費取得只剩下瀏覽功能的ACDSee,對我來說就是一大福音了。



Read more

2013年1月14日 星期一

Taiwan WebConf 2013

WebConf 2013

這兩天在中研院參加WebConf,領域就像它的標題一樣,非常廣泛,所以講師就有前端領域、後端領域跟UX、UI、瀏覽器、資安...等都有,我會選擇不管哪個領域,有興趣的就會去聽。

感想是,台灣的高手真的也很多,投入熱情就會有收穫。再來就是不少人都想找工程師跟設計師之間的管道,其實簡單的方法就是兩邊都會就好了,這次找的講這種主題的講師,其實都還是偏設計師多不少,所以我還真愛我現在有辦法跟兩邊都能很好溝通的能力。

講者的PPT整理在這一篇,有時間還要多拿來看看。

另外除此之外最大的收穫,就是抽到大會唯一的大獎Axure RP Pro,有趣的是最後龍哥直接live coding一個亂數的程式,然後從裡面選出了五個人,我還是第五個,本來以為前面的應該就拿走了,沒想到還真的前面的人都走了,所以這個軟體就歸我啦。

WebConf 2013

感謝悠勢 UserXpr,這次的keunote有聽到Richard講創業,也是很有收穫,另外最後也要提到要不是他,我也不會離開原本的公司。

雖然我本身不是做網站企劃的,可是倒也一直滿想用看看這個軟體的,等拿到之後再來玩看看。
Read more

2013年1月13日 星期日

2013年1月12日 星期六

用jquery畫圓餅圖(pie chart)- Flot

想在網頁也畫一個資訊圖表嗎? 可以來試試flot

pie
首先到網站去下載plugin,因為手邊的專案是需要畫一個pie chart,所以這邊就pie chart來介紹。

首先先把plugin引入

<script language="javascript" type="text/javascript" src="flot/excanvas.min.js"></script>
<script language="javascript" type="text/javascript" src="flot/jquery.flot.js"></script>
<script language="javascript" type="text/javascript" src="flot/jquery.flot.pie.js"></script>


第二個plugin是flot.js的核心,第三個則是要畫pie chart要用的,第一個則是解決ie沒辦法正常呈現的js。

然後可以到pie chart範例頁看一下怎麼使用。

準備data
  1. var data= [{label: "Used Space: 0.01 GB",  data: 1},   
  2. {label: "Free Space: 31.65 GB",  data: 316}];  

如果要更改每個資料的顏色,可以加上color
  1. var data= [{label: "Used Space: 0.01 GB",  data: 1, color: "#3b8db3"},   
  2. {label: "Free Space: 31.65 GB",  data: 316, color: "#d82f83"}];  

然後照範例改成你要的樣子
  1. $.plot($("#pie"), data,   
  2. {   
  3.         series: {   
  4.             pie: {   
  5.                 show: true,   
  6.                 radius: 1,   
  7.                 label: {   
  8.                     show: true,   
  9.                     radius: 3/4,   
  10.                     formatter: function(label, series){   
  11.                         return '<div style="font-size:8pt;text-align:center;padding:2px;color:white;">'+label+'<br/>'+Math.round(series.percent)+'%</div>';   
  12.                     },   
  13.                     background: { opacity: 0.5 }   
  14.                 }   
  15.             }   
  16.         },   
  17.         legend: {   
  18.             show: false  
  19.         }   
  20. });  

API的說明在下面,大概對照一下就可以使用了。
Read more

2013年1月10日 星期四

用jquery 360度瀏覽產品

j360
前陣子看到一個網站只要拖曳圖片,就可以360度觀看產品,想說技術應該不會很難,再來又想到這個應該會很多人有需求,果然找一下就找到plugin了。

外掛網址:360 degrees product view

首先引入plugin
<script src="/j360.js"></script>

其實原理就只是把3D旋轉的圖片分成很多張序列圖,在拖曳的時候去切換圖片而已,所以這邊只要把圖片放到div內,再使用plugin就好了。

  1. $('#product').j360();  

DEMO

Read more

2013年1月9日 星期三

3D 建模

剛學3D軟體練習的模型,說起來也五年了(驚),然後我的3D建模就一直沒進步(嘆)

伊芙
伊芙

Keroro軍曹
Keroro軍曹

giroro伍長
Giroro伍長

Kururu曹長
Kururu曹長

更多3D模型

最近應該有時間再來練習了吧..
Read more

[扭蛋盒玩] 魔神英雄傳

魔神英雄傳
這款買很久了,最近整理一下又拿出來拍。

龍神丸
龍神丸
龍神丸
戰部渡操控的魔神,是龍神根據被渡掛上勾玉的黏土機器人,使之變成魔神外殼而成。與其他魔神不同,是透過渡站在龍神頭上,透過互相合作共同控制。擅長猜拳和精通創界山各地的語言。第四星界中受重傷,龍神化成龍玉,後來與被擊落的空神丸結合靈魂,進化成龍王丸,可以變形成鳥型在空中飛行,也增加了「鳳雷波」等鳥型專用的必殺技。

龍神丸的結構,是以神部七龍神「金龍」(龍神丸本體)為中心,以七龍神當中的四個頭蓋骨(青龍、金龍、土龍、水龍)、五顆寶玉(虹龍玉、激龍玉、守護龍玉、土龍玉、水龍玉)、加上各龍神的筋骨及纖維組織組合而成。龍神丸的核心稱為「虹龍球」,當龍神丸戰至力盡時,便會變回此型態。龍神丸本身沒有飛行能力,在故事中段,要倚靠空神丸以雙爪抓住才可在空中作戰,稱為「天空龍神丸」

戰神丸
戰神丸
戰神丸
劍部武一郎專用魔神,第2話出場,以格鬥戰為主的武士型魔神,能夠使用雙刀。與龍神號不同,戰神號需要武一郎電召才會出動(電話號碼為「1000.10.0」),令他經常為了找電話亭而奔波,有時甚至因為無硬幣、感冒聲沙(第12話,雖然戰神丸在三部作中從未開聲說話,只有武一郎曾經聽過。)、或者電話亭被炸毀而不能成事。

由於缺乏飛行能力及火力,極不擅長對空作戰,相對而言非常精於應付白刃戰、以及地上混戰,甚至試過單人匹馬將追兵全滅(第20話),最後在水晶之洞窟中,與東哥羅交戰,最後力盡而敗。

Read more

2013年1月8日 星期二

第一個屬於我的domain name: wingzero.tw

deathhell Ver. 1.0

因為免空總是非常的不穩定,而且說終止服務就終止服務,所以最近終於去申請第一個屬於自己的domain name wingzero.tw,以後就算要搬空間也不用再擔心網址的問題了。

另外用wingzero而不是deathhell,就要講一個小故事了,最開始我的帳號都是使用wingzero(飛翼零式),我開始上網的時候除了Yahoo,還沒有很大的網路服務,所以當時很多地方都還註冊的到wingzero,第一次申請不到就是我開始使用PTT之後,所以PTT就用了deathhell(死神),導致後來我就乾脆都使用deathhell,幾乎都沒再遇到帳號被人用了的問題。但這次申請domain name,想到deathhell太長,就去試著看看wingzero.tw有沒有人用,還真的沒人用,所以我就註冊下來啦。

但後來有想到另一個也很想用的,查了一下也發現沒人用,想說都繳錢了就算了,大概也是緣分吧。

目前先放簡單的東西上去,之後有空可以來玩一下想玩的東西。
Read more

2013年1月6日 星期日

Board Game DIY

這學期因為一門課需要設計桌遊,所以在學期末就真的要自己設計,自己製作一款桌遊,首先要感謝有熱心喜歡玩桌遊的朋友給了很多建議,所以就這樣實作了一款。

自製桌遊
製作中

自製桌遊
完成的一整疊

雖然平常不是很常玩桌遊,但這樣做了一款還是很有成就感,話說真是好久沒有做美勞了。

另外這是我第一款買的桌遊,也是為了這門課買的。
物種起源 Evolution: The Origin of Species
有得過獎的喔,這款叫物種起源 Evolution: The Origin of Species,可以到這邊看一下簡單的遊戲說明
Read more

[ROBOT魂] 福音戰士初號機

EVA 初號機

一直在猶豫新劇場版的EVA要買哪個系列,目前出的比較齊的是轉輪科技,可是實在對轉輪沒什麼信心,最近因為R魂初號機再版,所以後來還是決定買R魂系列。

EVA 初號機
EVA 初號機
R魂版的造型不錯,有一貫的水準,不過感覺有點瘦。
Read more

php 接 flash 的值並寫入資料庫

像這樣準備把資料丟給php
  1. var sendData:URLVariables = new URLVariables();   
  2. //要接收資料的php   
  3. var myRequest:URLRequest = new URLRequest("update.php");   
  4. myRequest.method=URLRequestMethod.POST;   
  5. var phpLoader:URLLoader = new URLLoader();   
  6. phpLoader.dataFormat = URLLoaderDataFormat.VARIABLES;  

然後把值給丟出去
  1. sendData.outputData=outputData;   
  2. sendData.mapid=mapId;   
  3. myRequest.data = sendData;   
  4. myRequest.method = URLRequestMethod.POST;   
  5. phpLoader.addEventListener(Event.COMPLETE, onSendComplete);    
  6. phpLoader.load(myRequest);  

  1. function onSendComplete(event:Event): void  
  2. {   
  3.       
  4. }  

然後php把值接到,就可以把值給寫到資料庫了。
  1. $data=$_POST['outputData'];   
  2. $id=$_POST['mapid'];  
Read more

2013年1月4日 星期五

Related Posts Plugin for WordPress, Blogger...