10件开发者和老板都要知道的HTML5的那些事

简介: 1. HTML5 标签没什么大不了的. 理解这句话你需要先了解HTML 5。它仅仅是一个html4.01的一个升级版本?或者是它是完全不同的新版本(无处不在的大肆宣传可能会让你有这种感觉)?答案是两种理解都有部分正确。

1. HTML5 标签没什么大不了的.

理解这句话你需要先了解HTML 5。它仅仅是一个html4.01的一个升级版本?或者是它是完全不同的新版本(无处不在的大肆宣传可能会让你有这种感觉)?答案是两种理解都有部分正确。HTML 5包括许多简化和附加的网页标记,所以称它为升级版本也是公平的(虽然也有一些大的补充标签,如视频<video>和画布< canvas>)。但是,HTML 5也可以被认为是一个技术组合,包括一整套和HTML 5标签交互的API。还有CSS 3,为HTML 5带来了一些强大的新风格和动画效果。

如果你已经很熟悉html 4,那大多数新的标签会很容易使用。

2. HTML 5的力量源泉是JavaScript.

虽然我们都听到的总是“HTML 5″, 但真正的无名英雄是JavaScript和一套新的API。这些API包括获取地理位置(Geolocation),图形绘制(a drawable canvas),个性化的视频体验(custom video experiences),拖放,大量的本地存储(local storage),甚至多线程(更像是当前的应用程序)。这只是已经命名的一些API而已。

过去几年,Javascript的名声可不好,其实它是一个复杂和强大的语言。现在,它也是一个快速的语言,在过去十年里,速度得到近似100倍的改善(还会得到更多的改善)。当然,它仍然有它的内伤,但通过了解它们就可以有避免的方法。如果你知道他们。它也很容易入门。

所以,如果你想运用HTML 5,你就要JavaScript。

3. 标准来自哪里并不重要(It’s not which standards document an API comes from that is important).

当我们写"Head First HTML5 Programming"时,常听到"Geolocation并不是HTML5正式规格的一部分!" 是的. 但它是W3C的正式标准之一,而且事实上这并不重要。重要的是多少现在的浏览器已经支持Geolocation 了?我们更在意这个。

当然,这里有一个时间的问题。但当我们写代码时,重要的是“用户需要它吗?(Will it be there for my users)“

4. 怎么知道该不该上HTML5了(How to know if you should embrace HTML5 now).

如果你的用户使用移动设备,你就应该考虑使用HTML 5。HTML 5浏览器是在大量的智能手机和平板上很普遍了。如果你的用户主要在桌面电脑上使用,你也应该去好好研究一下HTML 5。但是如果他们使用的是旧版本的浏览器,那就需认真评估一下了。

无论何时,你想要了解浏览对HTML 5支持的情况,都可以借助下面这些很棒的资源来了解。包括:

当然,你也要尽量在各个浏览器上测试一下你的应用程序或网页。

5. 进退自如: 优雅降级和功能检查(graceful degradation and feature detection).

通过JavaScript有许多方法可以用来检测HTML5的支持能力。通过创建一个对象,通过检查属性,通过使用自定义方法如<video>的canPlayType方法,这些都可以。

不用说,如果用户的浏览器不支持新特性,你需要提供备用方案。(比如,使用图片或flash来代替HTML5的video和canva, 或者显示一段信息告诉用户为什么没看到预期的效果。). 有没有更好的方法呢?

有的.  Modernizr JavaScript library 是一个开源库,可以很方便的检查HTML5和CSS3的支持情况,并加载相似的资源, 如不同的JavaScript脚本, CSS文件, 图片等等,取决于支持的程度.


6. <video>标签很简单; 可是编码呢?

通过增加一个<video>元素到您的网页,就可以轻松地在网页上播放视频,并且不需要其它插件。但说到视频格式,不幸的是,支持的协议很少。今天,支持三个不同的格式:WebM,MP4,以及Ogg,而至于是哪一个,和取决于你使用的浏览器。如果你的用户集中在某个平台,相对比较容易。比如,针对iPad用户,你只需要提供MP4格式就可以了。如果你想支持所有流行的浏览器,那么你就要提供所有三种格式的内容。

怎么做?你可以使用<video>和<source>同时提供三种视频文件。如果都不支持,你当然还要提供一个备案。

所以,将视频放到网页很容易了,但如何让用户得到可以真正播放的视频仍然有些麻烦。

7. <canvas>标签并不只是为了绘图.

<canvas>为HTML添加了一个二维的绘图区域。乍一看,<canvas>适于创建一个简单的绘图程序,可以使用线,弧,和矩形。

