基于web前端開發(fā)工程師的典型工作任務(wù)分析報告-1

1、中職課程設(shè)計與開發(fā)課 程 名 稱： 中職課程設(shè)計與開發(fā) 所 在 院 系： 教育科學(xué)與技術(shù)學(xué)院 任 課 教 師： 周元春 日 期： 2017年03月19日 小 組 成 員： 林秋圓、陳妙、鐘彩玲、劉育星、李鴻志基于web前端開發(fā)工程師的典型工作任務(wù)分析報告目錄一、典型工作任務(wù)3二、典型工作任務(wù)描述5三、工作崗位5四、工作過程5五、工作任務(wù)的對象7六、工具、方法于工作組織方式7七、對工作和技術(shù)的要求8八、區(qū)分點8一、 典型工作任務(wù)1、 基于HTML5.0標(biāo)準(zhǔn)進(jìn)行頁面職業(yè)能力： （1）熟練使用Adobe Dreamweaver、Adobe Edge等html5開發(fā)工具（2）了解一般html5網(wǎng)頁的架

2、構(gòu)（3）能完成高質(zhì)量前端代碼編寫學(xué)習(xí)領(lǐng)域：Web UI界面設(shè)計；HTML的概念作用及用法；可視化網(wǎng)頁編輯軟件的使用。2、 根據(jù)產(chǎn)品需求，分析并給出最優(yōu)的頁面前端結(jié)構(gòu)解決方案職業(yè)能力： （1）擅長分析解決結(jié)構(gòu)劃分案例（2）了解一些語言化規(guī)范學(xué)習(xí)領(lǐng)域：移動網(wǎng)頁布局3、 編寫可復(fù)用的用戶界面組件職業(yè)能力： （1）了解現(xiàn)有架構(gòu)的原理（2）能設(shè)計出滿足不同用戶界面配置方案學(xué)習(xí)領(lǐng)域：CSS3基礎(chǔ)語法；HTML基礎(chǔ)。4、 基于Android,iOS的移動Web應(yīng)用開發(fā)職業(yè)能力： （1）熟悉Android,iOS基本模型，并進(jìn)行界面設(shè)計（2）熟練UI設(shè)計中認(rèn)知方法的運(yùn)用（3）熟練使用HTML5來完成繁重的基礎(chǔ)

3、工作，使用CSS3來制作外觀和JavaScript來為Web應(yīng)用添加程序邏輯學(xué)習(xí)領(lǐng)域：移動設(shè)備界面布局基礎(chǔ)；CSS3布局樣式；圖形、圖像軟件的使用。5、 協(xié)助后臺程序員完成功能鑲嵌和調(diào)試職業(yè)能力： （1）能優(yōu)化前端體驗和頁面響應(yīng)速度（2）有強(qiáng)大的架構(gòu)能力和團(tuán)結(jié)協(xié)作能力學(xué)習(xí)領(lǐng)域：響應(yīng)式布局/WebAPP 項目。6、 優(yōu)化和提高客戶端代碼的性能職業(yè)能力： （1）熟練進(jìn)行加載、腳本執(zhí)行、渲染優(yōu)化（2）能熟練進(jìn)行代碼修改調(diào)試學(xué)習(xí)領(lǐng)域：代碼優(yōu)化技巧。7、 負(fù)責(zé)編寫和維護(hù)相關(guān)技術(shù)文檔職業(yè)能力： （1）熟悉產(chǎn)品原型設(shè)計，熟練使用Axure、PS、Visio等工具（2）能準(zhǔn)確把握移動HTML5產(chǎn)品的用戶體驗學(xué)

4、習(xí)領(lǐng)域：HTML5文檔結(jié)構(gòu)與基礎(chǔ)語法。8、 和后端進(jìn)行數(shù)據(jù)交互職業(yè)能力： （1）熟悉jQuery、ExtJS和GWT框架中的任何一個，能快速高效實現(xiàn)各種交互效果（2）掌握一些數(shù)據(jù)庫的使用學(xué)習(xí)領(lǐng)域：jQuery、ExtJS基礎(chǔ)；JavaScript交互編程實戰(zhàn)。9、 開發(fā)兼容移動端的微站和微信活動職業(yè)能力： （1）對跨瀏覽器和平臺的兼容有深入理解（2） 能通過JSSDK去調(diào)用微信的內(nèi)置接口學(xué)習(xí)領(lǐng)域：JSSDK開發(fā)實戰(zhàn)。10、參加其他產(chǎn)品的內(nèi)部測試，協(xié)助找出產(chǎn)品的問題職業(yè)能力： （1）熟悉移動設(shè)備特（2）有強(qiáng)大的性能調(diào)優(yōu)能力學(xué)習(xí)領(lǐng)域：HTML5頁面測試。二、典型工作任務(wù)基本描述HTML5作為移動互

5、聯(lián)網(wǎng)主流前端開發(fā)語言, 從根本上改變了開發(fā)商開發(fā)Web應(yīng)用的方式. 不僅在電腦端，而且在移動端也得到了更廣泛的應(yīng)用，HTML5都已經(jīng)成為了前端開發(fā)必不可少的語言，目前還沒有一個前端的開發(fā)語言能取代HTML5的位置?？梢哉f，HTML5是web的未來。由于HTML5的興起，企業(yè)對于HTML5工程師的需求也來越大，同時要求越來越高。HTML5頁面制作主要使用新的文檔類型，最基本語義結(jié)構(gòu)，新結(jié)構(gòu)標(biāo)簽，通過布局，排版來進(jìn)行一系列基于移動端的頁面制作。中職學(xué)生在學(xué)校主要學(xué)習(xí)HTML5，CSS以及一些開發(fā)工具如Adobe Dreamweaver的使用。他們以后從事的工作單位有中小企業(yè)，互聯(lián)網(wǎng)公司等等。三、工

6、作崗位網(wǎng)站設(shè)計公司，產(chǎn)品研發(fā)部。網(wǎng)站設(shè)計公司從事產(chǎn)品研發(fā)部的人員，包括產(chǎn)品經(jīng)理、UI設(shè)計師、UE設(shè)計師、Web前端開發(fā)工程師、Web設(shè)計師共有8名。工位主要是辦公桌，通風(fēng)良好，溫度適宜，光線充足。在各辦公桌上面配置各種關(guān)于網(wǎng)站開發(fā)的軟件的電腦，用來進(jìn)行網(wǎng)站的界面開發(fā)。四、工作過程 1、觀察圖紙拿到一張設(shè)計圖，先觀察一下圖紙，對頁面的布局，著色有一個整體的認(rèn)識，而在對設(shè)計圖達(dá)成一個初步的了解之后，就會對如何在Html頁面里面布局有了規(guī)劃，而根據(jù)這個規(guī)劃再來對設(shè)計圖進(jìn)行分割輸出，以免匆匆切分之后又發(fā)現(xiàn)再HTMl里面無法實現(xiàn)效果或者效果不好而返工。2、拆分圖紙當(dāng)對于如何拆分圖紙和組成HTML頁面有了

7、規(guī)劃之后，就可以將圖紙拆分成需要的“原料”，以便在組裝頁面時使用，一般需要從圖紙中拆分提取的有以下內(nèi)容：1）分離顏色 其中一般包括3部分配色，頁面主輔顏色搭配的基本配色，普通超級鏈接的配色和導(dǎo)航超級鏈接的配色。2）提取尺寸 按照設(shè)計圖的尺寸來搭建網(wǎng)頁才會符合圖紙上的設(shè)計，不過也不是說必須嚴(yán)格按照設(shè)計圖紙來做，一點也不能差，有些時候可以靈活掌握。3）分離背景圖 背景圖可能是大面積重復(fù)的圖案，也可能既是一張圖片，一般和內(nèi)容沒有關(guān)系的裝飾性圖片都可以靠可制成背景圖4）分離圖標(biāo)及特殊邊框 小圖標(biāo)及花邊可以給網(wǎng)頁添加細(xì)節(jié)和亮點。邊框在理論上講，其使用方法和背景圖片類似，不過根據(jù)情況往往需要單獨輸出5）分

8、離圖片 內(nèi)容相關(guān)的圖片，比如新聞報道的圖片，講解操作步驟地圖片。3、組裝 組裝就是把分離出來的元素按照一定的方法組合成與設(shè)計圖效果類似的頁面。1）先在本地設(shè)一個文件夾，作為網(wǎng)站存儲的地方。名字最好取“My Sites”。 2）在網(wǎng)站文件夾里面建立一些文件夾，包括“images”等（存儲圖片、文件等），并且按照網(wǎng)頁內(nèi)容，再建立幾個文件夾。3）打開你的網(wǎng)頁編輯程序（例如FP、Dreamwear、VisualStudio等），新建網(wǎng)頁，保存為“index”（主頁），重復(fù)以上步驟，在網(wǎng)站文件夾里面建立“search”（查找）、“map”（站點地圖）、“index02”（網(wǎng)站簡介等）。4）按照上面步驟，

9、再在網(wǎng)站分類文件夾里面建立許多網(wǎng)頁（接著還要把內(nèi)容用html5輸入到網(wǎng)頁）。 5）在硬盤上面再建立一個文件夾“File”，把準(zhǔn)備好的文檔、圖片、程式、文件和網(wǎng)頁特效等放進(jìn)去。6）慢慢把這些文件一個不漏的放進(jìn)網(wǎng)頁里面，并且用CSS對頁面進(jìn)行排版（使之成為與UI設(shè)計圖效果類似的頁面）。五、工作任務(wù)的對象 在靜態(tài)頁面制作完成以后，HTML前端工程師需要從視覺和易用性角度，與UI和UE設(shè)計師共同研究，為網(wǎng)站設(shè)計提供改進(jìn)建議，為網(wǎng)站的頁面提供持續(xù)優(yōu)化方案。并且配合程序進(jìn)行代碼的調(diào)試、bug修復(fù)、瀏覽器兼容性調(diào)優(yōu)。除此之外，還參與部分頁面的策劃創(chuàng)新工作，配合網(wǎng)站編輯和其他部門完成專題頁面制作。HTML前端

10、工程師是協(xié)調(diào)Web前端設(shè)計師和后端程序員實現(xiàn)網(wǎng)站頁面或程序界面的美化、交互體驗的一個職位。六、工具、方法于工作組織方式精通DIV+CSS和W3C標(biāo)準(zhǔn)，能熟練運(yùn)用XHTML，CSS進(jìn)行合理的網(wǎng)頁制作，深刻理解手機(jī)平臺上各主流瀏覽器之間的兼容性。熟悉HTML5特性，了解HTML5最新規(guī)范。熟悉常見的瀏覽器的特點和限制，熟悉W3C相關(guān)標(biāo)準(zhǔn)和Web常用協(xié)議、圖片文件格式等；能解決常見瀏覽器兼容性問題，熟悉IE、Firefox、Chrome等主流瀏覽器的常見兼容性問題，并有可行的解決辦法。了解主流框架，如：javascript、jQuery、js、spring、hibernate等負(fù)責(zé)項目中技術(shù)難點和關(guān)鍵模塊的設(shè)計和編碼，HTML5/JS開發(fā)工作，包括針對開發(fā)需求的技術(shù)方案設(shè)計、開發(fā)指導(dǎo)和團(tuán)隊技能提升等。參與系統(tǒng)架構(gòu)設(shè)計，負(fù)責(zé)項目中功能模塊的設(shè)計，并能獨立完成功能模塊的編碼工作。負(fù)責(zé)項目中前端展示頁面的實現(xiàn)（包含html5jscss）； JEECG和JEEWX的產(chǎn)品及項目中涉及的系統(tǒng)之間接口定制與實現(xiàn)；產(chǎn)品和項目中需要開發(fā)的其他事項。七、對工作和技術(shù)的要求 具備良好的服務(wù)意識