国外开发的HTML 5精彩应用

在HTML 5未 成熟应用的时候,流媒体播放等一些精彩应用必须借助第三方软件才可以实现,比如Flash等。但是现在HTML 5已经将其超过,它不但可以播放视频和音频,而且还可以开发出各种网络在线应用程序,如标识的地理位置、离线存储、拖放、图片处理等。在这篇文章中,我们 来看看最近国外的一些使用HTML 5开发的网站。请注意,您将需要一个支持HTML 5的浏览器。

一、处理图片

网址:http://radikalfx.com/files/collage/demo.html

本网站使用了HTML 5的Canvas元素来创建一个图层列表,通过从图片库选择图片添加后,会新建一个新的图层,每一层都可以通过操纵将图片进行:移动、缩放、旋转、改变图层上下级、删除层、改变透明度、改变混合模式、启用或禁用的图片阴影。

二、图片编辑

网址:http://www.aviary.com/html5editor

百鸟居的HTML 5的图片编辑器十分的非常方便快捷,可以说它将在线图片编辑革新化。 通过简单的上传和点击,任何人都可以通过互联网编辑精美的图片,或者通过多层操作来执行简单的图层合并、单层编辑等功能。

三、待办事项

网址:http://10k.aneventapart.com/Uploads/58/

5List是一个使用HTML 5、CSS 3和JavaScript编写的记事本,利用了HTML 5的功能,包括localStorage,它具有客户端数据库存储功能。通过5List,可将用户提交的待办数据保存到用户本地机器上。

四、拖拽图片上传

网址:http://demos.hacks.mozilla.org/openweb/imageUploader/

这个使用HTML 5开发的图片上传功能,在Mozilla的Firefox 3.6中测试通过,发现Firefox 3.6支持HTML 5的部分功能。 它支持将图片直接拖拽到浏览器进行上传。

五、谷歌吃豆子

网址:http://html5games.net/game/google-pacman/

这是谷哥为纪念吃豆子游戏30周年,将网站首页换成此游戏LOGO而设计的!据说这个游戏255关,包括最后一关!

六、表单

网址:http://thinkvitamin.com/code/fun-with-html5-forms/

一个非常有用的表单示例代码,使用HTML 5开发,包含了常见的表单操作,它能将需要的表单字段进行验证、字段占位符、日期选择器和电子邮件验证等,可用于网页和手机网页等具体领域。

七、图表

网址:http://www.humblesoftware.com/finance/index

HumbleFinance是使用HTML 5开发的数据可视化工具,如使用HTML 5进行交互式数据图形演示,它可用于显示任何两个2-D的数据集。

八、在线幻灯片制作

网址:http://10k.aneventapart.com/Uploads/143/

此幻灯片展示了HTML 5的localStorage和ContentEditable功能,应用十分丰富。简单的操作界面,利用CSS 3功能,同时又保持较小的文件大小。它支持将内容“自动保存”到本地(通过localStorage),拥有增加、减少和主题更换操作。

九、在线绘图

网址:http://muro.deviantart.com/

MURO是一个纯HTML 5开发的在线绘图工具,它有两种模式:基本和专业,它们都免费使用。 MURO支持效果有滤镜、锐化工具和画笔,所有的操作在一个直观和简单的界面里进行,使用相当容易。

十、地理定位

网址:http://studio.html5rocks.com/#Geolocation

这个Web应用程序会自动检测您所在的位置,然后使用谷歌地图返回附近的就业信息。 不过需要注意的是,它要求分享您浏览器所处的地址信息。

时间: 2024-10-03 15:08:52

国外开发的HTML 5精彩应用的相关文章

10个令人惊奇的HTML5和JavaScript效果

10款令人惊奇的HTML5和javascript效果.回到几年前,这些效果是根本不可能实现,只能用flash做,但是现在,已经很轻松的就可以实现了. 1. Breathing Galaxies 使用键盘来改变形状中的线条样式,或移动鼠标来创建一个新的形状. 查看:http://mudcu.be/labs/JS1k/BreathingGalaxies.html 2. Noise Field 移动鼠标来改变粒子的运动.点击随机产生参数. 查看:http://www.airtightinteracti

【mybatis深度历险系列】深入浅出mybatis中原始dao的开发和mapper代理开发

使用Mybatis开发Dao,通常有两个方法,即原始Dao开发方法和Mapper接口开发方法.mybatis在进行dao开发的时候,涉及到三姐妹,分别是SqlSessionFactoryBuilder.SqlSessionFactroy.SqlSession. 小伙伴们都知道,SqlSession中封装了对数据库的操作,如:增删改查,通过SqlSessionFactory创建SqlSession,而SqlSessionFactory是通过SqlSessionFactoryBuilder进行创建的

