浅谈HTML5技术在新媒体上的应用

□刘子扬



浅谈HTML5技术在新媒体上的应用

□刘子扬

摘要：互联网的进一步发展，将新闻传播从以前单纯的平面文字图片传播，转变为文字及多种媒体形式共同传播，新闻传播的形式更为多样，用户的互动积极性更高，传播速度也更快。随着移动互联网的到来，一种新的技术标准——HTML5出现了。新技术的出现，将给网民带来更为丰富的互联网体验，主要体现在：新媒体的终端便携性，表现的形式更为丰富，用户在移动数据流量下也能快速打开。

关键词：新闻传播；HTML5；互联网体验

一、什么是HTML5

HTML也叫超文本标记语言，它的出现是为“网页创建和其它可在网页浏览器中看到的信息”设计的一种标记语言。2012年12月17日，HTML5正式发布，以往的落后的技术无法满足我们的需求，随着HTML5的出现，页面可直接播放多媒体元素，无须第三方的插件支持，Web属性带来的跨平台能力，可以一次开发，各系统各终端普遍适用，满足跨平台的需求。

二、HTML5的优势

（一）响应式设计，可实时修改

传统网站，企业中的个人是没法用公司的网站的，因为它的管理者是网管；App的开发周期长、成本高，升级更新工作量大；传统视频TVC有制作周期长，不方便修改，不能互动的缺点；而更前沿的交互式视频，虚拟现实和增强现实VR/AR技术，由于尚未普及、成本高、制作周期长，即使是样板实践，也鲜有成果。而较之于上述内容载体形式，一个HTML5，平均3-5天就能完成，更为轻便，即便需要定制，一般1-2周左右就能搞定，还能实时修改。

（二）跨操作系统，不受操作系统和浏览器限制

PC浏览网络信息依靠浏览器，所以我们有超级入口百度、Google。当我们在移动设备浏览网络信息时，各种场景下使用的App都可以是HTML5的介质。用HTML5制作内容，除了目前主流浏览器都支持的大好环境之外，也可以不用浏览器去浏览，突破浏览器的限制。

微信、微博、天猫、京东、新闻客户端，所有支持Web view的App都可以很完美地使用HTML5技术。尤其是微信给了HTML5最好的支撑，H5成了最佳的移动端创意内容承载形式。

（三）跨平台特性

大家经常在微信里看到像幻灯片一样的很炫酷的邀请函、宣传册等，就是用HTML5做的。建站、产品介绍、招聘、邀请函、活动报名……可以说，H5涵盖了所有基于移动社交商务场景中的内容载体形式。PC时代的网页能做什么，HTML5在移动端就能做什么。

三、HTML5的技术特点

HTML5的优势目前主要体现在终端上，它具有以下技术特点。

（一）图片内容尽量使用PNG的网络图片格式，可以保证图片的质量，同时又使得图片的大小控制在一定范围以内，适合网络传播。

（二）页面加载的时候，通过预加载技术，同时判断用户手机屏幕尺寸，获取屏幕尺寸大小后，再自动进行拉伸，从而保证了用户的屏幕打开时，页面的内容是全屏显示，从而使得整个页面满屏展示，在不同的手机端展示效果一致。

（三）在以往的动画实现过程中，我们都需要加装一个叫FLASH的插件，但是HTML5技术提供了良好的交互接口，通过判断用户行为，实现了页面的翻动。由于考虑到用户的阅读速度和理解内容的时间都各有差异，虽然使用了预加载图片等技术，但在用户打开页面时，HTML5仍然将页面的翻动时间决定权留给客户，如同翻动纸质媒体一样，营造良好的互动翻书效果。

四、HTML5的新媒体基因

由社会科学文献出版社出版的《中国新媒体发展报告（2015）》的发布，标志着新媒体发展成为国家战略、媒体发展进入新阶段。在这一战略布局下，中国成为移动互联网大国，微传播正成为一种主流传播方式，各种自媒体发展迅速，媒体融合转型加快。

