开发人员和设计师工具箱中一定要有的的29个最好的html5工具

Tags: html5

我们为设计师和开发人员精心挑选了29个有用和最好的HTML5工具。这些HTML5工具,不但可以节省您的时间,而且还可以提高你的生产力。

HTML5是万维网(World Wide Web)使用的结构化标记语言。这些HTML5工具是了解HTML5和学习HTML5最好的方式。同时HTML5工具有助于轻松创建和管理代码。今天,我们精心挑选了29个有用和最好的HTML5工具,相信它们可以在你下一个项目上派上用场。

1、JS CAPTURE

JSCapture 是用纯 JavaScript 和 HTML5 实现的屏幕捕捉库。它可以让从您的浏览器中截图和记录在桌面的视频。

JSCapture


2、Onsen UI

Onsen UI是一种基于自定义元素HTML5 UI框架,它的设计和实现为你的应用程序提供了前所未有的用户体验。觉得html5模拟的本地化应用非常慢?那么尝试下Onse UI,你会有不一样的感觉。OnSen UI是一个前端开发框架,适合PhoneGap/Cordova混合应用的开发。而且,可与Monaca一起使用,可以很简单地开发后端特性和添加设备支持。OnSen UI自身使用Angular.js和Topcoat开发,由于其架构特性,可以便捷的使用Angular.js的特性。

A Custom Elements Based HTML5 UI Framework Onsen UI It is designed and implemented to deliver unprecedented user experience for your apps.
Frustrated with the lack of native-like performance? Try Onsen UI and you’ll feel the difference right away.

Onsen UI

 

3、ANIMATRON

Animatrion是HTML5工具可以无需编码创建令人惊叹的动画。

Animatrion is html5 tools to create stunning animation without coding.

Animatron

4、MOZILLA

BorwserQuest一款html5开发的在线多人游戏。

MOZILLA

5、Purple Motion

Purple Motion

6、MIXEEK

Mixeek是一个免费的软件工具,用于设计和执行的Web动画和交互动画Web应用程序。它是基于JavaScript,CSS3和HTML5,开发目标是提供轻量的,易于使用的动画软件工具。

Mixeek   Free HTML5 animation tool


7、HTML 5 MAKER

 HTML5 Maker 是一个在线动画制作工具,帮助你使用 HTML,CSS 和 JavaScript 创建动态,互动的内容。它非常容易使用,同时可以帮你实现非常好的效果。它可以制作跨浏览器的动画内容,如 JavaScript 和 HTML5 动画,幻灯片,简报等等。
  动画可以很容易地集成到现有的网站,添加一个有趣的或专业的外观。HTML5 Maker 是一个基于订阅的服务,他们提供免费的认购。此外,你甚至都不需要注册就能使用该服务。点击创建动画按钮,开始你的项目吧。

HTML5 Animation   Free Banner Maker   Create Free Banner

8、CROSS WALK

Crosswalk采用Chromium内核并不断地快速演进(六周一次更新),使基于Crosswalk的Web应用充分享有Chromium的功能与性能优势,以及较好的平台一致性。同时,Crosswalk支持最新的HTML5 API,包括WebGL,WebAudio,WebRTC,Gamepad,WebSocket等等。目前Crosswalk正式支持的移动操作系统包括Android和Tizen,在Android 4.0及以上的系统中使用Crosswalk的Web应用程序在HTML5方面可以有一致的体验,同时和系统的整合交互方面(比如启动画面、权限管理、应用切换、社交分享等等)可以做到类似原生应用。现在Crosswalk已经成为众多知名HTML5平台和应用的推荐引擎,包括Google Mobile Chrome App、Intel XDK、Famo.us和Construct2等等,未来的Cordova 4.0也计划集成Crosswalk。同时在今年的中国iWeb大会上,Cocos2d-html5游戏引擎也宣布与Crosswalk展开合作。

Crosswalk

9、INITIALIZR

根据Initializr网站的介绍,其依托全球知名的HTML5预设模版HTML5 Boilerplate搭建而成,然后对其加工为用户提供了更简单的创建HTML5页面的方法。对于普通用户而言,操作非常简单,基本只要根据Initializr网站的指引即可:下载Initializr开发包,修改一些个性化的内容,包括页面的名称、Meta描述、Favicons等,然后即可生成一个简单的HTML5页面。用户可以下载这个页面,包括基本的CSS文件、javascript等。

