整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
TML5多媒體作品以其對(duì)各種平臺(tái)的兼容而見(jiàn)長(zhǎng)，目前已獲得了廣泛的應(yīng)用。如果我們需要制作自己的HTML5多媒體作品，一個(gè)方便之選就是利用現(xiàn)成的在線制作工具“百度H5”。
首先訪問(wèn)“百度H5”網(wǎng)頁(yè)（https://h5.baidu.com/），可以看到非常簡(jiǎn)單的頁(yè)面，僅有“我的H5”和“我的模板”兩個(gè)選項(xiàng)。其中“我的模板”是通過(guò)套用模板的方式來(lái)制作HTML5作品，而“我的H5”則可以完全靠自定義各種參數(shù)來(lái)自由創(chuàng)作，制作好的作品也會(huì)顯示在這里（圖1）。
1. 通過(guò)創(chuàng)意模板輕松制作
在首頁(yè)中選擇“我的模板”，隨后會(huì)進(jìn)入一個(gè)模板展示頁(yè)面，這些都是設(shè)計(jì)者們分享的模板。根據(jù)你所要設(shè)計(jì)的作品的類別，可以按類選擇一個(gè)類似的作品作為制作的模板，然后在此基礎(chǔ)上進(jìn)行修改，即可快速形成自己的多媒體作品（圖2）。
比如要制作一個(gè)招生方面的媒體作品，選擇如圖所示的秋季班招生模板，然后點(diǎn)擊右下角的“使用模板”按鈕（圖3）。
接下來(lái)先要為作品命名，例如“我們的幼兒園招生了”。輸入完畢點(diǎn)擊“確定”按鈕（圖4）。
隨后進(jìn)入實(shí)質(zhì)性的模板修改編輯階段。對(duì)于不合適的內(nèi)容，可先刪除頁(yè)面元素再添加。點(diǎn)擊“文本”菜單插入所需文本內(nèi)容。同理，可使用右邊的“媒體”按鈕插入圖片、音頻、視頻、嵌入視頻、全景圖等內(nèi)容。如果是PSD圖片，則直接用PSD菜單載入。若版面中需要插入一些圖標(biāo)或形狀，則點(diǎn)擊“圖形”菜單選擇添加（圖5）。
此外，對(duì)于作品中所要用到的展示數(shù)據(jù)，可以通過(guò)插入圖表、表單等方式，非常輕松地完成數(shù)據(jù)展示制作（圖6）。如果要實(shí)現(xiàn)更多的效果，可通過(guò)“插件”菜單，選擇添加頁(yè)面加載套件和加載進(jìn)度、添加計(jì)數(shù)器、添加幀動(dòng)畫(huà)、添加相冊(cè)或地圖等。
對(duì)于需要修改的屬性，可通過(guò)窗口右側(cè)的分類屬性窗口選擇設(shè)置。通過(guò)窗口下方的編輯區(qū)域，可控制動(dòng)畫(huà)、加載頁(yè)、全局全景和背景、當(dāng)前頁(yè)等參數(shù)設(shè)置。例如，要定制個(gè)性化的加載頁(yè)面效果，點(diǎn)擊“加載頁(yè)”選項(xiàng)卡，然后通過(guò)下方的滑塊，對(duì)加載頁(yè)中的圖片和進(jìn)度進(jìn)行自定義編輯（圖7）。
對(duì)頁(yè)面上的各種元素進(jìn)行修改和編輯完成之后，點(diǎn)擊工具欄左上角的磁盤(pán)按鈕將作品保存在網(wǎng)上。注意，編輯過(guò)程中產(chǎn)生的內(nèi)容軟件會(huì)自動(dòng)保存，但為了防止丟失，還是要養(yǎng)成勤于手動(dòng)保存的習(xí)慣。
最后，就可以發(fā)布作品了。點(diǎn)擊工具欄上的“發(fā)布”按鈕執(zhí)行發(fā)布操作（圖8）。
由于作品是保存在網(wǎng)絡(luò)服務(wù)器中的，因此作品的共享是以網(wǎng)址的形式體現(xiàn)的。發(fā)布時(shí)要填寫(xiě)作品分享的標(biāo)題，設(shè)置個(gè)人域名。我們只需在“個(gè)性化域名”中填寫(xiě)自己命名的作品個(gè)性域名地址，發(fā)布后其他人就可以用這個(gè)域名來(lái)訪問(wèn)HTML5作品了（圖9）。
小提示：使用上述服務(wù)需要使用自己的百度賬號(hào)登錄。為維護(hù)網(wǎng)絡(luò)安全，目前發(fā)布信息需先經(jīng)過(guò)用戶實(shí)名制認(rèn)證方可進(jìn)行。
2. DIY 完全自己設(shè)計(jì)制作
套用模板適合于初學(xué)者或設(shè)計(jì)能力不強(qiáng)的用戶。其實(shí)，不用套用模板，完全可以從頭全部由自己來(lái)設(shè)計(jì)作品。
制作時(shí)，在主頁(yè)中選擇“我的H5”，然后點(diǎn)擊空白頁(yè)上印有圓圈套加號(hào)圖標(biāo)的按鈕，向?qū)?huì)詢問(wèn)創(chuàng)建什么樣的布局。從“分頁(yè)布局”或“整頁(yè)布局”中選擇一種布局方式。如果是分頁(yè)布局，則依靠頁(yè)面間的前后滑動(dòng)實(shí)現(xiàn)簡(jiǎn)單跳轉(zhuǎn)；如果是整頁(yè)布局，則將整個(gè)頁(yè)面分為不同區(qū)域，各部分還可創(chuàng)建鏈接，實(shí)現(xiàn)不同的功能（圖10）。
隨后其他步驟與第1部分的添加和設(shè)置操作方法相當(dāng)，只是全要親自設(shè)計(jì)，不能套用現(xiàn)成的組件而已。在創(chuàng)作過(guò)程中，只要善于使用系統(tǒng)提供的文本工具編排文字內(nèi)容，用媒體和圖形工具添加圖片、圖形、音視頻，數(shù)據(jù)相關(guān)的內(nèi)容使用圖表、表單等工具，借助于“插件”擴(kuò)展來(lái)補(bǔ)充完善，發(fā)揮自由想象的創(chuàng)作空間，一定能創(chuàng)作出更具個(gè)性化的作品。
rowserquest是Mozilla與法國(guó)Little Workshop游戲工作室共同開(kāi)源的一款HTML5多人在線游戲。支持PC、智能手機(jī)、平板電腦等移動(dòng)設(shè)備。游戲中，玩家扮演一位年輕的戰(zhàn)士在一個(gè)危險(xiǎn)的世界中不斷探險(xiǎn)并尋找寶藏。
Browserquest架構(gòu)有三個(gè)主要部分：1.服務(wù)器端，使用 Node.js 運(yùn)行 2.客戶端，在瀏覽器中使用javascript運(yùn)行 3.數(shù)據(jù)庫(kù)端，使用Redis運(yùn)行。采用的技術(shù)包括：WebSockets 技術(shù)：用于在瀏覽器中實(shí)現(xiàn)和服務(wù)器端的雙向通信。 HTML5 Canvas：用于基于 2D tile 的圖形引擎。Web workers：允許初始化大的世界地圖，而不會(huì)減慢頁(yè)面 UI。localStorage：隨時(shí)保存玩家角色的進(jìn)度。CSS3 Media Queries：使游戲可以自動(dòng)根據(jù)不同的設(shè)備進(jìn)行調(diào)整。HTML5 audio：游戲中觸發(fā)的各種聲音。
開(kāi)源派紅包福利
打開(kāi)支付寶首頁(yè)搜索“556850443” 立即領(lǐng)大紅包
微信訂閱號(hào)：開(kāi)源派 （opensourcepie）
HTML5日漸成為Web開(kāi)發(fā)的主流技術(shù)之一，目前，W3C已經(jīng)完成了HTML5的基本特性，HTML5成為 W3C官方標(biāo)準(zhǔn)指日可待。
目前互聯(lián)網(wǎng)中已經(jīng)出現(xiàn)了大量HTML5應(yīng)用，其展示的效果一點(diǎn)也不輸Flash，甚至要更為強(qiáng)大。該技術(shù)最大的優(yōu)勢(shì)是跨平臺(tái)，甚至未來(lái)有可能成為開(kāi)發(fā)移動(dòng)應(yīng)用的主要技術(shù)。
本文為你帶來(lái) 6 個(gè)強(qiáng)大的 HTML5應(yīng)用開(kāi)發(fā)工具，希望可以提高你的開(kāi)發(fā)效率。
1. Adobe Edge Animate
Adobe Edge Animate 是一款 Adobe 開(kāi)發(fā)的全新的工具，致力于尋求適用于 HTML5、CSS3 和 JavaScript的交互、動(dòng)畫(huà)編程體驗(yàn)。
該工具有一個(gè)類似 Flash Pro 的用戶界面，允許開(kāi)發(fā)者對(duì)交互內(nèi)容、動(dòng)畫(huà)進(jìn)行精準(zhǔn)的控制。目前尚不支持 HTML5 canvas 和 audio 標(biāo)簽，Adobe 表示會(huì)在未來(lái)增加支持。
2. HTML KickStart
這是一套集合了各種 CSS、HTML5 和 jQuery 模塊的工具，不僅可以幫助你節(jié)省開(kāi)發(fā)時(shí)間，還可以幫助你獲取 HTML5 開(kāi)發(fā)的靈感。
該工具包中包含了大量預(yù)配置、預(yù)格式化的功能塊，你可以非常快地實(shí)現(xiàn)一些特定的功能，如幻燈、按鈕、選項(xiàng)卡等。
3. HTML5 Reset
HTML5 Reset 包含了一組 HTML、CSS 相關(guān)的文件，幫助你在開(kāi)始新項(xiàng)目的時(shí)候節(jié)省時(shí)間，并提供了基于 HTML5 的空白 WordPress 模板。
4. Liveweave
這是一個(gè) HTML5、JavaScript 和 CSS3 代碼在線測(cè)試工具，你可以直觀地看到你的代碼的運(yùn)行情況。此外，該工具還具備代碼自動(dòng)完成功能，你也可以將其作為一個(gè)在線 IDE 來(lái)使用。
5. Modernizr
Modernizr 是一個(gè)開(kāi)源的JS庫(kù)，它使得基于訪客瀏覽器的不同而開(kāi)發(fā)不同級(jí)別體驗(yàn)的設(shè)計(jì)工作變得簡(jiǎn)單。當(dāng)你在網(wǎng)頁(yè)中嵌入 Modernizr 腳本時(shí)，它會(huì)檢測(cè)用戶當(dāng)前瀏覽器是否支持 CSS3 和 HTML5 的特性，然后你可以決定是否創(chuàng)建一個(gè)基于 JS 的 fallback，或者對(duì)那些不支持的瀏覽器進(jìn)行簡(jiǎn)單的優(yōu)雅降級(jí)。
6. Video.js
Video.js 是一個(gè)基于 JavaScript 的 HTML5 視頻播放器，可以幫你更加簡(jiǎn)單的構(gòu)建 HTML5 視頻。Video.js 提供了一個(gè)通用控件，內(nèi)置的 HTML/CSS 皮膚，修復(fù)了跨瀏覽器的兼容性問(wèn)題，還擴(kuò)展了許多附加功能，例如全屏、字幕等。如果用戶瀏覽器不支持 HTML5 視頻，還可以退回到 Flash 或其他播放技術(shù)。
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
