2013年2月27日 星期三

Dieter Rams 提出的好設計的十大準則

德國工業設計師Dieter Rams提出的十大設計準則。

• Good design is innovative

• Good design makes a product useful

• Good design is aesthetic

• Good design helps us to understand a product

• Good design is unobtrusive

• Good design is honest

• Good design is long-lasting

• Good design is consequent to the last detail

• Good design is concerned with the environment

• Good design is as little design as possible
Read more

2013年2月26日 星期二

javascript 判斷是否上線- navigator.onLine

判斷目前是否在連線狀態,基本的用法如下
  1. document.write( navigator.onLine );  
會回傳ture或false

像fb就有用這個功能,當你是斷線的狀態,好友動態跟聊天室就會變半透明,顯示為離線狀態。

所以在html內加一個id="check"的div,讓他顯示目前是否online
  1. checkOnLine();   
  2. function checkOnLine(){   
  3.     if (typeof(navigator.onLine)!="undefined"){   
  4.         checkHandler();   
  5.     }else{   
  6.         $("#check").text("你的瀏覽器不支援偵測是否online");   
  7.     }   
  8. }   
  9. function checkHandler(){   
  10.     var status=navigator.onLine;   
  11.     if(status){   
  12.         $("#check").text("online");   
  13.     }else{   
  14.         $("#check").text("offline");   
  15.     }   
  16. }  

可以增加一個button,點擊後檢查是否online
  1. $("#checkBtn").click(function(){   
  2.     checkOnLine()   
  3. });  

如果要在切換online/offline就判斷,就要用
  1. $(window).on("online offline", checkOnLine());  

Demo

參考
Check if connected to a network; jQuery
JavaScript navigator.onLine連線或離線偵測模式
Read more

[HG] Gundam AGE-1 Normal

Gundam AGE-1 Normal

自人類移民至太空殖民地以來,經過了數百年的宇宙時代,圍繞地球圈霸權的爭奪戰爭結束,大家以為和平的時代終於到來。

A.G.101年,突然出現的未知敵人(Unknown Enemy。以下簡稱「UE」)前來襲擊,太空殖民地「天使」完全崩毀,死傷無數。這事件就是「天使的落日」,它讓居住於地球圈的人類,再度陷入漫長的苦痛之中,而此事亦為長達一百年的戰爭揭開序幕。

介紹來自wiki

Gundam AGE-1 NormalGundam AGE-1 Normal
Read more

2013年2月24日 星期日

HTML 5 Page Visibility- 判斷網頁是否可視

HTML 5

Page Visibility是html 5新的API,可以判斷現在是不是可見狀態,如果切換到別的tab或把瀏覽器縮到最小,就可以偵測並觸發事件。一般用在js必須要不斷執行的地方,比如說time interval,或是video的播放,當使用者沒有在當前頁面,可以節省資源的浪費。