Initializr is an HTML5 tools templates generator to help you getting started with a new project based on HTML5 Boilerplate. It generates for you a clean customizable template with just what you need to start!

Initializr

10、Edge Animate

Edge Animate是Adobe最新出品的制作HTML5动画的可视化工具,简单的可以理解为HTML5版本的Flash Pro。

Edge Animate lets web designers create interactive HTML animations for web, digital publishing, rich media advertising and more, reaching both desktop and mobile with ease.

Edge Animate CC

11、99 LIME

99Lime的用户界面元素使用你的PS图象处理软件设计,包括基础按钮设计,文本框表单设计,多彩按钮设计,自定义多选单选文本框,文本框输入状态,网页常见的滑块设计,loading进度条设计,超过99个简约按钮设计,树形菜单设计等。

99 LIME

12、HTML 5 PLEASE

HTML5 Please 整理了各种新的 HTML5 与 CSS 语法在各种浏览器上的兼容性状况,并提供使用上的建议。
在开发网页的应用程序时,开发者所撰写的 HTML5 或 CSS 代码通常都要面对许多不同浏览器的兼容性问题,而 HTML5 Please 是一个可以查询各种 HTML5 与 CSS 的语法在各种浏览器中被支持的状况,并且建议你是否应该使用,你可以依据哪一些浏览器支持哪一些语法来选择要使用的语法。网站已支持目前主流的浏览器以及版本,其中IE包含IE7 -IE10。

HTML5 Please

13、SPRITEBOX

Spritebox是一个所见即所得的工具,以帮助网页设计师从一个单一的sprite快速轻松地创建CSS类。它是基于使用背景位置属性对齐到网页中的块元素的子画面图像的区域的原则。它是使用的jQuery,CSS3和HTML5的组合,完全免费使用

Spritebox

14、HTML 5 TEST

你浏览器准备好迎接 HTML5 革命了吗?HTML5 Test 将告诉你。这个网站会为你当前使用的浏览器生成一份对Video、audio、Canvas等等特性的支持情况的完整报告。

HTML5test

15、INK

InK是一个能够帮助你快速开发web界面的界面套件,使用简单并且可扩展。使用了HTML/CSS/Javascript技术来设置布局,展示常用的界面元素,并且实现互动的特性,所有这些都是以内容为中心的,并且对于用户,开发人员和设计师来说都非常友好。

Ink is html5 tool that quickly crete responsive html emails that works on any devices.

Ink

16、GOOGLE WEB DESIGNER

Google Web Designer是Google最近发布的一款免费Web网页设计工具,主要用于创建基于HTML5和CSS3的网页或交互式动画,设计出的网页动画无需Flash支持,能适应任何平台与设备,不用考虑兼容性问题

Google Web Designer

17、FRAMEWORK 7

Framework7 或者叫 F7 是全功能的绑定 iOS 7 应用的 HTML 框架。Framework7 是免费开源的 HTML 移动端框架,用来开发混合移动端应用或者 iOS 7 的 Web 应用,并且带有 iOS 7 的原生外观和感觉。Framework7 也是独立的原型应用工具。
Framework7 使用 Javascript,CSS 和 HTML 来创建 iOS 7 应用,支持多个平台的迁移(PhoneGap),但是不是支持所有平台,主要还是针对 iOS 7。

Framework7

18、CUT JS

CutJS轻量、快速、交互性支持跨平台游戏开发的2D HTML5渲染引擎,它可以用来创建面向网站、iOS、安卓、Win8、facebook、Chrome web store等的在线游戏。

CutJS is lightweight, fast, interactable 2D HTML5 rendering engine for cross-platform game development, it can be used for creating games for web, iOS, Android, Win8, Facebook, Chrome Web Store, etc.

CutJS

19、Puzzle script

PuzzleScript是一个开源的HTML5的益智游戏引擎。

PuzzleScript

20、CLOAK

Cloak是一个基于Node.js的专门为HTML5网络游戏定制的开源JS库。它不仅适用于单人游戏,同时也适用于多人游戏。Cloak内置了许多对于网络游戏非常有用的功能,例如:

  • 自动用户识别以及重连接

  • 大厅系统

  • 房间系统

  • 补偿网络延迟的计时器

Cloak

21、RAZORFLOW

RazorFlow是一个PHP框架,能轻松创建出用于主要设备和浏览器的显示面板。它的工作原理是把单一PHP文件简单的插入到任何程序中,然后输入数据,选择输出类型。输出来的,可以是图表(支持多种类型的图表),数据网格或者单一数值的内容。

