HTML5：移动端新闻媒体的新选择

杨林

【摘要】2014 年10 月29 日，新一代的超文本标记语言第五次重大修改（以下简称HTML5）面世，将取代应用了十余年的HTML4语言成为新一代的Web 语言。与此同时，移动客户端成为媒体战的新阵地。而更加适应移动端展现的HTML5 语言，其诞生和推广为媒体提供了前所未有的新闻展现方式。

教育期刊网 http://www.jyqkw.com
关键词 新媒体HTML5 移动终端新闻传播

经历了近十年的筹划与打磨的新一代的超文本标记语言HTML5，于2014 年10 月29 日制定完成并公开发布。它被业内公认为是近十年来Web 标准最大的飞跃，将成为下一代的Web 语言。相比于上一代语言，HTML5 能够更好地适合移动端上的信息呈现，并为新闻内容更多样的呈现提供了技术可能。

2014 年我国手机网民规模已达5.27亿人，“新媒体”早已不是一个新鲜的概念，它切实地影响着媒体生产和消费的格局。抛去传统媒体和新媒体的竞争不谈，即使是“新媒体”这个大概念内部，也有着不同媒体形式的此消彼长。新闻门户网站的媒体受众逐渐被分流，移动新闻客户端APP 和基于社交媒体传播内容的新闻公众号快速发展，并吸引了大批受众。

微信是当今较为主流的手机社交媒体之一，目前海内外已有6 亿多注册账号，其中活跃用户超过2.7 亿。用户可以通过简便的操作将网页分享至微信“朋友圈”，数量庞大的媒体公众号则成为这些分享的信息源。

微信公众账号的内容编辑器容许嵌入HTML5，这为HTML5 制作的内容在朋友圈的流行提供了可能。用HTML5 技术做出的新闻，由于美观有趣，易于分享，在朋友圈里的热度逐渐提高。这类新闻内容通常有三种表现形式。

一、用HTML5 表现新闻的三种主要形式

绘图功能是HTML5 相比于前代语言所做出的重要突破之一，也是HTML5 语言的一个重要特性。从用户体验的角度来说，它所呈现的效果类似于电脑端网页的flash。但Adobe 公司在2012 年已经宣布放弃占据多年主流位置的Flash 在移动端上的继续开发，而HTML5+Javascript 或者HTML5+Jquery 可以在网页上做出任何的二维动画（使用HTML5 配套的CSS3 甚至可以实现三维渲染，即做出三维效果的动画），而且其作为网页元素可以监测用户在页面上的所有交互行为。有理由相信HTML5 页面的动画效果将在移动端大有可为。

目前，微信上媒体用HTML5 来表现新闻的主流方式有三种：幻灯片式展示、交互式动画和功能性页面。

1、幻灯片式展示

幻灯片式展示，即将图片、文字或者再加上音乐、视频等，以简单的方式组合在一个或多个HTML5 页面上，通过滑动实现内容间的切换，并辅以一定的过渡动画所形成的展示效果。这是应用HTML5最常见、最早产生也是最简单易行的呈现方法之一。

幻灯片式展示能够较好地切合“读图时代”受众的需求。虽然本质上仍然是图片新闻，但是利用时差滚动效果、声画结合等方式，以及图片之间过渡动画效果的交互设计，可以让“静”的图片“动”起来。如果说以往“图片+文字”的呈现方式是平铺直叙，那么幻灯片式的展现方式就可以被称为“娓娓道来”的叙述。

在大数据时代，这种展示非常适合展现数据新闻。运用动画效果和图片设计，让枯燥的图表能够以活泼的方式说明问题，从而优化信息传播效果。

2、交互式动画

交互式动画最初是以小游戏的形式在朋友圈中传播的。这种游戏的特点是操作简单，只需要手指的滑动；但是用户的操作又是十分重要，它决定着整个动画的播放进度。操作手机的手势成为了动画中重要的一环。

如果把这种呈现方式和新闻相结合，我们就会看到一些“游戏化新闻”。网易新闻的新媒体实验室是HTML5 新闻呈现的早期发起者之一，作品中不乏这种“游戏化”作品。在电影《星际穿越》上映后，网易新闻紧追热点推出了《带你体验真实版“星际穿越”》，让受众自身扮演“旅行者一号”，通过点击手机屏幕参与“宇宙旅行”，让一则科技软新闻以游戏的方式呈现。

不仅是软新闻，重大时事类新闻也可以如此跟进。比如网易新闻在APEC“习奥会”之后推出的一则《和奥巴马是这样夜游中南海的，你感受一下》的动态新闻也取得了可观的传播效果。

