爱得太迟 http://www.lusisi.com/ 每天告诉一次自己，我真的很不错… Copyright (C) 2004 Security Angel Team [S4T] All Rights Reserved. SaBlog-X Version 1.6 Build 20080806 Wed, 10 Mar 2010 19:53:59 +0000 30 http://www.lusisi.com/?action=show&id=104 涉及正则--谈谈工作遇到的问题 admin 工作中要取一个值,如下

XML/HTML代码
  1. <div id="aide">245张</div>  

这个值未知,已经确认会存在 空格/下划线/字母/中文等.不管那种情况,只取其中的数字..

于是个人想到:

JavaScript代码
  1. <script type="text/javascript">   
  2. var ad = document.getElementById("aide").innerHTML;   
  3. var a = ad.replace(/张/,"");   
  4. alert(a);   
  5. </script>  

但这样并没完全达到意外情况下的要求,只取值数字.虽然知道正则能够得到匹配的值,但除了懂得 [0-9] 是数字字符外,其它的一无所知.

搜索后得到 [^0-9] 是非数字字符.于是测试.

JavaScript代码
  1. <script type="text/javascript">   
  2. var ad = document.getElementById("aide").innerHTML;   
  3. var b = ad.replace(/[^0-9]/,"");   
  4. alert(b);   
  5. </script>  

在这个过程中顺便问了下群里的同仁,得到 [^\d]/g ,搜索之, 原来 \d 匹配一个数字字符,等价于[0-9]。 而^\d 匹配一个非数字字符。等价于[^0-9]。



阅读全文

]]> http://www.lusisi.com/?action=show&id=104 Web标准 2010-02-09 14:04 http://www.lusisi.com/?action=show&id=103 前端性能优化建议--年终总结 admin 一．结构有待优化。
目前网站结构代码存在冗余现象，结构的语义化不强，在扩展方面表现出不足。

修改方案：
后继制作应该考虑使用语义化的标签，使结构语义化，增强扩展性能力，以求在良好好结构中适应不同的设计需求。还可减少冗余代码，优化结构。

二. 样式的调用。
目前使用 <link>方式调用样式与JS，由于是模块化工作，使得有些模块反复调用同一样式的情况出现，部分样式重调与覆盖率太高，增加了http请求数，加大了下载的时间，减慢浏览器解释的速度，并造成了流量的损失。

修改方案：
整合样式，把每个页面用到的样式整合到同一个文件中，并对该页面的样式进行优化，去掉注释、空格、换行等，并通过第三方压缩软件进行压缩，以得到发布时最小的样式文件。

注：当然这又涉及到了样式管理，样式版本管理与多人协作的问题。

三. 修饰图片的优化。
目前网站中大多修饰图片都没有经过有效的整合，导致加载速度过慢、请求数增多，影响到页面的响应时间。

修改方案：
1．建议设计搞用色控制在255色内。
2．修饰图片格式的选择——GIF、PNG-8、PNG-24、JPG等，按需求进行选择合适的图片类型以求降低图片字节。
3．对公用的修饰图片、使用频率较高的修饰图片运用Css Sprites技术——也就是把修饰的小图片合理的整合到一张规范大小的图片上，以求减少请求数与图片大小，加快页面响应时间。
4．对某些比较大的修饰图片如JPG可运用第三方软件的再压缩，以求在不损失效果的前提下得到最佳大小。

注：特别强调一下css sprites技术。
a．CSS Sprites技术能减少图片的请求数，把零散的小图片放到一起，运用background-position来改变背景图片的位置，前提是html元素事先定义好宽高，其实就像一个遮罩，移动背景就会看到不同的景象。应用该技术的同时会相应的增加开发时间与维护成本，如果修改频率过高不建议使用。
b．压缩工作的推荐：Image Optimizer



阅读全文

]]> http://www.lusisi.com/?action=show&id=103 Web标准 2010-01-15 13:21 http://www.lusisi.com/?action=show&id=102 Iamge固定居中于Div层中.... admin 昨天群里的一位同学出了一个需求:在一固定的div中,图片如果大于div则实现等缩放,如小于则按原大小显示.2、不管前面那种情况,图片都要上下左右居中于div.

