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

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

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

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

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

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

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

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

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

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

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