創用 CC 網頁多媒體編撰套件

這一篇是我給創用 CC 電子報的稿件，因為篇幅關係，分作三期刊出。不過這裡放的是未經切割的原始版本。

創用 CC 網頁多媒體編撰套件

相信本報的讀者，對於創用 CC 的特性已經有了基本的了解，知道創用 CC 要在僵化的智慧財產權市場上添加彈性，給予創作者更多的選擇，同時要讓各種複雜的授權方式變得簡單易懂、可彼此搭配混用，因此以現行的著作權法為基礎，規劃了一系列的授權方式，每一種授權方式同時提供法律條款、授權標章、數位標籤，讓任何法院、任何人、各種應用程式都能輕易明白數位內容所採用的授權方式。

上面這段文字，背後的理念與細節絕非三言兩語可以講完；台灣創用 CC 計畫多年推動下來，累積了不少文件教學，想更深入了解這些理論背景，可以多加利用。然而，對於實務工作的朋友們來說，或許更關心的是要如何把「創用 CC」放進自己的設計流程或工作流程當中⸺確實創用 CC 的網站上提供了許多的工具與資源，但是這些東西零靈散散的，要怎麼整合在一起呢？

許多設計領域當中，都有不少開發套件或整合開發環境，協助開發者或設計者在同一個環境中，完成所有（或主要）的工作；創用 CC 在這個領域當中還相當年輕，並沒有任何一個完整的開發套件，能夠兼顧設計流程與創用 CC 的需求。但是把創用 CC 帶進設計流程確實可行，本文即要以「網頁設計」為例，試圖拼湊各種既有的資源，讓從事網頁設計的讀者們看看這件事可以怎麼來達成，也提供有志之士未來開發工具軟體的參考。

做一個網頁，尤其是做一個多媒體網頁，通常會有幾個階段：

設計原型：設計整個網頁的原型（Prototype）與框架，包括了概念、質感、整體風格等。
取用素材：挑選可能適用的現成多媒體素材，這部份還包括了素材的管理。
創作內容：製作原創的多媒體內容，以及修改、混搭適用的現成多媒體素材。
製作成品：利用素材（不論是現成的或是自創的），按照原型的發展，製作出最後的網頁。

這四個階段並不是切得一乾二淨，而是彼此間會有重疊、往返，不過大致上還是可以這樣來區分。在設計原型的階段當中，主要產出的都會是內部文件，不會公開出來，照理說幾乎可以不用考慮智慧財產權的問題；不過在這個階段中，你很有可能會用氛圍板（Mood Board）來說明網站的預期質感與風格，而氛圍板上的素材，也有可能沿用到後期的設計流程當中，或者是你的案主／關係人會很在意網站原型上的各種視覺元素，認為這些視覺元素會出現在最終的網站成品上……在這些情況下，一開始就處理好素材的智慧財產權，會比事後再來釐清要更事半功倍。

取用素材則是設計師的必修課了。每個設計師手上都一定有個網站清單，這些網站會提供預先經過授權的各種圖片，讓設計師可以拿去用於商業用途，例如做網頁。有些圖庫網站要繳費纔能使用（月費或以圖片張數計算），好處是圖片素質跟風格會比較一致，另外有些免費的圖庫網站，良莠則不大一定。

近年來隨著 Flickr 等相簿網站的興起，也有很多商業圖形應用，會從這些相簿網站尋找；不論是做書、做廣告宣傳文案、做網頁，都已經有不少使用 Flickr 的實例。你可能已經知道 Flickr 內建了創用 CC 授權機制，讓圖片作者能夠選擇圖片的授權方式，也讓你能夠從進階搜尋指定某些創用 CC 授權方式，篩選出更能自由運用的圖片；但是你可能不知道，除了 Flickr 本身以外，還有許多網站，能夠幫助你尋覓 Flickr 上的圖片。

flickrCC 是個專門搜尋採創用 CC 授權的 Flickr 圖片的網站，省下了每次要按「進階搜尋」的麻煩，另外還直接內建簡單的圖片編輯工具，讓你可以線上處理圖片，單鍵加入姓名標示，或把圖片傳進 Picnik 這個線上圖片編修服務。

由於多數採創用 CC 授權的圖片都要求姓名標示，意味著你得記得每一張圖片的出處網址、作者姓名字號、授權方式等資訊。想像一下你有一個資料夾，裝著幾百張 Flickr 抓下來的圖檔，你要怎麼知道某一張圖片的作者、出處、授權方式？以前你可能得要另外弄個資料庫、試算表或文字檔，來紀錄每一個圖檔（檔名）跟他的對應資訊；現在 flickrCC 讓你可以單鍵把這些資訊放進圖檔，做成圖片的一部分（附加在原本的圖片外圍，所以不會有字蓋到圖），從此再也不會有這種煩惱了。