于是,动手写了下面的代码...

错误处不清楚,能力有限,期待高手批...



阅读全文

]]> http://www.lusisi.com/?action=show&id=102 Web标准 2010-01-14 10:37 http://www.lusisi.com/?action=show&id=101 弹出窗口、遮罩、拖动、上下左右居中 admin 前天参考51js一位牛人而整理的一个效果.

因这效果现下比较适用,所以先行试练.总体上没超过原作的思想,能力有限...

看代码吧

XML/HTML代码
  1. <p id="dt_1">登录</p>  
  2.   
  3. <div id="bodyBg" style="display:none;"></div>  
  4. <div id="maiBox" style="top:-900px;left:-900px;">  
  5. <div id="loginBox">用户登录</div>  
  6. <form action="#" method="">  
  7. <ul class="aiTable">  
  8.     <li><label for="username">用户名:</label><input type="text" id="username" name="username" class="aoie" /></li>  
  9.     <li><label for="password">密  码:</label><input type="password" name="password" id="password" class="aoie" /></li>  
  10.     <li class="aisubmit"><label><input type="submit" name="submit" value="登录" id="subLogin" /></label></li>  
  11. </ul>  
  12. </form>  
  13. <div class="wanji"><a href="#">忘记密码</a><a href="#">注册</a></div>  
  14. <p class="aiinput"><a id="aiclose" href="#">关闭</a></p>  
  15. </div>  
  16.   
  17. <script type="text/javascript">  
  18. <!--   
  19. for(var i=1;i<=2;i++)   
  20. {   
  21. eval("var dt_" + i + " = document.getElementById('dt_" + i + "')");   
  22. }   
  23. var bodyBg = document.getElementById("bodyBg");   
  24. var maiBox = document.getElementById("maiBox");   
  25. var loginBox = document.getElementById("loginBox");   
  26. var boxh = document.getElementById("maiBox").scrollHeight;   
  27. var boxw = document.getElementById("maiBox").scrollWidth;   
  28. var winWidth = document.documentElement.clientWidth;   
  29. var winHeight =document.documentElement.clientHeight;   
  30. document.getElementById("aiclose").onclick = function()   
  31.     {   
  32.     hidden("maiBox");   
  33.     hidden("bodyBg");   
  34.     }   


阅读全文

]]> http://www.lusisi.com/?action=show&id=101 Web标准 2010-01-13 09:00 http://www.lusisi.com/?action=show&id=100 层在浏览器中上下左右居中,并适应不同分辨率 admin 由于工作需要,要求一个层在浏览器中上下左右居中,并适应不同分辨率.

刚开始时想到小菜一碟,只在相对绝对一出,搞定.

接着进入实践阶段,才发现并不是如此.

XML/HTML代码
  1. <style type="text/css">  
  2. <!--    
  3. * {margin:0;padding:0}   
  4. div {   
  5.     width:500px;   
  6.     height:500px;   
  7.     border:1px solid #ccc;   
  8.     overflow:hidden;   
  9.     position:relative;   
  10.     display:table-cell;   
  11.     text-align:center;   
  12.     vertical-align:middle   
  13.     }   
  14. div p {   
  15.     position:static;   
  16.     +position:absolute;   
  17.     top:50%   
  18.     }   
  19. img {   
  20.     position:static;   
  21.     +position:relative;   
  22.     top:-50%;left:-50%;   
  23.     width:276px;   
  24.     height:110px   
  25.     }   
  26. -->  
  27. </style>  
  28. <div><p><img src="http://www.google.com/intl/en/images/logo.gif" /></p></div>  


阅读全文

]]> http://www.lusisi.com/?action=show&id=100 Web标准 2010-01-08 09:54 http://www.lusisi.com/?action=show&id=99 发一个自己用的皮肤,名称随便忘记了... admin [极点6皮肤]

从极点4到现在的极点6.5,基本上都是用_default 这个皮肤.

最近觉得不好看,于是动手制作两款,第一款因是抄 QQ拼音 的有版权问题存在,所以不发,只发后面的....(应几个网友的要求,都发了...)

