HTML5 App商业开发实战教程整体设计.docx
- 文档编号:7225314
- 上传时间:2023-01-22
- 格式:DOCX
- 页数:28
- 大小:24.11KB
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%
㈢终结考核
终结考核由平台自动从题库中生成试卷进行。
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- HTML5 App商业开发实战教程整体设计 App 商业 开发 实战 教程 整体 设计