活力熊四少

台湾狼跟活力熊家族要聯名演出，所以畫了台湾狼風格的活力熊，就放上來了。

活力熊


Bobe


壽山猴


胖達

也歡迎到台湾狼觀看更多台湾狼一系列的表演。

Read more

教育訓練

創業結束後三年，我當員工的心得

故事從這邊說起。

這幾天公司教育訓練，老實說我都到了那麼久才新人教育訓練，一些同一個team的同事都覺得很驚訝，我也是說"其實我也沒比你們早到多久阿.."。

兩天下來的教育訓練，本來以為又是無聊的上課，不過從一開始的執行長講話，到後來各部門的介紹之後，其實感觸還蠻深的。記得之前一個學妹從小公司換到大公司後，曾經跟我說過"其實大公司跟小公司都要待過，小公司讓你練成十八般武藝，大公司讓你看到制度"，其實詳細我也忘了，只是我後來對他的解讀就是這樣，在原本的公司的時候，因為什麼都沒人教，什麼都沒人會，人手又不足，就會養成自己解決問題的能力，我覺得像這樣的能力對於要創業來說是很重要的，而且我也覺得這些能力不是只有創業重要，這世界實在變得太快，沒有養成這樣的能力，就會很快被世界淘汰--除非你想當公務員。

可是後來問題就來了，就像我之前在鼯鼠五技而窮那邊說的，即使我那時候教電腦的時候跟學生說"我的公司讓我可以在很多地方都有實務經驗"，可是我從來就不覺得我在任何一方面是專家，樣樣通樣樣不精就是這樣，這樣的人找工作可能不是什麼問題(但這也是我後來下定決心後找工作才發現的)，可是我還是覺得沒有在一個領域成為專家，我會不開心而且那時候我也覺得我沒有專業，因為認識了很多人後，更覺得要成為某一方面的專家，認識那些人其實沒什麼幫助，最好是進入那個產業才能真的了解那個產業在做什麼。

然後換了一個制度比較完善的公司後，才真的發現人家說要到大公司看過的原因在哪，講師有說過制度這種東西，是保護公司最好的東西，而且換了公司後才發現，其實自己的力量是很渺小的，真的要做一個大的而且完整的東西，絕對需要一個很完整的團隊來一起完成的，第一天下午的團隊建立的課程，本來以為只是很單純的團康，我那時還心想"這種東西我大學都玩膩了，哪有什麼好玩的"，不過一個下午下來，感觸真的很多，經歷了不同的事情後，雖然是差不多的東西，可是又覺得在裡面學到很多，我喜歡那個講師說的話"我從來沒看過一個沒有管理能力的人，可以領導好一個團隊"，沒有管理能力，就不會有領導力。

回到最開始的那篇文章，其實我覺得我也是三個月就升一個level了阿.. 尤其是換了工作以後，不是大公司就是進去等混吃等死的阿..

Read more

一哥之爭

後來阿熊跟Bobe就決定在咪醬的小吃攤吃東西了，吃著吃著，來了個老朋友..

Read more

游擊戰

事情總是一波接一波，稍微想休息一下，事情就不會放過你，常常這樣周末沒辦法完全放鬆，久了還蠻累的就是了。

今天跟朋友討論到成立公司的事情，這次的夥伴跨越領域比較廣，也不是說以前的夥伴不好，只是以前就是一堆工程師，湊起來還是工程師的想法，只是一個團隊如果思考的邏輯都差不多，就會很容易出現盲點。

一談要成立公司問題就複雜很多，包含組成、登記、股份、獲利分配之類的，當然在賣產品的時候，也要考慮到行銷、物流、金流、品質那些的，寫了一個網站的架構出來，後來又調整了前進的方向，手邊案子結了，計畫開始前進了，反而事情更多，這些東西都是看不到終點的，想到以前都打習慣游擊戰，但還是要有辦法打組織戰會成長比較多阿。

