Putaoshu's blog

下午终于把win7的任务栏放置在桌面左侧了,这样加大了主屏幕的范围…

原来一直在最底部放着,曾经的曾经把任务栏放在左面过一段时间,但是感觉不习惯…

试用了一下午感觉非常爽啊,看来有些习惯还是得改,不改谈何提高呢?但改变之初应该非常痛苦,曾经已成习惯,熟悉新的习惯,痛苦,的确痛苦,痛苦过后就好了,更美好….

BUG描述：

页面中块级元素用了position:relative,bottom=-1px等元素定位,会表现出postion:absolute的行为.


解决方法：

方法1. 为此元素最外层父亲元素添加属性position:relative, 注意是最外层.
方法2. 把此元素的position:relative变成默认的static定位,并通过margin-top等属性实现.

ps:IE6虽然很老了,但我们的产品还是有那么多用户在使用IE6,用户的选择并没有错,尊重用户,所以level1级别的bug对IE6是必须解决的,但页面效果类是渐进增强的,只给IE6最基本的视觉效果,所以还是那句话:要想体验更弦更酷的效果,请更新你的浏览器至IE8,IE9,FF,Chrome…

请点Demo


1.新浪微博API
1.1.相关介绍
官方首页http://open.t.sina.com.cn/
微博开放平台是一个基于新浪微博客系统的开放的信息订阅、分享与交流平台。微博开放平台为您提供了海量的微博信息、粉丝关系、以及随时随地发生的信息裂变式传播渠道。
1.2.申请App Key
成功注册可为开发者，后台即有App Key
1.3.API接口文档
网址:http://open.t.sina.com.cn/wiki/index.php/Statuses/public_timeline
statuses/public_timeline
返回最新的20条公共微博。返回结果非完全实时，最长会缓存60秒
1.4核心程序
$.ajax({
    type: “get”,
    url: “http://api.t.sina.com.cn/statuses/public_timeline.json?source=1039614589“,
    dataType:”jsonp”,
    beforeSend: function(XMLHttpRequest){},
    success: function(data, textStatus){
        var i = 0;
        $.each(data,function(i) {
            var timeDefault = data[i].created_at,time,timeDiff,date = new Date(),hours,minutes,seconds;
            var weiboUrl= “http://t.sina.com.cn/“,url;
            time = timeDefault.slice(11,20) ;//完整时间23:11:10
            hours = -timeDefault.slice(11,13) + date.getHours();
            minutes = -timeDefault.slice(14,16) + date.getMinutes();
            seconds = -timeDefault.slice(17,19) + date.getSeconds();
            var hoursDiff =  hours + “Hour” ;
            if (hours<1) hoursDiff= “”;
            if(minutes>0) timeDiff = hoursDiff+ minutes+ ” Minutes Ago”;
            
            url = (!data[i].user.domain.toString()) ? (weiboUrl + data[i].user.id.toString()) : (weiboUrl + data[i].user.domain.toString());        
            weiboLocale[i] = data[i].user.location;

            weiboHtml[i] = “<div class=’weiboList’>”+
            ”<p class=’weiboImg’>”+  ”<a href=’”+ url + “‘”+ “target=’_blank’>” +”<img src=”+data[i].user.profile_image_url +”>”+ “</a>” +”</p>”+
            ”<div class=’weiboTxt’>”+
            ”<p>”+ “<a href=’”+ url + “‘”+ “target=’_blank’>” +data[i].user.name.toString()+ “</a>” + “:” + data[i].text +”</p>”
            +”<p class=’ft’>”+ timeDiff +” ”+ data[i].source + “ ”+ data[i].user.location.toString() +”</p>”
            + “</div>”
            + “</div>”;
        });    
    },
    complete: function(XMLHttpRequest, textStatus){
        var k= 0;
        beginplaceSet = setInterval(function(){
            var local = weiboLocale[k];
            var html = weiboHtml[k];
            placeSet(local,html);
            k++;
            if (k>weiboLocale.length-1) k=0;
        },dalay);
    },
    error: function(){alert(“error”);}
});

