必威-必威-欢迎您

必威,必威官网企业自成立以来,以策略先行,经营致胜,管理为本的商,业推广理念,一步一个脚印发展成为同类企业中经营范围最广,在行业内颇具影响力的企业。

整理汇总的有关Web开发的资源和目录,这些网站

2019-11-29 04:41 来源:未知

2011年回顾:改变游戏的20个HTML5网站

2011/12/23 · HTML5 · HTML5

英文原文:2011 in review: 20 HTML5 sites that changed the game,编译:webapptrend

今年HTML5确实给我们带来了很大的冲击。HTML5 Doctors,Oli Studholme评选出了20个最佳网站,它们涵盖了语义、音频、客户端web apps、canvas以及SVG和WebGL,这些网站预示了未来web的发展方向。

对HTML5和web来说,今年是收获丰富的一年。HTML5在不断成熟,今年5月HTML5进入了Last Call阶段,并计划在2014年完成标准制定。WHATWG不仅大力提升了HTML5现有的功能,还加入了诸如WebVTT这样的一些新功能。在浏览器上的进展也在逐步推进,目前正与五大提供商积极推进相关工作。还有很多的工作需要去做!

在内容方面,你能深切感受到这一年似乎真的就是HTML5的一年,CSS3和JavaScript web stack的时代已经到来。HTML5现在已经成为许多开发者的首选,有关HTML5新功能的探索工作也在积极展开。下面列举了一些特别突出的HTML5网站。其中许多网站会让人惊呼“这根本不可能在native web上实现”。

图片 1

JavaScript 移动和触摸框架

jQuery Mobile: 是jQuery 在手机上和平板设备上的版本。jQuery Mobile 不仅会给主流移动平台带来jQuery核心库,而且会发布一个完整统一的jQuery移动UI框架。支持全球主流的移动平台。jQuery Mobile开发团队说:能开发这个项目,我们非常兴奋。移动Web太需要一个跨浏览器的框架,让开发人员开发出真正的移动Web网站。我们将尽全力去满足这样的需求。Sources.

Zepto.jsZepto.js 是支持移动WebKit浏览器的JavaScript框架,具有与jQuery兼容的语法。2-5k的库,通过不错的API处理绝大多数的基本工作。Sources.

MicroJS: Microjs网站应用列出了很多轻量的Javascript类库和框架,它们都很小,大部分小于5kb。这样你不需要因为只需要一个功能就要加载一个JS的框架。

PhoneGap:是一款开源的手机应用开发平台,它仅仅只用HTML和JavaScript语言就可以制作出能在多个移动设备上运行的应用。Sources.

Sencha TouchSencha Touch 是一个支持多种智能手机平台(iPhone, Android, 和BlackBerry)的 HTML5 框架。Sencha Touch可以让你的Web App看起来像Native App。美丽的用户界面组件和丰富的数据管理,全部基于最新的HTML5和CSS3的 WEB标准,全面兼容Android和Apple iOS设备。

JQtouch, 是一个jQuery 的插件,主要用于手机上的Webkit 浏览器上实现一些包括动画、列表导航、默认应用样式等各种常见UI效果的JavaScript 库。Sources.

DHTMLX Touch针对移动和触摸设备的JavaScript 框架。DHTMLX Touch基于HTML5,创建移动web应用。它不只是一组UI 小工具,而是一个完整的框架,可以针对移动和触摸设备创建跨平台的web应用。它兼容主流的web浏览器,用DHTMLX Touch创建的应用,可以在iPad、iPhone、Android智能手机等上面运行流畅。

 

jQuery 插件

Waypoints是一个jQuery 用来实现捕获各种滚动事件的插件,例如实现无翻页的内容浏览,或者固定某个元素不让滚动等等。支持主流浏览器版本。

Lazy loader插件可以实现图片的延迟加载,当网页比较长的时候,会先只加载用户视窗内的图片,视窗外的图片会等到你拖动滚动条至后面才加载,这样有效的避免了因图片过多而加载慢的弊端。

TweenJS: 一个简单和强大的 tweening / animation 的Javascript库。

Easings类Css3的jQuery 动画插件

Spritely这个插件可以创建出如flash一样的动画效果,比如:在页面上有一只飞动的小鸟,一个动态滚动的背景等。

