宏亿道子

首页 / 搜索标签: H5

H5缓存机制浅析-移动端Web加载性能优化

1. H5缓存机制介绍

H5,即HTML5,是新一代的HTML标准,加入很多新的特性。离线存储(也可称为缓存机制)是其中一个非常重要的特性。H5引入的离线存储,这意味着 web 应用可进行缓存,并可在没有因特网连接时进行访问。

H5应用程序缓存为应用带来三个优势:

  • 离线浏览 – 用户可在应用离线时使用它们
  • 速度 – 已缓存资源加载得更快
  • 减少服务器负载 – 浏览器将只从服务器下载更新过或更改过的资源。

根据标准,到目前为止,H5一共有6种缓存机制,有些是之前已有,有些是H5才新加入的。

  1. 浏览器缓存机制
  2. Dom Storgage(Web Storage)存储机制
  3. Web SQL Database存储机制
  4. Application Cache(AppCache)机制
  5. Indexed Database (IndexedDB)
  6. File System API

下面我们首先分析各种缓存机制的原理、用法及特点;然后针对Anroid移动端Web性能加载优化的需求,看如果利用适当缓存机制来提高Web的加载性能。 查看全文

2016/08 17  周三

《全民突击》HTML5设计全程回顾及经验总结

小宝:腾讯游戏HTML 5实战案例!在这次朋友圈广告的设计过程中,遇到了好多拦路虎,有惊喜有郁闷,但在这个过程中我收获到了很多关于设计的经验和对项目的理解。下面,我以设计师的角度来分享一下在这次朋友圈广告中的一些过程和感悟,附设计流程图哟。

前言

最近有好多好多的优秀的朋友圈广告出现在我们的眼前,得到了好多人的关注。

小宝也很期待能够做一个有意思的朋友圈广告给大家玩玩,没想到梦想成真了!

这篇有趣的文章呢,我会分3大部分来和大家讲述,请屏幕前的你耐心的听我“墨迹”呗:

  1. 一个前所未有的挑战;
  2. 《全民突击》朋友圈广告的设计回顾;
  3. 就是很有震撼力的总结了;

接下来我就开始了呀!

一、前所未有的挑战

(空降了一个大大大需求)

听说一款3D枪击手游《全民突击》要上微信朋友圈广告了呀。项目组的同学们和我们设计师们都惊呆了,手忙脚轮的赶紧的展开筹划和讨论。

1.01项目背景

随着枪击手游的竞争越来越凶,玩家对《全民突击》的认知还是不够,需要做一次品牌的曝光宣传,让玩家对《全民突击》的认知更深入做到拉新的一个宣传效果,也借助微信朋友圈广告的渠道,打造一个《全民突击》是第一个上微信朋友圈广告的枪击游戏品类的游戏。小伙伴们都“鸡冻湿”了!

1.02需求目的

《全民突击》要在这个阶段进行一次拉新,品牌曝光,提升产品知名度,还要保持老玩家活跃度和拉回流的目的,转化新进,提升市场占有率,做一次品牌的整合传播推广,围绕整个初始想法策划了一个H5对其进行传播。 查看全文

2016/02 15  周一

WeUI微信网页设计样式库发布

为帮助网页开发者实现与微信客户端一致的视觉体验,并降低设计和开发成本,微信团队推出了网页设计样式库:WeUI

该样式库目前包含 button (按钮)、cell (单元格)、toast (浮层提示)、dialog (对话框)等网页常用的各式元素,并已在 GitHub 上开源。

开发者

开发者只需三步,就能在自己的网页上轻松实现按钮、浮层提示等功能:

  1. 根据文档说明,下载 WeUI 库。
  2. 在页面中引入 weui.min.css 文件。
  3. 从官方 demo 中拷贝需要的功能组件代码到自己页面即可。

Demo 体验地址WeUI演示

详情请点击开发者文档查看全文

2016/01 20  周三

微信网页开发者工具发布

公众平台发布微信 web 开发者工具,可以在 PC 或 Mac 上模拟访问微信内网页,帮助开发者更方便地进行开发和调试。

具体功能如下:

1. 使用真实用户身份,调试微信网页授权。

xzbfxbzf

 

2. 校验页面的 JSSDK 权限,以及模拟大部分 SDK 的输入和输出。 查看全文

2016/01 12  周二

H5 深度玩法总结,让你的 H5 获得病毒扩散效益

