《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技术在移动开发中的应用
2
HTML5技术
1、HTML5文档介绍
2、HTML5常用标签介绍
3、HTML5表格标签
4、HTML5表单标签
5、HTML5多媒体
1、掌握HTML5文档结构
2、掌握HTML5常用标签的使用
3、掌握表单标签应用
4、掌握多媒体标签应用
5、掌握表格标签的应用
3
CSS3技术
1、CSS3技术基础
2、CSS3背景、文字等属性介绍
3、CSS3布局应用
4、CSS3盒模型介绍
5、CSS3动画技术
1、掌握CSS3选择器的定义和使用
2、掌握CSS3常用属性的使用方法
3、能熟练应用CSS3实现动画
4、能熟练应用CSS3实现界面美化
4
JavaScript语言
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事件应用
7
jQuery库介绍
1、jQuery介绍
2、jQuery选择器介绍
3、jQuery事件
4、jQuery AJAX处理
5、jQuery应用
1、 掌握jQuery的基本应用
2、 能熟练应用jQuery事件
3、 能熟练应用jQuery处理DOM
4、 能熟练应用jQuery AJAX技术
5、 了解延迟处理应用
8
Bootstrap样式库和插件
1、Bootstrap介绍
2、Bootstrap样式库
3、Bootstrap组件
4、Bootstrap插件
1、能熟练应用Bootstrap样式库
2、能熟练应用Bootstrap组件
3、能熟练应用Bootstrap插件
9
Cordova开发跨平台移动APP
1、Cordova概述
2、Cordova开发环境搭建
3、Cordova CLI介绍
4、本地存储
5、插件开发和应用
1、 能熟练搭建Cordova开发环境
2、 能熟练应用CLI工具
3、 掌握本地存储方式方法
4、 掌握插件应用和开发
5、 了解安全策略
10
AngularJS框架
1、AngularJS框架介绍
2、AngularJS基础
3、AngularJS组件
4、RESTFul客户端实现
5、AngularJS动画
1、掌握AngularJS框架结构
2、能熟练应用AngularJS框架编写程序
3、能熟练应用AngularJS实现动画
4、能熟练应用AngularJS实现RESTFul客户端
5、掌握AngularJS组件技术
11
HTML5移动APP开发框架Ionic
1、 Ionic简介
2、 Ionic命令行工具
3、 Ionic的CSS库
4、 配置Ionic
5、 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
概述
2
2
HTML5技术
10
3
CSS3技术
10
4
JavaScript语言
16
5
数据传送格式
4
6
文档对象模型
4
7
jQuery库介绍
8
8
Bootstrap样式库和插件
6
9
Cordova开发跨平台移动APP
16
10
AngularJS框架
12
11
HTML5移动APP开发框架Ionic
10
12
微信公众号开发实例
10
合       计
108

表三、实践项目
序号
名称
课时
备注
1
静态网站设计
8

2
网页游戏—拼图
8

3
网页游戏—五子棋
8

4
网页游戏—找茬
8

5
Android新闻客户端APP—简单实现
12

6
Android商店APP—简单实现
12

7
Android新闻客户端APP—Ionic实现
12

8
Android商店APP—Ionic实现
16

9
办公OA APP系统---Ionic实现
16

10
AngularJS实现单页面网站系统
20

4.教学模式、教学方法与手段  
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