现在用着这两款,感觉良好,未发现有头痛发热现象....

不多说... 

极点五笔皮肤



阅读全文

]]> http://www.lusisi.com/?action=show&id=99 乱说狂言 2010-01-07 16:39 http://www.lusisi.com/?action=show&id=98 来看看国人的典型商业头脑，值得借鉴(转) admin 由于本活动已经结束, 所以本帖不存在广告嫌疑, 请大家纯技术性探讨，纯技术性攻击。我思考了，写的也很认真，对于还没买房子的人希望能有所帮助
真：www.shanghainightmare.com
寨：www.shanghainightmare.cn www.shanghainightmare.com.cn

证明图片

起因：半年多以前, 同事创办一个鬼屋,取了一个名字, 叫做上海梦魇启用www.wanshengjie.com, 想到英文名字,于是同时注册了一个同名域名(www.shanghainightmare.com)当作备用.

发展：经过半年的准备筹划项目进入运营.网站也上线， 经过大规模的投放广告， 小知名度之后,  有票贩子, 有代排队的. 对于一个新的东西,总是能够挖掘一些商业价值,很多人都在思考.

结果：作为技术流, 也有技术流的做法. 某人做了一个山寨版, 同时注册了我们备用域名的.cn 的域名(www.shanghainightmare.cn), 原帖在 http://www.dnbbs.com/viewthread. ... able&tid=113164, 经过乐猫的几轮折腾之后, 我们网站已经在baidu里面消失, 这个网站终成正果. 排名到baidu第一了.也算是他创业成功了吧.



阅读全文

]]> http://www.lusisi.com/?action=show&id=98 转载 2009-12-29 08:53 http://www.lusisi.com/?action=show&id=97 页面重构合理化讨论 会后记事... admin 谈谈自己的看法,当作一种学习.

1、结构合理化中
a)对于DTD的应用,相信大部分公司或者个人采用了比较宽松的DTD -过渡型.而其它的DTD有可能会根据项目要求或个人爱好而使用.至于html5的DTD,因为国情，IE6在市场上占有的比例,相信大多数公司都不会采用.

b)对于验证,许多同学都认为他的作用重点在于验证代码书写,嵌套规则的正确性,以及检错.至于通不通过验证,因为项目或者其它原因都是没有硬性要求.有同仁提到,在静态页面下可以通过w3c的验证,但是在交付后台完成程序嵌套后的页面.其本上验证会有很多提示.

c)在说这之前,就有一个想法,html标准够 语义化了么? 当然,在不断发展的过程中会完善这些.现下,我们能做的就是用自己认为有语义的标准来完成手中的项目.这些都是有分岐的.关于语义化,个人认为还有一段很长的路要走.在现下不段参加的终端,以及数据的提取,在良好语义化的结构中会更好地用于交互与阅读.

d)听说过,没了解.待搜索.

e)Class id命名规则一致性,多人协作的团队中,应该有一定的规范.小组中大部分人主体都会以英文来命名.各模块之间有的用拼音+字母的形式,有的会用英文.但同样有人提出,英文与拼音都有可能会让团队中的人不认识.除此之外,比较赞同一说法,命名方法采用aideClass的方法--即首个单词或者拼音小写,第二个英文或者拼音首个字母大写的方式.这方式虽然在字节上会增加一点,但对于要求经常维护的站点,或者协作都有利于它人的阅读.

f)前端,这块其实在切图与写代码的过程中就已经进行着,只是要重没那么大,至于SEO的具体内容.没有多大了解.



阅读全文

]]> http://www.lusisi.com/?action=show&id=97 Web标准 2009-12-27 00:27 http://www.lusisi.com/?action=show&id=96 设计稿合成web页面… admin 声明：本设计稿来自 经典才子 lwid的作品
本人用来练习合成之速度之乱作……严禁它用、商用。如觉得作品不错，请联系 才子 lwid 进行进一步的合作。

于2009年9月8日留

效果小图:

经典才子 lwid的作品

