了這8個工具,你也可以一個人制作出寶馬、可口可樂、vivo等風(fēng)靡朋友圈的Html5海報。
初頁 - 優(yōu)質(zhì)H5手機頁、微信海報
云起初頁官網(wǎng)。可免費下載安卓版和蘋果版初頁App,或通過電腦在線創(chuàng)建、編輯,輕松創(chuàng)作優(yōu)雅、炫酷,利于微信傳播的H5海報。
MAKA.im | 簡單、強大的HTML5創(chuàng)作工具。移動化社交化的時代,輕、快、優(yōu)雅,MAKA完美呈現(xiàn)!
http://xiumi.us
http://www.dodoca.com/index/saomalogin
兔展|微信場景應(yīng)用_H5頁面制作工具|微雜志_電子邀請函創(chuàng)作平臺
兔展(rabbitpre)是基于HTML5搭建的移動輕應(yīng)用創(chuàng)建平臺,是微信微場景、微雜志、微相冊等HTML5應(yīng)用的創(chuàng)作工具,讓您像制作PPT一樣制作炫酷的We
易企秀|免費移動場景應(yīng)用自營銷管家
易企秀移動場景應(yīng)用自營銷管家,免費為中小微企業(yè)或團隊提供業(yè)務(wù)場景應(yīng)用展示、潛在客戶在線報名收集、管理和二次營銷
CoolSite360是意派科技繼Epub360(交互內(nèi)容設(shè)計利器)推出以來的第二款為專業(yè)設(shè)計師打造的在線響應(yīng)式網(wǎng)站一站式建站工具,可視化在線編輯方式,無需編程,無需下載,實時預(yù)覽,在線設(shè)計響應(yīng)式網(wǎng)站,響應(yīng)式布局網(wǎng)頁,創(chuàng)建html5和css3動態(tài)網(wǎng)站,支持
VXPLO(www.vxplo.com)提供了一種全新的基于“云計算”的交互媒體新格式,具有更好交互效果、更快顯示速度、更方便制作流程。同時VXPLO還提供了一個在線編輯
TML5多媒體作品以其對各種平臺的兼容而見長,目前已獲得了廣泛的應(yīng)用。如果我們需要制作自己的HTML5多媒體作品,一個方便之選就是利用現(xiàn)成的在線制作工具“百度H5”。
首先訪問“百度H5”網(wǎng)頁(https://h5.baidu.com/),可以看到非常簡單的頁面,僅有“我的H5”和“我的模板”兩個選項。其中“我的模板”是通過套用模板的方式來制作HTML5作品,而“我的H5”則可以完全靠自定義各種參數(shù)來自由創(chuàng)作,制作好的作品也會顯示在這里(圖1)。
1. 通過創(chuàng)意模板輕松制作
在首頁中選擇“我的模板”,隨后會進(jìn)入一個模板展示頁面,這些都是設(shè)計者們分享的模板。根據(jù)你所要設(shè)計的作品的類別,可以按類選擇一個類似的作品作為制作的模板,然后在此基礎(chǔ)上進(jìn)行修改,即可快速形成自己的多媒體作品(圖2)。
比如要制作一個招生方面的媒體作品,選擇如圖所示的秋季班招生模板,然后點擊右下角的“使用模板”按鈕(圖3)。
接下來先要為作品命名,例如“我們的幼兒園招生了”。輸入完畢點擊“確定”按鈕(圖4)。
隨后進(jìn)入實質(zhì)性的模板修改編輯階段。對于不合適的內(nèi)容,可先刪除頁面元素再添加。點擊“文本”菜單插入所需文本內(nèi)容。同理,可使用右邊的“媒體”按鈕插入圖片、音頻、視頻、嵌入視頻、全景圖等內(nèi)容。如果是PSD圖片,則直接用PSD菜單載入。若版面中需要插入一些圖標(biāo)或形狀,則點擊“圖形”菜單選擇添加(圖5)。
此外,對于作品中所要用到的展示數(shù)據(jù),可以通過插入圖表、表單等方式,非常輕松地完成數(shù)據(jù)展示制作(圖6)。如果要實現(xiàn)更多的效果,可通過“插件”菜單,選擇添加頁面加載套件和加載進(jìn)度、添加計數(shù)器、添加幀動畫、添加相冊或地圖等。
對于需要修改的屬性,可通過窗口右側(cè)的分類屬性窗口選擇設(shè)置。通過窗口下方的編輯區(qū)域,可控制動畫、加載頁、全局全景和背景、當(dāng)前頁等參數(shù)設(shè)置。例如,要定制個性化的加載頁面效果,點擊“加載頁”選項卡,然后通過下方的滑塊,對加載頁中的圖片和進(jìn)度進(jìn)行自定義編輯(圖7)。
對頁面上的各種元素進(jìn)行修改和編輯完成之后,點擊工具欄左上角的磁盤按鈕將作品保存在網(wǎng)上。注意,編輯過程中產(chǎn)生的內(nèi)容軟件會自動保存,但為了防止丟失,還是要養(yǎng)成勤于手動保存的習(xí)慣。
最后,就可以發(fā)布作品了。點擊工具欄上的“發(fā)布”按鈕執(zhí)行發(fā)布操作(圖8)。
由于作品是保存在網(wǎng)絡(luò)服務(wù)器中的,因此作品的共享是以網(wǎng)址的形式體現(xiàn)的。發(fā)布時要填寫作品分享的標(biāo)題,設(shè)置個人域名。我們只需在“個性化域名”中填寫自己命名的作品個性域名地址,發(fā)布后其他人就可以用這個域名來訪問HTML5作品了(圖9)。
小提示:使用上述服務(wù)需要使用自己的百度賬號登錄。為維護(hù)網(wǎng)絡(luò)安全,目前發(fā)布信息需先經(jīng)過用戶實名制認(rèn)證方可進(jìn)行。
2. DIY 完全自己設(shè)計制作
套用模板適合于初學(xué)者或設(shè)計能力不強的用戶。其實,不用套用模板,完全可以從頭全部由自己來設(shè)計作品。
制作時,在主頁中選擇“我的H5”,然后點擊空白頁上印有圓圈套加號圖標(biāo)的按鈕,向?qū)儐杽?chuàng)建什么樣的布局。從“分頁布局”或“整頁布局”中選擇一種布局方式。如果是分頁布局,則依靠頁面間的前后滑動實現(xiàn)簡單跳轉(zhuǎn);如果是整頁布局,則將整個頁面分為不同區(qū)域,各部分還可創(chuàng)建鏈接,實現(xiàn)不同的功能(圖10)。
隨后其他步驟與第1部分的添加和設(shè)置操作方法相當(dāng),只是全要親自設(shè)計,不能套用現(xiàn)成的組件而已。在創(chuàng)作過程中,只要善于使用系統(tǒng)提供的文本工具編排文字內(nèi)容,用媒體和圖形工具添加圖片、圖形、音視頻,數(shù)據(jù)相關(guān)的內(nèi)容使用圖表、表單等工具,借助于“插件”擴展來補充完善,發(fā)揮自由想象的創(chuàng)作空間,一定能創(chuàng)作出更具個性化的作品。
工智能是時下最火爆的黑科技,情人節(jié)是全世界最浪漫的節(jié)日,當(dāng)人工智能碰上“情人節(jié),又將產(chǎn)生怎樣的化學(xué)反應(yīng)?今年情人節(jié),有一個用白鷺引擎創(chuàng)作的非常有意思的H5“How-Matched”,即結(jié)合了當(dāng)下最熱門的人工智能,又和情人節(jié)主題很好地結(jié)合起來。
玩法
“How-Matched”的玩法非常簡單,只需要選擇你想要測試的照片,就可以根據(jù)拍照時兩個人的年齡、情緒、甜蜜度等數(shù)據(jù)得出二者的匹配程度。
當(dāng)然本意是讓大家測試情侶的匹配度,但是有些調(diào)皮的小伙伴大開腦洞,比如測試了“是胡不是霍”、特朗普&奧巴馬等等。效果如下圖:
制作原理
很多開發(fā)者第一時間咨詢“How-Matched”的技術(shù)細(xì)節(jié),接下來看一下“How-Matched”開發(fā)涉及到的三個技術(shù)點。
1、白鷺引擎 4.0 相冊接口
首先是調(diào)用本地相冊,而選取圖片有兩種方式。
1直接調(diào)用HTML5相冊接口,但是需要開發(fā)者針對不同的系統(tǒng)、瀏覽器做適配
2通過微信JS-SDK相冊接口,但是需要有公眾賬號且通過認(rèn)證
為了讓更多個人開發(fā)者使用到相冊接口,我們引擎團隊專門做了大量的調(diào)研開發(fā)工作。推出了“相冊接口片API”,適配所有系統(tǒng)、瀏覽器。開發(fā)者只需要通過一個API即可調(diào)用,我們將在下一個版本放出此API,關(guān)注【白鷺引擎】公眾號可以及時獲得引擎發(fā)布消息。
2、微軟認(rèn)知服務(wù)
獲得了圖片后,就涉及到白鷺時代合作伙伴微軟的認(rèn)知服務(wù),也就是咱們通常所說的人工智能接口“人臉識別API”,借助此接口我們可以獲得基于機器學(xué)習(xí)技術(shù)做出的面部特征預(yù)測。檢測出人臉后,我們可以獲得年齡、性別、頭部姿態(tài)、微笑檢測、胡須檢測以及27個面部重要特征點及位置數(shù)據(jù)。
通過上述數(shù)據(jù),我們精心設(shè)計了情人節(jié)匹配度算法,達(dá)到了“How-Matched”的最終效果。當(dāng)然我們最終會將“How-Matched”的源碼放出來。而在本周四晚八點【白鷺直播間】(斗魚房間:https://www.douyu.com/592227),白鷺時代布道師A閃將給大家?guī)怼癏ow-Matched”的開發(fā)實戰(zhàn)直播。
當(dāng)然除了人臉識別API,還有“人臉驗證”、“人臉辨識”、“相似人臉?biāo)阉鳌薄ⅰ叭四樂纸M”等認(rèn)知服務(wù)API,感興趣的開發(fā)者可以查看文檔體驗。
3、白鷺引擎 4.0 canvas & DOM 圖片傳遞接口
目前市場上的主流HTML5游戲引擎是基于canvas或者WebGL進(jìn)行開發(fā)的,但是無法觸發(fā)長按識別二維碼功能。而白鷺引擎 4.0提供了新的API,可以讓canvas中的圖片傳遞到DOM中并調(diào)整大小位置,最終可以實現(xiàn)長按識別二維碼的功能。
借助于此功能開發(fā)者還可以實現(xiàn)更多豐富的功能。
意義
本次“How-Matched”的制作也是白鷺時代的一次嘗試,將HTML5、人工智能以及社交結(jié)合起來會有怎樣的化學(xué)效果?
1、HTML5 的形式,賦予的人工智能更大的靈活性,不僅無需安裝,更降低了流量與用戶的使用門檻,讓更多的普通人能夠領(lǐng)略人工智能的獨特魅力。
2、HTML5 具有天然的社交屬性,使用的低門檻加上分享的便捷性可以使 HTML5通過社交網(wǎng)絡(luò)短時間內(nèi)瞬間引爆。
本次白鷺引擎 4.0 新增了兩個API,后續(xù)白鷺引擎將繼續(xù)探索HTML5的社交場景,繼續(xù)為開發(fā)者提供更加強大、更加方便快捷的API。
想要體驗“How-Matched”的用戶可以訪問原文鏈接體驗(http://wx.qimi.com/html/1210/love/1/index.html),想要更加詳細(xì)的了解如何制作“How-Matched”的同學(xué)關(guān)注本周四的【白鷺直播間】,白鷺時代布道師A閃屆時將給大家?guī)怼癏ow-Matched”的開發(fā)實戰(zhàn)直播。
*請認(rèn)真填寫需求信息,我們會在24小時內(nèi)與您取得聯(lián)系。