不懂开发与设计,如何玩转H5营销小游戏?

 导读:如果你没人,没钱,不懂开发,不懂设计,不妨看看这篇文章,运营喵将告诉你如何不花钱免费创建自己的H5营销小游戏。

虽然这几年出现了很多H5制作平台,但这些平台更多是制作展示页面,对于H5小游戏可以说是力不从心,这个时候你可以考虑通过网上下载一些优质的H5游戏来推广自己的产品。

这种方式的优势有:

1.使用方便,直接下载代码修改文字和链接,上传到服务器即可。

2.成本比较低,如果已有服务器和域名,基本上属于零成本。

如何制作自己H5小游戏

首先你需要上网下载一份H5小游戏代码,然后上传到服务器上。

代码上传等基本操作,在之前的文章里已经讲过,就不过多赘述了,大家可以看看这篇文章《10分钟搭建运营人自己的网站》。

下面以小游戏“生命计算器”为例,给大家说说如何修改小游戏的代码.

生命计算器:当用户输入自己的出生日期后,可以计算出用户还可以活多少天,未来还有多少天,一共有3个页面。

1.输入出生日期:

H5营销 H5小游戏 H5案例 H5推广
 

2.计算生命时间,这个时候会有一个链接植入,用户通过这个链接可以转化到微信公众号等。

H5营销 H5小游戏 H5案例 H5推广
 

3.计算用户未来,这个时候也会有可以转化的链接。

H5营销 H5小游戏 H5案例 H5推广
 

  订阅号

由于大部分人都是做的订阅号,重点说下使用订阅号如何修改代码。

1.修改weixin_sdk.php这个文件,将weixin_url的值修改为想要跳转的网址:

H5营销 H5小游戏 H5案例 H5推广
 

2.在view.php,future.php,index.php这三件文件之中增加这段代码,用于设置分享到朋友圈后的图标:

H5营销 H5小游戏 H5案例 H5推广
 

注意,你分享到朋友圈的图片不能太小,如果太小则无法显示。当你的H5游戏页面在朋友圈被分享时,微信会默认将第一张符合尺寸的图片作为分享后的图标,这是分享后的效果预览:

H5营销 H5小游戏 H5案例 H5推广
 

如果想修改分享后的标题,可以修改下view.php,future.php,index.php 这三个文件之中title的值,默认的为“生命计算器”。

  服务号

服务号也可以使用上面的方法设置分享到朋友圈的图标,同时也可以通过设置“JS接口安全域名”,调用微信的JSSDK来设置。在这里就不详细说了,文末我会将代码包分享给大家,并给大家在代码包之中提供一个服务号的教程。

 需要注意的问题

  1.如何筛选别人分享的H5代码

网上的开源H5小游戏很多,但其中一大部分都是真正的“游戏”,而不是说给运营人员来做营销的,游戏本身不带“吸粉”功能,如果自己修改的能力有限,一定要选择带“吸粉”功能的H5游戏。通常吸粉的方式有两种:二维码和链接。

  2.如何将这些小游戏扩散出去

直接通过图文消息来推送一个小游戏有点浪费资源。

现在大家都加了很多微信群,群里每天有很多人分享图文消息来吸粉,用户早已经厌烦了。这个时候我们可以换个思路,在微信群发一些小游戏给大家玩,这种方式更为容易让用户接受。

HTML5三个设计方向的自我定位

导语:如今,移动端H5如雨后春笋般迅速发展花样繁多,无论是宣传产品、内容介绍、新闻推广都会想方设法搞套H5出来。

如今,移动端H5如雨后春笋般迅速发展花样繁多,无论是宣传产品、内容介绍、新闻推广都会想方设法搞套H5出来。那么如何在众多H5中脱颖而出?如何使手上的资源发挥最大化?如何扬长避短,做出吸睛的H5?都是摆在我们面前的问题。

在我看来移动端H5可以向三个方向进行设计定位:内容方向、交互方向和视觉方向。

