《Web前端开发技术》课程标准授课计划-课程整体设计-教学计划-教学日历.doc

Web前端开发技术课程标准 课程编码：B060106Z 课程类别： 必修课 适用专业：软件技术专业 授课单位： 计算机系与信息工程系 学时：108 编写执笔人及编写日期： 学分：6学分 审定负责人及审定日期：1.课程定位和课程设计 1. 1课程性质与作用Web前端开发技术课程是软件技术专业的专业课程，同时也是软件技术专业学生执行移动互联网络应用软件开发能力培养的一门专业核心课程。课程的作用： 本课程从HTML5应用软件开发的角度出发，结合用户需求开发的流程和特点，从软件用户界面、软件设计文档、程序代码等角度进行了具体的讲授。通过该课程的学习，旨在提高学生基于HTML5应用软件开发与软件系统维护服务和管理的职业能力。本课程前导课程包括基础课程计算机基础、网页制作技术、专业课程Java程序设计、数据库技术、数据结构等，学生完成这些前导课程的学习后，已具备一定的软件开发理论知识和分析软件项目的能力。通过本课程的学习后学生即可参加后续的专业实训学习。 1.2课程基本理念根据课程所处阶段以及课程内容确定课程的基本理念：（1）全面提高学生互联网应用开发能力，为学生后期学习奠定良好的理论与实践基础（2）重视课程实践性，以实践能力为培养目标，以项目实施为培养途径（3）注重培养学生自主、合作、探究的学习方法，激发学生学习兴趣和求职欲望（4）注重培养学生终身学习的教育观 1.3课程设计思路本课程采用教学做一体化教学的设计思路，学生需要完成多个实验训练任务。根据学生前期课程学习的知识，将互联网的应用开发应用到移动端，增加了Web开发技术JQuery框架，移动互联网应用开发中的Ionic框架、AJAX异步更新以及JSON技术学习，并通过学习Cordova框架，让学生掌握HTML5技术开发移动APP的方法。在每个实验间贯穿理论知识，增强技能，逐步巩固和增强已学知识和技能。同样，在每个实验中都涵盖了不同的理论知识以及对知识的拓展。2.课程目标本课程旨在学生岗前实训前，提高学生移动互联网应用软件开发理论知识和实践操作能力，为学生积累基本的软件开发经验，让学生初步掌握软件项目开发过程以及在软件开发过程中所需的各种技术和基本方法、方式、工具应用等，能在软件开发过程中熟练应用JQuery、AngularJS、Ionic、AJAX、JSON、Cordova等技术进行代码编写和代码分析，提高学生软件开发能力，丰富学生软件开发知识，提高学生软件开发的整体素质。HTML5应用软件开发是整个教学过程的重点，整个过程由软件开发理论知识和操作训练组成。对于从事此行业的学生需掌握基本的软件开发技术，本课程使学生理解软件开发的核心思想：理解客户需求、理解设计框架、掌握移动互联网软件开发语言、掌握软件开发过程中采用的各种技术框架等，使得学生掌握软件开发的基本流程和软件开发中应用框架的基本方法。（1）能力目标 能根据设计说明书编写程序代码及快速发现、定位软件错误和缺陷的发生点 能够熟练搭建软件开发环境及应用软件开发工具 能熟练应用Ionic和Cordova框架开发移动APP应用（2）知识目标 掌握JQuery、Bootstrap、AngularJS、Ionic、Cordova完成软件开发工作的基本知识 熟练应用JQuery、Ionic编写移动Web应用程序 了解通过Cordova开发iOS操作系统下的APP（3）情感目标 让学生养成积极思考问题、解决问题的良好习惯、自主学习与创新能力，吃苦耐劳的品质 提高学生处理问题的逻辑思维能力 培养学生具有良好的交流沟通能力、进取精神和团队合作意识3、课程内容与教学要求表一、课程内容及教学要求对应表序号教学单元知识及要求技能要求1概述1、基于HTML5应用开发简介2、移动应用开发技术概述3、HTML5 APP开发环境搭建1、了解HTML5技术2、了解HTML5开发环境搭建3、了解HTML5技术在移动开发中的应用2HTML5技术1、HTML5文档介绍2、HTML5常用标签介绍3、HTML5表格标签4、HTML5表单标签5、HTML5多媒体1、掌握HTML5文档结构2、掌握HTML5常用标签的使用3、掌握表单标签应用4、掌握多媒体标签应用5、掌握表格标签的应用3CSS3技术1、CSS3技术基础2、CSS3背景、文字等属性介绍3、CSS3布局应用4、CSS3盒模型介绍5、CSS3动画技术1、掌握CSS3选择器的定义和使用2、掌握CSS3常用属性的使用方法3、能熟练应用CSS3实现动画4、能熟练应用CSS3实现界面美化4JavaScript语言1、JavaScript语言语法基础2、函数、事件介绍3、对象和类4、常见内置对象5、正则表达式6、绘制技术1、掌握JavaScript语言语法基础2、能熟练使用函数编写重复可重用代码3、能熟练使对象和类4、了解正则表达式的基本应用5、了解HTML5绘制技术5数据传送格式1、JSON格式及其应用2、XML格式及其解析方法1、掌握JSON格式的编写2、掌握AJAX技术应用3、熟练应用XML文档解析和转换6文档对象模型1、DOM介绍2、HTML DOM介绍3、DOM相关对象介绍4、DOM事件1、掌握DOM应用技巧2、掌握HTML DOM处理HTML文档3、掌握DOM相关对象和方法4、掌握DOM事件应用7jQuery库介绍1、jQuery介绍2、jQuery选择器介绍3、jQuery事件4、jQuery AJAX处理5、jQuery应用1、 掌握jQuery的基本应用2、 能熟练应用jQuery事件3、 能熟练应用jQuery处理DOM4、 能熟练应用jQuery AJAX技术5、 了解延迟处理应用8Bootstrap样式库和插件1、Bootstrap介绍2、Bootstrap样式库3、Bootstrap组件4、Bootstrap插件1、能熟练应用Bootstrap样式库2、能熟练应用Bootstrap组件3、能熟练应用Bootstrap插件9Cordova开发跨平台移动APP1、Cordova概述2、Cordova开发环境搭建3、Cordova CLI介绍4、本地存储5、插件开发和应用1、 能熟练搭建Cordova开发环境2、 能熟练应用CLI工具3、 掌握本地存储方式方法4、 掌握插件应用和开发5、 了解安全策略10AngularJS框架1、AngularJS框架介绍2、AngularJS基础3、AngularJS组件4、RESTFul客户端实现5、AngularJS动画1、掌握AngularJS框架结构2、能熟练应用AngularJS框架编写程序3、能熟练应用AngularJS实现动画4、能熟练应用AngularJS实现RESTFul客户端5、掌握AngularJS组件技术11HTML5移动APP开发框架Ionic1、 Ionic简介2、 Ionic命令行工具3、 Ionic的CSS库4、 配置Ionic5、 Ionic的指令和服务1、 掌握Ionic命令行工具使用2、 能熟练应用Ionic CSS样式库3、 掌握Ionic配置方法4、 掌握常用的Ionic指令和服务12微信公众号开发实例1、 微信公众号介绍2、 JS-SDK接口介绍3、 常见JS-SDK接口介绍4、 微信支付服务1、了解微信公众号2、了解JS-SDK接口3、掌握微信开发基本步骤和方法4、了解微信支付应用开发表二、课时分配表序号单元内容课时分配教学做一体化1概述22HTML5技术103CSS3技术104JavaScript语言165数据传送格式46文档对象模型47jQuery库介绍88Bootstrap样式库和插件69Cordova开发跨平台移动APP1610AngularJS框架1211HTML5移动APP开发框架Ionic1012微信公众号开发实例10合 计108表三、实践项目序号名称课时备注1静态网站设计82网页游戏拼图83网页游戏五子棋84网页游戏找茬85Android新闻客户端APP简单实现126Android商店APP简单实现127Android新闻客户端APPIonic实现128Android商店APPIonic实现169办公OA APP系统-Ionic实现1610AngularJS实现单页面网站系统204.教学模式、教学方法与手段4.1案例驱动教学法案例驱动教学法就是以一个项目案例来驱动教学过程的方法，教师在教学中扮演设计者和激励者的角色，鼓励学生积极参与讨论，寻求案例的各种解决办法，让学生自主构建知识。HTML5 APP开发教程教学中应以简单、实用的案例或特定案例的部分功能支撑理论知识，实践教学应以简单的实际案例或以实际案例的模拟作为训练题目。4.2学习情境教学法学习情境是指为学生提供一个完整、真实的问题背景，以此为支撑物实施教学。一个恰当的学习情境，是激励学生主动参与学习的根本保证，学习情境的创设是教学设计中的一个重要环节。在Web前端开发技术的教学过程中，特别是实践教学中，有目的地引入或创设具有一定背景的学习情境，可以有效提高学生的学习兴趣，取得良好的效果。4.3任务驱动教学法带着目的明确的任务进行学习可以明显提高学习效率、改善学习效果，在教学活动中，尤其是预习与复习环节，先把相应的实际任务布置给学生，用具体任务驱动预习和复习环节，以取得较好的教学效果。4.4考核方式本课程考核方式采用过程化、多元化考核与期末考核相结合的方式，过程化考核主要在实践教学中完成，根据学生在实验课中完成的多个案例的情况判定过程化考核成绩。期末考试以笔试的形式组织，过程化考核成绩（30%）与期末考试成绩（70%）构成学生的学期成绩。5.课程实施条件5.1 对任课教师的知识结构及能力要求任课教师要对计算机相关专业知识有全面、深入的了解，熟悉HTML5、CSS3、JavaScript语言以及jQuery库、Bootstrap库、AngularJS、Ionic框架、Cordova框架。对程序设计、程序开发有较深刻的理解，有较强的计算机应用能力。同时应具有较强的责任心和良好的语言表达能力。 5.2 教学条件要求本课程理论教学主要运用多媒体的形式，使用多媒体课件完成，教学中需要在具有投影仪的多媒体教室内完成。实践教学在实训室进行，实训室应配备两合班（80台）的计算机，具有网页浏览器以及手机模拟器环境，保证实践教学的正常进行。5.3 教材选用及参考书教材：自编教材基于HTML5的APP开发教程北京理工大学出版社参考书：张路斌著的HTML5 Canvas游戏开发实战（机械工业出版社）美Brian P. Hogan 著的HTML5和CSS3实例教程（人民邮电出版社）6.其他说明1、本课程是软件技术专业软件开发相关的核心课程。2、在讲授中，要结合恰当的实例，注重讲解程序设计的基本结构和程序设计思想，以提高综合编程能力。3、除计划安排的实验外，可以给学生留一些课外大作业，以增强其读程序、编程序的能力。4、注重培养学生基于HTML5技术的综合应用能力。6