html5常用的开发工具是哪些?

html-css029

html5常用的开发工具是哪些?,第1张

第一、【Google Web Toolkit】是现在大家还不熟悉的工具之一,主要用于开发浏览器应用的一个工具,不过库中支持很多【HTML5】的功能,包括对客户端,或者是web存储的支持,都可以实现。

第二、还有一种是【JetBrains WebStorm】工具,需要创建HTML文档时可获得对【HTML5】文件的支持,现在的运用很多,比如砍伐者键入,使用者可以在【chrome】浏览器中及时的预览【HTML】的文档很方便。

第三、微软的【Visual Studio 2010 SP1】中提供了IntelliSense这个项目,也就是说追加了针对【HTML5】的一些元素,总体使用起来还是比较好的,但是我们要结合【ddhu】的一些实用工具。

第四、【Dojo Foundation Maqetta】是一个不错的选择,这款是工具是来自于【IBM】项目之一,【Dojo Foundation Maqetta】是为桌面和移动设备开发HTML5应用的开源工具,浏览器即可使用。

第五、当然还有【Sencha Touch2】是移动应用框架的一种,可以当做一个重要【Sencha】的HTML5平台,使用者可以用它开发面向【iOS】进行制作和使用,也可以【Android】和【Blackberry、Kindle Fire】使用。

第六、现在我们继续介绍【Sencha】,这款工具的主要定位是【HTML5】的可视化开发研究,一般来说开发团队可以在一个任务,然后做一个集成的环境,然后在这个环境中完成应用的设计和开发,以及需要的部署。

第七、我们来介绍一下【Adobe ColdFusion 】,这款工具主要是用来开发企业【Web】程序的一个技术,通过【Websockets】和互动表单以及视频等来做出【HTML5】技术,创建一种用户体验。

第八、最后【Adobe Dreamweaver CS6】作为一个【Web】端口的一种设计软件,这款工具提供了对【HTML】网站和移动程序的可视化编辑界面,整体来说使用也是比较的方便。

1、Initializr

Initializr是制作HTML5网站最好的入门辅助开发工具,你可以使用提供的特色模板快速生成网站,也可以自定义,Initializr会为你生成代码简洁的可定制的网页模板。

2、HTML5 visual cheat sheet

HTML5 visual cheat sheet是一个非常酷的速查手册,每个Web开发人员的必备神器,可以帮助大家快速超找一个标签或者属性。

3、Cross browser HTML5 forms HTML5中的日历,取色板,滑块部件等都是非常棒工具,但是有些浏览器不支持。Cross browser HTML5 forms还可以帮助你构建完美的HTML5表单兼容方案。

4、HTML5demos

HTML5demos会告诉你每一个HTML5特性在哪些浏览器中支持,比如说你的浏览器是否支持HTML5 Canvas?Safari是否可以运行简单的HTML5聊天客户端等问题。

5、DreamWeaver

网页制作软件,该软件已成为专业级网页制作程序,支持HTML,CSS,PHP,JSP和ASP等多种脚本语言着色显示,同时提供模板应用功能,支持一键式生成网页框架功能。它是初学者或专业级网站开发人员必备的选择工具。

html适合开发环境。

跨平台移动开发实际上就是基于HTML5开发软件界面和主要的业务逻辑,因此一套完善的基于移动平台的HTML5开发环境是非常有必要的。这里我主要的关注点是以下:

Javascript和Jquery mobile的编辑器

HTML5的各个元素的Inspector

Javascript远程断点debug

移动平台Javascript开发模式

1)Javascript和Jquery mobile的编辑器

谈到Javascript的编辑器,市面上有很多,大家都有自己心仪的选择,我这里只是推荐三个我比较喜欢的:

aptana studio. Eclipse插件更新地址:http://download.aptana.com/studio3/plugin/install

Dreamweaver CS6. 官方地址:http://success.adobe.com/en/na/sem/products/dreamweaver.html

appMobi. 官方地址:http://www.appmobi.com/

aptana studio的优点在于比较轻量级,与Eclipse集成,并且代码自动完成和JS语法纠错做得非常好,整个风格类似于VI,比较极客一点:

Dreamweaver CS6算是最为强悍的HTML5的开发环境,并且是我所知道的唯一支持Jquery mobile所见即所得的开发工具(官方提供的在线编辑器除外),并且Javascript, CSS和HTML开发起来非常顺手,最大的缺陷就是要收费:

2)HTML5的各个元素的Inspector

如果放在桌面系统上浏览器,这样的工具是很多的,如firefox上的firebug,chrome上的开发者工具,IE上http watch和IE自带调试工具,但如果放在移动平台上,特别是基于phonegap这样内置的webview来开发,这样的工具就不是很普遍了。这里推荐一个phonegap官方所提到过的工具:weinre

weinre通过架一个server,把调试器和device连接起来,原理就多说,2.0之后就没看到Java的版本,因此只能通过NPM来安装,顺便提一下NPM是Nodejs的包管理工具,类似于Maven对于Java一样。安装Nodejs后就安装好了NPM。之后安装weinre非常简单:

npm install weinre -g

如果在windows平台上没加任何配置,weinre会安装在 C:\Users\***\AppData\Roaming\npm\node_modules\weinre\,然后启动server:

node path-to-weinre-node/weinre --boundHost -all- --httpPort 8082

这里用-all-是为了在0.0.0.0上打开端口8082,避免非本地无法远程请求这个端口,然后在要调试的页面里加上weinre的代理:

<script src="http://computer-ip:8082/target/target-script-min.js#anonymous"></script>