2011年12月30日 星期五

雲端所成立

雲端所成立

來這邊快一年,我們team的產品也上市了,長官說這是資策會第一次完成一個產品,也是今年創研所技轉拿到最多錢的單位,也因為這樣我們從創研所的雲端中心獨立成雲端所,這是我們雲端所成員的大合照。

我喜歡我們team的老大說的話,"我們因為站在巨人的肩膀上,所以可以看得更遠,往前看得有多遠,就可以往後看的多遠,不過就算我們往後看的再遠,都要回頭看看自己,我們都是平凡人",我們的team可以發展的那麼好,很大的原因是有這個老大,一個是他真的學的很紮實,另一個是他找了很多高手進來這個團隊。找對人做對事,就可以發展得很快,如果做事情永遠都沒有條理,或是本末倒置,這種團隊大概也沒什麼發展的機會了。

因為老大的這番話讓我很敬佩他,也很感謝他讓我進入這個團隊,這一年的我進步很多。
Read more

2011年12月27日 星期二

小朋友去南部喝喜酒

小朋友兩歲多了,會的東西越來越多,之前只是會玩ipod跟手機,現在也開始會用電腦了,這個世代的小朋友跟我們那個世代一定也是很不一樣。



現在會跟你喊加油喔。



Read more

2011年12月26日 星期一

CSS的box-shadow

你要讓你的網頁有質感,有幾個很快的方法,一個是讓他多了點漸層的效果,另一個則是讓他加上一點陰影,這個在以前用photoshop處理起來很快,但是在網頁上就有點麻煩,好在CSS3開始支援box的漸層跟陰影效果,以後要做這種效果就輕鬆很多了。

CSS3的box-shadow屬性如下:
box-shadow:陰影類型 水平位移 垂直位移 陰影半徑 陰影擴展 陰影顏色

開始測試
390085_2824503581520_777133721_n
box-shadow:2px 2px 10px #06C ;顏色可以用顏色的敘述,如上的16進位顏色碼,或是使用RGB都可以。
391920_2824503821526_1603023939_n
box-shadow: 0 0 10px rgba(0, 255, 0, .6);使用RGB可以多帶一個Alpha值的屬性設定透明度。
377889_2824503901528_293681739_n
box-shadow: 0 0 10px 5px rgba(0, 255, 0, .6);如果增加擴展屬性,可以讓陰影更強烈一點。

陰影類型預設是向外,如果想要製作內陰影,只要再設定陰影屬性就可以了。
387853_2824503981530_897822299_n
inset 0 0 10px #000000;

還有更多應用可以參考這幾個網頁:
CSS3属性box-shadow使用教程
CSS Box Shadow
Read more

2011年12月24日 星期六

[ROBOT魂] 龍神丸

龍神丸

魔神英雄傳可以我們這一代共同的回憶,不知道是因為當時是日本動漫產業巔峰的時代,還是因為台灣這方面的資訊相對比較沒那麼多元,當時老三台獨霸時候播的動畫,都比較容易成為大家共同的回憶,最有名的機器人動畫就屬魔神英雄傳、魔動王跟絕對無敵了,可是有趣的是這些機器人裡,又只有絕對無敵出現在機器人大戰過,不知道龍神王跟火王這些機器人,有沒有機會也可以在機器人大戰參上一腳。

龍神丸
龍神丸

魔神英雄傳大家對他的故事一定都不陌生,雖然時間久了我也不大記得詳細的故事,不過應該都會記得他有七層,因為神居住的地方被魔界奪走,所以彩虹沒了顏色,主人公孫達陸(戰部渡)是被選為救世主的人,他的出現可以解救被魔界佔領的地方,每層回復後就會回復彩虹的一個顏色,裡面也除了大魔王外都是被控制的好人,只要打倒他們他們就會恢復原狀,小時候都很期待他們恢復原狀的樣子。
Read more

2011年12月23日 星期五

2011年12月21日 星期三

用CSS解除Chrome的字體大小限制

