Dangbao's Blog

谈页面重构的团队协作和后期维护

为什么写这篇文章?因为我看到越来越多的公司重构职位要求注重这方面。一个公司的网站一旦成型以后,就很少去做大的调整和改版。剩下的就是缝缝补补、改改换换。恰恰是这些看似是小问题的问题,前端人员发愁了。在原有结构上替换某一处的内容还可以,但是一旦涉及到新需求必须改变原有页面结构的时候,矛盾出现了。原来的结构是深思熟虑、精心编排的,而如果确定需要改动的话,很可能影响甚至破坏页面其他区域。而且,这个时候的页面的静态动态已经成型,更改只能是页面和程序一起来协作进行,使得工作效率变的很低,测试也有点麻烦。改的时间也不一定是你刚写完就改,也许是放下好几个月后又来,又怕写的样式和别的地方冲突,又担心写的东西不兼容,结果可能是越改越乱,虽然页面表现上没什么问题,但是从代码上讲,已经打破了原来那么规整严谨的书写。对于一个专业的页面重构人员,这么情况实在是很难受啊。那么,如何尽量避免后期维护出现的不利因素呢?现在我就来谈谈我自己的感受:

  • 1.初次重构页面需要考虑良好的兼容性、扩展性。
    这点可能是最重要的,首页的各个元素必须有明确的标识规范,避免以后维护样式重复。各个容器相对独立,尽量少出现模糊定义(如.wrap div{}等)。规划足够公共属性(如.none{display:none}),必要时候方便调用。
  • 2.提高手动书写代码能力。
    这个不用多说,此技能必须提高,很多的时候就需要你记住属性的,忙的时候你大概也没时间去DW查某个属性怎么拼写。
  • 3.丰富经验,有联想性,预先阻止出现的BUG。
    经验丰富的CSSER更改起来总是能用最小的改动获得最佳的效果。就是要在不断更改中增加经验值。有联想性就是没法测试的时候,会联想页面可能出现的样子,有可能出现浏览器BUG的地方预先写好阻止情况出现的代码。这个有点抽象,经验越深,体会越明显,不能强求。
  • 4.提高团队协作能力。
    这个是针对整体的,个人带动整体。更改内容前互相沟通,找出最有效而且各个岗位修改顺手的更改方式。避免因为实现某一效果而导致一系列工作效率降低。
  • 5.说服BOSS不改大的结构。
    这点貌似有点困难,不过也不是没有可能的。毕竟要改动大的东西一般是首页,如果你能说服改动可能出现的问题,懂行的也许为了追求唯美可能放弃,当然也有可能BOSS觉得你能力不行,此招慎用!

推广新方式之微博客

为什么题目这样写?原因很简单,就是我在玩微博客的时候经常见到一些人发表个诱惑的标题和一串网址。虽然有些题目比较让人厌烦,不过一些发现新鲜事物并乐于分享的人还是会发好东西。说到这里,相信你也会有点想法。也许你想问,那么多的微博客,还一个个去发啊。哈哈,你要真这么想,还说明你真的不了解微博客。

所谓“微博客(micro-bloging)”就是一种非正式的迷你型博客 ,它是最近新兴起的一个web2.0表现,是一种可以即时发布消息的类似博客的系统,它最大的特点就是集成化和开放化,你可以通过你的手机、IM软件(gtalk、MSN、QQ、skype)和外部API接口等途径向你的微博客发布消息。

微博客的另一个特点还在于这个“微”字,一般发布的消息只能是只言片语,像Twitter这样的微博客平台,每次只能发送140个字符。
提供微博客服务的网站有:
饭否:http://fanfou.com/
叽歪:http://jiwai.de/
滔滔:http://taotao.com/
做啥:http://zuosa.com
嘀咕:http://digu.com[/code]现在的各家微博都提供了相关的插件,只要你设置绑定了你的手机、IM软件和API接口,都能实现“一呼百应”。比如你更改了自己的QQ签名,这些网站上就会自动发布一条你签名内容的微博文。当然他们也会支持一些SNS网站的状态或者记录等方式来更新你的微博。好了,如果你还没有玩过,赶紧去体验一下吧。
最后说一点相关的事,偶然间发现了新版QQ2009有好友印象功能,类似于开心网,以TAG的形式展现。但是我也发现了一些“有心人”给别人的评价里居然写着自己网站网址或者推广某产品的联系电话。试想一下,类似这种不好的体验,主人看到肯定会删了此评价。但是,如果主人一天不看到,那么此AD就增加一天的曝光度。当然,我们也相信,绝大部分有洞察力的人对此SPAM是不予理睬视而不见的。

WY纵向循环切换焦点区域

门户近来比较流行的一种TAB切换,版式上左面是一块大的焦点区域,一般是放一张吸引人眼球的图片。右面则是现实与图片关联的标题。自动纵向顺序切换TAB内容,当然鼠标经过任何一个右边的标题,左边会跳到与之相关联的焦点区域。

卸载软件后IE中不能显示PNG图片

