《跨 X 創》產業小聚#12【擁抱Open Source:HTML5、Blender可以成為開發主角嗎?】

dit_0929_Artboard 2HTML5是唯一通吃主流平台的跨平台語言,廣義上來說包含了HTML5、CSS和JavaScript三個部分。近年來,行動應用開發以及WebGL技術的逐漸成熟,以及各大瀏覽器廠商對於此項技術的推動與標準制定,讓 HTML5的技術開發方案不斷向前發展。

Blender 是一款具備跨平台特性、開源免費的3D繪圖製作及渲染軟體,除了提供大部分3D動畫軟體都有提供的功能,更具備一個遊戲引擎。

由經濟部數位內容產業推動辦公室與創夢市集DIT Startup舉辦的【跨X創 產業小聚】第12場講座,特別邀請丞希綠色資訊創辦人暨執行長 高子漢 及 石榴文創管理顧問執行長兼技術長 丁裕峯分享目前全球開源軟體HTML5及Blender趨勢發展以及應用上的優勢與局限。

HTML5發展與特色

高執行長於一開始說明,此簡報是專為此講座而做的,希望可以給產業、開發者、學界參考,提供近年來HTML5發展的觀察、並給予淺見建議。

HTML5實際指的是包括 HTML、CSS 和 JavaScript 在內的一套技術組合,能夠減少網頁瀏覽器對於外掛程式的依賴。從1999年所製定的HTML 4.01和XHTML 1.0標準開始,一直到2008年第一份正式草案發布、2014年W3C正式發布HTML5.0推薦標準。

HTML5不同於前版的HTML4、XHTML:播放動畫或聲音〈標籤audio和video〉、操作2D繪圖功能〈canvas標籤〉、離線狀態使用網頁應用程式〈Application cache〉、跨網域通信〈Cross-Document Message、XMLHttpRequest Cache Level2〉、用戶端資料儲存〈Web Storage、Web SQL Database…等〉、背景執行運算〈Web Workers〉、執行伺服器來的資料堆播〈Data Push〉、與伺服器間的雙向通訊〈Server-Sent Events,Web Sockets〉、讀取本機檔案〈File API〉。其中HTML5的新元素:包括<nav>、<header>、<footer>等,為了讓網頁文件中更明確的標記內容,讓網站更容易被找到(SEO);<ruby>可標記定義注釋或音標;<MathML>是HTML5可使用的數字標記語言;加入了支援拖曳功能(Drag and Drop),讓使用者可以將電腦中的檔案拖曳並將其嵌入網頁中,或是任何HTML元素的位移效果;Camera API、Using geolocation等裝置存取的功能;<audio>影音不須使用外掛、<video>直接在網頁內嵌入、<canvas>適用影音、動畫、遊戲。

早在2010年,蘋果賈伯斯曾經公開聲明未來蘋果產品絕不支援Flash,其中原因:包括Flash並不開源(open Source)、缺乏完整的網路體驗、在可靠性/安全性和效能都明顯不足等原因,並轉向支持HTML 5;同年,曾任Adobe技術長Kevin Lynch(現在轉為蘋果員工)公開為自家產品Adobe Flash技術做出辯護,並警告HTML 5標準將把網路影音帶回黑暗時代,究竟是甚麼原因讓剛在市場露臉的HTML5名聲大噪?另外,各家瀏覽器對HTML5的支援,Google Chrome瀏覽器(版本51)對於HTML5 Test網站排名分數最高495(滿分555)。

對於開發者來說,HTML5具備幾點基礎優勢:包括A link (一行網址)、Non-installation (無須安裝)、RWD (響應式設計)、Cross-platform (跨平台)、Rich Content/Rich Application(為網頁瀏覽帶來更豐富完整的體驗),對於行動應用時代的來臨,使用者體驗的呼聲可見一斑。

HTML5 FrameworkTools介紹

