【亚洲必赢官网】开源中最好的Web开发资源汇总,移动和触摸框架

二零一一年回看:改变游戏的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阶段,并陈设在二〇一四年成功正式制定。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 是一个支持八种智能手机平台(金立, Android,
和三星(Samsung))的 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制造的运用,可以在华为平板、红米、Android智能手机等方面运行通畅。

 

jQuery 插件

Waypoints是一个jQuery
用来促成捕获种种滚动事件的插件,例如落到实处无翻页的情节浏览,或者固定某个元素不让滚动等等。协助主流浏览器版本。

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

TweenJS: 一个简练和有力的 tweening / animation 的Javascript库。

Easings类Css3的jQuery 动画插件

Pepsi-Colaly这么些插件可以创造出如flash一样的卡通效果,比如:在页面上有一只飞动的鸟儿,一个动态滚动的背景等。

File Upload,jQuery 文件上传插件4.4.1

Slideshow/Carousel插件.Sources.

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

Masonryi一款更加酷的自行排版插件,那款jQuery工具得以依照网格来机关排列水平和垂直元素,当先原来的css.Sources.

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

Flexigrid– jQuery数据表插件

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

Super GesturesjQuery 插件可以兑现骨关节炎势的意义。

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

AutoSuggestjQuery 插件可以让你添加一些自动达成的作用。

qTip一个好好的jQuery的工具提醒插件,这些插件功效万分强劲。

jQueryCharts and graphic用来制作图纸。

jQuery Tools– Themissing UI library

 

 

HTML5 视频播放器

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

LeanBack
PlayerHTML5视频播放器,没有看重任何JavaScript框架。援救全屏播放,音量控制,在同一个页面中播放多少个视频。
(来自谷歌)

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

【亚洲必赢官网】开源中最好的Web开发资源汇总,移动和触摸框架。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
是一个桌面应用可以为Web基特浏览器和触摸式移动装备创设 CSS3 animations 。

CSSwarp– CSS 文本扭曲生成器

Gradient Editor, 一个强硬的Photoshop式的CSS 渐变编译器。来自 ColorZilla

谷歌(Google) Web Fonts通过谷歌 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
     谷歌将非凡的 JavaScript 框架计划在其 CDN 上,在我们的网站上利用 GoogleLibraries 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
    是支撑移动Web基特浏览器的JavaScript框架,具有与jQuery包容的语法。2-5k的库,通过正确的API处理绝半数以上的基本工作。 Sources.
  • MicroJS :
    Microjs网站应用列出了许多轻量的Javascript类库和框架,它们都很小,超过一半低于5kb。那样你不须求因为只必要一个职能就要加载一个JS的框架。
  • ★ PhoneGap :是一款开源的无绳电话机采取开发平台,它仅仅只用HTML和JavaScript语言就可以制作出能在多少个运动装备上运行的利用。 Sources.
  • ★ Sencha Touch Sencha
    Touch 是一个帮忙三种智能手机平台(魅族, Android, 和小米)的
    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创制的拔取,可以在surface、HUAWEI、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种分化的浏览器和配备上播放,不需求再去考虑将
    要浏览视频的人利用什么设备了,以幸免各各软件巨头之间的补益之争带来了不包容,给用户带来了光辉的麻烦,短网址让你可以通过推文(Tweet)、
    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
     –
    参看本站的应用GoogleAPI做总括图
  • 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 通过谷歌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电视作出了最佳化的的网页范本,其特点是以遥控器作为操作的前提,令使用者无需输入任何文字就足以拓展控制。以后除了会有专用遥控器外,还会选拔智能手机
    透过W-iFi控制谷歌(Google) 电视的方法。Optimized
    Templates的界面中上手会来得分类,右方会呈现该分类下的摄像截图,影片播放、切换、全画面表示都可通过键盘上的方向键、Backspace或
    Enter等键已毕,方便今后的网站开发人士借镜。HTML5
    版的模版使用了 Google TV UI
    library, jQuery 和 Closure 。

