星期三, 1月 31, 2007

Smooth E電視廣告

這是一個三十八歲的泰國電視廣告導演塔諾在(Thanonchai Sornsriwichai)主導的洗面乳廣告,故事是敘述一個女孩被他的爸爸當作男生養,因此除了沒有氣質以外還滿臉痘痘。而有個蜈蚣般的記號在手臂上的男孩,將是她命中注定的因緣,但因為長得不美所以無法說服那個男生喜歡他,因此進行了一次大改造....

這樣麻雀變鳳凰的故事基礎,並不那麼有創意。但整齣廣告的流暢度與喜感,如果不讓劇中的美容師,不斷的提醒用這個洗面乳有多好(包括那陰魂不散的箭頭),很快就忘記這到底是幹什麼的廣告。

平民認同取代了明星崇拜,人味沖淡了商品化,真誠的情感比花俏的廣告文案更受歡迎。塔諾在不斷地用虛構的廣告形式,再現日常生活的感動,用資本主義工具反資本主義。塔諾在相信,成功的廣告必須對社會付出關懷:「如果你對生活在這個國家的人們一點都不關心,你是不可能成功地賣出東西。資本主義總有潰敗的一天。」

因為看了這個廣告,想買來用用看的,這裡有個使用這個洗面乳的試用報告,可以看過再斟酌喔。

第一集

第二集

第三集

第四集

星期三, 1月 24, 2007

外務上班族必備~線上辦公室特輯

由於網路頻寬的增加,以及AJAX的熱門。越來越多的網站開始提供了功能性的服務,這些服務目前看起來陽春,且令人不太習慣,但卻也讓整個使用電腦的時代又更踏入了一個新的紀元。今次整理幾個對於上班族絕對不可或缺的服務,如果能善用這些服務,相信可以增加數十倍功力喔!

個人化首頁

對於不再喜歡首頁被綁在yahoo等入口網站的重度上網者,個人化首頁可以自訂自己的首頁,看是想放天氣,還是看某些網站提供的RSS服務,或是放張會隨時更換美麗的圖片等 ,個人化首頁提供了相當自由的窗口。速度快,沒有多於無用的資訊,是個效率倍增的好服務。

有提供服務的網站:netvibesMSN LiveGoogleZoho......等(皆須登入才能使用)

網頁版即時通訊

這個網頁可以提供MSN,YAHOO,ICQ與美國線上AOL的及時通訊連線,亦可同時登入,可以做基本的傳訊動作,至於傳檔或是表情訊息等就不支援。

有提供服務的網站:mebbo

線上Word、Excel

如題,您不需要再仰賴OFFICE軟體,可以指藉由瀏覽器來編輯Word或是Excel了,不過功能有些陽春,但基本的插入圖片,製作表格等,都完全具備。目前介面都以英文為主,也可以將本機的word或是excel上傳至此,不過通常來說都會發生問題(畢竟不是所有的功能都支援,所以會造成問題)

有提供服務的網站:GoogleZoho......等(皆須登入才能使用)

線上Powerpoint

同樣藉由強大的AJAX支援,終於讓線上powerpoint的可能性成真了!可以設定投影片的背景,也有預設的排版樣式,也有各種圖形框可以放置。還不能做出轉場動畫,而且僅能在網頁上播放,介面一樣也以英文為主,也可以上傳本機的ppt檔案。不過通常來說都會發生問題。

有提供服務的網站:ZohoSoapBX......等(皆須登入才能使用)

線上修圖

對於手上暫時沒有影像軟體時的急救包,將本機圖片上傳到伺服器之後,就可以做旋轉、裁切、縮放、色調、飽和度、亮度對比調整等功能。英文介面

有提供服務的網站:shipshotpixohPX8N

星期一, 1月 22, 2007

Clara Collins 服裝作品網站

http://www.claracollins.com/

