让IE支持PNG格式的JS库

介绍
http://www.schillmania.com/content/projects/png/
Demo
http://www.schillmania.com/projects/png/

原理
1.为PNG格式的图片建立一个完全相同的gif格式,在编码里面使用gif图片
2.利用IE支持DXImageTransform.Microsoft.AlphaImageLoader滤镜来使用PNG格式转换gif为png图片,并将png图片作为背景显示,首先检测浏览器,接下来判断class为png的元素,完成替换

使用
1.在<head>调用png.js

<script type="text/javascript" src="png.js"></script>

下载地址:http://www.schillmania.com/projects/png/png-demo.zip
2.用类png标记需要使用png格式的地方
首先建立两张同样的图片格式为别为png和gif,一是类库需要,二是防止IE被禁后破坏视觉效果
前景图片

 <img src="your-image.gif" class="png" style="width:XXXpx;height:YYYpx" />

背景图片

<div class="png" style="width:xxxpx;height:xxxpx;background-image:url(your-image.gif);background-repeat:no-repeat">
</div>

3.在</body>之前加入

 <script type="text/javascript">
 pngHandler.init();
 </script>

总结
这样做png图片使用起来就方便多了,不用重复的去使用IE滤镜,比起手动使用IE滤镜同时加载的图片数量加倍,增加并发连接数

css处理浏览器兼容技巧总汇

css里关于浏览器的兼容问题一直困惑着我们初级的css用户(高手可直接绕过),这里想根据我前段时间拜读的李超的书籍《css网站布局实录》里学到的有关处理浏览器兼容的问题,根据我前段时间在公司minisite项目里碰到的一些问题和解决方法分享给大家。浏览器兼容性的问题,我想一直是困绕我们设计师的棘手问题,css的难点就在这里。解决好这个问题,我想你的css水平一定会得到大步的提升。

自从W3C标准推出以后,现在新的一些浏览器多多少少在使用这套web的新标准,但在各自对新标准的执行上并不统一,这就给我们设计师带来很多的问题。目前世面上主流的浏览器还是IE和firefox,这两个浏览器几乎占领着整个浏览器的市场。而IE下面大部分人在用IE6和IE7两个版本的浏览器,而这两个版本对css的支持有非常多的差异之处,这种差异是最需要我们设计师注意的,因为它跟我们的日常设计息息相关。我在实际的制作过程当中遇到的问题有绝大部分是出现在IE6和IE7的css兼容性问题上。IE6,IE7在加上firefox2.0,如果能把这三个浏览器都搞定了,也就基本上满足95%以上的用户了。在下面我列举了一些我在项目里碰到的实际的问题和解决的方法,其中有很多是css高手GL的处理思路和解决方法,非常值得吸取和借鉴,因为这为我们解决今后遇到类似的问题提供解决问题的思路。建议先阅读《css网站布局实录》这本书,现在出了新版本《css网站布局实录2》,要仔细阅读哦,相信我,的确能让你收益非浅。下面列举一些事例,希望能给大家提供一些借鉴:

A: IE6/IE7 div等块对象默认具有高度
下面图A是IE6里的一个div,  宽度是420px,没有设置高度, 其在IE6/IE7浏览器里,默认DIV具有了一个br的高度,图B是在firefox2.0下显示,div无高度。这样就给我们设计师在实际制作过程当中带来问题,因为有的时候我们要设置一个div高度为5px,用于放置一张背景图片,在IE6里就会有问题。IE6的显示保持在了最低高度一个br,如图c,在同样设置height:5px;情况下,上面是firefox显示下面是IE6。解决的方法是在div里设置一下line-height:0px;


图A


图B


图C

B: IE6下块对象默认的3PX现象
如图,上面是IE6.0里的显示,下面是IE7.0和firefox2.0,红色div设置为float:left;图片在宽度正好的情况下,在IE7和firefox下可以上去,而在IE6里面就被显示在了第二行。这就是IE6的著名的3px现象,当一个对象设置为左悬浮,这个 块对像跟它右边浮上来的对象默认具有3px的margin, 解决的方法是针对于IE6,在css里写一个css hack, 如在左边的div上加:margin-right:0px!important;margin-right:-3px;!important这个标记IE7和firefox是支持的,而我们伟大的IE6却视而不见,我们就可以根据这个特点,让左div针对IE6有一个-3px的右margin,而IE7和firefox为0。