(全文完)

  原文:b2bweb
译文:酷壳

语义

 jQuery Mobile : 是 jQuery
在手机上和机械设备上的本子。jQuery Mobile
不仅会给主流移动平台带来jQuery焦点库,而且会揭穿一个完全统一的jQuery移动UI框架。援救全世界主流的活动平台。jQuery
Mobile开发协会说:能开发这些类型,大家充裕欢愉。移动Web太需求一个跨浏览器的框架,让开发人员开发出真正的运动Web网站。大家将尽全力去满意如此的急需。 Sources.

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选择。

Zepto.js Zepto.js
是支撑移动WebKit浏览器的JavaScript框架,具有与jQuery兼容的语法。2-5k的库,通过科学的API处理绝大部分的要旨工作。 Sources.

亚洲必赢官网 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中有越来越多相关音信。

MicroJS :
Microjs网站应用列出了许多轻量的Javascript类库和框架,它们都很小,半数以上低于5kb。那样你不必要因为只须求一个效应就要加载一个JS的框架。

亚洲必赢官网 213. Boston Globe

Boston
Globe是一个良好的不可偏废商业“响应web设计”网站。遵守移动优先的尺度,固然是在不援救媒体库查询或是JavaScript的老版本浏览器上,它也如故可以正常运转。Filament
Group的ScottJeh表示“网站的持有机能都专门被规划为反对赖JavaScript,可是在扶助JavaScript的浏览器上,它可以行使各个丰盛的JavaScript驱动接口升高利用的法力”。

Scott还提议“大家拔取HTLM5最重如果出于几点考虑。其中最关键的某些就是,它是面向将来友好型的情商,它提供了丰硕的效果可以满意我们的各个急需。例如,我们大量行使了data-``属性,用来配置行为选项或是融入内容的增强功能,当然,HTML5能够使用新的语义元素代替以往的div/p/span,这么些元素卓殊有用,对大家很有救助”。

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

亚洲必赢官网 22Audio

Sencha Touch Sencha Touch
是一个支撑多样智能手机平台(金立, Android, 和中兴)的 HTML5
框架。Sencha Touch能够让您的Web App看起来像Native
App。赏心悦目的用户界面组件和拉长的数据管理,全部基于最新的HTML5和CSS3的
WEB标准,周详包容Android和Apple iOS设备。

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文件,刷新一下,我当下就能见到修改的成效。不要求编译,也无需附加的插件。一切就是这样简单直接。”

JQtouch, 是一个jQuery
的插件,紧要用来手机上的Webkit
浏览器上落实部分席卷动画、列表导航、默许使用样式等各样常见UI效果的JavaScript
库。 Sources.

亚洲必赢官网 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表示“大家的反馈格外棒,大致拥有的浏览器提供商都出席了进来,咱们对二零一二年充满信心!”

挪动设备上还留存有的别样的标题,如:声音录制难题,缺乏广泛的position:fixed 的UI支持,移动浏览器的翻新不够及时——Android
WebKit正渐次变为现代的IE6。因而,SoundCloud大力升高了它在iOS和Android上的native
apps。Matas说“大家盼望可以尽量为用户提供最好的体会,但如今移动浏览器还没能跟上”。但是她未来照例充满信心:“我们足够看好即将推出的设备API(getUserMedia),我们意在未来可以不器重Flash直接在浏览器上拍卖声音”。

尽管如此眼前的正经和浏览器还设有这样可能那样的题材,可是毫无疑问,这么些题材必将会火速拿随地理。比如Mobile
Safari现在曾经可以协理背景声音GeoLocation以及速度感应器了。即便则今还存在这一个题材,但Matas认为,与Flash相比较,“HTML5本子的支出是一个分外快的进度。调试和优化都简单得多。那使得大家可以更轻松地付出仍然重建应用,而最终的用户也会从中受益!”

DHTMLX
Touch
 针对移动和触摸设备的JavaScript
