首页 >知识讲堂 >运营知识>H5技术简介:怎么实现、有哪些应用场景,以及如何推广?

H5技术简介:怎么实现、有哪些应用场景,以及如何推广?

2020-12-09 11:18:13 阅读(136 评论(0)

TOP导读:H5那么多娇,吸引了无数品牌的竞折腰。大家一定都很熟悉H5这个词。就在2014年,一项不成熟的技术在微信社交舞台下大放异彩,让我们看到了“移动” 社交网络爆发的巨大能量。然而,这不是偶然的,而是趋势。在介绍H5营销之前,我想和大家分享一个emarketer的数据,显示了2012-2018年品牌在不同媒体渠道的预算比例:与电视、杂志、户外广告等传统媒体相比,品牌营销在数字和移动方面的投入逐年增加。此外,移动技术在所有渠道预算中的投资增长最快,远高于其他渠道。当然,你不应该对这个结论感到惊讶,因为我们已经习惯了24小时手机的生活,品牌最关心的是消费者的“在哪里”。根据美国的调查数据,我们每天检查手机150次。44%的人睡觉时把手机放在身边。9%的美国人承认他们在做爱时使用手机。。。毫无疑问,手机是历史上最强大的媒介。从早上醒来到睡觉前一秒钟,这几英寸的屏幕正在与我们“交流”。显然,移动营销已经成为大势所趋。我们可以看到,登录和二维码技术已经得到了广泛的应用,iBeacon正在崛起、本文将与大家分享的微信WiFi连接和H5技术。这篇文章有点长,可能需要一些时间来阅读。全文包括:H5技术介绍及其特点、如何实现、应用场景和如何推广。什么是H5?朋友们经常问我关于H5的问题,但在与他们沟通的过程中,我发现很多人对H5的理解都停留在用户层面,如邀请函、小游戏、品牌展示、彩票等。事实上,如果上升到营销层面,仅仅在用户层面上思考是远远不够的,因为任何沟通都应该考虑有效性。如果100wpv只带来刷屏效果,不能给品牌带来任何有效的转型,这种沟通显然是不成功的。如果我们不能从多个角度分析对事物的理解,我们就很难跳出原来的思维框架来看待问题。因此,我想从H5技术本身的角度更原始地阐述这篇文章;事实上,互联网技术的发展本质上是由需求驱动的,程序语言实际上是高于应用水平的产品。希望以下内容不要太晦涩,也希望能启发你。简言之,H5是一种先进的网页技术。我们通常看到那些邀请函和小游戏是H5网页。确切地说,它们被称为HTML5(目前国外没有H5的名称)。它与我们通常在互联网上看到的网页没有本质区别,但我们普遍接受的网页技术版本是HTML4,该版本于1997年发布。HTML是什么?让我在这里简要解释一下——想象一下两台计算机在交流中的场景。如果A想向B发送图形信息,B在交流过程中肯定会出现这样的问题:你给了我这么多信息,哪些是网页标题,哪些是文本,哪些是图片?因此,A和B讨论了一种用一些符号标记不同类型内容的方法,而这些标记的一套完整规范是HTML。例如,当A想将图形标题传递给B时,B的最终表达是这样的:如果设计HTML语言的品牌H5营销是中国人,表达将是这样的:品牌H5营销是一个完整的实际战斗指南,所以你可以看到HTML实际上是一个非常人性化的发明。对HTML技术的详细解释感兴趣的读者可以自己查阅。在这里,我主要介绍一些营销人员应该关注的H5特性,它可以让你对H5能做什么有一个基本的了解。No.1绘图功能(Canvas、SVG)这是H5的一个非常重要的特点。你在许多H5中看到的动画效果是由H5的绘图功能制成的。典型的例子是STC风云榜共享的可口可乐的例子。如果你感兴趣,你可以点击最后的“阅读原文”。为了便于理解,您可以将H5的绘图功能与Flash进行比较,但唯一的决定性区别是Flash制作的动画不能在移动浏览器中浏览,因为Adobe早在2012年就停止了移动flash的开发。毫无疑问,未来的移动网页游戏和动画将是H5的世界。从技术实现的角度来看,H5可以用JS(一种程序语言)制作任何二维动画,因为它是一个网页元素,所有元素都可以监控用户点击的数据,也就是说,你可以知道H5动画网页中用户的所有交互行为。然而,在实际应用中,我们应该考虑周期、成本和用户体验。与复杂动画相对应的制作周期和成本将增加,也可能影响用户体验相关的问题,如加载速度。以下网站是H5绘图功能的典型例子,非常强大。您可以选择不同类型的刷子、笔触半径和墨水颜色。整个绘图过程非常顺利,还有一个人性化的设计,模拟手持刷子。No.23D效果(CSS33D)H5的华丽效果离不开一种叫CSS的技术。形象来说,如果把HTML5比作漫画素描,CSS就是上色的,相当于word界面上方的格式工具栏。没有CSS,我们看到的H5网页只能用“素颜”看人。如果你熟悉互联网技术的命名规则,你应该知道CSS3是CSS的升级版本。三维渲染是CSS3中一个很酷的功能,也就是说H5中可以制作3D动画甚至3D游戏。目前,CSS33D在H5中的应用较少,这可能是下一个营销H5应用的热点。建议您继续关注它。以下两个网页游戏使用H5 CSS33D,第一个是俄罗斯方块的3D版本,想象在3D空间中玩俄罗斯方块的感觉,喜欢挑战空间想象力的朋友可以尝试;第二个游戏是3D坦克战争,非常精致和有趣的游戏,一个评价是“不能停止”。PS:所有这些网站都需要在PC浏览器中打开,虽然有些麻烦,但绝对值得。No.3离线存储(HTML5)WebStorage)H5的另一个重要特点是离线存储,它可以在本地保存用户的资源文件,使网页可以在页面加载时使用本地资源,从而在离线状态下访问网页应用程序。例如,通过离线存储,您可以在没有网络的情况下阅读微信官方账号的文章(当然,这只是技术上的可行性,微信目前没有此功能)。当然,离线存储能容纳的数据量是有限的,这与浏览器有关。目前,Chrome支持5m。大家或多或少都知道cookie,它还记录用户浏览数据。比如百度根据你的搜索习惯推荐给你的广告,就是这个技术实现的,但是它的容量是4k。技术细节可以忽略,但关于离线存储功能,你可以想象——假设离线存储容量是100G或更多,浏览器成为一个超级应用入口,所有网页应用程序都有离线存储和在线浏览功能,此时在线office、在线记事本甚至在线PhotoShop都可以实现,我们的计算机只需要安装一个程序浏览器。在这个假设中,浏览器将杀死Windows,所有用户操作都将在云中进行!有点难理解,大家可以仔细理解。以下是一个使用离线存储的例子。这个提供在线笔记功能的网站可以访问,无论是否有网络,您记录的所有笔记都将被保存下来。这是一个非常实用的网站。如果你感兴趣,你可以试试。在科普的第一段,H5虽然有很多特点,但由于篇幅有限,本文只能介绍与营销相关的内容,其他很多特点都是程序猿。如果你需要了解更多的反馈,我可以写另一个具体的介绍。H5怎么玩?了解了H5的一些基础知识后,相信大家最关心的是应用层面的问题——H5能做什么,有什么玩法?接下来,我将列出一些典型的例子与您讨论:1幻灯片玩法以下特斯拉的例子,我相信很多人都看过,精致的图片设计 在我的印象中,简单的翻页效果大约是3、当我们在4月份看到特斯拉H5时,我们不知道微信营销可以这样玩。我记得当时,我们在一周内做了一个类似的H5来展示STC的品牌。当然,H5之后,千树万树梨花开了。这是H5最早也是最典型的玩法,因为简单实用,所以还是很流行的。它的效果就是简单的图片显示&翻页交互,最终整体表现非常像幻灯片展示。事实上,幻灯片H5现在有很多在线生产软件供每个人使用,所以生产成本似乎几乎等于零,在这样一个应用程序的开发可能需要近10000(再次见证了互联网思维的破坏性)。当然,这对品牌所有者来说是一件好事,因为很多时候,这种简单的展示可以满足需求,不需要花不必要的钱。★由于制作简单,应用场景周期短,这种H5显示形式适用于频繁、小型的需求。如果使用在线编辑器,不需要任何开发,只需要配备设计和文案即可。幻灯片H5可能有以下应用场景:1、定期发布的内容几乎为零预算。这些内容比较传统,但有时候微信图文达不到理想的效果,H5的形式会更容易传播,当然前提是设计好。如数据报告、新产品或功能频繁上线、小型线下活动邀请、活动相册等。2、结合热点营销,周期很短。在这种情况下,及时性非常重要。如果开发H5需要半个月的时间,热点肯定会结冰。因此,以最快的速度推出是明智的选择,此时广泛传播的关键在于文案和设计。另外,不要轻视这种短频快速传播,有时候比很多大投入的传播更有效。没有人能完全掌握观众的兴趣点,所以大投资的传播可能不会产生效果,但从统计学的角度来看,多个热点传播效果的概率也更高。如上所述,我们可以监控H5中用户的所有交互行为。因此,如果短频快速传输能够与有效的数据监控相匹配,就可以不断优化,减少不确定性。在之前的风云榜上推荐了交互式动画可口可乐的案例,这是使用H5绘图功能的典型例子。这里的互动当然还是比较简单的,只是它基本上反映了互动动画的感觉。随着用户向上滑动页面,画出了可口可乐的整个时间轴。其实除了这种叙事性的H5动画,我们能看到的H5游戏大部分都属于这一类,比如神经猫、企鹅、2048等等。最近,还有一款流行的H5游戏叫做“金融馒头店”。在这个游戏中,用户扮演馒头店的创业老板,在职业发展的不同阶段做出商业决策,最终达到人生的巅峰。虽然游戏中植入了赤裸裸的产品推广(知乎的一本新书),但最终还是取得了3天破300万PV的成绩。本质上,这些不同类型的H5应用都是基于H5的动画技术。主要涉及H5Canvas//SVG,以及JS、CSS3,目前大部分H5的动画效果都是JS实现的,类似于PPT中的动画功能,只能实现元素的平移、旋转、隐藏等。实际上通过JS Canvas/SVG CSS3可以实现非常复杂的交互式动画,最直观的是H5游戏,如神经猫和上面提到的3D坦克战争。那H5究竟能达到什么样的动画效果呢?我认为这应该是每个人做H5时最头疼的问题,因为你不知道该做什么,你也不知道从哪里开始。所以下面我给大家介绍一个网站:http://fff.cmiscm.com/,在这个网站上,你几乎可以看到H5能达到的所有动画效果。下次需要做H5的时候,可以对开发说“你看,就是这个效果”。以下是本网站上几个示例的截图:抓羊:你可以在跑羊中随意抓住,在任何地方种树:点击屏幕上的任何地方,在相应的地方种树,你可以看到树的生长过程。3D罐头:CSS33D的完美展示,您可以从任何角度看到3D罐头的照片处理:您可以将照片艺术化,图为处理过程的截图★H5制作周期和应用场景交互式动画类型的成本相对较高,需要提前规划。除了创意、文案、设计,开发周期长,优质H5大概两到四周,也可能更长。这种类型的H5需要找到可靠的供应商,因为复杂交互的效果在用户眼中只有两个层次:完美和垃圾,所以要小心。当然,如果你想花钱建立自己的团队,也不是不可能——产品经理、设计师、前端工程师、PHP工程师(需要表格、登录、评论等元素),一个就够了。以下是应用场景的总结:1、传播中小型活动/品牌事件,预算少,周期短。这种情况通常是一些新产品发布、企业招聘、公关事件、中型会议等的传播。此时,您需要权衡周期和成本因素。一般来说,高质量的H5不太可能在一周内制作。此时,您可能需要考虑幻灯片的简单开发或参考现有作品,然后专注于设计和文案。如果你有一到两周的时间尝试做一些轻交互H5,除了常见的平移、缩放和淡化的动态效果,我建议你尝试CSS33D的效果。这是一种趋势。当然,成本会相应上升到一个数量级。2、传播大型活动/品牌事件,预算充足,计划性强,周期长。一般来说,你看到的美丽而传播的H5基本上属于这一类,比如上面提到的可口可乐“分享快乐128年”和我们之前分享的潘婷“1947年的明信”