這個網站主要陳列巴黎時裝設計師Clara Collins的多樣作品,整個網站以類似看書的方式,可以翻頁閱覽這個設計師的作品外。其實這個網站獨特的魅力之處,就是在翻閱每一本書的時候,透過畫面右上方的快速翻頁鈕,把書的每一頁都當作是動畫的一個影格來播放!簡單的說,就像是小時候,在課本的頁角畫上火柴人跑步動畫一樣!

也由於這樣的快速翻頁功能,使得就像在看動畫書一樣的新奇有趣外。每張照片拍攝角度的用心,讓你可以感受到,網站企劃在規劃這樣的網站時的創意與美感。

星期三, 1月 17, 2007

JavaScript 不等於 Java

JavaScript

是一種基於對象的腳本語言。網景通訊公司最初在它的Navigator 2.0產品上設計並實現的,原名LiveScript。目前已經在WWW上廣泛用於動態Web頁面的程式語言。

Java

Java,是一種可以編寫跨平臺應用軟體的物件導向的程式設計語言,它最初被命名為Oak,作為一種小家用電器的程式設計語言,用於解決諸如電視機、電話、鬧鐘、烤麵包機等家用電器的控制和通訊問題。由於這些智慧型家電的市場需求沒有預期的高,Sun放棄了該項計劃。就在Oak幾近失敗之時,隨著Internet的發展,Sun看到了Oak在電腦網路上的廣闊應用前景,於是改造了Oak,在1995年5月以“Java”的名稱正式發佈了。Java伴隨著Internet的迅猛發展而發展,逐漸成為重要的Internet程式設計語言。

JavaScript並非Java

JavaScript是由網景通訊公司(Netscape)最初在它的Navigator 2.0產品上設計並實現的,原名LiveScript,除了句法上有一些相似之處以及都能夠提供網頁中的可執行內容以外,JavaScript和Java是完全不相干的。

JavaScript並不簡單

實際上儘管JavaScript是作為一種給非程式設計師提供的腳本語言而不是給程式設計師提供的程式語言來推廣和宣傳的,但是JavaScript是一門具有非常豐富特性的程式語言,和其他所有的語言一樣複雜或者更複雜,你需要對JavaScript有紮實的理解才能用JavaScript執行比較複雜的任務。

所以,javascript就是javascript,他不是java,更不是CSS

星期日, 1月 14, 2007

[轉貼]用 CSS 於連結後面加 icon (與副檔名相關小圖)

原始文章在http://plog.longwin.com.tw/programming/2007/01/14/css_attach_icon_hpyerlink_2007

通常連結是 <a href ...>, 但是都沒法一眼看出, 到底是一般連結還是某種類型的檔案(除非滑鼠移到連結上, 看檔名), 拜讀兩篇文章, 用 CSS 去判斷 副檔名 或 class name 來給他小圖.

以下參考自兩位 CSS 大師的文章:

使用 CSS 於 連結後面 加入 icon 的方法如下:(此為我的範例)

a[href $='.pdf'] { padding-right: 18px;background: transparent url(/images/icon_pdf.gif) no-repeat center right; }
a[href $='.doc'] { padding-right: 18px;background: transparent url(/images/icon_doc.gif) no-repeat center right; }
a[href $='.xls'] { padding-right: 18px;background: transparent url(/images/icon_xls.gif) no-repeat center right; }
a[href ^="mailto:"] { padding-right: 20px;background: transparent url(/images/icon_mail.gif) no-repeat center right; }
a[class ="popup"] { padding-right: 18px;background: transparent url(/images/icon_popup.gif) no-repeat center right; }
a[class ~="popup"] { padding-right: 18px;background: transparent url(/images/icon_popup.gif) no-repeat center right; }
a[class ="external"] { padding-right: 18px;background: transparent url(/images/icon_external.gif) no-repeat center right; }

a 後面能夠有以下幾種判斷法:

  • [foo] -- Has an attribute named "foo"
  • [foo="bar"] -- Has an attribute named "foo" with a value of "bar" ("bar")
  • [foo~="bar"] -- Value has the word "bar" in it somewhere ("blue bar stools")
  • [foo^="bar"] -- Value begins with "bar" ("barstool")
  • [foo$="bar"] -- Value ends with "bar" ("I was at the bar")
  • [foo*="bar"] -- Value has bar somewhere ("I was looking for barstools")