框架。DHTMLX Touch基于HTML5,成立移动web应用。它不仅是一组UI
小工具,而是一个完全的框架,可以针对移动和触摸设备创立跨平台的web应用。它良好主流的web浏览器,用DHTMLX
Touch创制的使用,可以在三星平板、One plus、Android智能手机等地点运行流畅。

亚洲必赢官网 24

 

6.The Wheels Of Steel

Scott Schiller开发的The Wheels Of
Steel由多个唱片和一个混音器构成,可以在浏览器中运行。在浏览器帮衬的意况下它预先选择HTML5
奥迪o,在不支持的条件中它会通过斯科特的JavaScript库SoundManager
2利用Flash替代。它还运用了部分任何的有趣元素,包蕴利用<input type="range"> 完毕唱片的平整转换和地点存储,使用CSS3进步应用的视觉效果。Scott的The
Wheels Of Steel: An Ode To Turntables
(HTML)介绍了更多细节难题。里面说到“网页能够已毕优雅的降级,即使在不匡助JavaScript的条件中,应用的主旨UI和内容也可以很好地突显。即使浏览器不帮助JS网页就无法正常突显或变得模糊不清,这就是网站开发者的玩忽职守”。

jQuery 插件

亚洲必赢官网 25客户端web apps

Waypoints 是一个jQuery
用来落到实处捕获各类滚动事件的插件,例如落到实处无翻页的情节浏览,或者固定某个元素不让滚动等等。帮助主流浏览器版本。

7. Dabblet

Dabblet 席卷了Lea
Verou的新星工具——一个通通在客户端运行的CSS
sandbox。

它多量用到了HTML5和连锁工具,包涵CORS (cross-origin resource
sharin),localStorage,History API,Selectors
API,data-*,contenteditable和内联的SVG。Lea正考虑以后还要接纳Drag &
Drop API嵌入资源,并运用Offline API,但神话“offline
API分外费劲”。她曾尝试选拔Web
Workers突显异步语法,可是那使得应用变得更慢了。她还想拔取UndoManager完成“dabblet的代码的Undo/Redo功能”

它还使用了Lea的具备争议的-prefix-free库电动处理CSS
vendor
prefixes的题材。Lea正考虑提供一个no-prefix-free选用,或是增添部分像样LESS的元素。尽管EricMeyer曾极力为vendor
prefixes辩护,但Divya
Manian,Henri
Sivonen,和Lea都表示目前vendor
prefixes使用(赋值,粘贴)存在着题材。那不只是HTML5的标题,它还论及到了俺们应该怎么样行事那类原则性的题材,CSS
Working
Group更侧重于接纳www-风格的输入。

因为目的人群是web开发者,所以Lea并不担心向后包容性的难点,“对技术不太熟谙的用户可能会持续利用IE访问网站,不过在IE上也能选择HTML5,只是须求部分援救工具并应用降级措施。”关于HTML5,Lea代表“对于开发者来说,HTML5代表三件事:速度,通用性,以及开放性。开发工作正变得愈加简单了”。

Lazy
loader 
插件可以完结图片的推迟加载,当网页比较长的时候,会先只加载用户视窗内的图片,视窗外的图片会等到你拖动滚动条至前面才加载,那样有效的幸免了因图片过多而加载慢的弊病。

亚洲必赢官网 268. Font Dragr

Ryan Seddon开发的font
dragr帮衬开发者在浏览器中预览自定义字体,用户只用将字体文件拖入font
dragr恐怕在列表中挑选一个字体就能平昔看看字体的体制了。更棒的是,使用一个CSS采取器选中相应的字体,你就足以用font
dragr书签改变任何一个网站的书体了。用户可以急迅利用 @font-face 预览和相比各样字体,甚至无需修改代码。

它使用了HTML5的流行因素:Drag和Drop API,the History
API,contenteditable属性,以及localStorage。它还预备帮衬谷歌 Web
Fonts。赖安表示localStorage用于“在交互式请求中赢得视图html,在DOM中替换它,并在localStorage中缓存视图HTML”。关于HTML5,赖安只是简单地代表“它还在安排中”。

 

