整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
殘酷的移動(dòng)互聯(lián)網(wǎng)競(jìng)爭(zhēng)環(huán)境下，HTML5技術(shù)一直受到各方關(guān)注，“HTML5顛覆原生App”的爭(zhēng)論也從未停止過(guò)，不管怎樣HTML5生態(tài)的構(gòu)建方興未艾。不過(guò)對(duì)于移動(dòng)開發(fā)者來(lái)說(shuō)更關(guān)心的問(wèn)題是如何低成本、周期短開發(fā)出體驗(yàn)效果好的App，所以當(dāng)下用HTML5遠(yuǎn)比賭HTML5更現(xiàn)實(shí)。于是，一個(gè)一直被提及但是從沒(méi)有占據(jù)過(guò)統(tǒng)治地位的概念又一次走進(jìn)了移動(dòng)開發(fā)者們的視野，那就是跨平臺(tái)開發(fā)。
AD：WOT2015互聯(lián)網(wǎng)運(yùn)維與開發(fā)者大會(huì)熱銷搶票
目前國(guó)內(nèi)外已經(jīng)有很多基于HTML5的跨平臺(tái)開發(fā)工具，你并不需要任何的原生應(yīng)用編程經(jīng)驗(yàn)，你只需要一些HTML的相關(guān)知識(shí)，懂一些CSS和JavaScript，運(yùn)用工具中所提供的各種豐富的功能模塊，便可在很短時(shí)間內(nèi)完成App的開發(fā)而且讓你的App具備完美的原生體驗(yàn)。
推薦幾款跨平臺(tái)工具
1、Appcelerator
Appcelerator的Titanium開發(fā)平臺(tái)使開發(fā)者可以通過(guò)HTML、PHP、JavaScript、Ruby、Python等Web編程語(yǔ)言開發(fā)手機(jī)、平板和桌面的原生App。其優(yōu)勢(shì)在于它可以讓用戶輕松地訪問(wèn)超過(guò)300個(gè)API以及定位信息。
此外，Appcelerator提供針對(duì)特定行為或事件定制的統(tǒng)計(jì)。App的數(shù)據(jù)既可儲(chǔ)存在云端，也可儲(chǔ)存在設(shè)備上。
2、APICloud
APICloud是一款“云端一體”的移動(dòng)開發(fā)平臺(tái)，信仰“云端一體”的理念，重新定義了移動(dòng)應(yīng)用開發(fā)。APICloud為開發(fā)者從“云”和“端”兩個(gè)方向提供API，簡(jiǎn)化移動(dòng)應(yīng)用開發(fā)技術(shù)，讓移動(dòng)應(yīng)用的開發(fā)周期從一個(gè)月縮短到7天。APICloud由“云API”和“端API”兩部分組成，可以幫助開發(fā)者快速實(shí)現(xiàn)移動(dòng)應(yīng)用的開發(fā)、測(cè)試、發(fā)布、管理和運(yùn)營(yíng)的全生命周期管理。
2、PhoneGap
PhoneGap是一個(gè)免費(fèi)且開源的開發(fā)環(huán)境，使開發(fā)者可以開發(fā)出在Android、Palm、黑莓、iPhone、iTouch及iPad等設(shè)備上運(yùn)行的App。其使用的是HTML和JavaScript等標(biāo)準(zhǔn)的Web開發(fā)語(yǔ)言。開發(fā)者使用PhoneGap進(jìn)行開發(fā)，可調(diào)用加速計(jì)、GPS/定位、照相機(jī)、聲音等功能。
PhoneGap還提供Adobe AIR App以及在線的培訓(xùn)課程，幫助開發(fā)者了解原生API并在他們自己的平臺(tái)上開發(fā)移動(dòng)App。
4、NativeScript
NativeScript是使用移動(dòng)平臺(tái)的JavaScript引擎來(lái)進(jìn)行跨平臺(tái)開發(fā)。邏輯部分自然無(wú)需多說(shuō)，關(guān)鍵在于如何使用平臺(tái)特性。NativeScript是通過(guò)反射得到所有平臺(tái)API，預(yù)編譯它們，然后將這些API注入到JavaScript運(yùn)行環(huán)境，接下來(lái)在Javascript調(diào)用后攔截這個(gè)調(diào)用，并運(yùn)行native代碼。NativeScript是使用大量web開發(fā)的技巧來(lái)進(jìn)行app開發(fā)，因?yàn)楣ぞ哝満驼Z(yǔ)言都非常熟悉受到了很多前端開發(fā)者的歡迎。
5、Kinvey
Kinvey同樣是一個(gè)為移動(dòng)應(yīng)用開發(fā)者提供后臺(tái)創(chuàng)建服務(wù)的平臺(tái)。Kinvey強(qiáng)調(diào)加速移動(dòng)應(yīng)用開發(fā)與銷售的“即取即用”理念。Kinvey的中間層與數(shù)據(jù)層均托管在多個(gè)云服務(wù)提供商處，包括Rackspace、Amazon與Microsoft。所有通過(guò)Kinvey存儲(chǔ)的數(shù)據(jù)都會(huì)有四種方式備份：Amazon EC2、Windows Azure、Rackspace以及Kinvey自己的服務(wù)器，假如其中一兩個(gè)出現(xiàn)了故障，用戶的數(shù)據(jù)依然安然無(wú)恙。
總結(jié)：
關(guān)于HTML5和原生App的爭(zhēng)論一直在繼續(xù)，不論最后誰(shuí)能取勝，開發(fā)者更關(guān)心App的開發(fā)速度和最終體驗(yàn)。合理的使用工具會(huì)讓開發(fā)效率大大提升，甚至達(dá)到事半功倍的效果，希望能有一款適合您。
期待未來(lái)有一天，App開發(fā)可以像在紙上畫畫一樣簡(jiǎn)單。
聲明：IT之家網(wǎng)站刊登/轉(zhuǎn)載此文出于傳遞更多信息之目的，并不意味著贊同其觀點(diǎn)或論證其描述。
TML5多媒體作品以其對(duì)各種平臺(tái)的兼容而見長(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)畫、添加相冊(cè)或地圖等。
對(duì)于需要修改的屬性，可通過(guò)窗口右側(cè)的分類屬性窗口選擇設(shè)置。通過(guò)窗口下方的編輯區(qū)域，可控制動(dòng)畫、加載頁(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)擊工具欄左上角的磁盤按鈕將作品保存在網(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í)要填寫作品分享的標(biāo)題，設(shè)置個(gè)人域名。我們只需在“個(gè)性化域名”中填寫自己命名的作品個(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è)性化的作品。
家好，請(qǐng)?jiān)试S我做一個(gè)尷尬而又不失禮貌的微笑^_^，今天小編就來(lái)盤點(diǎn)一下當(dāng)下主流的html 5 開發(fā)工具。
小編引用一下他們的slogan：飛速編碼的極客工具，手指爽，眼睛爽。
小編先好好介紹一下它：
內(nèi)置emmet：tab一下生成一串代碼
無(wú)死角提示：除了語(yǔ)法，還能提示ID、Class、圖片、鏈接、字體
多語(yǔ)言支持：php、jsp、ruby、python、nodejs等web語(yǔ)言，less、coffee等編譯型語(yǔ)言均支持
實(shí)時(shí)預(yù)覽，一邊敲一邊看
超級(jí)全的與法庫(kù)
轉(zhuǎn)到定義和一鍵搜索
小伙伴們，這是一個(gè)在線工具，但是功能的確很強(qiáng)大并且還簡(jiǎn)單。隨意設(shè)計(jì)和發(fā)布，所見即所得，不用編碼。有沒(méi)有很方便呢？
將工程保存到云端，隨時(shí)隨地訪問(wèn)，真的不要再方便。
WebStorm 是jetbrains公司旗下一款JavaScript 開發(fā)工具。目前已經(jīng)被廣大中國(guó)JS開發(fā)者譽(yù)為“Web前端開發(fā)神器”、“最強(qiáng)大的HTML5編輯器”、“最智能的JavaScript IDE”等。
特點(diǎn)：
智能的代碼補(bǔ)全
代碼格式化
html提示
聯(lián)想查詢
代碼重構(gòu)
代碼檢查和快速修復(fù)
代碼調(diào)試
代碼結(jié)構(gòu)瀏覽
代碼折疊
包裹或者去掉外圍代碼
Sencha Architect 2是個(gè)可視化的應(yīng)用構(gòu)建器，它使用Sencha Touch 2來(lái)構(gòu)建移動(dòng)應(yīng)用，使用ExtJS 4來(lái)構(gòu)建桌面應(yīng)用。
特點(diǎn)：
1、通過(guò)拖拽組件來(lái)創(chuàng)建富用戶界面并連接到后端的數(shù)據(jù)源。
2、支持通過(guò)Sencha Touch 2來(lái)構(gòu)建移動(dòng)Web應(yīng)用以及通過(guò)Ext JS 4來(lái)構(gòu)建桌面Web應(yīng)用。其提供的代碼編輯功能可以在Sencha Architect中創(chuàng)建整個(gè)應(yīng)用。
3、支持模型--視圖--控制器模式。內(nèi)置的針對(duì)iOS與Android的一鍵式原生打包功能。
Adobe Edge是adobe公司的一款新型網(wǎng)頁(yè)互動(dòng)工具。
Adobe Edge的目的是幫助專業(yè)設(shè)計(jì)師制作網(wǎng)頁(yè)動(dòng)畫乃至簡(jiǎn)單游戲。該工具的重點(diǎn)放在動(dòng)畫引擎上，但adobe承諾將增加更多HTML5功能，比如Canvas、HTML5音頻/視頻標(biāo)簽等。支持Android、iOS、webOS、黑莓PlayBook、Firefox、Chrome、Safari和IE9等各個(gè)平臺(tái)。Adobe于2014年正式推出Adobe Edge AnimateCC集成了hml5、js、css的開發(fā)工具。
Adobe對(duì)于我們來(lái)講，真的再熟悉不過(guò)了。
有人說(shuō)，Edge是不是要代替flash，哦，不。Edge只是為網(wǎng)頁(yè)設(shè)計(jì)人員提供了一種工具，幫助他們?cè)诓恢С諪lash的設(shè)備(比如蘋果iOS設(shè)備)上制作網(wǎng)絡(luò)動(dòng)畫。
Ps：如今的flash，不用怕被誰(shuí)代替，因?yàn)樗鼤?huì)慢慢成為歷史。
這款神一樣的軟件，小編就不做介紹啦。
VSCode 好多小伙伴在評(píng)論區(qū)推薦，小便漏掉了，現(xiàn)在補(bǔ)上。
Microsoft在2015年4月30日Build 開發(fā)者大會(huì)上正式宣布了 Visual Studio Code 項(xiàng)目：一個(gè)運(yùn)行于 Mac OS X、Windows和 Linux 之上的，針對(duì)于編寫現(xiàn)代 Web 和云應(yīng)用的跨平臺(tái)源代碼編輯器。
Sublime Text 是一個(gè)代碼編輯器（Sublime Text 2是收費(fèi)軟件，但可以無(wú)限期試用），也是HTML和散文先進(jìn)的文本編輯器。Sublime Text是由程序員Jon Skinner于2008年1月份所開發(fā)出來(lái)，它最初被設(shè)計(jì)為一個(gè)具有豐富擴(kuò)展功能的Vim。
Sublime Text具有漂亮的用戶界面和強(qiáng)大的功能，例如代碼縮略圖，Python的插件，代碼段等。還可自定義鍵綁定，菜單和工具欄。Sublime Text 的主要功能包括：拼寫檢查，書簽，完整的 Python API ， Goto 功能，即時(shí)項(xiàng)目切換，多選擇，多窗口等等。Sublime Text 是一個(gè)跨平臺(tái)的編輯器，同時(shí)支持Windows、Linux、Mac OS X等操作系統(tǒng)。
快在留言區(qū)告訴小編，你都在用什么軟件開發(fā)HTML5呢？一起交流學(xué)習(xí)吧！
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
