前言

随着Web前端开发由PC转向Mobile,作为前端工程师,除了需要去学习掌握移动端的新特性外,还需要面对大量移动端特有的难题,其中之一就是——怎么调试移动端页面? 针对调试的问题,现在已经有一些很好的解决方案,比如:weinre、chrome remote、手Q浏览器Inspector,不过这些方案的门槛都较高,需要满足一些额外的条件。目前,在日常的开发调试工作中,打日志依然是一种常见的调试手段,通过日志内容来判断当前页面运行的状态,而日志的输出形式又有很多种,有img请求、dialog弹窗、alert等等,但这些输出方式都不能很好的满足我们的需要,甚至存在一些问题,所以Rosin诞生了。

关于Rosin

Rosin 是一个Fiddler插件,它能接收页面中的console的输出,将内容持久存储在本地,并展现在Fiddler面板。 如果你的项目是通过Fiddler代理来开发调试手机页面,那么Rosin将会是你的好帮手。
项目地址:  http://alloyteam.github.io/Rosin/

写在前面

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

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

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

canvas globalCompositeOperation

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

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

前端突击队宣传banner
去年CodeStar第一季《前端特工》带来的热潮还没完全过去,3月21号,短短几个月后AlloyTeam团队又强势推出了CodeStar第二季《前端突击队》,这次又将会给各位前端er带来什么视觉、体验和智力挑战上的盛宴?

AlloyDesigner介绍

  AlloyDesigner 的创意来自于“临摹”的灵感,使用AlloyDesigner后,你可以把设计稿拖进你的Web页面铺在页面的最底层,然后就可以对着设计稿来构建DOM元素和CSS样式啦,这样子是不是直观了很多?通过AlloyDesigner直观地调整页面,迅速达到与视觉稿一致的目的。

AlloyDesigner的官网:http://alloyteam.github.io/AlloyDesigner/

 

alloydesigner5

allotstick_head2

What’s AlloyStick

AlloyStick 是一款专为HTML5开发的2D骨骼动画引擎。可以用于HTML5动画开发、HTML5游戏开发。AlloyStick 主要由骨骼动画引擎和骨骼动画编辑器两部分组成。骨骼动画编辑器提供强大的骨骼动画编辑功能,拖拽骨骼组合角色,通过设置动画关键帧,输出动画数据。js动画库根据输出数据,依靠强大的自动补间和骨骼关系,就可以制作出逼真、生动的Canvas骨骼动画,可以畅快的运行在PC、手机、平板等设备里。

移动Web开发是一块新的领域,给Web带来更多机会的同时,也带来了更多的挑战。为了让开发者在移动Web的道路上走得更加顺畅,开发更加高效,Spirit(勇气号)由此而生。

Spirit 官网:http://alloyteam.github.io/Spirit/

 QQ20140210113520

====索引=====

【Web缓存机制系列】1 – Web缓存的作用与类型

【Web缓存机制系列】2 – Web浏览器的缓存机制 

【Web缓存机制系列】3 – 如何构建可缓存站点

【Web缓存机制系列】4 – HTML5时代的Web缓存机制

【Web缓存机制系列】5 – Web App时代的缓存机制新思路

【Web缓存机制系列】6 – 进击的Hybrid App,量身定做缓存机制

============

前言

前面的文章分别简述了Web缓存、相关机制、以及 html5 和 Web App 时代我们可以选择的缓存思路。转眼过了很长时间,这期间移动互联网成为大家讨论和学习的焦点,部门也有很多同学陆续接触 Mobile Native App 和 Mobile Web App 的开发。同时,还有部分同学专注 QQ 内嵌 Webkit + Client 这种Hybrid App模式的开发,继续推动 QQ 客户端 Web 化的进程。

引用张图,简单粗俗的解释下 Native App、Web App 和 Hybrid App

什么是Qing?Qing是一套基础开发模版,来源于我们在手机与PC端上的大量工程实践。Qing所提供不是冷冰冰的文件,
而是一套Web前端解决方案,所以Qing不只是关注项目的初始状态,而是整体的工作流程,
这是Qing与现有开源的开发模版显著差异的一点。Qing的体验必须是高效且愉悦的,拒绝繁琐与重复。
其足够的Qing量,只需30分钟内即可掌握最先进的Web开发技能。以下是Qing所基于的开发理念:

  1. 移动端优先,兼容PC端
  2. 向前看齐,基于ES5开发
  3. 模块化Web开发过程
  4. 自动构建与部署集成, 基于Mod.js工具

基于未来趋势的开发理念,Qing旨在提供工程化方案。

平台与浏览器版本兼容:

  • iOS 4.0+
  • Android 2.2+
  • IE 6+
  • Chrome
  • Firefox
  • Safari

一 .《墙来了》简介

《墙来了》是一款基于HTML5的体感游戏,第三届腾讯创意马拉松的一等奖作品,由 腾讯 AlloyTeam 和 HTML5 梦工场联合出品。《墙来了》 采用 HTML5、Javascript、CSS3 等全新 Web 技术来构建一个在线的体感游戏,只要有一个浏览器和一个摄像头,就可以通过身体的摆动,体验穿墙的刺激与快感。

  • 运行平台:Chrome
  • 语言支持:中英文

CSS3 UI Lib库是由腾讯AlloyTeam前端开发团队建立,主要收集国内外友好体验和创意的界面组件Demo。它除了使用CSS3技术外,还使用了HTML5JSJXjQuery等技术,来达到完美的外观表现以及交互体验。此项目自201110月份成立以来,经过团队一年多的整理和收集,已经趋于成熟。

  • CSS3 UI Lib库:Http://CSS3Lib.alloyteam.com