2.Google Maps API
2.1相关介绍
Google 地图 API 是一种通过 JavaScript 将 Google 地图嵌入到您的网页的 API。
2.2Google Maps API 密钥申请
http://code.google.com/intl/zh-CN/apis/maps/signup.html
2.3相关程序
2.3.1初始化一下GMap

var map = new GMap2(document.getElementById(“Gmap”));       
function initMap(){    
    map.setCenter(new GLatLng(39.9, 116.3), zoom);//初始化,于北京
    map.enableScrollWheelZoom();
    map.addControl(new GLargeMapControl());
    map.addControl(new GOverviewMapControl());//加载小地图
    map.addControl(new GScaleControl());    //加载比例尺
}
2.3.2根据地点在map上标注出具体位置,并且把微博的内容在小窗口显示.

var localContent = local;
var htmlContent = html;
var geocoder = new GClientGeocoder();
var response;
geocoder.getLocations(localContent, function(response) {
     if (!response || response.Status.code != 200) {
        return false;
    }else{
        place = response.Placemark[0];
        point = new GLatLng(place.Point.coordinates[1],place.Point.coordinates[0]);    //坐标
        map.setCenter(point, zoom);
        marker = new GMarker(point);//标记地图上的位置
        //map.clearOverlays();//清除所有叠加层
        map.addOverlay(marker);//增加新叠加层
        map.removeOverlay(marker);//清除所有标记
        marker.bindInfoWindowHtml(htmlContent,{maxWdith:100,noCloseOnClick:true});
        marker.openInfoWindowHtml(htmlContent,{maxWdith:100,noCloseOnClick:true});
    }
});

参考
1.Google 地图 API 参考
2.Google Maps API 2 文档
3.Google Map API 应用实例说明
4.新浪微博API文档

2010年过的好快,静悄悄的就过去了!
回首下2010年的流水账(微博很给力,记不住的看看就晓得了)

交流会>>
WEB标准化交流会从5月份到现在,8期了(163,taobao,360,QQ,sina,dangdang,sohu…坚持下去)
W3C CEO演讲会(北航)
webrebuild 第四届年会(北航)
WEB标准化交流会一周年酒会(酷六)
新浪微博开发者大会(国家会议中心)

工作>>
面试新同事(虽然毕业时间不长)
参加交流会,认识N多同行,非常感谢交流会的组织者

图书>>
买的技术书:编写高质量代码_Web前端开发修炼之道、点石成金、应需而变—设计的力量、用户体验要素、jQuery基础教程(这些书要花很长时间理解的)
买的杂书:杜拉拉升职记1,2、做有钱的自己-理财的、如何掌控自己的时间和生活、野火集-龙应台、仙人指路－徐小平、挪威的森林(少男少女看的,被骗了)
借阅的:论语、菜根潭、酥油、苏菲的世界、巴黎没有摩天轮、背包十年、1988：我想和这个世界谈谈、青春-韩寒[盗版的,韩寒BLOG合集]、李鸿章(其实这些读的很快)

杂记>>
十一参加发小婚礼(春节还有四个朋友结婚呐,还有华哥)
在微博上给自己打的标签: 财经,跑步,宅男,80后,天秤男,UE,UI,Javascript,前端  
…

展望下2011,写点希望:
1.加大js的开发力度,提高编程水平
2.深化学习html5和css3

Ubuntu10.0下编译qt版webkit

1.设定依赖库和头文件(root下)
apt-get build-dep firefox
apt-get install mercurial libasound2-dev libcurl4-openssl-dev libnotify-dev libxt-dev libiw-dev mesa-common-dev autoconf2.13 yasm
这个很费时间,我大概用了一下午的时间才安排完毕
参考文档:https://developer.mozilla.org/En/Developer_Guide/Build_Instructions/Linux_Prerequisites

