HTML5 App商业开发实战教程整体设计.docx

HTML5 App商业开发实战教程整体设计.docx

《HTML5 App商业开发实战教程整体设计.docx》由会员分享，可在线阅读，更多相关《HTML5 App商业开发实战教程整体设计.docx（28页珍藏版）》请在冰豆网上搜索。

HTML5App商业开发实战教程整体设计

《HTML5App商业开发实战教程》课程整体设计

课程代码

课程性质

建议学时

82

适用专业

软件技术及相关专业

建议

教学方式

“教、学、做”

一体化

制定单位

学校

XX职业技术学院

制定日期

2016.7.9

负责人

XXX

企业

XX软件

（中国）有限公司

一、课程设计思路

本课程依据课程标准，先通过几个App了解WeX5开发H5App的过程及方法，再以仿微店App的开发为主线，贯穿整个教学过程，在逐步完成各章节同步训练的过程中，以“层层递进”的方式完成H5App的开发，从而让学生在实践中掌握知识和技能。

二、课程目标设计

通过本课程的学习，使学生了解H5App的基本概念，学会开发App的前端页面、打包生成安卓App或苹果App，并进行云部署的完整过程。

培养学生掌握页面组件的基本用法，掌握App调用手机硬件的方法，以及界面设计实现能力，为今后学习开发各种类型的App打下扎实基础。

㈠知识目标

1．掌握H5App开发原理和开发过程

2．理解WeX5的页面基础和组件基础

3．掌握数据组件、布局组件、列表组件等常用组件的使用场景和使用方法

4．理解数据绑定，通过数据绑定实现页面的动态计算

5．掌握常用JS方法和常用CSS

6．掌握H5App访问手机硬件的方法

7．了解App的组成和分类，了解iOS开发者帐号和证书

8．掌握一键部署的方法

㈡能力目标

1．了解WeX5开发工具，掌握使用WeX5开发跨平台应用的能力

2．具备开发流行应用的首页页面的能力

3．具备开发单列列表、多列列表以及嵌套列表页面的能力

4．具备页面JS代码、页面样式以及App的开发调试能力

5．灵活运用各种表达式实现界面控制和动态计算

6．学会调用手机硬件设备，例如照相、录像、录音、获取地理位置信息等

7．生成个性化的App，通过一键部署实现在互联网上的发布

8．对页面设计和用户体验有一定了解，具备较好的产品设计能力

㈢素质目标

1.具有规范的企业编程风格和习惯以及良好的排查程序错误的能力；

2.具有良好的分析问题和解决问题的能力以及技术文档写作、沟通和团队协作能力；

3.具有诚信、求实、科学、严谨的工作态度，具有高度的责任心，良好的敬业精神和创新精神；

4.培养学生自主学习的能力，具有终身学习的精神和和可持续发展能力。

三、课程内容设计

根据企业数据库管理与应用系统开发工作过程，以一个学生选课系统的管理开发为教学载体，结合本课程应掌握的知识、能力和职业素质，将课程内容组织为7个教学项目，每个教学项目中包含多个任务，每个任务由若干个子任务组成，在教学实施时，按照从项目1到项目7的顺序逐步展开实现即可。

表1课程内容设计

章节

对应教材章节

节

小节

学时安排

HTML5核心技术

1

节1-1：

了解HTML5的概念及发展趋势

小节1-1-1：

什么是HTML

小节1-1-1：

什么是HTML5

小节1-1-1：

H5的主要特性

小节1-1-1：

H5的发展趋势

1

节1-2：

H5的基本原理

0.5

节1-3：

H5新增的

结构元素

小节1-3-1：

H5新增元素

小节1-3-2：

H5标签语义化

小节1-3-3：

H5元素类型

1

节1-4：

H5App页面

小节1-4-1：

一个基本的H5页面

小节1-4-2：

HelloH5

小节1-4-1：

H5新元素分栏设计

1

节1-5：

CSS3技术

小节1-5-1：

