Play Google玩转谷歌

CSS3中Media Queries

karry — Wed, 01 Dec 2010 23:13:40 +0800

在做一个移动版WEB时，遇到一个问题。由于手机屏幕宽度限制，我希望给图片设置一个max-width,如：

.content img { max-width:320px;
}

但我又希望在ipad一类大屏幕移动设备上让图片尽可能的大，常规思路是使用javascript判断当前设备的分辨率，然后分别做处理。
一番查询之后发现，CSS3 的Media Queries 能轻易解决这个问题。在 CSS2 中，我们常看到这样的代码：

type=”text/css” href=”core.css” media=”screen” /> media=”print” />

很清楚的是
core.css将针对屏幕时使用，而print.css针对打印时使用。在 CSS3 中，提供了更多丰富的媒体查询方式。如：

type=”text/css” media=”screen and (max-device-width: 480px)”
href=”shetland.css” />

它包含两层意思，首先，是在屏幕上使用，并且（and），该设备的分辨率宽度不超过480px。你也可以在css中针对某一部分样式使用：

/*为宽度大于760像素的设备使用：*/ @media screen and
(min-device-width: 760px){ .content img { max-width:760px; }
}

更多Media Queries 相关内容，到W3C上去看： href=”http://www.w3.org/TR/2010/CR-css3-mediaqueries-20100727/#media0″>http://www.w3.org/TR/2010/CR-css3-mediaqueries-20100727/#media0

整理：在 IE6 和IE7 中a标签中的内联元素触发IE 的 haslayout属性后，链接无效的BUG

karry — Fri, 26 Nov 2010 10:14:22 +0800

昨天在工作中遇到一个诡异的现象，老版本IE( IE6 和IE7) 导航栏a标签无法正常使用，但onclick事件能正常执行。

经反复测试发现：

a标签内嵌套一层或多层内联元素（如span label em 等）, 最终的内联元素包含一个img元素, 这时, 如果触发了a元素和img元素之间的任何一个元素的hasLayout, 那么超链接将失效.

</a>

span {

display: inline-block;

}

有三种解决办法：

不要在a标签内嵌套任何内联元素，使用其他方式实现。
不要触发内联元素的haslayout属性。
对img 设置相对定位，并把z-index设置为负值。

注：内联元素触发haslayout 的条件：

http://www.moonless.net/demo/9/

2010年11月 – Web标准化交流会

karry — Sun, 21 Nov 2010 21:05:31 +0800

我们公司为本月的Web 标准化交流会上海站提供场地支持，欢迎大家的到来。
WEB标准化交流会官网：http://www.w3ctech.com/
报名地址：http://www.w3ctech.com/joinus/

地址：上海市杨浦区淞沪路290号创智天地广场十号楼6楼

可以乘坐地铁10号线 江湾体育馆站 下车后，沿淞沪路往政立路方向步行5分钟即到。10号楼为挂着 “ORACLE（甲骨文）” LOGO 的那栋。
====================================================================

这次交流会举办的比我预期的要好。在欲波一段轻松的行业动态和八卦之后，进入了正题。

主要由winter为大家讲解浏览器解析一个网页的流程，从浏览器工程师的角度给前端工程师们深入剖析了从用户输入URL到页面呈现浏览器所做的所有事情。信息密集，条理清楚，特别是对DOM树渲染方面令我印象深刻。以前一直认为浏览器会先构建dom树，然后再根据css逐个查找匹配的DOM渲染样式，而事实恰好相反，浏览器先对CSS样式进行索引，渲染DOM树时根据索引过的CSS来渲染DOM。这也是为什么性能优化上建议把 CSS前置的一个原因。希望以后有更多这样深入的交流。

javascript拖拽功能–基于jQuery

karry — Sat, 18 Sep 2010 08:57:03 +0800

最近一直在忙iphone的项目，好久没有写js了。周末练练手。