File Upload,jQuery 文件上传插件4.4.1

Slideshow/Carousel插件.Sources.

Supersized– 全屏式的背景/幻灯片插件

Masonryi一款非常酷的自动排版插件,这款jQuery工具可以根据网格来自动排列水平和垂直元素,超越原来的css.Sources.

jQuery 简单Layout演示,管理各种边栏式,可改变大小式的布局。

Flexigrid– jQuery数据表插件

Isotope绝对是一个令人难以置信的jQuery插件,你可以用它来创建动态和智能布局。你可以隐藏和显示与过滤项目,重新排序和整理甚至更多。

Super GesturesjQuery 插件可以实现鼠标手势的功能。

MouseWheel是由Brandon Aaron开发的jQuery插件,用于添加跨浏览器的鼠标滚轮支持。

AutoSuggestjQuery 插件可以让你添加一些自动完成的功能。

qTip一个漂亮的jQuery的工具提示插件,这个插件功能相当强大。

jQueryCharts and graphic用来制作图表。

jQuery Tools– Themissing UI library

 

 

HTML5 视频播放器

Popcorn.js是一个HTML5 Video框架,它提供了易于使用的API来同步交互式内容,让操作HTML5 Video元素的属性,方法和事件变得简单易用。 (来自Mozilla)

LeanBack PlayerHTML5视频播放器,没有依赖任何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 RadiolabHyper Audio Playerv1, 带给你 WNYC Radiolab, SoundCloud 和 Mozilla Drumbeat

jPlayer, 一个 jQuery HTML5 音频/ 视频库,功能齐全的API

 

JavaScript 图形 和 3D

Processing.js是一个开放的编程语言,在不使用Flash或Java小程序的前提下, 可以实现程序图像、动画和互动的应用。其使用Web标准,无需任何插件。

Javascript 3D 引擎:ThreeJS由 Mr Doob 开发,一个轻量级的 3D 引擎,不需要了解细节,傻瓜都能使用。这个引擎可以使用

,

和 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–Rapha?l

jQuery SVG插件让你可以了 SVG canvas 进行交互。

Google chart tools– 参看本站的使用Google API做统计图

Arbor.js,是一个利用webworkers和jQuery创建的数据图形可视化JavaScript框架。它为图形组织和屏幕刷新处理提供了一个高效、力导向布局算法。

 

JavaScript 浏览器接口 (HTML5)

Modernizr– 是一个专为HTML5 和CSS3 开发的功能检测类库,可以根据浏览器对HTML5 和CSS3 的支持程度提供更加便捷的前端优化方案.Sources. 一个有用的列表cross-browser Polyfills

HTML5Shiv: 该项目的目的是为了让IE 能识别HTML5 的元素。

Polyfills: 这个项目收集了一些代码片段其用Javascript支持不同的浏览器的特别功能,有些代码需要Flash。

YepNopeJS: 一个异步的条件式的加载器。Sources.

jQueryCSS3 Finalise: 是否厌倦了为每一个浏览器的CSS3属性加前缀?

Amplify.js:一套用于web应用数据管理和应用程序通讯的jQuery 组件库。提供简单易用的API接口。Amplify的目标是通过为各种数据源提供一个统一的程序接口简化各种格式数据的数据处理。Amplify的存储组件使用localStorage 和 sessionStorage标准处理客户端的存储信息,对一些老的浏览器支持可能有问题。Amplify’为jQuery的ajax方法request增加了一些额外的特性。Sources.

History.js优美地支持了HTML5 History/State APIs

Socket.IOWeb的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 MakerCCS3的生成器容易地创建

CSS3 animations。Sencha Animator 是一个桌面应用可以为WebKit浏览器和触摸式移动设备创建 CSS3 animations 。

CSSwarp– 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, …)创建单一页面。

移动和触摸框架 jQuery Mobile: 是jQuery 在手机上和平板设备上的版本。jQuery Mobile 不仅会给主流移动平台带来jQuery核心库,而且会发布...

开源中最好的Web开发资源汇总

法国Web开发人员 Julien Guézennec 整理汇总的有关Web开发的资源和目录,由陈皓翻译。

