What's H5

当我们谈H5的时候我们到底在说什么

大约从3-4年前H5这个词突然流行起来，那时作为一名flasher，对H5充满了各种不屑，比起flash的强大的动画和运算能力，我对H5那些淡人淡出的动画效果充满了鄙视，当时flash圈甚至认为H5的出现一种技术的倒退。但随着H5技术慢慢发展，大部分flasher也逐渐转投H5怀抱，但作为一个在广告圈混过的前端，我慢慢发现当我们说起“H5”的时候，程序员、营销方、用户说的是不同的概念。so,今天来跟大家聊下 “当我们谈论起H5的时候我们到底在说什么？”

什么是H5

H5和HTML5是两种概念。
H5 在程序员眼里是 HTML5的简称，但经过网络宣传，尤其广告公司销售和媒体的表述，现在更多代表了移动端 微画册，微场景这种表现形式。
例如这些：http://webs.jerei.com/?no=20170221095614134

实际上： HTML 是一种超文本标记语言，其标准由万维网W3C制定。为了便于理解也可以说HTML5是一个新的标准，来规范各浏览器厂商。
之前前网页技术版本是在1997年发布的HTML4。2014年10月29日W3C宣布，经过接近8年的艰苦努力，新的标准规范终于制定完成，就是现在的HTML5。
在这之前由于标准不统一，各浏览器差异性较大，H5普及性兼容性不高。

html5新增功能

语义化标签。

html4 时代 标签仅限于 div span p table等等。
html5 时代 新增 header, footer, section, nav,让开发者直观标注这个区块内容性质

本地存储特性

基于HTML5开发的网页，拥有更短的启动时间，更快的联网速度，这些全得益于HTML5 APP Cache，以及本地存储功能。我们现在的网站框架，首次打开后将用到的JS 插件缓存到本地，以后启动速度大大提升，不需要再从服务器获取资源。

连接特性

通过 HTML5 WebSockets API 可以直接和服务器连接，实时交互，聊天室，双屏互动， 大屏上墙，你画我猜游戏等。

多媒体特性

相比H4，H5有更多的交互和功能，最大的优点之一是在移动设备上支持多媒体。视频 音乐 video,audio 标签，在这之前都是基于flash播放，而现在甚至可以利用Html5技术做直播。

CSS3特性

媒体查询----直接通过CSS3判断屏幕尺寸，加载不同样式，进行响应式网站开发。其次还有 矩形圆角， 画圆，阴影，渐变等特性,选择器 :nth-child(odd)奇偶选择，隔行变色。flex布局， background-size，背景透明度等等等等等等
比较重要的是：Transform ，Transitions，Animation，这三个特性的出现，使CSS3 具有了动画功能，初步取代flash动画功能。

重力感应、陀螺仪

主要用于增加移动端体验交互体验

canvas

如果说 CSS3的出现是初步取代flash动画功能 ,而canvas的出现，则是可以说是Html5给flash的致命一击。
canvas给浏览器带来直接在上面绘制矢量图的能力，这意味着用户可以脱离Flash 和Silverlight，直接在浏览器中显示图形或动画。而且，全终端兼容。

• 页面精细动画
  http://www.hdev.com.cn/sale/beiqixinnengyuanqiche.jsp
• 互动游戏--PC-手机多终端运行。
  http://test4.jerei.com/h5game/index.html
• 电子书
  http://www.zjky.cn/book/book.htm
• 创意网站
  http://www.because-recollection.com/django-django
• 3d 全景交互
  http://test3.jerei.com/three3d1_bak/vtour/tour.html

WebGL

WebGL可以为HTML5 Canvas提供硬件3D加速渲染，这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了，还能创建复杂的导航和数据视觉化。显然，WebGL技术标准免去了开发网页专用渲染插件的麻烦，可被用于创建具有复杂3D结构的网站页面，甚至可以用来设计3D网页游戏等等。
https://threejs.org/examples/#webgl_loader_sea3d

---

我们能做什么

• 微场景
  相比电视、杂志、户外广告等传统媒体呈逐年下降的趋势，品牌营销在数字和移动方面的投入在逐年上升，而且，在所有渠道预算中移动技术的投入增长最快，远远高于其他渠道的增长。
  常用工具：
  初级：易企秀，兔展，百度H5，MAKA，
  高级： ih5,mugeda ,Epub360意派

• 轻应用，小程序 Html5+js
  功能性的H5能提供一些使用频次较高的功能，免除下载App的麻烦，比如查快递、房间预订等功能。

  
  
  

  2589fdc81618eb48a38916baf898ccac.png

• 微商城

• 360全景展示

---

Ending

H5的未来
而关于H5的未来会怎么样，举了个例子：写文章，不管写诗歌、散文、小说都离不开文字，H5就是移动互联网时代的文字，不管什么形式，都将会用H5语言来呈现，它会是一切移动产品的基础。

所以我们现在在谈论H5的时候，实际上谈的是一个解决方案，一个看起来酷炫的移动端页面的解决方案。就像现在大多人理解的H5仅仅是一个营销的渠道，是因为目前H5主要是营销人员用于产品宣传推广，与用户直接接触。

H5能做什么
之前有人经常会问到我们，说H5能做什么？其实这是一个仁者见仁、智者见智的问题，我们需要思考的是，你的业务是什么？什么场景下能借助H5去帮你实现价值。或者怎么将这个技术转化成具有商业价值的产品，这也是我们正在探索的。

所以不是能做什么？而是你想做什么？

现在我们可以通过H5实现直播系统、商场的超大屏交互解决方案、视频播放过程中的交互、CRM系统、动画和官网的制作、游戏的制作、抽奖系统、双屏交互，线上博物馆，微画册，微电商，微信小程序等等，而且未来，H5很可能会与AI、VR、AR结合，创造出更多意想不到的东西。

4.gif