[札记]开源中最好的Web开发资源汇总2

转自： http://news.cnblogs.com/n/104563/

HTML5 视频播放器

• ★ Popcorn.js 是一个HTML5 Video框架，它提供了易于使用的API来同步交互式内容，让操作HTML5 Video元素的属性，方法和事件变得简单易用。 (来自Mozilla)
• LeanBack Player HTML5视频播放器,没有依赖任何JavaScript框架。支持全屏播放，音量控制，在同一个页面中播放多个视频。 (来自Google)
• Vid.ly 为你上传的视频提供转换功能，并且为转换后的视频创建一个短网址。通过Vid.ly，让你的视频可以在14种不同的浏览器和设备上播放，不需要再去考虑将 要浏览视频的人使用什么设备了，以避免各各软件巨头之间的利益之争带来了不兼容，给用户带来了巨大的困扰，短网址让你可以通过Twitter、 Facebook等方式方便分享视频。Vid.ly还可以通过html代码嵌入到其他网页中。Vid.ly免费帐户空间为1GB，免费帐户也没有播放或浏 览限制。

JavaScript 音频处理与可视化效果

• ★ 使用HTML5 和 Flash, SoundManager V2 只用单一API的提供了可靠，简单和强大的跨平台的音频处理。
• DSP, JavaScript的声音Digital Signal Processing
• The Radiolab Hyper Audio Player v1, 带给你 WNYC Radiolab, SoundCloud 和 Mozilla Drumbeat
• jPlayer, 一个 jQuery HTML5 音频/ 视频库，功能齐全的API

JavaScript 图形 和 3D

• ★ Processing.js是一个开放的编程语言，在不使用Flash或Java小程序的前提下, 可以实现程序图像、动画和互动的应用。其使用Web标准，无需任何插件。
• ★ Javascript 3D 引擎: ThreeJS 由 Mr Doob 开发，一个轻量级的 3D 引擎，不需要了解细节，傻瓜都能使用。这个引擎可以使用<canvas>, <svg> 和 WebGL.
• Shader Toy, 一款使用WebGL的在线着色器编辑器(2D/3D). 基于在线的应用架构使您无需下载任何软件即可开始体验. Shader Toy包含大量实用着色器, 诸如光线追踪, 场景距离渲染, 球体, 隧道, 变形, 后期处理特效等.
• PhiloGL, Sencha的PhiloGL是首个WebGL开发工具之一，提供了高水准的功能，来构建WebGL应用。Sencha创建了几个演示，来描述框架交互式3D虚拟化的能力，比如3D view of global temperature changes。
• WebGL Inspector 你就Firebug等Web调试工具一样，这个是 WebGL的调试工具。
• WebGL frameworks 由 Khronos Group 收集的一个WebGL框架列表。
• EaselJS, 一个使用html5的canvas的 JavaScript 库. Sources.
• JavaScript Game Frameworks 免费的JS游戏框架列表。另，可参看 JS游戏框架列表。
• Raphaël是一个小型的JavaScript 库，用来简化在页面上显示向量图的工作。你可以用它在页面上绘制各种图表、并进行图片的剪切、旋转等操作。参看Javascript向量图Lib�CRaphaël
• jQuery SVG 插件让你可以了 SVG canvas 进行交互。
• Google chart tools �C  参看本站的使用Google API做统计图
• Arbor.js, 是一个利用webworkers和jQuery创建的数据图形可视化JavaScript框架。它为图形组织和屏幕刷新处理提供了一个高效、力导向布局算法。

JavaScript 浏览器接口 (HTML5)

• ★ Modernizr �C 是一个专为HTML5 和CSS3 开发的功能检测类库，可以根据浏览器对HTML5 和CSS3 的支持程度提供更加便捷的前端优化方案.Sources. 一个有用的列表cross-browser Polyfills
• HTML5Shiv : 该项目的目的是为了让IE 能识别HTML5 的元素。
• Polyfills : 这个项目收集了一些代码片段其用Javascript支持不同的浏览器的特别功能，有些代码需要Flash。
• YepNopeJS : 一个异步的条件式的加载器。Sources.
• jQuery CSS3 Finalise : 是否厌倦了为每一个浏览器的CSS3属性加前缀？
• ★ Amplify.js :一套用于web应用数据管理和应用程序通讯的 jQuery 组件库。 提供简单易用的API接口。Amplify的目标是通过为各种数据源提供一个统一的程序接口简化各种格式数据的数据处理。Amplify的存储组件使用 localStorage 和 sessionStorage标准处理客户端的存储信息，对一些老的浏览器支持可能有问题。Amplify’为jQuery的ajax方法request 增加了一些额外的特性。 Sources.
• History.js 优美地支持了HTML5 History/State APIs
• Socket.IO Web的socket编程。