学习HTML 5编程和设计

  • HTML5 Rocks : Major Feature Groups 的学习 HTML5 的资源 (HTML5 演示, 教程 ). 源码
  • 很不错的 HTML5 Dashboard – Mozilla,效果很炫。
  • WhatWG Developers, 一个清楚的 HTML5 技术规格说明书。
  • ★ StackOverflow : 大名鼎鼎的技术问答式论坛。
  • ★ Addyosmani, jQuery 和 JavaScript 文章教程
  • Sohtanaka, jQuery 和 JavaScript 文章和教程
  • ★ Nettuts+ 是一个面对Web开发人员和设计人员的网站,提供各种技术教程和文章,覆盖 HTML, CSS, Javascript, CMS’s, PHP 和 Ruby on Rails.
  • Codrops, 教程和 web 资源
  • WebAppers, 最好的开源资源
  • Tutorialzine – PHP MySQL jQuery CSS 教程, 资源和赠品
  • Mozilla JavaScript guide
  • codes snippets, 作者自己收集的一些代码片段

服务器端的软件

图片 2

  • ★ Node.js 是服务器端的 JavaScript 环境,其使用了异步事件驱动模式。其让Node.js在很多互联网应用体系结构下获得非常不错的性能。 源码 和 实时演示。
  • PhantomJS 也是一个服务器端的 JavaScript API的WebKit。其支持各种Web标准: DOM 处理, CSS 选择器, JSON, Canvas, 和 SVG
  • Lighttpd 一个轻量级的开源Web服务器。新闻,文档,benchmarks, bugs, 和 download. Lighttpd 支撑了几个非常著名的 Web 2.0 网站,如:YouTube, wikipedia 和 meebo.
  • NGinx, 性能巨高无比的轻量级的Web服务器。比Apache高多了。花了6年的时间,终于走到了1.0版。
  • Apache HTTP Server 是一个很流行的并支持多个流行的操作系统的Web服务器。
  • ★ PHP 可能是最流行的服务器端的Web脚本动态处理语言。
  • 当然,还有 RubyPythonErlangPerlJava.NETAndroidC++Go,Fantom,CoffeeScriptD, …

PHP 框架和工具

图片 3

  • ★ WordPress 是一个基于博客系统的开源软件。
  • Drupal 是一个内容管理系统 (CMS).
  • Centurion 是一个新出现的开源 CMS ,一个灵然的 PHP5 Content Management Framework. 使用 Zend Framework, 其组件坚持通用,简单,清楚和可重用的设计原则。
  • phpBB 一个开源的论坛(国内的Discuz!更多)
  • ★ SimplePie : 超快的,易用的, RSS 和 Atom feed PHP解析。
  • ★ PHPthumb, PHP 图片处理库
  • ★ PHPMailer 强大的全功能的PHP邮件库
  • PubSubHubbub协议,一个简单,开放, server-to-server 的 pubsub (publish/subscribe) 协议——Atom and RSS的扩展。

数据库

图片 4

  • ★ Apache CouchDB 是一个面向文档的数据库管理系统。它提供以JSON 作为数据格式的REST 接口来对其进行操作,并可以通过视图来操纵文档的组织和呈现。.源码.
  • MonoQL 是一个采用PHP+ExtJS开发的MySQL数据库管理工具。界面极像一个桌面应用程序,支持大部分常用的功能包括:表格设计,数据浏览/编辑,数据导入/导出和高级查询等。
  • MariaDB 是MySQL的一个分支,由MySQL 创始人Monty Widenius 所开发。GPL,用来对抗Oracle所有的MySQL的license的不测。自Oracle收购SUN以来,整个社区对于MySQL前途的担忧就没有停止过。
  • ★ SQLite 不像常见的客户端/服务器结构范例,SQLite引擎不是个程序与之通信的独立进程,而是连接到程序中成为它的一个主要部分。所以主要的通信协议是在编程 语言内的直接API调用。这在消耗总量、延迟时间和整体简单性上有积极的作用。整个数据库(定义、表、索引和数据本身)都在宿主主机上存储在一个单一的文 件中。它的简单的设计是通过在开始一个事务的时候锁定整个数据文件而完成的。库实现了多数的SQL-92标准,包括事务,就是代表原子性、一致性、隔离性 和持久性的(ACID),触发器和多数的复杂查询。不进行类型检查。你可以把字符串插入到整数列中。某些用户发现这是使数据库更加有用的创新,特别是与无 类型的脚本语言一起使用的时候。其他用户认为这是主要的缺点。
  • SQL 在线设计编辑器,这一节的那个图片就是这个在线编辑器的样子了。一个画数据库图表的在线工具。很强大。

