偷米寄居 http://tommyfan.com/blog 记载偷米饭技术的心路历程。当然！如果你有兴趣,也可以进来看看他的生活点滴。 Wed, 10 Mar 2010 10:06:26 +0000 http://wordpress.org/?v=2.7.1 en hourly 1 2010年3月 – WEB标准化交流会 http://tommyfan.com/blog/skill/2010_03_w3ctech/ http://tommyfan.com/blog/skill/2010_03_w3ctech/#comments Wed, 10 Mar 2010 10:01:45 +0000 米饭 http://tommyfan.com/blog/?p=421 WEB标准化交流会是由“WEB标准化联盟”（46077068）在2009年发起的线下活动。在每月的最后一个周六，与Web从业者共同研究并讨论前端动态。本活动以技术交流为目的，不收取任何费用。

2010年3月 – WEB标准化交流会 第6期

* 话题：前端开发在研发流程中与其他岗位协作效率的提升

  1. 研发流程
  2. 协同规范
  3. 有效沟通

有想法？去讨论

  • 时间：2010-3-27 14：00－18：00
  • 报名时间：2010-3-1 至 2010-3-21 交流会邀请会在3-23日统一发出，请留意您的邮件。
  • 地点：
    1. 北京：海淀区中关村腾讯北京
    2. 上海：携程旅行网 上海市长宁区福泉路99号[地铁2号线淞虹路终点站5号口出]
    3. 广州：天河区天河路208号粤海天河城大厦39楼新浪公司
    4. 深圳：深圳市南山区高新南一道飞亚达大厦508室

第6期报名表报名表：http://www.w3ctech.com/joinus/

详情请看：http://www.w3ctech.com/

]]> http://tommyfan.com/blog/skill/2010_03_w3ctech/feed/ 网站重构who am i【视频、PPT】 http://tommyfan.com/blog/skill/webrebuild_who_am_i/ http://tommyfan.com/blog/skill/webrebuild_who_am_i/#comments Mon, 14 Dec 2009 17:30:57 +0000 米饭 http://tommyfan.com/blog/?p=403 会议开幕，视频好卡 >_< ” 主持人卡卡致词，点点点

以下省略两千字…

轮到我了，普通话太烂，开头有些怯场。

下载PPT《网站重构who am i》

]]> http://tommyfan.com/blog/skill/webrebuild_who_am_i/feed/ WebRebuild北京第一届交流会 http://tommyfan.com/blog/skill/webrebuild_beijing/ http://tommyfan.com/blog/skill/webrebuild_beijing/#comments Sat, 12 Dec 2009 18:29:16 +0000 米饭 http://tommyfan.com/blog/?p=377 wr.png

转自:tension.name

2009年12月12日,在北京中国谷歌二层会议室开展了北京第一届 Web Rebuild 交流会,还算非常成功的,现在刚回到家里就马上来给大家分享,其实谷歌还是非常好的环境,比如说：“免费的水，免费的饮料，免费的冰淇淋，免费的咖啡，免费的牛奶，免费的麦片… ”等等很多免费的东西啦,而且环境不是一般的舒适哦~ 呵呵,想跳槽的赶紧啦,!

接下来特别感谢Google技术用户组奖品及场地的支持,还有谋智网络,华章出版社,图灵出版社,蓝色理想. 让我们北京第一届Web Rebuild可以办的如此顺利吧!

下面来欣赏一些照片吧!

集体合影留念!

1.jpg

谷歌中国大楼

DSC_1930.jpg

签到长龙

DSC_1931.jpg

前台门厅上的Google Logo

DSC_1933.jpg

休息区

DSC_1934.jpg

大厅一角

DSC_1935.jpg

大家都在聚精会神听讲

DSC_1939.jpg

W3C中国的代表

DSC_1942.jpg

Google技术用户组 王开源

DSC_1943.jpg

我

DSC_1944.jpg

嗷姐

DSC_1963.jpg

彪叔

DSC_2000.jpg

Baidu 阿肆&周裕波

