wordpress.com 博客后台无法登陆问题

發表於 2011-06-20 | 分類於 Uncategorized

困扰我一个多月，今天刚找到办法，原来只要在wordpress.com首页上的登录栏里，就可以登录了。不需要从自己的BLOG里登录

HTML5 CSS Reset

發表於 2011-06-20 | 分類於计算机与 Internet

http://html5reset.org/

Install 7zip at CentOS

發表於 2011-05-05 | 分類於计算机与 Internet

1.yum

yum –y install p7zip

2.gcc-c++

wget http://nchc.dl.sourceforge.net/sourceforge/p7zip/p7zip_4.65_src_all.tar.bz2
tar -xjvf p7zip_4.65_src_all.tar.bz2
cd p7zip_4.65
make
make install

搭建Node + socket 环境

發表於 2011-04-26 | 分類於计算机与 Internet

1、NPM (http://npmjs.org/)

curl http://npmjs.org/install.sh | sh

2、Node WebSocket Server

https://github.com/miksago/node-websocket-server

npm install websocket-server

在centOs上安装Node.js

發表於 2011-04-26 | 分類於计算机与 Internet ， HTML5

0，基本环境

yum install gcc-c++ openssl-devel

1，获取最新版本
https://github.com/joyent/node

2，解压
tar -xzvf node.0.4.XX.tar.gz

3，进入解压目录

./configure
make
make install

4，也！成功

iOS mobile 网站特殊的Meta 标签

發表於 2011-04-24 | 分類於计算机与 Internet ， HTML5 ， Uncategorized

http://developer.apple.com/library/safari/#documentation/appleapplications/reference/SafariHTMLRef/Articles/MetaTags.html

Apple-specific meta tags are described here.

apple-mobile-web-app-status-bar-style

Sets the style of the status bar for a web application.

Syntax

<meta name=”apple-mobile-web-app-status-bar-style” content=”black”>

Discussion

This meta tag has no effect unless you first specify full-screen mode as described in “url.”If content is set to default, the status bar appears normal. If set to black, the status bar has a black background. If set to black-translucent, the status bar is black and translucent. If set to default or black, the web content is displayed below the status bar. If set to black-translucent, the web content is displayed on the entire screen, partially obscured by the status bar. The default value is default.

Availability

Available in iOS 2.1 and later.

Support Level

Apple extension.

拥抱HTML5 上海2011年大会见闻

發表於 2011-04-20 | 分類於 Uncategorized

这次是4月16和17日两天都有议题的研讨会。由于女儿报名幼儿园和自己正在学车，所以第一天的内容错过了。17号参加了上午的内容。

HTML5设计理念的发言之后，有个360浏览器的同学问现在HTML5的代码写法这么不严格，会不会导致很多的网站越写越烂那么浏览器就会很累。

其实我老想说的，现在中国的状况是各大山寨浏览器横行，你们在IE或者webkit内核上做的莫名修改让前端同学们已经很郁闷了。

我真心希望国内能有类似WHATWG的组织，可以请你们讲讲我们网站要怎么配合你们。

现在当市场部或者客服说，哎呀用户用360 或者遨游上我们网站有问题啊。

目前完全没有办法重现问题，根本没办法整啊，谁知道你们用的是啥核心，每一次升级又改了什么？

Javascript Accelerometer !

發表於 2011-04-15 | 分類於 Uncategorized

link:http://www.albertosarullo.com/blog/javascript-accelerometer-demo-source

COOL!

Drag image gallery in iOS whit jQuery

發表於 2011-04-13 | 分類於计算机与 Internet ， HTML5 ， jQuery

key point:

e.preventDefault();
var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];

Demo

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />

<title>moblie test</title>

<script src="[http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js](http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js)" type="text/javascript" ></script>

