华丽丽的HTML5新特性

标签: 华丽 丽的 html5 | 发表时间:2011-07-13 13:00 | 作者:CDCer Chris
出处:http://ucdchina.com/rss/all

Web2.0带来的丰富互联网技术让所有人都享受到了技术发展和体验进步的乐趣。作为下一代互联网标准,HTML5自然也是备受期待和瞩目,技术人员、设计者、互联网爱好者们都在热议HTML5究竟能带来什么。那么就一起来窥探一下这个还未诞生就已经声名在外的新标准吧。

在探讨HTML5的新特性之前,先说HTML5究竟离我们还有多远?用一张时间轴来说明两个关键点。

如图,在2012年,将会由W3C发布候选推荐版,这个版本的发布就代表着HTML5的规范编写已经完成了。而2022年推出的计划推荐版,则意味着至少会有两个浏览器会完全的支持HTML5的所有特性。2022年听起来似乎很遥远,但通过观察现阶段chrome, firefox , safari,IE等浏览器对HTML5的支持程度,可以看出各大浏览器厂商都非常积极。应该不需要到2022年就会有至少两个浏览器支持HTML5。因此现在关注和讨论HTML5,了解HTML5的新特性,为以后的产品规划并非毫无意义。

HTML5其实是关于图像,位置,存储,速度的优化和改进,以下分别论述。

 

图像:
到目前为止,基本上想要直接在网页上进行绘图还是不能轻易完成的,即使是几何图形也不可以。在浏览器当中直接能跟图片的交互操作也很有限,多数是保存和点击。如果希望能够跟图片进行更多的操作或者在浏览器当中画出图形,就需要flash, silverlight 这类插件来帮忙。

HTML5了解人们的需求,HTML5已经确定引入canvas标签,通过canvas,用户将可以动态的生成各种图形图像,图表以及动画。下面是一个示例网站,展示了不通过插件,使用HTML5直接绘制图片有兴趣的朋友可以自己亲自去试玩一下。

 

不仅如此,HTML5也赋予图片图形更多的交互可能,HTML5的canvas标签还能够配合javascript来利用键盘控制图形图像,这无疑为现有的网页游戏提供了新的选择和更好的维护性和通用性,脱离了flash插件的网页游戏必然能够获得更大的访问量,更多的用户。一些统计数据表格也可以通过使用canvas标签来达到和用户的交互,例如某网站对2009年德国的大选情况统计就全部通过了HTML5来实现用户点击和数据的变更,点选某个区域就可以实时的看到该区域各党派选票率,大大增强了统计图表的可读性。

通过HTML5对图形图像的新特性,未来可能会有在线绘图的工具和应用,人们将不再需要安装painter这类基本的绘图软件,而直接使用基于浏览器的应用。而对用户体验人员和开发者来说,将能够在用户毫不知情的情况下收集和生成用户鼠标的浏览轨迹,从而生成一部分可用的热点图,这对于找出网站的不足,提升用户体验有着重要作用。现在对canvas标签的支持情况如下,可以看到,基本所有的浏览器都已经不同程度上支持了这一特性。

 

位置:

这个大头针图标从2010年到2011年在各类应用和互联网上应该是非常火爆了吧?没错,就是地理位置,各处都可以看到人们在签到,查找自己当前的地理位置和周边。作为新标准的HTML5自然也不会置身事外,HTML5通过提供应用接口—Geolocation API,在用户允许的情况下共享当前的地理位置信息,并为用户提供其他相关的信息。

HTML5的Geolocation API主要特点在于:1. 本身不去获取用户的位置,而是通过其他三方接口来获取,例如IP,GPS,WIFI等方式。2. 用户可以随时开启和关闭,在被程序调用时也会首先征得用户同意,保证了用户的隐私。

 

存储以及速度:
现在,web应用的火爆已经是不折不扣的现实,并且相对传统的应用,web应用不需要安装,所占空间小的特性使其具备传统软件应用所不具备的优势,然而,目前制约web应用最大的问题在于网络连接不能够无时无处。在飞机上,汽车上,火车上,有很多地方都无法被网络信号所覆盖,因此web应用也就无法使用。

HTML5的离线存储使得这个问题迎刃而解。HTML5的web storage API 采用了离线缓存,会生成一个清单文件(manifest file),这个清单文件实质就是一系列的URL列表文件,这些URL分别指向页面当中的HTML,CSS,Javascrpit,图片等相关内容。当使用离线应用时,应用会引入这一清单文件,浏览器会读取这一文件,下载相应的文件,并将其缓存到本地。使得这些web应用能够脱离网络使用,而用户在离线时的更改也同样会映射到清单文件中,并在重新连线之后将更改返回应用,工作方式与我们现在所使用的网盘有着异曲同工之处。

感兴趣的朋友们可以试下这个网站,就属于便携笔记本的离线应用,可以在离线的时候记录一些便签,在下次上线,或使用其他平台登录时,仍然能够看到之前的记录。

缓存的强大并不止在于离线应用,同样在于对cookies的替代,目前我们经常使用的保存网站密码,使用的就是cookies将密码信息缓存到本地,当需要时再发送至服务器端。然而,cookies有其本身的缺点—4KB的大小和反复在服务器和本地之间传输,并且无法被加密。对于cookies的反复传输,不仅浪费了使用者的带宽、供应商的服务器的性能,更增加了被泄露的危险。