2.下载webkit源码
svn checkout http://svn.webkit.org/repository/webkit/trunk WebKit
如果没有svn的用sudo apt-get subversion安装svn

3.编译webkit
./WebKit/WebKitTools/Scripts/build-webkit –qt
编译成功之后，有如下信息：
===========================================================
WebKit is now built (1h:20m:37s).
To run QtTestBrowser with this newly-built code, use the
“WebKit/WebKitTools/Scripts/run-launcher” script.
===========================================================

4.然后运行测试webkit
WebKit/WebKitTools/Scripts/run-launcher –qt
这样就显示一个界面简单的浏览器了,输入google测试下,如图


5.接下来,研究源代码!

目标:书写三个并排的li

最终的Demo在此

HTML:
<ul>
    <li>li1</li>
    <li>li2</li>
    <li>li3</li>
    <li>li4</li>
    <li>li5</li>
    <li>li6</li>
</ul>

1.常见写法
CSS:
ul{width:130px;}
ul li{float:left;width:30px;margin-right:10px;}
ul和li需要分别固定大小,仅一次使用,不能抽象出来.

2.oocss grids
HTML
<ul class="line">
        <li class="unit size1of3">li1</li>
        <li class="unit size1of3">li2</li>
        <li class="unit size1of3">li3 no lastUnit</li>
    </ul>
CSS
.line:after,.lastUnit:after{clear:both;display:block;visibility:hidden;overflow:hidden;height:0 !important;line-height:0;font-size:xx-large;content:"";} /*clearfix*/
.line{*zoom:1;}
.unit{float:left;}
.size1of3{width:33.33333%;}
.lastUnit{
display:table-cell;float:none;width:auto;
*display:block;*zoom:1;
_position:relative;_left:-3px;_margin-right:-3px;/*for ie6*/
}
注:1).支持流动布局
2).支持固定布局,宽度可随意定义
3).lastUnit是针对ie6,ie7的超级必杀技

3.yui3 grids
HTML
<ul class="yui3-g">
        <li class="yui3-u-1-3">li1</li>
        <li class="yui3-u-1-3">li2</li>
        <li class="yui3-u-1-3">li3</li>
    </ul>
CSS
.yui3-g {
    letter-spacing: -0.31em; /* webkit: collapse white-space between units */
    *letter-spacing: normal; /* reset IE < 8 */
    word-spacing: -0.43em; /* IE < 8 && gecko: collapse white-space between units */
}
.yui3-u-1-3
{
    display:inline-block;
    zoom: 1; *display: inline; /* IE < 8: fake inline-block */
    letter-spacing:normal;word-spacing:normal;vertical-align:top;
}
注:1).width为100%时ie6,ie7下不支持

题外话:
oocss和yui3是一直在研究的css frame,oocss和yui3关于css grids的写法很给力,也可见css的博大精深,非我辈之能及,继续追随中.

1.一般常用的流动布局是
左侧部分position:absolute;top:0px;left:0px;width:150px;
主体的内容部分margin:0 200px 0 150px;
右侧部分position:absolute;top:0px;right:0px;width:200px
Demo:3_col_layout

2.display:table-cell应用于流动布局
左侧部分float:left;width:100px;
主体的内容部分display:table-cell;
右侧部分float:right;width:100px;
Demo:3_col_layout_oocss

注:在display:table-cell在w3c上相关解释:

• display:table-cell (In HTML: TD, TH) Specifies that an element represents a table cell. (from–>http://www.w3.org/TR/CSS2/tables.html#value-def-table-cell)
  
• For example, an image that is set to ‘display: table-cell’ will fill the available cell space, and its dimensions might contribute towards the table sizing algorithms, as with an ordinary cell. (from–>http://www.w3.org/TR/CSS2/tables.html)