API 和 在线数据

图片 5

  • ProgrammableWeb, 最流行的Web Services 和 API 目录大全。
  • Google Data Protocol 一组Google服务的数据服务API。
  • Yahoo! Developer Network – APIs 和 Tools
  • Yahoo! Pipes 可视化在线编程工具,它是一个用于过滤、转换和聚合网页内容的服务。
  • ★ The Yahoo! Query Language 一个很像 SQL的网页查询工具。

在线代码和媒体编辑器

图片 6

  • ★ CodeRun Studio一个基于JavaScript语言开发的跨平台的集成开发环境,它立足于云计算的设计思路,方便开发者在浏览器端便可以轻松开发、调试和部署网络应用程序。
  • Cloud9 IDE – 一个基于Node.JS构建的JavaScript程序开发Web IDE。它拥有一个非常快的文本编辑器支持为JS, HTML, CSS和这几种的混合代码进行着色显示。
  • ★ jsFiddle – Javascript的在线运行展示框架,这个工具可以有效的帮助web前端开发人员来有效分享和演示前端效果,其简单而强大 (JavaScript, MooTools, jQuery, Prototype, YUI, Glow and Dojo, HTML, CSS)
  • Akshell,一种云服务,它使用服务端的JavaScript和在线的IDE帮助开发者进行快速应用程序开发。 它还提供云托管,所以部署是即时的。
  • JSONeditor, 一个好用的JSON 编辑器
  • ★ TinyMCE 一个轻量级的基于浏览器的所见即所得编辑器,支持目前流行的各种浏览器,由JavaScript写成。
  • Ext Designer 是一个桌面应用工具,帮助你快速开发基于ExtJS 的用户界面。
  • ★ LucidChart,一款基于最新的html5技术的在线图表绘制软件,功能强大,速度快捷,运行此软件需要支持html5的浏览器。
  • Balsamiq Mockups, 产品设计师绘制线框图或产品原型界面的利器。
  • Color Scheme Designer 3 – 一个免费的线上调色工具
  • ★ Pixlr, 是一个来自瑞典基于Flash的免费在线图片处理网站。除了操作介面和功能接近Photoshop,还是多语言版本,支持简体中文。
  • Aviary, 是一个基于HTML5 的在线图片处理工具,可以很容易的对图片进行后期处理。 Aviary API
  • Favicon Generator, 线上favicon(16×16)制作工具。

代码资源和版本控制

图片 7

  • ★ GitHub 是一个用于使用Git版本控制系统的项目的基于互联网的存取服务。
  • Git 是一个由Linus为了更好地管理linux内核开发而创立的分布式版本控制/软件配置管理软件。其巨快无比,高效,采用了分布式版本库的方式,不必服务器端软件支持,使源代码的发布和交流极其方便。
  • Google Code 谷歌公司官方的开发者网站,包含各种开发技术的API、开发工具、以及开发技术参考资料。
  • Google Libraries API Google 将优秀的 JavaScript 框架部署在其 CDN 上,在我们的网站上使用 Google Libraries API 可以加速 JavaScript 框架的加载速度。
  • Snipplr 一个开放的源代码技巧分享社区,号称Code 2.0。和一般的源码分享网站不同,它针对的并不是大型网站源码,而是一些编程的代码技巧。

JavaScript 桌面应用框架

图片 8

  • ★ jQuery 是一个快速、简单的JavaScript library, 它简化了HTML 文件的traversing,事件处理、动画、Ajax 互动,从而方便了网页制作的快速发展。 源码, API, API浏览, 很不错的文档.
  • ★ 官方的 jQuery User Interface (UI) library (演示和文档). 源码,Themes Roller, Download.
  • YUI 2 — Yahoo! User Interface Library
  • Mootools, 一个超级轻量级的 web2.0 JavaScript framework
  • Prototype 提供面向对象的Javascript和AJAX
  • Dojo The Dojo Toolkit,一个强大的无法被打败的面向对象JavaScript框架。主要由三大模块组成:Core、Dijit、DojoX。Core提供 Ajax,events,packaging,CSS-based querying,animations,JSON等相关操作API。Dijit是一个可更换皮肤,基于模板的WEB UI控件库。DojoX包括一些创新/新颖的代码和控件:DateGrid,charts,离线应用,跨浏览器矢量绘图等。
  • ★ Ext JS 4, 业内最强大的 JavaScript framework。
  • PHP.js, 一个开源的JavaScript 库,它尝试在JavaScript 中实现PHP 函数。在你的项目中导入PHP.JS 库,可以在静态页面使用你喜欢的PHP 函数。

