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,直接在浏览器中显示图形或动画。而且,全终端兼容。

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
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,362评论 5 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,330评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,247评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,560评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,580评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,569评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,929评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,587评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,840评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,596评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,678评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,366评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,945评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,929评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,165评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,271评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,403评论 2 342

推荐阅读更多精彩内容