Café de Poète

AvatarJeter, le poète de CANCER. a personal Website creator since 1996, always looking for the best way of designing.

達設計2007新年賀卡



2007年版印的賀卡,也是唯一一次付印的賀卡,之後連電子賀卡都沒發送,真是慚愧,主題就是以我家的四隻貓作畫,當然包括當時已經變成天使的大頭,據竹林動物醫院的吳醫師說,我給他的賀卡被其他帶寵物來看病的主人索取了,後來又多拿了幾張過去給吳醫師發送。


附上白色背景只有貓咪的圖

<embed>標籤中wmode屬性將致使Firefox對flash中鍵scroll功能失效


Macromedia Flash 的 Components 中有 UIScrollBar 與 ScrollPane 兩個組件,用來針對 Flash的 texfield 或是 movieclip 做scroll 動作的控制,最近在做專案的時候,遇到了一個問題,即是 Flash 本身 components 有支援滑鼠中鍵 scroll 的功能,但是在一個特殊情況之下此功能將失效,也就是當需要設定 swf 底色為透明時,必須要在 embed 標籤中,加上 wmode=transparent 這個屬性,這個屬性在 object 標籤中以 param 的方式處理,且不會對 IE6 的瀏覽器造成 scroll 失效的影響,但是卻導致 Firefox 無法以中鍵 scroll 目標項目,目前我使用的 Firefox 版本為2.0.0.1,這個測試結果是根據安裝非官方組件測試而來,該組件為 plasmaplugs 所釋出的 Scroller Bar 由於更改 Flash 檔案對於 scroll 失效完全沒有幫助,但是 plasmaplugs 的 Scroller Bar 範例檔網頁卻完全支援 Firefox 中鍵 scroll無誤,於是我改由 HTML 標籤下手,分別刪去了 以及 Dreamweaver 8.02 針對 IE ActiveX 安全性修正的 AC_RunActiveContent 語法,以最陽春的 Flash 嵌入方式測試,卻仍然無效,直到我刪去了 wmode="transparent" 屬性,才發現從頭到尾都是它在作怪…於是我只好放棄背景圖與 Flash 分開製作的作法,將背景圖做在 Flash 檔案中,並且將此問題發佈至Mozilla Taiwan 討論區問題網站與網頁技術傳教板,提供 Firefox 的使用者與網頁設計師參考。

得力孟母 Daily MOVER

一段玩笑話,讓我找到了這個有趣的搬家公司:
阿志 半糖青春 說:
以後看哪家快遞可以考慮用夸父當吉祥物
Jeter Le Poète 說:
工程公司要用愚公嗎
阿志 半糖青春 說:
還滿有風格的
Jeter Le Poète 說:
減肥藥就用嫦娥好了
阿志 半糖青春 說:
靠杯....
阿志 半糖青春 說:
阿搬家公司不就去找孟母合作
Jeter Le Poète 說:
好啊
於是我鍵入了“孟母 搬家 公司”在 google 找到了…
這就是孟母也會偷笑的 [ 得力孟母 ] from Danny*2b Roodo!™

*註:很可惜「得力孟母」原文似乎已經在該網誌消失了。

Mutiple Versions Internet Explorer



在進行網頁排版工作時,經常會遇到的問題就是瀏覽器的相容性,其實不僅只是排版,程式 debug 的時候,瀏覽器的相容性也常是個測試指標,不同版本的瀏覽器,往往有它各自的刁鑽問題存在,舉例來說:當你使用 Dreamweaver MX 進行網頁排版時,預設的 <META> 標籤位置是在 <TITLE> 之後,乍看之下只是很尋常的順序問題,很難令人聯想到會造成多麼嚴重的問題,但是這樣的順序當你的網頁語系是使用 utf-8 時,在 Internet Explorer 5+ 上,將會發生網頁內容顯示為空白的現象,而 Internet Explorer 本身並不支援在一個作業系統上,安裝多個不同的版本,這使得除錯與測試有了麻煩,幸好, evolt.org 提供給大家多種選擇,在它的 Browser Archive 中,提供了許多不同瀏覽器的各式版本,當然它也提供了從 Internet explorer 3 開始到 Internet Explorer 6 針對不同環境的單機運行版下載,更多版本的 Internet Explorer?聽起來著實有點可怕,不過為了能夠更方便的測試,只好讓它們在你的電腦裡開 home party 了!