JavaScript 移动和触摸框架

图片 9

  • ★ jQuery Mobile : 是 jQuery 在手机上和平板设备上的版本。jQuery Mobile 不仅会给主流移动平台带来jQuery核心库,而且会发布一个完整统一的jQuery移动UI框架。支持全球主流的移动平台。jQuery Mobile开发团队说:能开发这个项目,我们非常兴奋。移动Web太需要一个跨浏览器的框架,让开发人员开发出真正的移动Web网站。我们将尽全力去满 足这样的需求。Sources.
  • Zepto.js Zepto.js 是支持移动WebKit浏览器的JavaScript框架,具有与jQuery兼容的语法。2-5k的库,通过不错的API处理绝大多数的基本工作。 Sources.
  • MicroJS : Microjs网站应用列出了很多轻量的Javascript类库和框架,它们都很小,大部分小于5kb。这样你不需要因为只需要一个功能就要加载一个JS的框架。
  • ★ PhoneGap :是一款开源的手机应用开发平台,它仅仅只用HTML和JavaScript语言就可以制作出能在多个移动设备上运行的应用。 Sources.
  • ★ Sencha Touch Sencha Touch 是一个支持多种智能手机平台(iPhone, Android, 和BlackBerry)的 HTML5 框架。Sencha Touch可以让你的Web App看起来像Native App。美丽的用户界面组件和丰富的数据管理,全部基于最新的HTML5和CSS3的 WEB标准,全面兼容Android和Apple iOS设备。
  • JQtouch, 是一个jQuery 的插件,主要用于手机上的Webkit 浏览器上实现一些包括动画、列表导航、默认应用样式等各种常见UI效果的JavaScript 库。 Sources.
  • DHTMLX Touch 针对移动和触摸设备的JavaScript 框架。DHTMLX Touch基于HTML5,创建移动web应用。它不只是一组UI 小工具,而是一个完整的框架,可以针对移动和触摸设备创建跨平台的web应用。它兼容主流的web浏览器,用DHTMLX Touch创建的应用,可以在iPad、iPhone、Android智能手机等上面运行流畅。

jQuery 插件

图片 10

  • Waypoints 是一个jQuery 用来实现捕获各种滚动事件的插件,例如实现无翻页的内容浏览,或者固定某个元素不让滚动等等。支持主流浏览器版本。
  • Lazy loader 插件可以实现图片的延迟加载,当网页比较长的时候,会先只加载用户视窗内的图片,视窗外的图片会等到你拖动滚动条至后面才加载,这样有效的避免了因图片过多而加载慢的弊端。
  • TweenJS : 一个简单和强大的 tweening / animation 的Javascript库。
  • Easings 类Css3的jQuery 动画插件
  • Spritely 这个插件可以创建出如flash一样的动画效果,比如:在页面上有一只飞动的小鸟,一个动态滚动的背景等。
  • File Upload, jQuery 文件上传插件4.4.1
  • Slideshow/Carousel 插件. Sources.
  • Supersized – 全屏式的背景/幻灯片插件
  • Masonry i一款非常酷的自动排版插件,这款jQuery工具可以根据网格来自动排列水平和垂直元素,超越原来的css. Sources.
  • jQuery 简单 Layout 演示,管理各种边栏式,可改变大小式的布局。
  • Flexigrid – jQuery 数据表插件
  • Isotope绝对是一个令人难以置信的jQuery插件,你可以用它来创建动态和智能布局。你可以隐藏和显示与过滤项目,重新排序和整理甚至更多。
  • Super Gestures jQuery 插件可以实现鼠标手势的功能。
  • MouseWheel 是由Brandon Aaron开发的jQuery插件,用于添加跨浏览器的鼠标滚轮支持。
  • AutoSuggest jQuery 插件可以让你添加一些自动完成的功能。
  • qTip 一个漂亮的jQuery 的工具提示插件,这个插件功能相当强大。
  • jQuery Charts and graphic 用来制作图表。
  • jQuery Tools– The missing UI library

