互动中国分享: 21款HTML5 开发框架和开发工具

标签: tools HTML5 互动中国分享 Archives 设计工具 | 发表时间:2013-09-25 01:30 | 作者:Joy Li
出处:http://www.damndigital.com

damndigital_21-useful-html5-tools-for-designers-&-developers_cover_2013-09

HTML5 在不同的领域让网页设计更强大的。快速,安全,响应式,互动和美丽,这些优点吸引更多的 Web 开发人员使用 HTML5。HTML5 有许多新的特性功能,允许开发人员和设计师创建应用程序和网站,带给用户桌面应用程序的速度,性能和体验。接下来的这些21款优秀的 HTML5 框架和开发工具可以帮助你开发项目更快,更容易。

原文: GDJ
来源: 梦想天空

Sonic

damndigital_21-useful-html5-tools-for-designers-&-developers_sonic

下载URL:  https://github.com/padolsey/sonic.js

Sonic 是一个很小的 JavaScript 类,用于创建基于 HTML5 画布的加载图像。更强大的是提供了基于现成的例子的创建工具,可以帮助你实现更多自定义的加载动画效果

在线演示

Chart.js

damndigital_21-useful-html5-tools-for-designers-&-developers_chart

下载URL:  https://github.com/nnnick/Chart.js

Chart.js 是面向对象的 JavaScript 图表库,使用 HTML5 画布实现漂亮的图表。它目前支持6个图表类型(线图,条形图,雷达图,饼图,柱状图和极区)。

在线演示

RazorFlow

damndigital_21-useful-html5-tools-for-designers-&-developers_razor-flow

下载URL:  http://razorflow.com/download/

RazorFlow 是一个 PHP 框架,用于快速,方便地创建能够在所有主流的移动设备和浏览器的响应式 HTML5 仪表板。它的工作原理简单,只需要插入一个单一的 PHP 文件到任何应用程序,喂给它的数据,选择输出类型就可以了。它可以与 MySQL 和 PostgreSQL 或 SQLite 数据库结合使用。

在线演示 

Zebra

damndigital_21-useful-html5-tools-for-designers-&-developers_zebra

下载URL:  https://github.com/barmalei/zebra

Zebra 是一个 JavaScript 库,带有丰富​​的用户界面组件,可以创建类似桌面风格的布局。UI 元素使用 HTML5 画布创建 ,在现代的浏览器上将有相同的呈现效果。

在线演示

Native

damndigital_21-useful-html5-tools-for-designers-&-developers_native

下载URL: https://github.com/justspamjustin/junior

Junior 是一个 HTML5 框架,用于创建类似原生风格的移动应用程序。非常易于使用,并且有详细的帮助文档和例子。 它使用 CSS3 过渡实现圆滑的动画效果,支持滑动的旋转木马,并包括各种 UI 组件。

在线演示

Radi

damndigital_21-useful-html5-tools-for-designers-&-developers_radi

下载URL:  http://radiapp.com/download/

Radi 是一个超棒的视觉设计应用程序,它具有内置工具用于创建和编辑图形(也可以导入)并使用canvas元素实现生成动画。

在线演示

HTML5 Bones

damndigital_21-useful-html5-tools-for-designers-&-developers_html5-bones

下载URL:  https://github.com/iandevlin/html5bones

HTML5 Bones 是一个 HTML5 网站的样板,包括最需要的东西(normalize.css,html5shiv 等)。

在线演示

Literally Canvas

damndigital_21-useful-html5-tools-for-designers-&-developers_literally-canvas

下载URL:  https://github.com/literallycanvas/literallycanvas

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

在线演示

Gauge.js

damndigital_21-useful-html5-tools-for-designers-&-developers_gauge

下载URL:  https://github.com/bernii/gauge.js

Gauge.js 是一个漂亮的脚本,用于在 HTML5 画布中使用 JavaScript(或者 CoffeeScript)创建动画压力表。

在线演示

WYSIHTML5

damndigital_21-useful-html5-tools-for-designers-&-developers_WYSIHTML5

下载URL:  https://github.com/xing/wysihtml5

WYSIHTML5 是一个开源的富文本编辑器,不依赖于任何 JavaScript 框架,轻量,快速。并提供了主要的文本编辑功能,包括文本样式(粗体,斜体),列表,标题,插入图像或链接和文本着色等。

在线演示

HTML5 Sortable

damndigital_21-useful-html5-tools-for-designers-&-developers_html5-sortable

下载URL:  https://github.com/farhadi/html5sortable

HTML5 Sortable 是一个轻量级排序插件,使用原生的 HTML5 拖放 API 创建排序列表和网格。

在线演示

Percentage Loader

damndigital_21-useful-html5-tools-for-designers-&-developers_percentage-loader

