前端開發工程師和美工 知識需求的區別

摘要：不少公司甚至是多數以互聯網網站爲主要業務的公司都會把「美工」的概念搞混淆，一般這些公司都會把網頁設計+網頁製做的人員統稱爲「美工」。而一家成熟的互聯網公司則會把網站方面的人才規劃的比較詳細，如UED團隊（用戶體驗設計，英文User Experience Design的縮寫），其中詳細劃分紅了「交互設計」、「視覺設計」、「前端開發」、「用戶研究」、「文案」等職位。今天主要就爲了這個話題，與你們分享一下「美工」與「前端」之間的職能區別… 

1、 什麼是美工？ 
美工：意爲美術工程師(Art Engineer)，通常出身於藝術美術院校的藝術設計專業居多。 
根據工做性質美工通常分爲平面美工、三維美工、網頁美工三大類。 
平面美工是由美工用Fireworks 或者 Photoshop 設計出平面外觀。 
三維美工是由美工用3DMAX等工具進行三維角色模型設計，道具模型設計，環境場景模型設計，包裝設計等。 
網頁美工是美工用Dreamwerver等網頁編輯軟件把已經設計好的平面效果圖，製作成HTML靜態網頁文件。這裏就要求美工用到CSS和DIV技術了，也就是所謂的切圖。說的詳細一點就是，網頁美工通常須要精通PHOTOSHOP/CSS/HTML/JAVASCRIPT等網絡語言或工具進行網頁框架，色彩，基調，創意等處理。 
而這裏所說的網頁美工，實際上是Web1.0時代的產物，那時的網站多爲靜態的HTML頁面，用戶使用網站的行爲也以瀏覽爲主。而到了2005年之後，互聯網進入Web2.0時代，各類擁有相似桌面應用的Web App大量出現。如Gmail GoogleReader 等等。網站的前端與交互由此發生了翻天覆地的變化，網頁再也不只是呈現單一的文字和圖片，各類富媒體讓網頁的內容更加生動，而軟件化的交互形式也爲用戶提供了更好的使用體驗，這些都是基於多種前端技術緊密協做實現的。由此，「前端開發工程師」這個職位油然而生！

 
2、 什麼是前端開發工程師？ 
前端開發工程師是Web前端開發工程師的簡稱，是近五年才真正開始受到重視的一個新興職業。Web前端開發技術是一個先易後難的過程，主要包括三個要素：HTML、CSS和JavaScript，這就要求前端開發工程師不只要掌握基本的Web前端開發技術，網站性能優化、SEO和服務器端的基礎知識，並且要學會運用各類工具進行輔助開發以及理論層面的知識，包括代碼的可維護性、組件的易用性、分層語義模板和瀏覽器分級支持等。 
前端開發工程師，簡單的說就是將設計師的圖稿變成在瀏覽器裏真真正正呈現的 HTML 頁面供用戶點擊操做交互，這個工做能夠簡單到用 Photoshop Fireworks 點幾下鼠標直接導出頁面；也能夠複雜到考慮每一個標籤的語義，總體的性能，瀏覽器的兼容，用戶的交互，搜索引擎的優化等等；技能的基本要求是熟練使用圖形圖像處理工具，精通HTML/ CSS/JavaScript前端語言，最好還要了解一種服務器端語言如PHP等等。想入門前端開發這個行業很簡單，買本HTML+CSS方面的書，自學個一兩週的時間，也許就能找到一份「網頁製做」的職業了，但想真正成爲一名優秀的前端工程師卻比較困難，由於前端的幾種技術都是入門易深刻難的，多數人很容易上手但精通卻很困難。再加上不少公司的不重視等緣由致使前端工程師的水平差別較大從而廣泛待遇較低，進而更多人不肯意去學習須要多種技術相輔的前端開發，由於能夠花更少的精力學習一門後端語言。

 
3、一名優秀的前端開發所需掌握的知識 
作前端開發，首先最基本的就是須要掌握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，由於如今對網站前端而言，須要更多專業開發方面的技能。因此不管是前端開發，仍是視覺設計，都不喜歡這個稱謂。 

分享一下。今天新技術風起雲涌。有選擇  有精通  一顆積極好學的心。