老二出生

過了預產期，送去催生，這次小朋友很快就出來了，不趕還真的不知道要在肚子裡待多久。

總之家裡多一個成員啦。

Read more

互動裝置設計

最近上課學互動裝置的東西，知道原理後就知道該怎麼玩了，不過學校是用Visual Studio開發的，有時間應該來用比較熟悉的工具寫一個看看。


這個是上面會掉泡泡，手去摸可以弄破泡泡。


這個只要有東西移過去，散在上面的東西就會散開，可以用來投影在地板或牆壁上，人移過去東西就會散開的效果。

AR的話大家都有看過了，手邊的工具要製作起來就很輕鬆。

Read more

資訊圖表蒐集站- info graphic world

info graphic(資訊圖表)是近年來很夯的一種資訊表現方式，一張好的info graphic既可吸引人的注意，也可以清楚表達想要表達的資訊。

info graphic world就是蒐集info graphic的網站，一起到上面找靈感吧。

Read more

Javascript Territory- 蒐集javascript library

這是一個蒐集javascript library的網站，有想要的js效果寫不出來，也可以來看看。

Read more

css 畫三角形

用純css畫三角形。

首先準備html，用一個div就可以製作了。
<div class="arrow-up"></div>
<div class="arrow-down"></div>
<div class="arrow-right"></div>
<div class="arrow-left"></div>

css如下

view plaincopy to clipboardprint?