CSS概念

小节1-5-2：

CSS引入方法

小节1-5-3：

CSS基本语法

小节1-5-4：

CSS选择器

小节1-5-5：

CSS盒模型

小节1-5-6：

CSSBoxModel布局

小节1-5-7：

CSS3动画

小节1-5-8：

CSS3动画泡沫按钮

3

节1-6：

CSS布局

小节1-6-1：

CSS定位

小节1-6-2：

float详解

小节1-6-3：

圣杯布局

1

节1-7：

H5的浏览器支持情况

0.5

节1-8：

H5表单

小节1-8-1：

应用场景

小节1-8-2：

验证邮件地址是否合法

小节1-8-3：

自动弹出日期和时间输入框

小节1-8-4：

获取光标的位置

小节1-8-5：

在输入框中显示提示信息

小节1-8-6：

验证表单内容是否为空

小节1-8-7：

在输入框中自动提示文本

小节1-8-8：

上传文件

小节1-8-9：

验证表单数据是否合法

2

节1-9：

H5App多媒体的应用

小节1-9-1：

应用场景

小节1-9-2：

在H5中控制播放的视频

小节1-9-3：

在H5中控制播放的音频

1

JavaScript基础

2

节2-1：

JS入门

小节2-1-1：

什么是JavaScript

小节2-1-2：

变量

小节2-1-3：

语句

小节2-1-4：

直接写入HTML输出流

小节2-1-5：

查找HTML元素

小节2-1-6：

操作HTML元素

3

节2-2：

JavaScript

基础语法

小节2-2-1：

JavaScript函数

小节2-2-2：

JavaScript事件

小节2-2-3：

JavaScript练习

1

节2-3：

H5绘制图形

小节2-3-1：

用H5Canvas能做什么

小节2-3-2：

为视频播放器设置截图功能

1

节2-4：

H5数据存储

小节2-4-1：

应用场景

小节2-4-2：

保存并读取临时数据

小节2-4-3：

保存并读取登录用户名和密码

小节2-4-4：

在H5中保存、清空数据记录

小节2-4-5：

本地存储

2

初识WeX5

3

节3-1：

WeX5简介

小节3-1-1：

安装及启动

小节3-1-2：

开发工具介绍

1

节3-2：

实战案例：

欢乐捕鱼App

小节3-2-1：

准备游戏

小节3-2-2：

生成App

小节3-2-3：

运行App

小节3-2-4：

同步训练

1

节3-3：

H5App简介

小节3-3-1：

开发原理

小节3-3-2：

开发过程

1

节3-4：

实战案例：

HelloWorldApp

小节3-4-1：

开发App

小节3-4-2：

生成App

小节3-4-4：

同步训练

1

节3-5：

实战案例：

记账本App

小节3-5-1：

开发账目列表页

小节3-5-2：

开发记一笔页

小节3-5-3：

开发账目分类设置页

小节3-5-4：

开发首页

小节3-5-5：

生成App

小节3-5-6：

同步训练

8

节3-6：

实战案例：

扫一扫App

小节3-6-1：

使用扫描二维码插件

小节3-6-2：

同步训练

1

节3-7：

实战案例：

仿淘宝App

小节3-7-1：

首页

小节3-7-2：

商品列表页

小节3-7-3：

同步训练

2

小计

15

页面组件

4

节4-1：

页面基础

小节4-1-1：

页面构成

小节4-1-2：

页面调度

小节4-1-3：

页面向导

小节4-1-4：

同步训练

2

节4-2：

组件基础

小节4-2-1：

组件的创建

小节4-2-2：

组件的属性

小节4-2-3：

组件的方法

小节4-2-4：

组件的事件

小节4-2-5：

组件的样式

小节4-2-6：

组件的操作

2

节4-3：

布局组件

小节4-3-1：

面板组件

小节4-3-2：

标题栏组件

小节4-3-3：

多内容页中间

小节4-3-4：

按钮组组件

小节4-3-5：