有個叫 Behold 的網站，也能搜尋採創用 CC 授權的 Flickr 圖片。但是這個搜尋網站跟其他 Flickr 圖片搜尋方式最大的不同之處，在於它實做了 Alexei Yavlinsky 博士論文中的「自動圖片註記」技術，亦即 Behold 能夠辨識出圖片的內容，而不用仰賴 Flickr 的標籤（tag）系統。藉由這樣的技術，Behold 可以更精確地找出你所需要的圖片。

Behold 也搭配了 ImageStamper，來增強創用 CC 的使用。ImageStamper 是一個「公正第三方」的網頁服務，當有人貼上一個 Flickr（或其他線上藝廊的）網址時，它就會紀錄那張圖片的縮圖、作者、原始網址、（創用 CC）授權方式，並加上這筆紀錄的時間戳印，如此一來就可證明你使用這張圖片的時候，確實是採用何種授權方式；這個網站還可以用來讓圖片作者證明，自己是最早把圖片發表到網路上的人，以證實自己是原始作者，並且可以紀錄每次的授權方式變更。

除了用圖片實際內容來搜尋外，Flickr Color Selectr 還提供了一種很不一樣的搜尋方式：用色彩。這個搜尋引擎一樣是鎖定 Flickr 上面採創用 CC 授權的圖片，但是搜尋圖片時並不輸入任何關鍵字、詞，而是從色盤當中挑選一個色彩，接著 Flickr Color Selectr 就會找出色調與指定色彩相符的圖片。色調往往左右著氛圍，因此這種搜尋方式，對於網頁的視覺設計來說，著實好用。

還有一個叫 Compfight 的搜尋網站，也是用來搜尋 Flickr 圖片的。這個網站當中，除了一樣可以搜尋採創用 CC 授權的圖片外，也可以標示出有提供「原始尺寸」的圖片；如果你需要高解析度的圖片，這項功能將會非常有用。

這些 Flickr 搜尋引擎各有特色，Behold 與 Flickr Color Selectr 的獨特搜尋方式、Compfight 標示出提供「原始尺寸」的圖片、flickrCC 的線上編輯圖片功能、ImageStamper 的授權紀錄公正第三方服務，如果能夠整合在一起，然後搭配本機檔案管理，通通做進網頁編輯套件當中，那就太好了；目前這個夢想還沒有實現，技術上卻是可能的。

許多人在網頁上要使用採 CC 授權的圖片時，會因為不知道如何標示姓名而感到困惑⸺這裡說的不是「按作者指定的方式來標示姓名」的那個問題，而是用了一堆圖片時，這些標示要放在哪裡的問題。如果執著於一定要標示在圖片旁邊，很容易會破壞畫面美觀，讓許多設計師卻步；事實上可以比照一般編排書籍的辦法，另外做一個網頁（或併入「版權宣告」之類的網頁中），詳載網站內各網頁所有使用過的圖片縮圖、作者、原始出處網址、授權方式等資訊，然後祇要確保每一個網頁都能清楚容易地連到這個清單網頁即可。

除了這種方式之外，另外還有一種進階的標記方式：把點陣圖檔包進 SVG 格式的圖檔中再使用。因為 SVG 是一種運用 XML 的圖形格式，而且可以在詮釋資料中嵌入創用 CC 授權的數位標籤，所以這麼一來就能夠在不動到原始檔案、不需要另外在網頁上標記的前提下，表達圖片的授權資訊、作者資訊等。如果你打算這麼做，那麼務必要試試看 Inkscape 這套 SVG 編輯工具，它內建了創用 CC 授權的詮釋資料選項，而且還是一套在各平台、各語系都有得用的自由軟體。

網頁上往往不會祇有圖片，還會有其他的多媒體內容，例如聲音、音樂、動畫、影像等，這些媒體也會有其匯聚之處，像是 Revver 上所有的影片，都是採用創用 CC 姓名標示—非商業性—禁止改作 2.5 版授權條款釋出，ccMixter 上有大量採創用 CC 授權釋出的音樂、樂段、取樣，StreetVoice 也有許多華文的影音串流採創用 CC 授權釋出，Internet Archive 更是匯集了許多採公眾授權（也包括了創用 CC 授權）釋出的多媒體素材。