一、切图之前的一点思考.
1、最小宽为?,背景-x 实现视觉全屏.
2、header部分用body>1px背景平铺还是单切?
3、整体结构考虑采用131.
4、3中a与b之间的关系--a在b中还是b在a中?
5、像素图片整合在一起还是分开,关键是用background还是img的考虑.
6、好友最新主题 栏目的结构用table还是li?
7、社区热门只有10个？定了十个？
8、通知栏会display:none;>还是一直存在。

二、实现--切图.
1、头部考虑到要1px平铺 所以 切 1px 高260左右.使得结构好的.
2、整理下 像素图 还是用背景吧.
3、其它的动刀后就出来了.

三、结构与样式
1、习惯多出的切掉.
2、好友最新主题 用 table
3、最新动态 用 dl
4、整体结构 排列为 131

10点了多了，准备睡，就不写了其它的了。



阅读全文

]]> http://www.lusisi.com/?action=show&id=96 Web标准 2009-12-25 14:19 http://www.lusisi.com/?action=show&id=95 重温table隔行换色 admin 无事,尝试写下隔行换色,写着写着就感觉自己在复制别人的东西,可悲啊.

不过,也好要档练习吧.

效果图



阅读全文

]]> http://www.lusisi.com/?action=show&id=95 Web标准 2009-12-24 14:55 http://www.lusisi.com/?action=show&id=94 北京第一届 Web Rebuild 交流会 与 经典北京聚会 admin 最近在忙改版,快接近尾声了...

说下关于自己参加的聚会吧.

2009年12月12日,天寒地冻,北京第一届 Web Rebuild 交流会在北京中国谷歌公司二层会议室成功举办.

我如约而至,到现在才发现与会者将近200人，受场地的影响....

嘉宾演讲内容如下:

《网站重构who am i》——Tommy[范俊豪，腾讯ISD资深页面重构工程师]
《浏览器兼容性问题简介》——黄昊[谷歌中国测试工程师]
《一专多长》——Twinsen[梁璟彪，腾讯ISD页面工程师leader]
《分层语义化模板实践》 ——张克军[中国雅虎前资深前端工程师，中国雅虎最早的前端开拓者，D2论坛组委会成员]
《javascript的分层概念》 ——阿当[新浪前端开发工程师]
《揭秘HTML5及CSS3.0》 ——鲁超伍[淘宝网北京前端开发工程师]

个人听到7点钟,由于私事先行撤退...详情请搜索与会视频..



阅读全文

]]> http://www.lusisi.com/?action=show&id=94 乱说狂言 2009-12-22 11:34 http://www.lusisi.com/?action=show&id=93 border:none 0;的疑惑.... admin 最近在群里有人提出了border:none 0;的写法能够兼容浏览器.当时很困扰,为什么能够这样写呢?

于是当时记录了一下这个问题.今天有空了,翻手册,发现:

border

语法：
border : border-width || border-style || border-color

说明：
设置对象的边框样式。
当你指定了边框颜色( border-color )和边框宽度( border-width )时，你必须同时指定边框样式( border-style )，否则边框不会被呈现。
如使用该复合属性定义其单个参数，则其他参数的默认值将无条件覆盖各自对应的单个属性设置。

border-width:设置对象边框的宽度。属性1.:medium:默认值。默认宽度  2.length 数值

border-style:设置对象边框的样式。
属性常用:
none    :   默认值。无边框。不受任何指定的 border-width 值影响
dotted  :　 在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为点线。否则为实线
dashed  :　 在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为虚线。否则为实线
solid   :　 实线边框

border-color:这个就不说了.

至此,对于没border:none 0;这样的写法已经没任何疑问.--还是基础啊.



阅读全文

]]> http://www.lusisi.com/?action=show&id=93 Web标准 2009-12-04 09:29 http://www.lusisi.com/?action=show&id=92 关于CSS Sprite之走在交流会后 admin 聚会图片

终于等到了 标准化交流会 的第二次会议的开讲.这次又学得了许多...

下面讲讲学到的:

因为CSS Sprite不同项目有不同的整合方式,这里只讲的个人觉得很不错的方式.

