摘要：隨著教育改革的深入發(fā)展，如何設(shè)計(jì)與實(shí)施創(chuàng)業(yè)教育已成為教改實(shí)踐亟待解決的新課題。技術(shù)改變了教學(xué)與校園體驗(yàn)的每個(gè)環(huán)節(jié)，高校迫切需要將IT和網(wǎng)絡(luò)計(jì)劃與教育界的發(fā)展趨勢結(jié)合到一起。該文對html5在藝術(shù)專業(yè)創(chuàng)業(yè)平臺中的應(yīng)用進(jìn)行了分析研究，并提出了應(yīng)用中存在的問題。

關(guān)鍵詞：HTML5；CANVAS；SVG；所見即所得；離線應(yīng)用

中圖分類號：TP311 文獻(xiàn)標(biāo)識碼：A 文章編號：1009-3044（2014）01-0156-04

人類進(jìn)入信息時(shí)代后，資本、知本、智本三足支撐的網(wǎng)絡(luò)經(jīng)濟(jì)異軍突起，產(chǎn)生了巨大的社會影響力。[1]美國創(chuàng)業(yè)教育與研究的先驅(qū)狄蒙斯（Jeffery A.Timmon）曾指出：“我們正面臨一場無聲的革命——人類的創(chuàng)新和創(chuàng)業(yè)精神在全世界取得偉大勝利的一場深刻革命?！痹O(shè)計(jì)是一個(gè)創(chuàng)新的過程，藝術(shù)專業(yè)創(chuàng)業(yè)平臺設(shè)計(jì)有別于一般的電商平臺，它緊密與課堂教學(xué)和企業(yè)需求結(jié)合，“賣出”的更多是創(chuàng)意，促進(jìn)學(xué)生創(chuàng)業(yè)意識，樹立品牌價(jià)值。該文結(jié)合所做工作，分析html5技術(shù)在建立智能化藝術(shù)專業(yè)創(chuàng)業(yè)平臺的應(yīng)用。

1 HTML5的發(fā)展與特色

HTML5是HTML的最新版本，現(xiàn)在仍處于發(fā)展階段，雖然現(xiàn)在HTML4.01仍然是行業(yè)的標(biāo)準(zhǔn)，但不同的廠商的瀏覽器對HTML4的解釋都存在一定的差異。以微軟IE、Firefox、Google Chrome、Opera為代表的各大瀏覽器已經(jīng)漸漸的支持HTML5，并成立了一個(gè)叫做 Web Hypertext Application Technology Working Group （Web超文本應(yīng)用技術(shù)工作組 -WHATWG） 的組織，致力于HTML標(biāo)準(zhǔn)的統(tǒng)一。可見，HTML5在未來必將成為網(wǎng)頁設(shè)計(jì)的標(biāo)準(zhǔn)。

HTML5，實(shí)質(zhì)上是指HTML5、CSS3和JavaScript在內(nèi)的一套技術(shù)組合。它希望能夠減少瀏覽器對于需要插件的豐富性網(wǎng)絡(luò)應(yīng)用服務(wù)（plug-in-based rich internet application，RIA），如Adobe Flash、Microsoft Silverlight等的需求，并且提供更多能有效增強(qiáng)網(wǎng)絡(luò)應(yīng)用的標(biāo)準(zhǔn)集。HTML5有兩大特點(diǎn)：強(qiáng)化了 Web 網(wǎng)頁的表現(xiàn)性能，讓W(xué)EB網(wǎng)頁與桌面應(yīng)用靠攏；追加了本地?cái)?shù)據(jù)庫等 Web 應(yīng)用的功能。

2 HTML5在藝術(shù)專業(yè)創(chuàng)業(yè)平臺中的應(yīng)用

2.1 CANVAS實(shí)現(xiàn)在線創(chuàng)作

在HTML5中，Canvas與SVG均可實(shí)現(xiàn)在瀏覽器中描繪圖形的功能。兩者均允許腳本語言動態(tài)渲染圖像，通過Javascript動態(tài)改變筆觸原理即可開發(fā)出類似所見即所得編輯器的在線作圖控件。但兩者在繪圖方式上還是有所不同的，Canvas由一個(gè)可繪制地區(qū)HTML代碼中的屬性定義決定高度和寬度。JavaScript代碼可以訪問該地區(qū)，通過一套完整的繪圖功能類似于其他通用二維的API，從而生成動態(tài)的圖形。[2]如下代碼（圖2）：

這段代碼第一行定義了一個(gè)ID為“canvassample”的canvas容器，即定義了一塊畫布，draw（）方法為獲取這塊畫面，通過JavaScript腳本繪制一個(gè)100*100像素的矩形到這塊畫布上。