<style>
html, body { margin: 0;   padding: 0;}
.droginfo { width:100%; height:40px; background:#ffc;line-height:18px}
.droginfo div {width:100px; float:left;}
.drogbox {background: #333377;    clear: left;    min-height: 240px;    min-width: 320px; max-width:480px;    position: relative;  overflow:hidden;  }
#moveBox {width:3200px; height:200px; position:absolute; left:0; top:20px; background:  #ddd; padding: 0;}
#moveBox .photo { width:150px; height:180px;  padding: 10px 5px; float:left;  }
</style>

</head>
<body>

<div class="drogbox">
    <div id="moveBox">
      <img class="photo" src="[http://www.glamour-sales.com.cn/media/catalog/product/yv/s/YR0-518-00007.jpg](http://www.glamour-sales.com.cn/media/catalog/product/yv/s/YR0-518-00007.jpg)" />
      <img class="photo" src="[http://www.glamour-sales.com.cn/media/catalog/product/yv/s/YR0-518-00006.jpg](http://www.glamour-sales.com.cn/media/catalog/product/yv/s/YR0-518-00006.jpg)" />
      <img class="photo" src="[http://www.glamour-sales.com.cn/media/catalog/product/yv/s/YR0-518-00005.jpg](http://www.glamour-sales.com.cn/media/catalog/product/yv/s/YR0-518-00005.jpg)" />
      <img class="photo" src="[http://www.glamour-sales.com.cn/media/catalog/product/yv/s/YR0-518-00004.jpg](http://www.glamour-sales.com.cn/media/catalog/product/yv/s/YR0-518-00004.jpg)" />
      <img class="photo" src="[http://www.glamour-sales.com.cn/media/catalog/product/yv/s/YR0-518-00003.jpg](http://www.glamour-sales.com.cn/media/catalog/product/yv/s/YR0-518-00003.jpg)" />
      <img class="photo" src="[http://www.glamour-sales.com.cn/media/catalog/product/yv/s/YR0-518-00002.jpg](http://www.glamour-sales.com.cn/media/catalog/product/yv/s/YR0-518-00002.jpg)" />
      <img class="photo" src="[http://www.glamour-sales.com.cn/media/catalog/product/yv/s/YR0-518-00001.jpg](http://www.glamour-sales.com.cn/media/catalog/product/yv/s/YR0-518-00001.jpg)" />
    </div>
</div>

<div class="droginfo">
  <div>pageX:<span  id="movex" ></span></div>
  <div>pageY:<span  id="movey" ></span></div>
  <div>changeX:<span  id="changex" ></span></div>
  <div>autofix:<span  id="moveend" ></span></div>
</div>
<script type="text/javascript">

var changeXOld = 0;
var changeXNew = 0;
var firstTouchX = 0;
var moveThing =  jQuery('#moveBox');
var moveList = jQuery('#moveBox img').length;

jQuery('#moveBox').width( moveList  * 160);

jQuery('.drogbox').bind('touchstart',function(e){

      var moveBoxoffset = moveThing.offset();
      e.preventDefault();
      var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];

      changeXOld = moveBoxoffset .left;
      firstTouchX = touch.pageX;

}).bind('touchmove',function(e){

      e.preventDefault();
      var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
      var elm = jQuery(this).offset();
      var x = touch.pageX - elm.left;
      var y = touch.pageY - elm.top;
      if(x < jQuery(this).width() && x > 0){
           if(y < jQuery(this).height() && y > 0){
                  //CODE GOES HERE
                  //console.log(touch.pageY+' '+touch.pageX);
                      jQuery('#movex').text(touch.pageX);
                      jQuery('#movey').text(touch.pageY);
                      jQuery('#changex').text(changeXOld + "," + changeXNew );
                      jQuery('#moveend').text('');
           }
      }

      var newXpoint = (changeXOld - ( firstTouchX  - touch.pageX)) + 'px';
      jQuery('#moveBox').css("left",newXpoint);

}).bind('touchend',function(e){
      e.preventDefault();
      var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
      var moveBoxoffset = moveThing.offset();
      var maxLeft = moveThing.width();

      changeXNew = moveBoxoffset .left;

      jQuery('#changex').text(changeXOld + "," + changeXNew);

      var jumpX = jQuery('.drogbox').width();
      var drogChange = changeXNew - changeXOld ;

      if ( drogChange  > 10  )  {
         var newXpoint = ( (parseInt(moveBoxoffset.left / jumpX )) * jumpX )  + 'px';
         jQuery('#moveBox').animate({left: newXpoint }, 180);
         jQuery('#moveend').text('>10 +++');
      }
     if ( drogChange  < -10  )  {
         var newXpoint = ( (parseInt(moveBoxoffset.left / jumpX )) * jumpX - jumpX) ;
        if ( (newXpoint* -1) >= (maxLeft - jumpX) ){
             newXpoint = (maxLeft * -1) + jumpX + 'px';
         }else {     newXpoint = newXpoint  + 'px';     }

         jQuery('#moveBox').animate({left:newXpoint }, 180);
         jQuery('#moveend').text('<-10 ---');
      }
     if ( drogChange  >= -10 && drogChange  <= 10  ){
        var newXpoint = changeXOld + 'px';
        jQuery('#moveBox').animate({left:newXpoint }, 50);
     }
});

</script>
</body>
</html>

IE10 ? Oh no!

發表於 2011-04-13 | 分類於计算机与 Internet ， HTML5

Right on the heels of IE 9’s release, there is already a platform preview for IE 10 (video).

Awesome: Flexbox, Grid, Multi-column, Gradients, (and soon), Transitions and 3D Transforms

Not awesome: No text shadow, No HTML5 Forms support

http://msdn.microsoft.com/en-us/ie/gg192966#_ECMAScript5