WEB前端

今天网上闲逛，看到克军写了一句话，恶搞一下。凭着这句话的吸引力，我点进去了。

哇，居然页面倒过来了，页头和页脚翻了一个根头，其实我以前还在想，背景图片是不是可以这样呢，今天至少在页面上看到了。

真好奇，立即启动火狐看了一下，哈哈，找到原因了，马上在试了一下IE，搞定，也OK，哈哈，如果不知道的同学们，我想你们也想知道这是怎么回事吧。

其实就是这个东东在做怪。。。

-moz-transform: rotate(180deg);

-webkit-transform: rotate(180deg);

filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);

三行代码，分别用来支持moz，webkit和IE的内核的浏览器。

我们看看克军是怎么做的呢，他使用了JS，让代码立即执行的方式。。给页面增加一个<sytle>和相应的样式，并且为body增加相应的class.下面我将他的js代码贴出来。嘿嘿！

<script>
;(function(){
var d = document, n = d.createElement('style'), r='.flip { -moz-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); }';
n.type = 'text/css';
if(n.styleSheet){
	n.styleSheet.cssText = r;
}else{
	n.appendChild(d.createTextNode(r))
}
d.getElementsByTagName('head')[0].appendChild(n);
d.body.className += ' flip';
})();
</script>

为了使用document方便，他把document传给了变量d,建立了一个style标签为变量n，把样式的内容传给
了变量r，克军的命名都很简洁。
在为这个n其实就是style标签了type这个属性。
下面是进行判断页面中style有不有属性，如果没有，直接将r，也就是样式的内容放入n中。
如果有，就得使用建立文本并且追加的方式。
我不知道我的解释对不对哈，反正大概意思就是这样的，欢迎指正。
一切准备就绪以后，就将n添加到head中去，在将class增加到body上，这样页面一加载。。。。你的页面就会被旋转180度，当然你可以旋转90度，10度，数字是可以调整的哟。

web标准化交流会在这周六（11月28日）将迎来第二期。不仅如此，webrebuild.org北京第一届交流会也将在12月12日举办。

在搞这个交流会之前，我就有说过，做交流会的目的，是能够真正的以一种轻松的方式，让前端开发工作者聚在一起，共同提高，共同进步的！

在10月31日web标准化交流会第一期结束后，到今天，我都觉得算是比较成功的，因为这必竟是我第一次组织这样的交流会，而且看大家都应该是有收获的。当然我心里也挺高兴的！

可是也是在今天，让我改变了这样的想法，突然那种成功感被掉进了万丈深渊。因为有一个参加过第一期交流会的同学在和我聊天的时候告诉我，其实他在第一期听得是云里雾里，很多都听不懂，太概念。我问他，那既然不懂，当时为什么不提出来呢？他却说害怕别人笑话他。这真是让我惭愧，让我害羞呀，交流会 —- 目的让是能够通过大家共同的努力，共同的沟通，解决自己一些不明白的问题。可是主题提出来了，最后又因为害羞，怕别人看不起，而不问，那做交流会干什么呢？这完全没有达到我的初衷呀！

我真的感觉到很失败。在这么小范围的讨论，像这种以技术沙龙性质的讨论，圆桌形式的讨论，当你参加完以后，都不能把当天的东西吃透的话，那真的….我真的不知道应该组织什么式的交流会才能解决这样的问题了。

其实做交流会，在很多人眼里，认为这是在作秀，这是为了出名，这些其实都不重要：

1、活动是免费的，我们不会因为说，我们为交流会准备过什么，付出过什么，向参与者收费;当然晚上大家一起吃饭，你是需要付费的，因为我也只是一个打工者，甚至没有来参与交流会的某些人收入高。

2、我们谈到了实质的内容，没有说让大家只是来坐一坐，随便说说，而且我们给了每个人发言的机会，我们不是说请大家来，照照相，就开始对外宣传。