DSC_2006.jpg

聚精会神听讲的兄台!

DSC_2032.jpg

]]> http://tommyfan.com/blog/skill/webrebuild_beijing/feed/ WebRebuild第三届年会【照片、PPT】 http://tommyfan.com/blog/skill/webrebuild_3_years/ http://tommyfan.com/blog/skill/webrebuild_3_years/#comments Wed, 26 Aug 2009 02:35:54 +0000 米饭 http://tommyfan.com/blog/?p=356 菩提树下

WebRebuild第三届年会

一年一度的WebRebuild年会，今年选定了在深圳华侨城的午后浓香举行。从年会的第一年《革命》到第二年《蜕化》到第三年的《菩提树下》。如会上所说，取名为菩提树下是因为释迦牟尼在菩提树下悟道同时也是在菩提树下开始宣扬佛法的。故此，像我们创立WebRebuild的宗旨，领悟技术，分享技术。今年的WebRebuild年会人数为65人（实到）增长率达到325%，大大地超过预期。从分享内容上除了迅雷原有暂定的《仓促中的页面构建》《居中背景图片显示问题》以外，其余分享的PPT如下：

  1. begin.rar —— 开篇

    WebRebuild

  2. 第一印象.rar —— 腾讯 —— 陈子舜

    zishunchen

  3. 公用模板重构.rar —— 网易 —— 鲁齐

    rukey

  4. 一专多长.rar —— 腾讯 —— 梁璟彪

    twinsenliang

  5. RDFa.rar —— 腾讯 —— 辛春红

    rainxin

  6. CSS3.0 手册项目分享会.rar —— 腾讯 —— 吴珍妮

    jeannewoo

  7. CSS3.0 手册下载
  8. HermanZhang等一众人进行开香槟仪式

    HermanZhang等一众人进行开香槟仪式

  9. CasparZhang等一众人进行开香槟仪式

    CasparZhang等一众人进行开香槟

  10. 大家聚精会神地在聆听

    大家聚精会神地在聆听

  11. 一群专门起哄的课托

    一群专门起哄的课托

  12. 邀请到会参与的两位前端大牛EMU（右一）、PJBlog作者（左一）

    邀请到会参与的两位前端大牛EMU（右一）、PJBlog作者（左一）

]]> http://tommyfan.com/blog/skill/webrebuild_3_years/feed/ CSS3.0手册 http://tommyfan.com/blog/skill/css3_reference_manual/ http://tommyfan.com/blog/skill/css3_reference_manual/#comments Tue, 25 Aug 2009 03:03:46 +0000 米饭 http://tommyfan.com/blog/?p=350 css3

小组的同学们利用业余时间整理出了一份比较完整的CSS 3.0 参考手册，非常不容易。手册是根据W3C的CSS3草案翻译，并且结合实际的示范结合而成。每一页都倾注了每一个同学的心血。

预览页面：

css3

下载地址： http://webteam.tencent.com/css3/

]]> http://tommyfan.com/blog/skill/css3_reference_manual/feed/ 用hCard添加手机联系人 http://tommyfan.com/blog/skill/add_phone_from_hcard/ http://tommyfan.com/blog/skill/add_phone_from_hcard/#comments Mon, 08 Jun 2009 04:51:00 +0000 米饭 http://tommyfan.com/blog/?p=331 之前写过一篇《微格式 Microformats » hCard 》，盆友们好奇地来问我一些问题，像“这个东东能干嘛？”、“这样做真的有意义吗？”、“感觉这东西以后应该扩展个xml作标准，套几十个class来实现这样个结构我很抗拒。”。

前几天成功把exchange设置好，借这个机会讲一下我在研究exchange的时候利用微格式导入联系人号码的过程。

1、浏览页面时Operator发现hCard。

step_1

2、导出保存hCard为vcf文件。

step_2

3、双击文件用outlook打开。注：hCard中如果有中文，vcf的文件编码必须另存为ANSI

step_3

4、outlook联系人中出现己添加的联系人

step_4