以上就是关于H5技术简介:怎么实现、有哪些应用场景,以及如何推广?的相关介绍,更多H5技术简介:怎么实现、有哪些应用场景,以及如何推广?相关内容可以咨询我们或者浏览页面上的推荐内容。我们将让你对H5技术简介:怎么实现、有哪些应用场景,以及如何推广?有更深的了解和认识。

内容来源:网络,以上内容来源于网络,不代表本站观点,如有侵权,请联系删除。

推荐阅读

发明专利公开到授权需要多长时间?

   第三十五条发明专利申请自申请日起三年内,国务院专利行政部门可以根据申请人随时提出的请求,对其申请进行实质审查;申请人无正当理由逾期不请求实质审查的,该申请即被视为撤回。下面小编就带大家来看看详细的内容。  一…查看详情

专利权中三类的含义是什么

   专利权是由国务院专利行政部门依照法律规定,根据法定程序赋予专利权人的一种专有权利。下面万商云集小编给大家详细解释下专利权中三类的含义的相关内容。  一、专利权中三类的含义是什么  (1)专利权是国家依法授予专利…查看详情

运营网店的方法

当代越来越多的无业游民都选择开网店,网店确实是一个不错的途径,那么如何开网店,相信大家都已经了如指掌了,但是如何运营好网店,小编还没有系统的整理过。那么小编今天也来追赶一下潮流,整理一篇运营网店的方法。 一、提…查看详情