RazorFlow

22、MUGEDA

Mugeda是一款基于云计算的可视化HTML5专业动画制作平台,无需任何下载安装,无需任何编程,用户可以直接通过浏览器界面用所见即所得的方式制作专业质量的动画,支持事件、行为、API等多种交互方式。Mugeda采用原生HTML5技术,完成的动画可以部署到任何支持HTML5的客户端,包括PC,智能手机,平板电脑以及智能电视等,是快速方便的制作移动富媒体广告的理想工具。

Mugeda

23、CREATE

CreateJS 是一套可以构建丰富交互体验的 HTML5 游戏的开源工具包,旨在降低 HTML5 项目的开发难度和成本,让开发者以熟悉的方式打造更具现代感的网络交互体验。CreateJS 中包含五款工具:

  • EaselJS:用于 Sprites、动画、向量和位图的绘制,创建 HTML5 Canvas 上的交互体验(包含多点触控),同时提供 Flash 中的“显示列表”功能。

  • TweenJS:一个简单的用于制作类似 Flash 中“补间动画”的引擎,可生成数字或非数字的连续变化效果。

  • SoundJS:一个音频播放引擎,能够根据浏览器性能选择音频播放方式。将音频文件作为模块,可随时加载和卸载。

  • PrloadJS:帮助你简化网站资源预加载工作,无论加载内容是图形、视频、声音、JS、数据……

  • PxLoadr: 一款用于网站资源预加载的 JavaScript 库,可加载图片、音频等任何类型的文件。PxLoader 除了可以帮你对资源加载的进度进行监测,捕捉“加载完成”事件外,还可以帮你指定资源加载的顺序。你甚至还可以按照优先级分组加载资源。

Create.js   Make anything editable

24、TUMULT

Tumult Hype是基于关键帧的动画系统让你内容可以运动起来。点击“记录”Tumult Hype会监视你的动作并根据需要自动创建关键帧,或者如果你需要进行编辑,可以手动添加、删除和重新安排关键帧来微调您的动画。这是很容易通过点击和拖动元素的运动路径来添加贝塞尔控制点来创造自然的曲线。

Using Tumult Hype, you can create beautiful HTML5 web content. Interactive content and animations made with Tumult Hype work on desktops, smartphones and iPads. No coding required.

Tumult Hype

25、SENCHA

Sencha Animator是一种基于GUI的编辑器,针对的是想要创建HTML5动画的交互设计师。 动画是使用Ext JS创建的,这是一种跨浏览器的JavaScript库,为RIA应用程序提供了widget,并且它会生成能够与所有JS库协作的纯粹的CSS3动画代码。 我们可以创建2D或者3D的对象,然后对其进行移动、伸缩,倾斜和旋转,并且添加像渐变色、模糊、反射和阴影之类的特效。 代码能够在Apple iOS上进行硬件加速,以创建平滑的动画。

Sencha Animator is a desktop app to create CSS3 animations for WebKit browsers and touchscreen mobile devices. Create rich experiences for today’s most popular devices.

Sencha Animator

26、STITCHES

一个 HTML5 Sprite Sheet 生成器。拖放图片文件至指定区域,然后点击“生成”就能创建sprite sheet 和样式表。这个示例用到了一组HTML5 APIs,当前只支持最新版的 Chrome 和 Firefox 浏览器。

Stitches

27、SHAREDROP

hareDrop是苹果AirDrop服务的HTML5克隆。它允许你在设备之间直接传输文件,而无需先将它们上传到任何服务器上。它采用WebRTC实现安全对等网络文件传输和Firebase实现存在管理和WebRTC信号。

ShareDrop is a free app that allows you to easily and securely share files directly between devices without having to upload them to any server first.

ShareDrop

28、LITERALLY CANVAS

Literally Canvas 是一个开源的HTML5组件,可以集成到任何页面中,让用户可以在线画图。它配备了一组简单的工具,包括绘制,擦除,颜色选择器,撤消,重做,平移和缩放。

Literally Canvas

29、moqups

 Moqups 是一款HTML5在线的WEB框架、模型、UI设计并创建的网络应用程序。

Moqups is an HTML5 tools for designers to create wireframes for web & mobile.

screenshot_1070

本文链接:http://www.4byte.cn/learning/120017/kai-fa-ren-yuan-he-she-ji-shi-gong-ju-xiang-zhong-yi-ding-yao-you-de-de-29-ge-zui-hao-de-html5-gong-ju.html



相关文章