差點忘了今天是CSS Naked Day…..
To know more about why styles are disabled on this website visit the
Annual CSS Naked Day website for more information.
ALA, The Web Design Survey, 2007
在四月24日 A List Apart (ALA)(註) ，這個網頁設計者的必讀網站，進行了網頁設計調查研究。這個問卷對象主要是製作網站的人。我離開職場回到學校唸書已經3年了，也許現在網站設計環境已經跟當年有些改變。但是如果就我以前的認識，從職稱，能力與教育背景的問項可以看到一些有意思的東西。
那些算是「製作網站的人」呢？在這份問卷中的第四個問項中，詢問填答者的職稱，項目包括了：
- 設計師(Designer)
- 開發師(Developer)
- 介面設計師(Interface Designer, UI Designer)
- 網頁設計師(Web Designer)
- 專案經理(Project Manager)
- 資訊架構師(Information Architect)
- 使用性/優使性專家/顧問(Usability Expert/Consultant/Lead)
- 可及性專家/顧問(Accessibility Expert/Consultant/Lead)
- 文案/編輯(Writer/editor)
- 創意總監/藝術總監(Creative Director, Art Director)
- 網頁(站)總監(Web Director)
- 網頁(站)製作人(Web Producer)
- 站長(Webmaster, Web Master)
那麼，這些琳琅滿目的職稱背後，需要哪些專業能力呢？第五題列出了以下選項：
- 圖像設計/視覺設計 (Graphic design)
- 頁面編排，介面設計 (Page layout, Interface Design)
- 資訊架構，頁面框架，網站組織 (Information Architecture, Wireframing, Sitemapping)
- 編寫HTML, XHTML (Markup HTML, XHTML)
- 編寫CSS (CSS coding)
- 使用性/優使性測試 (Usability testing/knowledge)
- 可及性測試 (Accessibility testing/knowledge)
- 前端程式開發 (Front-end programming, e.g. JavaScript)
- 後端程式開發 (Back-end development, e.g. PHP, Ruby on Rails, ASP)
- 圖像編輯處理 (Image editing/production)
- 文案/編輯 (Writing/Editing)
嘿嘿，對SOHO來說，常常你的客戶都要求你一個人一手包辦吧。我最近看104上面的網站設計類接案快報，開出來的工作項目還都是希望能找一個一人打天下的料呢。這就像棒球投手一樣，大聯盟球隊的投手要分為先發、中繼、救援、左打者專門投手等等，甲子園的投手通常就只能一人投到底。當一個老闆(業主)說，「hey，我們只要甲子園的程度就好，LP擔著好好幹吧」，這還算上道。至少他知道這中間的差距。如果老闆說「那找一個全才不是更好？」的時候，最好他有出得起松阪級薪水的準備，要不然只是徒增雙方痛苦而已。
這麼多專業能力，哪些科系有提供這樣的學科訓練啊？這份問卷的第十題提供了一些線索：
「你大學就讀科系與你網頁工作有關嗎？例如：視覺設計相關(Graphic Design)，電腦資訊科學相關(Computer Science)，或圖書館科學(Library Science)。
圖書館科學(Library Science)？沒搞錯。我也是現在開始念圖書館資訊研究所以後，才瞭解到這兩種工作上的相關性。圖書館科系的資訊組織課程有助於資訊架構與網站組織的能力，資訊行為研究根本就是使用性與可及性測試的基礎。而這些都是在設計與電腦科系較不擅長的。
雖然這份問卷並不是為了台灣網頁工作者所設計的。特別在第21, 22, 23 關於年度休假與福利的問項上，在51勞動節的今天看起來特別刺眼。不過填過這份問卷，反而可以知道許多事情。(問卷抽獎：研討會入場卷、30G video ipod、T-shirt的部份了)
註：ALA 也是美國圖書館學會(American Library Association)的縮寫。完全是巧合。
四月15日 CSS裸體日
從網路暴民Jacky處看到：CSS Naked Day 2007
根據活動網站上的說明，舉辦這個裸體日的目的是為了推廣網頁設計的標準。的確，沒有比把視覺設計的部份脫光光這種作法，更能夠強調出把語意(Semantic)與視覺表徵(Visual Representation)區分出來的設計原則了。
今天才看到，是有點晚啦。不過還可以脫光個大半天吧。一脫下來就知道我整個網站的語意結構還要再加強才是。
拍照留念：
CSSplay (links for 2006-08-02)
-
Stu Nicholls 建立的這個CSSplay網站有許多的CSS效果示範。特別是許多不需要javascript的CSS “:hover” 效果：如選單、按鈕、相簿、影像地圖等等。
CSS(links for 2006-04-08)
-
十個步驟學會CSS定位
-
在email 中使用 CSS 語法的相容性比較。完整的測試了Web-base (Gmail, Hotmail, Yahoo! Mail, Windows Live Mail), PC與Mac 的電子郵件軟體 (PC: Outlook 2003/OE, AOL 9, Lotus Notes, Thunderbird. Mac: Mac Mail, Entourage, Eudora)
-
了解CSS Box Model 的概念。一圖勝千言，更何況是互動的。
你對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？…喔，有啊，你有讀過我寫的那本書……」
從表格編排技巧到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指令越優先執行的特點，所作出來的。
- 首先是Box Model Hack—
利用 IE不認得斜線的缺點，但是對於IE6來說，這種Hack有時候不怎麼有效……還搞不清楚為什麼
voice-family: “\”}\””;
voice-family: inherit;
- A quick and dirty CSS hack: PNG backgrounds : evolt.org, Visual Design—
用 IE不認得 child selectors (「大於」符號)的缺點
div.hack { color:#fff;}
body > * div.hack { color:#ff0; }
- 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驗證不會過
- 最完整的集大成在：Hide CSS from Browsers，提供了各種CSS與瀏覽器的破解法，這裡是各種瀏覽器對於CSS語法支援程度的整理
CSS教學教材
最近為了一堂CSS的課程，翻譯了WDG的Guide to Cascading Style Sheets，作為課程的基本教材資料。
雖然我還是不清楚三個小時的CSS可以教到什麼，想了各種可能，問了很多朋友，結果還是沒個準。我想，就先認識CSS可以做什麼，然後實作基本的CSS，也許在看看未來可能的發展方向吧。
不過這分教材，請大家參考看看吧。
授權部分，版權部分是根據WDG採用的OPL，我也附上了原作的網址與作者了。
根據OPL的條文，翻譯跟更改文件需要：
- The modified version must be labeled as such. / 更改的版本必須與同原作標題。
- The person making the modifications must be identified and the modifications dated. / 更動者必須標明更改的時間
- Acknowledgement of the original author and publisher if applicable must be retained according to normal academic citation practices. / 依照學術引用慣例，必要時需向原作者或出版處知會
- The location of the original unmodified document must be identified. / 必須標明原作的出處位置
- 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