if(typeof Fminutes ==="undefined"){
Fminutes = {};
}

    /*
    * 拖拽实现
    * */
    var dragOption = {
        $element:null, //可触发拖拽的区域，jQuery对象
        $target:null,//被拖动的控件，jQuery对象
        move:$.noop, //移动过程中的回调
        up:$.noop//拖拽结束之后的回调
    };
    Fminutes.Drag = function(option){
        this.option = $.extend(true,{},dragOption,option);
        this._status = 0;          //私有属性，当前状态，0为停止状态，1为鼠标按下状态，2为鼠标拖动状态
        this._mouseDownPosition = {x:0,y:0};
        this._beginDownPosition = {x:0,y:0};
        this.init();
    };
    Fminutes.Drag.prototype = {
        init:function(){
            this.bindEvents();
        },
        bindEvents:function(){
            var that = this;
            $(that.option.$element).bind("mousedown",function(e){
                that._beginDownPosition = that._getMousePosition(e);
                that._mouseDownPosition = that._beginDownPosition;
                $(document).bind("mousemove",_move);
                $(document).bind("mouseup",_up);
                that._status = 1;

            });
            //移动事件绑定
            function _move(e) {
                    if (that._status == 0) {
                        return;
                    }
                    that._status = 2;
                    var mousePosition = that._getMousePosition(e);
                    var target = that.option.$target;
                    var position = {};
                    position.left = target.offset().left + (mousePosition.x - that._mouseDownPosition.x);
                    position.top = target.offset().top + (mousePosition.y - that._mouseDownPosition.y);
                    that._mouseDownPosition = mousePosition;
                    target.css({"left":position.left + "px","top":position.top + "px"});
                    //回调
                    that.option.move.call(that,e,position);
                }
            //鼠标放开事件绑定
            function _up()
            {
                if (that._status != 2) {
                    that._status = 0;
                    return
                }
                $(document).unbind("mousemove", _move);
                $(document).unbind("mouseup",_up);
                that._status = 0;
                //回调
                that.option.up.call(that);
            }
        },
        //计算鼠标当前所在位置
        _getMousePosition:function(e) {
            if (e.pageX || e.pageY) {
                return{x:e.pageX , y:e.pageY };
            }
            return {
                x:e.clientX + document.body.scrollLeft - document.body.clientLeft,
                y:e.clientY + document.body.scrollTop - document.body.clientTop
            };
        }
    };

使用方式：

         new Fminutes.Drag({
               $element:that.$title,
               $target:that.$dialog
        });

Objective-C学习笔记

karry — Wed, 21 Jul 2010 13:37:48 +0800

objective-c 是C语言的超集，本质和C语言一样，但语法风格迥异。这篇文章主要是介绍objctive-c的语法规则。
定义一个方法：

头文件中：
-(void) test: (NSString *) firstName : (NSString *) lastName;

其中 test 是方法名，firstName和lastName是两个参数，NSString声明参数的类型为字符串类型。最前面的“－”说明该方法为普通方法（即需要实例化这个类之后才可调用）。若为“＋”则声明为静态方法，即为用类名直接可调用。

方法的实现：

- (void)test : (NSString *) firstName : (NSString *) lastName {

NSLog(@”your first Name is:%@,your last Name is %@”,firstName,lastName);

}

方法的调用：

[self test:(NSString *) @"karry" : (NSString *) @"zhang"];

调用方法用［］，在objective-c里面意为发送一个消息（message）.传入参数时需要写清楚参数的类型。

定义一个类Rectangle

头文件：Rectangle.h


#import <Foundation/Foundation.h>
@interface Rectangle : NSObject {
NSString *name;
NSString *color;
int size;
}
//构造函数，返回值是id类型，名称可自定义
-(id) init : (NSString	*) names : (NSString *) colors: (int) sizes;
-(void) setName:(NSString *) names;
-(void) setColor:(NSString *) colors;
-(void) setSize:(int) sizes;
-(void) getArea;
@end

第一句“@interface Rectangle : NSObject ”声明Rectangle 类继承自NSObject类。在Objective-C中，继承用“:”，并且不能多继承。
用init 方法作为构造函数应该是约定俗成的习惯。理论上可以是任意名称。

实现 Rectangle.m


#import "Rectangle.h"
@implementation Rectangle
//构造函数的实现
- (id)init:(NSString *)names : (NSString *)colors : (int)sizes {
	if(self = [super init]){
		name = names;
		color = colors;
		size = sizes;
	}
	return self;
}
-(void) setName:(NSString *) names {
name = names;
}
-(void) setColor:(NSString *) colors{
color = colors;
}
-(void) setSize:(int) sizes{
size= sizes;
}
-(void) getArea{
NSLog(@"%@的颜色是%@,面积是%d",name,color,size);
}
@end