1、内容方向是指介绍内容为主的H5,从用户情感出发,基于大众所熟知和想了解的方面入手。如节日类、信息广告类、电视影片类等。

2、交互方向是指注重与用户建立丰富的互动体验,以用户操作为主要卖点。如游戏类、广告类。

3、视觉方向是指以画面为主的H5,这里指的不单单是好看,而是把重点放在画面执行上,画面更有丰富的动效,做到非常强力视觉冲击力。

设计策划占到以上3方向的一种为“优”,具备两种为“精”,有三种为“神”。但是,重要的是每个方向需要做到极致。我认为目前能占两种的H5还是有一些的,不过具备三种的几乎是不可能。因为想要在这三方向都顾及到的话,最致命缺陷就是文件量太大,目前的带宽和设备的限制对过大的H5传播有着很大影响。

一、内容方向的H5

首先介绍下内容方向的优秀H5。重点放在内容方面要引人入胜,能够吸引特定用户,把H5有目标、有目的的去投放。

《活着》项目组策划的《活在此时》,充分透析了北漂一天的忙碌生活,直击为了生活而奋斗着的年轻人内心,主题震撼,内容充实,闻者心动,见者伤感。

e45ee7ce7e88149af8dd32b27f9512ce
 

为抗战胜利70周年举行盛大阅兵仪式而策划的《阅兵手册》,内容上充分展示了各个方阵的信息,在看阅兵直播的同时,手持这款H5,既长见识还能在人前卖弄。

7d0665438e81d8eceb98c1e31fca80c1
 

系列H5《传统节气》。随着人们开始越来越关注传统文化的传承,二十四节气的由来、习俗等知识,越来越多的人想深入了解。实时推出《传统节气》,既满足了此类人群的需求,又弘扬了传统文化知识。

7d0665438e81d8eceb98c1e31fca80c1
 

二、交互方向的H5

交互方向的H5,重点放在和用户的交互体验方面,让用户有很强的参与感。这就需要在互动过程中要做到完美的体验,吸引用户一步一步按照设计师思路看完H5。

交互方向H5一大类是小游戏,早期的围住神经猫、虐心的小鸟等都是火遍朋友圈。《俄罗斯阅兵—抢答1分钟》参与互动答题,再配上风格独特的手绘图案,可以说是H5中的精品。

a2b1e6813eec96052c81d40ba16e8c59
 

一夜爆火的《吴亦凡即将入伍》游戏推送广告,创新的交互方式让人眼前一亮。整个H5都会让观众惊奇的看到最后。

d72d187df41e10ea7d9fcdc7f5909205
 

《万能时装屋》和《哆啦A梦道具专卖店》,都是可以选择不同的元素,自由组合,最终达到不错的广告效果。

《万能时装屋》是用户在不同的部位选择自己喜欢的装饰,最后把选择的装饰生成一个完整的形象,电商就可以推荐用户一些喜欢的产品,而且可以拼出搞笑、无厘头的形象,增加H5应用趣味。

《哆啦A梦道具专卖店》借用哆啦A梦神奇道具的组合,也是生成实际存在的产品,推送给用户,不免让大家觉得非常有趣神奇。

fad6f4e614a212e80c67249a666d2b09
 

三、视觉方向的H5

视觉方向的H5拥有着炫酷的画面、华丽的动效以及特点鲜明的手绘,让人印象深刻,过目不忘。

说到视觉表现力,不得不提的是大众点评出过一系列H5,无论是画面效果还是夸张的动效,都能给人留下深刻的印象,但是对于内容和交互上就没有那么深入人心了。

0a8005f5594bd67041f88c6196192646
 

《AKQA Winterlands》借势圣诞节,让用户进入水晶球,环视3D场景,让用户有身在其中的感觉,在视觉和互动上达到双赢。

38b3eff8baf56627478ec76a704e9b52
 

了解策划H5的三个方向,不管是编辑、设计师或是开发工程师都可以根据自身的特点去策划H5,编辑如果觉得自己能把内容做的引人入胜,就可以在内容方向下功夫。设计师自然需要在交互上视觉上发挥最大的能力。