建网站不花钱免费建站

一般大企业都会打造不一样的网站建设效果,这样才能够得到很好的推广,但是也有些小企业在建设网站的时候不想要花钱。这个时候就应该要找到免费的建站平台,其实建网站不花钱可以找到很多的平台,只要选择对了平台,也能够制作出…查看详情

专利证书号有没有用 专利证书号的作用

    专利证书号是大家在申请专利权的时候获得的一个编号,很多人对这个编号不是很了解,下面万商云集小编就带大家看一下专利证书号的相关作用。    一、专利证书号的作用  专利证书号是已经发出多少专利的意思了,这和…查看详情

免费的视频聊天工具 2022好用的视频聊天工具

  现在很多的人都用视频聊天工具和朋友沟通,下面小编就给大家推荐下几款免费的好用的视频聊天工具。希望能帮助到你。多亏Skype等视频通话工具,人们在新冠疫情期间仍可与家人和朋友保持“面谈”。为了帮助人们更好地“见面”,德…查看详情

十大汽车保险公司排行榜

  近年来,汽车行业的发展日趋迅速,伴随而来的是汽车保险公司的蓬勃发展。随着汽车数量的增加和消费者的意识提高,汽车保险公司的市场竞争越来越激烈。在这个背景下,人们需要了解哪些是十大汽车保险公司排行榜,以帮助他们做…查看详情