今天在寫css才發現一個問題,想說我不管把css選擇器限制的多麼細,還是沒辦法去改變chrome上文字的大小,查了一下才發現原來chrome有限制文字的大小,最小只能到font-size="12px",雖然這個立意是好的,畢竟在網路上我也不喜歡看字體太小的文章,可是真的有需要把字體設為12px以下還是會被困擾,還好解決的方法很簡單,只要在css加上這段就可以了。

-webkit-text-size-adjust:none;

短短一行解決困惑。
Read more

2011年12月20日 星期二

jQuery自製upload file介面

390834_2786408589169_904970288_n

因為安全性的問題,在一般網頁要改input=file的介面基本上是不可能的,不過我們可以用一些小技巧來達成自定上傳介面的方法。

首先準備這樣的html結構。
<div class="fake_upload_filed">
<input type="file" class="fake_upload_file" />
<span>Browse..</span>
<div class="fake_cover">
<input type="text" class="fake_file_path">
<a class="fake_img"></a>
</div>
</div>

Read more

jQuery製作浮水印

之前有提過用jQuery外掛製作浮水印效果,不過其實用自己寫也不會很難,有時候外掛會太肥大,自己寫可以多少省一些資源。

首先準備一個input text的欄位。
<input type="text" id="input_filed" class="watermark" value="Message">
然後準備一個class="watermark"的樣式。
  1. .watermark{   
  2.     color:#CCCCCC;   
  3. }  
這個是來做浮水印樣式的。

然後輸入以下的code:
  1. $("#input_filed").focus(function(){   
  2.     //判斷欄位內的值是否為Message,是的話清空,並移除class=watermark   
  3.     if($(this).val()=="Message"){   
  4.         $(this).val("");   
  5.     }   
  6.     $(this).removeClass("watermark");   
  7. });   
  8. $("#input_filed").blur(function(){   
  9.     //如果欄位內為空,則填入預設message並增加watermark的樣式   
  10.     if($(this).val()==""){   
  11.         $(this).addClass("watermark");   
  12.         $(this).val("Message");   
  13.     }   
  14. });  
這樣就可以完成浮水印效果了。

不過浮水印在html5就變得很簡單了,只要加一個placeholder的attribute就可以了。
<input type="text" placeholder="Message">
這樣就變很簡單了,只不過在還沒全部轉換過去之前,還是要學一下複雜的方法。
Read more

2011年12月19日 星期一

jQuery偵測網頁捲動到最底

因為FB的動態消息,會在網頁捲到最底的時候繼續展開更舊的訊息,這個行為很方便,一來是每次讀取的資料不需要太多,二來是不需要做一個"更多訊息"或分頁的按鈕,去增加使用者操作的時間及不便,研究了一下,果然也是懂了就很簡單。

首先要在jQuery偵測捲軸動作是這樣:
  1. $(selector).scroll(function(){   
  2.   
  3. });  

如果是網站整體的話則使用$(window)去偵測scroll行為,然後用以下幾個去判斷目前卷軸的位置。
  1. //判斷整體網頁的高度   
  2. var $BodyHeight = $(document).height();   
  3. //判斷所見範圍的高度   
  4. var $ViewportHeight=$(window).height();   
  5. //偵測目前捲軸頂點   
  6. $ScrollTop=$(this).scrollTop();  
Read more

用純CSS讓div垂直置中

垂直置中在table裡很容易,只要在td加valign="middle"就可以了,不過要在div裡就不是那麼容易,div要水平置中可以使用"margin:0 auto;",可是垂直置中卻不能用"margin:auto 0;",不過還好有找到方法,很實用,可以學起來。

<div>
把我置中
</div>

我原本是使用這個方法,給div一個line-height,有了line-height就可以用css的垂直對齊了。
  1. div{  height:30pxline-height:30px; }  

不過缺點是只能單行對齊。
Read more

2011年12月18日 星期日

可動群雄-銀河三部曲

可動群雄我覺得是一個很杯具的系列,主要的原因是他的技術不好,可動性跟以前的玩具一樣,質感也非常的塑膠,剛出的時候價錢甚至還比轉輪科技貴,本來是看有別的系列沒有的才買的,但在出了十幾款後就實在太杯具而沒有繼續的作品了。