有兴趣的可以拷贝下面代码自己请手去试一下:(考虑在blog里显示的问题,下面代码人为增加了一些空格,请copy的时候自行删去)
< div style=”width:502px;height:80px;border:1px solid #000;”>< div style=”width:250px;background-color:#ff0000;height:60px;float:left;margin-right:0!important;margin-right:-3px;”>< /div>img< /div >

C: 图层float实现页面布局,遇到的浏览器问题
这是我在具体做项目时实际遇到的问题,解决这个问题的思路和方法来自GL的支持,我把它整理出来分享,希望能给你有所帮助。

看下面图1,现在一共有divA, divB, divC, divD, divE这么5个div, 目标是让divD和divE移上去,跟divA其行显示,达到图2的效果。我在当时实现的时候,在divA,divB,divC里分别加上style=”float:left;clear:both”,这样在IE6和IE7里实现了图2的效果,但在firefox里就出现了图3的显示,我在当时试过很多方法, 如在div4里写float:right;让div4有悬浮,想让它上去,这样只能跟divC并列显示。对css感兴趣的人可以先自己试试,其实方法很是简单,给div4和div5分别设置个左边距如margin-left:380px;就解决了。这个例子解决起来其实很简单,这里是提供一种解决css兼容问题上的一种思路。


图1


图2


图3

D: 如何让图片在div里左右居中,上下居中
如下图1, 我们要让图片在IE6,IE7和firefox下图片相对div左右居中,上下居中来显示如图2,这是众多设计师可能都要面对要解决的问题,因为这种方式我们经常要用到。这里把解决的方法分享给大家,要想让图片左右对齐,我们可以在div里写入”style:text-align:center;”,左右居中问题好解决,现在看一下,IE6,IE7和firefox里,图片都已经是左右居中了,技术的难点是如何让图片在三个浏览器垂直居中。大部分人可能会考虑使用vertical-align:middle来使图片居中,加上去看看没有出现效果,这里我们针对图片设置如下代码:style=”_margin-top: expression(( 300 – this.height ) / 2);发现在IE6下效果实现了,再看看IE7和firefox, 没有变化,这里我们针对IE7和firefox来设置,在div里写入line-height:300px;vertical-align:middle,发现IE7这时候也有效果了,这里的line-height:300px;是根据div的高度定的,如果div的高度为100px,则这里设置line-height:100px,这里我们设置为300px。那么,这时候IE解决了,看一下firefox图片还没垂直居中,再对div增加样式:display:table-cell,现在再看看firefox也好了。


图1


图2

参考代码:
< div style=”width:300px;height:300px;text-align:center;vertical-align:middle;line-height:300px;border:1px solid #ccc;display:table-cell”>
< img src=”aaaa.jpg” mce_src=”aaaa.jpg” style=”_margin-top: expression(( 300 – this.height ) / 2);” />
< /div >

E: IE捉迷藏现象
捉迷藏问题是IE非常典型的对css支持上的bug, 问题主要出现在IE6浏览器。当div嵌套结构稍微复杂时,就会出现捉迷藏情况。如下面例子:

起初我们写上比较简单的结构代码,如下:

上面代码非常简单,现在我们在里面尝试增加一些内容:

为了让bug显示,我们给上面的xhtml写上css样式,如下:

然后我们到IE7.0 firefox里先后去预览一下,显示一切正常,如下图1。

图1

我们再到IE6去打开它,发现在刚刚打开的时候,看到如下图2的情况,右侧的内容奇怪的消失了。全选页面内容,发现右侧内容是存在的,如果用鼠标移到链接上面,右侧的内容又跑了出来,这就是IE6著名的捉迷藏现象。不仅在目前事例中,在其他情况下也可能出现。造成这种现象的具体触发机制目前还不能合理的归类,至今为止,这种情况只在IE6下出现。