首先判斷瀏覽器
  1. var hidden, visibilityChange;   
  2. if (typeof document.hidden !== "undefined") { // Opera 12.10 and Firefox 18 and later support   
  3.     hidden = "hidden";   
  4.     visibilityChange = "visibilitychange";   
  5. else if (typeof document.mozHidden !== "undefined") {   
  6.     hidden = "mozHidden";   
  7.     visibilityChange = "mozvisibilitychange";   
  8. else if (typeof document.msHidden !== "undefined") {   
  9.     hidden = "msHidden";   
  10.     visibilityChange = "msvisibilitychange";   
  11. else if (typeof document.webkitHidden !== "undefined") {   
  12.     hidden = "webkitHidden";   
  13.     visibilityChange = "webkitvisibilitychange";   
  14. }  
Read more

2013年2月21日 星期四

[HG] Hi-ν Gundam

Hi-ν Gundam
於逆襲的夏亞小說版《貝爾德琪嘉的子嗣》及《HIGH STREAMER(高空流光)》(兩本小說之間劇情不盡相同)中出現,是RX-93的發展型號,與原機不同,本機經過了充分的測試才投入戰場,性能與RX-93相比大大提高,最大的改進就是其翼狀感應炮在收納狀態時可以進行充電。

介紹來自wiki

Hi-ν GundamHi-ν Gundam
Hi-ν Gundam是一架沒在動畫登場,可是卻非常有人氣的作品,除了他是阿姆羅搭乘的最後一架機體外,沒在其他機體出現過的翼型感應砲是最大特色,我想可能也是大多數人喜歡這架機體的原因。
Read more

2013年2月20日 星期三

Flash 開發 Android App- 基本touch event

在Flash CS 5.5版之後,Flash就可以直接開發Android跟iOS的app了,這是第一個測試的作品。

AIR Android App- Cat
首先開檔案的時候選擇AIR for Android

基本做法都一樣,就用習慣的方法來做就好了。
AIR Android App- Cat

AIR Android App- Cat
這次很基礎的,只做事件的偵測變換小貓的動作,所以我放了兩個flag,等等依據事件不同切換。
Read more

千生大將軍 雷帝千生神將軍 大牙頑駄無超將軍 飛天頑駄無超將軍

還真懷念以前的BB戰士阿.. 所以現在才有傳說系列 XD

千生大將軍
千生大將軍
千生大將軍,為了掃蕩世上一切邪惡,他微服出巡到各國視察,因此人們又稱他為好好將軍,他是位相信正義,友情的樂觀之人,喜愛南洋傳入的水果-香蕉!在旅途中解救了被小孩子欺負的火蜥蜴,火蜥蜴為了報恩與千生將軍合體成為了千生大將軍! 原型是F91。
Read more

2013年2月19日 星期二

jQuery 鍵盤事件

鍵盤事件也是很常用到的javascript事件,基本用法像這樣

  1. $(selector).keypress(function(e){   
  2.     if (e.keyCode==13){ //判斷按鍵, 13為enter   
  3.   
  4.     }   
  5. });  
});

鍵盤事件有.keydown()、.keypress()跟.keyup(),.keyup()比較不一樣可以理解,而keydown跟keypress的差別如下
KeyPress: invoked only for character (printable) keys
KeyDown: raised for nonprintable such as Control, Shift, etc.

在使用上,如果沒有判斷按下的按鍵,則只要按下任意按鍵都會執行,加上判斷按下的按鍵後,就可以對各按鍵執行不同的行為。

可以看這篇對照按下按鈕的keycode
Key Codes
Read more

AngularJS templating links



上一個範例中的json還有一些資訊
  1. [   
  2. {   
  3. ...   
  4. "id""motorola-defy-with-motoblur",   
  5. "imageUrl""img/phones/motorola-defy-with-motoblur.0.jpg",   
  6. "name""Motorola DEFY\u2122 with MOTOBLUR\u2122",   
  7. ...   
  8. },   
  9. ...   
  10. ]  

現在來做不換頁,卻可以更換url的方法,這個在ajax用很兇的page會很方便,可以再不換頁的情況下,紀錄先前瀏覽的位置。

再來將html改成這樣
  1. <ul class="phones">  
  2.     <li ng-repeat="phone in phones | filter:query | orderBy:orderProp" class="thumbnail">  
  3.         <a href="#/phones/{{phone.id}}" class="thumb"><img ng-src="{{phone.imageUrl}}"></a>  
  4.         <a href="#/phones/{{phone.id}}">{{phone.name}}</a>  
  5.         <p>{{phone.snippet}}</p>  
  6.     </li>  
  7. </ul>  

AngularJS在這邊的href內帶入了每個手機的id #/phones/{{phone.id}},用ng-src取代原本img的src,因為AngularJS是整個網站載完後才開始編譯,用ng-src可以避免還沒載入完html發生的錯誤。

Demo

Templating Links & Images
Read more

2013年2月18日 星期一

AngularJS XHRs & Dependency Injection


看到這個覺得很開心,因為用XHRs & Dependency Injection可以很輕易的把json資料讀到html裡面了,首先html用上一個範例的。

  1. <div ng-controller="PhoneListCtrl">  
  2.         Search: <input ng-model="query">  
  3.         Sort by:   
  4.         <select ng-model="orderProp">  
  5.           <option value="name">Alphabetical</option>  
  6.           <option value="age">Newest</option>  
  7.         </select>  
  8.       <div class="phone_lists">  
  9.         <ul class="phones">  
  10.           <li ng-repeat="phone in phones | filter:query | orderBy:orderProp">  
  11.             {{phone.name}}   
  12.             <p>{{phone.snippet}}</p>  
  13.           </li>  
  14.         </ul>  
  15.       </div>  
  16.   </div>  

然後準備一個像這樣的json檔,取名phones.json
  1. [   
  2. {   
  3. "age": 13,   
  4. "id""motorola-defy-with-motoblur",   
  5. "name""Motorola DEFY\u2122 with MOTOBLUR\u2122",   
  6. "snippet""Are you ready for everything life throws your way?"  
  7. ...   
  8. },   
  9. ...   
  10. ]  
Read more

2013年2月17日 星期日

AngularJS 雙向綁定



angular要做資料的排序也很簡單,像這樣在html內加上另一個ng-model
  1. Search: <input ng-model="query">  
  2. Sort by:   
  3.         <select ng-model="orderProp">  
  4.             <option value="name">Alphabetical</option>  
  5.             <option value="age">Newest</option>  
  6.         </select>  
  7. <ul>  
  8.     <li ng-repeat="phone in phones | filter:query | orderBy:orderProp"">  
  9.         {{phone.name}}   
  10.         <p>{{phone.snippet}}</p>  
  11.     </li>  
  12. </ul>  

在原本的json內新增一個屬性
  1. function PhoneListCtrl($scope) {   
  2.   $scope.phones = [   
  3.     {"name""Nexus S",   
  4.      "snippet""Fast just got faster with Nexus S.",   
  5.      "age": 0},   
  6.     {"name""Motorola XOOM™ with Wi-Fi",   
  7.      "snippet""The Next, Next Generation tablet.",   
  8.      "age": 1},   
  9.     {"name""MOTOROLA XOOM™",   
  10.      "snippet""The Next, Next Generation tablet.",   
  11.      "age": 2}   
  12.   ];   
  13.   
  14.   $scope.orderProp = 'age';   
  15. }  
orderProp是預設的排序選項,如果要反序,只要在後面加orderBy:orderProp:true就可以了。

Demo
參考:
Two-way Data Binding
AngularJS入门教程04:双向绑定
Read more

AngularJS 篩選器 filter



AngularJS也可以很方便的做篩選的功能,續前例,在html內加一個ng-model

  1. Search: <input ng-model="query">  

然後在原本的迴圈內加上filter
基本語法
  1. {{ expression | filter }}  

  1. <li ng-repeat="phone in phones | filter:query">   
  2.     {{phone.name}}   
  3.     <p>{{phone.snippet}}</p>   
  4. </li>  

Demo
參考
官方文件
AngularJS入门教程09:过滤器

不只是search的filter,也可以做更進階的應用: AngularJS Filters

Read more

AngularJS 迴圈讀取資料 ng-repeat



在AngularJS內要寫迴圈也很方便,準備類似下面的html
  1. <div ng-controller="PhoneListCtrl">    
  2.     <ul>   
  3.         <li ng-repeat="phone in phones">   
  4.             {{phone.name}}   
  5.             <p>{{phone.snippet}}</p>   
  6.         </li>   
  7.     </ul>   
  8. </div>   
Read more

[HG] Unicorn Gundam

Unicorn Gundam

作為連邦宇宙軍再編計劃的一環,「UC計畫」最終階段開發的實驗機,為New Type專用MS。此機種在宇宙世紀0096年共造出了2台,即分別為RX-0 獨角獸鋼彈及RX-0 獨角獸鋼彈二號機「報喪女妖」。二號機和一號機最大差異在紫黑色的塗裝和頭部的「角」。兩機最大的特徵為裝備了「NT-D system」。
Wiki的介紹

Unicorn Gundam
Unicorn Gundam
正面跟背面
Read more

2013年2月16日 星期六

[MG] GUNDAM NT-1 ALEX

GUNDAM ALEX
一年戰爭末期,吉翁軍特殊部隊「獨眼巨人」(Cyclops)查知地球聯邦軍正著手開發新型的鋼彈,為了奪取該機體而襲擊北極的聯邦軍基地,但任務失敗,目標被送上宇宙。後來經由偶然得手的情報,得知新型鋼彈已被運往中立的太空殖民地Side6的吉翁軍再度派遣獨眼巨人隊潛入 Side6,並企圖奪取。
說明來自wiki的介紹

GUNDAM ALEX
GUNDAM ALEX
Gundam Wiki的資料
Read more

SD戰國傳 天與地

為慶祝天地城落成,武者頑駄無與精太頑駄無兩人進行模擬戰鬥,武者頑駄無突然被奇妙的光芒包圍,原來武者被武田信玄的靈魂附身!精太則被軍神謙信附身,在模擬戰完後,一切又恢復原來的樣子!

這是為了當年電影"天與地"特地推出的模型,後來曾經是BB戰事中的夢幻逸品好長一陣子,我則是在幾年前的復刻才入手。

信玄頑駄無信玄頑駄無
信玄頑駄無

謙信頑駄無謙信頑駄無
謙信頑駄無

謙信頑駄無 & 信玄頑駄無謙信頑駄無 & 信玄頑駄無

之前曾經出過的武神降臨篇,則跟天與地的推出有點類似,但當時應該是趁著大河劇天地人推出的改模套件,所以裡面有比較起來沒那麼有名的直江兼續頑駄無。只是有趣的是推出真正的日本戰國的BB戰士,銷量卻不是那麼好,在武神降臨後推出的三國傳系列,才算是BB戰士的大成功系列。
Read more

2013年2月15日 星期五

Hello! 開始使用AngularJS

AngularJS-large
HTML是web的基本,Angular則是可以快速幫忙打造一個web app的模板語言,這是朋友強力推薦的東西,最近也要來研究看看。

官網:
AngularJS

首先看一下下面這段官網提供的code:
  1. <!DOCTYPE html>     
  2.     <html ng-app>     
  3.       <head>     
  4.         <title>Hello AngularJS</title>     
  5.         <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script>     
  6.       </head>     
  7.       <body>      
  8.         <p>Hello {{yourName }}!</p>     
  9.           <label>Name: </label>     
  10.           <input type="text" ng-model="yourName" placeholder="Enter a name here">     
  11.       </body>     
  12. </html>    

測試網址如下
Hello Angular

可以看到他只是在html加上ng-app,在input的地方加上ng-model="yourName",並在要output的地方放上{{yourName }},連一行程式都不用寫,就可以完成一個有動態效果的網頁了,很神奇吧。

Read more

2013年2月14日 星期四

SD 鋼彈 武者G世紀

「SD鋼彈 武者G世紀」(SDガンダム ムシャジェネレーション)是SD戰國傳系列第十二作,在設定集「武者英雄譚」中,以此部作品,作為SD戰國傳的真正前傳。角色原型及模型作品,採用SD鋼彈G世代商品為兼用件,以半舊模半新件方式推出。

故事是發生在武者鋼彈未曾出現、世界依然有人類出現的「天主之國」中。由人類操縱的機械,稱為「武者」。有一天,「黑色武士團」發動叛變,將天主之國女王「月姬」擄走。為救出月姬,少年武士「侶蘭」決定駕駛白色的魔神像「武者Turn-A」,挑戰由東方不敗率領的黑色武者團。最後在與軍團真正首領、由古化文明時期殘存至今、被稱為「皇帝」的巨大電子頭腦交戰時,月姬一族代代相傳的「鋼彈結晶」,令武者Turn-A獲得自我意識,成為「武者實驗型鋼彈」。最後更將「皇帝」打倒。

隨著時代過去,「機動兵器」亦進化成「機械生命體」,亦即是後來的「武者頑馱無」。

文字說明來自Wiki

這是剛推出SD GUNDAM G GENERATION的時候,配合遊戲推出的許多SD版的機體,也為了G Generation開了一個新的系列的模型系列,獨立於原本的BB戰士之外,系列裡面有許多舊模新出,也有不少是開新模的模型。而武者G世紀則是把裡面的一些機體修改一下造型,推出的武者系列作品,只是劇情很薄弱,角色又都是用鋼彈內的人物套上漢字而已,也是BB戰士在走下坡後推出的系列,市場反應應該是很不理想。

武者Turn-A鋼彈
武者Turn-A鋼彈
武者Turn-A鋼彈
武者Turn-A鋼彈/侶蘭(羅蘭)

本篇主角機,由少年武士.侶蘭所召喚的白色魔神像,可使用將光粒子轉化成武器的閃光兵器,以及裝備巨大雙翼的「月光神盾」,成為「月光戰神型態」。原本是無意識的機體,獲得鋼彈結晶力量後,才獲得自我意識。

別名「月光戰神」。
Read more

新手機入手- Xperia SL

Xperia SL
Xperia SL

過年有空買了新的手機,其實上市也好一段時間了,不過一樣因為想買Android系統,又排除hTC跟Samsung,好像就剩SONY了。

◎ 4.3 吋 Mobile BRAVIA Engine 生活防刮觸控螢幕、1,280 x 720pixels 螢幕解析度
◎ No air gap 無空氣間隙螢幕技術、生活防刮螢幕
◎ 採用 Android 4.0 Ice Cream Sandwich 作業系統
◎ 內建 Qualcomm S3 MSM8260, 1.7GHz 雙核心處理器
◎ 1,200 萬畫素相機、130 萬畫素前置視訊相機
◎ 支援 1080P Full HD 影片錄製、16 倍數位變焦
◎ Exmor R for mobile 感光元件、1.5 秒快速拍攝模式、3D 全景影像
◎ 支援 HSPA、Wi-Fi 無線網路與熱點
◎ 內建 xLOUD 音效增強技術、Facebook inside Xperia 社群整合介面
◎ 內建 HDMI、DLNA、3.5mm 耳機孔、GPS、NFC 近距離無線通訊技術
◎ 內建 1GB RAM / 32GB ROM 記憶體組合,microSIM(小卡)設計
Read more

2013年2月13日 星期三

[扭蛋盒玩] 海賊王 水之七島篇

我買的第一套海賊王的轉蛋,拿出來重拍才發現跟後來的強者天下、新世界篇的比例有點不一樣,後來修正的又更好看了。

這是水之七島篇的造型,除了魯海外還有四個CP9的成員。

Luffy
魯夫

Zoro
索隆

Sangi
香吉士

Nami
娜美
Read more

2013年2月11日 星期一

[ROBOT魂] ヴォルケイン

ヴォルケイン

既然有了劍,就要買一下槍,這是槍與劍裡的槍,跟Dann of Thursday比起來,就是剛好相反的存在,重武裝、長距離、笨重的造型,還有比較醜的造型(爆)。

ヴォルケインヴォルケイン

感覺很笨重的機器人,造型也比較偏軍武風,披風是特色,在動畫裡還蠻帥的。ROBOT魂則是以很多個零件拼起來,讓他可以擺出很多個角度,這方面BANDAI也有在進步,最開始買無盡華爾滋的沙漠,用不織布的披風,看起來很有質感,不過皺摺完全沒有動畫中那種感覺,接下來GFF的骷髏鋼彈則用塑膠的固定造型,雖然型好看了,可是又變得沒有彈性,這架則採用這樣的設計,斷面有點怪,但擺姿勢跟整體造型就變得比較彈性了。
Read more

jquery- 類似蘋果的選單

cnanney-slide-menu
來弄一個類似蘋果產品介紹的選單。

外掛網址:
cool jQuery Apple’s New Slide Menu

參考結構準備html
<div id="menu-container">
<div id="loading"></div>
<ul>
<li><a href="#"><img src="assets/img/aep.png" /></a><h4><a href="#">After Effect</a></h4></li>
<li><a href="#"><img src="assets/img/ai.png" /></a><h4><a href="#">Illustrator</a></h4></li>
<li><a href="#"><img src="assets/img/fla.png" /></a><h4><a href="#">FLASH</a></h4></li>
<li><a href="#"><img src="assets/img/indd.png" /></a><h4><a href="#">InDesign</a></h4></li>
<li><a href="#"><img src="assets/img/psd.png" /></a><h4><a href="#">Photoshop</a></h4></li>
</ul>
</div>


另外要準備選單的
<div id="menu-controls">
<a href="#" data-target="0" class="active">Adobe</a>
<a href="#" data-target="1">Document</a>
<a href="#" data-target="2">Web</a>
<a href="#" data-target="3">Image</a>
</div>

Read more

2013年2月10日 星期日

Related Posts Plugin for WordPress, Blogger...