去年(2011年)还在波特集团深圳总部上班的时候，负责研究过公司集成管理信息系统(IMIS)的交互和用户体验，今天决定写下来，平时忙于工作，很少抽时间写这些东西，从现在开始，抽时间好好整理一下，当是总结吧！IMIS管理系统有点类似腾讯的WebQQ，这里是一个简单的原型：http://blog.luozhihua.com/imis/desktop/login.html，有兴趣的朋友可以看看。

原来的IMIS系统开发完成于早些时候，已经使用过几年，浏览器兼容性及用户体验比较差，那时候我还没有加入波特，进入波特的时候还有些让人回味的，承蒙波特集团当时的技术总监蒋士军蒋总错爱，没经过复试直接让我第二天就过去上班了，记得蒋总当时是这么说的：“是骡子是马，拉过来溜溜就知道你是不是牛了！”说来挺幸运的，因此后来才让我有机会从事此项研究。 Read More...

HTML5发展如火如荼，随着各大浏览器对HTML5技术支持的不断完善以及HTML5技术的不断成熟，未来HTML5必将改变我们创建Web应用程序的方式。今天这篇文章向大家推荐10款优秀的HTML5开发工具，帮助你更高效的编写HTML5应用。 Read More...

支持浏览器**: IE9+,Chrome11+,Firefox7+.**

宿主对象window.performance.
参考资料:http://msdn.microsoft.com/zh-cn/office/ff975118
参考w3c的标准草案:http://w3c-test.org/webperf/specs/NavigationTiming/

目前，IE9+和 chrome11+，Firefox7+已经实现了该草案定义的接口。

成员**:

.navigation** (一个叫做performanceNavigation的对象.)
.timing (这玩意是一个被称作performanceTiming的包含了很多成员的对象)

 方法**:

.toJSON **返回一个 对象，并抄写performance的可枚举成员到其中. 是的,timing,navigation都在上面.

JSON.stringify(performance.toJSON()) == JSON.stringify(performance)//true. 悲剧啊.明明是继承来的，msdn非要特殊标一下..

PS:
1. performance，仅能对当前的html文档做检测，所有的对象都和当前文档有关.   如果我们想检测某个图片资源的网络状况,则不行.   比如我们想监控，用户访问我们服务的状况，就只能创建一个iframe, url为我们服务某个地址(除非用户访问的当前页，就是我们要监控的对象.). 然后才可以监控这次一次请求的网络状态等等.   所以建议如果可以考虑使用performance,做监控，则需要有 抽样、时间点等监控机制. 否则给服务器带来额外压力，得不偿失. 如果要监控其他资源，需要使用 ResourceTiming. 这套api. 这个会在其他帖子里单独说一说. Read More...

IE系支持HTML5标签 _2012-06-29_：

1
2
3
4
5
6
7
8
9
10

<!--[if IE]-->
<script>
(function(){
if(!/*@cc_on!@*/0)return;
var e = "abbr,article,aside,audio,canvas,datalist,details,dialog,eventsource,figure,footer,header,hgroup,mark,menu,meter,nav,output,progress,time,video,section".split(','),
i = e.length;
while(--i){ document.createElement(e[i]);}
})()
</script>
<!--[endif]-->

行星与恒星是场相约
那时只见熔岩倾注
火光划过漫天星际
眼前一片薄白
我站在天崩地裂之间
任由灰烬纷飞
刹那间天地寂静
听不见一丝声响
失去重力的尘土和磐石
腾空而起飞速飘离

天地荒老那一刻
我才知道红尘未了
岁月难忘
那无尽的苍穹与星云之间
是繁华散尽的墓地
埋葬着至死不渝的欲望
所有的绚丽斑斓
是变幻莫测的理想
在白天和黑夜之间
如陨石般燃尽
消蚀于黑洞之中

鼠标滚动 _2012-12-22_：

function handleMouseWheel (e) {
    if (!e) e = window.event;
        if (e.wheelDelta <= 0 || e.detail > 0) {document.getElementById('t').innerHTML='滚轮向下滚?'}
        else {document.getElementById('t').innerHTML='滚轮向上滚?'}
    }
    if(document.attachEvent||/(?:ie|webkit)/i.test(navigator.appVersion)){
        document.onmousewheel = handleMouseWheel;
    }else{
        window.addEventListener("DOMMouseScroll", handleMouseWheel, false);
    }