下载URL:  https://bitbucket.org/Better2Web/jquery.percentageloader

Percentage Loader 是一个 jQuery 插件, 利用 HTML5 Canvas 创造漂亮的加载效果。 压缩后只有 10kb,也可以用来作为一个拖放支持的控制器(例如一个圆形的音量按钮),它还支持在同一个页面显示多个实例。

在线演示

jQuery HTML5 Uploader

damndigital_21-useful-html5-tools-for-designers-&-developers_jquery-html5-uploader

下载URL:  http://www.igloolab.com/download.htm?path=jquery-html5-uploader/jQuery-HTML5-Uploader-1.0b.zip

jQuery HTML5 Uploader 是一个轻量级的 jQuery 插件,可以让你快速把上传功能添加到你的 Web 应用程序中。你只需要创建一个Dropbox的元素 (即一个div),剩下的事情交给 jQuery HTML5 Uploader 就可以了。然后你可以拖动一个或多个文件,文件将被上传。

在线演示

Audio5js

damndigital_21-useful-html5-tools-for-designers-&-developers_audio5js

下载URL:  https://github.com/zohararad/audio5js

HTML5 音频真棒,很容易实现,性能也很好。唯一能阻止你使用的可能就是旧版浏览器不支持。Audio5js 是一个轻量级的 JavaScript 库 ,很好地解决了这一兼容性问题。

在线演示 

Fabric.js

damndigital_21-useful-html5-tools-for-designers-&-developers_fabric

下载URL:  https://github.com/kangax/fabric.js

Fabric.js 是一个 HTML5 Canvas 编码框架,提供创建对象和操纵的方法,该框架还可以使用 SVG-to-Canvas 解析器 。

在线演示 

D3-Cloud

damndigital_21-useful-html5-tools-for-designers-&-developers_d3-cloud

下载URL: https://github.com/jasondavies/d3-cloud

D3-Cloud 是一个美丽的和开源的字符云实现,和 Wordle.com 有点类似。 它是建立在 D3.js 库基础上,使用 HTML5 Canvas 绘制的输出,以异步方式工作,性能良好。

在线演示

cgSceneGraph

damndigital_21-useful-html5-tools-for-designers-&-developers_cgscene-graph

下载URL:  https://github.com/GwennaelBuchet/cgSceneGraph

cgSceneGraph 是一个面向对象的,易于使用的 JavaScript 动画框架,建立在 HTML5 Cnavas 基础之上。它致力于建立专业应用程序和游戏,跨浏览器,有很多内置的功能,如图像,文字,按钮,形状等。

在线演示 

HTML5 File Uploads with jQuery

damndigital_21-useful-html5-tools-for-designers-&-developers_html5-file-uploads-with-jquery

下载URL:  http://demo.tutorialzine.com/2011/09/html5-file-upload-jquery-php/html5-file-upload.zip

这是另一个基于 jQuery 和 HTML5 拖放功能的文件上传插件。允许人们把要上传的照片拖放到浏览器窗口,实现自动上传。

在线演示

Howler.js

damndigital_21-useful-html5-tools-for-designers-&-developers_howler

下载URL:  https://github.com/goldfire/howler.js

Howler.js 是一个与网络音频 API 集成的 JavaScript 库,它在默认情况下在不支持的时候降级到 HTML5 音频,它接受多种文件格式,用于跨浏览器兼容。

在线演示

Font Dragr

damndigital_21-useful-html5-tools-for-designers-&-developers_font-dragr

下载URL:  http://fontdragr.com/

一种革命性的方式在浏览器中测试自定义字体。没有编码,没有上传,只需拖放。作为一名设计师,选择一个体面的字体是一个艰难的过程!使用这个很棒的字体书签,立即查看任何一个新的字体,不改变任何 HTML 或 CSS 网页 。

在线演示

Native Form Elements

damndigital_21-useful-html5-tools-for-designers-&-developers_native-form-elements

下载URL: http://nativeformelements.com/

HTML 表单元素的外观和行为在每个浏览器略有不同。为了找出差异,更容易测试,这个网站可以帮助到你。它列出了所有的表单元素, 包括所有的 HTML5 元素和其无效状态。

在线演示

相关 [中国 html5 开发] 推荐:

互动中国分享: 21款HTML5 开发框架和开发工具

- - DamnDigital
HTML5 在不同的领域让网页设计更强大的. 快速,安全,响应式,互动和美丽,这些优点吸引更多的 Web 开发人员使用 HTML5. HTML5 有许多新的特性功能,允许开发人员和设计师创建应用程序和网站,带给用户桌面应用程序的速度,性能和体验. 接下来的这些21款优秀的 HTML5 框架和开发工具可以帮助你开发项目更快,更容易.

Adobe、标准和HTML5 -HTML5 and CSS3 开发

