More servicesWindows Live
HomeHotmailSpacesOneCare
 
MSN
Sign in
 
 
Spaces home  華山論劍室ProfileFriendsBlogMore Tools Explore the Spaces community

想跟我說悄悄話嗎?
小布很期待滴!紅唇

  • October 23 11:42 PM
    于睿!! 天阿!! 偶竟然被認出來來啦!!
    你好阿^^..哈哈~有小弟可以幫忙的地方,不要客氣阿!!
  • 淡江學妹
    October 23 5:16 PM
    Hello 光耀學長
    還記的我嗎?  我是你淡江財金也是美工社的學妹--于睿!
    這世界真的很小ㄛ,晴萍在雜誌上看到你,大家才知道你現在從事網頁設計,學長真的好優秀喔!
    我現在在台灣電通廣告公司當AE,學長這麼優秀,當然想要找機會配合一下囉! 所以想和學長連絡一下!
    如果可以的話,可以把我加入MSN或回email給我喔!
  • September 19 12:18 AM
    . . . 
     

小布

View spaceSend a message
Occupation:
Location:
每天可以做設計的事情就是最快樂的事了~
每天可以拍攝自己想拍的事物那真是奢求不來的阿~
每天可以喝一杯Starbuck Latte' 實在有夠High了~
每天可以發現一本好書一個好站,就愈覺得自己愈渺小~
每天可以準時接老婆回家,就是最幸福的事了~


生活像是一盤調色盤,每天都可以有不同的變化

小布最愛黃色,也努力將黃色變成小布的太陽!
View space
不知道要取什麼名字
View space
(無名稱)
View space
View space
GREG31
View space
寶貝^.^靜
View space
liao
View space
(無名稱)
View space
forser

華山論劍室

有的畫家把太陽變成了一團黃色,也有的畫家以其藝術和智慧,將一團黃色變成了太陽 [畢卡索]
May 14

欣喜期待

 
"小小布"即將於本月底誕生,來到這個世界跟我們見面,經過九個多月的日子,就是盼望這一天的來到
小小布會長的像誰? 皮膚白不白? 以後個性乖不乖? 甚至以後長大的教育政策以及泡妞對策已不知Rehearsal幾遍了..
預產期於5/29,現在起的每一天都可能是驚喜的到來!
小美加油! 我也加油!我會勇敢的陪你進產房一起迎接小光耀的出生!
倒數15天,馬上就好!
 
April 18

髮點子 電腦顯示器問世

 
髮點子 SpotHair
近半年至今完成了一個結合實體與虛擬的專案【髮點子 SpotHair】,最關鍵的是採用Adobe Flex 新技術完成整個髮型設計的操作應用
也是首次於新硬體上開發軟體介面,並透過WebForm+XML方式,交換傳輸實體資料,完成最佳化的商務應用。
回顧期間,此案最棘手的莫過於對Flex 開發環境的不熟稔,再到Adobe從Flex2、Flex Builder 3 beta再到正式版問市,不斷隨著升級
以及調整程式碼,的確嚐了許多苦頭,還好期間有Jeremy大師的協助與引導,我們才克服許多障礙,完成專案開發
我想,這也是國內少有幾項算"中"型的Flex應用程式開發案了~ 也是我們的一個里程碑!
起碼,2008.03 Flex正式版發佈不久,我們已經擁有實績經驗以及技術。
 