Web storage API 解救了cookies, 据现有的资料,web storage API将至少支持4M的空间作为缓存,对于日常的清单文件和基础信息,应该已经足够使用了,毕竟4KB我们不是都使用了这么多年了?速度的提升方式在于,webstorage API 将不再无休止的传输相同的数据给服务器,而只在服务器请求和做出更改时传输变更的必须文件,这样就大大节省了带宽,也减轻了服务器的压力。可谓是一举数得!

 

小结:
HTML5的还有很多令人心动的特性和新功能,限于篇幅无法一一举出,但我对于HTML5的前景还是非常看好的,毕竟丰富web应用的大势已经掀起,web2.0的浪潮也正在继续,让我们共同期待HTML5的降临

 

参考:

源地址:http://cdc.tencent.com/?p=4012

相关 [华丽 丽的 html5] 推荐:

华丽丽的HTML5新特性

- Chris - 所有文章 - UCD大社区
Web2.0带来的丰富互联网技术让所有人都享受到了技术发展和体验进步的乐趣. 作为下一代互联网标准,HTML5自然也是备受期待和瞩目,技术人员、设计者、互联网爱好者们都在热议HTML5究竟能带来什么. 那么就一起来窥探一下这个还未诞生就已经声名在外的新标准吧. 在探讨HTML5的新特性之前,先说HTML5究竟离我们还有多远.

华丽的骨骼关节耳机

- Zoe - 创意酷
  这是一款超酷的耳机设计,来自设计师Catherine Wong之手,我喜欢它复杂的结构和质感,在造型结构设计上模仿人类骨关节的连接方式,很自然的弯曲成了耳机的造型,使用者可以灵活的调节耳机的弯曲度来适合自己,让自己在最舒适的状态下收听美妙的音乐. 该文来源于创意酷,这里还有能买到的创意点此购买.

60个超实用华丽的GUI PSD设计包

- will - 互联网的那点事
在这个移动互联网时代,手机无处不在. 科技让手机不仅仅只是声音传递的工具,更多的开始网络化的互通. 随着这个趋势未来的互联网很大一块空间将是来自于移动用户的. 于是乎良好的交互设计和优秀的图标设计将对整个用户体验来说是至关重要的. 我们下面所展示的就是60个实用优秀免费的手机图形用户界面GUI PSD设计包,希望你能从中学习到好的设计思想,也可以减少你不必要的设计流程,更高效的完成设计项目.

这些华丽的广告,画在手上 [23p]

- zhu - 煎蛋
美国通信巨头AT&T办了一次广告公开征集大赛,而最终获得百万美元大奖的是墨西哥艺术家Jose Estrada制作的这一组画在手上(当然,有可能只是后期PS上去的……也差不多啦)的广告们,每一幅都精心设计成充满广告投放地民俗风味的样式,比如中国地区的广告就出现了巨龙和长城两种. (由于flickr传图会颠倒顺序,本来是按字母顺序的,现在成了倒序了……).

你华丽的词藻慌乱了我的青春

- Xu - 5time经典语录网
  不管你爱与不爱,都是历史的尘埃.   钱钟书说:目光放远,万事皆悲.   一个好友说:再过二十年,现在追求的种种都灰飞烟灭了.   虽然《好了歌》写尽了这一类的感受,但这句歌词足以相媲美.   海子有诗云:我要挥霍青春的岁月,然后去做铁石心肠的船长.   丰子恺有一张漫画题名为:人散后,一钩新月天如水.

30个精美华丽的iPad应用界面

- Jie - 译言-每日精品译文推荐
来源30 Excellent iPad App Interfaces | Inspiration. iPad, often called a revolutionary device, came to the design industry with new possibilities for designers to show off what they can create for this modern gadget.

超过 25 个华丽的 Web 日历组件

- 子予 - 我爱互联网
Web 应用上经常需要用到日历组件,例如生日选择、日程提醒、日期相关设置等等,下面是超过25个的界面非常华丽的日历组件. 高效 JavaScript. Javascript下实现MAP. 15款很棒的 JavaScript 开发工具. 8个惊艳的Javascript WebGL示例. 10个对JavaScript开发者超级有用的工具.

FeedSquares – 华丽的 Google Reader 阅读体验 | 小众软件 > Google

- 蕗 - 小众软件
FeedSquares 是款 Chrome 扩展,它能让你的 Google Reader 以更加华丽的方式展示出来,类似平板电脑效果. 今日在逛 Chrome 扩展页面时,FeedSquares 名列今日最火爆扩展,一款 Google Reader 另类阅读方式. FeedSquares 将你的订阅每个条目变成小方块,方块上显示未读数目,点击方块会在页面底部出现横幅状的文章名,点击便会出现详细内容.

30个华丽的Photoshop动作(Actions)下载

- 至尊宝的背影 - 创意悠悠花园
没关系,用Photoshop动作可以帮你搞定,今天分享:30个华丽的Photoshop动作(Actions)下载,希望其中有你喜欢的. Read the rest of 30个华丽的Photoshop动作(Actions)下载 (136 words). © emilo for 创意悠悠花园, 2011.

35款华丽的免费的PSD网页按钮

- allentranks - 我爱互联网
最近我一直在为我的新项目猎寻免费的网页设计元素,我意识到有太多的高品质的资源. 这一次,我发掘了35款华丽的免费的PSD格式网页按钮. 译自:http://www.queness.com/post/9134/35-gorgeous-free-web-buttons-psd. 65个免费的高质量的PSD文件下载.