web前端之html5开发中常用的开发工具

正所谓“工欲善其事,必先利其器”,对Web开发人员来说,好工具的使用总会给人带来事半功倍的效果。正准备学习HTML5或者已经进行了一段时间的HTML5开发的童鞋,都有必要了解下,HTML5都有哪些开发工具,哪款开发工具更适合我?下面就一一盘点下:

  一、HTML5全栈开发工具之Adobe Dreamweaver

  首先是大名鼎鼎的Adobe Dreamweaver,Adobe Dreamweaver 软件使设计人员和开发人员能充满自信地构建基于标准的网站。由于同新的 Adobe CS Live 在线服务 Adobe BrowserLab 集成,您能以可视方式或直接在代码中进行设计,使用内容管理系统开发页面并实现精确的浏览器兼容性测试。

  Adobe Dreamweaver CS5版本通过Adobe HTML5 Pack这一扩展,用户可以更轻松地创建和优化其作品。 Adobe HTML5开发工具Pack包括标识HTML5 和 CSS3 功能的新代码,从而使Dreamweaver 用户能够方便地使用HTML5标记。HTML5开发工具扩展包还更新和改进了WebKit引擎以支持Dreamweaver CS5 实时视图中的视频和音频。用户利用CSS3新功能能够更方便地设计多屏网页,并且可以预览在多种浏览器和设备之间进行渲染的过程。

  而最新版本的Adobe Dreamweaver CS5.5的突出新特点就是直接提供了对HTML5的支持:

  通过 CSS 面板设置样式,该面板经过更新可支持新的 CSS3 规则。设计视图现在支持媒体查询,在您调整屏幕尺寸的同时可应用不同的样式。使用 HTML5 进行前瞻性的编码,同时提供代码提示和设计视图渲染支持。

  二、HTML5全栈开发开发工具之Adobe Edge Preview

  Adobe公司考虑到,当HTML5成为标准网页的时候,开发者们仍然将会在Adobe的软件上进行开发。所以推出一种新型的网页开发工具Edge,以帮助开发者在HTML5网页上创造更复杂的动画和互动效果。

  Adobe网络专家组产品经理德汶·费南德(Devin Fernandez)称,随着HTML应用与开发越来越丰富,曾经通过Flash才能实现的工作,现在可通过Adobe Edge轻松完成。Edge支持事件连发操作,支持和元素,支持svg/png/gif/jpg图片,支持圆角矩形以及更多形状,支持元素与2D图形界面,支持SVG动画。

  目前来看,Edge似乎和Flash运行在一个相似的界面上。Edge的时间轴和其他工具都位于和目前版本Flash的相同位置。但是界面背后,Edge是非常不同的。它是代替Adobe动作脚本形式的,动画效果创造基于JSON编码,所以代替动作脚本,动画效果是编码在html和javascript上,并运行在所有现代桌面浏览器和所有移动设备浏览器上,比如Safari浏览器。

  三、MUGEDA-HTML5下的云动画平台

  MUGEDA是一个基于HTML5技术的云动画平台,不用任何下载安装,打开支持HTML5的浏览器就可以创建动画,有各种造型工具,有图层、逐帧/补间动画、镜头切换、蒙版、路径编辑等丰富的动画功能,生成的动画可以插入网页,也可导出成各种格式,MUGEDA解决了目前HTML5缺乏动画工具的现状,可广泛应用于网页开发、游戏、电子出版等领域。体验MUGEDA很简单,登录http://www.mugeda.com,注册一个免费账号,就可以开始生成HTML5动画。

  在线使用地址:http://www.mugeda.com

  四、HTML5全栈开发工具:Make Games with Construct 2

  最简单、最容易的基本游戏开发工具,它有一个可视化编辑器,让你不写一行代码创建HTML5游戏,这要归功于它的事件编辑器,而且对于初学者和高级用户都非常容易。该工具最近添加了WebGL加速。

  100个事件以下的版本是免费的,其中包括拖放物理引擎。

  下载地址:http://www.scirra.com/construct2/releases/r74

  五、HTML5游戏开发工具:GameMaker 8.X

  最老牌、最强大的一款工具。最近添加了对HTML5的支持(GameMaker:HTML5)。借助此工具的可视化开发界面,开发者无需写代码即可创建简单的游戏。

  对于复杂游戏,GameMaker可以根据用户创建的界面生成游戏脚本代码,代码基于GameMaker语言(GameMaker Language,简称GML,这是GameMaker的最大优势),你可以手动编辑它们。

  该工具的精简版(lite)是免费的。

  工具下载地址:http://www.yoyogames.com/make

  六、HTML5全栈开发编辑器:JavaScript IDE WebStorm

  webStorm 是一款商业的 JavaScript 开发工具,虽然WebStorm的js的提示远远不如aptana那么强悍(输入字母d不提示document),但是做为 IntelliJ IDEA 的js缩水版,其它功能也是比较期待的。

  具体的有:

  1. 文件不用保存,敲完直接看演示(ff也有类似的一款插件,罗浮宫abcd曾推荐过)。

  2. 自带有svn,如果不用服务器版的svn的话,本地自身带一个版本管理的。非常方便。

  3. 编辑右侧有各浏览器浏览快捷方式,更是快中快。

  官方下载地址:http://www.jetbrains.com/webstorm/download/

