聖戦士ダンバイン

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

Read more

[HG] Extreme Gundam

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

Read more

手滑買了flickr pro

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

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

這是我的flickr相簿


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

Read more

jQuery浮動視窗- Sticky Sidebar

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

首先到jQuery-Stickybox下載外掛。

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

之後像這樣使用外掛即可。

view plaincopy to clipboardprint?

1. $(selector).stickySidebar("remove")  

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

Read more

jQuery UI Spinner

jquery.ui.spinner

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

引入後像這樣使用就可以了。

view plaincopy to clipboardprint?

1. $( "selector" ).spinner({min: num ,max: num});  

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

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

Read more

咪醬msn顯示圖-問 & 加油

好久不見的咪醬表情符號來囉。

這次是頭頂有問號的咪醬，還有咪醬替你加油。

Read more

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

基礎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>

view plaincopy to clipboardprint?

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)

如果想填漸層色。

view plaincopy to clipboardprint?

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

秀娟文定

今天是秀娟文定的日子，想說順便帶小朋友去彰化玩玩。

買早餐的時候小朋友很開心的跟小鳥玩。



第一次搭自強號。


抵達員林火車站。

Read more

Gundam Ez8

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

Read more

暗黑破壞神降臨

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

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

到時大家在暗黑上見啦。

Read more

CSS3的3D Transition

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

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

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

view plaincopy to clipboardprint?

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

FlickrLinkr改版 2012-03-14

今天FlickrLinkr做了小改版。


修正分頁跑掉的bug。


另外是當瀏覽相簿的照片時，限制住高度，這樣當相簿照片很多的時候，就不用辛苦的拉到很下面，還要再拉回最上面去複製網址了。

Read more

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

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

使用說明：

第一步

連上FlickrLinkr。

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

第二步

選擇相簿點進去。

第三步

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

複製連結說明

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



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


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

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

Read more

咪醬MSN顯示圖

Read more

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

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

Read more

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，版面就會以那一層為主。

如圖片說明，如果我們在DOM上設定了position:relative; 那麼被他包住的DOM，就可以設定position: absolute; 去隨意調位置了。

Read more

在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

[MSN小綠人]Detroit Pistons

Chauncey Billups


Tayshaun Prince


Richard Hamilton


Rasheed Wallace


Antonio McDyess

Read more