图2

解决这个问题的方法,可以参考positioniseverything.net的网站专家给出的一些建议:
a: 在代码的下面使用一个带有< div style=”clear:both;”>< /div >这样的div来清除悬浮
b: 如果有可能,给layout对象设定width和height
c: 可以尝试给layout和left对象使用position:relative
d: 对layout使用line-height属性,强制浏览器对内容文字进行行距调整。

以上是提供解决浏览器问题的一些技巧,positioniseverything.net网站专家的建议,更重要的是要养成良好的编码习惯来预防捉迷藏情况的发生。

一些问题是浏览器自身的问题,遇到问题发生无法避免的情况下,那就要考虑使用一些css hack了,以下是针对IE6,IE7和firefox可以使用的一些css hack:
a: 针对区别IE6 和IE7/firefox, 可以在要区别的代码后面跟上!important
b:针对IE7/firefox 在css的前面加 [xmlns], 如下面的left属性,如果我想要只针对IE7/firefox起作用,写法如下:
[xmlns] #left {
 float:left;
 border:4px solid #999;
 padding:5px;
 width:200px;
 height:200px;
}
c: 只针对IE6起作用,可以在css前面加* html,如:
* html #left {
 clear:both;
}

d: 只针对IE7起作用,在css里前面加*+html,如:
*+html #left {
 clear:both;
}

解决IE6、IE7、Firefox兼容最简单的CSS Hack

很早就看到过解决方案,发现这个方案还是很可靠的。当然,唯一的缺点就是每一个属性都要去Hack,但我在很多实践中,只用‘修正’1-2个属性就可以了。

具体写法很容易:

#someNode
{
position: fixed;
#position: fixed;
_position: fixed;
}
  • 第一排给Firefox以及其他浏览器看
  • 第二排给IE7(可能以后的IE8、IE9也是如此,谁知道呢)看
  • 第三排给IE6以及更老的版本看

最好的应用就是可以让IE6也“支持”position:fixed,而且,,可以做到不引入JavaScript代码(仅用IE6的expression),我这里有一个现,CSS如下写:

#ff-r
{
position:  fixed;
_position:  absolute;
right:     15px;
top:       15px;
_top:       expression(eval(document.compatMode &&
document.compatMode=='CSS1Compat') ?
documentElement.scrollTop+15 :
document.body.scrollTop +
(document.body.clientHeight
-this.clientHeight));
}

是不是很方便:)

CSS hacks与争议

1、说明本文阐述了我们发现的在用CSS设计中有用的解决方案。

2、浏览器特定的选择器

当你想在一个浏览器里改变样式而不像在其他浏览器中改变时,这些选择器很有用。

IE6以下

*html{}

IE 7 以下

*:first-child+html {} * html {}

只对IE 7

*:first-child+html {}

只对IE 7 和现代浏览器

html>body {}

只对现代浏览器(非IE 7)

html>/**/body {}

 

最新的Opera 9以下版本

html:first-child {}

Safari

html[xmlns*=””] body:last-child {}

要使用这些选择器,请在样式前写下这些代码。例如:

#content-box {
width: 300px;

height: 150px;

}

* html #content-box {

width: 250px;

}

/* 重写上面的代码并且把宽度改为250PX

在IE6以下版本中适用。 */

3、在IE6中使用透明PNG图片

IE6的一个很难处理的BUG就是它不支持透明PNG图片。

你可能需要用一个重写的CSS的滤镜来解决这个问题:

*html #image-style {

background-image: none;

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=”fil

ename.png”, sizingMethod=”scale”);

}

4、去掉连接虚线框

当你点击链接时,Firefox会在链接周围产生一个虚线外框。

 

这个很好解决,只需在a标签中添加outline:none就可以了。

a{

outline:none;

}

5、对inline元素应用宽度。

如果你对一个inline元素使用宽度,它将只在IE6下起作用。