這些媒體內容都比圖片來得複雜，包括牽涉到的技術、使用方式、作者姓名與授權方式的標示等皆然。要在網頁上使用這些採創用 CC 授權的內容時，可以如圖片般另外表列這些素材的作者及授權資訊，也可以在編輯這些素材時加入聲音或畫面來說明（如果原本的作者並未加上這些標記，或者僅取用部分內容），另外也可以用 SMIL 來標記⸺SMIL 也是一種 XML 檔案，也一樣可以嵌入創用 CC 的數位標籤。

用 SVG 或 SMIL 的手法，好處是不會動到原始的數位檔案，保留日後再行邊修的彈性；但是缺點則是並非所有的瀏覽器都能 100％支援所有的功能，所以採用這個解決方案前，得要先評估考量一番。

這些多媒體素材併用時，還要考慮不同授權方式之間是否相容。授權條款之間的相容性及可互通性，一直都是創用 CC 努力的方向之一；除了創用 CC 本身提供的授權條款皆具有可互通性外，創用 CC 也致力於跟其他常見的授權方式如 GPL、GFDL、BSD 等的可互通性。使用創用 CC 授權條款的好處之一，即是未來將可望與更多採不同授權方式的內容互通（雖然此刻還沒有實現這個夢想）。

台灣創用 CC 計畫提供了一個授權相容性精靈，能夠幫你檢查各種授權之間是否相容，以及用這些素材製做出來的網頁還可以採用哪些授權方式釋出。創用 CC 把「授權」這件事與一般人拉近了，因此我們更應該要正視「授權」這件事；也許未來哪一天，編輯網頁的開發環境，可以把搜尋、管理多媒體素材的功能也納入其中，而且還能依據預期的授權方式，來篩選可用的素材。

近來有些網頁還有一種做法，就是直接提供文件檔案（例如微軟 Word 的 .doc 格式、Adobe 的 PDF 格式等）讓使用者下載，這些檔案因此成了網頁的延伸。網頁本身可以嵌入創用 CC 授權的數位標籤，那麼這些檔案可以嗎？

微軟自己替 Office 2003 及 Office 2007 分別提供了一個叫「Creative Commons Add-in for Microsoft Office」的外掛模組，標示授權資訊時，同時也會用 OOXML 嵌入相對應的數位標籤。Adobe 則是採用 XMP 來處理這些詮釋資料，也可以用創用 CC 網站上提供的 XMP 模版，加入相對應的創用 CC 授權數位標籤。

與 XMP 的處理工具都還不多，不過還是有像 Proud Hill MetaGrove 這種商業的 XMP 輔佐編撰管理工具；另外 Adobe 自己也釋出了 XMP 開發套件，所以未來也應該會出現更多 XMP 處理工具。

前面這些都是運用素材時要注意的事項，那麼流程中最後一個階段⸺實際編輯網頁時呢？

其實現在有很多的套件，能夠輕易製作出內容採創用 CC 授權的網頁，在網頁上加入超鏈結及標示，並且嵌入授權相關的詮釋資料⸺他們是各種部落格系統與圍紀系統，例如 Movable Type、MediaWiki，以及各種部落格服務、圍紀服務、線上藝廊服務，像是 TypePad、Wikia、Flickr。有一些用來把整個圖檔資料夾做成相簿網頁的程式，例如 snapGallery，也可以在操作流程當中，讓你選擇創用 CC 授權，並根據這項設定來調整製作出來的網頁。

不過對於真正要設計網頁的人來說，大概會嫌上述這些辦法都太過僵硬，做不出想要的東西來。如果你也是想要自己親手做網頁的人，那麼目前你祇能一切自己來⸺各種 WYSIWYG 網頁設計套件如 Dreamweaver、GoLive!、Expression Web 等，都還沒有內建跟創用 CC 授權有關的功能，所以你得徒手拿文字編輯軟體（或文字型網頁設計套件）來把有關的原始碼加進去。除了由創用 CC 所提供的 RDF 格式數位標籤外，你還可以用微格當中的 rel-license 來標記授權文字、圖片說明，讓網頁更具語意。

當你做了這些事後，可以用創用 CC 提供的 MozCC 擴充套件來確認是否標記正確，也可以用 BlueOrganiser、Operator、Tails Export 等擴充套件，來確認用微格標記的授權資訊是否能被加以利用。這些擴充套件通通都是用於 Firefox 的⸺Firefox 仍舊是網頁設計的首選，有各種領先潮流的擴充套件，能夠彌補 Firefox 的不足之處，讓 Firefox 有機會跟其他瀏覽器一較上下。（MozCC 也可以用於 Songbird）