注意init方法中的这一句：if(self = [super init]){，我并没有少写一个等号，这里就是把super 的init返回结果赋值给self.这样做是为了防止超类在初始化的过程中返回的对象不同于原先创建的对象。

使用这个类：
首先要引入头文件：


#import "Rectangle.h"
//实例化一个类，直接调init函数
Rectangle *rect =
[[Rectangle alloc] init : (NSString *) @"正方形" : (NSString *) @"红色" : (int) 50];
[rect getArea];//调用方法

javascript设定文本框中的指定文字为选中状态

karry — Sat, 05 Jun 2010 12:12:50 +0800

前段时间写了一个获取网页中鼠标选中的文字，这个是逆向操作，通过javascript设置文本框中的指定文字为选定状态。

var PG={
    isIE:!-[1,],  //判断浏览器是否为IE，为IE时返回true
    /*
    * 设置文本框中的文字为选中状态，包括开始索引，不包括结束索引
    * param domObj 文本框的dom对象，start为开始索引,不填则从0开始， end为结束索引，不填则选中到文本结束
    * 若domObj参数不填，则直接返回为false.
    */
    setSelectText:function(domObj,start,end){
        if(typeof domObj !=="object"){
            return false;
        }
        start = start ||0;
        end = end || domObj.value.length
        domObj.focus();
        if(this.isIE){
            var range = domObj.createTextRange();
            range.move("character",start);
            range.moveEnd("character",end-start);
            range.select();
        }else{
            domObj.setSelectionRange(start,end)
        }
    }
}

【测试页面】

Dict–我的chrome词典插件

karry — Sat, 22 May 2010 21:41:39 +0800

前段时间Kevin做了一个很不错的翻译工具–尚译，使用的是google language api，用起来感觉很方便。由于是油猴脚本（Grease Monkey），每次使用都要在导航栏点击一次。另外，这个脚本主要侧重于翻译，对于我自己并不是很适用，决定做一个适合自己使用的chrome词典小插件，关注单词的发音和用法，顺便也学习一下Google Chrome Extensions 的开发。

我将这个插件命名为”Dict”，基于google language api 、 dict.cn和有道词典，中文翻译为英文，单词和词组有音标和例句和发音，其他语言翻译成中文。现在工作中偶尔也要用到日文，所以也附带做了简单的日文翻译功能。

一开始就为了满足自己的需求而开发，所以这个插件不一定适合你，如果你恰好和我有相似的需求，也欢迎你使用。

用google chrome 浏览器打开： chrome词典小插件

点击安装之后你会在浏览器右上角看到一个红色的小图标。点击红色小图标：

输入你要查询的单词，回车：

鼠标放在黄色的喇叭按钮上，会有单词的读音。你也可以输入中文：

如果你觉得单词的解释和例句不够完整，可以点击右下角的”google dictionary” 在google提供的词典中查看更加完整的信息。

你也可以输入整句获得翻译，当然，句子是没有发音和音标的：

正在考虑是否加上屏幕取词的功能，可能下一个版本加上该功能，对这个插件有任何建议也欢迎和我交流。

获取网页中鼠标选中的文字

karry — Sun, 16 May 2010 21:24:20 +0800

最近在做一个chrome插件，需要用到捕获鼠标选中的文字，发现各浏览器兼容性解决起来挺麻烦，总结了一下，方便以后使用。

直接看代码：

 var PG={
            isIE:!-[1,],  //判断浏览器是否为IE，为IE时返回true
            getText:function(){
                 if(this.isIE){
                     return this._getText();
                }else{
                    var element = document.activeElement;
                    if (element && (element.tagName.toLowerCase() == 'input' || element.tagName.toLowerCase() == 'textarea')) {
                        return this._getTextInput()
                    } else {
                        return this._getText()
                    }
                }
            },
            _getText:function(){
                if (window.getSelection) {
                    return window.getSelection().toString();
                } else if (document.selection && document.selection.createRange) {
                    return document.selection.createRange().text;
                }
                return "";
            },
            //获取非IE浏览器中input框和textarea框中的文字
            _getTextInput:function(){
                var element = document.activeElement;
                if (element.selectionStart != undefined && element.selectionEnd != undefined) {
                    return element.value.substring(element.selectionStart, element.selectionEnd);
                }
                return "";
            }
        }

使用方法：

 document.onmouseup = function(){
            alert("您选中的文字是："+PG.getText());
        }

点击查看：[测试示例]

参考：
PPK ：Introduction to Range
getSelection method (window)
document.selection.createRange方法

WAP开发相关资源收集

karry — Tue, 11 May 2010 13:48:01 +0800

交互原则

Strive for consistency.力求一致
Enable frequent users to use shortcuts.允许频繁的使用快捷键
Offer informative feedback.提供明确的反馈
Design dialog to yield closure.设计对话，告诉用户任务已完成
Offer simple error handling.提供错误预防和简单的纠错能力
Permit easy reversal of actions.应该方便用户取消某个操作
Support internal locus of control.用户应掌握控制权
Reduce short-term memory load.减轻用户的记忆负担

尽量减少操作的步骤
尽量利用点击来代替输入
时刻让用户知道自己所处的位置
与web保持一致且数据同步
为输入法让出空间
摘要形式展现信息
导航和提示处于明显的位置
减少滚动

界面简洁的途径：

减少控件的数目，使程序的主功能显然易见，引导用户操作。
当内容过多时，要突出重要信息，便于用户快速浏览。
显示出错信息时，不要只告知用户程序出现错误，要提供有用的信息引导用户完成操作。
手机上网的速度慢，一般在6k/s，这就要求页面的内容尽量精简，避免过多的图片。
页面的内容控制在两屏以内，也不能空白。比如当用户支付电影票之后，不能只显示“支付成功”，可以引导用户使用其他功能。

操作方式

手机操作有物理按键和触摸等多种操作方式，当同样的程序要在多种操作方式下使用，需顾及手指点击时可点区域的大小。使用物理按键时，按钮可以只是两个字，选中控件即可操作，而iPhone的可点击区域最好不低于44×44像素。

分辨率种类（不完全统计）：

128*128 128*160 130*130 176*144 176*220 208*208 208*320 240*160 240*240 240*260
240*320 240*400 240*432 240*480 320*240 320*320 320*400 320*480 345*800 352*416
360*480 360*640 400*800 480*320 480*360
480*640 480*800 480*854 480*864 640*480 800*480

手机浏览器兼容性测试结果概要

注意：以下所说的“大多数”是指在我们测试过的机型中，发生此类状况的手机占比达50%及以上，“部分”为20%到50%；“少数”为20%及以下。而这个概率也仅仅只限于我们所测试过的机型，虽然我们采集的样本尽量覆盖各种特征的手机，但并不代表所有手机的情况。

XHTML部分

大多数手机不支持的：

表单元素的“disable”属性

部分手机不支持的：

“button”标签
“input[type=file]“标签
“iframe”标签。

虽然只有部分手机不支持这几个标签，但因为这些标签在页面中往往具有非常重要的功能，所以属于高危标签，要谨慎使用。

少数手机不支持的：

“select”标签：该标签如果被赋予比较复杂的CSS属性，可能会导致显示不正常，比如”vertical-align:middle”。

CSS部分

大部分手机不支持的：

“font-family”属性：因为手机基本上只安装了宋体这一种中文字体；
“font-family:bold;”：对中文字符无效，但一般对英文字符是有效的；
“font-style: italic;”：同上；
“font-size”属性：比如12px的中文和14px的中文看起来一样大，当字符大小为18px的时候你也许能看出来一些区别；
“white-space/word-wrap”属性：无法设置强制换行，所以当你网页有很多中文的时候，需要特别关注不要让过多连写的英文字符撑开页面；
“background-position”属性：但背景图片的其他属性设定是支持的；
“position”属性；
“overflow”属性；
“display”属性；
“min-height”和”min-weidth”属性；

部分手机不支持的：

“height”属性：对”height”的支持不太好，奇怪的是在我们的测试当中，仅仅只有很少部分手机不支持”width”属性；
“pading”属性
“margin”属性：更高比例的手机不支持”margin”的负值。

少数手机不支持的：

少数手机对CSS完全不支持；

JavaScript部分

这部分测试相对不那么让人抓狂，要么干脆不支持，如果支持的话，对基本的dom操作、事件等支持度都还不错。但我们没有测试过很复杂的脚本。

在我们测试过的手机当中，支持（包括不完全支持）JavaScript的手机比例大约在一半左右，当然，对于我们来说，最重要的不是这个比例，而是要如何做好JavaScript的优雅降级。

其他

部分手机不支持png8和png24，所以尽量使用jpg和gif的图片
另外对于平滑的渐变等精细的图片细节，部分手机的色彩支持度并不能达到要求，所以慎用有平滑渐变的bar设计
部分手机对于超大图片，既不进行缩放，也不显示横下滚动条
少数手机在打开超过20k的测试页面时，会显示内存不足

开发中你需要注意的问题

手机网页编码需要遵循什么规范？
遵循XHTML Mobile Profile规范（WAP-277-XHTMLMP-20011029-a.pdf），简称为XHTML MP，也就是通常说的WAP2.0规范。 XHTMLMP是为不支持XHTML的全部特性且资源有限的客户端所设计的。它以XHTML Basic为基础，加入了一些来自XHTML 1.0的元素和属性。这些内容包括一些其他元素和对内部样式表的支持。和XHTML Basic相同，XHTML MP是严格的XHTML 1.0子集。
网页文档推荐使用扩展名？
推荐命名为xhtml，按WAP2.0的规范标准写成html/htm等也是可以的。但少数手机对html支持的不好。
为什么现今大多数的网站一行字数上限为14个中文字符？
由于手持设备的特殊性，其页面中实际文字大小未必是我们在CSS中设定的文字大小，尤其是在第三方浏览器中。例如Nokia5310，其内置浏览器页面内文字大小与CSS设定相符，但是第三方浏览器OperaMini与UCWEB页面内文字大小却大于CSS设定。经测试，其文本大概在16px左右。假如屏幕分辨率宽度为240px，去除外边距，那么其一行显示14个字以内，是比较保险（避免文本换行）的做法。
使用WCSS还是CSS？
WCSS (WAP Cascading Style Sheet 或称 WAP CSS)是移动版本的CSS样式表。它是CSS2的一个子集，去掉了一些不适于移动互联网特性的属性，并加入一些具有WAP特性的扩展（如-wap-input-format/-wap-input-required/display:-wap-marquee等）。需要留意的是，这些特殊的属性扩展并不是很实用，所以在实际的项目开发当中，不推荐使用WCSS特有的属性。
避免空值属性
如果属性值为空，在web页面中是完全没有问题的，但是在大部分手机网页上会报错。
网页大小限制
建议低版本页面不超过15k，高版本页面不超过60k。
用手机模拟器和第三方手机浏览器的在线模拟器来测试页面是不是靠谱？
有条件的话，我们当然建议在手机实体上进行测试，因为目标客户群的手机设备总是在不断变化的，这些手机模拟器通常不能完全正确的模拟页面在手机上的显示情况，比如图片色彩，页面大小限制等就很难再模拟器上测试出来。当然，一些第三方手机浏览器的在线模拟器还是可以进行测试的，第三方浏览器相对来说受手机设备的影响较小。

参考网站

交互

开发

招聘广告一枚

karry — Thu, 06 May 2010 20:12:32 +0800

上海五分钟诚聘前端开发工程师

职位名称：前端开发工程师

你有两个方向可供选择：

平台方向
职位描述
1. 负责公司各游戏产品的web页面输出及优化；
2. 能快速处理主流浏览器的兼容性问题（FF/IE6/IE7/IE8/Chrome/Opera）；
3. 使用Facebook/人人网/opensocial等Javascript API完成相关功能；
4. 负责公司各管理系统后台界面的输出和Javascript开发；
游戏WAP版方向
职位描述
1.负责游戏wap版的前端开发工作；
2.保证在各种不同的移动设备中有良好的可用性；

职位要求
1. 本科或以上学历，一年以上前端开发相关工作经验，有WAP相关开发经验者优先考虑；
2. 精通各种Web前端技术，包括XHTML/XML/CSS/Javascript等；
3. 能熟练使用一门服务器端语言者优先考虑（如Java/PHP/C#/Ruby）；
4. 有良好的沟通能力，善于和各种背景的人合作；
5. 理解Web标准，对可用性、可访问性等相关知识有实际的了解。
6. 关注前端技术发展方向，对HTML5和CSS3有所了解；
注：简历请附上作品链接,若有技术BLOG，请附上BLOG地址。

简历请投递：jobs[at]fminutes.com 或 kai.zhang[at]fminutes.com

加入我们，一起创造快乐！

上海五分钟是世界上成长最快、创造性最强的社交游戏公司之一。在这里，你的每一份努力，都会成为全世界玩家的一份快乐！我们可以给你:

一个开放快乐的环境；
一个有挑战性的岗位；
一把潜力巨大的股票；
一份有竞争力的薪水；
一段共同奋斗的回忆！