前言

风靡营销圈的H5已经不仅仅是一个展示工具,现在几乎所有品牌都会利用H5技术制作大量视觉丰富夺目的小应用、小游戏,以期获得病毒扩散效益。甚至我最近都收到了H5的简历,应聘的小哥直接发了个二维码过来,虽然这种简单的套模版连我这种小copy都会做,但这种自我推销的创意值得点个赞!

然而,技术汪们表示,还有很多酷炫到没朋友的H5你们都还没见识到好吗!

接下来,请跟我左手右手一个慢动作,开启H5花样玩法的神奇大门!

一、H5不可替代的三!大!技!能!

1、绘图功能

其实大伙儿在很多H5中看到的动画效果就是用H5的绘图功能做的,比如前段时间我们为雀巢做的一个案例。 查看全文

2016/01 06  周三

H5与品牌营销

前言

关于H5的发展,分享几个最近看到的惊人数据和新闻:

1、截至2015,有80%的App将全部或部分基于HTML5。这意味着大部分App的内容都将是以网页的形式呈现,典型的例子包括微信、Facebook、Twitter等。(数据来源:国际科技媒体 ReadWriteWeb,2015)

2、浏览量最高的1000个H5作品中,42%是心灵鸡汤,最高17,358,480 uv;27%是测试题,最高49,940,339 uv;15%是社交互动游戏,最高2,892,047 uv; 5%是大型品牌宣传,最高551,195 uv。(数据来源:在线h5工具平台ih5.cn,2015.9)

3、谷歌浏览器于9月1日起不再自动播放Flash。亚马逊宣布旗下网络(包括Amazon.com门户在内)的所有广告将不再使用Flash。在可预见的未来,Flash广告将被HTML5广告所替代。

4、朋友圈广告上线(http://ad.weixin.qq.com),据传起投20万, CPM 40元。详情外链的H5页面可以用微信提供的模板,也可以自行定制。

注:本文提到的H5特指基于HTML5技术的动态交互页面。 查看全文

2015/12 24  周四

渐进式 H5 设计与实现

前言

由于 H5 页面适用于移动网络传输,跨终端,且方便快速迭代,此外在 App 应用里加入h5的混合开发越来越普遍,如微信里面即将要上线的 H5 微信运动等。

Norman 的认知处理的 3 个层次:本能层、行为层、反思层。相当于对事物或信息的最初认知,之后才会产生行为,这时候才要更多地考虑物理操作的负荷,即手指的操作频次,不同输入模式的切换。所以将本能层放到了首位吧,否则即使操作再简单,认知不正 确或不清楚,直接会影响用户对产品的整体验。就像我们在考虑如何扩大功能的时候,要兼顾到如何简化界面。但是过度重视本能设计而虚弱行为设计(沉浸在产品中以完成日常任务和活动等的功能设计),炫酷的效果也只能是昙花一现?而且在实现 H5 页面的时候还要考虑各终端性能,屏幕大小等因素,所以用渐进式的方式来权衡本能设计与行为设计。 查看全文

2015/11 21  周六

移动页面横竖屏切换提示

前言

在制作移动页面的时候常会考虑页面在不同手机分辨率下的显示效果,通过一些布局技巧使页面从最小的iphone4 兼容至 较大的iphone6 plus及其他android手机。

然而却常常忽略了一个小细节:用户在使用时有时会切换横/竖屏,而制作页面的时候很少考虑用户切换后的效果。

示例

先来看一下如果没有经过考虑横/竖屏切换后的效果(竖版设计为例)。 查看全文

2015/09 19  周六

手机界面设计中12种常用布局

前言

总结下手机界面改版要考虑的布局,主要的分为以下2大类

主导航

  1. 列表式
  2. 陈列馆式
  3. 九宫馆式
  4. 选项卡式
  5. 旋转木马
  6. 行为扩展式
  7. 多面板
  8. 图表式

次导航

  1. 抽屉式
  2. 超级菜单式
  3. 弹出式
  4. 图片轮盘式

其中,所有的主要导航都可以做为次级导航,但次级导航不太适合用作主要导航 。为什么?因为次导航是隐藏起来,隐而不见、只有触发时才显示。

查看全文

2015/05 03  周日

纸飞机许愿

x

钢琴节奏

请选择弹奏的曲谱

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 1
    • 2

    [返回曲谱列表]