5、几秒钟后exchange己经把联系人送到您的手机通讯录里了

step_5

大功告成，以后就可以利用hCard添加联系人了！

]]> http://tommyfan.com/blog/skill/add_phone_from_hcard/feed/ ie7 crash bug http://tommyfan.com/blog/skill/ie7_crash/ http://tommyfan.com/blog/skill/ie7_crash/#comments Tue, 26 May 2009 13:25:09 +0000 米饭 http://tommyfan.com/blog/?p=320 <style type="text/css"> div{float:left;width:175px;} ul{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;} li{position:relative;} </style> <div> <ul> <li>崩溃崩溃崩溃崩溃崩溃crash ie7</li> <li>崩溃崩溃崩溃崩溃崩溃crash ie7</li> </ul> </div>

偶尔发现的东东，特定环境下会发生，估计是ie7处理点点点的bug，除去任何一个关键代码都可以正常使用。

演示，请使用ie7打开！

]]> http://tommyfan.com/blog/skill/ie7_crash/feed/ 纯CSS搞定按钮、链接点击时的虚线 http://tommyfan.com/blog/demo/none_outline/ http://tommyfan.com/blog/demo/none_outline/#comments Tue, 19 May 2009 11:07:47 +0000 米饭 http://tommyfan.com/blog/?p=284 深藏多年秘笈大公开，全世界唯一一家公布，怎么点就是点不出，纯CSS去掉按钮或者链接点击产生的虚线。

<style type="text/css">
	.wrap{position:relative;}
	.btns{zoom:1;}
	.btns *{outline:0;zoom:1;background:#f2f2f2;}
	.btns button::-moz-focus-inner{border-color:transparent!important;}
</style>
<div class="wrap">
	<div class="btns">
		<button type="button">确定</button><button type="button">取消</button>
		<a href="#">确定</a><a href="#">取消</a>
	</div>
</div>

看看效果

这个东东是无意中的发现，用处数数也瞒多，像ie下带border的button点击时恶心的表现、去掉tab的点击虚线等等。但遗憾的是这个东东在实践中发现，ie下还是容易受样式环境影响。

这个效果的实现重点在于我在无意中发现了IE下的一个bug，这个bug在特定环境会导致按钮或链接点击时失去虚线。其它浏览器就比较简单，支持CSS2的浏览器可以通过设置outline解决，FF的button标签通过私有属性特别处理，DEMO在多个主流浏览器测试通过。

]]> http://tommyfan.com/blog/demo/none_outline/feed/ ie8新特性的应用 http://tommyfan.com/blog/skill/ie8_features/ http://tommyfan.com/blog/skill/ie8_features/#comments Fri, 15 May 2009 10:36:48 +0000 米饭 http://tommyfan.com/blog/?p=260 ie8新特性

今天分享了一份ppt，关于ie8新特性的介绍及应用，内容大致如下：

网页快讯 Web Slice

webslice

webslice可以剪切网页的一部份放置于IE，便于更新及跟踪所需要的信息。它与RSS的性质相同，但更加友好、更加易用。

如果我们的页面支持webslice，用户将鼠标移动至webslice模块上方时便出现绿色订阅按钮 ，点击按钮即可将对应模块订阅。

很遗憾，像qq秀这样的frameset页面结构仍不支持鼠标动作。并且因为订阅后模块内的js被屏蔽，所以数据不能通过javascript拉取，但我们可以通过提供订阅按钮解决。

加速器 Accelerators

accelerators

在浏览网页看到有兴趣的关键词时，可以通过accelerators快速的找到关键词的其它信息。例如您在逛淘宝服饰时想搜索对应的QQ秀装扮；又或者您在浏览公司介绍时想查询地址所在地图以及相关行车路线。

很奇怪的是web slices不支持，但加速器的预览页面是支持javascript。

即时搜索 Instant Search

Instant Search

用户在搜索关键字时可以根据关键字预览其它搜索引擎的搜索结果。例如：在搜索淘宝服饰时想看一看qq秀的搜索建议。这些操作通过点击搜索建议下方按钮便可以轻松切换。