- - HTML5研究小组
“[提供商之间的]最激烈的竞争将与 标准密切相关. 大部分聪明人的眼睛将紧盯着技术标准. 但在计算机行业,新标准既可能是无限财富的源泉,也可能导致企业帝国的毁灭. 尽管存在着如此多的风险,标准仍然点燃了无限激情”. —The Economist, 1993年2月23日. 在编写这段有关标准化的话时,计算领域的主要争议是Unix是否是一个可行的操作系统(以及是否为IBM、DEC和HP的更多专用操作系统带来了挑战),以及哪个视窗平台(SUN/AT&T还是IBM/DEC/HP)将成为标准.

HTML5历史与开发介绍-HTML5 入门教程

- - BlogJava_首页
HTML的发展历史和HTML5的诞生. HTML 5是近十年来Web开发标准最巨大的飞跃. 和以前的版本不同,HTML 5并非仅仅用来表示Web内容,它的新使命是将Web带入一个成熟的应用平台,在HTML 5平台上,视频,音频,图象,动画,以及同电脑的交互都被标准化. (HTML5也有了自己的logo).

HTML5 Canvas开发框架:CasualJS Framework

- Jimmy - ITeye论坛最新讨论
CasualJS Framework是根据ActionScript3?.0的架构开发的一套适用于HTML5 Canvas的面向对象的开发框架. 虽然Canvas提供了强大的绘图功能,但满足不了高级开发的需要. 利用CasualJS的显示对象架构及渲染机制,你可以轻松的在Canvas中操控各种位图、图形、影片剪辑等显示对象.

HTML5游戏开发工具推荐:IMPACT

- iDesperadO - HTML5研究小组
Impact 是一个 JavaScript 游戏引擎,可以为桌面和手机浏览器开发令人惊叹的 HTML5 游戏. 我已经试过了四个其他 JavaScript 游戏引擎,这是我用过的第一个比较有意义的(……)Impact 是市场上第一个真正专业级的 JavaScript 和 HTML5 游戏引擎. ——《Game Developer Magazine》,2011年5月.

jQuery Mobile开发HTML5移动应用

- - HTML5研究小组
随着移动互联世界的到来,目前已发展到多种移动 操作系统割据的局面,而开发者则急需要能运用原有的开发知识和技能,快速方便地构建移动应用程序,并期望能运行在不同的 手机操作平台上,比如Android,iOS,黑莓等. 而目前,出现了一批十分优秀的支持HTML5/CSS3的移动应用开发框架,其中最为大家熟悉的是jQuery Mobile框架(http:// jquerymobile.com),它可以让熟悉jQuery框架的开发者快速开发出基于HTML5的移动应用,而且直接通过 手机的浏览器即可浏览.

IBM收购HTML5应用开发商WorkLight

- - HTML5研究小组
北京时间1月31日晚间消息,IBM今日宣布,将收购以色列移动应用开发商WorkLight. WorkLight可帮助企业开发和传播HTML5、混合( hybrid)及本地应用,在确保完美的用户体验的前提下,极大地缩减上市时间、成本和复杂性. Worklight客户涵盖各个领域,金融、零售和保健等. 例如,Worklight可帮助一家银行开发一项应用,确保用户安全地访问其账户、支付账单和管理投资等,无论用户使用何种设备.

Phonegap + HTML5 开发经验小结

- - Miller
        去年曾对 Phonegap做过一次调研,当时还是1.1版本,印象也一般. 对他的性能以及真实的跨平台能力都不太确定. 今年过完春节至今正好有机会参与了一个纯Phonegap + HTML5开发的项目,项目至今已经完成了一期的App Store提交,所以也正好能抽时间来小结一下. 一个月左右的开发过程让我对这种开发模式有了更深的认识,这对于前端开发人员而言绝对是一个大的机会.

HTML5开发:原理与实现

- - Web App Trend
在这篇文章中, W3C 浏览器技术核心标准工作成员 Mike Smith 谈论了 HTML5 到底是什么,并给出了一些对开发人员有用的资源,可以让他们跟进不断演化的标准. 我们正处于Web平台更新换代的过程之中. HTML5通常被用来描述这一过程,尽管更新换代中的技术并不局限于HTML5标准所定义的特性.

HTML5开发工具大盘点

- - CSS库
相信到目前你应该已经对Canvas这一神奇的HTML5新元素有了一定的了解. 在本文中,我们将深入了解画布的功能及特点,学习如何在HTML中利用Canvas绘制图形以及其它类型对象. 正准备学习HTML5或者已经进行了一段时间的HTML5开发的童鞋,都有必要了解下,HTML5都有哪些开发工具,哪款开发工具更适合我?下面就一一盘点下:   一、HTML5开发工具之Adobe Dreamweaver.