記得加的時後, icon 要準備好 :)

星期五, 1月 12, 2007

在新版blogger中插入flash

本文以youtube為例:

從youtube獲得的原始碼如下

<object width="425" height="350">
<param name="movie" value="FLASH位置"></param>
<param name="wmode" value="transparent"></param>
<embed src="FLASH位置" type="application/x-shockwave-flash" wmode="transparent" width="425" height="350"></embed>
</object>

修改後可讓blogger插入的原始碼如下

<object data="FLASH位置" type="application/x-shockwave-flash" width="425" height="350">
<param name="movie" value="FLASH位置"/>
<param name="wmode" value="transparent"/>
</object>
  1. 紅色字的部份即是插入swf的檔案位置
  2. 紫色字的部份則是影片的長度與寬度,如果你插入的不是youtube的影片,這裡也會有所不同
  3. 其他影片網站的插入原始碼也差不多,對應的FLASH位置跟長寬修改,多半都能夠使用

星期三, 1月 10, 2007

Opera mini 3.0 讓手機看網頁更輕鬆

Opera簡介

簡介取自http://zh.wikipedia.org/w/index.php?title=Opera&variant=zh-tw的節錄

Opera起初是一款挪威Opera Software ASA公司製作的支持多頁面標籤式瀏覽的網路瀏覽器,支持多種作業系統。Opera還有手機用的版本,在2006年更與Nintendo簽下合約,提供NDS及Wii遊樂器Opera瀏覽器軟體;也支持多語言,包括簡體中文和繁體中文。

Opera聲稱自己為「世界上最快」的瀏覽器,多年以來一直保持著世界第一的稱號!此外還具備了瀏覽區域大瀏覽區域大、多功能且小巧、高靈活性、高定製度、高安全性等優點。

不過由於Opera嚴格執行W3C網頁標準,不支持其它擴展標準和ActiveX,不支持某些只對IE相容的頁面,這樣瀏覽器安全性高,相容性低。以致閱覽一些網站無法順利顯示。

之前曾經撰寫過"CSS是什麼:對應多種瀏覽格式"關於網頁設計的變革,也不只一次提過Opera瀏覽器的好用,如果Opera對於各家網頁相容性更高的話,也許我也會捨棄用firefox,改用Opera呢。

專為低階手機而誕生的http網頁瀏覽器 Opera mini

Opera為手機做了Opera Mobile™ 與Opera Mini ™,其中Opera Mobile™是針對高階手機而誕生的瀏覽器,由於在下不是很有錢的人,因此只能跟你們介紹可以安裝在低階手機的Opera Mini ™ ,只要是彩色手機,且門號可以GPRS連線,就可以用手機在網路中衝浪了。又,無緣使用、又想一窺手機上網的感覺的朋友,可以按這裡試玩Opera mini模擬器

網頁的內容跟報紙一樣,內容複雜而且主題很多,即使你點選閱覽新聞內文,卻也仍舊有很多雜七雜八的相關聯結在頁面中。在電腦中你可以靠適當的排版來做主客區分,但手機的畫面更小,只能靠上下關係來區分重要內容與次要內容。如果你只使用表格排版的話,在手機上看起來將會破破爛爛。相關的說明,可以參考"CSS是什麼:對應多種瀏覽格式"一文。

3.0版新功能:縮編相同屬性的內文

前面提及,手機閱覽只能靠上下關係區分主客關係外,由於手機記憶體有限,有時候甚至一張網頁的內容,在手機上看起來是長的不得了!比方yahoo新聞安全帶繫腋下 視同未繫罰1500元一文,在新版的Opera min3.0,會把大量相同屬性的內文"縮編起來"。這樣可以更快速的閱讀網頁的主要內容,使用起來也更加人性化。