随着互联网的发展，新媒体日渐成为人们获取信息和新闻消息的主要来源之一。微软首席执行官史蒂夫·鲍尔默预测：“今后10年内，所有媒体消费都将通过互联网渠道进行。届时，传统意义上的印刷版报纸、杂志将不复存在，所有东西都将以电子版的形式发行。”

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

统一、易于试错和改善、可扩展性强——HTML5的这些技术特点无疑非常适合媒体等内容服务商，尤其是传统媒体移动化。

HTML5可以为不同用户在不同场景下提供无缝对接的内容服务。在不受数据大小限制，有更好的弹性以及架构情况下，还可以将数据写入到本机的ROM中，也可以在关闭浏览器后再次打开时恢复数据，减少网络流量。同时不占用任何后台资源，减轻设备硬件压力，增加运行流畅性。原生开发方式对于文字和音视频混排的多媒体内容处理相对麻烦，需要拆分开文字、图片、音频、视频，解析对应的URL并分别用不同的方式处理。HTML5在这个方面完全不受限制，音频视频可满足自由嵌入，可以完全放在一起进行处理，多媒体形式更加丰富灵活。HTML5技术的开发及维护成本很低，它使页面变得很小，减少了用户不必要的支出；而且性能好使，耗电量低；对于用户来说，可以免去下载升级的麻烦，打开即可使用最新版本，使用过程中就直接更新了离线缓存。

其实HTML5的优势可以用两句话概括：一是跨平台，二是开发简单，凭这两个优势，HTML5有能力成为新媒体的传播利器。

五、HTML5在新媒体上的运用实例

在这里，笔者以2015年端午节前夕玉林日报社基于HTML5技术，以玉林美食文化为背景，制作的一个场景式的小画报为例，使用数据来说明HTML5在新型网络下的传播优势。

背景主题：玉林饮食文化

表现形式：手机端场景式

风格：中国风

标题：这才是老玉林的味道

制作思路：通过充满中国风的毛笔字，书写一首童谣，引出内容，每隔一秒输出下一行，待全部的内容显示完成后，停留三秒钟，主题“这才是老玉林的味道”缓缓显示，配合背景音乐，整个动画感瞬间展示出来。当首个场景加载完毕后，用户需要通过手指进行屏幕滑动，展示出下一个页面内容，提高了参与度和积极性。在内容编排方面，也尽量在一个页面内将一个小章节的内容展现出来。同时，在制作过程中，一方面要考虑用户的打开速度问题，另一方面又要考虑用户手机屏幕尺寸不同的问题。为此，主要做了以下的优化：

（一）图片内容尽量使用PNG的网络图片格式，从而保证的图片的质量，同时又使得图片的大小控制在一定范围以内，适合网络传播。

（二）页面加载的时候，通过预加载技术，同时判断用户手机屏幕尺寸，获取屏幕尺寸大小后，再自动进行拉伸，从而保证了用户的屏幕打开时，页面的内容是全屏显示，从而使得整个页面满屏展示，在不同的手机端展示出的效果实现一致。

（三）在以往的动画实现过程中，我们都需要加装一个叫FLASH的插件来实现，但是在HTML5的技术下提供了良好的交互接口，通过判断用户行为，实现了页面的翻动。一方面由于网络的因素，虽然使用了预加载图片等技术，但是由于用户的阅读速度和理解内容的时间都各有差异，因此，用户在打开页面时，将页面的翻动时间决定权留给客户，如同翻动纸质媒体一样，得到了良好的互动翻书效果。

六、效果反馈

经过多个手机客户端和不同的网络环境测试，作品均达到了预期的效果。该画刊发布在玉林日报的微信公众平台，18时发布后，截至当晚22时，浏览人数就接近16000人，1000多人进行了分享，达到了令人满意的效果。在微信公众号的后台中，我们看到了很多访问者对该画刊的好评。

本次做的画刊，仅仅是一个小小的尝试，但是经过数据比对可以发现，现在的读者对于HTML5的传播模式更为接受，只要觉得具有分享传播价值的资讯，读者会在自己的群体中进行分享。

（作者单位：玉林日报社）