CANVAS可以對畫布中每一個(gè)像素點(diǎn)進(jìn)行精確的控制，色彩也比SVG更為豐富一點(diǎn)，而且SVG圖形越復(fù)雜，DOM節(jié)點(diǎn)越多，嚴(yán)重影響加載速度，因此，在線創(chuàng)作模塊適宜采用CANVAS。本系統(tǒng)在線創(chuàng)作模塊使用了DeviantArt藝術(shù)作品展示網(wǎng)站所推出的muro繪圖API。該API完全使用CANVAS標(biāo)簽與Javascript生成圖像，而且支持android，ipad等移動應(yīng)用，讓用戶在智能手機(jī)、平板電腦上隨時(shí)隨地進(jìn)行創(chuàng)作。主界面如圖2所示，包含了圖層，畫筆，濾鏡等的常用畫圖工具：

2.2 SVG實(shí)現(xiàn)個(gè)人主頁

藝術(shù)專業(yè)的學(xué)生一般都期望有一個(gè)個(gè)性化的主頁，但無論是Dreamweaver等網(wǎng)頁編輯軟件還是CMS建站系統(tǒng)（Content Management System），都有比較專業(yè)的編程技術(shù)要求；傳統(tǒng)的所見即所得網(wǎng)頁編輯器（WYSIWYG）雖然可突破技術(shù)瓶頸，但缺乏繪圖功能，所設(shè)計(jì)頁面大多比較簡單，主要用于網(wǎng)頁文章的排版。如果有一個(gè)GUI界面，不需要專業(yè)的編程技術(shù)，既可實(shí)現(xiàn)類似PHOTOSHOP的平面設(shè)計(jì)功能，又可融合CMS建站系統(tǒng)的交互功能，那對藝術(shù)專業(yè)學(xué)生來說，無疑是意義重大的。HTML5的SVG矢量繪圖，把這種可能變成現(xiàn)實(shí)。

SVG是Scalable Vector Graphics （可伸縮矢量圖形）的簡稱，是一種XML 語言的矢量圖形格式。SVG 基于 XML，這意味著 SVG的DOM中每個(gè)元素都是可用的，可以為某個(gè)元素附加 JavaScript 事件處理器。

同樣是繪制一個(gè)100*100像素的矩形，SVG代碼如圖3所示：

與CANVAS的Javascript腳本繪圖不同，SVG的圖形部件為瀏覽器的DOM節(jié)點(diǎn)，SVG既可通過描述語法實(shí)現(xiàn)繪圖，也可以使用Javascript。每個(gè)圖形部件均為相對獨(dú)立的DOM節(jié)點(diǎn)，因此可以很方便的對每個(gè)DOM進(jìn)行交互式控制，如添加超鏈接，DOM容器內(nèi)動態(tài)調(diào)用外部資源等。在Canvas元素上繪制文本的時(shí)候，字符會以像素的方式固定到上面。文本成為了圖像的一部分，除非重新繪制Canvas繪制區(qū)域，否則無法改變文本內(nèi)容；而SVG元素可以直接在內(nèi)聯(lián)DOM中書寫文字，因此，SVG生成的圖形對文字的可控性更高，也更容易為搜索引擎所識別。

如圖4所示即為本系統(tǒng)基于SVG屬性所開發(fā)的所見即所得在線網(wǎng)頁設(shè)計(jì)插件。用戶通過繪圖功能與交互調(diào)用結(jié)合，可以不依賴編程技術(shù)設(shè)計(jì)出自己的個(gè)人站點(diǎn)。

2.3 HTML5革新多媒體搜索方式

在傳統(tǒng)的搜索模式中，要檢索出某張圖片或者某種特性的圖片，只能通過給圖片增加關(guān)鍵詞、描述語等來實(shí)現(xiàn)。在 HTML5 標(biāo)準(zhǔn)中，加入了新的多樣的內(nèi)容描述標(biāo)簽，直接支持表單驗(yàn)證、視頻音頻標(biāo)簽、網(wǎng)頁元素的拖拽，即用戶可以脫離Flash 或者其他第三方控件，直接在瀏覽器繪制圖形或動畫，直接用HTML5播放音頻、視頻。

圖片、音頻和視頻等都以可讀性代碼的形式存儲在網(wǎng)頁，開發(fā)出能夠識別這些代碼所代表含義的搜索引擎就成為可能，在實(shí)際當(dāng)中給我們抓取信息帶來方便與效益。HTML5讓搜索引擎讀懂圖片、視頻、富媒體。如上例圖3的矩形圖片，代碼中包含了顏色、位置及尺寸，每一個(gè)元素都有明確清晰的定義，搜索引擎可以更容易地衡量網(wǎng)頁上的相關(guān)內(nèi)容。因此，我們在搜索中就不用再局限于關(guān)鍵詞，可以根據(jù)媒體的顏色，尺寸等特征作為搜索依據(jù)。