TweenJS : 一个粗略和强硬的
tweening / animation 的Javascript库。

亚洲必赢官网 27SVG

就算那不是HTML5规范的一局地,不过不少很棒的网站都大方运用了其一矢量绘图标准。

Easings 类Css3的jQuery
动画插件

9. Slavery Footprint

Slavery
Footprint是一个互相的问卷调查,用于测试“你富有多少个奴隶?”,辅助人们进步现代的下人意识。

它在JavaScript中应用了HTML5元素、GeoLocation和SVG延迟下载以及制作动画内容。即使在现世的浏览器中这一个网站效能很高而且页面格外精美,然而它并没能提供最好的用户体验。因为在不扶助JavaScript的浏览器中,那几个调研大约不可以开展,并且有关奴隶的信息(“What?
Slaves work for
me?”)是有些服务走访的公文图片。或许它一先导就从不设想“内容优先”的规则,Slavery
Footprint与生俱来就有一些通病,比如在对旧版本浏览器的接济上就存在难题——他的客户端是USA
State
Department,他们还在利用IE7。即使存在那几个题材,不过它真的在升级我们对当代奴隶的认识方面取得了远大的成功。

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

亚洲必赢官网 2810. Kern Type

Kern Type是Mark
MacKay支出的一个调整字体距离的小游戏,它很意外地不难令人上瘾。你能够调整一个单词中逐条字母的相距,程序会基于你的变现给出平分。每个单词的字体也截然差距。

除外选用JavaScript library
Raphaël 的SVG设计字体外,它还利用了data-* 属性设置字体数据(初叶地点音信以及水平向量),使用了Raphaël的
drag-n-drop增添交互性。

马克表示“最初自己并不曾打算协助平板电脑。当Kern
Type几近落成的时候,我惊奇地觉察自己能在平板电脑上开拓它,并且运行得一定不错:功用上差不多从未其他损失,动画也一定流利,拖牵动作都执行得很好。”他放任了Raphaël
drag-and-drop,因为假设再而三使用它,那必须在Raphaël和自定义的javascript之间定义一个接口。在拜访对象的时候利用HTML5的drag-and-drop,那个都是一定勤奋的。

当您做到了这一个娱乐之后,你可以一而再品尝挑衅它的姐妹篇Shape
Type,继续上学for Method of
Action的率先篇“Design for
programmers”,你会意识那四个游戏都做很好地到了这点。

File
Upload, 
jQuery
文件上传插件4.4.1

亚洲必赢官网 2911. SVG Girl

SVG
Girl是一个为IE9版本开发的言传身教网站。它显得了IE9强大的SVG功效,里面使用日式风格的动画片格局,每秒运行10个SVG帧,并且经过<audio> 元素和<video>为网站的扩充声音。

它是由jsdo.it的大旨成员开发的,jsdo.it是一个支付、分享、分支JavaScript的交际编码社区网站。Kayac是网站的老总,他形容这些集体为“全东瀛最有趣的社区”(正如他们的‘data-*’和SVG-powered团队的网页所看到的)。

当下还尚无发现日本的在校女人在动用Windows Phone
7.5感受那种转移,但那只是岁月的题材。还有一个有趣的日本案例——The
Shodo,它是一个根据<canvas>的历史观书法web
app,里面也利用了SVG。

Slideshow/Carousel 插件. Sources.

亚洲必赢官网 30Canvas

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

12. Peoplemovin

Peoplemovin是Carlo
Zapponi付出的一个私房项目,网站中采取了大批量的图纸(受到Sankey图表的启发)来突显世界各州的移民景况。满世界有跨越3%的食指,也就是多于2.15亿人不在自己出生的国家生活。在Peoplemovin上可以便宜地查到各类国家的移民情形,能够充裕直观地看出各类统计数据。