3、功能性页面

功能性HTML5 页面具有实用性，能够过继甚至取代移动端应用软件的一部分功能。如在北京市地铁宣布涨价细则之后，百度地图推出了“告别地铁2 元时代”的功能性HTML5 页面。用户可以在输入始发地和目的地后，查询涨价后的票价。旁边设有滚动的评论区，在查询的同时展示网友对此事的实时评论，增加参与感。

这种页面的功能性高过时效性，因此由于时效性减弱而带来的传播热度降低的过程较为漫长。对于功能设计较好的功能性页面来说，其传播过程是可以长期持续的，通过点对点分享的不断传递为媒体吸引更多的潜在受众群体。可以说，内容和形式本身就是最好的广告。

此外，功能性页面“随时点击、随时使用”的特性还能够省去用户下载应用、注册与登录等繁琐的手续。对于像查询地铁价格这种简单的行为，功能性页面显然更为便捷。而且有需求的用户通常会将其转发到自己的朋友圈以便下次使用，这又形成了对内容的传播。

二、新闻媒体应用HTML5技术的优势目前，使用HTML5 呈现的新闻作品仍然不多，但笔者相信这种技术会在媒体层面有更广阔的前景和发展，因为基于HTML5 所呈现出的新闻作品具有以下三种主要优势：

1、降低技术门槛

早在网络媒体诞生之初，就出现过一些用动画制作的小新闻，那时已经有了新闻趣味化、可视化的观念。然而这些动画大都是用Flash 制作的，依靠视频网站的播放器呈现，不仅传播推广较难，而且动画的制作也要求较高的软件使用水平。

而现在随着HTML5 页面的逐渐流行，市面上有许多HTML5 页面编辑器（如MAKA、HTML5 Maker 等），可以通过简单直观的操作完成新闻的可视化过程。朋友圈等移动端中的大部分幻灯片式的展示都是用这种工具生成的。

以时下较为常用的在线生成HTML5工具MAKA 为例，新闻制作者不用安装任何软件，登录网站即可进行内容编辑。MAKA 制作HTML5 手机页面的操作和制作PPT 幻灯片十分类似，内置有多种动画模板，制作者只需要在模板内部填充文字和图片即可，完成后即可直接在朋友圈中形成链接分享。整个过程中没有涉及HTML5代码语言层面的编写，没有网页制作经验和动画制作基础的媒体从业者也可以轻松使用。

2、降低新闻制作成本

由于HTML5 新闻的制作门槛降低，省去了对专门技术人员的需求，或者是对于网页制作的人员培训费用。对于一些小规模的媒体来说，它们可以依附于微信平台之上作为公众号进行信息传播，这可以省去移动端应用软件的开发、运营和维护升级的费用，也可以节省运营维护门户网站的成本。

从传播效果来看，基于HTML5 制作的新闻作品更契合互联网语境和阅读习惯，而且微信朋友圈提供了一键分享的便捷分享模式，因此更容易形成病毒式传播。对于传统媒体来说，可能要花费巨大的人力物力才能使同样的内容达到相同的传播效果。

3、丰富新闻呈现方式

目前国内媒体大都在微信中拥有自己的公众平台。但是其内容推送大都是图+文形式，或者配上新闻视频，相当于把原先用于PC端呈现的内容照搬在了移动端上。而HTML5 为媒体提供的可能性将会渐渐改变这种千篇一律的内容呈现方式。

由文字和图片的简单组合转化为交互式的精心设计的HTML5 互动式新闻呈现页面则是传统新闻形式的重要补充，例如对于前文提到的数据新闻，目前的趋势是追求数据可视化，让读者在短时间内理解数据所需要表达的内容。现在PC 端或者移动端页面上的数据可视化动效一般是利用HTML5 技术实现的，否则我们看到的仍然只会是枯燥的图表和文字的简单组合。

这种富媒体形式契合了当今社会节奏加快、追求浅阅读和视觉刺激的趋势，将普通的新闻以喜闻乐见的形式呈现，可以帮助受众更好地理解新闻内容，并主动成为宣传的一环，从而增加媒体的影响力和新闻产品的用户粘度。

4、保护作品的原创性

由于新媒体平台的开放性、信息传播和拷贝的便捷性，通过新媒体平台传播的原创新闻内容被侵权、盗版的现象日益增多。网络传播作品引发的版权保护问题已成为当前世界各国在知识产权保护领域普遍关注的问题，由此引发的纠纷数不胜数。