其它 jQuery 资源

HTML5 视频播放器

图片 11

  • ★ 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 音频处理与可视化效果

图片 12

  • ★ 使用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

图片 13

  • ★ 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–Raphaël
  • jQuery SVG 插件让你可以了 SVG canvas 进行交互。
  • Google chart tools – 参看本站的使用Google API做统计图
  • Arbor.js, 是一个利用webworkers和jQuery创建的数据图形可视化JavaScript框架。它为图形组织和屏幕刷新处理提供了一个高效、力导向布局算法。

JavaScript 浏览器接口 (HTML5)

图片 14

  • ★ Modernizr – 是一个专为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 工具

图片 15

  • ★ {{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 。

客户端和模拟器

图片 16

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

CSS3 和 字库

图片 17

  • ★ CSS3 Maker CCS3的生成器
  • 容易地创建 CSS3 animations。 Sencha Animator 是一个桌面应用可以为WebKit浏览器和触摸式移动设备创建 CSS3 animations 。
  • CSSwarp – 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) 模板

图片 18

  • ★ 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 。

(全文完)

  原文:b2bweb
译文:酷壳

语义

1. HTML5的Web开发人员版本

将HTML5的Web开发人员版本列举在这可能有点奇怪,因为它只是一个HTML5标准的版本。一直以来W3C的标准有点让人费解,因为它是为web浏览器开发人员编写的,而不是网站。但是HTML5标准出人意外的具有非常好的可读性,并且里面列举了大量的实例。如果你以前有过阅读W3C标准的痛苦经历,或许HTML5的标准会让你喜出望外。

HTML5的Web开发人员版本是由Ben Schwarz 和同行一起制定的,诣在“为web开发人员提供基础的标准指南”。它是对浏览器提供商版本标准的修改,更适合web开发人员阅读。除了印刷风格具有更好地可读性外,还提供了许多HTML5的附件。它使用了Offline Cache,能够支持浏览器使用<progress> 和AppCache API。search-as-you-type功能也支持离线访问,搜索框使用type="search"

它告诉人们怎么做一些了不起的工作。Ben将这个作为一个志愿项目,并且可以在GitHub上找到所有的资源。web开发人员能够借助这些资源开发各种HTML5应用。

图片 192. Move the Web Forward

Move the Web Forward是由Mat Marquis, Aaron Forsander, Connor Montgomery, Paul Irish,Divya Manian, Nicolas Gallagher, Addy Osmani和一些朋友一起编写的,它告诉人们“如何按照自己的理想打造一个了不起的web”。 里面列举了各种你能够用来优化web的方法。

网站陈列了HTML5代码,使用data-* 属性能够实现Twitter中的hashtag搜索功能。里面还有一些方便阅读但是没有实际意义的申明:

图片 20<!DOCTYPE html``是一个重要的位,可以触发标准模式。)总之,所有的这些资源都诣在帮助开发者打造更加优秀的HTML5网站,Move the Web Forward中的信息是非常有用的。Beyond the Blue Beanie?, Stephanie (Sullivan) Rewis评论说:“俗话说得好,众人拾柴火焰高。有这么多人参与,必然能够推动web快速发展。现在大家应该团结起来,让web的风潮来得更猛烈些!”在Addy Osmani的The Smashing Guide To Moving The Web Forward中有更多相关讯息。

图片 213. Boston Globe

Boston Globe是一个典型的完美商业“响应web设计”网站。遵循移动优先的原则,即使是在不支持媒体库查询或是JavaScript的老版本浏览器上,它也依然能够正常运行。Filament Group的Scott Jeh表示“网站的所有功能都特意被设计为不依赖JavaScript,但是在支持JavaScript的浏览器上,它可以利用各种丰富的JavaScript驱动接口提升应用的功能”。

Scott还指出“我们选择HTLM5主要是出于几点考虑。其中最重要的一点就是,它是面向未来友好型的协议,它提供了丰富的功能能够满足我们的各种需要。例如,我们大量使用了data-``属性,用来配置行为选项或是融入内容的增强功能,当然,HTML5能够使用新的语义元素代替以往的div/p/span,这些元素非常有用,对我们很有帮助”。

