ALA, The Web Design Survey, 2007

ALA Web Design Survey, 2007在四月24日 A List Apart (ALA)(註) ,這個網頁設計者的必讀網站,進行了網頁設計調查研究。這個問卷對象主要是製作網站的人。我離開職場回到學校唸書已經3年了,也許現在網站設計環境已經跟當年有些改變。但是如果就我以前的認識,從職稱,能力與教育背景的問項可以看到一些有意思的東西。

那些算是「製作網站的人」呢?在這份問卷中的第四個問項中,詢問填答者的職稱,項目包括了:

  1. 設計師(Designer)
  2. 開發師(Developer)
  3. 介面設計師(Interface Designer, UI Designer)
  4. 網頁設計師(Web Designer)
  5. 專案經理(Project Manager)
  6. 資訊架構師(Information Architect)
  7. 使用性/優使性專家/顧問(Usability Expert/Consultant/Lead)
  8. 可及性專家/顧問(Accessibility Expert/Consultant/Lead)
  9. 文案/編輯(Writer/editor)
  10. 創意總監/藝術總監(Creative Director, Art Director)
  11. 網頁(站)總監(Web Director)
  12. 網頁(站)製作人(Web Producer)
  13. 站長(Webmaster, Web Master)

那麼,這些琳琅滿目的職稱背後,需要哪些專業能力呢?第五題列出了以下選項:

  1. 圖像設計/視覺設計 (Graphic design)
  2. 頁面編排,介面設計 (Page layout, Interface Design)
  3. 資訊架構,頁面框架,網站組織 (Information Architecture, Wireframing, Sitemapping)
  4. 編寫HTML, XHTML (Markup HTML, XHTML)
  5. 編寫CSS (CSS coding)
  6. 使用性/優使性測試 (Usability testing/knowledge)
  7. 可及性測試 (Accessibility testing/knowledge)
  8. 前端程式開發 (Front-end programming, e.g. JavaScript)
  9. 後端程式開發 (Back-end development, e.g. PHP, Ruby on Rails, ASP)
  10. 圖像編輯處理 (Image editing/production)
  11. 文案/編輯 (Writing/Editing)

嘿嘿,對SOHO來說,常常你的客戶都要求你一個人一手包辦吧。我最近看104上面的網站設計類接案快報,開出來的工作項目還都是希望能找一個一人打天下的料呢。這就像棒球投手一樣,大聯盟球隊的投手要分為先發、中繼、救援、左打者專門投手等等,甲子園的投手通常就只能一人投到底。當一個老闆(業主)說,「hey,我們只要甲子園的程度就好,LP擔著好好幹吧」,這還算上道。至少他知道這中間的差距。如果老闆說「那找一個全才不是更好?」的時候,最好他有出得起松阪級薪水的準備,要不然只是徒增雙方痛苦而已。

這麼多專業能力,哪些科系有提供這樣的學科訓練啊?這份問卷的第十題提供了一些線索:

「你大學就讀科系與你網頁工作有關嗎?例如:視覺設計相關(Graphic Design),電腦資訊科學相關(Computer Science),或圖書館科學(Library Science)。

圖書館科學(Library Science)?沒搞錯。我也是現在開始念圖書館資訊研究所以後,才瞭解到這兩種工作上的相關性。圖書館科系的資訊組織課程有助於資訊架構與網站組織的能力,資訊行為研究根本就是使用性與可及性測試的基礎。而這些都是在設計與電腦科系較不擅長的。

雖然這份問卷並不是為了台灣網頁工作者所設計的。特別在第21, 22, 23 關於年度休假與福利的問項上,在51勞動節的今天看起來特別刺眼。不過填過這份問卷,反而可以知道許多事情。(問卷抽獎:研討會入場卷、30G video ipod、T-shirt的部份了)

I Took the 2007 ALA Web Design Survey

:ALA 也是美國圖書館學會(American Library Association)的縮寫。完全是巧合。

四月15日 CSS裸體日

網路暴民Jacky處看到:CSS Naked Day 2007
根據活動網站上的說明,舉辦這個裸體日的目的是為了推廣網頁設計的標準。的確,沒有比把視覺設計的部份脫光光這種作法,更能夠強調出把語意(Semantic)與視覺表徵(Visual Representation)區分出來的設計原則了。
今天才看到,是有點晚啦。不過還可以脫光個大半天吧。一脫下來就知道我整個網站的語意結構還要再加強才是。
拍照留念:
CSS_NakedDay_20070415.png

CSS(links for 2006-04-08)

你對CSS,掌握到第幾層了?

似乎有點武俠小說的感覺。在CSS Insider處,看到這篇 Friendly Bit » Levels of CSS knowledge。文中區分一般人對CSS的理解程度,頗有趣,簡單翻譯如下(每層的解釋我沒有照翻,有興趣者請自行至原文處。而與原文解釋不同的部分,如有錯誤,文責完全在我):

問題:「你會用CSS嗎?」

第0層的回答:「CSS? 是新出的線上遊戲嗎?」
第1層的回答:「喔,我知道啊。我會用CSS來去掉超連結下面的底線。」
第2層的回答:「沒有,我不喜歡用DIV;TABLE比較好用。」
第3層的回答:「有啊,那很優喔,但是我沒用,因為……」
第4層的回答:「CSS?喔,當然。我所有的頁面都是用DIV來排的。」
第5層的回答:「我用CSS來設計網頁,CSS比TABLE好,因為……」
第6層的回答:「那一版的CSS?…喔,有啊,你有讀過我寫的那本書……」

