浅谈HTML5技术与新媒体应用

文｜郑红

在发展速度日新月异的移动端，HTML5更被认为是移动互联网行业的未来希望之所在，它仿佛天生为移动应用而生，可以提供大部分现有需要插件和扩展才能完成的功能，并且还具备Web数据存储、离线数据存储、图像增强等新功能，这使完整支持HTML5的浏览器具有了更强的本地数据处理能力，用户可以不受各种系统平台和软件插件的限制，只需通过浏览器就可以运行这些应用，在讲究更新、更快、更轻巧的无线新媒体领域，HTML5技术可谓风光无二，今天我们就来聊聊它和新媒体应用的那些事儿。

HTML5技术的移动开发特性

在联系到新媒体应用之前，首先我们需要了解HTML5技术究竟先进在哪里，相对传统技术而言，它与新媒体平台相结合的优越性又体现在什么地方。简单来说，我们可以从开发者的视角出发，将其特性归纳如下：

1、离线缓存可提供基础保障

HTML5 Web Storage API可以看做是加强版的cookie，不受数据大小限制，有更好的弹性以及架构，可以将数据写入到本机的ROM中，还可以在关闭浏览器后再次打开时恢复数据，以减少网络流量。同时不占用任何后台资源，减轻设备硬件压力，增加运行流畅性。

2、音频视频可满足自由嵌入

原生开发方式对于文字和音视频混排的多媒体内容处理相对麻烦，需要拆分开文字、图片、音频、视频，解析对应的URL并分别用不同的方式处理。HTML5在这个方面完全不受限制，可以完全放在一起进行处理，多媒体形式更加丰富灵活；

3、地理定位可实现优势放大

让定位和导航不再专属导航软件，地图也不用下载非常大的地图包，可以通过缓存来解决，到哪儿下哪儿，更灵活。现在嵌入LBS功能的应用越来越多，这也是移动设备与台式PC相比最大的优势之一，HTML5能把这个优势再度扩大化；

4、交互方式可获得丰富支持

HTML5提供的交互方式是非常丰富的，如提升互动能力：拖拽、撤销历史操作、文本选择等：Transition组件的移动效果、Transform组件的变形效果、Animation将移动和变形加入动画支持…数不胜数；

5、视觉设计必备的辅助利器

CSS3支持了字体的嵌入、版面的排版，以及最令人印象深刻的动画功能，用它来完成部分视觉工作，载入速度快，节省代码及图片，也为用户节约了带宽。

6、开发维护可享受方便低耗

HTML5技术可以给你更低的开发及维护成本，它使页面变得更小，减少了用户不必要的支出；而且性能更好使，耗电量更低；对于用户来说更是方便升级，打开即可使用最新版本，免去重新下载升级包的麻烦，使用过程中就直接更新了离线缓存。

7、App开发实现双平台融合

依照目前IOS和Android系统市占率的情况来看，未来如果想要在应用开发上有所建树，要么选择使用Objective-C+CocoaTouch Framework撰写iPhone/iPad应用程式，要么就是选择Java+Android Framework 撰写Android 应用程式，如果想要同时满足两种平台，势必需要付出很大的运维成本。而使用HTML5, CSS3 来撰写Web-based的应用程序，若要同时支撑IOS和Android系统只需维护一份程式码，灵活性更强。

以上的特性仅是冰山一角，其实总结起来可以用两句话概括：一是跨平台，二是开发简单，凭这两个杀手锏，就足以令时代倾心了，它让HTML5技术成为了移动互联网时代宠儿，如果手机应用开发者还在纠结于选择Android还是苹果IOS，而一个Web APP（HTLM5技术的典型代表产品）即可解决多款操作系统与浏览器，以及WAP与Web的兼容问题，那么有何理由不选择它呢？对于用户来说，无论看视频还是玩游戏，都不再需要费时费力地用手机下载软件，只需打开手机浏览器，就可以通过网页得偿所愿。

HTML5技术的新媒体基因

HTML5在移动开发端的长处诚然霸气十足，但仅是这样还不够，只有与目标行业完美的融合，才能最大限度的发挥其特点，基于此，它与新媒体结合的契机又在哪里呢？

对于媒体本身而言，媒体服务并不具有排他性，通常情况下一家媒体所能提供的观点、报道和服务内容，其它一家媒体一般来说也能做到。所以媒体服务的差异化在于媒体服务商的自我定位，各家媒体定位错开，有利于用户将自己所需的内容服务重新自由组合，这样比试图垄断某个用户群要靠谱得多。而这种趋势从技术的角度出发，无疑是更靠近html5理念的。

