TAT.Kinvix CodeNow让你在浏览器实时调试代码你的API代码
In 未分类 on 2012年05月07日 by view: 2,579
1

几乎所有互联网巨头都会开放自己的API,但是对于开发者来说试新API却是件棘手的事。在开始写第一行代码之前,也许得折腾几个小时来做好设置、获得权限,还得先学习语法。因此,由Amazon前员工设立的初创企业CodeNow.com瞄准了这一点需求,帮助开发者简化测试API前的准备步骤。

TAT.sheran 用纯CSS3制作透明loading图片,你值得拥有!!!
In 未分类 on 2012年05月04日 by view: 10,803
9

你是否遇到过这样的情景:

1、用gif格式的loading菊花会有背景颜色,与页面背景格格不入
2、于是,设计师给你一帧一帧变化的透明png合图,你能想到的就是用JS来控制
3、最终,你会发现用JS控制的loading菊花,对网页性能有一定的影响

        好在现在,这个HTML5到来的时代,如果你不用考虑浏览器兼容问题,你就可以用CSS3轻轻松松实现透明loading菊花的加载效果,下面的Step By Step 会让你茅塞顿开:

TAT.Cson 圈泡泡游戏的几何知识点
In 未分类 on 2012年04月18日 by view: 3,746
1

当我们进行游戏开发时,很多时候都需要用到一些几何知识,该文主要是抛砖引玉,通过一个HTML5的圈泡泡小游戏介绍下游戏开发中一些几何知识的运用。 游戏demo可以看这里:HTML5圈泡泡小游戏demo 游戏中一个最主要的操作就是通过鼠标的圈选,捕获选区内的小球并得分(或扣分)。我们一步步来分析这个操作。

Step1:画笔的形成。

首先是,怎样通过鼠标画出一个条条曲线?我们知道,HTML5游戏的开发中,我们看到游戏里每个动作的更新,都是通过循环中每一帧对游戏元素属性的更新而形成的。因此我们只需要在每次帧更新的时候根据鼠标上一次更新时的位置与本次帧更新的位置画出一条线段,那么在游戏无数次的循环中,鼠标划过的位置就由N条线段连成一个轨迹,如果我们把线段都绘制出来,画布上就是一条条曲线或一个个圈。 因此我们也可以说,曲线是一条由多条线段首尾相连的线段组成的 。

八一下LocalStorage本地存储的卦
In 未分类 on 2012年04月03日 by view: 15,087
3

什么是本地存储

以下内容从网上抄来的

HTML5 storage提供了一种方式让网站能够把信息存储到你本地的计算机上,并再以后需要的时候进行获取。这个概念和cookie相似,区别是它是为了更大容量存储设计的。Cookie的大小是受限的,并且每次你请求一个新的页面的时候cookie都会被发送过去。HTML5的storage是存储在你的计算机上,网站在页面加载完毕后可以通过Javascript来获取这些数据。
简单的说本地存储是HTML5的一部分。更为详细准确的说是本地存储过去是HTML5的标准中的一部分,而后来由于有些工作组的人表示HTML5太庞大了,于是就剥离出来作为一个单独的标准。这听起来好像是把一块馅饼分成很多块目的是为了减少总的卡路里……

为什么要用本地存储

其实前面已经提到了,用本地存储有这些好处

  • 本地存储和cookie一样提供了把数据保存到本地的能力,页面刷新或者关掉浏览器后,数据依然存在
  • 大!虽然不同浏览器的标准可能不一样,主流的一般都在5~10M,比cookie的4k强多了
  • 本地存储的数据不会被发到服务器,与cookie相比,节省带宽,加快响应速度

所以,如果需要保存一些数据到用户的浏览器,而这些数据又不需要每个请求都提交给服务器,不妨考虑使用本地存储。

如何使用

首先,得检查浏览器是否支持本地存储
可以通过检测window下面是否有localStorage字段来判断,但是在IE下,本地文件是不能访问localStorage的,此时localStorage字段为空,所以还要加上判断

还有一种情况,假如页面里有id为localStorage的元素,某些浏览器可以通过window.localStorage索引到这个元素-___,-||
为了避免你的代码在遇到如此蛋疼的DOM时跪掉,我建议是使用特征检查

TAT.林挺 腾讯Q+前端团队携手举办广东省首期HTML5 Code Jam
In 未分类 on 2012年04月01日 by view: 2,425
1

