移动端网页绝对自适应方案总结

网页自适应是个涵盖很广的话题,这里我只简单总结下移动端网页绝对自适应,简单来说如果设计师提供给你的设计稿是750px宽,此时里边有一张图片宽高均为375px;那么在IPhone6 Plus手机里边屏幕宽为414px时该图片的渲染宽度应该为207px,这种保证元素尺寸、字体大小在屏幕中所占比例大小始终不变的方式我称之为移动端网页绝对自适应

目前来说我总结了大概有如下五种方式来实现移动端网页绝对自适应

Read More

WebGL ThreeJS学习总结四

通过前段时间的学习,现在已经能使用ThreeJS框架制作一些简单3D效果,对原生WebGL也有了简单的了解;在学习过程中察觉到自己在数学方面欠缺的太多,所以我决定先缓一缓技术方面的学习,补一补数学基础。

另外需要的注意的是以下内容大部分来自于《3D数学基础:图形与游戏开发》。

Read More

某个程序员眼中的用户体验设计

作为一名半路出家的前端工程师,大概开发移动端网页有两年时间了吧,虽然交互设计不是我的工作内容,但也或多或少的踩了一些坑,然后根据这些坑记录了一些小总结,比如:

  • 移动网页中输入项最好在页面顶部,关联搜索等复杂交互最好是单独新开页面,不应该和其它交互杂糅在一起;
  • 移动网页中需要交互触发的元素不应该设计的太小,设计的太小对于手指操作来说很困难;
  • 移动网页中某个交互不应该对页面元素以及布局产生突然变化,容易让用户很困惑;如果某个交互导致页面变化很大则应该用新开的页面的方式展现;
  • 移动网页的交互不仅仅包括其内部本身的一些交互,还包括和任何可能出现该网页的APP软件的交互;简单来说,设计和实现一个移动网页其实还要考虑该网页在当前流行APP中分享的文案、图标等;
  • 异常反馈很重要,不仅仅指产品设计时的异常情况,还包括程序运行时的各种异常(这里需要开发尽可能的考虑清楚并反馈给产品),尽可能的给用户清晰的反馈;
  • 最好对用户在页面的操作有一定的反馈,比如点击按钮等。

都是些零零散散的东西,直到前不久在公司的图书角找到了一本漂亮,纸质很好的书《匠心体验-智能手机与平板电脑的用户体验设计》:

Read More

ThreeJS四步制作一个简易魔方

去年之所以再次兴起了学习 WebGL 的念头,主要是有两个原因:

  • 其一是想制作一个魔方玩;
  • 其二是想用 Web 技术还原一些经典电影的镜头,比如《Cast Away》又译《荒岛余生》中电影快结束时主人公站在十字路口的场景。

现在看来我想第一个目的已经达成了,有点可惜的是在此之前已经有很多人做过同样的事了,比如:

站在前人的肩膀上整个事情简单了很多,但是解决问题所带来的成就感也相对减少了很多,这也是没有办法的事情了。

Read More

像素差逐帧动画

首先这是个从来没有在生产环境中使用的技术,虽然对于交互较简单的展示动画可以使用视频直接替换,但是视频存在很多兼容性问题,比如:

  • 目前绝大部分移动端浏览器只支持同时渲染一个视频,因此不能通过切换视频实现具有复杂交互的动画;
  • 对于单个视频的时间控制,移动端浏览器的渲染能力也不足以支持不缝隙跳转,因此也不能通过控制视频的时间实现具有复杂交互的动画。

像素差逐帧动画的原理实际就是资源的再压缩然后用还原计算时间换网络加载时间;

大部分情况下逐帧动画前后帧或多或少存在一些相似或者相同的部分,而我们在使用精灵图制作传统逐帧动画时,从动画的整体上考虑实际有很多部分是重复加载了很多次的;

如下图:

而像素差逐帧动画主要做的就是剔除掉后一帧中和前一帧相似或者相同的部分(因为这部分在前一帧中已经被加载了),然后根据前一帧以及前一帧和后一帧的差还原出后一帧;这样的话就能既不会丢失数据又能减少加载时所需的资源,而且由于一些新技术的引入(Canvas、WebWorker)实现像素差的计算和还原也变得比以前简单很多。

Read More

WebGL ThreeJS学习总结一、二

在写这篇总结之前,这已经是我第二次尝试学习WebGL了,第一次是在两年前,那时候正在从事Java开发相关工作,觉得没什么意思,然后平时工作中有接触到一些前端相关的东西,刚好那时HTML5很火,就稍微了解了一下Canvas,然后自然而然的知道了WebGL,刚开始学的时候感觉很吃力,然后就买了本书《WebGL入门指南》,虽然跟着书上的例子也能照葫芦画瓢弄个正方体出来,但是总感觉实现了某个例子,依然啥也不会,没多久就放弃了。

现在已经从事前端开发工作接近两年,在前不久看到一篇博客后再次燃起了学习WebGL的热情,然后采购了一本书《WebGL编程指南》,花了一周时间看了100多页之后,差点再次放弃,思考了一下午决定改进下学习方法。

结合这两次的从准备入门到放弃的经验来看,单独学习ThreeJS容易给人造成不知其然的感觉,而单独学习WebGL又太枯燥,所以我决定把二者结合起来,先根据《WebGL编程指南》学习WebGL感觉枯燥之后就参照ThreeJS官方文档以及官方源代码中的例子学习ThreeJS并找些相对容易实现的例子实现,在这过程中写一些学习总结。

总结一、二主要是了解一些WebGL的基本概念,然后通过示例程序学习WebGL程序的基本结构、GLSL语言以及编写一些简单的WebGL程序。

Read More

TCP、WebSocket等网络协议简单分析

目前Web通信使用的是HTTP协议,HTTP协议是基于TCP协议的应用层协议,HTTP协议的工作模式是request/response模式,在一次通信中,必须首先由客户端向服务端发起TCP连接,在TCP连接建立之后,首先由客户端发起HTTP request,然后服务端再发起response。

因此,在这种标准HTTP工作模式的约定下,服务端是不被允许在未收到HTTP request的情况下,发送一个HTTP response给客户端的,在这种约束下,为了能够不断的随时从服务端发送内容到客户端,就必须保证服务端随时都有一个待响应的request(注意这与persistent connection不是同一个概念,persistent connection是用来复用HTTP之下的TCP连接)。

Read More

一次网页动画踩坑实录

在富途从事前端开发以来,真正意义上就做过两次网页动画,但是每次的开发经历都很类似;刚开始感觉很简单,后来就不知不觉就掉坑里边了……为了下次能有所改观,我准备从头到尾仔细的总结一下。

需要注意的是以下所述只是我个人在开发过程中的感受和总结,有可能不完善甚至是错误的;另外补充了一些感觉有一定道理但是由于一些原因没有亲自去验证的观点,主要是为了记录下来,方便今后去验证。

Read More