http://tommyfan.com/blog 记载偷米饭技术的心路历程。当然！如果你有兴趣,也可以进来看看他的生活点滴。 Wed, 10 Mar 2010 10:06:26 +0000 http://backend.userland.com/rss092 en WEB标准化交流会是由“WEB标准化联盟”（46077068）在2009年发起的线下活动。在每月的最后一个周六，与Web从业者共同研究并讨论前端动态。本活动以技术交流为目的，不收取任何费用。 社区：Blueidea群组Twitter：Follow on Twitter联系：contact@w3ctech.com 2010年3月 – WEB标准化交流会 第6期 * 话题：前端开发在研发流程中与其他岗位协作效率的提升 研发流程 协同规范 有效沟通 有想法？去讨论 时间：2010-3-27 14：00－18：00 报名时间：2010-3-1 至 2010-3-21 交流会邀请会在3-23日统一发出，请留意您的邮件。 地点： 北京：海淀区中关村腾讯北京 上海：携程旅行网 上海市长宁区福泉路99号[地铁2号线淞虹路终点站5号口出] 广州：天河区天河路208号粤海天河城大厦39楼新浪公司 深圳：深圳市南山区高新南一道飞亚达大厦508室 第6期报名表报名表：http://www.w3ctech.com/joinus/ 详情请看：http://www.w3ctech.com/ http://tommyfan.com/blog/skill/2010_03_w3ctech/ 会议开幕，视频好卡 >_< " 主持人卡卡致词，点点点 以下省略两千字... 轮到我了，普通话太烂，开头有些怯场。 下载PPT《网站重构who am i》 http://tommyfan.com/blog/skill/webrebuild_who_am_i/ 转自:tension.name 2009年12月12日,在北京中国谷歌二层会议室开展了北京第一届 Web Rebuild 交流会,还算非常成功的,现在刚回到家里就马上来给大家分享,其实谷歌还是非常好的环境,比如说：“免费的水，免费的饮料，免费的冰淇淋，免费的咖啡，免费的牛奶，免费的麦片... ”等等很多免费的东西啦,而且环境不是一般的舒适哦~ 呵呵,想跳槽的赶紧啦,! 接下来特别感谢Google技术用户组奖品及场地的支持,还有谋智网络,华章出版社,图灵出版社,蓝色理想. 让我们北京第一届Web Rebuild可以办的如此顺利吧! 下面来欣赏一些照片吧! 集体合影留念! 谷歌中国大楼 签到长龙 前台门厅上的Google Logo 休息区 大厅一角 大家都在聚精会神听讲 W3C中国的代表 Google技术用户组 王开源 我 嗷姐 彪叔 Baidu 阿肆&周裕波 聚精会神听讲的兄台! http://tommyfan.com/blog/skill/webrebuild_beijing/ 菩提树下 WebRebuild第三届年会 一年一度的WebRebuild年会，今年选定了在深圳华侨城的午后浓香举行。从年会的第一年《革命》到第二年《蜕化》到第三年的《菩提树下》。如会上所说，取名为菩提树下是因为释迦牟尼在菩提树下悟道同时也是在菩提树下开始宣扬佛法的。故此，像我们创立WebRebuild的宗旨，领悟技术，分享技术。今年的WebRebuild年会人数为65人（实到）增长率达到325%，大大地超过预期。从分享内容上除了迅雷原有暂定的《仓促中的页面构建》《居中背景图片显示问题》以外，其余分享的PPT如下： begin.rar —— 开篇 第一印象.rar —— 腾讯 —— 陈子舜 公用模板重构.rar —— 网易 —— 鲁齐 一专多长.rar —— 腾讯 —— 梁璟彪 RDFa.rar —— 腾讯 —— 辛春红 CSS3.0 手册项目分享会.rar —— 腾讯 —— 吴珍妮 CSS3.0 手册下载 HermanZhang等一众人进行开香槟仪式 CasparZhang等一众人进行开香槟仪式 大家聚精会神地在聆听 一群专门起哄的课托 邀请到会参与的两位前端大牛EMU（右一）、PJBlog作者（左一） http://tommyfan.com/blog/skill/webrebuild_3_years/ 小组的同学们利用业余时间整理出了一份比较完整的CSS 3.0 参考手册，非常不容易。手册是根据W3C的CSS3草案翻译，并且结合实际的示范结合而成。每一页都倾注了每一个同学的心血。预览页面： 下载地址： http://webteam.tencent.com/css3/ http://tommyfan.com/blog/skill/css3_reference_manual/ 之前写过一篇《微格式 Microformats » hCard 》，盆友们好奇地来问我一些问题，像“这个东东能干嘛？”、“这样做真的有意义吗？”、“感觉这东西以后应该扩展个xml作标准，套几十个class来实现这样个结构我很抗拒。”。 前几天成功把exchange设置好，借这个机会讲一下我在研究exchange的时候利用微格式导入联系人号码的过程。 1、浏览页面时Operator发现hCard。 2、导出保存hCard为vcf文件。 3、双击文件用outlook打开。注：hCard中如果有中文，vcf的文件编码必须另存为ANSI 4、outlook联系人中出现己添加的联系人 5、几秒钟后exchange己经把联系人送到您的手机通讯录里了 大功告成，以后就可以利用hCard添加联系人了！ http://tommyfan.com/blog/skill/add_phone_from_hcard/ <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/ 深藏多年秘笈大公开，全世界唯一一家公布，怎么点就是点不出，纯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/ 今天分享了一份ppt，关于ie8新特性的介绍及应用，内容大致如下： 网页快讯 Web Slice webslice可以剪切网页的一部份放置于IE，便于更新及跟踪所需要的信息。它与RSS的性质相同，但更加友好、更加易用。 如果我们的页面支持webslice，用户将鼠标移动至webslice模块上方时便出现绿色订阅按钮 ，点击按钮即可将对应模块订阅。 很遗憾，像qq秀这样的frameset页面结构仍不支持鼠标动作。并且因为订阅后模块内的js被屏蔽，所以数据不能通过javascript拉取，但我们可以通过提供订阅按钮解决。 加速器 Accelerators 在浏览网页看到有兴趣的关键词时，可以通过accelerators快速的找到关键词的其它信息。例如您在逛淘宝服饰时想搜索对应的QQ秀装扮；又或者您在浏览公司介绍时想查询地址所在地图以及相关行车路线。 很奇怪的是web slices不支持，但加速器的预览页面是支持javascript。 即时搜索 Instant Search 用户在搜索关键字时可以根据关键字预览其它搜索引擎的搜索结果。例如：在搜索淘宝服饰时想看一看qq秀的搜索建议。这些操作通过点击搜索建议下方按钮便可以轻松切换。 通过编写符合OpenSearch规范的XML文件，添加搜索引擎至IE搜索栏。 下载PPT【ie8新特性应用】 http://tommyfan.com/blog/skill/ie8_features/ 页面导航 识别类 fn n honorific-prefic given-name additional-name family-name honorific-suffix nickname photo bday 地址类 adr type INTL POSTAL PARCEL WORK dom home pref post-office-box street-address extended-address region locality postal-code country-name label 通讯类 tel type VOICE home msg work pref fax cell video pager bbs modem car ISDN pcs email mailer 地理类 tz geo 组织类 title role logo agent org 备注类 category note rev sort-string sound uid url 安全类 class PUBLIC PRIVATE CONFIDENTIAL key 关于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等。 地理类 地理位置的信息，时区、经纬度等。 这个类别也己经独立制定为为另一个规范geo，目前 FireFox 的 Operator 插件支持找到页面上符合的 geo 规范的数据，根据经纬度Operator可以跳转到Google Maps或Yahoo Maps相应的地址，不过目前geo没有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 ... http://tommyfan.com/blog/skill/microformats_hcard/