这里不得不提下 greengnn ,他在交流会里反复提到的单页单屏整合方式(可能他愿意并非这个,但我听的就是这意思),个人很有同感.

所谓的单页单屏整合,也就是只把同一个页面内在第一屏显示的背景图片整合到CSS Sprite中.这样可以避免因图片太大加载慢的情况,毕竟屏幕大小决定了能看的范围.如果有三四屏,在加载完第一张图片后自动会进行下面的图片的加载.这样可以解决速度的问题.

或许有人会提,这样做如果子页面有用共用部分如何处理--会上没人给出更好建议.

有人建议首页单独整合,其他根据结构 模板页 特定页 与特定栏目之间做权衡.

许多人提出css sprites还是要根据实际需要来合并图片,要考虑站点访问量,修改频繁度.没有一种通用的方式提供出来,也没解决如果更好的整合这一话题.

css sprites图片整合的奇淫技巧还需自己琢磨,慢慢积累,或许 应用 data url方式,此法有待进一步研究.



阅读全文

]]> http://www.lusisi.com/?action=show&id=92 Web标准 2009-11-29 13:12 http://www.lusisi.com/?action=show&id=91 关于IE6双倍问题 admin IE6双倍margin bug是 IE6 著名的bug之一。它出现条件是：父元素与子元素之间，子元素同时设置了浮动和外边距属性，子元素会出现此bug，兄弟元素之间则不会.(简说:子元素 浮动，且margin方向与浮动方向相同)

许多人给出的解决方法:
1、多写一行CSS HACK
如：margin-left:10px;_margin-left:5px;

这种方法虽然有效,对于要求完美的coder来说使用CSS HACK是不能接受的.

2、display:inline：
此法为许多人提及/并推荐的方法.
上面两种方法都没有错,但是能不能换一种思维来写呢?
上面已经说过 这 双倍 产生的原因.

例：css：

<!-- <style>
ul { width:248px; border:1px solid #000;height:40px;}
ul li {list-style:none;float:left;margin-left:5px;}
ul li a { display:block; width:100px; height:40px; text-align:center; background:#d7d7d7;}
</style>
<ul>
 <li><a href=”#”>测试</a></li>
 <li><a href=”#”>测试</a></li>
</ul> -->

如下,图中上为IE6的效果,下为IE7,细看可看到左边的间距有所不同.



阅读全文

]]> http://www.lusisi.com/?action=show&id=91 Web标准 2009-11-23 22:33 http://www.lusisi.com/?action=show&id=90 关于CSS Sprite之走在交流会前 admin 　　CSS Sprite的基本原理是把网站上用到的一些图片有规划地整合到一张或多张单独的图片中,从而减少你的网站的HTTP请求数量.图片使用CSS background和background-position属性渲染.
　　对于当前网络流行的速度而言,图片的大小与多少决定所需载入的时间,所以要考虑这个问题.通过CSS Sprites方法将多张图片有规划地整合到一张或多张单独的图片中,可以有效减少HTTP请求的次数.

　　但CSS Sprite却是一个复杂的话题.
　　首先,图片的整合不当,会造成文件多空白.
　　其次,让人头痛的还是文件的维护.只要CSS Sprite图片中有图片要修改,尺寸发现了变化,痛苦热情的拥抱你了,这无疑会增大工作量.
　　再次,一个我未曾实验过的话.--CSS Sprite调用的图片不能被打印，除非在@media中特别添加 print声明——by RichB.

由此,我觉得CSS Sprite的整合,可以分下面来实践.

1. 图站的icon类图片-特定大小的图片
　　如网站一些icon图片.
　　典型如文本编辑器,小图标特别多,并且大小一制,不存在重复修改的可能性.

2. 图片反转
　　触发切换图片的需求，可以避免因从新请求而产生间瞬.如有些导航的图片反转,button按钮的反转.

3. 把颜色较近或相同的组合在一起,有效的降低颜色数，相应的可控制CSS Sprites图片的大小.
   尺寸相同的CSS Sprites图片中留有较大空隙，一定程度上多数情况会增大体积，所以CSS Sprites的图片尽量避免留有大空隙.

