天翼空间专家讲坛第 6 期回顾:HTML5 开发实践(含资料下载)

  • 贾国清

2012 年 5 月 30 日

话题:JavaScript移动AndroidHTML5iOS语言 & 开发

在 5 月 24 日,由天翼空间·开发者工厂主办,InfoQ 协助策划的第六期专家讲坛活动上,来自正益无线(APPCan)HTML5 应用研发团队研发总监朱炳芳向大家分享了在 HTML5 开发中的一些经验,并针对开发移动版 HTML5 应用中常见的问题进行了解答。

HTML5 实例讲解讲稿下载

朱炳芳首先通过一个比喻说明了 HTML5 目前的优势:

  • HTML5 的优势:HTML 是骨 CSS 是皮 JS 是肌肉
  • HTML5 是强悍坚固的骨架
  • CSS3 是精致到每个毛孔的皮肤
  • JavaScript 是久经考验的肌肉

目前所常见的 HTML5 新标签主要分为结构性标签、级块性标签、行内语义性标签、交互性标签:

  • 结构性标签:section,header,footer,nav,article
  • 级块性标签:aside,figure,code,dialog
  • 行内语义性标签:meter,time,progress,video,audio
  • 交互性标签:details,datagrid,menu,command

同时,HTML5 标准中还增加了 Web Storage、Notification、Web Database、Web Worker、WebSocket 等 Web API,针对设备层面还有 Geolocation、File 和 Contact 等。此外,CSS3 中也增加了文字、边框、阴影背景、选择器、动画、布局和媒体查询等特性。

朱炳芳接下来还谈到了开发移动版 HTML5 时的主要考量点:

  • 手机屏幕尺寸不一
  • 对 css3 支持度的缺陷(由标准尚未统一造成)
  • Web API 支持不够完善
  • 手机 Webkit 运行效率问题

由于 iOS 和 Android 采用 Webkit 引擎,对 HTML5 的支持比较到位,在讲解最后,朱炳芳还与大家分享了通过 media 区别不同分辨率、通过定高型布局和伸展型布局来解决布局问题的具体实现。

在问答环节,朱炳芳回答了一些网友的提问,详细信息如下:

问:HTML5 的视频是以什么形式播放的?需要调用第三方浏览器吗?

答:HTML5 视频是由浏览器去调用系统播放器。但是不同的商家对视频的格式不一样。

问:HTML5 使用 Canvas 组件,在手机上用浏览器访问动态效果比较慢?是否有更好的解决办法?

答:真没有,这就需要用手机的硬件去提升了。并且软件也需要完善,特别是在 Android 上。

问:我的问题:HTML5, 实际应用起来,是不是对服务器有特别的要求?有哪些要求?

答:配合服务器,可以做文件离线存储。以及一些 API 比如 Web Worker,Websocket 都需要在网络环境下并做些支持工作。

问:1. 对于一个初学 HTML5 的菜鸟,你有什么好的建议呢?

答:最近的一本书《论道 HTML5》还不错。当然最好是做一些项目,实战中提升能力。

问:如今 HTML5 在很多领域都获得了认可,看到 HTML5 有一个对“离线开发应用”的应用,这个功能是否已经较完善,

答:manifest 文件就是用来做这些工作的。但配 manifest 需要 Web 服务器的支持。

问:想问一下朱老师 在 WindowsPhone 中 HTML5 的支持情况?

答:WP7 支持 HTML5 跟 iOS 比,基本上是一半的水平。但是据说在 Win8 中会支持比较全面。

问:HTML5 在 Android 上那么多问题,是 Android 系统自身的原因吗?

答:嗯,是 webkit 版本不断更新,且 Android 碎片化太严重。版本升级也不好控制。

问:请问老师,一般触摸后移动几个像素以内可以视为点击 ?

答:需要设开关,触摸开始,开,触摸结束,关。然后在触摸过程中,看移动位置,可以大致模拟出点击事件。

关于专家讲坛

天翼空间开发者社区专家讲坛是天翼空间开发者社区(www.189works.com)2012 年针对开发者推出的一项提升专业能力的系列讲座,每周四晚,邀请移动互联网开发领域的权威专家,通过语音频道专题讲座,线上论坛访谈,以及微博、QQ 群线上同步直播的形式,为社区的开发者用户提供系统的技术讲座,答疑,以及运营知识方面的培训。

往期内容回顾

关于专家讲坛更多详情,请浏览官方网站。InfoQ 也会对后续的活动进行跟踪报道。

关于社区活动的更多详情,欢迎查看 InfoQ 维护的社区活动日历,也欢迎关注 InfoQ 官网微博(@InfoQ),获取实时的活动信息!

JavaScript移动AndroidHTML5iOS语言 & 开发