IE系支持HTML5标签 _2012-06-29_：

<!–[if IE]>
<script>
(function(){
if(!/@cc_on!@/0)return;
var e = “abbr,article,aside,audio,canvas,datalist,details,dialog,eventsource,figure,footer,header,hgroup,mark,menu,meter,nav,output,progress,time,video,section”.split(‘,’),
i = e.length;
while(–i){ document.createElement(e[i]);}
})()
</script>
<![endif]–>

CSS3.0 3D效果 - 2012/3/20

.parentNode{
-moz-perspective: 1000px; /* 透视距离*/
-moz-transform-style: preserve-3d; /* 3D渲染模式 */
}

.child{
-moz-transform:translateX(350px) translateZ(-200px) rotateY(-45deg);
-moz-transform: translateX(-350px) translateZ(-200px) rotateY(45deg);
}

禁止移动浏览器缩放Web页面 - 2012/3/20

在移动浏览器中以原始大小显示Web页面，并不允许缩放。
<meta name=”viewport” content=”width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no”/>

其中：
width - viewport的宽度
height - viewport的高度
initial-scale - 初始的缩放比例
minimum-scale - 允许用户缩放到的最小比例
maximum-scale - 允许用户缩放到的最大比例
user-scalable - 用户是否可以手动缩放

Javascript 模拟事件 - 2012/3/21

jQuery 在IE下的“_参数无效_”BUG 2012/3/24

今天发现在<td/><th/>等标签上使用** attr**(“width“, 120)； 或** attr**(“height“, 32);时会出现该问题，其他标签或者其他属性都正常（暂时没发现异常），其他类似问题：

1. $(“#id”).css(“backgroundImage”, “bg.jpg”); // 错误
   $(“#id”).css(“backgroundImage”, “url(bg.jpg)”); // 正确
2. 有人反应使用$(#id).html(html);时也有该错误，尽量把html简化，不要太多嵌套。

iPad上没有鼠标，所以手指在触发触摸事件（TouchEvent）的时候，系统也会产生出模拟的鼠标事件（MouseEvent）。

这对于普通网页的浏览需求而言，基本可以做到与PC端浏览器无明显差异。但是如果你正在做一款与用户有着强交互的WebAPP程序，比如一个html5小游戏或者图片处理工具什么的，那么依赖默认模拟恐怕不能满足产品的需求。

一个通常的建议是：在iPad上(或者说各个移动终端上)，你的WebAPP应该能处理好TouchEvent，而不再依赖于MouseEvent。

然而如果你的WebAPP需要同时面向PC和iPad两种平台的浏览器用户，而迫于时间或者人力配备你没法分别提供两种版本的时候。。。你也许有必要了解一下下面这些有关iPad上MouseEvent相关的细节，然后砍掉两个平台上有明显差异的一些花哨特性，这样才能做出一个较好地兼容两个平台的WebAPP。 Read More...

更新了对手指触摸滑动事件的代码，做webApp的朋友可以用到

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

$(document).ready(function() {
    var startX,
        startY,
        endX,
        endY,
        scrollTopVal=0, //左右滑动请自行修改
        touchBox = $("#touchBox");

    /**
     + touch start event handle
     + @param  {Event} event touch start event
     */
    function touchStart(event){
        var touch = event.touches[0];
        startY = touch.pageY;
    }

    /**
     + touch move event handle
     + @param  {Event} event touch move event
     */
    function touchMove(event) {
        var touch = event.touches[0];
        endY = (startY-touch.pageY);

        if (scrollTopVal==0) {
            touchBox.scrollTop((endY+100));
        } else {
            touchBox.scrollTop(scrollTopVal+endY+100);
        }

    }

    /**
     + touch end event handle
     + @param  {Event} event touch end event
     */
    function touchEnd(event) {
        scrollTopVal=$("#touchBox").scrollTop();
    }

    // bind events
    touchBox.bind({
        "touchstart" : touchStart,
        "touchmove"  : touchMove,
        "touchend"   : touchEnd
    });

});