基于HTML5的APP应用开发教学大纲

1．课程定位和课程设计

1.1 课程性质与作用

《基于HTML5的APP开发》课程是软件技术专业一门实用性极强的专业基础课程，也是培养软件技术专业学生基于HTML5的APP设计开发能力的一门必修课程。

课程的作用：《基于HTML5的APP开发》主要培养学生从事基于Web及移动APP应用程序开发过程中前端设计与制作的基本技能，使学生掌握网页设计的概念和方法，能够运用专业的网页设计软件设计出常见的静态网页、APP界面等，了解动态网页设计方法及APP与服务端交互方式，具备Web前端开发设计岗位的职业技术能力。通过本课程的学习，旨在提高学生的操作技能，培养学生踏实认真、精益求精、团结合作、创新的精神，培养良好的职业道德。

本课程前导课程包括《计算机基础》、《平面设计》等基础课程，学生完成这些前导课程的学习后，已具备一定的计算机操作与图形图像处理制作能力。通过本课程学习为后续课程《Java web开发技术》、《岗前实训》等打下坚实的基础。

1.2 课程基本理念

近年来，随着计算机软件技术的崛起与发展，软件开发技术被划分成前端和后端技术，其中前端技术主要就是HTML5技术，本课程旨在培养学生运用HTML5实现基于Web APP和移动APP，积累软件开发经验、提高实践动手能力，同时为实现交互式Web应用系统开发奠定良好的基础。

本课程以就业为指导，参照行业职业标准按照基于工作过程的职业能力来进行课程开发，根据所涵盖的岗位群进行工作任务和职业能力分析，确定本课程的工作任务和课程内容，以任务引领为课程框架，将课程按递进方式设计成项目，并以项目为单元组织教学，使学生由浅入深，以点到面的全面掌握HTML5技术的职业技能。

1.3 课程设计思路

本课程采用任务加项目教学的设计思路，学生需要完成30个任务或项目的实践训练任务，各项目任务之间既独立又相互联系：作为项目是独立的，但作为项目当中应用到的知识点任务，各任务之间又是有关联的。在不同的项目之间有些知识点的应用是不断重复的，以强化学生对知识点的理解，也让学生能够接触到大量的不同类型APP的制作。

2．课程目标

本课程要求学生掌握常用的Web前端开发工具，熟练运用多种APP设计技术独立进行备Web APP设计、规划、开发、发布及管理的基本知识和技能,能够独立制作中小型的Web或移动APP,形成解决实际应用问题的方法能力。

（一）知识目标：

1. 了解WWW、HTTP、HTML、CSS的定义、概念和作用；

2. 理解服务器、客户端、浏览器的概念和作用；

3. 理解HTML5语言中的常见标记及其作用；

4. 理解表格、框架、层的作用，掌握设置其属性的方法；

5. 理解CSS3样式表的作用和意义，掌握定义CSS样式的方法；

6. 理解表单的作用，掌握设置表单元素属性的方法；

7. 理解行为的作用，掌握设置行为的方法，理解简单JavaScript代码的含义；

8. 理解Web APP与移动APP开发基本思路。

9．理解jQuery库、Bootstrap库的使用方式和方法

10. 理解Cordova开发APP的步骤和方法

11. 理解AngularJS框架和Ionic框架使用方法

（二）能力目标：

1. 掌握使用HTML5及CSS3编写网页；

2. 会根据需要修改HTML5、CSS3相关标记和属性；

3. 能够掌握运用JavaScript语言开发网页脚本；

4. 能够掌握运用jQuery库实现HTML5、CSS3对象处理；

5. 能熟练运用BootStrap库实现美化页面；

6. 会使用Cordova开发移动App软件系统；

7．会使用AngularJS开发类桌面Web应用系统；

8. 会使用Ionic框架编写移动APP应用系统；

（三）素质目标：

1. 具有勤奋学习的态度，严谨求实、创新的工作作风；

2. 具有良好的心理素质和职业道德素质；

3. 具有高度责任心和良好的团队合作精神；

4. 具有一定的科学思维方式和判断分析问题的能力；

5. 具有较强的网页设计创意思维、艺术设计素质。

3．课程内容与要求

第一章HTML5应用概述2学时

1.1 互联网应用概述

1.2 移动应用开发技术概述

1.3 HTML5 APP开发环境搭建

第二章HTML5技术10学时重点

2.1 HTML5概述

2.2 简单的HTML文档

2.3文字标签

2.4 块

2.5 表格

2.6 网页链接

2.7 图像

2.8 列表

2.9 表单

2.10 框架

2.11 音频和视频

第三章CSS3技术8学时重点3.1 CSS3语言基础

3.2 CSS3的盒模型

3.3 CSS 布局

3.4 边框和背景

3.5字体和文本

3.6 其他元素样式介绍

3.7 CSS动画设计

第四章JavaScript技术16学时重点难点4.1 JavaScript语言基础

4.2 函数

4.3 对象和类

4.4 内置对象

4.5正则表达式

4.6 绘制技术

第五章数据传输格式4学时

5.1 JSON格式

5.2 新闻客户端JSON数据格式定义

5.3 XML格式

5.4新闻客户端XML数据格式定义

第六章文档对象模型4学时

6.1 文档对象模型

6.2 HTML DOM对象

6.3 JavaScript访问HTML DOM

6.4 window对象

6.5 location对象

6.6 navigator对象

6.7 history对象

6.8 DOM 事件

第七章jQuery库介绍8学时

7.1 jQuery库简介

7.2 选择器

7.3 事件

7.4 DOM处理

7.5 动画处理

7.6 数据处理

7.7 AJAX处理

7.8 延迟处理

第八章Bootstrap样式库和插件8学时

8.1 Bootstrap介绍

8.2 Bootstrap样式库

8.3 Bootstrap 组件

8.4 Bootstrap插件

第九章Cordova开发跨平台移动APP16学时重点难点9.1 Cordova概述

9.2 Cordova开发环境

9.3 开发第一个Cordova应用

9.4 config.xml文件

9.5 Cordova安全策略

9.6 本地存储

9.7 Cordova常用插件

9.8 插件开发

9.9 Cordova事件

第十章AngularJS框架10学时难点10.1 AngularJS简介

10.2 AngularJS基础

10.3 路由

10.4 RESTful客户端实现

10.5 动画

10.6 组件及组件路由

第十一章HTML5移动APP框架Ionic12学时难点11.1 Ionic简介

11.2 Ionic 命令行工具

11.3 Ionic CSS组件

11.4 配置Ionic

11.5 Ionic指令和服务

第十二章微信公众号开发实例10学时

12.1 微信公众号介绍

12.2 微信接入服务器

12.3 微信JS-SDK接口

12.4 基础接口

12.5 分享接口

12.6 拍照接口

12.7 微信小店

12.8 微信卡劵

12.9 微信支付服务

4．学时分配

5．课程教学中应注意的问题

在课程教课过程中，以实践为主、理论为辅，让学生通过实践操作理解、领悟理论知识，从而加深对知识的理解和掌握，在课堂学时分配上，理论知识占据每个课堂的课时最多不超过20%，而实践最少不低于80%，这样才能让学生有充分的课堂时间完成更多、更完整的实践案例，从而激发学生的学习自信心和学习动力。