时间: 2024-08-03 07:18:01

web前端之html5开发中常用的开发工具的相关文章

NO.4 Android开发中常用框架及工具

android-pulltorefresh 一个强大的拉动刷新开源项目,支持各种控件下拉刷新ListView.ViewPager.WevView.ExpandableListView.GridView.(Horizontal)ScrollView.Fragment 上下左右拉动刷新,比johannilsson那个只支持ListView的强大的多.并且他实现的下拉刷新ListView在item不足一屏情况下也不会显示刷新提示,体验更好.项目地址:https://github.com/chrisba

前端开发中常用的几种图片格式及其使用规范

在介绍图片格式之前,首先说一些额外的东西. 矢量图与位图. 矢量图是通过组成图形的一些基本元素,如点.线.面,边框,填充色等信息通过计算的方式来显示图形的.一般来说矢量图表示的是几何图形,文件相对较小,并且放大缩小不会失真. 这里有一点要注意的是web开发中用到的图片都不是矢量图,即使是一个三角形,只有一个边框,都是位图. 那么矢量图在哪里有用到呢? 我目前的知识池就知道一个图标字体,比如 font-awesome 目前在前端的开发中常用的图片格式有三种:jpg,png,gif.这些都是位图.

web开发中常用的js

将自己在web开发中经常用到的一些JS总结一下. 1.修改标签和表单的值 修改标签的值: var customer = document.getElementById("custm" ).innerHTML; alert(customer); document.getElementById( "custm").innerHTML = "name" 修改控件(input)的值: var userName = document.getElementB

依赖注入及AOP简述(十)——Web开发中常用Scope简介 .

1.2.    Web开发中常用Scope简介 这里主要介绍基于Servlet的Web开发中常用的Scope. l        第一个比较常用的就是Application级Scope,通常我们会将一些贯穿整个EAR都会用到的常量定义.通用的服务组件.类似DBConnection连接创建等比较消耗资源的组件等等放到这个Scope中去.Application级Scope是与应用程序的ServletContext共存亡的,因此可以理解为所部署应用程序的ServletContext中的“单例Scope

web前端设计基础——HTML5、CSS3、JavaScript 简答题整理

web前端设计基础--HTML5.CSS3.JavaScript 简答题整理 (1)解释一下名词的含义:IP地址.URL.域名 (2)基本的web技术有哪些?web的工作原理是什么? 基本的web技术有:URL.HTTP.MIME. (3)什么是超文本?超文本与超媒体之间的关系是什么? 超文本又称超媒体,是将各种信息节点链接在一起的一种网络逻辑结构. (4)HTML5 的特点是什么? (5)web 标准有哪些?为什么采用 web 标准? web体系标准:结构标准.表现标准.行为标准. web标准

好程序员web前端分享HTML5与HTML之间有什么区别?

好程序员web前端分享HTML5与HTML之间有什么区别?很多没有学过HTML5大前端的同学,对HTML5并不了解,经常会提出疑问:HTML5与传统HTML有什么区别?今天,就为大家讲一下两者比较明显几个区别.首先,HTML5已经远远超越了标记语言的范畴,它的设计目的是在移动设备上支持多媒体,和HTML比起来,深度和广度上都做了进一步提升. 接着,我们来看一下两者的声明文件类型: HTML:1.<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01//EN"

WebApp 开发中常用的代码片段

其实这里面的多数都是 iOS 上面的代码.其他平台的就没有去验证了. HTML, 从HTML文档的开始到结束排列: <meta name=”viewport” content=”width=device-width, initial-scale=1.0″/> 让内容的宽度自适应为设备的宽度, 在做Mobile Web时必须加的一条 <meta name=”format-detection” content=”telephone=no”]]> 禁用手机号码链接(for iPhone)

Java开发中常用的IntelliJ IDEA插件

工欲善其事,必先利其器 一.Alibaba Java Coding Guidelines 代码规范插件:阿里开发的此插件应该说极大的改善程序员的代码质量,帮助程序员规范自己的代码 安装使用: 1. 打开File -> Settings -> Plugins -> Browse repositories...,输入“Alibaba Java Coding Guidelines”,查找,安装: ? 2.安装成功后,会提示重新启动一下IDEA,重启即生效! 二.RestfulToolkit 概

好程序员web前端教程分享js中的模块化一

好程序员web前端教程分享js中的模块化一:我们知道最常见的模块化方案有CommonJS.AMD.CMD.ES6,AMD规范一般用于浏览器,异步的,因为模块加载是异步的,js解释是同步的,所以有时候导致依赖还没加载完毕,同步的代码运行结束:CommonJS规范一般用于服务端,同步的,因为在服务器端所有文件都存储在本地的硬盘上,传输速率快而且稳定. 1.script标签引入 最开始的时候,多个script标签引入js文件.但是,这种弊端也很明显,很多个js文件合并起来,也是相当于一个script,