JavaScript 工具

• ★  {{mustaches}} 小型的 JavaScript 模板引擎。
• json:select(), CSS式的JSON选择器
• HeadJS, 异步JavaScript装载。其最大特点就是不仅可以按顺序执行还可以并发装载载js。
• JsDoc Toolkit是一款辅助工具，你只需要根据约定在JavaScript 代码中添加相应的注释，它就可以根据这些注释来自动生成API文档。
• Responsive image, 一个试验性的项目，用来处理responsive layouts 式的图片。
• UglifyJS是基于NodeJS的Javascript语法解析/压缩/格式化工具，它支持任何CommonJS模块系统的Javascript平台。
• Dhteumeuleu, 交互式的 DOM 脚本和DHTML 的开源演示。
• Backbone是 一个前端 JS 代码 MVC 框架，被著名的 37signals 用来构建他们的移动客户端。它不可取代 Jquery，不可取代现有的Template 库。而是和这些结合起来构建复杂的 web 前端交互应用。如果项目涉及大量的 javascript 代码，实现很多复杂的前端交互功能，首先你会想到把数据和展示分离。使用 Jquery 的 selector 和 callback 可以轻松做到这点。但是对于富客户端的WEB应用大量代码的结构化组织非常必要。Backbone 就提供了 javascript 代码的组织的功能。Backbone 主要包括 models, collections, views 和 events, controller 。

客户端和模拟器

• BrowserShot, 检查浏览器的兼容性，跨浏览器平器的测试
• Test everything… 输入一个你想要测试的URL……
• Android browser 模拟器
• iPhone browser 模拟器
• Opera browser 模拟器
• ★ Firebug 与 Firefox 集成，可以查看和调试你的Web页面。

CSS3 和 字库

• ★ CSS3 Maker CCS3的生成器
• 容易地创建 CSS3 animations。 Sencha Animator 是一个桌面应用可以为WebKit浏览器和触摸式移动设备创建 CSS3 animations 。
• CSSwarp �C CSS 文本扭曲生成器
• Gradient Editor, 一个强大的Photoshop式的CSS 渐变编译器。来自 ColorZilla
• ★ Google Web Fonts 通过Google Web Fonts API 可以浏览所有的字体
• @font-face Kit Generator, 为Web转换字体
• Typetester, 比较字体。
• Media Queries. 一组 responsive web 设计。
• Pattern TAP, UI组件。

Website (FULL) 模板

• ★ HTML5 Boilerplate 是一个HTML5 / CSS / js模板，是实现跨浏览器正常化、性能优化，稳定的可选功能如跨域Ajax和Flash的最佳实践。 项目的开发商称之为技巧集合，目的是满足您开发一个跨浏览器，并且面向未来的网站的需求。 Sources.
• HTML5 starter pack 是一个干净的和有组织的目录结构，其可适合很多项目，还有一些很常用的文件，以及简单的Photoshop设计模板。
• ★ Initializr 是一个HTML5 模板生成器，其可以帮你在15秒内创建一个HTML5的项目。
• Animated Portfolio Gallery （教程）
• Slick MobileApp Website 如果通过 jQuery 和 CSS 制作一个手机应用的网站。
• RSS Reader 如果通过 jQuery Mobile 创建一个RSS Reader
• ★ Single Page Applications 使用jQuery的朋友们 (Backbone, Underscore, …)创建单一页面。
• Google TV Optimized Templates, 传统电视已经开始和网路融合，但现阶段产业仍然正在摸索之中，为此将来的网页亦会有结构上的改变。Google TV Optimized Templates是 一个用HTML/JavaScript制成的开源软体，一如其名是一个对Google TV作出了最佳化的的网页范本，其特色是以遥控器作为操作的前提，令使用者无需输入任何文字就可以进行控制。未来除了会有专用遥控器外，还会采用智能手机 透过W-iFi控制Google TV的方法。Optimized Templates的界面中左方会展示分类，右方会显示该分类下的影片截图，影片播放、切换、全画面表示都可透过键盘上的方向键、Backspace或 Enter等键完成，方便今后的网站开发人员借镜。HTML5 版的模板使用了 Google TV UI library, jQuery  和 Closure 。