转十个使用HTML5开发的精彩应用

转载 2011年01月12日 10:09:00

转十个使用HTML5开发的精彩应用

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

一、处理图片

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

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

 

二、图片编辑

网址:aviary.com/html5editor

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

 

三、待办事项

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

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

 

四、拖拽图片上传

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

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

 

五、谷歌吃豆子

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

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

 

六、表单

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

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

 

七、图表

网址:humblesoftware.com/finance/index

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

 

八、在线幻灯片制作

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

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

 

九、在线绘图

 

网址:muro.deviantart.com/

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

 

十、地理定位

网址:studio.html5rocks.com/#Geolocation

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

十个使用HTML5开发的精彩应用

在HTML5未成熟应用的时候,流媒体播放等一些精彩应用必须借助第三方软件才可以实现,比如Flash等。但是现在HTML5已经将其超过,它不但可以播放视频和音频,而且还可以开发出各种网络在线应用程序,如...
  • alicewyg
  • alicewyg
  • 2011年01月03日 20:46
  • 180

html5 在Android 开发中的应用

这篇文章主要是说明以下几个问题: 1.Android 开发中使用网页的优点和缺点。 2.Android开发中哪些情况适合使用网页,哪些情况不适合使用网页。 3.html5网页与普通网页的区别。 4.A...
  • huang_rong12
  • huang_rong12
  • 2016年04月26日 15:17
  • 1550

如何用HTML5开发安卓应用

传统的Web或者HTML5开发应用一般是部署在服务器上,用户通过浏览器访问URL来使用应用。由于通过应用商店下载安装使用应用已成为手机用户使用习惯,同时独立的软件安装包可以套用现有的应用商店模式,因而...
  • u013136922
  • u013136922
  • 2014年01月23日 17:19
  • 839

HTML5的精彩应用

简单图形,整套的属性和方法专门用于绘制矩形: 1、fillStyle可以设置为CSS颜色、一个图案或一种颜色渐变。fillStyle默认是纯黑色,你可以设置成你喜欢的任意颜色。只要页面打开着,每个绘...
  • feilong_12
  • feilong_12
  • 2012年11月27日 18:42
  • 344

编程人生之思绪

曾几何时,听说了编程。曾几何时,知道了英文单词的他用。曾几何时,开始了编程。。。。几度春秋,几度起伏。偶然拾取,顿识点悟。------------自己的无知,自己的不足,自己的。。。时至今日,自己在编...
  • hr_orient99
  • hr_orient99
  • 2008年04月27日 15:57
  • 674

Html5在Android开发中的应用

1、Java和Js交互这段代码的作用就是加载搜狐主页,并执行js,寻找网页源码里带h3标签的字符串,如果没有h3标签,则直接返回空字符串并取消网页上悬浮按钮的展示。那段js代码参考自这里 ...
  • diyangxia
  • diyangxia
  • 2015年05月18日 13:37
  • 3213

用HTML开发Windows桌面应用程序2

接上次。       1.MFC,DHMTL开发 给大家演示一下,用MFC搞一个HTML应用程序。 关于如何用MFC搞DHTML,可以参见上一篇文章   贴代码 1.添加这个消息映射  ...
  • xiaoaiai
  • xiaoaiai
  • 2015年05月27日 11:32
  • 4357

html5应用缓存

在html5当中引入了应用程序缓存,这意味着web应用可以进行缓存,并且可以在没有网络连接的时候进行访问。 应用缓存的优势 离线浏览,用户可以在离线的时候浏览已经加载并且缓存好的数据 加快加载速度。 ...
  • mockingbirds
  • mockingbirds
  • 2015年09月17日 23:37
  • 2091

HTML5开发Android程序

初遇WeX5的看过来 针对刚接触WeX5的用户建议通过起步官方在百度传课及腾讯课堂发布的《H5 App开发 WeX5入门课程》视频教程,使用配套的教材及案例素材学习,全部免费, 新来的小伙伴都去...
  • boonya
  • boonya
  • 2016年07月22日 16:59
  • 1848

html5之创建离线Web应用程序

离线应用程序缓存功能允许我们指定Web应用程序所需的全部资源, 这样浏览器就能在加载HTML文档时把它们都下载下来。 1)定义浏览器缓存: 启用离线缓存——创建一个清单文件,并在html元素的man...
  • bboyjoe
  • bboyjoe
  • 2015年07月29日 16:59
  • 1136
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:转十个使用HTML5开发的精彩应用
举报原因:
原因补充:

(最多只允许输入30个字)