嵌入组件

小节4-3-6：

实现案例：

首页布局

小节4-3-7：

同步训练

3

节4-4：

数据组件

小节4-4-1：

模型组件

小节4-4-2：

数据组件

小节4-4-3：

实现案例：

使用静态数据

小节4-4-4：

同步训练

2

节4-5：

列表组件

小节4-5-1：

列表组件

小节4-5-2：

滚动视图组件

小节4-5-3：

实现案例：

单列列表

小节4-5-4：

实现案例：

多列列表

小节4-5-5：

实现案例：

嵌套列表

小节4-5-6：

同步训练

4

节4-6：

行组件

小节4-6-1：

行组件row

小节4-6-2：

行组件row（bootstrap）

小节4-6-3：

实现案例：

复杂列表

小节4-6-4：

同步训练

2

节4-7：

表单组件

小节4-7-1：

按钮组件

小节4-7-2：

输入框组件

小节4-7-3：

输出组件

小节4-7-4：

下拉列表框组件

小节4-7-5：

复选框组件

小节4-7-6：

实现案例：

购物车

小节4-7-7：

同步训练

3

小计

18

页面代码

5

节5-1：

JS基础

小节5-1-1：

声明模块引用

小节5-1-2：

JS类定义

小节5-1-3：

自定义JS模块

1

节5-2：

JS表达式

小节5-2-1：

绑定表达式

小节5-2-2：

过滤表达式

小节5-2-3：

规则表达式

小节5-2-4：

表达式环境变量及上下文对象

小节5-2-5：

同步训练

4

节5-3：

常用JS

小节5-3-1：

使用页面调度框架

小节5-3-2：

获取组件JS对象

小节5-3-3：

获取上下文对象

小节5-3-4：

操作数据数据

小节5-3-5：

同步训练

4

节5-4：

JS调试

小节5-4-1：

调试开发者写的JS代码

小节5-4-2：

调试系统的JS代码

小节5-4-3：

Chrome浏览器开发者工具的使用

2

小计

11

页面样式

6

节6-1：

样式基础

1

节6-2：

常用CSS

小节6-2-1：

排版

小节6-2-2：

表单

小节6-2-3：

图片

小节6-2-4：

卡片风格样式

2

节6-3：

CSS调试

小节6-3-1：

设置样式

小节6-3-2：

同步训练

2

小计

5

App开发

7

节7-1：

App调用设置硬件

小节7-1-1：

使用Cordova插件

小节7-1-2：

常用Cordova插件

小节7-1-3：

同步训练

7

节7-2：

App组成

小节7-2-1：

应用图标

小节7-2-2：

启动页

小节7-2-3：

引导页

小节7-2-4：

安卓证书

小节7-2-5：

iOS证书

小节7-2-6：

WebView

小节7-2-7：

Cordova插件

3

节7-3：

App安装包

小节7-3-1：

创建本地App

小节7-3-2：

生成本地App包

小节7-3-3：

同步训练

2

节7-4：

App调试

小节7-4-1：

调试AndrooidApp

小节7-4-2：

调试iOSApp

1

节7-5：

云部署

小节7-5-1：

注册登录CloudX5

小节7-5-2：

在CloudX5上部署App

小节7-5-3：

同步训练

2

小计

15

总计

64

四、能力训练设计

编

号

章

节

能力目标

能力描述

训练方式

结果

（可展示）

1

HTML5核心技术

节1-1：

了解HTML5的概念及发展趋势

了解HTML5是什么，及主要的特性

认识HTML5，了解HTML5的特性

理论基础

节1-2：

H5的基本原理

熟悉HTML5开发App的原理

掌握HTML5+JavaScript+CSS3开发App的模式

理论基础

节1-3：

H5新增的结构元素

熟悉H5新增的结构元素

掌握H5新增的结构元素及应用的场合，了解H5语义化及元素类型

理论基础

节1-4：

H5App页面

熟悉使用DW开发H5App的步骤及结构