Bootstrap是一組包括HTML、CSS及JavaScript的框架,提供各種元件及Javascript擴充套件,讓動態網頁和Web應用的開發更加容易。沃爾瑪Walmart、商業彭博Bloomberg官方網站,皆是使用此套工具開發。

PhoneGap是一款開放原始碼的行動裝置開發框架,旨在讓開發者使用HTML、Javascript、CSS等Web APIs,開發跨平台的行動裝置應用程式。

Webix是HTML組件的JavaScript庫,具備跨瀏覽器、跨平台的功能,使用JavaScript、CSS、HTML5技術,透過簡單的程式實現酷炫豐富的用戶介面。

Timesheet.js是一款用於創建使用JavaScript的HTML工具,只需要幾行JavaScript,就能生成很乾淨及漂亮的HTML 結構,並添加可視化和轉換到使用CSS 的事件,

Google Web Desginer,是由Google開發的工具,該工具能為你提供所有的編碼,目前為方便HTML5語言背景知識的人,創建互動的HTML5 網站,只需要發揮想像力,就能完成HTML5網頁架構。

Github上面收集了四十多款的HTML5開源遊戲引擎,從其中Star、Fork等等参數分析其流行度,最後綜合各方面元素。例如:Three.js、Phaser、pixi.js都是開發者常常用到的library。

魚與熊掌不可兼得,行動應用開發大抉擇

高執行長建議,企業主在決策開發Native APP (原生APP)還是行動裝置網頁(Web APP),務必先釐清以下10 個問題:

  1. 如果手機網頁無法滿足您所希望提供的獨特功能或內容,您想創造的服務會用到相機、GPS、掃描或其它手機功能產品,即將使用到智慧型手機的功能,建議選擇原生App。
  2. 原生APP若直接與手機銜接,能夠在較小的限制下,為使用者帶來獨特的體驗。
  3. 響應式網頁RWD(Web APP)即使能夠對應各種不同裝置,不過遇到複雜的設計與 UI,它可能會令人失望相較之下,因此原生APP可以創造出更契合的使用者體驗。
  4. 一般而言,由於開發和部署速度快,把點子帶進市場時所需的資源也比較少,且基本上靠著一套程式碼走天下,因此Web APP的預算成本較低。
  5. 假設您希望增加產品在搜尋引擎上的可見度,並吸引更多流量,請選擇Web APP,它屬於封閉式環境,無法被搜尋引擎擷取,所以不會對基本搜尋(organic search)排名造成影響。
  6. 蘋果要求 APP必須通過其所設定的條款才能上架,審核過程有可能得耗好幾個禮拜到好幾個月,有些領域的規範比其它更嚴格,例如APP 內購買或APP內訂閱,Web APP通過審核機會較大。
  7. APP不像網頁一般需要高度仰賴網路速度,因此運作速度通常較快不過Web APP,原生APP較適合大量數據之傳送、接收。
  8. 每次更新,原生 app 都得不斷遇到冗長的審核期。若公司產品需要頻繁更新設計,想確保使用者立即看到最新版本,Web APP或許是最簡單的方式
  9. 如果想將產品放到所有裝置上,Web APP是最簡單直接的答案。
  10. 如果想為自己的產品提供小額購買的功能,意味者產品內會有商業行為,由於網頁上的購物車難以取代 app 內購買系統,請選擇原生APP。

HTML5建議

高執行長於講座最後說明,如今雖看起來Flash的時代快要結束,但未來也不一定是HTML5會勝出,高執行長希望大家要平衡思考,思考背後的原因與潛在的機會,可以宏觀地從HTML和Web這二十年的歷史找出脈絡與機會:像是為什麼IE會死、Google Chrome會這麼多人用;為什麼Hybrid APP會冒出頭、同時會有SVG、Canvas、WebGL並存,期待大家能夠獨立思考,哪一個技術,會在哪些應用上越來越流行,以下針對企業/執行長、開發者、學生,個別提供建議:

  • 企業/執行長