Continue reading “你對CSS,掌握到第幾層了?”

從表格編排技巧到CSS:一個網頁設計者的歷程

前言

最近市面上出現了幾本CSS教學的書,如《The Zen of CSS-網頁視覺設計的王道》,《Eric Meyer再談CSS網頁排版設計》、《Web CSS網頁樣式設計學》、《CSS網頁設計師手札-101個您一定會遇到的問題與解答》等等。同學也買了後兩本來自修CSS。我翻了一下,發現有關於版面編排(layout)的問題分別是放在第七章與第八章來說明的,前面的章節都在教讀者如何修改字型與顏色等等。當然,一開始初步如何呼叫使用CSS是最基本的,但是我自己認為,應該先對CSS 編排有最基本的概念,才能往下學習各種修飾語法。其中一本竟然還教讀者使用表格(table)來編排頁面,真是越教越回去了。

我才想起我以前(2004)有翻譯了幾篇A List Apart關於CSS觀念的入門文章,我以為我早就放在網路上了,沒想到今天在學校上網既然遍尋不到。回家一看,原來還壓在一堆檔案裡面。我已經忘了當初是什麼原因沒有放上來,好像是翻譯授權的關係。我今天又上A list apart 看,發現翻譯是可以免費取得授權的,只要註明原文來源,與不要任意更動文句,與不從事販賣等商業行為就可以了。

這篇文章是由Jeffrey Zeldman在2001年寫好的,說明了從以往網頁設計演進到使用CSS設計的過程,許多環境因素已經與當時大不相同,A list apart的網站也早已改版多次,文中所說的三欄或兩欄式的CSS編排也早就是大部分主流blog的用法。但是,對大部分已經會作網頁,但是還不瞭解CSS編排的精神的,這是一篇值得參考的文章;另一方面,我們也可以瞭解到,當初費盡心思發展出CSS三欄編排所為何來。文章中最主要說明的是,網頁標準的精神在於:

  • 內容與視覺樣式分開;
  • 將資料結構化;
  • 讓CSS控制所有的視覺編排工作。

這三點才是應用CSS網頁設計最主要的重點。文章是2004年四月翻譯的,那時候翻的不好,當然現在也沒長進就是了。
Continue reading “從表格編排技巧到CSS:一個網頁設計者的歷程”

IE/Mozilla CSS hack

因為IE跟Mozilla支援的CSS不盡相同,所以為了讓兩種瀏覽器看起來一樣,總要動點手腳。
如果用CSS來作的話,基本上原則是要利用某些語法只有其中一種支援,加上越後面設定的CSS指令較優先執行,或是越具體的CSS指令越優先執行的特點,所作出來的。

  1. 首先是Box Model Hack
    利用 IE不認得斜線的缺點,但是對於IE6來說,這種Hack有時候不怎麼有效……還搞不清楚為什麼

voice-family: “\”}\””;
voice-family: inherit;

  1. A quick and dirty CSS hack: PNG backgrounds : evolt.org, Visual Design
    用 IE不認得 child selectors (「大於」符號)的缺點

div.hack { color:#fff;}
body > * div.hack { color:#ff0; }

  1. CSS hack for IE6 and NN6
    利用IE會自動修正註解,而Mozilla不會的特點

pre {
color: blue;
anyword: “;
/* For Mozilla only, but won’t work only the next rule */
color:;
color: red;
background: #ccc;
/*”;/* here IE can read */
font-weight: bold;
}

這個Hack要用到一個假造的非法屬性,所以可能CSS驗證不會過

  1. 最完整的集大成在:Hide CSS from Browsers,提供了各種CSS與瀏覽器的破解法,這裡是各種瀏覽器對於CSS語法支援程度的整理

CSS教學教材

最近為了一堂CSS的課程,翻譯了WDGGuide to Cascading Style Sheets,作為課程的基本教材資料。
雖然我還是不清楚三個小時的CSS可以教到什麼,想了各種可能,問了很多朋友,結果還是沒個準。我想,就先認識CSS可以做什麼,然後實作基本的CSS,也許在看看未來可能的發展方向吧。
不過這分教材,請大家參考看看吧。
授權部分,版權部分是根據WDG採用的OPL,我也附上了原作的網址與作者了。
根據OPL的條文,翻譯跟更改文件需要:

  1. The modified version must be labeled as such. / 更改的版本必須與同原作標題。
  2. The person making the modifications must be identified and the modifications dated. / 更動者必須標明更改的時間
  3. Acknowledgement of the original author and publisher if applicable must be retained according to normal academic citation practices. / 依照學術引用慣例,必要時需向原作者或出版處知會
  4. The location of the original unmodified document must be identified. / 必須標明原作的出處位置
  5. The original author’s (or authors’) name(s) may not be used to assert or imply endorsement of the resulting document without the original author’s (or authors’) permission. / 不可以在沒有原作者的同意的情況下,將原作者的名字用來當作對於這份文件的擁護或是背書的暗示。

除了注意這幾點,沒有找到國內有什麼「如何使用OPL」的文件,不過反正OPL的作者也轉向支持Creative Commons
Download file

[新樣式]藍色漸層

新完成一個MT CSS樣版, 作給Natasha用的,不過自己覺得還不錯,也就公開出來吧~~~
藍色漸層樣版
檔案在此
安裝:
解開zip檔,內有css與三個圖檔,
圖檔預設放在css 相同的目錄,當然你可以自己改路徑