尽量在某一方向上做到最优的同时,兼顾其他两方向。定会做出精品H5。

HTML5 Shiv – 让IE系列支持HTML5

HTML5能为我们做的事儿很多,最为可口的就是语义化标签的应用,如果你已经在Chrome或者其他支持HTML5的浏览器上用过它的牛x,那这篇文章对你一定有用,因为现在你也可以在IE上用到HTML5。

下面是引用Google的html5.js文件,好处就不说了:

将上代码复制到head部分,记住一定要是head部分(因为IE必须在元素解析前知道这个元素,所以这个js文件不能在其他位置调用,否则失效)

当然,你也可以把代码拿出来自己看着办:

(function(){if(!/*@cc_on!@*/0)return;var e ="abbr,article,aside,audio,canvas,datalist,details,dialog,eventsource,figure,footer,header,hgroup,mark,menu,meter,nav,output,progress,section,time,video".split(','),i=e.length;while(i--){document.createElement(e[i])}})()

最后在css里面加上这段:

/*html5*/
article,aside,dialog,footer,header,section,footer,nav,figure,menu{display:block}

主要是让这些html5标签成块状,像div那样。

好了,简单吧,一句话概括就是:引用html5.js  使html5标签成块状

Html5新标签解释及用法

HTML 5 是一个新的网络标准,目标在于取代现有的 HTML 4.01, XHTML 1.0 and DOM Level 2 HTML 标准。它希望能够减少浏览器对于需要插件的丰富性网络应用服务(plug-in-based rich internet application,RIA),如Adobe Flash, Microsoft Silverlight, 与 Sun JavaFX 的需求。

HTML 5 提供了一些新的元素和属性,反映典型的现代用法网站。其中有些是技术上类似 <div> 和 <span> 标签,但有一定含义,例如 <nav>(网站导航块)和 <footer>。这种标签将有利于搜索引擎的索引整理、小屏幕装置和视障人士使用。同时为其他浏览要素提供了新的功能,通过一个标准接口,如 <audio> 和 <video> 标记。

一些过时的 HTML 4 标记将取消,其中包括纯粹用作显示效果的标记,如 <font> 和 <center>,因为它们已经被 CSS 取代。还有一些透过 DOM 的网络行为(via)。

下面我们来看一下HTML 5提供的一些新的标签用法以及和HTML 4的区别。

<article>标签定义外部的内容。比如来自一个外部的新闻提供者的一篇新的文章,或者来自 blog 的文本,或者是来自论坛的文本。亦或是来自其他外部源内容。
HTML5:<article></article>
HTML4:<div></div>

<aside>标签定义 article 以外的内容。aside 的内容应该与 article 的内容相关。
HTML5:<aside>Aside 的内容是独立的内容,但应与文档内容相关。</aside>
HTML4:<div>Aside 的内容是独立的内容,但应与文档内容相关。</div>

<audio> 标签定义声音,比如音乐或其他音频流。
HTML5:<audio src="someaudio.wav">您的浏览器不支持 audio 标签。</audio>
HTML4:<object type="application/ogg" data="someaudio.wav"><param name="src" value="someaudio.wav"></object>

<canvas> 标签定义图形,比如图表和其他图像。这个 HTML 元素是为了客户端矢量图形而设计的。它自己没有行为,但却把一个绘图 API 展现给客户端 JavaScript 以使脚本能够把想绘制的东西都绘制到一块画布上。
HTML5:<canvas id="myCanvas" width="200" height="200"></canvas>
HTML4:<object data="inc/hdr.svg" type="image/svg+xml" width="200" height="200"></object>

<command> 标签定义命令按钮,比如单选按钮、复选框或按钮。
HTML5: <command onclick=cut()" label="cut">
HTML4: none

<datalist> 标签定义可选数据的列表。与 input 元素配合使用,就可以制作出输入值的下拉列表。
HTML5: <datalist></datalist>
HTML4: see combobox.