我沒看過動畫,網路上的介紹是把他們稱為J9系列,J9第一個系列是銀河旋風ブライガー,首次登場在機戰Alpha外傳,因為有趣的配樂加上我還蠻喜歡的造型,就變成我的愛用機體了。

銀河旋風ブライガー
銀河旋風ブライガー
銀河旋風ブライガー
Read more

[MG] Gundam Sandrock EW

Gundam Sandrock EW

鋼彈W EW版感覺前後期差異最小的沙漠鋼彈,雖然跟後期感覺只是差在顏色跟披風,但看在我對於鋼彈W的愛上,還是把他帶回家跟其他的鋼彈會合了。

Gundam Sandrock EW
Gundam Sandrock EW

沙漠鋼彈本來在TV版的造型老實說蠻醜的,可是在EW裡的配色,加大的彎刀跟新設定的披風,讓造型完全的改觀,而重新設計初代的沙漠,回復原本沙漠的配色,也是非常的好看,真的是很佩服Katoki設計機器人的功力。

Gundam Sandrock EW
Gundam Sandrock EW
初代的沙漠鋼彈有設計盾牌,這個盾牌在以前1:144的模型有,在動畫中沒有出現,而1:144版本雖然有盾牌,卻少了披風,所以就不知道後期的沙漠鋼彈MG是否會把披風跟盾牌都附上。
Read more

2011年12月17日 星期六

盒玩-Q版海賊王-九人的海賊團

這套是剛有消息就很想買的,海賊王的角色非常多,而且也都很有特色,加上出的商品實在太多,如果要全收根本就是一個無底洞,所以我都挑有魯夫海賊團全員到齊的盒玩收,是比較符合經濟效益的收法。

這套叫九人的海賊團,跟漫畫有一話呼應,不過除了魯海的九人外,還多了背大包包的魯夫、漢考克跟勺姨。


帥氣獨眼龍的索隆。

露出另一邊眼睛的香吉士,那個眉毛也太怪了吧。

性感的娜美。
Read more

2011年12月14日 星期三

2011年12月13日 星期二

取消Chrome, Safari上點選input, textarea加邊框的效果

392078_2738820919507_726442479_n

寫css的時候一定有遇過這個問題,就是在chrome跟safari上,如果你點在input或textarea上,都會自動幫你加黃色邊框,這個可以讓你很清楚知道你點了哪邊,可是如果你要做一個假的input區域,那個黃色框就會出問題,不過只要加個小東西就可以解決了。
  1. input,textarea{outline:none}  
此外如果想要限制textarea不要縮放,則加上這段。
  1. textarea{resize:none}  
Read more

2011年12月12日 星期一

La new Gore-Tex鞋款



La new Gore-Tex鞋款

最近完成上線的一個網站,La new的Gore-Tex鞋款網站,本來La new的網站有類似的鞋款預覽頁面,不過主站是flash寫的,而我這個則是使用jQuery去完成。

一開始可以看到鞋款跟型號,點縮圖會出現放大的鞋圖,可以點選下面各個角度的圖片切換預覽圖。

用jQuery寫比flash輕鬆許多,不過在讀取時應該加loading的動畫會比較好,之後再來加。

一般頁面商品款項都是原本就存在的,只是靠show跟hide去控制,鞋子預覽則是使用Ajax,在點選後才讀入,後來就發現應該把像這樣的項目寫成xml或json格式再用Ajax讀取會更方便。

最後則是關於Gore-Tex的介紹。


對Gore-Tex有興趣的,也不妨去La new門市看看是否有喜歡的款式吧。
Read more

2011年12月9日 星期五

判斷是否為ipad/ipod/iphone切換css

大多數開發網頁的人應該都有認知,就是手機跟一般電腦的瀏覽行為是不大一樣的,主要的原因是螢幕大小不一樣,但最近在寫網頁的時候又遇到一個問題,就是即使是ipad這種螢幕比較大的平板電腦,因為觸碰螢幕的關係,使用者使用起來還是會不大一樣,如果我們開發的網頁希望能在ipad也能有比較好的使用者經驗,又不想寫一個新的頁面,我們就可以判斷裝置是否為ipad/iphone去切換css。