通过编写符合OpenSearch规范的XML文件，添加搜索引擎至IE搜索栏。

下载PPT【ie8新特性应用】

]]> http://tommyfan.com/blog/skill/ie8_features/feed/ 微格式 Microformats » hCard http://tommyfan.com/blog/skill/microformats_hcard/ http://tommyfan.com/blog/skill/microformats_hcard/#comments Sat, 09 May 2009 13:48:12 +0000 米饭 http://tommyfan.com/blog/?p=199

页面导航

关于hCard

在说hCard前我们先认识下vCard，vCard标准正在被广泛应用，像Mac系统中的”Address Book”。

另外，其它博客作者使用它加上少量的HTML用来描述自己或他们的朋友或家庭。而且搜索引擎蜘蛛或其它聚合器能收集到这些信息，自动转换为vCard，然后把它们用到一些vCard相关程序或服务，如outLook的导入vCard文件。

hCard采用了以vCard的属性和值1比1对应的方式。博客作者们可以利用具语义的HTML和vCard标准来在他们的页面上插入hCard，然后用CSS来美化。另外，hCard能够让应用程序从页面直接取回信息，而不用通过其它独立的vCard文件取得。

你可以马上用官方的hCard创建器来创建你的hCard代码并放在你的博客或网站以共享你的个人信息。

翻译自Microformats.org

hCard的出现让web2.0的共享精神更加强烈。microformat制定了许多标准，在不改变页面结构的情况下，我们可以共享我们页面的数据出来。业界也不断出现了许多对于hCard的解释，这边我大部分翻译了microformat官方文章和部分文章，详细整理一下，hCard大致分为六大类：

识别类

用来识别hCard的一些信息，如姓名，相片等。

地址类

记录您的地址、邮编等信息。

通讯类

记录您的通讯信息，比如电话、email等。

地理类

地理位置的信息，时区、经纬度等。

这个类别也己经独立制定为为另一个规范，目前 FireFox 的 Operator 插件支持找到页面上符合的 规范的数据，根据经纬度Operator可以跳转到Google Maps或Yahoo Maps相应的地址，不过目前没有zoom属性，所以转向后地图总是默认放大倍数。

组织类

hCard所属的组织、公司或相关信息。

备注类

hCard相关信息及备注。如hCard属于哪一种分类，hCard的最新修改时间等等。

安全类

hCard的安全相关信息，比如公开等级、访问密码等。

识别类

fn

格式化名称，hCard中只能出现一个，并且必须存在！

例子1:

					<div class="vcard">
					   <span class="fn">tommyfan</span>
					</div>

如果fn属性里面出现value属性，value内的值将做为fn的值

例子2:

				<div class="vcard">
				   <span class="fn">my name is <strong class="value">tommyfan</strong></span>
				</div>

如果使用abbr标签，指定title。title的值将成为fn的值

例子3:

				<div class="vcard">
				   他们总叫我<abbr class="fn" title="tommyfan" >偷米饭</span>
				</div>
n

由名字片段组合成的集合，比如姓名前缀＋后缀＋昵称的集合。

它的子属性有以下：

honorific-prefic

姓名前缀

given-name

名

additional-name

别名、花名

family-name

姓

honorific-suffix

姓名后缀

例子1:

				<div class="vcard">
				   他们总叫我<abbr title="tommyfan" class="fn" >偷米饭</abbr>，但是我比较喜欢别人叫我<span class="honorific-prefic">Mr</span> <span class="family-name">fan</span>
				</div>

例子2:

				<div class="vcard">
				    <div class="fn"> 姓名:<span class="value"> 偷米饭</span>;</div>
				    <div class="n">
				       Name:
				       <span class="value">
				          <span class="given-name">Tommy</span>
				          <span class="family-name">Fan</span>
				       </span>
				     </div>
				     ...
				</div>
nickname

昵称