所以的HTML标签要么是Block的要么就是inline的。inline属性的标签有<span><a><strong>和<em>Block标签包括<div><p><h1><form>和<li>

你不能控制inilne标签的宽带,不过有一个方法是把标签属性从inline改为Block。

span{

width:150px;

display:block;

}

应用display:block能够把span标签变成block标签,从而控制它的宽度。

6、使一个固定宽度的网站居中。

为了让你的网站在浏览器中居中,可以为最外层Div添加position:relative属性,然后将margin设为auto。

#wrapper {

margin: auto;

position: relative;

}

7、图片替换技术

对于头部来说,永远是最好用文字而不是图片。在你必须要用图片的某个特殊地方最好使用隐藏文字的层的背景图片。这对于屏幕阅读和SEO非常有用,尽管依然使用很普通的文字,这可以联想到所有的优点。

HTML:

<h1><span>Main heading one</span></h1>

CSS:

h1 {

background: url(heading-image.gif) no-repeat;

}

h1 span {

position:absolute;

text-indent: -5000px;

}

正如你所见,我们对H1标签使用普通的HTML代码,用CSS来将图片替代文字。Text-indent把文字放到左边5000像素处,从而用户看不到它们。

8、最小宽度

IE的另外一个Bug就是它不支持min-width属性。min-width确实非常有用,特别是对于100%宽度的可变模板来说,因为他告诉浏览器停止收缩。

对于除IE6以外的所有浏览器来说你只需min-width:xpx;例如:

.container {

min-width:300px;

}

要让这些在IE6下起作用的话你要添加额外的努力!你需要创建两个DIV,一个包含着另一个。

<div class=”container”>

<div class=”holder”>Content</div>

</div>

然后你需要设置外面层的min-width:

.container {

min-width:300px;

}

现在又要IE hack起作用了,你需要写下以下代码:

* html .container {

border-right: 300px solid #FFF;

}

* html .holder {

display: inline-block;

position: relative;

margin-right: -300px;

}

当浏览器窗口调整外层宽度来适应直到它缩小到border的宽度时,这个时候它就不能够在缩小了。而holder层也会停止收缩。外层的边框宽度变成了内层的最小宽度。

9、隐藏水平滚动

要去除水平滚动条,可以在body中插入overflow-x:hidden属性。

body {

overflow-x: hidden;

}

这在你决意要用一个比浏览器款的图片或Flash时很有用。

翻译说明:这是Solid State Group网站上的一篇很友好的文章,解决了我的很多问题。在此我翻译其文,并对原作者表示非常感谢!原文地址: http://www.solidstategroup.com/page/1592

WEB项目前台开发管理的思考

WEB前端,指的是:交互-设计-制作三个角色的组合。
项目管理,指的是如何把需求分解成任务,分派给合适的人并正确的完成任务。
需要把握的是:
1.需求分析
需求分析的目的是评审需求的可行性和优先级,这里就需要足够的项目经验了。
可行性:
关于需求本身是否合理,是否是一个值得去做的需求。
需求的完整性,是否是一个完整的,可以进入研发规划的需求。
其实还有一个需求的充足性,将零零散散的小运营需求合并为一个大的需求,便于开发,让任务列表清晰简洁,维护风险降低。
再次是需要后台开发的,进行沟通,是否下一个研发线能评审通过和按时跟进。

优先级,优先级的参考依据是重要性和紧急性。画出一个二维坐标轴来,就能清楚的分辨出。
1. 重要而且紧急的需求当然优先级最高。
2. 重要的其次
3. 紧急不重要的再次(可能就要pass,很少见)
4. 不紧急而且不重要的最后(基本没有)

而根据产品的性质不同,有可以在以上基础上再进行划分,比如平台类的,增值类,运营类的(bug的修复,体验的小优化),日常维护类(定期的运维需求,如图片的设计,固定模式的活动需求等等),可以将他们填充在二维坐标的四个象限中。