html5由于适合跨平台，可以为不同用户在不同场景下提供无缝对接的内容服务。在移动互联网上以浏览器为统一入口，利用html5将自身的内容输出能力转化为流量变现能力和品牌影响力，要比传统媒体自己的用户互导以及隔离用户群要靠谱得多，在这种传统媒体移动化的大时代背景下，凤凰率先推出了全面html5化的移动门户首页（3g.ifeng.com），并开发了多款基于HTML5技术的web app产品，这无疑是一种领先时代的尝试，这种尝试是新媒体下一步发展的杰出代表。

根据业界数据来看，在Html5技术的支撑下，目前各家新媒体来自移动浏览器的流量均明显呈上升趋势，这证明了只要能够满足用户需求，提升在移动场景中的内容使用体验，传统门户的市场依然不可小觑。这一事实对于传统媒体人在新媒体市场注入了一剂强心针，其实，所谓的传统媒体的“衰退”更像是一个伪命题，原因是传统媒体并不太理解移动互联网时代的“用户体验”，随着HTML5技术与新媒体行业的融合，所有的内容提供商都可以在移动互联网时代成为跨平台的新媒体中心。这是html5技术投射到产业现状中产生的最有意义的回馈，也是技术基因与媒体基因相融合的最完美体现。

HTML5技术的产品实例

介绍完HTML5技术的特点以及其与新媒体平台的契合点之后，我们可以通过几个实例来进行更直观的了解。

一般而言，我们在广义的讨论HTML5时，实际指的是Web App 相关技术的总称，包括 HTML5、DOM API、CSS3、面向 Web App 的页面设计模式等。所有这些工作大多都是围绕着对浏览器的扩展，希望能够减少浏览器对于插件的依赖，提供更多能有效增强网络应用的标准集。相对于其他应用形态，Web App的核心优势有两点：

一、开发模式的再次进化（对复杂性的封装），现在很多开发者都感觉到，原来必须要用客户端技术去做的效果或者功能现在基本都可以通过Web App的相关技术实现了，通过这些简单的语言和配合，就能做到很酷炫的效果。

二、具有卓越的互联互通特性，只需要一个链接就可以到达产品，对产品的推广和营销都有很大的帮助。（过去两三年里PC上网页游戏的快速成长便得益于此）。

目前在中国，对于web app支持程度最好的浏览器非UC浏览器及腾讯QQ浏览器莫属，在这两家平台上已经云集了数百款高质量的web app 产品，这其中便不乏凤凰新媒体的移动“集团军”。如图1、2、3所示。

通过以上实例，我们可以看到，基于HTML5技术的有力支持，用户可以通过浏览器实现流畅的节目欣赏体验，点击任意节目，即可立即调用播放器实现当前实时播放，省去了传统WAP冗余的跳转流程。与用户下载安装到本地的凤凰视频客户端相比，它在界面设计和内容展现上都采用了更适合手机浏览器观看的UI设计，同时，还解决了系统浏览器的播放限制，用户无需安装Flash插件，点击相应内容即可调起凤凰无线视频进行播放。

对于移动端的视频服务来说，基于HTML5的Web化视频呈现形式，除了能帮助用户体验到优质的界面设计及流畅的操作体验之外，还能实现自动续播功能等云视频功能，轻松、方便、快捷，充分满足了用户的碎片化时间需求。

HTML5技术与新媒体的未来

讲述过HTML5技术的种种美好前景之后，我们也必须要意识到，目前它并非已经达到尽善尽美的地步，辉煌的期待背后，还有很多瓶颈需要它去一一克服，比如HTML5技术标准尚待统一和完善、比如与本地应用相比，现阶段HTML5的应用性能一般相对较差、比如目前大多的HTML5应用都部署在服务器侧，对于手机经常出现网络状况不稳定情况，影响应用的完整性、稳定性、可用性、比如目前专门针对HTML5应用的设计开发工具还很少…林林总总，不一而足。

虽然现在的HTML5的确存在不少问题，但它就好比一个初生的婴儿，虽然他现在尚不可屹立，亦不能奔跑，但谁又能据此推断他以后不能成为一名飞人呢？纵观当今互联网的发展历史，有多少伟大傲人的技术革命不是在人们肯定与质疑的较量声中发展成熟，改变历史的呢？事实上，越来越多的世界行业巨头正不断向HTML5靠拢，除了苹果、微软、黑莓之外，谷歌的Youtube已部分使用HTML5，Chrome浏览器也已宣布全面支持HTML5，众所周知，Facebook更是倾其全力的以HTML5为阵地进行着移动端的革命。

我们有理由相信，在这场席卷全球的技术革命中，中国的行业先驱与新媒体巨头们亦不会落后，移动互联网时代大幕下，盛筵已经开始。

未来，为你而来！