Related Link:
從 evolt.org 下載各個版本的 Internet Explorer

老品牌的新思惟 - 郵局便利箱/便利袋

同場加映:J-MALL TOKYO FASHION EXPRESS


郵局便利箱/便利袋推出也已經有一段時間了,其中也經歷過幾次改版,經手過的就有三個版本,獲得來源都是網路拍賣,而在郵局曝光的電視廣告中,就有一隻是以網路拍賣為主題拍攝,顯而易見,郵局便利箱/便利袋確確實實的瞄準了廣大的網拍族群,實惠的價格、全省均一價投遞服務與全國郵局及郵政代辦所數千個通路點加上可重複利用的設計,對於從事通路多年的宅急便,不啻是一個相當具有威脅性的競爭對手。

而難能可貴的是,以往在印象中,公家機關的宣傳物總是保守而缺乏新意,甚至會出現一些急就章或水準參差的品項,而於 2006 年 9 月問世的版本,充滿日式簡約風格的設計相當令人驚艷,設計者採用了環保味十足的綠色以及鴿子的圖像來象徵便利箱環保與郵遞的特性,並且以色塊的方式勾勒出整個版面,整體畫面相當乾淨而清新,盒面上也有許多貼心的使用提示,側面更是規劃了一個個人廣告的區塊提供網拍族群運用,當我收到這個版本的便利箱時,這個區塊的設計不禁令我會心一笑,細看之後更覺得這是值得收藏的一款設計良品,無論是在視覺上以及使用性上,都是經過思考的理性結果,一個好的設計,本當如此。



這個網站是由豐華唱片出資經營的,透過與日系潮流雜誌的合作來打開市場,雖然在產品本身可能需要篩選才能買到真正的良品,但是在配送時的包裝外盒,也有可嘉許之處,外觀設計上比較沒有可以稱頌之處,J-MALL採用學院風徽章來設計外盒商標,原色的紙材也是相當環保,比較值得一提的是它採用抽屜式的開闔方式,消費者可以把它當作一個收藏物品的小抽屜使用,而鞋盒般的尺寸可以搭配大部分的產品寄送,產品本身也會使用白報紙先包裝過再裝盒,隨盒都會附贈品牌貼紙一份,對於品牌的推廣也有一定的作用,J-MALL 在配送上的包裝可說盡善盡美,在網路購物廣泛使用的現今,的確可做為經營網路購物網站者參考的典範。

Related Link:
郵局 便利箱(袋)品牌

「無障礙」還是「唔,障礙」?



什麼是無障礙呢?簡單來說,即是在網頁上具備無障礙空間,讓身體上、心理上、以及技術上有障礙的朋友能夠順利閱讀的網頁,習慣瀏覽聲光效果滿載網頁的一般使用者,可能很難想像,在視盲、弱視、色盲甚至肢體殘障的狀況之下,能夠瀏覽的網頁會是長什麼樣,其實除非是完全以 Adobe Flash (Macromedia Flash) 技術所製作的網站之外,一個設計良好的網站,在加入了無障礙存取技術之後,單憑外觀你甚至會無法分辨,這個網站是否符合無障礙規範。

雖然 Dive Into Accessibility 提供了一個非常完整的無障礙親和力設計示範,不過其實一個符合標準的無障礙網頁,不一定需要長得像它這麼乾淨(或陽春)。


行政院研究發展考核委員會於九十一年六月開始推動「無障礙網頁開發標準暨標章核發作業」委外案,以 W3C 協會(The World Wide Web Consortium)所屬之 Web Accessibility Initiative (WAI) 組織的無障礙網頁內容標準相關規範 Web Content Accessibility Guidelines (WCAG) 以及各國在制訂無障礙網頁相關政策等相關措施,訂定我國的「無障礙網頁開發規範」,並且歸類為三個等級,從政府機關的網站開始落實實施,以循序漸進的方式,從全面性通過無障礙 1A 級標章開始。

那麼執行成果好不好呢?

