北京网站开发教程：H5网页开发语言如何变成你朋友圈的日常

2017-06-10

早在三年前，万网联盟更新了HTML5标准，然而那时候这些标准没有得到关注，因为网站开发标准和普通用户的体验度相差甚远，然而当朋友圈大量使用H5网页时候，H5的标准得到了大家的关注和认可。而且很多公司都会根据自己的经验提供很多教程，来阐述自己的经验。今天就聊聊“北京网站开发教程：H5网页开发语言如何变成你朋友圈的日常”。

其中一个具有病毒传播效应的 H5网页就是“神经猫”。这个在 2014 年上线 H5 小游戏从画面到操作方式都很简陋：一只长相奇异的人形猫向屏幕边缘移动，玩家用手指点亮屏幕上的圆点封堵道路。根据封堵情况，猫也会调整自己下一步的路线。抓住了神经猫，玩家便能转发到朋友圈炫耀自己的成绩。在上线 2 天后，这个简单的小游戏就吸引了 1000 多万次点击。

围住神经猫

那年情人节，内衣品牌维多利亚的秘密也曾传播过一个 H5 营销页面。交互方法在当时看来很新鲜，就是在手机屏幕上呈现了雾化效果画面，人们可以用手指擦去屏幕上“雾水”看清内衣模特的照片。就凭这简单交互，这个H5 在 12 小时里，在微信里获得了 11 万次转发。

为维多利亚的秘密设计 H5 网页的就是华企助力，当时，他们的 H5 生意才刚刚起步。华企助力的负责人老谭吹牛皮告诉《好奇心日报》，在随后的一年时间内，他们还给特斯拉、海尔、创维等多家大公司做过类似的 H5 营销页面。

维多利亚的秘密 H5 首页

不过真正让 H5 被更多用户接触的，还是今年春节期间支付宝和微信里的抢红包大战。仅除夕当晚，人们收发微信的红包的总量就达到了 10.1 亿。而抢红包的页面用的也是HTML5。今天，H5 现在已经成了企业的常用微信营销方式。连微信自己植入的广告业开始用 H5 页面了——今年年初朋友圈刚推出广告业务的时候，展示的还只是九宫格的照片而已。HTML5 不等于我们平时说的 H5，但它们也有关系HTML5 是一种网页制作标准，不过当我们日常在谈“H5”的时候，更多的是在说适合手指在屏幕上滑动操作的网页。

在 2007 年的第一代 iPhone 推出之后，触屏屏幕，以及其带来的点按滑动等交互方式逐渐成为了智能手机交互的主流。回想一下 PC 以及智能手机还都配有键盘的时代，我们在网页端的交互还是主要靠“点击”完成，浏览体验十分糟糕。而在 2008 年开始推出的、支持触屏网页的设计语言的 HTML5 刚好赶上了移动互联网这个起点。可任意用手机滑动来操控网页的方式，和在智能手机应用上进行操控的方式很类似。而随着 iPhone 和 Android触屏手机的普及，HTML5 也慢慢成为移动网页制作者的选择。

虽然我们在朋友圈看到的很多 H5 作品可能简单到只是带声音的幻灯片，但它们确实用到了 HTML5 的功能，比如内嵌声音播放或者随着手指在屏幕上的滑动翻页。在 HTML5 之前，实现类似的效果需要用到 Flash。但这种对硬件性能要求较高的技术一直没能在手机上火起来，特别是 2010 年乔布斯宣布永远不会在 iPhone 上用它以后。现在，就连原先的 Flash 大户视频网站，都在手机上支持 HTML 5 标准。

北京网站开发教程问答：为什么 H5 只在中国火了？

不只是 Facebook、Twitter 见不到 H5。确切的说，H5 只在微信火，连微博上都很少能见到。全球主流的社交网络，大多同时为电脑和手机而准备。不论是中国的 QQ 空间、微博，还是海外的Facebook、Twitter 都是如此。所以网页开发者还需要兼顾产品在桌面端。试想一下如果你在电脑上打开一个网页，会希望页面上显示这点信息，然后拖一下鼠标翻一页么？

大众点评制作的H5 ：我们之间就一个字。通过鼠标点击的精确操控也和手指滑动的操作有很大的区别。此外屏幕比例、浏览距离等因素，也决定了桌面版的设计会和手机上完全不同。就连自动发出声音，在电脑上都被认为是一种不友好的设计。相比之下，微信从一开始就是只为手机而生的社交网络，推出几年后才能在电脑上面用到它，而且你在电脑上既看不到之前收到的消息，也看不到朋友圈。为微信制作网页，设计师只需要考虑怎么为手机屏幕进行页面设计，而不需要考虑桌面端打开的效果。