2.分解任务
如何把需求分解成为一个个可行的任务,一般来说就是交互-设计-制作一条线的滚动任务。任务包括内容和开发周期。
1.新版本的研发需求,需要立项规划。
2.有固定模式的活动类需求,需要立项规划。
3.活动类需求,这类属于完整的规模相对较小的项目,但是五脏俱全,都需要交互-设计-制作参与。
4.其次就是很多的运营类需求,这类需求很杂,而且零零碎碎,不是三种角色都参与的那种。

3.任务分派
任务分派的目的是在前两个的基础上,达到任务在正确的时间分派给正确的人。人和人的能力差距是存在的,所以将重要的难度较高的需求分给更加有能力和经验的人,根据重要性和难度依次排序进行分派,还有就是熟悉的任务分给熟悉的人(某人一直在跟进这方面的需求)。
任务的时间分派,根据任务的重要级别和规模依次递减。具体时间需要多方沟通而定,但是根据以往的任务完成情况,可以评估其产能,使用多少人/天的单位也是能粗略得到时间点。

4任务质量评审
这里就是任务完成后,是否达到要求,表现为
基本质量:交互的完整性,设计稿的完整性,制作的完整性
高级质量:这些不好估量,需要根据具体领域的不同做不同的评判,比如交互的体验性强,表现的视觉传达到位,制作的易于开发,还原设计稿,打开速度提升等等。更多的是属于技术类小组的质量评估。

这只是项目管理中最常见的一些点,其他还有很多很多的危机处理的办法和项目流程的规范化,考核制度的完整化等等,希望有此经验的您多多交流。

Web前端开发工程师的定位

这篇文章写给对 Web 前端感兴趣的朋友。另外 还有有一篇文章:Web 前台开发工程师技能列表前台开发工程师必备工具集合,也值得一看。

先给前台开发工程师的工作下个一句话定义:运用前端技术,实现体验的良好传达。如果在前面加上 Web,那么是针对 Web 这个领域的,主要是互联网,也可以将移动通信网络和其他传媒网络(比如IPTV)包含在内,因为其理念是一致的。

现在要在未毕业的学生中找到一个符合技能条件的 Web 前台开发工程师可以说是少之又少。而相关领域的从业者,又因为不被重视、干杂活、薪水低等原因,觉得选错了行当,又停止了在这个方向上的努力学习。最终导致企业招不到一位满意的 Web 前台开发工程师。这涉及到两个定位的问题,即 1) 企业如何给Web前台开发工程师定位,2) Web 前台开发工程师如何定位自己。前者等下次有机会再谈,先讲后者。

Web 前台开发工程师如何定位自己

首先,这是很有前途的工作。百安居的卫哲曾经对大学生择业提出这样的建议:第一选择新行业,第二选择新企业,第三选择新部门。互联网行业相对传统行业,算是新行业;现在创业公司很多;Web 前台开发工程师又是一个新的岗位。中国的 Web 前台开发工程师正在起步,会有很好的发展。

然后,想一下自己是否适合和喜欢这份工作。Web 前台开发工程师并不是设计师,我更倾向于将这个岗位定位为开发人员。这个岗位上每天接触的更多的仍然是代码、代码、代码。如果你喜欢的是设计,那么应该适当调整自己的学习重点。Web 前台开发工程师应该是那种完美主义者,或者有一定程度洁癖,天蝎座较佳,更像程序员。术业有专攻,自己多想想自己的职业规划。

最后,通过努力找到好的雇主。如果你将自己定位为 Web 前台开发工程师,那么去投靠对该岗位有一定认识的公司比较合适(推荐一下淘宝)。在这样的公司里面,会有明确的职位说明和职责范围,以及良好的培养计划。在这样的公司能够有比较好的发展。

但是,如果你现在还不具备应有的一些技能,那么也可以从“美工”开始接触起。起码几年之内,这个岗位的空缺还是很大的。在这样的岗位上,卧薪尝胆个一两年,同时注重自身知识水平和思想的提高,对 Web 前台开发工程师就更近一步了。

关于技能