首先一樣用外部連結的css樣式,預設的樣式是給一般電腦用的,另外給他一個id="css_style"
<link rel="stylesheet" href="normal.css" type="text/css" id="css_style"/>
然後準備另外一隻css: ipad.css

然後用javascript去偵測是否為ipad/iphone
  1. //偵測是否為ipad   
  2. if(/iPad/i.test(navigator.userAgent) {   
  3.     //alert裝置名稱   
  4.     alert(navigator.userAgent);   
  5.     //如果是則切換css   
  6.     $("#css_style").attr("href","ipad.css");   
  7. }   
  8. //如果所有的裝置要一起改變可以這樣用   
  9. if (/(iPhone|iPad|iPod)/i.test(navigator.userAgent)) {   
  10.     $("#css_style").attr("href","ipad.css");   
  11. };  
之後用不同裝置看,就會有不一樣的css樣式了。
Read more

2011年12月8日 星期四

使用WipeTouch來偵測滑動手勢

之前提了一套TouchWipe的外掛,這次再來介紹另一款WipeTouch的外掛,使用起來功能差不多,可以斟酌使用。

首先一樣先去下載外掛,然後引入:
<script type="text/javascript" src="jquery.wipetouch.js"></script>
然後把你要滑動後的事件綁入就可以了。
  1. $(document).wipetouch({   
  2.     wipeLeft: function(result) { // wiped left },   
  3.     wipeRight function(result) { // wiped right },   
  4.     wipeUp: function(result) { // wiped up },   
  5.     wipeDown: function(result) { // wiped down }   
  6. });  
Read more

2011年12月7日 星期三

jQuery取得滑鼠座標,以及跳轉video時間

315060_2602811079346_1667869575_n

上次講到用jQuery跟html5控制影片,這次因為還想控制影片的位置,希望可以點時間軸就跳轉位置,就又研究了一下。

首先要先讓jquery知道你點下去的位置。
e.pageX
e.pageY

然後稍微換算一下上次計算影片位置的公式,把取得的x軸座標轉換成時間就可以了。
  1. $(".track_bar").click(function(e){   
  2.     video.currentTime=(e.pageX*video["duration"])/時間軸長度;   
  3. });  
如果要像一般video player一樣,用拖曳的就可以跳轉時間也沒問題。
  1. //判斷是否按下   
  2. var clicking=false;   
  3. $("#time_line").mousedown(function(e){   
  4.     clicking=true;   
  5.     video.currentTime=(e.pageX*video["duration"])/時間軸長度;   
  6. });   
  7. $("#time_line").mouseup(function(e){   
  8.     clicking=false;   
  9. });   
  10. //如果按下,滑鼠移動時改變影片時間   
  11. $("#time_line").mousemove(function(e){   
  12.     if(clicking == falsereturn;   
  13.     video.currentTime=(e.pageX*video["duration"])/時間軸長度;   
  14. });  
觀看效果
Read more

2011年12月6日 星期二

判斷ie版本

剛好看到一個朋友分享,在IE沒死透之前都還會有機會用的到。

 lt:less than 當前指定版本以下,不包含當前版本
gt:greater than 當前指定版本以上,不包含當前版本
lte:less than or equal 當前指定版本以下,包含當前版本(等於)
gte:greater than or equal 當前指定版本以上,包含當前版本(等於)

EX:
<!--[if lte IE 8]>
<link rel="stylesheet" href="/css/ie8_only.css" type="text/css" />
<![endif]-->

if lte IE 8 : 如果版本為ie8或ie8以前版本...
Read more

2011年12月5日 星期一

在iOS上把你的網頁變成app

如果你不會寫iOS的原生語言Object C,也可以使用html5就可以來寫一個網頁,再加點小東西就可以變成iOS上的app了,而且也不用跟蘋果買授權喔。

只要在html裡加上這個meta。
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />

apple-mobile-web-app-capable: 這是讓這個可以是一個離線app。
apple-mobile-web-app-status-bar-style: 設定狀態列的顏色,預設是default(白色),還可以設為black(黑色)或black-translucent(半透明灰色)。

你也可以設計自己想要的app icon,首先把icon設計完,放到資料夾內,如果是ipod touch4/iphone4以後的,圖片大小要用114x114,ipad則是72x72,而ios會自動加上圓角跟反光效果。

然後在html裡加上這段。
<link rel="apple-touch-icon" href="icon.png" />
等等這張圖片再把web app加到桌面上就會看到了。

如果你想有一個app的開始畫面,則可以加上這段。
<link rel="apple-touch-startup-image" href="startup.png" />
上傳到網路後連到那個網址去,會出現一般網頁的樣子。
374348_2678150882794_420135671_n
Read more

2011年12月2日 星期五

SmartApp得獎囉

「SmartApp」智慧雲端儲存服務系統獲雲端創新應用傑出獎

由 台灣雲端運算產業協會舉辦,鼓勵國內企業投資開發雲端應用,以及加速雲端產業升級發展的「雲端創新應用傑出獎」選拔活動,在一連串經過協會委員初選、決選 表決後,得獎優勝名單已於上星期(15)日公布,喬鼎資訊與資策會雙方合作共同開發的「SmartApp」智慧雲端儲存服務系統,也在眾多競爭隊伍中脫穎 而出,評選為百年雲端創新應用傑出獎佳作

產品發表會已於(16)日假資策會總部正式公開亮相,會中邀請多位產、官、學界重量級嘉賓與記者媒體到場共襄盛舉,值得一提的是,中興大學與三民國小更是在現場與嘉賓分享實際使用後的經驗,為產品的功能與操作簡易性加分不少,贏得現場來賓一致的稱讚。

選拔活動訂於上星期五(18),於台灣雲端運算產業協會年度會員大會中,由行政院吳敦義院長、張進福政務委員以及經濟部林聖忠次長頒 發獎牌,表揚喬鼎在雲端運算應用的技術與貢獻。活動從九月份下旬起跑以來,在多家企業踴躍響應紛紛提出申請,歷經協會委員初步評選,依據各家所提供競賽作 品之創新程度、雲端技術、商業模式以及產業貢獻程度,做多方面檢視與分析,並挑選符合資格之參賽單位入圍決選,進行一連串現場簡報與展示做最後評斷。喬鼎 資訊以其「SmartApp」智慧雲端儲存服務系統參賽,在每一階段皆獲得優異成績,作品順利完成整個賽程並獲得百年 雲端創新應用傑出獎 佳作殊榮。

001.jpg


活動說明「台灣雲端運算產業協會」為加速國內雲端運算產業之創新,並鼓勵開發雲端應用,特舉辦「雲端創新應用傑出獎」選拔活動;希望透過獎勵創新卓著之雲端應用開發與推廣,對國內的雲端運算產業產生示範作用,並藉由展示及表揚,提昇國內雲端運算技術與應用服務水準。
辦理目的一、評選具創新性之雲端應用,以帶動雲端運算產業之整體發展。
二、評選具整合成效之雲端應用,以擴展雲端運算應用層面,增進國家競爭力。
三、評選具顯著效益之雲端創新應用,以期產生示範作用。
四、鼓勵利用雲端技術進行創新應用的開發者與推廣者,提昇雲端運算技術與應用服務水準。

評選重點:
(一)、創新程度,30%包含:概念創新、流程創新、應用終端創新、服務模式創新等等。
(二)、 雲端技術,30%運用雲端技術實現創新應用,涵蓋IaaS, PaaS, SaaS各類雲端技術服務,包含:On-demand self-service, Broad network access, Resource pooling, Rapid elasticity, Measured Service等項目評量。
(三)、商業模式,25%包含:經營方式、目標客戶、及預估營收、利潤等等。
(四)、產業貢獻,15%指該創新應用對雲端產業及其相關上、下游產業鏈的貢獻度。

--
在公司開發的產品得獎的紀念。
Read more
Related Posts Plugin for WordPress, Blogger...