由于对fireworks cs4的使用感觉不是很顺手,今天决定先删除掉。顺利删除了以后,突然发现在IE浏览器中,所有的PNG后缀的图片全都不能正常显示了,全部显示的是叉。然后在非IE浏览器中又是正常的。想起了前些日子,有个群友说他卸载了photoshop后png也不能看了,呼叫了半天也没找到那人。于是开始自己查资料,都说是卸载软件时候把系统的PNG带走不,而且在“文件夹选项”中也没有改扩展名的文件了,我根据网上说的在注册表中添加字段属性了,但是还是没能成功。正当我要开始怀疑本人RPWT的时候,看到有人说重新安装flash_player就OK了,抱着试试的心态我去adobe官网下载了最新的Adobe Flash Player version 10.0.22.87,果然没问题了。哈哈。特此公布一下,因为我看到有的朋友始终没有解决这个问题,不是重装浏览器就是恢复系统或者重装系统,可真是够折腾人的。希望看到的朋友能顺利解决问题。

IE和FF背景图片居中的偏移差异

今天在做公司的一个企业站,用的是一个左右有固定宽度阴影的图片做大背景。让中间的内容部分看起来很充实很有质感,这也是企业站常用的设计方法。记得在刚学网页用TABLE布局的时候就弄过这样的页面。过去基本不会考虑浏览器尺寸和兼容性的问题,所以几乎很快就做好了。在考虑浏览器兼容和分辨率大小的情况下,用XHMTL布局就发现了这样的差异:IE和FF对大背景图片居中的解释居然不同,其它浏览器则和IE的显示相同。在消除了hmtl、body、div等的默认属性后,我开始这样写:

body{background:#f3f3f3 url(../images/bg.gif) repeat-y center;}

按照这样的描述,背景图片是随分辨率和窗口的大小的改变后居中显示。可是我发现在IE中是正常的,FF下却明显的偏移了2px。开始我以为是IE和FF解释的容器宽度不同导致的,但无论我如何更改容器宽度,在FF下,容器的边和背景始终贴不到一起。添加属性overflow:hidden也不可以。于是我又修改了写法:

html{background:#f3f3f3 url(../images/bg.gif) repeat-y center;}

显示不正常,尝试添加属性overflow:hidden后,显示居然一致了。当然,你也知道添加了overflow:hidden就不会出滚动条了,所以这还不是解决办法。尝试写overflow-x:hidden;overflow-y:auto这样也不行。所以,问题就在宽度解释上。
我又尝试在body下套一个大容器来包住所有内容。

.page{background:#f3f3f3 url(../images/bg.gif) repeat-y center;}

当然这样依旧不正常,我只好给容器设置一个宽度,然后margin:0 auto使其居中显示。哈哈,终于成功了。

看来,写了宽度以后,各浏览器的解释才会有共同结论。但是,如果页面左右的效果超过了1004px,那就会出现难看的横向滚动条了。所以,本人总结以下两点:

  • 页面宽度要为左右阴影预留足够宽度。就目前主流来讲,宽度不要超过1004(17纯平下的宽度1024px减去滚动条的宽度)。目前网页的宽度流行尺寸为950和960。所以页面外左右的效果大约各在20px-25px之间展示。
  • 在背景上做文章,做可以平铺的背景就不存在这个问题了;或者在页面的背景色和页面外的图片背景过渡均匀也没不会带来麻烦。(可查看各大网站的BLOG模板背景效果)

结构脱离表现-CSS裸奔节

本博加入CSS裸奔节中,勇敢的剔除了CSS样式。
CSS裸奔,就是把网页中的CSS移除,把页面最原始的表现呈现在访问者面前。这个活动意在推动Web标准,倡导使用结构良好、语义明确的XHTML构建网页。即便没有CSS 的支持,层次结构依然清晰明了,只是欠缺美观。
下面是官方声明,可以把它加在顶部以便浏览者明白:[code]

What happened to the design?

To know more about why styles are disabled on this website visit the

Annual CSS Naked Day
website for more information.

[/code]本博使用的PJBLOG的HTML结构不能说是太好,但是如果我重构了页面,以后升级是个麻烦,所以暂时只能这样难看的裸奔吧。
本博也一直在倡导结构化,语义化,标准化的css+xhtml,现在,就让我们把CSS外衣脱掉,看看XHTML的真实结构吧。

系统自带网页字体分析和效果

网页字体显示一直是中文的硬伤,默认的中文字体只有少的可怜的几种。而且字体太大了会有明显的锯齿,严重影响了网页整体效果。正式网页中我们能用的也就是宋体和黑体两种。而且黑体的使用一般也只用在标题或者导航中。所以一直以来,我们想要绚丽的中文字体,只能通过图片来表现。当然也可以用@font-face来显示我们需要的字体,但是对于网络及带宽来讲,字体的体积也太庞大了。如果连英文操作系统的中文显示效果也考虑到,那么我们还是乖乖的用默认的字体吧。定制字体语法:
既然中文字体很难做文章,那么就让我们来看看英文字体的变换吧。下面是本博整理的系统英文字体实际效果对比。

@font-face{font-family:Mistral;src:url(字体文件地址);}

字体:效果:

Trebuchet MS1.Dangbao blog css+xhtml 2009

Lucida Sans Unicode2.Dangbao blog css+xhtml 2009

Geneva3.Dangbao blog css+xhtml 2009

sans-serif4.Dangbao blog css+xhtml 2009

cursive5.Dangbao blog css+xhtml 2009

Georgia6.Dangbao blog css+xhtml 2009

Courier New7.Dangbao blog css+xhtml 2009

Courier8.Dangbao blog css+xhtml 2009

monospace9.Dangbao blog css+xhtml 2009

Tahoma10.Dangbao blog css+xhtml 2009

Arial Black11.Dangbao blog css+xhtml 2009

Gadget12.Dangbao blog css+xhtml 2009

Palatino Linotype13.Dangbao blog css+xhtml 2009

Lucida Grande14.Dangbao blog css+xhtml 2009

Lucida Console15.Dangbao blog css+xhtml 2009

web标准推荐的字体定义方法:

body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }

字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推。
Lucida Grande字体适合Mac OS X;
Verdana字体适合所有的Windows系统;
Lucida适合UNIX用户

网站型网络公司和人员现状

本文要描述的只是建设和经营网站的中小型网络公司,也只针对对有前端人员的公司进行分析。不包含网络硬件以及IDC类型的网络公司。网络软件产品类的也不作评析。大型的网络公司机构设置复杂、人员分工明细,无法相对比。
目前来说,网站型网络公司的类型大致分两种。一种是企业建站型。一种是门户网站型。下面就目前形势下,分别对两种类型网络公司的通常情况做一些个人的分析和观望。

  • 公司职能:企业型公司职能较单一,为企业或个人建设网站以及提供相关网络服务;门户型公司则涵盖的范围广,为企业或个人提供网络信息服务。
  • 客户群体:企业型公司客户群较小,有局限性,是有建立网站需求的公司和个人。门户型公司客户群范围大,是有网络信息需求或网络服务的公司和人个。
  • 员工配置:企业型公司一般是业务+策划+设计+页面制作+FLASH设计+程序。产品注重美观度和效果。所以设计一般是多名。而页面制作则相对要求较低,小公司或者地方城市的公司页面由设计兼写。一般只考虑IE兼容,JS要求不高,一些效果靠FLASH来实现。FLASH有专人来作,水平较高,制作一些较大的导入页、菜单、BANNER等。程序技能要求较低,能编写常用CMS即可;门户型一般是策划+设计+页面制作+程序+产品+推广+业务。各个职位技能要求大致相同,设计一般兼FLASH设计,多为一些BANNER广告位等较简单的FLASH。页面制作负责CSS和JS的编写和效果实现,浏览器兼容要求较高。程序员是多名,水平不同,分配难易程度不同的工作。其它职位不做分析。
  • 薪金待遇:这个是大家最关心的。企业型的设计工资较高(4K起),页面制作一般(3K左右),地方城市是(1K起),程序也一般(3K左右),地方城市(1K-2K)。一般会为了完成项目需要加班,当然项目完工可能调整休息;门户型的设计和页面制作工资大致相同(3K起),程序工资较高(4K起)。公司一般很少加班。当然自身水平高低和薪金是成正比的,也要看公司和HR怎么评价定位你,也是综合综合素质考查吧,当然也要一些运气的成分。

以上只是个人及朋友所处环境介绍分析,并不代表全部网络公司状况,因地区差异、公司规模和定位而异,分析不妥之处还望大家指出,共同研究,希望能给前端人员和新手增加一点了解认知。

仿Facebook自动圆角头像

Facebook最近改版了,突然发现在朋友的头像列表里都是圆角的图片。保存后看到的却是一张直角的图。而最近有朋友也翻译了一篇老外的关于PNG透明背景的文章。于是摘出来效果以供学习。查看了一下它的源文件,结构嵌套达10多层,怪吓人的哦。也看到了这种所谓的圆角效果,其原理就是在图片上用span绝对定位一个圆角效果的透明PNG图片,遮罩后恰恰是我们可以看到的圆角效果了。当然只要修改PNG图片,可是加各种印花效果了。当然不要忘记了老朋友IE6下PNG的不透明问题,如果浏览器低于IE7,则使用一个HTC来修正吧。

自动循环切换Tab选项卡

Tab切换的应用已经很广泛了,通过设置display:none和display:block来实现内容的隐藏和显示。而想实现TAB的自动循环切换的话,就需要写一段循环控制切换,ScrollTime是控制切换间隔时间的,单位是毫秒,使用时可以酌情设置,一般设置值大概是5000。
点击查看演示auto-change-tabs

标签:

android bom border css工具 css布局 display DW ff firefox fireworks fixed flashget html ie6 IETester IE开发人员工具 iis jQuery jq插件 win7 WordPress 分类信息 挂马 无线路由器