在數年前,有機會提早閱讀了 Dive Into Accessibility 這本電子書,對於無障礙的觀念有了基本的認識,接著在一次公家機關的提案中,正式的著手開始撰寫符合無障礙網頁規範的網頁,我接受了 Jeffrey Zeldman 在他著作 design with web standards 中的建議,使用過渡技術以及結構化的 XHTML 搭配 CSS (Cascading Style Sheets) 來撰寫,並且使用@import的方式讀入樣式表 (CSS) ,使過舊的瀏覽器略過 CSS 直接顯示結構化的單純頁面,這種做法在移除樣式表 (CSS) 的狀況之下,仍然可以正常閱讀網頁內容,也就是說在舊版瀏覽器或是親和力瀏覽器(例如:螢幕朗讀軟體)上,使用者可以看到正常顯示且標題與段落相對關係清楚的內容,在這方面的排版技術上, css Zen Garden 上提供的範本清楚告訴你他們在這方面有多麼地內行。


在我製作的過程中,我也不斷地去瀏覽線上已經通過無障礙網頁規範的政府機關網站,不過很可惜的是,幾乎所有的網站都沒有考慮到將網頁的內容結構化這個部份,多半都採取在 <table> 表格中使用註解以通過自動檢測系統,雖然使用簡單的表格來作版面配置,並不會違反 WAI 或是 Section 508 甚至是我國的「無障礙網頁開發規範」,但是一旦拿掉樣式表或是在文字瀏覽器上,就成了結構紊亂的奇妙頁面,這樣的做法,對於無障礙存取除了沒有幫助以外,反而造就了另外一種使用動線上的障礙。

截至目前為止,我陸續經手了三個無障礙網頁開發案,不敢說對無障礙的技術已經非常了解,但是我認為結構化的標記語言搭配樣式表的做法,就使用性而言,絕對是無障礙網站的基本需求(即使使用 <table> 排版依舊可以輕鬆的通過無障礙自動檢測),可惜的是,我幾乎沒有看到落實這種做法的政府機關網站,甚至也有使用多個巢狀表格來排版的不良示範(但他們都掛著無障礙標章),只能感嘆這樣的做法在我的觀點來看可以說是流於徒具形式了。而在 Jeffrey Zeldman 的著作中也提到,應儘可能使用多種瀏覽器對網頁進行測試,以避免無效的 CSS 規則,很可惜的是經過瀏覽器大戰之後,許多網頁設計師選擇西瓜偎大邊,僅針對 IE 支援來設計網頁,這可以說又是一項違反無障礙精神的做法,然而這樣的案例卻不鮮見於這些通過無障礙規範的政府機關網站中,以推動無障礙規範的政府機關來說,可以說是相當不良的示範。


儘管設計範疇之廣,但是設計的共通原則卻是不變的,即是以使用者為出發點的概念,而關懷弱勢的精神更是一個良善設計中不可或缺的環節,希望藉由此篇文章的呼籲,能夠將無障礙以及跨平台的網頁設計概念,傳達給大環境中的執業設計師,不要讓無障礙的設計僅止於通過檢測獲得標章,而能夠真正地正視使用者的需求,讓殘障人士能夠在網際網路的世界中更貼近通行無阻。

Related Links:
Web Accessibility Initiative (WAI)
Section 508
Dive Into Accessibility
無障礙網路空間服務網
design with web standards
留住訪客,從掃除路障做起
瀏覽器大戰

統一香蕉牛乳478cc



7-11 便利商店在統一企業的經營下成為全台第一大便利商店連鎖體系,它的成功早已載滿美譽,走一趟超商,觸眼可及之處在在都是充滿新鮮味的商品,可見得統一對引進以及開發新商品的確投注心力。

近來適逢香蕉生產過剩,外銷的特級香蕉在批發市場約一斤 16 元上下就有,50 元不到你就可以買到一串漂亮又碩大的香蕉,加上最近添購了果汁機,因此香蕉牛奶變成了最近常喝的飲品,不但味道香濃,營養價值高,而且香蕉的甜度高,混合的過程中也完全不需要另外加糖,喝著喝著,靈光一閃,覺得超商裡的低溫飲品紅橘二將:西瓜牛奶以及木瓜牛奶,其實挺適合加上新生力軍,也就是香蕉牛奶,統一以其號稱的膜過濾技術,大打原味保證的廣告,不知道碰上了香蕉牛奶,會不會有令人激賞的火花?大企業若是願意出手,也算是可一解蕉農之苦,不過我對於企業經營是個大外行,或許這並不是一個高明的點子,不過既然有此念頭,先來自己張圖片過過乾癮也好。

考慮一下吧?

原發表於:Tuesday, November 07, 2006, 07:27