講完之後就再繼續動工做事情吧... 再酷的案子也要給大家看的到才知道酷在哪阿..

Read more

懷念的熱血高校-iOS上的SDBall

SDBALL
最近跟朋友合作一款新的iOS app，也是製作操作介面，這次的app是把以前紅白機時代的熱血高校移植到iOS上了，其他就不多說了，懷念的話可以去下載來玩看看喔。

沒玩過的先看看影片，這是外國人錄的。


另外放上一些截圖

Read more

你學了些什麼

從Gene職場的學習 Learning in Career Track 說起。

人說一命二運安風水四積德五讀書，前面四項雖然排名都在讀書之前，可是卻又都比不上讀書來的掌握度高，所以想要要求比較好的待遇，屏除其他機緣，還是讀書是最實在的，但是該讀什麼書? 該怎麼讀，就變得很重要了。

我覺得學習是一種態度，像我這種不是學設計，也不是學資工出身的，現在的工作卻是又要設計又要寫程式，我並不覺得我有比別人聰明到哪去，但我相信我在學習的時候有比別人多了一些堅持在裡面。

現在的電腦很發達，要作設計的話買本書看一下，用Photoshop拉一下就可以拉出一個還可以見人的東西；程式因為網路發達的關係，稍有一些概念，想寫個什麼功能，只要google一下就有一堆人寫教學來讓你參考，這些東西你覺得很好學，也有一大票人覺得很好學，那你拿什麼跟人家競爭?

Read more

php比較時間大小

php沒有直接比較時間的函式，不過可以用strtotime()來轉換時間後再比較。

語法:
strtotime(time,now)
這個含式可以轉換自 January 1 1970 00:00:00 GMT 到現在的秒數，第一個值是要計算的字串，第二個值是要到哪個時間，如果省略則是目前的時間。

例:
echo(strtotime("now"));
echo(strtotime("3 October 2005"));
echo(strtotime("+5 hours"));
echo(strtotime("+1 week"));
echo(strtotime("+1 week 3 days 7 hours 5 seconds"));
echo(strtotime("next Monday"));
echo(strtotime("last Sunday"));

可以像這樣使用來計算時間
$ThisDay = '2008-01-01';
$ThisDay = strtotime($ThisDay); // 將日期轉為Unix時間戳記
$ThisDay = strtotime("+1 day",$ThisDay); // 計算$ThisDay的後一天
$CheckDay= date("Y-m-d",$ThisDay); // 將Unix時間戳記轉回日期
echo $CheckDay ;//會顯示 2008-01-02
所以如果我們要比較兩個日期的話，就可以用以下的方式
$date2="2011-3-1";
$date="2011-1-20";
if(strtotime($date)>strtotime($date2)){
echo "Y";
}
else{
echo "N";
}
這是最近在做的網站，裡面有需要判斷搜尋的條件是否在有效範圍內而去找的方法，用起來還蠻方便的。

參考資料

Read more

FLASH列印文件(AS3.0)

要列印文件的時候，首先要新增一個MovieClip，然後把要列印的內容都丟進去。

然後增加一顆按鈕，用來呼叫列印事件。
print_btn.addEventListener(MouseEvent.CLICK,printContent);
然後寫一個列印的funciton
function printContent(e:MouseEvent) {
var printJob:PrintJob = new PrintJob();
if (printJob.start()) {
if (content_mc.width>printJob.pageWidth) {
content_mc.width=printJob.pageWidth;
content_mc.scaleY=content_mc.scaleX;
}

printJob.addPage(content_mc);
printJob.send();
}
}
參考資料

Read more

日本機器人動畫與主題曲

1970~

マジンガーZ 1972/10/2 - 1973/8/13
マジンガーZ
ゲッターロボ 1974/4/4 - 1975/5/8
ゲッターロボ！
グレートマジンガー 1974/9/8 - 1975/9/28
UFOロボ グレンダイザー 1975/10/5 - 1977/2/27