例子:

				<div class="vcard">
				    <div class="fn"> 
				       姓名:
				       <span class="value">
				           偷米饭
				       </span>
				    </div>
				    <div class="nickname">
				       昵称:
				       <span class="value">
				          偷米饭
				       </span>
				    </div>
				    ...
				</div>
photo

指定hCard的形象图片

例子:

				<div class="vcard">
				    <div class="fn"> 
				       姓名:
				       <span class="value">
				           偷米饭
				       </span>
				    </div>	
				    <div class="photos">
				       照片:
				       <img src="http://www.tommyfan.com/logo.jpg" alt="tommyfan" title="某某人照片" class="photo" />
				    </div>
				   ...
				</div>
bday

生日，格式为ISO Date。

如果你只知道大概的生日日期，可以这样写：

例子1:

				<div class="vcard">
				    <div class="fn"> 
				       姓名:
				       <span class="value">
				           偷米饭
				       </span>
				    </div>	
				    <div class="mybday">
				       生日:<abbr class="bday" title="1996-04-15">April 15, 1996</abbr>
				       <br	/>
				    </div>
				   ...
				</div>

如果你知道生日精确的时间，可以这样写：

例子2:

				<div class="vcard">
				    <div class="fn"> 
				       姓名:
				       <span class="value">
				           偷米饭
				       </span>
				    </div>	
				    <div class="mybday">
				       生日:<abbr class="bday" title="1953-10-15T23:10:00Z">Oct 15, 1953</abbr><br	/>
				    </div>
				   ...
				</div>

如果你只记得大概时间段，可以这样写：

例子3:

				<div class="vcard">
				    <div class="fn"> 
				       姓名:
				       <span class="value">
				           偷米饭
				       </span>
				    </div>	
				    <div class="mybday">
				       生日:<abbr class="bday" title="1987-09-27T08:30:00-06:00">Sept 9, 1987</abbr><br	/>
				       <br	/>
				    </div>
				   ...
				</div>

地址类

adr

说明您拥有地址的集合。

它的子属性有以下：

type

地址类型，有下列几种类型，大写为默认类型：

INTL

国际配送地址

POSTAL

邮寄地址

PARCEL

包裹送货地址

WORK

工作地址

dom

国内配送地址

home

家庭住址

pref

首选地址，如果有多个地址时，可指定首选地址。

例子：

						<div class="vcard">
						    <div class="fn"> 
						       姓名:
						       <span class="value">
						           偷米饭
						       </span>
						    </div>
						    <div class="adr">
						       <abbr class="type"   title="dom">
						          <abbr class="type"   title="home">
						             家庭
						          </abbr>
						       </abbr>
						       地址:中国广东省陆丰市甲子镇<span   class="street-address">水果街</span>香蕉巷32号
						    </div>
						    ...
						</div>
post-office-box

信箱号码

street-address

街道地址

extended-address

扩展地址

region

省/州

locality

城市

postal-code

邮编

country-name

国家

例子：

				<div class="vcard">
				    <div class="fn"> 
				       姓名:
				       <span class="value">
				           偷米饭
				       </span>
				    </div>
				    <div class="adr">
				       <abbr class="type"   title="home">
				          家庭
				       </abbr>
				          地址:
				       <span   class="country-name">
				          中国
				       </span>
				       <span   class="region">
				          广东省
				       </span>
				       <span   class="locality">
				          陆丰市甲子镇
				       </span>
				       <span   class="street-address">
				          乜叉叉街
				       </span>
				       <span   class="extended-address">
				          乜叉叉巷N号
				       </span>
				    </div>
				    ...
				</div>
label

收件地址。子属性type与adr的type属性的值一样，跟adr同级，值为字符串。

例子：

				<div class="vcard">
				    <div class="fn"> 
				       姓名:
				       <span class="value">
				           偷米饭
				       </span>
				    </div>
				    <address class="adr label">
				    ...
				</div>

通讯类

tel

说明你的联系电话，有下例几个子属性：

type

指定电话类型，有下列几种类型，大写为默认类型：

VOICE

语音电话

home

家庭电话

msg

带留言功能的电话