2012年3月24日及25日,HTML5研究小组携手腾讯Q+前端团队、中青宝互动( 本次活动由中青宝互动全程赞助)在深圳中青宝成功举办广东省首期HTML5 Code Jam!活动现场参赛者活力四射,激情投入,在经过近32小时的沟通协作及相互配合后,最终创作的作品在整体质量上超越北京、上海场。

HTML5 Code Jam现场开发是HTML5研究小组在国内的首创现场开发模式,开发者\策划师\设计师齐聚一堂,现场组队\开发并完成项目。通过认识朋友、团队协作、快速挖掘潜能,高效解决大家在开发过程中遇到的问题并历练自己。

TAT.iAzrael CSS3模拟Checkbox
In 未分类 on 2012年03月27日 by view: 4,722
4

话说, 很久很久以前, 一直到不久前, 浏览器原生的checkbox(复选框)的样式大部分都不能改的, 在各个浏览器中的外观和行为都不一致, 这是一件相当让人蛋疼的事.

而在那个远古的蛮荒时代, 还生活着一种叫攻城师的生物, 每天被产品经理们强迫着, 想方设法让checkbox外观一统江湖, 苦不堪言.

在那个时代, css2和dom level2风行, 却对checkbox束手无策, 苦逼的攻城师们只能用JS来模拟checkbox的行为, 无辜的checkbox只能灰溜溜的束之高阁~.~

TAT.sheran HTML5,CSS3,jQuery自制video播放器~~值得借鉴哦~~~
In 未分类 on 2012年03月22日 by view: 8,901
3


首先说这是一个神奇的播放器,为什么神奇呢,先直接看最终成果:



点击我查看demo

====索引=====

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

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

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

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

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

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

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

Web App的概念逐渐被业界认可,各大互联网公司也纷纷推出Web App开发大赛,积极引入到他们的开放平台,比较著名类似facebook农场,qzone偷菜之类的。Web开发逐渐从Web Page的进入到Web App的时代,想详细了解的话,可以看下超叔在D2上分享的分享《开放时代:从Web Page到Web APP》视频Slide

Web App常见架构

以WebQQ例,WebQQ这个站点的所有内容都是一个页面里面呈现的,我们看到的类似windows操作系统的框架,是它的顶级容器和框架,由AlloyOS的内核负责统筹和管理,然后其他模块,比如壁纸设置,消息中心,App Store都是以模块的形式,并用iframe的方式嵌入到顶级容器中。具观察,现在越来越多的Web应用都倾向于使用这个的架构,这样做好处是很明显的,比如顶级框架可以维持一个不变的javascript上下文便于管理;关闭模块的iframe后,内存可以更好的释放;利用iframe的安全机制最大限度的保证内核的安全和稳定等等。

这种Web的架构,其实也给我们Web前端提供了从代码逻辑层面上给Web应用实现缓存提供了可能。

【Web缓存机制系列】4 – HTML5时代的Web缓存机制
In 未分类 on 2012年03月22日 by view: 18,251
12

====索引=====

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

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

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

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

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

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

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

随着现代浏览器的推动,Flash放弃对移动端的支持,HTML5无疑成为当前Web前端炙手可热的话题。各大游戏开发商、App开发商纷纷投入人力进行研究和技术储备。相信不久的将来,HTML5会迎来一个快速发展和普及的春天。那么,HTML5这个新一代的标准,又给我们带来哪些缓存机制呢?

【Web缓存机制系列】3 – 如何构建可缓存站点
In 未分类 on 2012年03月22日 by view: 13,759
9

====索引=====

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

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

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

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

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

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

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

前面了解了Web缓存的运行机制极其重要性之后,我们可以从以下这些方面去努力改善我们的站点,保证缓存被最有效的利用,达到最佳的性能。

同一个资源保证URL的稳定性

URL是浏览器缓存机制的基础,所以如果一个资源需要在多个地方被引用,尽量保证URL是固定的。同时,比较推荐使用公共类库,比如Google Ajax Library等,有利于最大限度使用缓存

给Css、js、图片等资源增加HTTP缓存头,并强制入口Html不被缓存

对于不经常修改的静态资源,比如Css,js,图片等,可以设置一个较长的过期的时间,或者至少加上Last-Modified/Etag,而对于html页面这种入口文件,不建议设置缓存。这样既能保证在静态资源不变了情况下,可以不重发请求或直接通过304避免重复下载,又能保证在资源有更新的,只要通过给资源增加时间戳或者更换路径,就能让用户访问最新的资源