所以我认为，我这不是作秀，我不用管其他的活动是怎么样的，至少我们的交流会不是在作秀，我也希望以后参与我们WEB标准化交流会的同学们，不要害羞，不要担心，不管来参与的人有多么的利害，多么的强大，他也是从初学者过来的。而且正是因为他们愿意分享，所以才会和大家坐在一起讨论，他们是非常愿意为大家解答他们知道的问题，当然也愿意和大家一起共同解决大家第一次遇到的问题。

在谈webrebuild.org北京第一届交流会，他是一次人数相对较多的，时间不是非常充裕的，是以嘉宾演讲为核心的交流会，如果想所有人都同时参与到与嘉宾互动中来，恐怕是不太现实的。所以他也是有他的缺陷，但是我却认为，这种方式有一点像以前在学校的时候，师傅引进门，修行靠个人，当然并不是不准参与互动，是完全允许的，如果你对此有疑问，同样可以与嘉宾互动的。

我有看到报名表上，有人的期望是不虚此行。但是我还是要说：虚不虚行，还是得看你自己，得看你自己所期望要的是什么，我们此次交流会是技术为核心的。和大家共同讨论WEB标准为主题的。嘉宾不是圣人，所以他们谈的是他们自己的一些见解，当然如果你参与后，完全不认同他们的观念，必然，我想你可能会觉得虚行一趟，但是我个人觉得不然。

好了，不多说，我想说的就是，交流会不是作秀，做交流会的目的是希望能够让真正参与的人，和真正关注我们交流会的人学到真正的本事！

时间：2009-12-12 13:00 – 18:00
地点：北京 – 谷歌中国办公楼二楼会议室

说明：
webrebuild.ORG的成立日在2007年8月18日，致力于推广“Web标准”，促进全国前端开发工作者的交流，提升前端开发的影响力。自成立以来一直受到W3C中国、蓝色理想等组织的大力支持。深圳站于今年已经成功举办三届交流会。为了促进更大范围的交流，于今年正式成立北京站，定于12月12日在谷歌中国举办webrebuild.ORG北京第一届交流会。
交流会内容：
相互见面、交流、探讨“网站重构，前端开发”的发展路向；其间有精彩分享如下：
twinsenliang——《一专多长》
张克军——《分层语义化模板实践》
阿当——《面向对象思想在css中的应用》
鲁超伍——《揭秘HTML5及CSS3.0》
座谈会费用：活动不收取任何费用，晚餐自愿（AA制）。
预定人数：100人。
活动奖品：由Google技术用户组以及华章出版社提供
与会者要求：
由于场地有限会议采取邀请制，筛选后统一发送邀请函，请持邀请函打印版进入会场。W3C标准爱好者，网站重构和前端开发人员，谢绝一切推销和推广人员参加。
报名表单： http://spreadsheets.google.com/v … qZkJ0aERaay1QTWc6MA。
报名开始和截止日期：
11月19日——11月30日
与会邀请发出：
在12月1号至12月5号，以邮件方式发送邀请函。
致外地同学：
如果你是非北京同学，请提前联系好酒店，大会由于人手有限不能负责住宿的预定，实在抱歉。
主办方：
webrebuild.org
W3C中国
Google Technology User Groups (GTUG)北京论坛
详情页面
http://www.webrebuild.org

“W3C中国官方组织在中国沉睡了多年，总算醒了。”其实这算是对W3C中国的一个误解吧，由于在中国W3C官方人员有限，当时所寻找的突破口不同，故而在WEB前端开发的眼里，W3C中国可以算是属于沉睡状态。

昨天（11.13日）得知W3C中国将在中国进行社区建设的时候，还是挺兴奋的，但是很多也对W3C中国的官方网站提出了很多质疑，作为W3C的制定者，连自己的网站都没有通过验证，而且还有本地链接等等，这样的问题，其实我当时也有这样的疑问，带着这样的疑问，准备今天也去参加一下这个会议，顺便也帮大家拨开云雾嘛，嘿嘿！所以当时我就打了电话到W3C中国办事处，后来是安琪（W3C中国的成员，今天我才知道她的名字）接的电话，我问她是否可以参加，她很热情的告诉我，可以的，如果人员过多的话，我们就得重新准备，因为他们当时只请了几个行业内比较知名的站长和前端开发的工作者吧！不过得到了她的同意，我也挺高兴的。故而今天一大早就过去了，参于了这次社区建设的启动大会，很荣幸。