work

工作电话

fax

传真电话

cell

移动电话

video

视频电话

pager

传呼器

bbs

电子布告栏系统电话

modem

调制解调器连接电话

car

车载电话

ISDN

ISDN的服务电话

pcs

个人通讯服务电话

pref

首选，如果有多个电话时，可以指定首选电话

email

电子邮件地址

mailer

写邮件常使用的软件，如Outlook

例子：

		<div class="vcard">
		    <div class="fn"> 
		       姓名:
		       <span class="value">
		           偷米饭
		       </span>
		    </div>
		    <div class="tel">
		       <abbr class="type"   title="cell">
		       手机	
		       </abbr>
		       ：
		       <span   class="value">
		       13751051095
		       </span>
		    </div>
		    <div   class="tel">
		      <abbr class="type"   title="work">
		          办公	
		       </abbr>
		       电话：
		       <span   class="value">
		          0755-86013388-5557
		      </span>
		    </div>
		     ...
		</div>

地理类

tz

时区

经纬度

例子：

		<div class="vcard">
		    <div class="fn"> 
		       姓名:
		       <span class="value">
		           偷米饭
		       </span>
		    </div>
		    <div class="tz">
		        时区：
		        <span class="value">
		            +08:00   北京，重庆，香港特别行政区，乌鲁木齐
		        </span>
		    </div> 
		    <div   class="geo">
		       <span   class="longitude">
		          经度：<span   class="value">115.224609</span>
		       </span>
		       <span   class="latitude">
		          纬度：<span   class="value">23.538809</span>
		       </span>
		    </div> 
		     ...
		</div>

组织类

title

你在组织或公司里的职称

role

你在组织或公司里担当什么角色

logo

你所属组织或公司的形象图片

agent

你的助理或秘书

org

表示你所在的组织或公司

例子：

		<div class="vcard">
		    <div class="fn"> 
		       姓名:
		       <span class="value">
		           偷米饭
		       </span>
		    </div>
		    <div class="org">
		        我的公司：
		        <span class="value">
		            深圳腾讯科技有限公司
		        </span>
		    </div> 
		</div>

备注类

category

指定hCard的分类，可以指定多个值，用空格隔开。

note

标注一些追加信息或对hCard的备注

rev

hCard修改时间，ISO Date格式

sort-string

对于姓名，不同城市或国家有不同的排序，有的国家依据姓，有的国家却是名，此属性指定排序的依据。

sound

为hCard指定一个声音来注释hCard的信息

uid

全球唯一id，值可以为IANA己注册检验人的格式，也可以为自定义格式。

url

指定一个hCard相关的url

例子：

		 <div class="vcard">
		    <div class="fn"> 
		       姓名:
		       <span class="value">
		           <a href="http://www.tommyfan.com/hCard/tommyfan/" class="url" rel="tag">
		              偷米饭
		           </a>
		       </span>
		    </div>
		    <div class="category">
		        卡名分类：
		        <span class="value" >
		            个人信息
		        </span>
		    </div>
		    <div class="notes">
		        备注：
		        <span class="note" >
		            这张卡片是记录关于Tommy的信息
		        </span>
		    </div>
		    <div class="revDate">
		        修改时间：
		         <abbr class="rev" title="2007-06-25">
		            June 25,2007 
		         </abbr>
		    </div>
		    <div class="sort-string">
		        排序：
		        <span class="value">
		            Tommy
		        </span>
		    </div>
		    <div class="uid">
		        uid：
		        <span class="value" >
		            19950401-080045-40000F192713-0052
		        </span>
		    </div>
		     <object class="sound" type="audio/basic"data="CID:JOHNQPUBLIC.part8.19960229T080000.xyzMail@host1.com"></object>
		     ...
		</div>

安全类

class

表示hCard是否公开，它有三个子属性值：

PUBLIC

公开的

PRIVATE

私有的

CONFIDENTIAL

保密的

key

hCard的访问密码

]]> http://tommyfan.com/blog/skill/microformats_hcard/feed/