Carlo说到“那些网站的功底元素就是canvas,所有的互相和可视化都是用canvas完毕的,并且可以有利于地勾画出种种国家时期的连年路线。在网站中还利用了CSS3落到实处部分圆角、阴影、光效和字体的风格设置。”它不只好在最新的浏览器上运行,还可以在智能手机和平板统计机上运行。Carlo最终动用了一个自定义的开源工具包完毕了这个意义,他将这么些工具命名为DataMovin,并打算前期发表这些工具(在此时期会对代码做越来越的反省)。

Carlo对HTML5的描述是“HTML5最棒的地方就是它是一个引起成立性的平台。你有了一个至极疯狂的新想法?那太好了!你能以前所未有的快慢将以此想法在浏览器中落到实处,而不用另起炉灶。”

Masonry i一款尤其酷的自发性排版插件,那款jQuery工具得以根据网格来机关排列水平和垂直元素,领先原来的css. Sources.

亚洲必赢官网 31

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

13. Rally Interactive

Rally
Interactive网站选拔canvas开发了有些极度有新意的事物,它利用canvas落成网站的互相作用。选中网页中的三角形后图形会做出反应,当点击它之后,也会并发动画,在此之前完成那么些动画片可能要求插手类似Flash那类的插件。

正如Wes Pearce所说的“假诺没有HTML5
canvas,我们的网站根本就不容许达成大家想要的成效。最新的浏览器大概都辅助canvas。大家还丰硕利用了最新的History
API,它的已毕意料之外的立即。”

Flexigrid – jQuery 数据表插件

亚洲必赢官网 3214. Up and Down the Ladder of Abstraction

Bret Victor开发的Up and Down the Ladder of
Abstraction为怎么着运用交互提供了一个很好的以身作则。

在示范中进入了<canvas>实例,让您可见通过相互的艺术精通种种点。小编认为那种方式可以选择到未来的读本中,使用ePUB
3和HTML替代原先的PDF,ePUB 2和 Kindle Format 8。

Isotope纯属是一个令人难以置信的jQuery插件,你可以用它来创立动态和智能布局。你可以隐蔽和体现与过滤项目,重新排序和整理甚至更加多。

亚洲必赢官网 3315. Sumon

Sumon 是一个细节设计得一定不错的加法小游戏。Ludei最初开发那几个游戏的目标是想用它浮现他们的CAAT框架,里面可以演示Canvas,WebGL和DOM/CSS。

从2010年推出Agent 008 Ball和Pirates Love
Daisies开头,将canvas和audio结合起来就变成了一种倍受器重的开发方法——可以开发出在浏览器中运行的各样幽默的小游戏。它们可以在iTunes,Chrome和Android上访问,包蕴非死不可游戏在内的成百上千浏览器游戏都是按照同一个代码库。那有点像是native
apps。

Iker
Jamardo代表“JavaScript和HTML5非常适合开发娱乐。大家发现它的唯一缺点就是在运动装备浏览器上品质不够理想。”但Ludei相信这点一定可以取得解决,他们支付的Cocoon
and CocoonJS
frameworks在移动设备上的习性与native
apps品质卓殊。Iker计算到“大家都相信JavaScript和HTML5是一个百般良好的一日游开发和跨平台开发工具”。

Super
Gestures
 jQuery
插件可以兑现骨膜炎势的效果。

亚洲必赢官网 34WebGL

HTML5标准又将WebGL单独分离出来了——它是一组单独的业内API,用来在<canvas>中投入3D图形。本节不会具体介绍其中的新闻,而单独是付出一些演示:

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

16. HelloRacer

HelloEnjoy开发的HelloRacer,是一个可驾驶的F1赛车。

AutoSuggest jQuery
插件可以让您添加一些机动完毕的功力。

亚洲必赢官网 3517. WebGL Shader — Travelling wave fronts tech demo

The travelling wave fronts tech
demo是一个“有规则的8bit扩散连串,里面参预了波浪动画和像素衰退效果”。看起来卓殊迷幻。

qTip 一个突出的jQuery 的工具提醒插件,那些插件功用极度强大。