企業至少一定要學會、了解或實作一個HTML5 技術,隨時觀察大廠以及過去技術、公司消長的關鍵因素,不斷修正,往目標前進;未來AR/VR是一波趨勢, 建議HTML5 3D圖形技術可多專研,如果公司要做快速原型:建議Web APP或Hybrid APP;如果是用戶型產品:建議Native + Web APP;要把技術平台的以下五點,納入決策考量:技術開放性、版本更新、討論活絡、學習門檻、解決問題的效益。

  • 開發者

開發者一定要學會Chrome debug;framework可以不用,但是一定要懂一個;用你習慣的IDE,不然就用sublime;元素以及API的相容性一定要先確認。開發前,可以不在意先google reference code, libs and examples;一定要自己寫,旁徵博引,下降 try and error 成本,然後早點下班。

  • 學生

一定要會寫一個HTML5的Hello world,不管用什麼技術,再不然就是學一個挑戰HTML5或是比HTML5更好的技術;選一個新一點的framework好好學好,例如hybrid APP、WebGL;建議莘莘學子還在校內挑戰失敗,迎戰失敗,才會全面成功。

01

丁裕峯 執行長是『Blender⼩聚雜誌(Taiwan Blender User Community Magazine) 』總編輯與創辦⼈,這是第一本2012年創刊,給台灣使用者的Blender專屬雜誌;同時,丁執行長也是『台灣Blender使用者小聚(FB) 』之創辦人,目前社團內,經過篩選後,累計超過2600位社團Blender使用愛好者在此處交流、討論及創作分享;這次講座的內容也會透過FB直播方式,把社團內的創作者,透過此活動,Demo創作者使用Blender軟體之作品。

七合一的變形金剛

Blender起初是一款位於荷蘭的遊戲製作公司,內部使用的程式,此軟體是以開源軟體的形式,對外發布,並由Blender基金會維護與更新,透過每年基金會募款運作方式、Open Source開源精神營運。Blender具有市場上7種商業軟體相關應用的部分功能:包含Maya(電腦動畫與建模軟體)、3dsMax(3D 建模與彩現軟體)、Mudobo、Zbrush(數位雕塑軟體)、Adobe Premiere(影片編輯軟體)、Adobe After Effect(製作動畫和視覺效果的影片製作軟體)以及遊戲引擎等。

Blender優勢

2013年,Blender曾被皮克斯的資深研究員,唯一公開點名是可以符合皮克斯工作需求的開源(Open Source)3D動畫軟體,表示說『Blender幾乎都可以完成皮克斯的動畫軟體可以做的事』。

除此之外,Blender基金會每年也被國際大廠捐款,如Google、Nvidia、VALV、STEAM等。另外,因為Blender本身就是一款跨平台的軟體,適用於Windows、Mac OSX、Linux作業系統;由於全世界有將近百萬人註冊使用者,因此軟體使用的語⾔也逐漸在地化,台灣也有繁體中文版本。

在2015年的調查中全球科技機構前500強內,Blender也入選其中:448名;也是3D列印首選軟體其中之一,其他類似軟體包括:SketchUP、SolideWorks等;也榮獲國際知名3D雜誌『3D Artist』專刊介紹。這意味著開源軟體的崛起,也逐漸會步入市場的現象。

Blender趨勢

丁執行長於講座前,有針對Blender社團好友做一些市場調查,數據顯示個人從3D商用軟體轉向用Blender的數量越來越多,但公司的數量比例仍沒有太高,其實也意味著這個動畫建模軟體的生態,大家彼此交流的檔案格式都是用市場上的3D商用軟體,因此當越來越多個人使用Blender之後,並且成立公司都還是使Blender,公司的數量才有機會增加。

這一年來,個人使用Blender軟體的人數也越來越蓬勃,且大部分是處於動畫製作的行業,但也有影視製作、工業設計、建築室內設計以及3D 模行修整。

02