大家有空不妨去看看玩玩:)
髮點子 SpotHair  http://www.spothair.com.tw
================================================================================
2008.04.18 
髮點子 電腦顯示器問世
王建訓/雲林報導
電腦不只會選土豆,還會幫忙設計髮型!「竑點」科技公司研發的「髮點子」電腦顯示器問世,今後民眾不必再依賴美容美髮師代為設計造型,只要透過電腦就可以自己當造型設計師,並且能夠預見自己髮型改變後的模樣。
電腦網路化的時代來臨,雲林縣美容美髮同業公會為讓同業善用網路資訊及電腦設備,十七日在國立虎尾科技大學舉辦「美髮愛轉型」發表會,邀請竑點科技公司執行長孫明申博士演講,介紹該公司「髮點子」電腦顯示器及網路髮點子美髮工作站。
孫明申表示,髮點子美髮工作站是美髮史上第一部專為業者打造的電腦工具,結合網路髮型資料庫軟體與電腦顯示器硬體,可以為顧客素顏拍照,輸入電腦之後,再套上五百種以上的髮型及各種髮色供選擇。雲林縣美容美髮同業公會理事長林惠蘭說,利用電腦設計髮型的好處,是顧客可以在電腦螢幕上看見套用各種髮型與髮色的模樣,進而選擇自己最喜愛的髮型,也方便設計師幫顧客打理。數十名美容美髮業者觀看電腦的各種髮型變化,利用電腦與網路設計髮型是全新的體驗,業者感覺相當新奇,學習興緻高昂,對電腦軟體以兩百倍顯微鏡檢視髮根的健康情形,更感到新鮮。
孫明申表示,髮點子電腦顯示器尚未正式上市,昨天發表希望透過業者的實際操作,以了解是否有需要改善的地方。
================================================================================
 
 
April 17

孤獨,也要讓夢想開花

 
最近我真覺得工作低潮了...
無法專心做一件事,無法想清楚來龍去脈,無法動見觀瞻,無法產生遠見
無法耐心學習新的事物,無法對色彩產生感動,無法對設計多一點熱情..
無法對自己的手拿著鉛筆畫出自信的圖案...
這是殘酷的事實,我必須承認..
設計的路並不像外人看的光鮮亮麗,有才華的一件好事..
我仍焠鍊的不夠精純,折磨的還不夠慘烈,
不然,我怎麼連拿手的素描,都想上半天也畫不出自己認為夠水準的圖案?
我沒有像老婆與朋友說的有才華,開始懷疑自己
也許我早流失這樣的特質...
 
感謝上天,就在這個時候,給了我ㄧ篇好報導
Cheer雜誌的[安藤忠雄]專題:孤獨,也要讓夢想開花
文字不多,看完後,燃起小小的火光..
即使我孤獨,但是我要更有熱情與更強的意志繼續往下走!
就是這樣一點小小的鼓舞也好...很感激!
分享給大家!
========================================================================
安藤忠雄:孤獨,也要讓夢想開花
Cheers 2008/04/08 【文/藍麗娟;特約攝影/謝進益】
出身貧困、高工畢業的安藤忠雄;他自學建築,54歲榮獲建築界諾貝爾獎之稱的普立茲克獎(Pritzker Architecture Prize)肯定;他的奮鬥歷程,就是一條追尋夢想之路。
「在日本的菁英教育社會裡,我是個走不同路的人,」3月時在日本,安藤忠雄向從台灣來的196位建築愛好者演講時說。

從興趣中找到夢想
在日本這個學歷至上的國家,大多數人直到上大學,才有機會摸索自己的興趣是什麼?尋找可能的夢想。
但是,安藤忠雄不然。
1941年,安藤忠雄在大阪出生,從小由外公外婆養大。後來,外公過世,安藤忠雄與外婆必須獨立生活。因此,當外婆開了雜貨店,他就幫忙顧店。每當鄰家的木匠帶著設計圖出入,不僅會跟他玩,也會教他削木頭。懵懂之間,安藤忠雄覺得很喜歡用木頭做東西的感覺。
13歲時,安藤忠雄與鄰家的木匠合作增建家裡的二樓。當他在幽暗的長屋開了一個天窗,第一次,他體驗到自然光線的魅力,小小心靈中,愛上建築。
隔年,當鄰家有個失怙少年需要地方住,安藤忠雄自己設計施工,為少年蓋了一個7坪大的加蓋小屋。第一次,他興起自己的夢想:從事建築業。
發現夢想並不容易;但是,該如何去做,努力實現夢想,卻是大的挑戰。
國中畢業後,安藤忠雄遇到第一個夢想的阻礙。當他決定進木工工廠工作時,卻慘遭家人反對。
於是,他轉念高工機械科,從此走上自學之路。課餘,他勤跑學校的設計教室,閒暇時就搭電車到京都、奈良等地,親身參觀日本傳統建築,從中了解何謂建築。後來,他聽說打拳擊可以拿工作簽證出國比賽;為了出國看建築,他只花了兩個多月練習就拿到職業拳擊賽執照,如願的,隻身到曼谷比賽。