事实上,如果看一下演示<canvas>的网站,你会看到它被用于任何基础绘图、交互式绘图应用、制作动画、游戏,甚至渲染三维场景。

一个有趣的应用是视频处理。你可以从player取得帧数据(frame data)并加以处理,而后写入到一个<canvas>上显示出来。同样的,你可以在游戏中使用一个canvas提供图像的双缓冲。

所以,不要小瞧了<canvas>,它是HTML 5一个强大的新功能,可以用于各种图形应用, 在现代的浏览器中的JavaScrip的性能提升也足以应付图像和视频处理需求。

8. CSS3支持通常由JavaScript提供的动画效果.

通过CSS3,我们可以轻松实现以前只能通过JavaScript实现的网页效果。

例如,当鼠标划过时,需要组件可以淡入淡出,以前必须写复杂的JavaScript代码或者使用一个UI库(jQuery,scriptaculous)。而通过CSS3,你就不再需要写代码了。

Transition(过渡) 和 transform(转换) 是CSS3中的新特性,你能通过它们创造有趣的效果和动画。比如你可以使用元件不透明性(opacity)的过渡(transition)实现淡化的效果。还可以通过转换(transform)函数实现多个元件的旋转和缩放。组合起来就可以创造出很酷的动画效果。

 

9. JSON主导新的内容格式.

2004年XML就努力统治世界,然而到现在还没有达成。

目前很多开发商正使用JSON取代XML。JSON可以使用与代码相同的格式和序列化(serialized)的对象。当得到远程的JSON数据,可以从浏览器本身得到快速的解析。每一个浏览器都内置了JSON的对象和两个方法:stringify (字串化):用来从一个对象生成JSON数据字串,parser(解析): 用来从字串创建一个对象。

今天JSON被广泛应用在网络服务应用程序,如FaceBook和Twitter。而且,由于XHR有跨域的限制,许多网络服务的都实现了JSONP(JSON with Padding)。它本身是一个简单的概念,但非常实用。

10. XHTML已死,却又永生(XHTML is dead, long live XHTML).

随着XHTML 2的逝去和HTML 5的崛起,XHTML早已失去了网络语言的领先地位。但并不意味着你不能使用XHTML,事实上,我们叫它XHTML5。

记住,XHTML和HTML之间的差异是XHTML使用严格的语法。受益的是它是可扩展的(因为它是XML), 缺点是XHTML过于严格,发挥的没有其他语言那么好(如CSS和JavaScript), 也并不是为构建Web应用而设计的。

所以,现在写XHTML5,添加命名空间(namespace)和使用规范的语法就可以了。

(see the presentation (Webcast) for more details).

原文地址:http://wickedlysmart.com/2011/ten-things-every-developer-and-manager-should-know-about-html5/
转载请注明出处:http://blog.csdn.net/horkychen

参考:  HTML5 Video/Audio网页信息汇总

目录
相关文章
|
JavaScript 前端开发 程序员
好程序员分享大势所趋 HTML5成Web开发者最关心的技术
  好程序员分享大势所趋 HTML5成Web开发者最关心的技术,最近,在Stack Exchange上出现了一个比较热门的问题:Web开发者最头疼的问题是什么?结果并不是大家通常认为的兼容性问题,而是关于HTML5。
1279 0
|
Web App开发 存储 监控
为 Web 开发者准备的 20 个有用的 HTML5 教程
HTML5: 基础知识 从头开始编码的HTML5布局 用 HTML5 设计一个博客 用 HTML5+CSS3 创建优雅的网站 用 HTML5 设计一个很酷的 iPhone App 网站 HTML5 应用基于浏览器的存储 在手机上使用 HTML5 创建离线的 Web...
905 0
|
移动开发 API 开发者
为开发者和设计者准备的 HTML5 文件上传教程
本文主要是收集了一些使用 HTML5 进行文件上传的教程: 纯 HTML5 文件上传 带进度条的 HTML5 文件上传 HTML5 拖放式文件上传的 API 教程 全新的 HTML5 多文件上传 使用 jQuery 的 HTML5 文件上传 HTML5-powered...
823 0
|
移动开发 API 开发者
为开发者和设计者准备的 HTML5 文件上传教程
本文主要是收集了一些使用 HTML5 进行文件上传的教程: 纯 HTML5 文件上传 带进度条的 HTML5 文件上传 HTML5 拖放式文件上传的 API 教程 全新的 HTML5 多文件上传 使用 jQuery 的 HTML5 文件上传 HTML5-powered...
991 0