前端开发工程师和美工对于网站开发所掌握的知识的区别

摘要：很多公司甚至是多数以互联网网站为主要业务的公司都会把“美工”的概念搞混淆，通常这些公司都会把网页设计+网页制作的人员统称为“美工”。而一家成熟的互联网公司则会把网站方面的人才规划的比较详细，如UED团队（用户体验设计，英文User Experience Design的缩写），其中详细划分成了“交互设计”、“视觉设计”、“前端开发”、“用户研究”、“文案”等职位。今天主要就为了这个话题，与大家分享一下“美工”与“前端”之间的职能区别…
一、 什么是美工？
美工：意为美术工程师(Art Engineer)，一般出身于艺术美术院校的艺术设计专业居多。
根据工作性质美工一般分为平面美工、三维美工、网页美工三大类。
平面美工是由美工用Fireworks 或者 Photoshop 设计出平面外观。
三维美工是由美工用3DMAX等工具进行三维角色模型设计，道具模型设计，环境场景模型设计，包装设计等。
网页美工是美工用Dreamwerver等网页编辑软件把已经设计好的平面效果图，制做成HTML静态网页文件。这里就要求美工用到CSS和DIV技术了，也就是所谓的切图。说的详细一点就是，网页美工一般需要精通PHOTOSHOP/CSS/HTML/JAVASCRIPT等网络语言或工具进行网页框架，色彩，基调，创意等处理。
而这里所说的网页美工，其实是Web1.0时代的产物，那时的网站多为静态的HTML页面，用户使用网站的行为也以浏览为主。而到了2005年以后，互联网进入Web2.0时代，各种拥有类似桌面应用的Web App大量出现。如Gmail GoogleReader 等等。网站的前端与交互由此发生了翻天覆地的变化，网页不再只是呈现单一的文字和图片，各种富媒体让网页的内容更加生动，而软件化的交互形式也为用户提供了更好的使用体验，这些都是基于多种前端技术紧密协作实现的。由此，“前端开发工程师”这个职位油然而生！
二、 什么是前端开发工程师？
前端开发工程师是Web前端开发工程师的简称，是近五年才真正开始受到重视的一个新兴职业。Web前端开发技术是一个先易后难的过程，主要包括三个要素：HTML、CSS和JavaScript，这就要求前端开发工程师不仅要掌握基本的Web前端开发技术，网站性能优化、SEO和服务器端的基础知识，而且要学会运用各种工具进行辅助开发以及理论层面的知识，包括代码的可维护性、组件的易用性、分层语义模板和浏览器分级支持等。
前端开发工程师，简单的说就是将设计师的图稿变成在浏览器里真真正正呈现的 HTML 页面供用户点击操作交互，这个工作可以简单到用 Photoshop Fireworks 点几下鼠标直接导出页面；也可以复杂到考虑每个标签的语义，整体的性能，浏览器的兼容，用户的交互，搜索引擎的优化等等；技能的基本要求是熟练使用图形图像处理工具，精通HTML/ CSS/JavaScript前端语言，最好还要了解一种服务器端语言如PHP等等。想入门前端开发这个行业很简单，买本HTML+CSS方面的书，自学个一两周的时间，也许就能找到一份“网页制作”的职业了，但想真正成为一名优秀的前端工程师却比较困难，因为前端的几种技术都是入门易深入难的，多数人很容易上手但精通却很困难。再加上很多公司的不重视等原因导致前端工程师的水平差异较大从而普遍待遇较低，进而更多人不愿意去学习需要多种技术相辅的前端开发，因为可以花更少的精力学习一门后端语言。
三、一名优秀的前端开发所需掌握的知识
做前端开发，首先最基本的就是需要掌握HTML+CSS，有了这两项最基础的知识，就能得心应手的切出一张页面。但这还不够，我们还必须得兼容各种各样的浏览器，虽然有些公司只要求对IE6/7/8+火狐兼容就行，但是作为一名好的前端，必须给自己的要求定的高一些，除了常用的几个浏览器都必须兼容之外，最好还要兼容Chrome、Opera、Safari等浏览器。而为了兼容这么多浏览器，必须要掌握CSS HACK方面的知识，这样才可以使用HACK技术来区别并兼容各种版本的浏览器。不过相信既然能兼容火狐，兼容这些也并非难事了。
在能够编写出优雅的HTML Code后，我们还需要尽可能符合W3C标准和语义化的规范。这方面虽没被硬性的去要求，但是做好这两项很有必要。一名优秀的网站前端工程师需要考虑到每一个HTML标签的语义。合理的使用Hx标签和ul ol dl标签等等。让你的页面即使禁用了CSS也能保持良好的结构和可读性。
我们知道国内上网者中，用IE浏览器的比较多，但从国内或全世界的上网客户来看，有些客户并不是用IE来上网浏览内容的，他们会用一些其它的浏览工具如： Netscape、Mozilla、FireFox、Opera等等，如果你的网站不符合W3C标准，使用其它浏览器的用户就无法看到你的网站。那么一些客户就无法看到你的企业或产品，虽然这部分客户比较少，但也毕竟是一部分客户，丢掉任何潜在客户，对企业来说，都是损失。
而符合W3C的好处也有很多，如：文件下载与页面显示速度更快；内容能被更多的用户所访问（包括失明、视弱、色盲等残障人士）； 内容能被更广泛的设备所访问（包括屏幕阅读机、手持设备、搜索机器人、打印机、电冰箱等）；用户能够通过样式选择定制自己的表现界面；所有页面都能提供适于打印的版本等等。
在充分掌握了HTML+CSS方面的知识后，接下去最艰巨的任务就是JavaScript。JS是前端必备的技能之一，也是最难的一部分，之所以把它放到这里来说，是让初学者有一个渐进的步骤。同时去学太多东西，会难以消化，这样分开一步一步的玩精通，压力会小一些。在这其中，前端开发需要掌握基本的DOM操作，了解AJAX，能写高效率的OOP代码，以降低维护成本。现在的JS框架也越来越多，如Jquery 、Prototype、Yui、Dojo等等。前端开发要基于各种需求，进行不同的开发，选择合适的框架，做到代码效率最高，用户体验最好，代码下载量最小，并且可以在单独甚至更多产品线中最大限度重用代码。
以上所说的是一名前端开发工程师必备的相关知识，接下来再来谈一下前端的拓展技能。
1. 选择性的掌握一下Photoshop或者Fireworks.
学到什么程度可以根据你自己的需求来定。如果将来靠前端吃饭，去大公司是不需要前端开发做设计稿的，会分层切图就可以了。当然，如果对设计方面感兴趣的话，把PS玩的很溜，也是不错的事情。
2. 了解一门后端语言
可以了解一下PHP+Mysql或者JSP等后端语言。职业的特殊性决定了我们需要跟后端工作者频繁的沟通，掌握这方面的一些知识有利于更有效的交流问题。提升前端在整个团队中的形象，进而提升自己的待遇。另外，学好这部分东西，有企业找你做网站的时候，你可以拿的更稳妥。至于学PHP还是学JSP，根据自己的爱好来定，个人感觉PHP很不错，很多开源程序都是PHP的，学会了有利于自己建站。另外，wordpress是个很好玩的东西。
3. SEO+UE（用户体验）
用户体验是王道，而SEO是吸引用户的王道。UE其实是前端开发不可缺失的一部分。玩好这一点，往上，可以晋升到产品经理、部门经理的位置；往下，可以博得自己客户的满意。况且这东西并不难学，多留神观察生活就是了。何乐而不为呢？
4. 前端性能优化
掌握这门手艺，可以使网站速度得到提升，从而为公司节约开支。有时间可以查询一下网站页面优化法则，如：尽量减少HTTP请求次数、CSS Sprites 图片整合技术、合并CSS与JS、运用CDN技术、减少DNS查找次数、避免重定向等等。
看到这里，你是不是对“前端”一词有更深入的了解呢？是不是和传统的“美工”有很不一样？我有做过一些调查，有些做前端开发的，可以不去计较别人对他的称呼，但有些却很反感这一个名词。因为在如今的WEB2.0时代，“美工”这一称谓显得更加老土，更加OUT，因为现在对网站前端而言，需要更多专业开发方面的技能。所以无论是前端开发，还是视觉设计，都不喜欢这个称谓。
今天在这里分享的只是“前端开发”中的一部分皮毛而已，有机会和大家更加深入的探讨这方面的理论。