1980~

聖戦士ダンバイン 1983/2/5 - 1984/1/21
聖戦士ダンバイン
重戦機エルガイム 1984/2/4 - 1985/2/23
エルガイム-Time for L-GAIM-

1990~

ジャイアントロボ THE ANIMATION -地球が静止する日 1992 - 1998
ジャイアントロボ
地球防衛企業 1999/10/5 - 2000/3/28
路地裏の宇宙少年
The Big O 1999/10/13 - 2000/1/19 2002/10 - 2003/4
The Big O

2000~

マジンカイザー 2001/9/25 - 2002/9/25
蒼穹のファフナー 2004/7/4 - 2004/12/26
Shangri-La
創聖のアクエリオン 2005/4/4 - 9/26
創聖のアクエリオン
ガン×ソード 2005/7/4 - 2005/12/26
ガン×ソード
獣装機攻ダンクーガノヴァ 2007/2/15 - 2007/5/10
鳥の歌
天元突破グレンラガン 2007/4/1－2007/9/30
空色デイズ
鋼鉄神ジーグ 2007/4/5 - 7/12
STORM BRINGER
鉄のラインバレル 2008/10/3 - 2009/3/20
鬼帝の剣
真マジンガー 衝撃！Z編 2009/4/4 - 9/26

2010~

這邊不大會再更新了，歡迎到RoboInfo來看我整理的資料。

Read more

製作dropbox的file list效果

Dropbox web版有一種很棒的檔案複選效果，選擇一個檔案的時候底下會有反白的效果。

選取後


這個的好處是你可以很清楚的知道你選了什麼東西，這個在Windows上就有做到，這個對UX來說已經變成一種很必要的條件了。

複選也會反白。

Read more

jQuery改變CSS屬性

用jQuery來操作CSS是很方便的事情，習慣用法就可以了。

增加class
addClass(class)
移除class
removeClass(class)
取得屬性
css(name)
例: 取得id是color的顏色值
$("#color").css("color");

要改變css屬性則有幾種方法
第一種是對應屬性改變屬性的值
css(name,value)
例: 替所有段落改變背景顏色
$("p").css("background-color","#cccccc");
如要一次改變多個屬性，則可以這樣使用
$("p").css({color:"red","background-color":"blue"});
注意如果屬性包含"-"，則需要加引號，沒有的話則可有可無

Read more

不怕鬼神般的對手，只怕豬一樣的隊友

圖片來源

最近的手邊的計畫有點像超展開的形式在進行，不管是公司那邊的大計畫，或是跟朋友合作的計畫，雖然跟我合作的朋友都會說我的能力很好，可是我覺得我的能力是這些年累積下來的，而且這些能力不過是我用來做我想做的事情的一個基本條件，這些能力很重要嗎? 當然! 那這些能力很了不起嗎? 當然也不會，但我相信只有你不用去煩惱你的夥伴的能力時，這樣才是一個夠資格的團隊。

但當然不是找一群一百分的個人，就可以組成一個一百分的團隊，一個好的團隊除了能力要有一定的水準外，團隊的向心力也是很重要的。今天吃飯的時候，聽到一個朋友說"我們公司的股價一直跌，可是老闆好像也不擔心，因為他覺得他請了一堆台清交的，就一定沒問題"，這句話當然說對也對，說不對也不對，好的團隊的能力會超過一群散到不行的超人，即使當代大家很推從Steve Jobs，即使大家都知道他很獨裁，但他也是養了一群天才當他團隊的成員，才能成就他的帝國。

我喜歡看海賊王，魯夫海賊團裡面的成員，每個都是在他領域的一時之選，但也要有像那個海賊團那樣的向心力，才能成就這個偉大的海賊團，所以不管是個人的能力或是團隊的向心力都是很重要的。

團隊合作是一種藝術，現在我的願望就是讓手邊的計畫都可以順利上線。

Read more

久慈川りせ