一般来讲,企业会更倾向于选择复合型人才(aka. T型人才)。基本上,我觉得 Web 前台开发工程师所需技能大致如下:

  • (X)HTML + CSS,从入门到精通
  • JavaScript,基本的 Ajax 和 framework
  • Semantic + Accessibility,主要是思想、理念上
  • 浏览器(或者相应播放器)的渲染/重绘原理
  • 其他 RIA 相关技术和理念

看看自己的知识结构,是 T 的一横不够广,还是一竖不够深?

其他

最后提一下关于企业对于 Web 前台开发工程师的定位问题。主要是三个:a) 是否需要? b) 明确职责,c) 培养计划。这些以后再谈吧。

CSS设置IE6中容器高度BUG

在IE6中设置display:block的空容器一个较小高度时,如<p style=”height:1px;”></p>,会发现其高度不能小于某个值,比如在字体大小为12px时这个值是15px,在浏览器默认字体大小时这个值为19px,你可以通过调整IE6中的“查看>字体大小”来观看这个高度的变化。解决方案:

  1. 设置font-size:0,但是这个容器的高度最小为2px,所以没有办法实现高度为1px的效果
  2. 在容器中增加内容或其他空标签,如&nbsp;、<br />,并设置line-height:0,但该容器会存在一个和其父容器字体大小有关的外边距,这个问题在IE7中也会出现,
  3. 在容器中增加内容或其他空标签,同时设置font-size:0,line-height:0
  4. 上述解决方案在某些字体下会有非常大难以预料的变化,
  5. 设置zoom:0.03,这个会受到font-size、font-family的影响而显示不同效果,并且在IE7下不可见,
  6. 设置overflow:hidden,这是目前看到的最完美的解决方案,

IE, FireFox, Opera 浏览器支持Alpha透明的方法

先请看如下代码:
filter:alpha(opacity=50);       /* IE */
-moz-opacity:0.5;              /* Moz + FF */
opacity: 0.5;           /* 支持CSS3的浏览器(FF 1.5也支持)*/

简单解释,IE使用私有属性filter:alpha(opacity),Moz Family使用私有属性-moz-opacity,而标准的属性是opacity(CSS 3, Moz Family部分支持CSS3)。后面的数值是透明度,使用百分比或者小数(alpha(opacity))使用大于0小于100的数值,其实也是百分比)。

从上面的代码中你没有看到Opera。没错,Opera还未支持标准的opacity从Opera9开始支持CSS3的opacity了,也没有其私有的可支持Alpha透明的属性。

但是,我们知道,Opera是支持Alpha透明的PNG图片的(当然Moz Family也支持)。所以我们可以使用背景图片来实现Alpha透明效果。

例子:http://www.omemo.net/neo/lab/alpha/

关键在于:

background: transparent url(alpha80.png) left top repeat!important;
background: #ccc;
filter:alpha(opacity=50);

既然Moz Family支持Alpha透明的PNG,所以我们没有必要使用其私有属性了。当然,你可以使用标准的opacity,但别同时使用Alpha透明图片和opacity,这样的话就成了两者的混合了。你可以把上面的例子下载过来,然后/*opacity: .5;*/的注释看看。

这部分内容来自于:http://www.omemo.net/neo/blog/?p=87

2、如想实现父标签透明,而子标签不透明,采用对于采用png透明的父标签来说不存在问题,如果采用alpha值无论ie还是非ie都存在这样的问题,css声明了position透明标签包含的内容都透明。

例如:

<div id="out"><div id="in">不透明<div><div>
out{
position: absolute;
top:0;
left: 0;
width: 100%;
background:url(../img/alpha30.png);/*非ie*/
filter:alpha(opacity=30);/*ie*/
}
in{
background:#fff
}

这个时候看到in也是透明的

hack方法:增加一个子标签,采用css hack 使其在ie下充满整个父标签,并使其透明,由于透明部分和不透明部分是兄弟关系,所以不影响。

<div id="out"><div id="in">不透明<div><div id="ie">不透明<div><div>
out{
position: absolute;
top:0;
left: 0;
width: 100%;
background:url(../img/alpha30.png);
z-index: 100;
}
in{
background:#fff
}
*html out{
background:out;
}
*html ie{
position: absolute;
top:0;
left: 0;
width: 100%;
height:100%;
background:url(../img/alpha30.png);
filter:alpha(opacity=30);
z-index: -1;/*让其位于in的下面*/
}

