2012年3月31日 星期六

聖戦士ダンバイン

聖戦士ダンバイン是以前出的類似HG的模型系列,出了不少款機體,主角跟主要敵人的機體都有出到,後來重戰機也打算推出類似的產品線,但後來只草草出了幾架就沒了,連艾爾鋼Mk-II都沒有出。不過最近Robot先出了重戰機系列,再來還有看到聖戰士系列,看來是值得期待了。

ダンバイン
ダンバイン
Read more

2012年3月29日 星期四

[HG] Extreme Gundam

Extreme Gundam

機體出自"Gundam Extreme Versus"的大魔王,雖說是大魔王,可是配色倒還是蠻中規中矩的好人配色,而看起來不像大魔王的關係是這個是基本款,雜誌上有其他裝備的型態,看起來就真的比較像大魔王了。

Extreme Gundam
Extreme Gundam
Read more

2012年3月28日 星期三

手滑買了flickr pro

因為上次去喝喜酒的失策,傳了高解析度的圖片到flickr,讓這個月的免費上傳額度就滿了,所以昨天下定決心買了flickr pro,線上刷卡弄一弄就購買成功了,真的很可怕阿..

然後今天就邊工作邊放著傳照片,傳上去的照片看起來超漂亮。

這是我的flickr相簿


之後就可以開心的搭配FlickrLinkr來寫網誌囉。
Read more

jQuery浮動視窗- Sticky Sidebar

559946_3495198308469_1960480654_n

當我們在瀏覽一些網頁的時候,有時會看到旁邊有一塊東西浮在那邊,當我們捲動視窗後,過一下子那塊東西就又跑到畫面上一樣的地方,這種很常用來做重要消息或廣告放置的地方,而當然jQuery上也有人提供了外掛,可以很輕鬆的做出這種效果。

首先到jQuery-Stickybox下載外掛。

然後使用position的relative跟absolute技巧幫浮動視窗固定在一個位置上。

之後像這樣使用外掛即可。
  1. $(selector).stickySidebar("remove")  

另外還有一些參數可以設定。
speed (default = 150) - 移動時間
easing (default = 'linear') - 開始和結束的動畫效果,須搭配easing的plugin,下載後裡面就有了
padding (default = 10) - 離頂層的距離
constrain (default = false) - 設true可以移超出母元素
Read more

2012年3月26日 星期一

jQuery UI Spinner

294958_3483819023994_958307491_n
jquery.ui.spinner

之前用一個外掛來製作可以點上跟下的按鈕就可以加減數字,不過最近發現在ie上會出現bug,後來就再找其他的plugin,發現這個,測試後不會發生之前在ie上的bug,以後可以使用這個。

引入後像這樣使用就可以了。
  1. $( "selector" ).spinner({min: num ,max: num});  

缺點是因為他有使用jQuery UI,改起樣式很麻煩 - -,不過如果是想直接使用jQuery UI樣式的話倒是可以省很多工。

在html5則是直貼提供了新的input type,也可以試試看。
Read more

2012年3月22日 星期四

HP33- HTML5

昨天去參加了HP33的活動,這次Richard說是HPX有史以來最硬的一次活動,不過我聽了卻很開心,現場有三成是Developer,有三成是Art,然後我兩邊都是。

昨天第一個上場的是Sean,講了很多js的開發工具,整理一下,對之後的開發是很有幫助的。
Apple Apps Store- Web base開發的apps。
Responsive Web Design
Html5 Boilerplate.
Modernizr-相容工具
backbone.js-js前端MVC開發工具
hogan.js

第二個是Wii保哥,常常可以google到他的文章,這是第一次看到本人,他講的就比較多hmtl5了,聽他說Win8可以用web來開發os的app,就更有研究的熱血了。
投影片
Responsive Web Design逐步教學
讓ie6~ie8支援html5
Pllyfills-讓舊瀏覽器可以使用html5的API

第三個是Mr. PM的團隊,說他們開發app的經驗,實務的經驗加上對各種開發模式的說明,都很有幫助。

今天要去javascript的聚會啦,希望我可以聽得懂。

Read more

2012年3月19日 星期一

基礎html5 canvas

HTML5有一個很特別的東西就是canvas,開始來簡單介紹一下canvas。

首先canvas也是一個tag,然後給他一個id。當瀏覽器不支援canvas時,會顯示被包起來的中間的內容。
<canvas id="myCanvas" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>

484411_3440050209801_2085273331_n
  1. var canvas=document.getElementById("myCanvas");   
  2. var cxt=canvas.getContext("2d");   
  3. cxt.fillStyle="#ff0000";   
  4. cxt.fillRect(0,0,150,75);  