2.4 HTML5實(shí)現(xiàn)離線應(yīng)用

HTML5 作為新一代的 HTML 標(biāo)準(zhǔn)，包含了對離線功能的支持，通過ApplicationCache接口使離線存儲成為可能。

為了能夠讓用戶在離線狀態(tài)下繼續(xù)訪問 Web 應(yīng)用，服務(wù)器必須支持HTML5，提供cache manifest 文件。在html標(biāo)簽中通過manifest屬性引用manifest文件來使得應(yīng)用可緩存。manifest文件列出了所有需要在離線狀態(tài)下使用的資源，在頁面中添加，瀏覽器會把這些資源緩存到本地。

manifest文件對應(yīng)的mime-type是text/cache-manifest，因此服務(wù)器端也必須支持text/cache-manifest的文件解釋。以本系統(tǒng)為例，使用apache作為服務(wù)器平臺，需在mime.types配置文件（默認(rèn)與httpd.conf在同一目錄中）中追加text/cache-manifest manifest，讓apache支持manifest文件，然后把需要緩存的文件路徑寫到manifest中。圖5所示，即為一個(gè)基本的manifest格式。

圖5 cache manifest示例

第一行CACHE MANIFEST聲明這是一個(gè)緩存配置文件；第三行CACHE聲明了緩存文件列表，每一行列出一個(gè)需要緩存的資源文件名，“index.html”、“style.css”、“images/logo.png”和“scripts/main.js”；NETWORK聲明在線訪問的文件，是可選項(xiàng)。設(shè)置好離線配置后，當(dāng)訪問緩存文件列表中的文件時(shí)，瀏覽器自動把數(shù)據(jù)緩存到本地，所有操作都在客戶端完成，當(dāng)內(nèi)容完成后且網(wǎng)絡(luò)連通時(shí)再同步到服務(wù)器端。對于在線創(chuàng)作、文章撰寫等操作周期較長的模塊，一方面避免了因斷線而造成數(shù)據(jù)丟失的情況，其次也減輕了服務(wù)器端的負(fù)擔(dān)。

3 Html5存在的桎梏

藝術(shù)專業(yè)創(chuàng)業(yè)平臺引入HTML5后，為學(xué)生提供了一個(gè)無網(wǎng)絡(luò)技術(shù)門檻并且接近于桌面應(yīng)用程序體驗(yàn)的網(wǎng)絡(luò)創(chuàng)作和交流平臺。盡管HTML5擁有了許多優(yōu)點(diǎn)，然而在平臺的實(shí)際開發(fā)和使用中，也存在著大量的問題。

3.1 瀏覽器兼容性問題

HTML5雖然已經(jīng)產(chǎn)生多年，但仍未得到大量應(yīng)用，也未形成統(tǒng)一的規(guī)范標(biāo)準(zhǔn)。Chrome，Safari，F(xiàn)irefox，Opera等雖然支持HTML5，但支持度也各不相同。因?yàn)闉g覽器支持度的差異，這就對客戶端瀏覽器有嚴(yán)格的要求，很大程度上限制了HTML5的發(fā)展。

3.2 安全性問題

HTML5雖然帶來了桌面程序一樣的WEB感受，不過把大量的操作都放在客戶端，瀏覽器與操作系統(tǒng)應(yīng)用結(jié)合越來緊密，也給客戶端和服務(wù)器帶了一定的安全隱患。如在畫布代碼中嵌入木馬程序，利用跨域請求或WebSockets的端口掃描，利用地理定位追蹤受害者等等。

4 結(jié)束語

網(wǎng)絡(luò)創(chuàng)業(yè)成為一種新現(xiàn)象，藝術(shù)專業(yè)創(chuàng)業(yè)平臺引入HTML5后，讓客戶端的操作更人性化。然而HTML5仍在發(fā)展階段，在享受html5帶給我們便利的同時(shí)，也要在其功能和應(yīng)用上不斷予以探索和挖掘，進(jìn)一步完善創(chuàng)業(yè)平臺的構(gòu)建，推動高校創(chuàng)業(yè)教育。

參考文獻(xiàn)：

[1] 胡桂蘭，梅強(qiáng)，朱永躍.創(chuàng)業(yè)團(tuán)隊(duì)對創(chuàng)業(yè)績效的影響研究[J].科技管理研究，2010（6）：157-159.

[2] http：//zh.wikipedia.org/wiki/Canvas_（HTML%D4%AA%CB%D8）.