前端开发工程师技能列表

要打造一流的Web产品开发团队,在团队成员基础能力上一定要下功夫。对于Web前端产品开发来说,仅仅掌握Web1.0时代简单的”网页套接”是完全不够的。我结合自己的团队配备,特此罗列了Web前端产品工程师所涉及的技能列表如下:

通过许多实际项目,个人认为一个完备的前端产品开发团队,必须拥有如下的人才配备,也希望大家补充:

  • 团队全体成员达到所有技能中的a级标准
  • 团队全体成员必须掌握两项技能中的b级标准,并保证所有的b级标准在该团队中有50%以上成员能达到
  • 团队全体成员必须掌握一项技能中的c级标准,并保证所有的c级标准在该团队中有25%以上成员能达到

具体技能描述:

  • 【必备】UserInterface
    1. PhotoShop/Fireworks Design
      a – 配合美工将草图形成具体的符合WebPage的设计
      b – 有快速制作分层高品质PSD、PNG的能力
      c – 能迅速将PSD、PNG的内容构思成div+css或者table等HTML代码
    2. Flash Design
      a – 基本动画效果
      b – 复杂的交互体系设计,了解第三方swf辅助设计软件
      c – 复杂的交互体系设计以及较强的对各类外埠资源(PNG、JPG、MP3、WAV等)的整合能力。精通部分第三方辅助设计软件(AE、SwishMax、Swift3D等)
  • 【必备】Browser-side (Web Application)
    1. XHTML/CSS
      a – 基本的layout实现
      b – 严格跨平台的layout实现以
      c – 优雅的HTML code,尽可能符合标准并有SEO的考虑因素。在任何平台、浏览器下基本保持一致。不要求了解各种CSS的hacks,但要求知道遇到问题应该如何查阅资料以在第一时间内解决。能够为JavaScript开发人员提供最好操作的DOM结构,让JS开发人员在开发的时候认为”一切都已经准备就绪了”,而不是”捉襟见肘”。
    2. JavaScript/Ajax/DOM
      a – 基本的DOM操作,了解AJAX,可以实现数据通信
      b – 基本的DOM操作,能写高效率的OOP代码,以降低维护成本
      c – 基于需求,进行不同的开发,选择合适的框架,做到代码效率最高,用户体验最好,代码下载量最小,并且可以在单独甚至更多产品线中最大限度重用代码
    3. Flash Developement
      a – 基于Timeline的ActionScript操作,能实现简单交互
      b – 掌握a外,能实现数据层通信(与服务器以及本地SharedObject)
      c – 精通AS1-3,能根据需求进行各类RIA开发。无论是要求支持FlashPlayer8的,还是FlashPlayer9的,都能做到开发效率最高、灵活性最大(比如对HTML层的接口设计,等等)。
  • 【必备】Client-side (Desktop Application)
    1. Apollo
      a – 产品级的封装,基本技术了解(如何打包、如何加入HTML和JavaScript等)
      b – 掌握a的同时,能利用Apollo的API独立设计、开发OS的文件I/O功能。
      c – 掌握基本技能的同时,对”3D概念体系”有所认知。这里”3D”即:Design(设计)、Development(开发)、Deploy(产品部署)。能用Apollo
    2. Windows Presentation Foundation、WPF/E(Silverlight)
      (待定,欢迎补充)
  • 【增补】Server-side (修改:经考虑,这个技能不参与评级)
    本来列举了”1、Server端简单的技术、脚本”和”2、MediaServer(Red5)接口”作为”Web前端工程师技能列表“的一种(服务器、数据逻辑层技能的)评判标准。但似乎很多朋友对于前端工程师是否应该掌握Server端技能的必要性表示怀疑。确实,要掌握好上述的展现层技能不是意见容易的事情,而且前端工程师的确非常辛苦。但是,站在另一方面来说,辛苦的原因是什么,我不知道在你日夜奋战div+CSS的时候思考过没有。就我的经验,前端的辛苦在于以下几个方面:

    1. 重复劳动多,大量的div+css都是重复的,即便可以复制粘贴,但几千行的div海洋中去寻找一个入口恐怕都非常痛苦
    2. 需求变更多,往往你折腾几个小时终于把跨平台问题解决好了,而且在IE6、7和Firefox下面都能显示同样的效果了,甚至连JavaScript交互都已经快搞定了。突然上面说需求要变。这无疑是莫大的痛苦。

    也许表面上看,这跟Server端技能无关,但我觉得有好的Server端的意识,一定会有所帮助(当然不可能解决所有的问题)。毕竟信息结构和数据库是密切相关的,而Server是连接数据库的唯一渠道(至少大多数B/S应用是如此)。掌握Server端的基本技能,对于同逻辑层开发人员设计接口是非常重要的。而且HTML表现层在开发时与数据的分离,也与Server端的各种模板技术有关。例如PHP中的Smarty模板(我曾经用的)、jsp的model2概念等等。HTML结构如何设计,如何让HTML重用,甚至在HTML层进行OOP的开发(我现在在新产品线中设计的前端开发流程),都需要Server端的支持。最起码,你要告诉php程序员你需要什么。如果你完全对PHP一无所知的话,那也无从谈起了。
    此外,对于创业团队,往往人手非常有限。为了让运营成本降到最低,所有的技术人员都有义务对Server端技术有所了解。如果为了修改一个网页的标题还要跑去喊PHP程序员连接Remote Server的话,那实在是增加了整个公司的运营成本。
    总结:我认为,可以不了解技术细节,但应该知道原理,最好能掌握一两套设计思想(毕竟数据逻辑都在这里走,光看HTML和JavaScript,对人的见识还是有局限的,这种局限限制了我自己很久的时间),那将是一比宝贵的财富。

  • 【增补】Mobile-side(不参与评级)
    1. 看到很多朋友留言说前端工程师没前途,我在想,同时掌握移动设备的技能是否也是拓展前途的一个必要性?这里再多说几句,关于技术人员的前途,目前在国内确实得用”惨淡”来形容。浮躁的氛围让技术人才往往过早放弃了自己的技术生涯,而尔虞我诈的整体道德水平也让单纯的技术人员痛不欲生(我身边太多了,恩,不说具体细节了,呵呵)。
      作为一个技术人员,开发人员,在保持纯粹地敬业心态(这是前提,这么没有,啥也别谈)外,更要学会如何保护自己,如何壮大自身,社会不会同情你,只有你自己才能保护你自己。
    2. Flashlite
      (待定,欢迎补充)
    3. Java?
      (待定,欢迎补充)

20 个精选优秀CSS 网站(2007年12月21日)

精选了20个比较漂亮的XHTML+CSS布局网站,推荐给喜欢网页设计的人,无论是做博客模板还是做网站设计,在设计理念、色调、导航条、按钮、排版布局方面,都有一些值得借鉴的地方。

1、competitious.com
competitious.com
2、carawilliams.com.au
carawilliams.com.au
3、qodo.co.uk
qodo.co.uk
4、tulumarka.com
tulumarka.com
5、egolounge.de
egolounge.de
6、luisalarcon.com
luisalarcon.com
7、simplebits.com
simplebits.com
8、456bereastreet.com
456bereastreet.com
9、buzzrecruitment.co.nz
buzzrecruitment.co.nz
10、menumania.co.nz
menumania.co.nz
11、justinshattuck.com
justinshattuck.com
12、tanyamerone.com
tanyamerone.com
13、thecicak.com
thecicak.com
14、magicsoul.net
magicsoul.net
15、mindmeister.com
mindmeister.com
16、nclud.com
nclud.com
17、refresh-dc.org
refresh-dc.org
18、spousenotes.com
spousenotes.com
19、webdesign.activo.cz
webdesign.activo.cz
20、whoisjengordon.com
whoisjengordon.com