不過,由於判別的效果有限,有些應該要縮編的內容並沒有縮編。我想這是因為由於 xhtml 的向下相容規範使得沒辦法完全具備XML的優點,因此還沒辦法可以做到盡善盡美。我看見縮編功能之後在我心中想到的,是可以自由選擇我要打開哪一類型的樹狀類別,的一個使用者自由的閱讀權利。

RSS訂閱功能與相片發布部落格功能

RSS基於XML為要求的語言,是一套可以讓小容量裝置也可以輕鬆閱讀的格式,因此Opera mini也加入了RSS訂閱功能,不過,由於各家網站的RSS呈現定義不太一樣,當我訂閱Engadget Chinese RSS時,他的RSS內容居然讓我的 nokia6010記憶體不足而無法完全閱讀完! 但是用來看yahoo奇摩新聞的RSS是相當足夠的。

Opera mini也可以跟你的手機相機功能連動,讓你可以透過手機把你拍的相片發佈至部落格,不過僅限於在Opera的部落格才能上傳,不知道以後可不可以支援更多的部落格。

使用感想:相當優良的階段性軟體

在還沒有更好的手持式瀏覽網頁方法以前,Opera mini可以算是不錯的網頁瀏覽器了,如果網頁設計師能夠思考到這一個層面來設計網頁,我想對於使用手機上網應該是件很舒服的事情才對。

星期六, 1月 06, 2007

[轉載]CSS的明確性(Specificty)

原始文章:http://www.htmldog.com/guides/cssadvanced/specificity/

如果你對某個標籤元素,設定了兩個(或更多)具有衝突的CSS設定,瀏覽器會去遵循一些基本的規範,來決定使用哪個CSS設定。

這個看似不是很重要,而且在大多情況下,你並不會碰到這樣的衝突。但當你的CSS設定規模漸漸變得越來越大,越來越複雜時;或者開始修改舊版本的CSS檔案時,就有可能發生衝突了。

如果選擇符(selectors)都一樣,那麼後者的選擇符將優先於最先的選擇符。像以下的範例,如果你這樣設定:

p { color: red; }
p { color: blue; }

p標籤的顏色屬性將會是藍色,因為遵循了『後者優先』的規則。

然而,你不會選擇使用衝突宣告效果一樣的選擇符(因為那裡沒有大量的點),讓衝突完全合理的發生。不過,當你使用了巢狀選擇符,於以下的例子中:

div p { color: red; }
p { color: blue; }

也許看起來p標籤是置於div標籤內時,p標籤的顏色將會是藍色。依照『後者優先』看起來是這樣,但事實上他們會選用指定為紅色的第一個選擇符。基本上,更具體的選擇符,所造成的衝突才是本文要談論的主題。

實際上,選擇符個別都持有一個優先值。基本上,如果你使用的是id選擇符("#id名稱") 他的優先值是100;每個類(class)選擇符(".類名稱") 的優先值是10;而HTML標籤選擇符(任何HTML名稱)的優先值是1。當使用更具體的選擇符的時候,依照上述的數值將之總和,就可以得到該選擇符的優先值了。

  • p :的優先值是1(1個html選擇符)
  • div p :的優先值是2(2個html選擇符;1+1)
  • .tree :的優先值是10(1個類選擇符)
  • div p.tree :的優先值是12(兩個html選擇符與1個類選擇符;1+1+10)
  • #baobab :的優先值是100(1個id選擇符)
  • body #content .alternative p :的優先值是112(1個html選擇符,id選擇符,類選擇符,html選擇符;1+100+10+1)

所以依照上面列表的範例,div p.tree(優先值12) 的優先權就高於div p(優先值2);body #content .alternative p(優先值112)的優先權就高於上述全部的範例。而不會依照『後者優先』的規則。

星期二, 1月 02, 2007

灌水文:新年快樂

看101煙火 祝各位2007新年快樂

出處網址:http://www.taipei-101.com.tw/fireworks/index.htm