W3C中国社区建设启动会议

注：本次参加此次会议的人员数为16人，此照片为人数不全照片，W3C中国官方后期应该会上传人数最全的照片

此次大会虽然没有说什么过多的技术的问题，但是我还是感到很高兴，有一种找到组织的感觉，因为我可以告诉大家的是，W3C中国终于醒了，要开始发力对中国进行大力推动W3C这个标准了，作为前端开发的一员，我是感到很高兴的，所以不用我说，你们也应该猜到了，今天讨论的内容了吧，哈哈，其实就是关于W3C中国未来的发展的一些东西。

关于本次会议的具体讨论得出的结论，稍后W3C中国官方会有相关的公告，我在此就不多说了！

让我们共同期待W3C中国的下一步动作吧！

W3C中国官方网站：http://www.chinaw3c.org

WEB标准化交流第一期聚会合照

作为前端开发中的一员，一直希望能够将同行聚在一起，大家聊一聊，相互学习，共同进步，共同推进WEB标准！但是苦无机会。10，31日，10月的最后一天，终于迎来了前端开发的第一次聚会。首先非常感谢身边网[http://shop.360side.com/]给我们提供了交流的场地，也很荣幸的请来了克军，阿当与建斌，作为我们这次技术交流会的主要嘉宾，让他们来和我们一起共同拨开云雾。在此非常感谢他们。此次交流会的主题是：WEB重构中文件的组织。通过此次交流会，我的收获还是颇多的，在此我还是来谈谈我对此次交流会的收获吧：

作为我们日常工作中的WEB重构，主要分为：html,css,js.但是会涉及到的东西就比较多了，有切图，还有可能会嵌套模板程序等工作。故而在此事交流会，建斌提到了作为一名前端开发人员，需要成为一名多面手，一专多长的概念。就是你的前端开发必须要精通，也就是所谓的专，而对于其他的你也必须得了解，甚至会，比如交互设计，视觉设计，后端的程序语言，等等。刚才提到了我们在工作中主要做的就是切图，书写html,css及js.那么我们的文件的组织当然也就是这些东西啦，但是对于html来说的话，他是随着一个设计稿，或者说随着一个页面走的，所以在此，我们就不多说了，主要谈的是：css，js,还有就是背景图片。

根据我的收获我就来谈谈css，js 及背景图片的文件组织吧：

CSS：听完大家的交流以后，我觉得CSS从产品来分，还是比较合理的，首先确定整站的公用样式，比如全局样式，当然就包括html,div,p,ul,li等标签的margin，padding的清零，链接的颜色，整站的基本字体大小，头部，尾部，及一些可以公用的样式，可以作为一个公用的样式文件，对于这个公用样式的话，需要你与交互设计师，视觉设计师一起沟通交流，来确定，如果前期不能确定的话，那么在后期在来进行确定公用样式的话，是非常费力气的。作为 一个好的产品应该是这样的。也许有些人会觉得这个成本是否太高，是不是不太现实，的确有一部分公司的设计稿是一张一张的出的，而且设计师是随心所欲，只要觉得怎么好看就怎么来，根据感觉不出来，是一套整体的风格，如果出现这种情况 ，就得看你的沟通能力了，曾经彪叔有说过，WEB重构就是一场战斗，如果你有看过地下党的片子就清楚，他们里面虽然也有流血牺牲，但是他们很多时间为了避免牺牲，采用的方式就是沟通。所以沟通的技巧也是非常重要的。

有了公用样式以后，那么如果你的站比较庞大的话，那么还会分为频道样式与当前页样式，这样其实频道样式也算是频道的公用样式吧，前面的公用样式是指整站的公用样式，频道样式是指频道的公用样式，那当前页样式呢？就是本页专属的样式，与其他页面没有任何共同点的样式。哈哈，也许有又人觉得这样是不是很复杂呢？而且有三个样式表了，是不是对http请求数的增加呢，很多人应该看过关于前端性能优化相关的书籍或者文章，因为里面提到了http请求数，不过这不用担心，因为现在是开发阶段，还没有到发布的时候，还有就是因为当前页样式是本页专属的，克军的建议是可以直接写在本页的<style />中，还有就是解决http请求数方法很多，我们还会考虑到此页面的访问量，还有就是用户的第一次着陆情况来决定，在发布的时候是采用合并公用样式与频道样式呢，还是分开，在着陆页最多的页面采用空余时间加载这两个公用样式来解决http请求数的问题。

这就是我觉得css的文件组织，个人觉得这种方案还是很不错的，不过当然你得花心思了，嘿嘿，有人会说，项目紧张怎么办？时间来不及怎么办？这些的确都属于事实，有些人还会用生活质量作为借口，来说要把工作之外的时候用来休息，不能用来优化，如果这样的话，那我建议你换一家公司吧，能够有时间真正做一个合格前端开发的公司，这句话不知道又会得罪多少人了。

谈完了CSS，我们来看看JS：如果真正在要讲JS的话，就相对于比较复杂了，最终给出了一个可能一些大公司的操作方式，大部分公司还没有开始使用的方式：按需加载，主要提到的是YUI的load功能，这个我也正在学习中，如果你有兴趣，就和我们一起来学习吧。

嘿嘿，JS讲得比较简单，以后我们会专门增加JS的讨论，饭一口一口吃，路一步一步走，不要想一口吃个大胖子。

现在我们来讲讲图片，其实在我们的工作中主要分为两类图片：修饰图片（背景）与内容图片，由于内容图片主要是内容部门做的事情，我们涉及的比较少，我们主要涉及到的还是背景图片，但是在说内容图片之前，我还是建议大家给自己的公司建议，内容图片尽量压缩到最优化。什么是是最优化，就是在不影响图片质量的情况下的最小化。

对于背景图片，当然就会谈到背景图片的格式，因为格式可以影响到图片的大小及质量。还有就是背景图片的个数，他会影响到http请求数，所以我们需要对背景进行整合，就这就是国外所称的：CSS Spirits。

关于背景图片的格式，建议使用png8,这是我最热衷的，不过有时候因为设计师做出一些半透明的效果，故而只有使用png24,这个你可以和你的设计师商梁，因为现在ie6还占据了很大的市场，如果使用png24的半透明，就必须使用滤镜，不然在IE6下没法交差，不过还有一种办法就是单独针对IE6用一种有别于其他浏览器的背景图片，不过这样个人觉得没有什么必要，使用滤镜的风险还是挺大的，不仅仅降低页面的效果，甚至有可能让用户在访问你的页面的时候浏览器掉挂，所以本人暂时不建议使用 png-24。当然克军也提到了如果有动画效果的背景，就得选择使用gif格式。至于什么jpg这类的图片，在我的工作中，几乎很少使用，因为超过256色的背景图片还是非常之少的，不过有这种情况，就是整个页面的头部有一个大背景，但是 如果设计师把控得好，也可以使用png-8的。

关于背景整合的问题，其实也提到了，是将整站背景完全整合在一起呢？还是如何整合呢？方案是还是按CSS规则进行，就是全部公用的整合在一张上，频道公用的整合，单独使用的整合。当然还有一些会被频繁更换的背景，这时候就得小了，也可以整合，这你就得考虑清楚，将他们放在整合的背景中的什么位置，便于你更换。克军还提到了关于背景图片的使用，使用dataURI的方式，这种方式听说不会产生http请求数，这个我还得找时间学习学习。

这些基本就是整个交流会的主要内容，当然在这个过程我们引入了SEO，换肤，还有一些CMS相关的内容。如果谁对此有兴趣，可以单独和我们来聊，在此就不在多说了。

这是我们WEB前端开发交流线下第一次活动，在活动的准备上还是不够充分，比如没有提醒大家带上水，还有忘记了自我介绍的环节，不过也好，轮到自己的时候，在自我介绍，可以节约时间嘛，嘿嘿，不过下一期我们将有所改进，在错误中找到自己，嘿嘿，非常感谢来参加此次交流活动的同行们，谢谢你们。

有了你们的支持与参于，我相信前端开发会强大起来的。

参加此次活动的朋友们的分享：

克军：http://hikejun.com/blog/?p=466&cpage=1

建斌：http://www.greengnn.org/index.php/2009/11/01/club.html

期待其他同学的文章，由于本人水平有限，文章内容有不全之处，希望其他同学提醒，补充。

感觉崔凯[http://uicss.cn/]同学为我们照相，非常感谢。有了同学们的共同努力，让我们顺利的，并且成功的完成了第一期交流会，期待第二期的交流会。

顺便说一句：这是我们WEB标准化交流会的第一期，我们计划每月的最后一个周六举行，我们必须以WEB标准作为主题，以轻松的方式进行技术交流。

鉴于WEB标准化的范畴，后期我们可能将主题变为前端开发交流会。

今天写了一个页面，使用了sup标签！

当时我把sup标签包在了h标签中使用。由于我设置了h标签的字体大为14px，在IE浏览器下，是按照我的想法，居然自动变成了12px的效果。在谷歌浏览器下也是正常的，可是在火狐下虽然看起来也是12px的效果，但是有一些加粗发虚的感觉，但事实上，我事先已经对其进行了不加粗处理。最后我将sup字体设置为12px，在火狐，谷歌浏览器下一切正常，可是在IE下却不能正常了，我又将sup的字体设置为14px，IE下正常，火狐与谷歌浏览器字体变成了14px。

哎，不知道什么原因， 故而使用了hack，直接在font-size前加了*，只能IE6与IE7受用，IE8还是无动于忠，哈哈，找到一个办法解决：

就是在标签前加*。

.list_info_con h3 sup.subhomelink{

text-indent:0;

background:none;

width:auto;

height:16px;

line-height:16px;

font-weight:normal;

vertical-align:text-bottom;

font-family:”宋体”;

font-size:12px;

}

.list_info_con h3 *sup.subhomelink {font-size:14px;}

看到了吧，嘿嘿，这就是解决所有IE浏览器的HACK哟。

还有专门针对IE7与IE6的

在标签前加下划线就可以了，请看：

.list_info_con h3 _sup.subhomelink {font-size:16px;}

注意哟，看清楚哟，*和_所放的位置。

很久没有写博客了，太懒了，趁着中国雅虎首页改版，我也来八卦一下，嘿嘿！

很早之前就听说中国雅虎要改版，今天一打开，果然如此。没有觉得很吸引，前段时间写了关于中国雅虎的改版，是为了推广口碑网，转移用户，不知道怎么回事，阿里又一次对高层进行了调整，迎来了中国雅虎的又一次改版。这次改版没有什么特别之处，给我的感觉就是回到了最初的中国雅虎，那时候更属于雅虎的的版本。

从网站的页能够看出，中国雅虎改版的目的，主要展现的版块有：体育，娱乐，财经，论坛，邮箱，还有时尚。还有一点就是为了推广雅虎的搜索。其他的嘛，我们看一下，他们首页的图片，就知道了。我也不多说！

但是有一个问题，如果目的为了推广搜索的话，为什么输入关键字的时候，连提示都没有呢？是因为很难吗？是为了节省资源吗？还是为了什么？就因为为了性能，所以放弃用户的舒适度？

明说在推论坛，其实暗地里，也是在推口碑网，从这里来看，他们也有想通过中国雅虎的首页将流量转移到口碑的目的,也有将流量转移到淘宝，不过这一些也是很正常的！必竟现在的中国雅虎已经不是曾经的中国雅虎，如果从盈利的角度来看的话，中国雅虎是远远低于淘宝，口碑的，故而转移也是很正常的商业目的！

从改版来看，页面比较简洁，但是个人觉得不够细腻。难道这就是阿里的一贯作风吗？

嘿嘿，这个问题，还是等着有兴趣的朋友去问问中国雅虎的开发团队吧！

一个网站的改版肯定都是有目的的，更不要说中国雅虎这么大的一个网站，那他的目的是什么呢？其实我也不知道，但是我猜想，难道他想趁着各大互联网公司都在进军SNS的时候，来抢占门户这块肥肉，嘿嘿！

一句话：用户体验是一种服务。

现在据我知道比较好的用来测试网页性能的工具有两个，分别为：老牌的雅虎yslow,新秀google page Speed。
怎么会突然想起谈css与性能优化呢？其实这个问题我已经想了很久了，想写，但是也不知道从何写起，今天就简单的说一下，近段使用通过使用page Speed，对css性能优化的一点看法吧！

在市场上的很多书，讲的css的写法都大同小异，并没有说，如何写好，如何写不好！只是说到了id和class是作为css和js的挂钩，我们可以通过id与class来控制页面的展现效果。并且还谈到了css层级写法的强大威力，所以大多数为了减少在页面中定义id与class，都大量的使用了css层级的写法，比如：

<div class=”list”>

<ul>

<li><span>01</span>测试列表</li>

<li><span>01</span>测试列表</li>

</ul>

</div>

这样的一个结构，如果我们想修改li中的span的话，为了尽量的减少class的定义，我们可以这样写：

.list ul li span{样式}

.list li span{样式}

list span{样式}

这三种写法有什么好处与不好的地方呢？

如果使用第一种方法，我个人觉得太长了，没有必要，那如果使用第三种写法呢？怕的是如果在这个div与ul平级也有span的时候，这时候这个span也会被继承到样式，我个人平时都比较喜欢第一种写法，相对来说，对span比较安全，而且可以节约几个字符吧！嘿嘿！但是我的这种写法通过page Speed的检测结果是属于低效的！因为需要检测的层级太多！就像我们上楼梯和下楼梯一样！故而像这种地方，我们完全可以在html中为span增加class,更有可能这个class我们以后还用得着！

<div>

<ul>

<li><span class=”num”>01</span>测试列表</li>

<li><span class=”num”>01</span>测试列表</li>

</ul>

</div>

结构被我改成了这样，如果需要对这个span进行修饰的话，自然你也知道应该如何写啦：

.num{样式}

这样的话，浏览可以直接找到num这个样式，直接赋予他样式，这样是不是更简洁，更高效呢？如果你不信，可以试试吧！

当然，class的定义与层级的使用的话，还有很多，很多，我在这里就仅仅是举了一个简单的例子。如果你与我有不同看法的，请指正。

节约样式

我们在写一个网站的时候，特别是在站不大不小的时候，都会把样式写在一个样式表中，但是这样的话，第一次加载的样式的时候，会相对比较慢，我们是否有一些其他的方法来解决这样的问题呢？通过我这段时间的反思，也不知道是否可行，我觉得是有的，不过我的想法可能过于理想化，那么就是前期必须知道页面的整体风格！不过一般在现实中，还有设计师的一些特殊想法，相对实现起来可能一些麻烦，下面我们来看看：

1、找出真正的公共样式

2、每个页面中在增加一个属于自己页面的独特的样式

3、通过谷歌的预加载方法（JS实现），通过空闲时间将其他页面的样式下载到本地缓存中

其他页面也是如此，这样感觉是工作量可能会大一些，但是我觉得通过这样的方法，的确可以对性能是有所提升的，这仅仅是说到CSS，其实JS也可以使用同样的方法来解决，还有图片，等等！

今天就说到这里，在看看，在改改！