前端開發工程師和美工對于網站開發所掌握的知識的區別
2024-08-30 08:34:45
供稿：網友
摘要：很多公司甚至是多數以互聯網網站為主要業務的公司都會把“美工”的概念搞混淆，通常這些公司都會把網頁設計+網頁制作的人員統稱為“美工”。而一家成熟的互聯網公司則會把網站方面的人才規劃的比較詳細，如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，因為現在對網站前端而言，需要更多專業開發方面的技能。所以無論是前端開發，還是視覺設計，都不喜歡這個稱謂。
今天在這里分享的只是“前端開發”中的一部分皮毛而已，有機會和大家更加深入的探討這方面的理論。