像這樣就可以畫出一個簡單的矩形填色。
fillStyle指的是填色的樣式,這邊用單色填色。
fillRect是畫一個矩形,數值分別代表(x1, x2 ,y1, y2)

如果想填漸層色。
css3 gradient
  1. var grd=cxt.createLinearGradient(0,0,175,50);   
  2. grd.addColorStop(0,"#FF0000");   
  3. grd.addColorStop(1,"#00FF00");   
  4. cxt.fillStyle=grd;   
  5. cxt.fillRect(0,0,175,100);  
把fillStyle換成漸層填色。
Read more

2012年3月18日 星期日

秀娟文定

今天是秀娟文定的日子,想說順便帶小朋友去彰化玩玩。
P1080002
買早餐的時候小朋友很開心的跟小鳥玩。

P1080003
P1080004
第一次搭自強號。

P1080005
抵達員林火車站。
Read more

2012年3月17日 星期六

Gundam Ez8

GUNDAM Ez-8
Gundam Ez8是08ms小隊主人工後期開的機體,為了在宇宙作戰而做了一次改裝,成為「Ez8(改)」。這次改裝不但令Ez8可在宇宙戰鬥,還可以改裝成HAC(Heavy Arms Custom)和HMC(High Mobility Custom)種形態。前者有強大的火力,而HMC則擁有極高機動性。

GUNDAM Ez-8
GUNDAM Ez-8
Read more

暗黑破壞神降臨

暗黑破壞神降臨1
暗黑破壞神降臨2


暗黑破壞神降臨3

等了十幾年,終於等到Diablo3了,馬雅人在幾千年前就預言到暗黑破壞神會在2012降臨,真的很厲害!!

如果真的有世界末日,總是等到了暗黑3,可以說是死而無憾了(誤)

到時大家在暗黑上見啦。
Read more

2012年3月16日 星期五

CSS3的3D Transition

css33d
CSS3可以做3D的變形,不過是基本的繞著XYZ軸的變形,但還是可以玩一些新東西,連著transition一起來介紹一下。

首先準備這樣的結構。
<div class="box" id="b1">
<img src="pic.jpg">
</div>
<div class="box" id="b2">
<img src="pic.jpg">
</div>
<div class="box" id="b3">
<img src="pic.jpg">

做一個當我們滑過圖片的時候,他會有一個翻轉的效果。

還沒用過transition的可以參考這篇說明。
.box img
{
transition: all 2s;
-moz-transition: all 2s;
-webkit-transition: all 2s;
-o-transition: all 2s;
}

這邊讓box下面的img有transition的效果。

最後當我們滑過三張圖片的時候,分別做X, Y, Z軸的旋轉。
#b1:hover img{
transform: rotateX(180deg);
-webkit-transform: rotateX(180deg); /* Safari and Chrome */
-moz-transform: rotateX(180deg); /* Firefox */
}
#b2:hover img{
transform: rotateY(180deg);
-webkit-transform: rotateY(180deg); /* Safari and Chrome */
-moz-transform: rotateY(180deg); /* Firefox */
}
#b3:hover img{
transform: rotateZ(180deg);
-webkit-transform: rotateZ(180deg); /* Safari and Chrome */
-moz-transform: rotateZ(180deg); /* Firefox */
}


DEMO

Read more

2012年3月15日 星期四

使用js的setInterval實現網頁打字機效果

練習用jquery寫打字機的效果。

  1. var typingText="放一段文字在這裡,讓它像打字機一樣一個一個的打出來,顯示出來";   
  2. var count=0;   
  3. var $myBlock=$("#myDiv");   
  4.   
  5. function type(){   
  6.     if(count<=typingText.length){   
  7.         $myBlock.html(typingText.substring(0, count));   
  8.         count++;   
  9.     }else{   
  10.         window.clearInterval(typewriter);      
  11.     }   
  12. }   
  13. var typewriter=window.setInterval(type ,200);  

setInterval的應用跟clearInterval,之前寫的東西就是沒有clearInterval,會浪費效能。

Demo
Read more

2012年3月12日 星期一

FlickrLinkr 幫你簡單取得flickr的圖片網址

flickr linkr
FlikrLinkr是最近跟朋友完成的一個小服務,看名字就知道,我們是使用Flickr的API延伸做的服務,因為我們兩個都有寫網誌的習慣,而Flickr因為其空間便宜跟縮圖漂亮都變成了我們放圖片首選的服務。但是Flickr雖然瀏覽圖片方便,可是像我們這樣想要寫部落格的時候,要複製圖片的連結,卻會很花時間,於是我們就想說既然我們都會寫程式,乾脆就來弄一個簡單可以取得flickr圖片網址的服務好了。