windows10忘记密码怎么解决

  如果你忘记了你的Windows10帐户密码,你将无法登录到Windows系统中。然而,你不必担心,因为你有几个选项可以重置或恢复密码。以下是一些可行的解决方案:  方法一:使用Microsoft帐户密码重置  如果你使用Microsof...查看详情

代驾app排行榜 十大代驾app排行榜

代驾app的出现给大家的生活带来了不少便利,让大家出门在外有了安全的保障,不用再担心喝酒后不能驾车的问题,可以和朋友放心喝大胆玩了,今天就带大家一起盘点一下有哪些好用的代驾app。1.滴滴代驾滴滴代驾是滴滴旗下的一款代驾app,…查看详情

免费的ps软件有哪些 免费的ps软件排行榜

  相信很多的小伙伴在平时都会使用到ps软件,其实市面上也有很多这类型的PS软件,下面小编就给大家来详细介绍一下免费的ps软件有哪些  免费的ps软件排行榜这一块的内容,希望能帮助到大家,下面的这些ps软件都是很不错的。...查看详情

集成电路设计能不能获得专利权?

  根据相关法律规定,集成电路布图设计不能取得专利权,下面万商云集小编给大家来介绍下这方面的详细内容。  一、集成电路设计能不能获得专利权  根据相关法律规定,集成电路布图设计不能取得专利权,应由集成电路布图设计…查看详情

分频器的作用是什么

分频器上有个灯泡是干什么用的?分频器的小灯泡是用来保护高频喇叭的。在高频喇叭上接一个灯泡在高电压(峰值功率或大功率输入)时点亮能有效保护高音喇叭。分频器和接线板对喇叭有什么作用?音箱分频器的作用,是把设计好频率分频点(工…查看详情

2021年EHR人力资源管理系统怎么选,有哪些注意事项?

目前EHR人力资源管理系统受到越来越多的企业青睐,但是应对市场上各种知名品牌,公司在选择全过程中存在哪些常见问题,如何极端防坑,选择符合公司要求的系统?小万梳理了市场上各类ehr系统在选择时应该注意的要点,供各位参考学习…查看详情

php代码是什么

如何运行php代码?需要在计算机上安装PHP解释器,并且要在支持PHP的Web服务器或本地开发环境中打开PHP文件。具体步骤如下:1.下载和安装PHP解释器,例如从https://www.php.net/下载最新的PHP版本。2.安装支持P...查看详情

华为浏览器纯净模式怎么关闭

华为浏览器是华为手机自带的浏览器应用程序,它具有纯净模式(也称为无痕浏览模式)以提供更私密和安全的浏览体验。关闭纯净模式很简单,以下是一般情况下关闭华为浏览器纯净模式的方法:1. 打开华为浏览器:在您的华为手机上找…查看详情

首页

产品

万商学院

客户服务

会员中心

当前站点

h

选择站点

全国站成都

一 客户顾问-张三

已为0个客户提供专业互联网服务咨询
  • 手机号码
  • 验证码图形验证码换一张
  • 短信校验码

    电话咨询

    在线咨询