孤獨一人,也要讓夢想開花
高工畢業了,安藤忠雄渴望進大學念建築。這一次,雖然家人並未反對,但在龐大的經濟壓力下,他必須放棄念大學建築系的正規管道。
他清楚地知道夢想只有一個,但是,邁向夢想的道路卻有很多途徑。
「所以,我決定,好!我一個人要朝這個方向努力。因此,一個人走上這條孤獨的道路。」安藤忠雄在演講中比喻,「康莊大道上綻放許多花朵,但是,我一個人卻走著這條大家都看不見的路;於是,我對自己說,我要讓這條路也能開花結果。」
於是,他透過工作與讀書,繼續自學建築。
他先到室內設計公司擔任助手、後來協助大阪市立大學教授進行商店街調查與開發;不工作時,他就讀書。有一次,他在一個舊書攤看到《柯布(柯比意,Le Corbusier)作品全集》時,心中震撼不已,於是,他每天都到舊書攤報到,甚至央求書店老闆暫先保存該書,等他存夠錢,就會把書買下。「再怎麼沒錢吃飯,我都要讀書,」他說。
後來,他終於買了書,隨後天天研究柯布的設計圖。有一整年,他甚至一早讀書直到凌晨3點鐘,就這樣,將建築系教科書研讀完畢。
「一個人要成功有兩個條件:意志力和熱情」安藤忠雄說。
......................................
========================================================================
http://mag.udn.com/mag/newsstand/storypage.jsp?f_MAIN_ID=206&f_SUB_ID=243&f_ART_ID=119291
 

 
April 07

【Web Design】Commonwealth

 
一個具有濃厚的宗教味道的網站,內容是介紹猶太人在11世紀到12世紀期間,開始在波蘭定居的故事。
小布認為網站氛圍設計處裡的很精緻,很有故事feel
影片內容做得不錯,用全螢觀賞效果最佳,但缺點是下載時間較久。
 
http://www.commonwealth.pl/
 
 
April 02

【Web Design】Starbucks Event Site 手繪設計風格

 
朋友今天傳來 Starbucks Event Site 的網站Link,
點進去看真的覺得設計的很有味道,而也恰好我剛買一杯Vanti 的 Ice Latte' Coffee 回來,黑板手繪的景象從我剛剛點餐時還正熱著阿!
 
UI還是UI,這個脫不了UI 好設計的行銷經營觀點,總是不可缺少的環節,相信整個案子的背後溝通有很大的努力,也佩服這個網站的設計群可以落實美術的設計風格。
轉述朋友MSN的說明:
星巴客的活動網站,介紹家庭用咖啡(豆子?飲料?),還有一份簡單測驗,幫你找出最完美的咖啡(當然還是他們家的)。
網站主題單純,操做簡單,設計成黑板的效果,讓人聯想到店裏經常掛著的小黑板,上頭寫著今日特價咖啡、蛋糕…等組合之類的。



 
http://www.starbuckscoffeeathome.com/

 
April 01

大小創意新版上市


大小創意 dxmonline.com 更換新版了,小布也終於小小鬆一口氣!
這次推出新的設計版式,也推出新的資訊瀏覽與互動媒體經驗,
對於需要大量創意資訊的我們來說,是最好的養分獲取來源