要讓網頁邁入 Web 2.0，上述這種 RDF 格式授權數位標籤以及微格都是少不了的，另外網站還得提供 RSS 或 Atom 源料，以便跟其他網站或服務交流內容。因為源料的目的使然，在源料上標記授權資訊又更為重要。處理源料最簡單的方法之一，就是交給 FeedBurner 來做，這個網頁服務有著諸多功能，包括統計訂閱數、修正源料瑕疵等，同時也能夠加入創用 CC 授權資訊，讓你的源料更能充分表達網頁內容，也讓網頁設計師可以把心力集中在實際的網頁上。

設計網頁時，有些設計師會採用以創用 CC 授權釋出的框架，例如 Mollio，這種時候要如何標示作者及授權資訊呢？使用網頁設計框架時，標記這些資訊也有兩種辦法：第一是跟圖片一樣，在「版權宣告」之類的網頁中，說明你所使用的框架資訊；第二則是把相關的資訊保留在網頁原始碼內⸺有些網站開發套件會在最後的最佳化程序中，刪除所有的原始碼註解、空格、換列，這時請務必確認這些授權資訊有保留下來。這兩種辦法並不互斥，如果能都做到，更是理想。

除了 Mollio 外，近年來越來越多人用的 YUI 也是採取開放的授權方式；雖然 YUI 並不是用創用 CC 授權，而是 BSD 授權條款，但是創用 CC 計畫也有試著納入 BSD 授權，並也致力於未來要與 BSD 授權有更好的可互通性，因此使用 YUI 或其他框架時，要注意的地方、標示的方式，其實也是跟 Mollio 一樣：附在網頁上，並在原始碼中保留相關資訊。

歸納一下，我們在本文當中學到了：

用 flickrCC、Behold、Flickr Color Selectr、Compfight 來搜尋 Flickr 上採創用 CC 授權的圖片
用 ImageStamper 來存證圖片授權資訊
用 Inkscape 將圖片包裝成 SVG，並嵌入創用 CC 授權數位標籤
到 ccMixter、Revver、StreetVoice、Internet Archive 尋找採創用 CC 授權的其他影音素材
用 SMIL 來整合多媒體素材並標記授權資訊
用 OOXML 或 XMP 來幫文件檔案標記授權資訊
使用採創用 CC 授權的素材來設計原型及最終的網頁
善用現成的網頁服務來製作使用創用 CC 素材的網站
使用微格與 RDF 格式來標記網頁上的創用 CC 資訊
使用專門的頁面來說明各素材的授權資訊
利用 FeedBurner 在網頁源料中加入創用 CC 授權資訊
使用採創用 CC 授權的網頁設計框架來製作網頁

由此我們可以看出，創用 CC 已經悄悄地進入網頁設計的各個環節，從素材、框架到內容交換格式，處處都有創用 CC；但是目前對媒體素材的利用上，祇有圖片的部分較為成熟，其他媒體素材則不論是要搜尋還是要存證授權資訊，能利用的資源都較少，文件檔案格式所採用的 OOXML 或 XMP 等則更是少為普羅民眾所知。更重要的是，我們目前仍然缺少便於蒐集、整理各種素材的工具。

至於要在網頁上標示內容或素材的授權資訊，則有多種方法：在原始碼中標示、使用 RDF 格式數位標籤、運用微格、另做專用網頁等，這些方法並不互斥，甚至適於搭配混用；但另一方面也顯示了網頁編輯工具對此還沒有足夠的重視，這也是未來軟體開發者所應該使力的地方。

拉拉雜雜地講了一大堆東西，希望對於終日與網頁設計奮鬥的朋友們有所幫助，也更希望未來能有更強大好用的套件來處理這些細節，讓人們不用再辛苦地東拼西湊。

後記（又是補充事項）：這篇稿子其實八月就寫完了，在等候它陸續刊登的幾個月間，你知道，事情總是不停地發生變化。有個叫 Idée Labs 的網站，提供了一些有趣的圖片搜尋工具，九月的時候他們更新了其中的 Multicolour Search Lab Flickr Set，把 Flickr 上逾千萬張採創用 CC 授權釋出的圖片也囊括在內；基本上 Idée Multicolour Search 提供的是類似 Flickr Color Selectr 那樣，讓你「用色彩找圖片」，不過 Idée 的網站上並沒有明確告訴你哪一張圖片用什麼授權，也還不能把授權方式當成搜尋條件來操作。