掌握DW的基本用法及使用H5设计分栏结构

实践操作

使用DW完成浏览器检测，HelloH5及分栏设计的

节1-5：

CSS3技术

熟悉CSS3的基本语法，语法，引入方式，选择器，盒子模型及动画

掌握使用DW完成CSS3的盒子模型结构的设计和泡沫按钮动画

实践操作

盒子模型，泡沫按钮动画

节1-6：

CSS布局

熟悉CSS3的定位属性，浮动属性和清除浮动属性

能够使用CSS3的定位，浮动和清除浮动属性实现圣杯布局

实践操作

圣杯布局

节1-7：

H5的浏览器支持情况

熟悉支持H5的浏览器有哪些

掌握支持H5的浏览器

理论基础

节1-8：

H5表单

熟悉H5新增的高级表单元素，如email,datetimepicker,

search,color等

掌握H5新增的高级表单元素及表单元素属性，能完成电子邮件验证，获取光标位置，输入框中提示文本，验证表单内容时否为空等功能

实践操作

完成教材8个案例

节1-9：

H5App多媒体的应用

熟悉H5App多媒体标签,audio和video

掌握audio和video标签语法，能实现页面播放视频和音频

实践操作

使用H5提供的audio和video标签，实现页面上的音频和视频播放

2

JavaScript

基础

节2-1：

JavaScript入门

了解JavaScript

基本语法

能够在HTML页面中引入JavaScript代码，会定义变量，能够通过JavaScript操作页面元素

实践操作

通过JavaScript在页面上输出，查找页面元素和操作页面元素

节2-2：

JavaScript基础

熟悉JavaScript函数，事件

能够使用JavaScript自定义函数，并能结合事件调用函数

实践操作

完成自定义JavaScript函数及调用，模仿捕鱼

节2-3：

利用H5绘制图形

掌握H5的Canvas对象及getContext（）的作用

熟悉Canvas及常用的方法，能结合JavaScript在页面绘制基本图形，如直线，渐变效果等。

实践操作

通过JavaScript集合Canvas标签实现视频播放的截图功能

节2-4：

H5数据存储

明白H5的WebStorage的概念及LocalStorage和SessionStorage的用法及区别

熟练掌握H5的WebStorage的，并能使用LocalStorage进行本地数据存储和通过SessionStorage进行临时数据存储

实践操作

使用H5的WebStorage完成保存并读取临时数据，保存并读取登录用户名和密码，在H5中保存、清空数据记录，本地存储的demo

3

初识WeX5

节3-1：

WeX5简介

安装、使用WeX5

正确安装WeX5，了解开发工具中的各个透视图和常用功能的使用方法

实践操作

开发出5个App

节3-2：

实战案例：

欢乐捕鱼App

打包生成App

使用WeX5将已有的WebApp打包，生成App

实践操作

节3-4：

实战案例：

HelloWorldApp

掌握App的开发过程

开发HelloWorldApp，作为使用WeX5开发的第一个应用，掌握App的开发过程

实践操作

节3-5：

实战案例：

记账本App

掌握单页应用的开发过程，初步了解后端服务

记账本App由4个页面组成，通过开发记账本App掌握单页应用的开发过程。

记账本的数据来自数据库，通过后端服务获取

实践操作

节3-6：

实战案例：

扫一扫App

学会在App中访问手机硬件

理解Cordova插件的用途，掌握通过调用Cordova插件提供的方法，访问手机硬件

实践操作

节3-7：

实战案例：

仿淘宝App

了解流行App的常见页面形式的开发方法

了解图片轮播、二级门户图标、广告栏、双列列表的开发方法

实践操作

4

页面组件

节4-1：

页面基础

了解页面构成、单页应用的页面调度以及使用页面向导

掌握使用页面向导生成页面文件的方法

实践操作

开发出App中的7个主要页面

节4-3：

布局组件

掌握常用布局组件的用法

使用布局组件开发应用首页框架

实践操作

节4-4：