這次的版本使用相當複雜的技術投入,前端設計技術就使用了繁密的double class CSS類別來鎖定版面,
以及為了加強SEO搜尋引擎最佳化,使用Accessibility 以及 hidden的 HTML Code來加以註記,
同時也加入加強瀏覽器解讀的HTML Tag,例如:捨棄<table>、<Div>與<li>的巢狀資料表格顯示模式,而採用傳統的 <dd><dt>來描述巢狀資料。

另外也必須解決不同瀏覽器的支援(IE6、IE7、FF2.0、FF3.beta、Safari),這裡面最棘手的是對CSS寫法各陣營認定皆不相同,以及版面中PNG透明圖檔的支援性,為了版面美觀,這些都必須解決,並且考量最好的操作邏輯與使用者經驗。

請看新版大小創意,強化我們每天的創意養分:)


http://dxmonline.com/html/main.aspx

March 20

讓我們好好的投

 
這次總統大選太激烈了,"你挺誰?"已成為每人每天最火的話題,誰會當選也牽動千百萬人的心情
我們都不覺患有強烈選舉躁鬱症,對政治的投入比名嘴更有一番"專業"看法
政治原應有的治國智慧與格局,超然為國為民的情操,早已蕩然無存
而我們民眾似乎已經不關心了..."四傻與一壞蛋"更能影響投下去的準度...
 
時間是有記憶的,不管是過去的藍色50年,還是綠色8年,這58年裡,我們有投票權的台灣人
好壞絕對點滴在心頭,也決定了投給誰一票..
現在全球化競爭時代,我們每天工作都面對不同的挑戰,大環境的好壞,在我們身上應該清楚不過了
希望台灣好,希望未來會更好,希望我們的下一代更幸福,即將當父親的小布更是深有同感。
 
看到Youtube兩篇不同立場的廣告片,以創意的角度來看這件事,以及身為30世代的一份子
在此紀錄下來比較看看,讓我們好好地投!
 
【讓我們好好的投】
  
 
【RE:讓我們好好的投】
  
 
 
March 11

IE6支援PNG透明背景 CSS設定

 
最近為了需要在IE6、IE7、Firefox中顯示透明背景的PNG設計圖,即使IE7、Firefox支援PNG,但IE6就是硬生生不支援!
然而身為一個專業的設計師,小布怎麼可以忽視IE6族群瀏覽時的美感?(呵呵~說大話了..:P)
因此就找了許多可行的方案與資料進行測試,過程以為很簡單,網路上也有許多人提供不少的方法
有從js引入解決,也有從某不知名檔引入解決(例:xx.htc),還有從CSS端解決等...

結果,果然如同waking這篇"也許是目前修正IE6的PNG透明度問題最簡單的方法"所寫,但我也搞了一個早上,最後還是無用><。。如下圖:



由於小布的網頁專案中全使用CSS架構設計,所有的class、類別id皆有階層相容屬性,有點複雜但卻有很好的效果與維護效率
網頁中的圖檔皆在CSS裡設定background引入,或者是js+CSS動態引入
因此小布必須從CSS中去解決在IE6裡的PNG透明背景支援!

後來小布試過最好也最適合的方法就是透過IE的AlphaImageLoader的方法,將alpha效果套入所屬class的png圖檔中
不過這中間必須注意在IE6與IE7時的瀏覽器判斷與加註hack指令,讓IE7與IE6各讀不同的CSS class檔
在此分享我的做法如下:=============================================================================================
【CSS】在【brad.css】檔裡的類別:
#KyArtSet
{
 background: url(images/bg_kyart.png) no-repeat left 0px;
}

【HTML】Kyart.htm裡的原始碼:
<head>
<link rel="stylesheet" type="text/css" media="all" href="brad.css" />
</head>
=============================================================================================