图片 22Audio

4. Anatomy of a mashup

Anatomy of a mashup中融入了他对音乐的热爱,DJing,datavis以及很酷的web技术。

混搭的Definitive Daft Punk音频利用了<audio> API和<canvas>,以及CSS3的变形和效果转换功能,将音乐变得可见。Cameron表示“所有的波形和光谱都是根据音乐实时变化的,这样你就能够在你的浏览器上看到音乐的变化了!”未来证明Flash还有市场,Cameron使用了一个自定义的Flash app采集音频数据。关于HTML5,Cameron表示“我热衷于HTML5开发最重要的原因就是开发的直接性;我能够编辑一个JavaScript文件,刷新一下,我立即就能看到修改的效果。不需要编译,也无需额外的插件。一切就是这么简单直接。”

图片 235. SoundCloud

SoundCloud 提供了声音录制和共享服务,大受艺术家和DJ们的欢迎,他们能够使用SoundCloud分享自己的合成音乐并且吸引更多的粉丝。它也是一个很好的HTML5教学实例。在桌面web app上通常用Flash播放音频,而现在还可以选择使用HTML5 Audio。这样SoundCloud还能在iPad上运行,最近发布了一个基于HTML5的工具。

除了使用<audio> 和 Audio API外,他们还在许多地方使用了data-*属性,以及Canvas,SVG和LocalStorage。Matas Petrikas表示“我认为我们使用Canvas渲染波形部件是一个非常明智的选择,相比于Flash,它极大的减轻了CPU的占用率”。不幸的是,还是有一些用户对此嗤之以鼻(虽然确实存在一些客观原因),不愿意使用HTML5的新元素和属性(虽然这一现象正在逐渐改变)。

然而,HTML5音频并不是唯一的选择,正如Matas所说的“HTML5 Media API在web浏览器中的实现状况不佳”。为了解决这个问题,Tomás Senart和Yves Van Goethem做了一套“Are We Playing Yet?”的音频测试工具。Matas表示“大家的反应非常棒,几乎所有的浏览器提供商都参与了进来,我们对2012年充满信心!”

移动设备上还存在一些其他的问题,如:声音录制问题,缺乏广泛的position:fixed 的UI支持,移动浏览器的更新不够及时——Android WebKit正逐渐变为现代的IE6。因此,SoundCloud大力提升了它在iOS和Android上的native apps。Matas说“我们希望能够尽可能为用户提供最好的体验,但现在移动浏览器还没能跟上”。但是他未来仍然充满信心:“我们非常看好即将推出的设备API(getUserMedia),我们希望将来能够不依赖Flash直接在浏览器上处理声音”。

虽然目前的规范和浏览器还存在这样或是那样的问题,但是毫无疑问,这些问题肯定会很快得到处理。比如Mobile Safari现在已经能够支持背景声音GeoLocation以及速度感应器了。虽然目前还存在这些问题,但Matas认为,与Flash相比,“HTML5版本的开发是一个相当快的过程。调试和优化都简单得多。这使得我们能够更轻松地开发或者重建应用,而最终的用户也会从中获益!”

图片 24

6.The Wheels Of Steel

Scott Schiller开发的The Wheels Of Steel由两个唱片和一个混音器构成,可以在浏览器中运行。在浏览器支持的情况下它优先选用HTML5 Audio,在不支持的环境中它会通过Scott的JavaScript库SoundManager 2使用Flash替代。它还使用了一些其他的有趣元素,包括使用<input type="range"> 实现唱片的平滑转换和本地存储,使用CSS3提升应用的视觉效果。Scott的The Wheels Of Steel: An Ode To Turntables (HTML)介绍了更多细节问题。里面说到“网页能够实现优雅的降级,即使在不支持JavaScript的环境中,应用的核心UI和内容也能够很好地显示。如果浏览器不支持JS网页就无法正常显示或变得模糊不清,这就是网站开发者的失职”。

图片 25客户端web apps

TAG标签:
版权声明:本文由必威发布于必威-前端,转载请注明出处:整理汇总的有关Web开发的资源和目录,这些网站