<details> 标签定义元素的细节,用户可进行查看,或通过点击进行隐藏。与 <legend> 一起使用,来制作 detail 的标题。该标题对用户是可见的,当在其上点击时可打开或关闭 detail。
HTML5: <details></details>
HTML4: <dl style="display:hidden"></dl>

<embed> 标签定义嵌入的内容,比如插件。
HTML5: <embed src="horse.wav" />
HTML4: <object data="flash.swf"  type="application/x-shockwave-flash"></object>

<figcaption> 标签定义 figure 元素的标题。”figcaption” 元素应该被置于 “figure” 元素的第一个或最后一个子元素的位置。
HTML5: <figure><figcaption>PRC</figcaption></figure>
HTML4: none

<figure> 标签用于对元素进行组合。使用 <figcaption> 元素为元素组添加标题。
HTML5: <figure><figcaption>PRC</figcaption><p>The People's Republic of China was born in 1949...</p></figure>
HTML4: <dl><h1>PRC</h1><p>The People's Republic of China was born in 1949...</p></dl>

<footer> 标签定义 section 或 document 的页脚。典型地,它会包含创作者的姓名、文档的创作日期以及/或者联系信息。
HTML5: <footer></footer>
HTML4: <div></div>

<header> 标签定义 section 或 document 的页眉。
HTML5: <header></header>
HTML4: <div></div>

<hgroup> 标签用于对网页或区段(section)的标题进行组合。
HTML5: <hgroup></hgroup>
HTML4: <div></div>

<keygen> 标签定义生成密钥。
HTML5: <keygen>
HTML4: none

<mark>主要用来在视觉上向用户呈现那些需要突出的文字。<mark>标签的一个比较典型的应用就是在搜索结果中向用户高亮显示搜索关键词。
HTML5: <mark></mark>
HTML4: <span></span>

<meter> 标签定义度量衡。仅用于已知最大和最小值的度量。必须定义度量的范围,既可以在元素的文本中,也可以在 min/max 属性中定义。
HTML5: <meter></meter>
HTML4: none

<nav> 标签定义导航链接的部分。
HTML5: <nav></nav>
HTML4:<ul></ul>

<output> 标签定义不同类型的输出,比如脚本的输出。
HTML5: <output></output>
HTML4: <span></span>

<progress> 标签运行中的进程。可以使用 <progress> 标签来显示 JavaScript 中耗费时间的函数的进程。
HTML5: <progress></progress>
HTML4: none

<rp> 标签在 ruby 注释中使用,以定义不支持 ruby 元素的浏览器所显示的内容。
HTML5: <ruby>漢 <rt><rp>(</rp>ㄏㄢˋ<rp>)</rp></rt></ruby>
HTML4: none

<rt> 标签定义字符(中文注音或字符)的解释或发音。
HTML5: <ruby>漢 <rt> ㄏㄢˋ </rt></ruby>
HTML4: none

<ruby> 标签定义 ruby 注释(中文注音或字符)。
HTML5: <ruby>漢 <rt><rp>(</rp>ㄏㄢˋ<rp>)</rp></rt></ruby>
HTML4: none

<section> 标签定义文档中的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分。
HTML5: <section></section>
HTML4: <div></div>

<source> 标签为媒介元素(比如 <video> 和 <audio>)定义媒介资源。
HTML5: <source>
HTML4: <param>

<summary> 标签包含 details 元素的标题,”details” 元素用于描述有关文档或文档片段的详细信息。”summary” 元素应该是 “details” 元素的第一个子元素。
HTML5: <details><summary>HTML 5</summary>This document teaches you everything you have to learn about HTML 5.</details>
HTML4: none

<time> 标签定义日期或时间,或者两者。
HTML5: <time></time>
HTML4: <span></span>

<video> 标签定义视频,比如电影片段或其他视频流。
HTML5: <video src="movie.ogg" controls="controls">您的浏览器不支持 video 标签。</video>
HTML4:<object type="video/ogg" data="movie.ogv"><param name="src" value="movie.ogv"></object>

来源:http://www.cnblogs.com/yuzhongwusan/archive/2011/11/17/2252208.html