这和在 PC上做一个网页有很大的不同。在桌面端，你一般需要做一个完整的、含有有用信息的网站不断更新，希望别人收藏，搜索引擎也能给予更加靠前的排名。而在微信朋友圈里，传播再也不需要通过搜索引擎，而是其他微信好友的推荐，所以做的网页足够细致、足够小、让人印象深刻，反而对传播更有利。于是我们熟悉的 H5 就这么来了。

游戏“全民突击”的营销页面：“吴亦凡即将入伍”这也是为何企业都喜欢用 H5 来做宣传。他们只需要找到一个足够吸引人的点做个 H5 小游戏，就可以达到企业宣传的效果。在腾讯的“吴亦凡即将入伍”这种模拟手机来电设计火了以后，类似的作品也在朋友圈当中快速传播起来。

北京网站开发教程经验：火了之后，制作 H5 变简单了

现在做个 H5 有多简单？我们试了一下（请点击）：

关于本文的 H5 页面，这是我们花了 25 分钟做出来的 H5，根本不需要什么编程技巧。只需要做 PPT 那样贴上图片和文字就可以了。而在 H5 制作这个产业链里面的公司也越来越多：云来、易企秀、秀米、Maka、意派……这些创业公司都想让 H5 页面制作更简单，更傻瓜化一些。

这些 H5 制作工具原理都大同小异：不需要设计基础，不需要看代码，甚至还不需要装软件，在网页里面拖拽图片和文字就好了。尽管做出来的效果不一定那么漂亮，但至少极大降低了 H5 制作的成本，也让我们的朋友圈里面那些奇怪的企业 H5 宣传页面多了起来。今年，广州的东华寺也开始用云来做了 H5 招聘僧侣，结果收到了 4000 份在线简历。

除了企业用户之外，甚至还有普通用户开始用这些工具做 H5。易企秀创始人黄金告诉《好奇心日报》，原本开发手机版制作工具，只是为了让企业用户能方便的管理 H5 里收到的用户表单。结果发现，许多人在夜里和周末都在使用它。“年轻用户会出于玩的目的使用它。这给朋友看挺炫酷。”黄金说。尽管他们主要做的还是针对的是中小企业的营销服务，不过多一点用户宣传品牌总是好的。云来的邵琦在采访中也表示，“普通用户的大量使用（云来的手机端），反过来也让企业意识到它（H5）的潜力。”这是一个因果循环的过程，但对于普通人而言，结果就是朋友圈里的 H5 越来越多了。

据黄金介绍，易企秀自其去年 10 月上线网页版以来，至今累计用户数已达千万级别，每天都会有 10 万作品诞生。而在今年春天，易企秀上产生的作品也只有 1-2 万。随着制作工具的传播，几乎什么内容都被做成 H5 了。新闻稿、邀请函、心灵鸡汤、营销活动，甚至世纪佳缘今天发的财报，为了传播，也都做成了上滑翻页 H5 页面。

看上去，H5 不会停在中国H5 现在虽然只在微信上流行，但它的未来可能不只是中国。今年 4 月，Facebook 也将旗下的即时聊天的软件Messenger也正在向微信看齐，应用内除了聊天功能之外，也有开让企业入驻的开放接口。而在此之前，聊天软件 Line 和 Kik 也开始给商家提供入驻的接口。如果这些海外社交软件形态上越来越像微信，或许 H5 也一样会在海外市场上疯狂的传播。有一些创业者瞄准了海外机会，易企秀就在今年 10 月推出了针对 Facebook 的海外版 H5 制作平台，目前用户数已占到了总用户数的 5%。

H5 流行的背后，其实是是越来越封闭互联网。H5 本来是一种依赖高度封闭的社交网络传播的内容。社交网络可以帮助更多的内容快速的传播，越大越封闭的社交网络，效果越好——如果不封闭，信息大量出现在微博之类在电脑上浏览的社交网络，H5 的体验便无法保证。此外，H5 制作者也把对内容的控制权转交给了社交网络本身。微信现在已经对 H5 的内容进行监控，对于朋友圈传播量大但又没有向微信支付广告费的页面直接封杀。

互联网发展这么些年，到最后话语权又重新集中在少数几个社交网络手中。H5网页开发成为未来发展的必要和趋势，相信您看了“北京网站开发教程：H5网页开发语言如何变成你朋友圈的日常”，会知道怎么做了。