Windows 8应用开发马拉松六大城市加入

近日,国内首次最大规模的Windows 8 应用同聚开发马拉松,在北京.上海.广州.成都.深圳.西安六大城市同时拉开帷幕.此次开发马拉松以Live To Code为主题,强调创新.激情和自豪,以最新发布且最具热度的Windows 8为开发平台,鼓励广大开发者和学生积极参与,微软将通过Windows应用商店的拓展和分发渠道,帮助开发者取得更大成功. 应用开发已经从普通的编程蜕变为目前最有创新.有趣和独特的职业.此次六城市同聚开发马拉松活动正是回应了国内众多开发者的热情,为他们提供广阔而丰富的开发平

云栖大会之高性能计算圆桌会议回顾

云栖大会之高性能计算下半场回顾.来自HPC行业领域的6位技术大牛,讨论非常深入,像陈怡然教授说的,"最精彩的发言之一,通常发生在panel discussion中",陈健等几位嘉宾的发言都很赞.而台下的观众也非常投入,站起来提问的时候,激情饱满发表自己的观点. 第一个观点,中科院计算所研究员,高性能专委会秘书长张云泉老师,认为超算和高性能计算上云是并存的,云超算这个说法其实不合适. 阿里云做了一件最重要的事情,目前的高新能计算使用的软件的都是国外开发的,原因是价格相对较高,但是上云之后

冯文杰:盲从是国内移动应用开发者的问题

8月9日消息,近日千尺下载CEO冯文杰先生接受赛迪网独家专访时表示,开发应用程序不要关心太多所谓"平台"的问题,不论是在Symbian.Android还是iOS上,做不出好产品就不会得到市场的重视.为手机开发应用程序并非是一个新的行业,但在近期却得到一个爆发.冯文杰表示主要是硬件升级推动了移动应用的爆发:"手中的硬件升级了,用户就会根据自己的需求搭配一个生活中最需要的软件."在他看来,国内应用开发者所处现状很痛苦,与国外开发团队的差距较大.造成这种现状是由于&quo

我终于找到ASP中使用Office2000中的图表控件的方法!有兴趣的朋友进来看看!也请各位高手指点...

控件|图表|图表控件     前一阵为了做图表,查看了论坛中的所有文章,但大都是用Aspchart,ShortGraph等组件,这些组件多半都是国外开发要money的.如果你用office 的MS Chart,往往作出的效果又差强人意.如果你使用过Office2000中Excel的图表的话,应该被一流的效果所折服.想把他搬上你的网站吗?没问题,现在你也能通过ASP和VBScript来实现Microsoft Office Chart 9.0 的强大的功能和绝妙的效果.     示例中使用 ADO

生成Feed的代码进行了修改

今天我将主要的几个网站的Feed生成代码都进行了一些修改. 我也是不得不这么做.因为我发现现有的Z-BLog写的TAG始终无法被technorati获取,然而别人用WordPress写的Blog里的TAG却可以被technorati获取,我自己也手动Ping了technorati,但发现也没有用,只好仔细分析其中的原因了. 我仔细分析了一下WordPress和Z-Blog的代码,我发现在Feed生成上有一点不同,Z-Blog缺少了几个东西,有可能和这个有关,于是我就修改了一下Z-Blog的rss

PHP下一代的五个framework介绍

随便编写php的日子将远去了.下面有5个下一代的php框架.每个框架都为php下一步发展做了高深设计,许多都应和Ruby on Rails,快速开发动态语言,更有甚者, php on trax 直指 Ruby on Rails.如下面所列的frameworks,我学习了 AGAVI 就像 Symfony 一样轻松.我诚实的说我不愿望编写php还像以前那么自由散漫.使用这些frameworks将使用你的工作变得容易. 在Nation.com工作时,我曾经很开心的学习,可以说拥抱这个framewor

敏捷测试(7) 基于story的敏捷基础知识

基于story的敏捷基础知识----迭代启动会.迭代回顾会 除需求讲解意外,需要所有团队成员参加的会议仅有两个,分别是"迭代启动会"和"迭代回顾会". (1)迭代启动会 在迭代开始之前,需要召开迭代启动会,目的有以下两个: 明确迭代周期,即上线时间: 明确迭代目标,即以什么样的优先级,交付哪些story. 在明确了迭代周期和上线时间后,按照前面提到的"迭代规划"来开迭代启动会即可,在此不再赘述. (2)迭代回顾会 在每个迭代结束后都有迭代回顾会,