為了解決IE6,於是我加了一個IE6 hack用的CSS,並且在此加入AlphaImageLoader Filter
命名為【ie6BradHack.css
裡頭樣式為:
=============================================================================================
#KyArtSet{
 background-image: none;
 filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/bg_kyart.png', sizingMethod='scale');
}

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=link_top.png,sizingMethod='scale',enabled=FALSE);
sizingMethod有crop,image,scale三種。預設是image,也就是PNG圖片照原本圖片大小顯示。如果使用scale的話,圖片會依照div的尺寸縮放;如果用crop且圖片尺寸比DIV還大的話,圖片超出DIV的部分會被切掉。enabled是效果的開關,如果值是false或1,就等於整個濾鏡效果停用。【原文

請注意,上述類別KyArtSet與【brad.css】的名稱相同,若有階層屬性也需要相同階層關係,如:
#body #KyArtSet{...},那麼在【ie6BradHack.css】裡也要寫相同的階層,並注意圖檔的連結位置!
=============================================================================================
然後在【HTML】Kyart.htm加入新的Hack判別碼,將【ie6BradHack.css】嵌入
=============================================================================================
<head>
<link rel="stylesheet" type="text/css" media="all" href="brad.css" />
<!--[if lt IE 6]><style type="text/css">@import'ie6BradHack.css';</style><![endif]-->
</head>
=============================================================================================
這段當瀏覽器為IE6時,會import【ie6BradHack.css】,並且以這個屬性為主,導入AlphaImageLoader Filter
如此在IE6時,CSS屬性設定的PNG圖檔就會顯現正確的透明圖了,如下圖:



以上是小布解讀八方大作的心得,結合我實作可行的方法,在此提供大家參考,不必在這個問題打繞太久!
希望對以CSS架構網頁的朋友們有所幫助。
有任何問題,歡迎隨時來信或留言討論:)

 
March 10

IE7動態設定iframe,去除邊框與背景透明度

 
今天為了設定一個在網頁中動態出現的iFrame,測試環境在IE7.0以及FireFox2.0,
預期效果為"無邊框"、"透明"、"不scroll"等,
結果Firefox2.0支援,但卻被IE7給打敗,即使小布不斷試不同方法,擠出我所能知道的CSS與HTML的各類Attribute
但...殘念!!...還是出現下列圖示的框線!!
 
 
小布的認知也如同大家的認知,就是設定iFrame的frameborder="0",iFrame就不會顯示醜醜的邊框,或者於CSS設定 border:0px;也行
設定iFrame的allowtransparency="true",iFrame背景會透明,或者於CSS設定 background: #transparent;
以下是小布的code,這個方法怎麼樣就是無法在IE下起作用!
 
======================================================================
var KyArtIframe = this.doc.createElement("iframe");
KyArtIframe.setAttribute('id','BradIframe');
KyArtIframe.setAttribute('name','BradIframe');
KyArtIframe.setAttribute('frameborder','0');
KyArtIframe.setAttribute('allowtransparency','true');
======================================================================
 
iFrame依然在IE7下顯示邊框、不透明,光這點就讓我頭痛不已,翻書翻到瘋!!
原來就是DOM模型的輸出模式寫法不同,
在IE下的DOM屬性會是大寫,也就是他會將我設定的var KyArtIframe = this.doc.createElement("iframe");
最後輸出HTML成<IFRAME frameBorder=0 allowtransparency=true...>
而IE只讀大寫,自然排除裡頭的小寫Attribute!
因此,必須設定區分大小寫的屬性,讓IE正確讀取屬性,小布找到的區分大小寫方法如下:
KyArtIframe.setAttribute('frameborder','0',0);
只要在最後面再加一個"0",就可以區分大小寫。
所以我重新改寫我的code如下:

======================================================================
var KyArtIframe = this.doc.createElement("iframe");
KyArtIframe.setAttribute('id','BradIframe');
KyArtIframe.setAttribute('name','BradIframe');
KyArtIframe.setAttribute('frameborder','0',0);
KyArtIframe.setAttribute('allowtransparency','true',0);
======================================================================
 
這樣設定後,就可以解決在IE7下,以動態Script 設定iFrame,去除邊框以及背景的方法。
以上紀錄希望對大家設計網頁時有所幫助:)