1. .arrow-up { width:0px; height:0px; border:10px solid; border-color:transparent transparent black transparent; border-style:dashed dashed solid dashed; }    
2. .arrow-down { width:0px; height:0px; border:10px solid; border-color:#f00 transparent transparent transparent;/ border-style:solid dashed dashed dashed;  }    
3. .arrow-right { width:0px; height:0px; border:10px solid; border-color:transparent transparent transparent green;/ border-style:dashed dashed dashed solid;  }    
4. .arrow-left { width:0px; height:0px; border:10px solid; border-color:transparent blue transparent transparent;/ border-style:dashed solid dashed dashed;  }  

可以調整一下邊框的顏色跟寬度，不要只有一面不透明，會有不一樣的效果喔。

最後效果如下。

Read more

[PHP] 圖片置中 使用getimagesize

一般社群網站的個人圖像，大多在列表顯示的時候都會是正方形的，這樣會比較整齊，可是不會每個人都上傳圖片的時候都傳正方形的圖片，所以在顯示的時候就要做一些設定。

首先準備一個div包著img，讓外層的div的position為relative，並設overflow:hidden，內層的img則把position設為absolute，這樣可以先避免圖片超出區塊破版。

處理最好是在html讀取的時候就處理，所以用php來取得圖片的長寬，使用GD函式庫的getimagesize。

view plaincopy to clipboardprint?

1. $arr = getimagesize("圖像");   
2. /*  
3. * 回傳陣列$arr  
4. * $arr[0] 為圖像的寬度  
5. * $arr[1] 為圖像的高度  
6. * $arr[2] 為圖像的格式，包括jpg、gif和png等  
7. * $arr[3] 為圖像的寬度和高度，內容為 width="xxx" height="yyy"   
8. */  

取得後判斷長寬哪個比較大，讓小的那個符合div的寬度，並算出大的那個的大小。
最後在計算(較大邊-div長度)/2，求出偏移量，再用行內的style把值給丟進去就可以了。

Read more

GleeFB終止服務公告

親愛的GleeFB會員們：

感謝各位會員夥伴們一直以來的支持。GleeFB的目標是與會員們共創廣告分享的價值並分享廣告利潤，但由於近期Facebook推出了類似的贊助廣告，讓GleeFB的業務推廣日益困難。基於對會員們的重視及承諾，我們仍努力維持每日活動量，但由於業務推展持續不如預期，所獲得的廣告預算難以支持整個模式的運作，使我們不得不作出暫停GleeFB運作的決定。

GleeFB App的分享活動至少仍將持續至2012/11/30，i-bon兌換服務則持續提供至2012/12/31，請各位會員夥伴把握時間進行既有點數的兌換，再次感謝大家的熱情支持！

GleeFB團隊敬上

一個服務的終止其實並沒有什麼，重要的是可以遇到一群喜歡的團隊，我覺得這幾年我遇到的都是一些很值得信賴的團隊，只要有信念，就一定可以改變這個世界的，我是這麼相信的。

當然我們也有下一步的計畫啦.. 敬請期待。

Read more

[GIGA合金] Final斷空我

我認識超獸機神很久，他在我玩的第一款機戰(第四次機器人大戰)就登場了，印象中第四次最後要在超獸機神跟康巴拉V選一組人留到最後，那時的攻略建議留康巴拉V，因為多一個人的精神指令多好用很多，不過後來這兩款作品在機戰中的登場，康巴拉V就只是精神庫，而斷空我大多都是一線的強機。


這個是OVA的翅膀，TV版的比較呆沒那麼好看。

Read more

window.location.href和window.location.replace的差別

javascript的導頁可以用window.location.href和window.location.replace()，差別在於

view plaincopy to clipboardprint?

1. window.location.href("url")  

是導到新的頁面，離開後按上一頁、下一頁都可以回到這頁。

而

view plaincopy to clipboardprint?

1. window.location.replace("url")  

則不會紀錄上一頁跟下一頁，可以用來作過渡網頁。

另外，

view plaincopy to clipboardprint?

1. window.location.reload()  

可以用來重新讀取網頁。

Read more

Cover Flow Web

把網站做成cover flow有沒有搞頭，理論上是做得到，可是不見得會是web上好的瀏覽方式，下面是AE作的示意圖，我也用js寫了一個demo，只是效果還差很多，真的有要進行實作再好好調整。

Read more

AS 3.0 限制拖曳範圍

之前一個專案要做flash的拖曳效果，因為也還滿常有機會用到的，做個筆記。

主要要偵測滑鼠按下及起來，用startDrag(false, new Rectangle(x, y, width, height))去限制他的拖曳範圍就可以了。

view plaincopy to clipboardprint?

1. drag_mc.addEventListener(MouseEvent.MOUSE_DOWN,dragme);   
2. function dragme(e:MouseEvent){   
3.         drag_mc.startDrag(false, new Rectangle(x, y, width, height));   
4. }   
5. drag_mc.addEventListener(MouseEvent.MOUSE_UP,stopdragme);   
6. function stopdragme(e:MouseEvent){   
7.     drag_mc.stopDrag();   
8. }  

Read more

[轉輪科技] アークグレンラガン

アークグレンラガン(ARC GURREN LAGANN)

這隻其實是紅蓮螺巖各個型態中我覺得最醜的，但實在也是玩了機戰，最後才又決定買的。

Read more

非常勸敗 每日限時好康 for iOS

之前介紹的Android版VeryBuy App，現在iOS版的也上線了，照上一篇說的，核心是傳說中的HTML 5，不過包成App有對各個地方作優化，效能還是比不上全原生的app，但開發速度卻可以快非常多。



app store上的VeryBuy

Read more

jQuery 水平slider

最近做的一個slider，當滑鼠移到其中一個圓圈上面，就會滑到那一頁去。

準備像這樣的html
<div class="slide">
<div class="slide_img">
<img src="pic1.jpg">
<img src="pic2.jpg">
<img src="pic3.jpg">
<img src="pic4.jpg">
</div>
<ul class="pagenation">
</ul>
</div><!--slide-->

設定一下css，了解position的原理就可以了。

先根據有多少張圖，長出切換的圈圈。

view plaincopy to clipboardprint?

1. $(".slide_img img").each(function(){   
2.     $(".pagenation").append("<li></li>");   
3. });  

再根據圖片的數量調整div的寬度。

view plaincopy to clipboardprint?

1. $slideImgWidth=$i*(picture width);   
2. $(".slide_img").css("width",$slideImgWidth);  

最後再偵測是在哪一個圈圈，移動圖片的位置就好了。

view plaincopy to clipboardprint?

1. $(".pagenation").on("mouseenter", "li", function(e){   
2.     $pageNum=$(this).index();   
3.     $moveWidth=0-$pageNum*(picture width)+"px";   
4.     $(".slide_img").animate({left: $moveWidth });   
5. });  

Demo

Read more

[SR超合金] 勇者王GAOGAIGAR+勝利之鍵

故事講述2003年，一個神秘巨型機械生命體「EI-01」出現，把當時是太空人的獅子王凱的太空船擊落，同一時間，一架神秘的機械獅子「伽立歐」（Galeon）出現攻擊EI-01，救起了獅子王凱，而EI-01則墜入地球，從此行蹤不明。伽立歐帶來了名為「G石」的動力源以及關於外星生命「腦核」（Zonder）的情報。人類除了以G石的能源將凱救活、並改造成機器人外，也以伽立歐的外星科技情報製造了一系列對抗腦核的武器與機械，日本政府為了對抗腦核而成立了地球防衛勇者隊3G（Gutsy Geoid Guard）。

在EI-01出現前，伽立歐就已出現過地球人之前，他將一個小男孩交給了沒有孩子的天海夫婦，後者將孩子取名為「天海護」，並以一般小學生的身份生活著。2005年，東京都出現了最初的腦核—EI-02，開始對人類發動攻擊，而地球的未來就依靠地球防衛勇者隊3G的隊員，故事也由於展開。

Read more

北科大FLASH微積分講義

這是好一陣子前完成的微積分講義，用Flash寫的，現在這種類型的案子，就會考慮用js來寫了。


左邊是個章節。


點右邊可以看到各頁的內容。

技術上沒什麼特別的，大概就有用到flash內建的component scrollpane來做有卷軸的區塊，這個在html裡面就很簡單，在flash裡面有一點麻煩。

Read more

Flash AS3 清掉MoieClip上Loader讀取進來的東西

這個是要清空MovieClip上之前用loder讀取進來東西，可以用的方法。

view plaincopy to clipboardprint?

1. while(mc.numChildren > 0){   
2.                 mc.removeChildAt(0);   
3. }  

參考：
AS3 How to remove previous loaders

Read more

Flash AS3.0讀取外部文字檔

用actionsctip 3讀取外部文字的方法。

view plaincopy to clipboardprint?

1. var request:URLRequest=new URLRequest("data.txt");    
2. var loader:URLLoader = new URLLoader();    
3. loader.load(request);    
4. loader.addEventListener(Event.COMPLETE,textLoad); //要加這個才讀的到   
5.   
6. function textLoad(e) {   
7.     loadText.text=loader.data;   
8. }  

Read more

jQuery設定div高度等高

如果要用div去製作以往表格的效果，可能會遇到左右沒辦法對稱的問題，這時候可以先抓取原本的高度，然後找去其中最大的值，之後再動態讓Dom去改變高度就可以了。

view plaincopy to clipboardprint?

1. height1=$(selector1).height();   
2. height2=$(selector2).height();   
3. maxHeight=Math.max(height1=, height12);   
4. $(selector1, selector2).height(maxHeight);  

Read more

Diving innovation in nature user interface

今天去參加一個論壇，講的是UI跟UX。

這次聽到所謂的NUI，NUI是UI的一種，講者從開始有電子產品的文字介面TUI(Text User Interface)，用圖形的GUI(Graphical User Interface)，到這次提到的NUI(Nature User Interface)，是一種UI的演進過程，因為載具的多元化跟進步，原本的GUI是不夠的，於是就有人提到NUI這個概念，而這個概念其實也成型十幾年了。

你可以想像電影關鍵報告，那種在空中一些手勢就可以操作機器，就是所謂的NUI，也就是除了介面外，也要考慮到操作的流程跟動作的UI。講者也說到AE是用來溝通設計師跟工程師的一個很重要的工具，我還滿開心兩個都會的，AE可以來作概念，js可以拿來實作，都是很棒的事情。

然後當然最開心的就是抽中大獎囉


第一次知道那種抽到大獎的人的感覺，我還以為這種幸運總是跟我絕緣的呢。

Read more

[Robot魂] ビルバイン(比爾拜因)

機器人大戰裡面我很喜歡的系列聖戰士ダンバイン，終於也在Robot魂上登場了，第一款就是後繼機ビルバイン，大多時候有了後繼機就不會回頭買一開始主角駕駛的機體，所以不久後出的ダンバイン我就沒收了。

Read more

非常勸敗 每日限時好康 for Android

最近完成的app作品，是跟幾個朋友用傳說中的hybrid方法開發出來的app，內容是html+css+js呈現，再用原生的程式包起來完成的，在開發的過程中也碰到一些有趣的問題，加上合作的朋友都很厲害，所以這個app是在彈性、開發速度和效能取得很好平衡的一隻app。



android跟iOS是差不多同時完成的，不過因為apple審核比較久的關係，所以目前只有android上看的到，iOS還在審核中。

Google Play上的非常勸敗 每日限時好康

非常勸敗每日限時好康提供來自於台灣各大購物網站的優惠、免運訊息、每日超過100檔的優惠情報，是女生逛網拍、找團購、上網購物的好姊妹。

非常勸敗每日限時好康是由非常勸敗(Verybuy)製作，每日提供來自於購物中心、拍賣、17P好康、7Net、瘋狂賣客、UDN買東西、PCHome等數十家購物網站的優惠免運訊息、每日超過100檔的優惠情報，是女生逛網拍、找團購、上網購物的好姊妹。

Read more

crc32

crc32是一個用來產生驗證碼的方法，可以用來在資料傳輸時加密，最近的專案有用到剛好也學起來。

用法：

view plaincopy to clipboardprint?

1. int crc32 ( string $str )  

簡單範例

view plaincopy to clipboardprint?

1. <?php   
2.   echo crc32('example');   
3. ?>  

將數值轉正

view plaincopy to clipboardprint?

1. $crc32=printf("%u", $crc32);  

Read more

參觀保安宮 & 台北孔廟

這學期一門課，老師常帶我們去參觀各種建築物，有導覽感覺真的差很多，建築物都有他的許多精神在裡面，這次去保安宮還有台北孔廟，學到了龍生九子，不知道這個典故是真的龍有這麼多兒子，還是古人想像而來的。

Read more

章魚小籤籤

這是剛在做手機app的時候本來想實作的一個計畫，後來因為合作的朋友覺得沒什麼機會就沒做了，不過我還滿喜歡這個app的，也是目前為止唯一一個有用到3D去繪製的UI。



大致用法就是選了籤就可以開始搖了。


也有自定籤筒的功能。

那時還有時間去設計一些想做的UI，現在可是忙到想這種非case的UI都沒時間了阿..

Read more