--话外,话说如果图太大会造成吃内存的现象.这是用户体验那部分了.



阅读全文

]]> http://www.lusisi.com/?action=show&id=90 Web标准 2009-11-18 16:31 http://www.lusisi.com/?action=show&id=89 关于分页的一点小谈 admin 昨天在水区看到一个帖子,先不管效果图为何样..

先看结构

<div>
<div class="pagebar">
 <div class="pagebar_center">
 第8/201頁
 <a href=""><img src="images/prev.gif" alt="上一頁" /></a>
 <a class="pagenum" href="">3</a>
 <a class="pagenum" href="">4</a>
 <a class="pagenum" href="">5</a>
 <a class="pagenum" href="">6</a>
 <a class="pagenum" href="">7</a>
 <a class="pagenum" href="">8</a>
 <a class="pagenum" href="">9</a>
 <span class="pagenumon">10</span>
 <a class="pagenum" href="">11</a>
 <a class="pagenum" href="">12</a>
 <a href=""><img src="images/next1.gif" alt="下一頁" /></a>
 </div>
 <span>共<span class="pagenumon">255</span>筆</span>
</div>
</div>

分析这结构的不好之处.
1. 外框div包着里面的子元素,但div定class.
2. 从最终效果上看可以得出可为分三部分--1>、第8/201頁  2>、上一頁 12345678.。0下一頁  3>、共255筆.这里却把 第8/201頁 放到了 页数中.
3. 最大的败笔--用img放修饰图片.(在禁用图片的形式下,能看到上一页 与 下一页么?)
4. <span>共<span class="pagenumon">255</span>筆</span> 此结构完全可以换一东方式思考.为什么不在外面的span定 class 而定里面的?
5. 不明白到10了为什么就不用a了呢?<span class="pagenumon">10</span>......



阅读全文

]]> http://www.lusisi.com/?action=show&id=89 Web标准 2009-11-18 08:48 http://www.lusisi.com/?action=show&id=88 关于结构 标题 与 更多 之间 admin 曾经有几个人问我, 标题与更多之间,怎么样才能把 更多 放到 右边.我的回答是 float:right;可随之而来的是 他告诉我这样不行.会换行..之后就是等等问题.

在这把用过的总结下,只针对 给出的图片.

图片

第一种:

<div class="clear"><h1>深度报道</h1> <a href="#">更多</a></div>

切图为 2px 背景平铺.H放标题前的按钮.

<style>
.clear:after{
     content:".";
     display:block;
     height:0;
     clear:both;
     visibility:hidden;
}
div {background:url(./img/) 0 0 repeat-x;width:300px;}
h1 {float:left;background:url(./img/) 0 0 no-repeat;}
a {float:right;height:36px;}
</style>

优势:在扩展与重用性强.符合语义化.
缺点:标签有人觉得多了.得清浮动或者触发


第二种:

<h1>深度报道<a href="#">更多</a></h1>

切图为整张.

<style>
h1 {position:relative;background:url(./img/) 0 0 no-repeat;width:300px;}
a {position:absolute;right:0;}
</style>

优势:标签刚够用结构合理,语义也行.
缺点:更多包在H里了,要重新定义其它属性



阅读全文

]]> http://www.lusisi.com/?action=show&id=88 Web标准 2009-11-13 11:30 http://www.lusisi.com/?action=show&id=87 第一届web标准线下交流会 之 个人感想 admin 第一届web标准群聚会图片

第一届web标准线下交流会

10.31号,欲波组织了greengnn的标准群之第一届web标准交流会.

此次交流会的主题是：WEB重构中文件的组织。下面讲一只自己认知的,错误是难免的...

说在之前:10.31一个阳光很充足的日子,交流会定在2.30分开始.由于时间上把握得不够以及交通工具选择的错误,本人很荣幸地成为了迟到的一员.在此向在会场等候的各位道歉...

转入主题,现场没记录--有些声音我真的听不到....:

工作中的WEB重构，CSS/(X)HTML/JS.关于他们的文件组织,这里只说发布之前的.

