2012年11月30日 星期五

老二出生

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

總之家裡多一個成員啦。

老二出生
Read more

2012年11月29日 星期四

互動裝置設計

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

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

掃東西
這個只要有東西移過去,散在上面的東西就會散開,可以用來投影在地板或牆壁上,人移過去東西就會散開的效果。
AR
AR的話大家都有看過了,手邊的工具要製作起來就很輕鬆。
Read more

2012年11月28日 星期三

2012年11月27日 星期二

2012年11月26日 星期一

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如下
  1. .arrow-up { width:0pxheight:0pxborder:10px solidborder-color:transparent transparent black transparentborder-style:dashed dashed solid dashed; }    
  2. .arrow-down { width:0pxheight:0pxborder:10px solidborder-color:#f00 transparent transparent transparent;/ border-style:solid dashed dashed dashed;  }    
  3. .arrow-right { width:0pxheight:0pxborder:10px solidborder-color:transparent transparent transparent green;/ border-style:dashed dashed dashed solid;  }    
  4. .arrow-left { width:0pxheight:0pxborder:10px solidborder-color:transparent blue transparent transparent;/ border-style:dashed solid dashed dashed;  }  

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

最後效果如下。
triangle
Read more

2012年11月25日 星期日

[PHP] 圖片置中 使用getimagesize

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

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

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

  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

2012年11月24日 星期六

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(),差別在於
  1. window.location.href("url")  
是導到新的頁面,離開後按上一頁、下一頁都可以回到這頁。


  1. window.location.replace("url")  
則不會紀錄上一頁跟下一頁,可以用來作過渡網頁。

另外,
  1. window.location.reload()  
可以用來重新讀取網頁。
Read more

2012年11月22日 星期四

Cover Flow Web

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

Read more

2012年11月18日 星期日

AS 3.0 限制拖曳範圍

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

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

  1. drag_mc.addEventListener(MouseEvent.MOUSE_DOWN,dragme);   
  2. function dragme(e:MouseEvent){   
  3.         drag_mc.startDrag(falsenew 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

2012年11月17日 星期六

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



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

VeryBuy for iOS

app store上的VeryBuy
Read more

jQuery 水平slider

horizontal_slide

最近做的一個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的原理就可以了。

先根據有多少張圖,長出切換的圈圈。
  1. $(".slide_img img").each(function(){   
  2.     $(".pagenation").append("<li></li>");   
  3. });  

再根據圖片的數量調整div的寬度。
  1. $slideImgWidth=$i*(picture width);   
  2. $(".slide_img").css("width",$slideImgWidth);  

最後再偵測是在哪一個圈圈,移動圖片的位置就好了。
  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

2012年11月14日 星期三

[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

2012年11月11日 星期日

北科大FLASH微積分講義

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

微積分
左邊是個章節。

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

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

2012年11月10日 星期六

Flash AS3.0讀取外部文字檔

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

  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去改變高度就可以了。

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

2012年11月9日 星期五

Diving innovation in nature user interface

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可以拿來實作,都是很棒的事情。

然後當然最開心的就是抽中大獎囉
Diving innovation in nature user interface

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

2012年11月8日 星期四

[Robot魂] Billbine(ビルバイン)

Billbine

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

BillbineBillbine
Read more

2012年11月6日 星期二

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

非常勸敗 每日限時好康

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

VeryBuy

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

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

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

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

crc32

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

用法:
  1. int crc32 ( string $str )  

簡單範例
  1. <?php   
  2.   echo crc32('example');   
  3. ?>  

將數值轉正
  1. $crc32=printf("%u"$crc32);  
Read more

2012年11月4日 星期日

參觀保安宮 & 台北孔廟

保安宮

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

2012年11月3日 星期六

章魚小籤籤

抽籤

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

抽籤抽籤

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

抽籤抽籤抽籤抽籤
也有自定籤筒的功能。

那時還有時間去設計一些想做的UI,現在可是忙到想這種非case的UI都沒時間了阿..
Read more
Related Posts Plugin for WordPress, Blogger...