然而，相比于文字、图片等可以直接复制粘贴的信息内容，用HTML5 呈现的页面，最重要的是它由HTML5 技术生成的页面呈现效果，而这个部分是不能简单地通过复制粘贴或者无授权转发而直接盗取的。虽然HTML5 页面的代码也可以被复制粘贴从而盗取，但这种盗取的技术门槛显然要高于对文字和图片的侵权。这在一定程度上增加了这种新闻作品被侵权的困难程度，从而保护了HTML5 作品的原创性。

三、新闻媒体应用HTML5潜在的弊端用辩证的眼光来看，HTML5 技术也并不是媒体可以高枕无忧的依靠。使用HTML5 技术去表现新闻的媒体可能遇到以下两方面的潜在弊端。

1、不能完全取代应用客户端的功能虽然HTML5 有较强的内容表现力，一些功能性HTML5 页面甚至可以取代一些简单的移动端APP 应用，但是它至少在短时间内无法完全取代媒体的客户端应用。

应用软件的功能更加完善，对用户行为的监控较为深入，因而对于用户的划分更加细致，便于个性化定制。比如在一些新闻客户端中，用户可以依据个人喜好定制不同类别的社会新闻内容，从而改变这些内容在主页中所占的比例。这种设置甚至会改变整个应用的界面格局。

但是HTML5 技术只能呈现一个网页，这个网页可以设计得十分复杂，但是在现在的云存储技术发展情况下，它无法同APP 一样与移动设备中的内置功能完成对接，进而为用户提供更加个性化定制的服务。

2、与新闻时效性发生冲突

想要取得良好的传播效果，就必须要推出精心制作的HTML5 作品，而制作精良的交互式动画往往会花费很多精力，这有时就会与新闻的时效性发生冲突。

此外，元素较多的复杂动画也会影响加载速度和流量使用，受到网络带宽以及用户的流量情况限制。有些加载元素较多的HTML5 页面会直接建议用户“在WIFI环境下打开”，这可能使一部分流量有限的3G、4G网络下的用户无法及时获取资讯。

这种困局不仅对选题和编辑能力提出了新的要求，而且还要求在内容制作上有更多的创意。HTML5 的应用不仅带来了技术上的改变，而且也是一次新闻生产思维的变革。如若不能及时培养起互联网思维，很可能会本末倒置，使得形式大于内容，反而影响媒体人员投入新闻内容本身的精力。

四、对媒体应用HTML5技术的建议

HTML5 是机遇与挑战并存的一次技术革新，它带来了一种新的可能性，从而催生新形式的内容生产。为了适应即将到来的HTML5 时代，新闻媒体应该调整媒体产品生产思维。

媒体应提高基于富媒体平台的编辑能力，在新闻生产的每个环节融入互联网思维。HTML5 技术虽然可以很好地展现新闻内容，但是并非所有的新闻都适合用可视化、娱乐化的形式来表现。从信息流中选择合适的选题，是一则成功的HTML5作品的起点。新闻的具体呈现方式也是传播效果至关重要的影响因素，传统的新闻已经不适于社交网络推广。分析目前成功的HTML5 作品不难发现，其制作者都深谙网络语境，并能够将新闻与网络热点图片或者事件相结合，由此激活受众的转发动机。

媒体应打破专业壁垒，在团队内部进行新技术培训，或者引进技术人才和设计人才。虽然HTML5 在线生成工具大大降低了制作页面的技术门槛，但是较为复杂的交互式动画必须要依靠具有一定经验积累的技术人员来完成。此外，HTML5 页面是否美观是影响用户体验的一个重要因素，这就要求吸纳或培养视觉设计师。

媒体在追求新媒体发展的同时不应舍本逐末，保证新闻质量本身才是发展的根本。不管其呈现形式如何丰富多彩，新闻的内容是否有趣味性、有传播意义才是支撑视觉效果的根本。如果新闻媒体在制作HTML5 上太过花费精力，反而忽视了新闻内容本身的质量，最终的作品就会有舍本逐末、哗众取宠之嫌。□

教育期刊网 http://www.jyqkw.com
参考文献

①支庭荣，《新媒体不是传统媒体的延伸——融合背景下“转型媒体”的跨界壁垒与策略选择》[J]《. 国际新闻界》，2011（12）：6-10

②腾讯科技，《微信公众平台已有超200 万账号》.http://tech.qq.com/a/20131118/015594.htm.

③刘滢，《HTML5：新闻网站的新选择》[J].《中国记者》，2012（2）

（作者单位：中国传媒大学新闻传播学部新闻学院）

责编：姚少宝