Read more

產品開發與Usability

不知道是不是apple的關係，現在開發產品都很重視UX、UI這些東西，不過這些東西說大家都會說，是不是能做出一個大家都覺得好用的東西，可不是一句"我覺得這樣比較好"就可以帶過的事情。

這張是Usability 2.0這本書裡，作者根據馬斯洛的需求理論，所畫出來的面對產品時，使用者的需求層級金字塔。

就每一個層級做一個簡單的說明：

功能性(Functionality)：
對使用者而言最基本的需求就是功能性，產品的功能必須讓使用者有完成工作的"可能性"。

可靠性(Reliability)：
使用者會希望所使用的系統是穩定的、有效率的。

優使性(Usability)：
使用者希望使用個過程是平順而且令人滿意的。

創新(Proficiency)：
創新在這裡指的是，在原有的功能上做得更好，更方便。

創意(Creativity)：
創意大家都可以理解，他看起來是最重要的，但在塔裡看起來又不是最必須的。

從這個需求層級裡，我們可以很清楚的知道，你有沒有創新，在使用者來說可能不是擺在第一的事情，換句更清楚的說明，就是如果你連功能跟可靠性都沒有兼顧到，只是一味追求所謂的創新，也不會吸引到使用者的注意；舉個簡單的例子: 今天你發明了一種泡麵，標榜著大家可以用鼻子吃泡麵，這個點子絕對是非常的有創意，可是大部分的使用者卻沒辦法接受用鼻子吃泡麵這種事情，相對來說這個產品要讓人接受就會有很大的風險在，太過無謂的創意，只會被人當成是神經病。

最近在開發系統就有很強烈的這種感覺，使用者最重視的一定是東西有沒有出來，也就是功能有沒有在，再來會去求功能的穩定性，然後就是東西的易用性，東西的易用性會決定大家喜不喜歡這個東西，但是這之前的兩個東西都不好，這個產品就會被當垃圾，所以前面兩個也是非常重要的項目。

所以產品的開發，絕對不是那麼簡單的一件事，與大家共勉之。

Read more

用jQuery作checkbox選取

因為checkbox的按鈕很小顆，很多時候我們可能會需要做一些功去加大選取範圍，一個方法是使用用jQuery做On/Off切換，可以去變畫checkbox的樣式。

另外也可以偵測使用者點擊某個元素，再去切換checkbox的check。

使用方法很簡單(會了就都很簡單 XD)，使用別的selector去控制checkbox的時候，要先去判斷是否為選取狀態。

view plaincopy to clipboardprint

1. $("input[type='checkbox']").is(":checked")  

之後再去切換checkbox的狀態即可。

view plaincopy to clipboardprint

1. $(this).prop("checked", false);   
2. $(this).prop("checked", true);  

效果就會像這樣

Read more

我的Restaurant City

本來是很喜歡玩Restaurant City的，不過因為中間的一次大改版，就變成我第一個放棄的FB經營類遊戲了。

外觀


內部

Read more

咪醬現身

Read more

10個好用的jQuery技巧

jQuery真的是一個很好學又好用的javascript library，不過在好學的同時，也應該學著怎麼把code寫的漂亮，這篇10 useful jQuery authoring tips有提供一些建議，我覺得超受用的，在寫的時候可以參考一下。

1.懶一點
// Don't
if ($('#item').get(0)) {
$('#item').someFunction();
}

// Or
if ($('#item').length) {
$('#item').someFunction();
}

// Just do
$('#item').someFunction();
不用去判斷元素存不存在，jQuery本身就會去判斷。

2.寫短一點
// You can but..
$(document).ready(function(){
// ...
});

// There is a shorter equivalent
$(function(){
// ...
});
同樣是呼叫jQuery，就用最短的方法就好了。

3.連鎖
// Don't
$('#frame').fadeIn();
$('#frame .title').show();
$('#frame a:visited').hide;

