TAT.sheran 手机上的环境传感器
In HTML5,移动 Web 开发 on 2015年06月29日 by view: 4,282
2

手机上的环境传感器,一般包括气压传感器、温度传感器、湿度传感器、光传感器、声音传感器和距离传感器等。气压传感器能通过气压测量,判断手机当前位置的海拔高度,能提高 GPS 定位的精度,在三星 Galaxy Nexus 上有配备;温度传感器一方面用来测量气温,判断当前环境是否舒适,一方面也能监测手机内部温度是否异常;而比较普遍的是光传感器和距离传感器,对智能手机来说几乎是标配,并且一般设计位于手机正面上方听筒附近位置。

TAT.tennylv 移动 web 问题小结
In CSS3,HTML5,Web开发,经验心得 on 2015年06月14日 by view: 28,818
29

Meta 标签:

这个想必大家都知道,当页面在手机上显示时,增加这个 meta 可以让页面强制让文档的宽度与设备的宽度保持 1:1,并且文档最大的宽度比例是 1.0,且不允许用户点击屏幕放大浏览。

对于传统的页面模型来说,数据的拉取+渲染模型如下:

1

在页面的 head 部分,使用 jsonp 预拉取 cgi 资源,然后在资源加载完成之后,检查预拉取的数据是否已经返回,如果已返回,则直接用该数据渲染(避免了先用缓存数据渲染再用 cgi 数据渲染导致的二次刷新),否则才用缓存数据渲染。

TAT.sheran 浅谈 flexbox 的弹性盒子布局
In CSS3,HTML5 on 2015年05月19日 by view: 13,990
17

     flexbox 是一个新的盒子模型,当你给一个元素使用了flexbox模块,那么它的子元素就会指定的方向在水平或者纵向方向排列。这些子元素会按照一定的比例进行扩展或收缩来填补容器的可用空间。flexbox 有许多很好用的地方,下面就着重讲述一下它的一些使用场景:

 

Example 1: flexbox 等分布局

 

      如果你要实现以下所示的样式,你可能首先想到的是用 float:

 

         图片1 

 

TAT.simplehuang React Native 之 JSBridge
In HTML5,JavaScript,Web开发 on 2015年05月10日 by view: 16,896
4

React Native 综述:

在 React Native 中,JavaScript 跟 Object-C 均有一个对应的中间件负责交互,源码中称为 bridge,它们通过 callback 的形式进行传参,通过参数配置来触发 OC 的控件,从而达到以 JavaScript 来控制 Native 的目的。

React Native 的设计理念:既拥有 Native 的用户体验、又保留 React 的开发效率。

React Native 的口号:Learn Once,Write Anywhere.

 

TAT.dnt AlloyRenderingEngine 入门
In HTML5,Web开发 on 2015年04月17日 by view: 4,690
4

写在前面

AlloyRenderingEngine 是一款非常快速的渲染引擎,目前该项目已经合并至 https://github.com/AlloyTeam/AlloyGameEngine/ ,

属于 AlloyGameEngine 下的一个子项目,负责渲染。

因为游戏===复杂的 App,所有 AlloyGameEngine 不仅可以做游戏,也可以制作 App,比如: http://kmdjs.github.io/ppt-editor/

用 AlloyGameEngine 制作 App,如大炮轰蚊子。

TAT.sheran 自适应设计与响应式网页设计
In CSS3,HTML5 on 2015年04月14日 by view: 32,336
6

目前非常流行自适应设计与响应式设计,而且经常让人混淆,自适应设计不应与自适应布局混为一谈,它们是完全不一样的概念。

在这先说明下这两者的异同:

自从移动终端飞速发展以来,各种各样的机型突飞猛进,很多网站的解决方法,是为不同的设备提供不同的网页,比如专门提供一个 mobile 版本,或者 iPhone/iPad 版本。这样做固然保证了效果,但是比较麻烦,同时要维护好几个版本,而且如果一个网站有多个 portal(入口),会大大增加架构设计的复杂度。

于是,很早就有人设想,能不能" 一次设计,普遍适用",让同一张网页自动适应不同大小的屏幕,根据屏幕宽度,自动调整布局(layout)?

2010 年,Ethan Marcotte 提出了" 自适应网页设计"(Responsive Web Design)这个名词,指可以自动识别屏幕宽度、并做出相应调整的网页设计。

ES6 Generator 介绍
In HTML5,JavaScript,Node.js,Web开发 on 2015年03月30日 by view: 14,450
5

TAT.bizai HTTP2.0 的奇妙日常
In HTML5,Web 前端资讯,Web开发 on 2015年03月23日 by view: 31,857
35
   【交代:时间是在距今的 5 年后,由于我的智能滑板鞋,还有智能小内内的创业失败,为了在这个先看胸再看脸的时代活下去,我不得不重操旧业,去面试 web 前端工程师的工作。多年没有接触 web 开发了,找了个 AlloyTeam 的老同事晨伯帮我温习一下知识, 好让面试通过】
    
    “多年没见,你的女神后来什么样了” 晨伯总是这么八卦我的女神,而不是我。
    “我给你一个表情,你自己体会一下”youshang_small
    “你先写个小页面给我看看吧,我指导一下你吧。”晨伯一幅很吊的样子。
但是这样的小 case 当然难不了我,虽然多年没碰 web,但是我当年可以是 AlloyTeam 的成员啊。很快我就啪啪啪地完成了页面。晨伯看完我写的页面,一幅 “我可是有女朋友的男人” 的表情,感叹了一句 “现在是 HTTP2.0 的时代啦,给你普及一下知识点”。
 

写在前面

大家阅读此文之前,可以先看一篇 MiloYip 的文章:用 JavaScript 玩转游戏物理 (一) 运动学模拟与粒子系统,看完之后再看此文,更加容易理解。

MiloYip 使用的粒子是 canvas 中绘制的圆,还有一些粒子效果是基于 像素级别的,如:火焰字 ,但是使用像素的计算成本太大,因为需要的粒子数量太多,甚至要配合一些 nosie 算法,如(perlin nosie),计算量太大。

所以一般会先设计好粒子的纹理(每个纹理假设是 32*32,一个粒子就包含了九百多个像素了),这样需要的粒子个数不多,计算量也不大,管理粒子的成本也不高(对粒子增删改查)。

canvas globalCompositeOperation

粒子系统在什么时候最漂亮?晚上!所以在绘制纹理的时候,需要设置 globalCompositeOperation 的值为 lighter。其作用是:在图形重叠的地方,颜色由两种颜色值的加值来决定。

globalCompositeOperation 还有非常多的属性可以设置,详情见:w3school。