亚洲必赢官网 3618. ROME “3 Dreams of Black”

ROME “3 Dreams of Black”是ChrisMilk和爱侣一块付出的一个音乐录音带交互网站,里面有Danger Mouse,丹聂耳e
Luppi和诺拉h Jones的音乐。

亚洲必赢官网 37再有记录电影幕后技术的言传身教和录像也是不容错过的。

Dev.Opera的“An introduction to
WebGL”(以及“Porting
3D graphics to the
web”,都是由Luz
Caballero编制的)中有更多关于WebGL的介绍,里面还有很多了不起的演示。Opera还预备发表一个进一步完美的WebGL教程,并且即将出现。

jQuery Charts and
graphic
 用来创建图纸。

将来/现在

Web中还参与了很多伟大的因素。WebRTC (实时报纸公布) 标准
(getUserMedia)就是中间之一。它亦可落到实处“交流实时的竞相多媒体音讯,其中包罗音频和摄像”,常被用来浏览器上的摄像聊天。Opera还品尝在桌面和移动设备的开发工具中进入对getUserMedia 的支撑。

jQuery Tools– The missing UI
library

19. 浏览器上的视频聊天

埃里克sson
Labs已经在那一个上边开发了一段时间了,并且提供了一个可下载的WebKit库(还有更加多相关的音讯和教材)。

 

 

亚洲必赢官网 3820.人脸检测/胡须示例

Opera还盘算提供对WebRTC以及DeviceOrientation
Event正式的支撑,自定义了一个Opera
Labs Camera and
Pages。Rich
Tibbett应用那八个规范编制了一个Native互连网摄像头驱动和样子事件,并且用WebRTC完结了一个在在线摄像中检测人脸的示范示例。假诺那还不够,你还足以在浏览器中视频拉长一个胡须。

亚洲必赢官网 39

 

总结

您也许已经发现了,即使那里的网站是根据HTML5的技能拓展分拣的,不过他们绵绵应用了一种技术。即便HTML5正规(和其余的web技术标准,比如SVG和WebGL)中还有一些内容不够完善,可是它里面确实有好多你现在就能用得上的好技术。要想询问HTML5的最新进展和越来越多新闻,可以查阅HTML5
Doctor,W3C’s Planet
HTML5和Twitter @HTML5。

期待您可见回到作品开篇介绍的那七个网站,继续拉动HTML5的前景并使它进一步周密!

在二〇一一年,有怎么样HTML5技艺影响到了你?

 

赞 收藏
评论

亚洲必赢官网 40

HTML5 摄像播放器

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

LeanBack
Player
 HTML5摄像播放器,没有借助任何JavaScript框架。帮衬全屏播放,音量控制,在同一个页面中播放多少个视频。
(来自谷歌(Google))

Vid.ly 为您上传的视频提供转换职能,并且为转移后的视频成立一个短网址。通过Vid.ly,让你的视频可以在14种不一样的浏览器和配备上播报,不需求再去考虑将要浏览录像的人采纳什么设备了,以幸免各各软件巨头之间的利益之争带来了不般配,给用户带来了高大的干扰,短网址让你可以透过推特(TWTR.US)、脸谱等措施有利分享摄像。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–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.

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 – CSS 文本扭曲生成器

Gradient Editor,
一个强大的Photoshop式的CSS 渐变编译器。来自 ColorZilla

Google Web Fonts 通过谷歌 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电视机作出了最佳化的的网页范本,其特性是以遥控器作为操作的前提,令使用者无需输入任何文字就足以拓展控制。未来除了会有专用遥控器外,还会拔取智能手机透过W-iFi控制GoogleTV的法子。Optimized
Templates的界面中上手会来得分类,右方会来得该分类下的视频截图,影片播放、切换、全画面表示都可通过键盘上的方向键、Backspace或Enter等键落成,方便今后的网站开发人士借镜。HTML5
版的模板使用了 Google TV UI
library, jQuery  和 Closure 。

网站地图xml地图