使用說明:

第一步

連上FlickrLinkr

服務很單純,你只要輸入Flickr帳戶的顯示名稱,按下搜尋等一下子,就會把相簿都撈進來了。


第二步

選擇相簿點進去。




第三步

選擇你要複製網址的圖片了,點選右邊的縮圖,左邊也會跟著切換圖片。



複製連結說明


上面可以選擇你要複製的圖片大小,以及是否可以點圖片後連回flickr。



之後就可以選取複製圖片的網址了。


我們希望可以讓使用者用最快最直覺的方式去複製圖片的網址,所以如果對於使用上有什麼建議,也歡迎回饋給我們知道。

如果你也喜歡用flickr搭配寫部落格,可以試試看喔。
Read more

2012年3月10日 星期六

2012年3月8日 星期四

[SR超合金] ソーラーアクエリオン

創聖のアクエリオン
創聖記0011年,地球發生了一場大異變。南極的冰層溶解,原本在1萬2千年前被毀滅的亞特蘭迪亞浮現,長著羽翼的民族墜天翅族蘇醒。墜天翅族擁有超過人類的高度智能與特殊力量。1萬2千年前他們在亞特蘭迪亞建立起高度的文明,對他們稱為無翼者的人類肆意捕殺。然而人類也沒有放棄反擊的機會,自海底遺跡挖掘出在「創聖之書」中,傳說的兵器——3架古文明的戰鬥機Vector Machine,藉由不同的組合的變形、合體。Vector Machine可化成不同形態的人形兵器機械天使。當時墜天翅族最強的守護天翅阿波羅尼亞斯,便是與人類靠著機械天使的力量,將原本優勢佔盡的墜天翅族逼進滅亡的深淵,為了與墜天翅族對抗,新聯合國設立了地球再生機構—DEAVA,負責運用機械天使。因此,一群擁有特殊能力的少男少女被召集起來,訓練成為機械天使的駕駛員。

創聖のアクエリオン
創聖のアクエリオン
Read more

2012年3月7日 星期三

CSS的position

position我稱他為css排版的大絕招,如果你不懂DOM inline跟box的差別,常常用了float就讓網頁排版整個毀掉,只要你搞懂position,你就可以照你的意思隨意排版了,不過我用的時候也是很謹慎,這點就有機會排一些比較複雜的版面就會了解了。

使用position後有幾個屬性可以設:
static: 預設值,不特別設的時候就是這個,如果因為網頁已經繼承的讓版面跑掉,就再把position設回就好。
absolute: 網頁內的絕對位置,如果上層的DOM沒有position: relative; 屬性,則絕對位置是對於網頁整體而言,比方設top:0; left:0; 就會在網頁的左上角。此外設了absolute後DOM會從網頁被挖出來,後面的DOM會自動填補上去。
relative: 網頁內的相對位置,是相對於DOM原本的位置,DOM並不會從網頁被挖出來。
fixed: 固定於瀏覽器的某個位置,DOM也會被挖出來,有時候看到不管網頁怎麼捲動,都會有一個東西固定在那邊,就是設定了fixed。

此外設了position後,除了static外,就可以再做另外的設定,初學者常以為直接給位置或z-index就可以改變位置,但記住一定要先設position。
top, left, bottom, right: 設定位置,left跟right設定一個就好,bottom跟top也是相對的,可以設負值會很有彈性。
z-index: 如果DOM有重疊,可以決定哪個在上,數字越大在越上層。

另外說明position最好用的地方,absolute並非一定得相對於網頁整體,而是相對於他的父輩DOM的relative,如果他的父輩DOM有設定relative,版面就會以那一層為主。
423071_3363368852815_1584158705_n
如圖片說明,如果我們在DOM上設定了position:relative; 那麼被他包住的DOM,就可以設定position: absolute; 去隨意調位置了。
Read more

2012年3月6日 星期二

在Blogger的回應加上使用者頭像

想要在blogger裡面每個回應都加上圖像可以這麼做。

1. 找到這段:
<dl id='comments-block'>
改成這樣
<dl expr:class='data:post.avatarIndentClass' id='comments-block'>

2. 找到這段:
<a expr:name='data:comment.anchorName'/>
在上面加上這段
<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='35px' style='margin-bottom:-2px;' width='35px'/>
</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>

因為圖像是抓google帳號的圖示,所以如果留言的人沒有google帳號,或他不是用google帳號留言的話,可以改css設定預設圖像。
/* Avatar */
.avatar-image-container img {
background:url('圖片網址');
}

加完回應就可以看到圖像了。
Read more

2012年3月5日 星期一

Related Posts Plugin for WordPress, Blogger...