HTML5利用现代设备传感器轻松地提供高级的Web用户体验

今天,我们在"> HTML5Labs.com 上发布了 W3C DeviceOrientation 事件规范草稿的原型实施。此规范定义了提供设备的物理方向和运动相关信息的新 DOM 事件。此类 API 将允许 Web 开发者利用现代设备的传感器轻松地提供高级的 Web 用户体验。

开发者获益

利用设备方向 API,开发者可以探索游戏的新输入机制、应用程序的新笔势(例如“摇晃以清屏”或“倾斜以缩放”)或者甚至放大实际体验。原型的安装包括一个示例游戏,帮助您开始了解 API。

该视频以动态形式说明本250.html">博文中介绍的概念。

如何工作

设备方向 API 公开了两种不同类型的传感器数据:方向和运动。

当设备的物理方向变化时(例如用户倾斜或旋转设备),将会在窗口触发 deviceorientation 事件,并提供旋转的 alpha、beta 和 gamma 角度(以度表示):

<div id="directions"></div>

<script>

window.addEventListener("deviceorientation", findNorth);

function findNorth(evt) {

var directions = document.getElementById("directions");

if (evt.alpha < 5 || evt.alpha > 355) {

directions.innerHTML = "North!";

} else if (evt.alpha < 180) {

directions.innerHTML = "Turn Left";

} else {

directions.innerHTML = "Turn Right";

}

}

</script>

时间: 2024-10-24 00:17:15

HTML5利用现代设备传感器轻松地提供高级的Web用户体验的相关文章

哪些传感器技术将进一步提升智能家居用户体验?

BroadLink:IoVT+AI趋势不可阻挡 语音语义.声纹识别.人脸识别等相关传感设备将会加速真正的"智能"落地,用户体验将会带来质的飞跃.例如,家里的空调不单单依靠温湿度传感器进行自我调节,还将通过家庭成员的识别来自动选择模式,比如风向的调节,针对小孩.老人温度的调节.这些新技术将带来无限大的想象空间,再结合机器增强学习的算法,智能家居将会真正改变我们的生活方式.我们坚信IoVT+AI是不可阻挡的趋势,传感器网络将在其中扮演最重要的角色. 顺舟智能:语音识别等传感技术将提升智能家

ASP.NET 2.0: 使用自定义的配置文件提供程序管理Web用户

本文讨论: ASP.NET 2.0 配置文件提供程序 构建一个自定义提供程序 身份验证 和授权 本文使用了以下技术: ASP.NET, XML 借助 ASP.NET 2.0,您无需编写代码即 可向自己的网站添加身份验证.授权和各种配置文件.与以往相比,这显然是一个巨大的进步.与 ASP.NET 2.0 中的多数新功能一样,身份验证.授权和配置文件都有自己的内置提供程序.您可以将提供 程序看作是包含有完成某项特殊任务所用方法的模块.这些提供程序非常灵活,您可以通过指定属性对其 进行自定义.这些指定

html5利用websocket完成的推送功能(tomcat)

插播一条消息,5天后会删掉的 本人东北大学软件学院大三学生,现在正在寻找实习,qq:1021842556 利用websocket和java完成的消息推送功能,服务器用的是tomcat7.0,一些东西是自己琢磨的,也不知道恰不恰当,不恰当处,还请各位见谅,并指出. 程序简单来说,就是客户A可以发送消息给客户B,但有很多可以扩展的地方, 比如 1.如果加入数据库后,A发消息时客户B未上线,服务端将会把消息存在数据库中,等客户B上线后,在将消息取出发送给客户B 2.服务端也可发送消息到任意客户端上.

利用百度空间每天轻松获取100IP

百度  一打开百度首页,百度空间的链接迎面而见,可见百度对空间的重视程度.既然百度空间这么牛,我们完全可以利用百度空间来提高自己网站的IP的.         我把标题写成<利用百度空间每天轻松获取100IP>是只我目前的流量,也主要是因为我目前也在探测阶段中,如果你是个seo关键字高手,那么你利用百度空间每天获取上万IP也不是不可能的,这并不是天方夜谭.        下面我就自己的经验总结几点不成熟的建议,如果觉得不好也不要给我丢鸡蛋啊: (1)空间名字介绍的利用: 空间的名字我们可以用一

关于HTML5在移动设备上的支持情况

  知名的HTML5框架BOILERPLATE(其实是一套完整的前端实现和优化方案)的作者在github上构建了一个关于HTML5在移动设备上的支持情况的页面,相信对大家会比较有用:

HTML5 利用getUserMedia 录入语音,通过audio播放

问题描述 HTML5利用getUserMedia录入语音,通过audio播放,能否将录入的语音流,生成MP3等音频文件格式 解决方案 解决方案二:虽然我不知道具体怎么做,这个应该是可以实现的

小脑袋搜索调价助手教你利用百度贴吧轻松做推广

众所周知, 百度百科是百度众多产品中被寄予权重最大的一个产品, 不过在网络推广的众多方法中,百度百科就不是那么的重要的. &http://www.aliyun.com/zixun/aggregation/37954.html">nbsp; 原因有三个方面,第一,百度百科每个关键词只能建立一个,而且必须在保证这个关键词没有百度百科的前提下.   第二,百度百科审核太过严格.   第三,在百度百科上面加链接的数量有限.小脑袋搜索调价助手教你利用百度贴吧 轻松做推广,权重仅次于百度百科的

《渐进增强——跨平台用户体验设计》一第1章 为体验而设计1.1 优秀的代码,麻烦的设备

第1章 为体验而设计 渐进增强--跨平台用户体验设计"总有些人干过这种事,在网页顶部或底部搞一个小黄条,写上'请使用XX浏览器(如IE6)访问本网站以获得最佳访问效果'.要我说,这种人到底是多么想回到过去啊,回到Web诞生之前吗?那样你就不可能在别的电脑.别的文字处理器,或者别的网络来访问你这个不想让别人看的网站啦!" --Tim Berners Lee 互联网中,唯一不变的就是变化.四下观望,永远都有新的设计风格,新的语言.框架.工具.新的上网设备在博人眼球.乱花渐欲迷人眼,城头变幻

通过设计让学习变轻松 - Google 的 Primer 团队是如何做用户体验设计的

本文讲的是通过设计让学习变轻松 - Google 的 Primer 团队是如何做用户体验设计的, 学习一向是个苦差事,如何在设计上下功夫,让学习变得愉快呢? 说起来容易做起来难.直观上讲,人们通常不会全力以赴地学习新知识.调查显示,仅3%的美国成年人在他们的日常生活中会花费时间去学习.¹ 那么可想而知:尽管大量信息对我们来说触手可及,而所有的新技术都似乎在一夜之间涌出,97%的人丝毫不会为了提升自己而花时间寻求这些新知识. 这就是我们团队在Google打造 Primer,时面临的挑战,Prime