[敲打鍵盤] 創用 CC 網頁多媒體編撰套件

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

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

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

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

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

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

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

這四個階段並不是切得一乾二淨,而是彼此間會有重疊、往返,不過大致上還是可以這樣來區分。在設計原型的階段當中,主要產出的都會是內部文件,不會公開出來,照理說幾乎可以不用考慮智慧財產權的問題;不過在這個階段中,你很有可能會用氛圍板(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 TypeMediaWiki,以及各種部落格服務、圍紀服務、線上藝廊服務,像是 TypePadWikia、Flickr。有一些用來把整個圖檔資料夾做成相簿網頁的程式,例如 snapGallery,也可以在操作流程當中,讓你選擇創用 CC 授權,並根據這項設定來調整製作出來的網頁。

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

當你做了這些事後,可以用創用 CC 提供的 MozCC 擴充套件來確認是否標記正確,也可以用 BlueOrganiserOperatorTails 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 的網站上並沒有明確告訴你哪一張圖片用什麼授權,也還不能把授權方式當成搜尋條件來操作。

jedi.org: