基于web前端开发工程师的典型工作任务分析报告-1

1、中职课程设计与开发课 程 名 称： 中职课程设计与开发 所 在 院 系： 教育科学与技术学院 任 课 教 师： 周元春 日 期： 2017年03月19日 小 组 成 员： 林秋圆、陈妙、钟彩玲、刘育星、李鸿志基于web前端开发工程师的典型工作任务分析报告目录一、典型工作任务3二、典型工作任务描述5三、工作岗位5四、工作过程5五、工作任务的对象7六、工具、方法于工作组织方式7七、对工作和技术的要求8八、区分点8一、 典型工作任务1、 基于HTML5.0标准进行页面职业能力： （1）熟练使用Adobe Dreamweaver、Adobe Edge等html5开发工具（2）了解一般html5网页的架

2、构（3）能完成高质量前端代码编写学习领域：Web UI界面设计；HTML的概念作用及用法；可视化网页编辑软件的使用。2、 根据产品需求，分析并给出最优的页面前端结构解决方案职业能力： （1）擅长分析解决结构划分案例（2）了解一些语言化规范学习领域：移动网页布局3、 编写可复用的用户界面组件职业能力： （1）了解现有架构的原理（2）能设计出满足不同用户界面配置方案学习领域：CSS3基础语法；HTML基础。4、 基于Android,iOS的移动Web应用开发职业能力： （1）熟悉Android,iOS基本模型，并进行界面设计（2）熟练UI设计中认知方法的运用（3）熟练使用HTML5来完成繁重的基础

3、工作，使用CSS3来制作外观和JavaScript来为Web应用添加程序逻辑学习领域：移动设备界面布局基础；CSS3布局样式；图形、图像软件的使用。5、 协助后台程序员完成功能镶嵌和调试职业能力： （1）能优化前端体验和页面响应速度（2）有强大的架构能力和团结协作能力学习领域：响应式布局/WebAPP 项目。6、 优化和提高客户端代码的性能职业能力： （1）熟练进行加载、脚本执行、渲染优化（2）能熟练进行代码修改调试学习领域：代码优化技巧。7、 负责编写和维护相关技术文档职业能力： （1）熟悉产品原型设计，熟练使用Axure、PS、Visio等工具（2）能准确把握移动HTML5产品的用户体验学

4、习领域：HTML5文档结构与基础语法。8、 和后端进行数据交互职业能力： （1）熟悉jQuery、ExtJS和GWT框架中的任何一个，能快速高效实现各种交互效果（2）掌握一些数据库的使用学习领域：jQuery、ExtJS基础；JavaScript交互编程实战。9、 开发兼容移动端的微站和微信活动职业能力： （1）对跨浏览器和平台的兼容有深入理解（2） 能通过JSSDK去调用微信的内置接口学习领域：JSSDK开发实战。10、参加其他产品的内部测试，协助找出产品的问题职业能力： （1）熟悉移动设备特（2）有强大的性能调优能力学习领域：HTML5页面测试。二、典型工作任务基本描述HTML5作为移动互

5、联网主流前端开发语言, 从根本上改变了开发商开发Web应用的方式. 不仅在电脑端，而且在移动端也得到了更广泛的应用，HTML5都已经成为了前端开发必不可少的语言，目前还没有一个前端的开发语言能取代HTML5的位置。可以说，HTML5是web的未来。由于HTML5的兴起，企业对于HTML5工程师的需求也来越大，同时要求越来越高。HTML5页面制作主要使用新的文档类型，最基本语义结构，新结构标签，通过布局，排版来进行一系列基于移动端的页面制作。中职学生在学校主要学习HTML5，CSS以及一些开发工具如Adobe Dreamweaver的使用。他们以后从事的工作单位有中小企业，互联网公司等等。三、工

6、作岗位网站设计公司，产品研发部。网站设计公司从事产品研发部的人员，包括产品经理、UI设计师、UE设计师、Web前端开发工程师、Web设计师共有8名。工位主要是办公桌，通风良好，温度适宜，光线充足。在各办公桌上面配置各种关于网站开发的软件的电脑，用来进行网站的界面开发。四、工作过程 1、观察图纸拿到一张设计图，先观察一下图纸，对页面的布局，着色有一个整体的认识，而在对设计图达成一个初步的了解之后，就会对如何在Html页面里面布局有了规划，而根据这个规划再来对设计图进行分割输出，以免匆匆切分之后又发现再HTMl里面无法实现效果或者效果不好而返工。2、拆分图纸当对于如何拆分图纸和组成HTML页面有了

7、规划之后，就可以将图纸拆分成需要的“原料”，以便在组装页面时使用，一般需要从图纸中拆分提取的有以下内容：1）分离颜色 其中一般包括3部分配色，页面主辅颜色搭配的基本配色，普通超级链接的配色和导航超级链接的配色。2）提取尺寸 按照设计图的尺寸来搭建网页才会符合图纸上的设计，不过也不是说必须严格按照设计图纸来做，一点也不能差，有些时候可以灵活掌握。3）分离背景图 背景图可能是大面积重复的图案，也可能既是一张图片，一般和内容没有关系的装饰性图片都可以靠可制成背景图4）分离图标及特殊边框 小图标及花边可以给网页添加细节和亮点。边框在理论上讲，其使用方法和背景图片类似，不过根据情况往往需要单独输出5）分

8、离图片 内容相关的图片，比如新闻报道的图片，讲解操作步骤地图片。3、组装 组装就是把分离出来的元素按照一定的方法组合成与设计图效果类似的页面。1）先在本地设一个文件夹，作为网站存储的地方。名字最好取“My Sites”。 2）在网站文件夹里面建立一些文件夹，包括“images”等（存储图片、文件等），并且按照网页内容，再建立几个文件夹。3）打开你的网页编辑程序（例如FP、Dreamwear、VisualStudio等），新建网页，保存为“index”（主页），重复以上步骤，在网站文件夹里面建立“search”（查找）、“map”（站点地图）、“index02”（网站简介等）。4）按照上面步骤，

9、再在网站分类文件夹里面建立许多网页（接着还要把内容用html5输入到网页）。 5）在硬盘上面再建立一个文件夹“File”，把准备好的文档、图片、程式、文件和网页特效等放进去。6）慢慢把这些文件一个不漏的放进网页里面，并且用CSS对页面进行排版（使之成为与UI设计图效果类似的页面）。五、工作任务的对象 在静态页面制作完成以后，HTML前端工程师需要从视觉和易用性角度，与UI和UE设计师共同研究，为网站设计提供改进建议，为网站的页面提供持续优化方案。并且配合程序进行代码的调试、bug修复、浏览器兼容性调优。除此之外，还参与部分页面的策划创新工作，配合网站编辑和其他部门完成专题页面制作。HTML前端

10、工程师是协调Web前端设计师和后端程序员实现网站页面或程序界面的美化、交互体验的一个职位。六、工具、方法于工作组织方式精通DIV+CSS和W3C标准，能熟练运用XHTML，CSS进行合理的网页制作，深刻理解手机平台上各主流浏览器之间的兼容性。熟悉HTML5特性，了解HTML5最新规范。熟悉常见的浏览器的特点和限制，熟悉W3C相关标准和Web常用协议、图片文件格式等；能解决常见浏览器兼容性问题，熟悉IE、Firefox、Chrome等主流浏览器的常见兼容性问题，并有可行的解决办法。了解主流框架，如：javascript、jQuery、js、spring、hibernate等负责项目中技术难点和关键模块的设计和编码，HTML5/JS开发工作，包括针对开发需求的技术方案设计、开发指导和团队技能提升等。参与系统架构设计，负责项目中功能模块的设计，并能独立完成功能模块的编码工作。负责项目中前端展示页面的实现（包含html5jscss）； JEECG和JEEWX的产品及项目中涉及的系统之间接口定制与实现；产品和项目中需要开发的其他事项。七、对工作和技术的要求 具备良好的服务意识