Adobe CS5多媒體跨界匯流設計應用趨勢：「Adobe CS5網站設計應用趨勢與教案設計」簡報

Adobe CS5多媒體跨界匯流設計應用趨勢：「Adobe CS5網站設計應用趨勢與教案設計」簡報
文∕趙英傑

本文提供上奇科技於7/21與7/28，在高雄與台中舉辦的「Adobe CS5多媒體跨界匯流設計應用趨勢」研討會，「Adobe CS5網站設計應用趨勢與教案設計」單元的簡報。

坦白說，到底什麼是「Adobe CS5網站設計應用趨勢與教案設計」，我也不太清楚。我的簡報重點只有四個：Web設計師是超人、HTML5介紹、多元互動介面及Flash不死之CS5軟體跨界整合。嗯，果然跟主題沒有太大關連。

HTML是根本

或許是視覺設計工具太方便了，要不是鬧得沸沸揚揚的HTML5與Flash之爭，有些網頁設計初學者或從業人員，好像忘了網頁最根本的東西是HTML。我見過有人可以用Dreamweaver和Photoshop做出美美的網頁，卻不識得超連結的標籤<a>。

好比平面設計師要瞭解網屏、histogram、色彩管理…等技術，才能在印刷油墨上完美呈現出色的設計作品；網頁設計師若不懂HTML，如何精進CSS技巧？網頁設計可不只是平面設計和影像處理。

HTML5基本上就是在既有的HTML基礎下，增加新的標籤、CSS樣式指令和JavaScript程式的功能。例如，原有的HTML只具備嵌入影像的<img>標籤，HTML5新增了處理多媒體元素的<video>視訊和<audio>聲音標籤，並且把當初連同Adobe在內的幾家大廠，為了與Flash抗衡而推出的SVG（Scalable Vector Graphics）向量圖標準，也納入HTML5。

另一個最初由Apple提倡的<canvas>（直譯為「畫布」）標籤，則可以在網頁上設定一個區域（相當於Flash裡的「舞台」），讓JavaScript在其中建立互動式圖像。這種種因素，讓人聯想到HTML5將是Flash殺手。

如果您採用的是最新版本的Google Chrome, Firefox, Safari, Opera或者IE 9等瀏覽器，不妨瀏覽一下底下使用HTML5技術建立的網頁：

Google製作的HTML 5互動簡報
The Wilderness Downtown：Arcade Fire與Google攜手採用HTML5技術製作的互動影片
HTML 5 Demos and Examples：HTML 5的各項技術示範網頁
HTML5 Gallery：集結、展示許多使用HTML5技術建立的網站
HTML5 Pacman：用HTML5技術做成的小精靈遊戲

多元的技術環境

應用程式（或者說「桌面應用程式」）設計師和網路程式設計師所面對的環境有很大的不同，前者可能只需要專精一種語言，像C++或VB，以及單一系統的API，即可應付工作需求。

網路程式設計人員面對的則是多元、多變且不完全相容的環境，光是前端的技術面，就有HTML, CSS, JavaScript，再加上Flash ActionScript與微軟的Silverlight等多媒體程式，還得混搭（mash up）不同雲端服務（如：Google Maps, Flickr和FaceBook）的API…雖然工作上只需要專注幾種技術，但是又不得不隨時準備迎接新的挑戰。

跨界應用

從Mac OS X內建Widget開始（某種程度來說，這是點燃HTML5的導火線），網頁設計師便能運用熟知的技術（HTML, CSS和JavaScript），跨足開發Mac OS X的桌面應用程式。

採用WebOS系統，叫好卻不叫座的Palm Pre手機，也是強調只需熟悉網頁相關技術，即可開發WebOS的應用程式。他們甚至還有純瀏覽器環境的整合開發（IDE）工具。

Java語言或許是跨界應用程式的開山祖師，昇陽電腦喊出Write once, run anywhere.（寫一次，即可在任何機器上執行）的願景，但卻在蘋果的i系列家族踢到鐵板。

Flash也具有「寫一次，即可在任何機器上執行」的能力，不只是瀏覽器，Flash可以發佈成.exe（Windows應用程式）或.app（Mac OS X應用程式），或者Adobe AIR桌面應用程式格式（.air），於包含Android 2.2系統在內的環境下執行。也就是說，Flash使用者不只是網頁設計師，更可以是桌面程式及行動裝置設計師（不知道印度售價35美元的Android平板電腦，何時推出支援Android 2.2的版本？）

蘋果封鎖了Flash和Java。我覺得，限制開發人員只能使用特定的程式語言，就好像國家限制人民不能講方言一樣奇怪。這張iPad照片是在大阪的Apple Store拍的：

不支援Flash的Apple iPad

Flash CS5最大的賣點之一，是具備直接將Flash影片發佈成iPhone應用程式的功能，完整的新增功能介紹請參閱Adobe的Flash產品介紹網頁。不過就目前的情勢看來，這項功能大概只能用在程式原型開發，以及讓學生認識iPhone的加速感應、多點觸控等介面開發的概念。

山不轉，路轉。

Flash開發人員，可以使用OpenPlug公司的ELIPS Studio工具，把ActionScript 3.0程式碼轉換成以C++語言編譯而成的手機原生應用程式，並且支援時下所有通行的手機作業系統，包括：iPhone OS (iOS), Google Android, Windows Mobile以及Symbian。

也就是說，Flash ActionScript 3.0程式設計師，可以繼續沿用熟悉的開發工具與API來開發跨平台應用程式。

OpenPlug在9月1日發佈的一則新聞稿指出，知名的法國電信通訊設備業者Alcatel-Lucent（阿爾卡特-朗訊）已經併購OpenPlug。希望在大企業相挺之下，ActionScript程式設計師能順利地翻牆到蘋果的領地。

2010/8/27的工商時報有一篇標題為「社交遊戲夯 Flash工程師鹹魚翻身」的報導指出，隨著社交遊戲打開市場，其龐大的Flash程式需求讓Flash工程師薪資大漲。一位獵人頭公司的主管表示，業界頂尖的Flash工程師年薪在3年前約5萬至8萬美元，現在可以喊到15萬美元。另一家線上遊戲開發公司則提到，一般的工程師通常一個月內就能找到理想的人才，但Flash工程師卻要2到3個月才能找到。

看樣子，Flash平台並沒有因為Apple的撻伐而前途茫茫。

Adobe支援HTML5

本次研討會背後的大老闆之一是Adobe，所以CS5軟體是重點。新成員Flash Catalyst CS5的介紹，請參閱「Adobe CS5多媒體跨界匯流設計應用趨勢：Flash Catalyst CS5簡報」。

Dreamweaver CS5的新增功能請參閱Adobe的Dreamweaver產品介紹網頁。在HTML5支援方面，Adobe提供了一個HTML5 Pack（套件），能在Dreamweaver CS4和CS5版本的程式碼編輯器中，提供HTML5標籤指令提示功能。

至於CS5系列軟體與HTML5網頁製作的工作流程整合方面，在2009年10月在美國洛杉磯舉辦的MAX研討會上，Adobe展示了Dreamweaver裡的一個Smart Paste（智慧型貼上）指令的原型，能把從Illustrator以及Flash複製的平面向量圖和時間軸動畫，自動轉換成適用於HTML5瀏覽器的SVG向量圖（實際上是Adobe自家的FXG格式加上一段解析圖像的JavaScript程式）在<canvas>（畫布）區域中呈現。