这里引入 一个站点加以说明:个人认为不管多大网站,都能分为若干个.比如 首页下来有频道页.咱们可以把首页-列表页-内容页做为一小节.频道-列表页-内容页为一节.如此.
(PS:此处所说的首页-列表页-内容页为举例.)此为个人所在环境造成,建站公司,很多时候注重的效率,本人也在其中找到了一点路数.

正因如此,

关于CSS,个人觉得不必把整站的文件都考虑在一起,如果这样,文件出现混乱的机率比较大,习惯大化小,本来频道与首页相同之部分很少.为什么要共用管理,分开不是更好?...

例如 首页

首页与列表页/内容页之间可用三个文件组织CSS -- reset,公用样式(一般为页头页脚),主体样式.

频道页--reset,公用样式(一般为页头页脚),主体样式.

如此分.在维护时可以快速找到对此文件,管理时能心中也有个概念.有人会但这样增加请求数.请注意这里说是发布前.

当然,大公司不在此例.

会上几位大牛说得我飘飘然然(当然是自己功力不够的原因造成没理解好),其中比较支持 greengnn 的观点:前端为一个多面手,要熟悉项目管理，产品，设计，后台开发，产品运营等，作为研发中的一个衔接层，更好的把产品构想和设计付诸实施。详情请看 第一届web标准线下交流会



阅读全文

]]> http://www.lusisi.com/?action=show&id=87 Web标准 2009-11-11 11:11 http://www.lusisi.com/?action=show&id=86 前端开发中的团队合作 admin 最近在着手“蓝色理想”的页面重构工作，这次的项目与以往来比有几个劣势：

  1. 对参与开发人员的水平均不了解；
  2. 陌生人，谈不上谁配合谁，只能自己多协调一下大家的编码习惯；

结合这两天的项目进展及过去的工作经验，谈一下前端开发中的团队合作：

  1. 详尽的开发文档
    一件产品的诞生，凝聚的是整个团队的努力。要让大家的劲往一处使，最好能在项目开始前，准备好开发的文档，写明注意事项。未必是最完美的，初期通常考虑不了那么周全，但不能因为这个原因，而放弃文档的制订。前期节省的时间，造成后期维护成本的增加，得不偿失。
  2. 代码注释
    每一个参与开发的人员，必须注意到自己的代码应该是清晰紧凑的。
    时时问一句，我有没有为一起做这件事和后续做这件事的人着想。
  3. 避免样式冲突
    文章开头的案例比较小，暂时没有出现大规模冲突的情况。
    但是在实际的团队配合中，通常会出现这个问题。
    在开发中，要尽量避免使用 p h1 h2 h3 li 这样的通配符，以及 .left .right 这些大家有可能用到的变量名称。如果一定要用，放在显眼的位置。让大家知道，你给过什么属性。


阅读全文

]]> http://www.lusisi.com/?action=show&id=86 转载 2009-10-02 10:38 http://www.lusisi.com/?action=show&id=85 前端版本控制 admin 关于前端的版本控制讨论，后台程序代码的版本控制已经比较成熟，但是前端代码和素材的版本控制很空白。
在css森林群里，我咨询过版本号的问题，那就先从版本号说起

版本号

引用:
改版.功能更新.优化

a.b.c

a = 大版本的改版，全新UI，架构变化都可以用这个数字
b = 小改版，功能或者功能包升级，新功能上线等
c = 小优化，修正bug或者功能性修补，或者小功能的提升

前端是功能+界面的结合体，代码和文件一般为css，html，js，图片。html版本控制较难，因为要移交给后台程序员修改为模版文件或者添加动态程序。

前端代码产生的流程一般为
按照设计稿和需求制作前台代码，提交页面文件和其他素材文件（图片，css，js），或者自己管理素材文件，提交页面文件给下线。
后台功能的时候，总会产生一些bug，工作疏忽和需求变更[程序实现的可行性，和需求考虑不充分]，进行前端代码的修改。
导致在制作和上线的时候已经存在两个版本。



阅读全文

]]> http://www.lusisi.com/?action=show&id=85 转载 2009-09-22 04:40