// Do
$('#frame').fadeIn()
.find('.title').show().end()
.find('a:visited').hide();
能連就連吧。

4.同樣的事情就一起做吧
// Ugly
$('div.close').click(closeCallback);
$('button.close').click(closeCallback);
$('input.close').click(closeCallback);

// Not ugly
$('div.close, button.close, input.close')
.click(closeCallback);
記得jQuery可以跟css一樣的選取元素。

Read more

用jQuery製作Gmail title bar效果

昨天一個新需求來，要做類似Gmail那樣的title bar，也就是一般的時候他是在我們看到的位置，當我們把內容往下拖曳，到超過頁面高度的時候，title bar就會卡在畫面的上方。這樣對於Usability來說是一個很棒的設計，因為我們可以在同一個頁面內，看到每個內容是屬於哪一個項目。

製作方法很簡單，首先請到New Gmail like Floating Toolbar jQuery Plugin: v. 1.0下載外掛。

引入外掛。
<script type="text/javascript" src="fixFloat.jquery.js"></script>
然後像這樣使用外掛就可以了。
$(function(){
$(selector).fixFloat(); /**Call our plugin**/
});
值得注意的是，要使用的selector要先把他的position設定為absolute，這樣外掛才可以正常運作。

這邊可以看看使用後的效果。

Read more

星空

剛開始玩flash的時候做的小東西。

Read more

flash月曆

以前做的小月曆。

Read more

CSS的彈性寬度按鈕和float:center效果

以前要使用圓角邊框的時候需要花很多的工，雖然後來CSS支援border-radius屬性，但如果要做比較複雜的背景，還是需要用到原本圓角邊框的做法，這個是用float的方法做出可以彈性延展的原角按鈕。
<a class="s_button" href="#"><span>Cancel</span></a>
之後對a跟span元素套用css就可以了。

另外如果希望像這樣的按鈕群可以置中，我們可以稱他為float:center，只要善用position:relative就可以達成我們要的效果。
#dialog{
position:relative;
}
#content{
position:relative;
float:left;
left:50%;
}
a.s_button {
position:relative;
right:50%;
float: right;
}

觀看效果

Read more

日期選擇器-jdPicker

之前曾經提過我用jQuery UI來做日期選擇器，不過後來朋友說這個用來切換月份及年分需要花很多時間，於是我就找到了這個jdPicker的日期選擇器，用起來比jQuery UI的強上許多，當然除了之前提到的可以比較快速切亂年分外，他的UI不用跟jQuery UI綁在一起，要設計自己的樣式也方便很多，有要在網站做日期選擇器的可以試試這款。

使用的方法很簡單，引入外掛後直接使用他的功能就可以了。
$('selector').jdPicker();
另外也可以使用date_min及date_max來限制時間的區間，最近手邊的計畫就是因為資料在一定區間裡面才有，所以就可以用這個來避免選取到超過範圍的時間，並且也可以用這個來避免要選取區間時，後面的時間比前面的時間還要早的情況發生。

另外也可以使用YYYY/mm/dd, dd MM YYYY, FF dd YYYY, MM dd YYYY, dd/mm/YYYY等來設定時間的格式，不過因為我最近的計畫是把選取到的時間丟到資料庫，去做一個區間的設定，這些格式到後來我都需要再做一個轉換就是了。

觀看效果

Read more

MySQL 複製資料到另一個資料表

最近寫到的，要把兩個資料表合併成一個就很好用，用起來也很簡單。

INSERT INTO table1 (item1, item2, item3...) SELECT item1, item2, item3... FROM table2
這是把table2的東西塞到table1的狀況，後面也可以用WHERE去做一個資料篩選的動作。

上面是兩個資料表欄位都一樣的做法，不過還有更方便的方法，如下就可以建立一個一樣結構的新資料表。
CREATE TABLE new_table LIKE my_db.old_table;

再複製。
INSERT new_table SELECT * FROM my_db.old_table;

Read more