前端開發(fā)工程師和美工對于網(wǎng)站開發(fā)所掌握的知識(shí)的區(qū)別
2024-08-30 08:34:45
供稿：網(wǎng)友
摘要：很多公司甚至是多數(shù)以互聯(lián)網(wǎng)網(wǎng)站為主要業(yè)務(wù)的公司都會(huì)把“美工”的概念搞混淆，通常這些公司都會(huì)把網(wǎng)頁設(shè)計(jì)+網(wǎng)頁制作的人員統(tǒng)稱為“美工”。而一家成熟的互聯(lián)網(wǎng)公司則會(huì)把網(wǎng)站方面的人才規(guī)劃的比較詳細(xì)，如UED團(tuán)隊(duì)（用戶體驗(yàn)設(shè)計(jì)，英文User Experience Design的縮寫），其中詳細(xì)劃分成了“交互設(shè)計(jì)”、“視覺設(shè)計(jì)”、“前端開發(fā)”、“用戶研究”、“文案”等職位。今天主要就為了這個(gè)話題，與大家分享一下“美工”與“前端”之間的職能區(qū)別…
一、 什么是美工？
美工：意為美術(shù)工程師(Art Engineer)，一般出身于藝術(shù)美術(shù)院校的藝術(shù)設(shè)計(jì)專業(yè)居多。
根據(jù)工作性質(zhì)美工一般分為平面美工、三維美工、網(wǎng)頁美工三大類。
平面美工是由美工用Fireworks 或者 Photoshop 設(shè)計(jì)出平面外觀。
三維美工是由美工用3DMAX等工具進(jìn)行三維角色模型設(shè)計(jì)，道具模型設(shè)計(jì)，環(huán)境場景模型設(shè)計(jì)，包裝設(shè)計(jì)等。
網(wǎng)頁美工是美工用Dreamwerver等網(wǎng)頁編輯軟件把已經(jīng)設(shè)計(jì)好的平面效果圖，制做成HTML靜態(tài)網(wǎng)頁文件。這里就要求美工用到CSS和DIV技術(shù)了，也就是所謂的切圖。說的詳細(xì)一點(diǎn)就是，網(wǎng)頁美工一般需要精通PHOTOSHOP/CSS/HTML/JAVASCRIPT等網(wǎng)絡(luò)語言或工具進(jìn)行網(wǎng)頁框架，色彩，基調(diào)，創(chuàng)意等處理。
而這里所說的網(wǎng)頁美工，其實(shí)是Web1.0時(shí)代的產(chǎn)物，那時(shí)的網(wǎng)站多為靜態(tài)的HTML頁面，用戶使用網(wǎng)站的行為也以瀏覽為主。而到了2005年以后，互聯(lián)網(wǎng)進(jìn)入Web2.0時(shí)代，各種擁有類似桌面應(yīng)用的Web App大量出現(xiàn)。如Gmail GoogleReader 等等。網(wǎng)站的前端與交互由此發(fā)生了翻天覆地的變化，網(wǎng)頁不再只是呈現(xiàn)單一的文字和圖片，各種富媒體讓網(wǎng)頁的內(nèi)容更加生動(dòng)，而軟件化的交互形式也為用戶提供了更好的使用體驗(yàn)，這些都是基于多種前端技術(shù)緊密協(xié)作實(shí)現(xiàn)的。由此，“前端開發(fā)工程師”這個(gè)職位油然而生！
二、 什么是前端開發(fā)工程師？
前端開發(fā)工程師是Web前端開發(fā)工程師的簡稱，是近五年才真正開始受到重視的一個(gè)新興職業(yè)。Web前端開發(fā)技術(shù)是一個(gè)先易后難的過程，主要包括三個(gè)要素：HTML、CSS和JavaScript，這就要求前端開發(fā)工程師不僅要掌握基本的Web前端開發(fā)技術(shù)，網(wǎng)站性能優(yōu)化、SEO和服務(wù)器端的基礎(chǔ)知識(shí)，而且要學(xué)會(huì)運(yùn)用各種工具進(jìn)行輔助開發(fā)以及理論層面的知識(shí)，包括代碼的可維護(hù)性、組件的易用性、分層語義模板和瀏覽器分級(jí)支持等。
前端開發(fā)工程師，簡單的說就是將設(shè)計(jì)師的圖稿變成在瀏覽器里真真正正呈現(xiàn)的 HTML 頁面供用戶點(diǎn)擊操作交互，這個(gè)工作可以簡單到用 Photoshop Fireworks 點(diǎn)幾下鼠標(biāo)直接導(dǎo)出頁面；也可以復(fù)雜到考慮每個(gè)標(biāo)簽的語義，整體的性能，瀏覽器的兼容，用戶的交互，搜索引擎的優(yōu)化等等；技能的基本要求是熟練使用圖形圖像處理工具，精通HTML/ CSS/JavaScript前端語言，最好還要了解一種服務(wù)器端語言如PHP等等。想入門前端開發(fā)這個(gè)行業(yè)很簡單，買本HTML+CSS方面的書，自學(xué)個(gè)一兩周的時(shí)間，也許就能找到一份“網(wǎng)頁制作”的職業(yè)了，但想真正成為一名優(yōu)秀的前端工程師卻比較困難，因?yàn)榍岸说膸追N技術(shù)都是入門易深入難的，多數(shù)人很容易上手但精通卻很困難。再加上很多公司的不重視等原因?qū)е虑岸斯こ處煹乃讲町愝^大從而普遍待遇較低，進(jìn)而更多人不愿意去學(xué)習(xí)需要多種技術(shù)相輔的前端開發(fā)，因?yàn)榭梢曰ǜ俚木W(xué)習(xí)一門后端語言。
三、一名優(yōu)秀的前端開發(fā)所需掌握的知識(shí)
做前端開發(fā)，首先最基本的就是需要掌握HTML+CSS，有了這兩項(xiàng)最基礎(chǔ)的知識(shí)，就能得心應(yīng)手的切出一張頁面。但這還不夠，我們還必須得兼容各種各樣的瀏覽器，雖然有些公司只要求對IE6/7/8+火狐兼容就行，但是作為一名好的前端，必須給自己的要求定的高一些，除了常用的幾個(gè)瀏覽器都必須兼容之外，最好還要兼容Chrome、Opera、Safari等瀏覽器。而為了兼容這么多瀏覽器，必須要掌握CSS HACK方面的知識(shí)，這樣才可以使用HACK技術(shù)來區(qū)別并兼容各種版本的瀏覽器。不過相信既然能兼容火狐，兼容這些也并非難事了。
在能夠編寫出優(yōu)雅的HTML Code后，我們還需要盡可能符合W3C標(biāo)準(zhǔn)和語義化的規(guī)范。這方面雖沒被硬性的去要求，但是做好這兩項(xiàng)很有必要。一名優(yōu)秀的網(wǎng)站前端工程師需要考慮到每一個(gè)HTML標(biāo)簽的語義。合理的使用Hx標(biāo)簽和ul ol dl標(biāo)簽等等。讓你的頁面即使禁用了CSS也能保持良好的結(jié)構(gòu)和可讀性。
我們知道國內(nèi)上網(wǎng)者中，用IE瀏覽器的比較多，但從國內(nèi)或全世界的上網(wǎng)客戶來看，有些客戶并不是用IE來上網(wǎng)瀏覽內(nèi)容的，他們會(huì)用一些其它的瀏覽工具如： Netscape、Mozilla、FireFox、Opera等等，如果你的網(wǎng)站不符合W3C標(biāo)準(zhǔn)，使用其它瀏覽器的用戶就無法看到你的網(wǎng)站。那么一些客戶就無法看到你的企業(yè)或產(chǎn)品，雖然這部分客戶比較少，但也畢竟是一部分客戶，丟掉任何潛在客戶，對企業(yè)來說，都是損失。
而符合W3C的好處也有很多，如：文件下載與頁面顯示速度更快；內(nèi)容能被更多的用戶所訪問（包括失明、視弱、色盲等殘障人士）； 內(nèi)容能被更廣泛的設(shè)備所訪問（包括屏幕閱讀機(jī)、手持設(shè)備、搜索機(jī)器人、打印機(jī)、電冰箱等）；用戶能夠通過樣式選擇定制自己的表現(xiàn)界面；所有頁面都能提供適于打印的版本等等。
在充分掌握了HTML+CSS方面的知識(shí)后，接下去最艱巨的任務(wù)就是JavaScript。JS是前端必備的技能之一，也是最難的一部分，之所以把它放到這里來說，是讓初學(xué)者有一個(gè)漸進(jìn)的步驟。同時(shí)去學(xué)太多東西，會(huì)難以消化，這樣分開一步一步的玩精通，壓力會(huì)小一些。在這其中，前端開發(fā)需要掌握基本的DOM操作，了解AJAX，能寫高效率的OOP代碼，以降低維護(hù)成本。現(xiàn)在的JS框架也越來越多，如Jquery 、Prototype、Yui、Dojo等等。前端開發(fā)要基于各種需求，進(jìn)行不同的開發(fā)，選擇合適的框架，做到代碼效率最高，用戶體驗(yàn)最好，代碼下載量最小，并且可以在單獨(dú)甚至更多產(chǎn)品線中最大限度重用代碼。
以上所說的是一名前端開發(fā)工程師必備的相關(guān)知識(shí)，接下來再來談一下前端的拓展技能。
1. 選擇性的掌握一下Photoshop或者Fireworks.
學(xué)到什么程度可以根據(jù)你自己的需求來定。如果將來靠前端吃飯，去大公司是不需要前端開發(fā)做設(shè)計(jì)稿的，會(huì)分層切圖就可以了。當(dāng)然，如果對設(shè)計(jì)方面感興趣的話，把PS玩的很溜，也是不錯(cuò)的事情。
2. 了解一門后端語言
可以了解一下PHP+Mysql或者JSP等后端語言。職業(yè)的特殊性決定了我們需要跟后端工作者頻繁的溝通，掌握這方面的一些知識(shí)有利于更有效的交流問題。提升前端在整個(gè)團(tuán)隊(duì)中的形象，進(jìn)而提升自己的待遇。另外，學(xué)好這部分東西，有企業(yè)找你做網(wǎng)站的時(shí)候，你可以拿的更穩(wěn)妥。至于學(xué)PHP還是學(xué)JSP，根據(jù)自己的愛好來定，個(gè)人感覺PHP很不錯(cuò)，很多開源程序都是PHP的，學(xué)會(huì)了有利于自己建站。另外，wordpress是個(gè)很好玩的東西。
3. SEO+UE（用戶體驗(yàn)）
用戶體驗(yàn)是王道，而SEO是吸引用戶的王道。UE其實(shí)是前端開發(fā)不可缺失的一部分。玩好這一點(diǎn)，往上，可以晉升到產(chǎn)品經(jīng)理、部門經(jīng)理的位置；往下，可以博得自己客戶的滿意。況且這東西并不難學(xué)，多留神觀察生活就是了。何樂而不為呢？
4. 前端性能優(yōu)化
掌握這門手藝，可以使網(wǎng)站速度得到提升，從而為公司節(jié)約開支。有時(shí)間可以查詢一下網(wǎng)站頁面優(yōu)化法則，如：盡量減少HTTP請求次數(shù)、CSS Sprites 圖片整合技術(shù)、合并CSS與JS、運(yùn)用CDN技術(shù)、減少DNS查找次數(shù)、避免重定向等等。
看到這里，你是不是對“前端”一詞有更深入的了解呢？是不是和傳統(tǒng)的“美工”有很不一樣？我有做過一些調(diào)查，有些做前端開發(fā)的，可以不去計(jì)較別人對他的稱呼，但有些卻很反感這一個(gè)名詞。因?yàn)樵谌缃竦腤EB2.0時(shí)代，“美工”這一稱謂顯得更加老土，更加OUT，因?yàn)楝F(xiàn)在對網(wǎng)站前端而言，需要更多專業(yè)開發(fā)方面的技能。所以無論是前端開發(fā)，還是視覺設(shè)計(jì)，都不喜歡這個(gè)稱謂。
今天在這里分享的只是“前端開發(fā)”中的一部分皮毛而已，有機(jī)會(huì)和大家更加深入的探討這方面的理論。