数据组件

掌握数据组件的使用方法

在数据组件中设置列、通过代码将静态数据放入数据组件

实践操作

节4-5：

列表组件

掌握各种列表的开发方法

使用列表组件开发单列列表、多列列表和嵌套列表

实践操作

节4-6：

行组件

掌握行组件的使用方法

使用行组件开发页面内容复杂的列表

实践操作

节4-7：

表单组件

掌握常用表单组件的用法

使用按钮、输入框、选中框开发购物车页面，实现级联选中，增减数量功能

实践操作

5

页面代码

节5-2：

JS表达式

理解数据绑定的用途及用法

使用数据绑定设置绑定表达式实现控制组件是否显示、设置过滤表达式控制列表显示的数据、设置规则表达式实现自动计算

实践操作

完成页面中的逻辑部分

节5-3：

常用JS

掌握常用JS方法

学会使用组件的方法，以及系统JS类的方法。

熟练掌握获取组件JS对象的方法、数据组件的方法以及打开页面的方法

实践操作

节5-4：

JS调试

掌握调试JS代码的方法

不仅能够调试自己写的JS代码，而且能够调试系统JS代码

实践操作

6

页面样式

节6-3：

CSS调试

掌握页面样式的调试方法

通过调试样式了解组件样式并修改组件样式

实践操作

页面风格同仿照App

7

App开发

节7-1：

App调用设置硬件

掌握几个常用的Cordova插件的使用方法

调用Cordova插件，实现拍照、摄像、录音、播放音乐、摇一摇和获取地理位置信息等功能

实践操作

生成个性化App，部署到CloudX5

节7-2：

App组成

了解本地App的组成，理解打包向导中参数的含义

准备个性化的应用图标、启动页、引导页。

。

如果有Mac系统，可以申请苹果免费帐号的开发证书

实践操作

节7-3：

App安装包

学会打调试包和发布包

打调试包调试程序。

使用个性化的应用图标、启动页、引导页打个性化的发布包。

如果有苹果证书和Mac版本的WeX5，可以打苹果包

实践操作

节7-4：

App调试

了解何时使用真机调试，以及如何进行真机调试

用Chrome浏览器调试安卓手机App

用Mac系统的Safari浏览器调试苹果手机App

实践操作

节7-5：

云部署

掌握将App部署到CloudX5的方法

将自己开发的App部署到CloudX5

实践操作

8

项目实战

节8-1：

理财应用

开发一个理财应用

根据页面效果和功能需求，开发理财应用

实践操作

开发出2个App

节8-2：

挂号应用

开发一个挂号应用

根据页面效果和功能需求，开发挂号应用

实践操作

五、考核评价设计

本课程采用形成性考核方式，总评成绩由形成性考核的各项成绩组成。

分数比例为：

综合素质评价（平时表现+通用能力考核）20%

过程考核（课堂实践+课后实践+项目实战）40%

终结考核（期终考核）40%

㈠综合素质评价

考核内容

评价标准

分值比例

出勤情况

迟到、不带教材、不做课堂笔记扣2分/每次，扣完4分为止。

4%

学习态度

课上玩游戏或旷课扣2分/1次，扣完4分为止。

旷课3次不允许参加期末终结性考试。

4%

学习表现

上课主动回答问题1次加2分。

加满4分为止。

4%

通用能力

创造性解决问题、协助教师帮助同学解决问题、表达能力强1次加2分，加满8分为止

8%

㈡过程考核

考核内容

评价标准

分值比例

课堂实践

课堂实践速度快，全班前10名，每次加1分；成绩排名前10，每次加2分；正确率80%以上每次加2分。

加满15分为止。

15%

课后实践

按时上交作业，每次加2分；正确率80%以上每次加2分；加满10分为止。

抄袭作业0分

10%

项目实战

按时上交作业，每次加5分；正确率80%以上每次加3分。

加满15分为止。

15%

㈢终结考核

终结考核由平台自动从题库中生成试卷进行。