HTML5开发Web App阅读器【已完结 6G】
-
第1章 阅读器开发-课程热身
介绍课程案例的背景、应用场景和WEB APP的现状与发展趋势。
- 1-1 课程介绍
- 1-2 HTML5的应用场景
-
第2章 阅读器开发-案例中技术点的分解
对使用BASE64图片制作ICON、CSS3、HTML5 API、手机触摸事件、手机端多屏幕适配和布局方法、前端性能等知识进行介绍及扩展,为课程学习做好准备。
- 2-1 核心技术分解开场
- 2-2 使用base64格式图片制作
- 2-3 使用CSS3制作简单的ICON
- 2-4 HTML5+API概览介绍
- 2-5 HTML5+核心API+webwork介绍
- 2-6 HTML5特性-Ajax跨域
- 2-7 HTML5触屏事件详解
- 2-8 使用viewport布局移动端页面
- 2-9 移动端性能陷阱和硬件加速
-
第3章 阅读器开发-开发流程介绍、需求分解和技术选型
逐步介绍实现一个完整的适用于手机端阅读器的过程,进行需求分解,完成技术选型和基础项目的搭建过程。
- 3-1 交互图和设计图的解读
- 3-2 技术选型的原因
- 3-3 目录结构的划分和基础文件准备说明
-
第4章 阅读器开发-页面基本结构的开发过程
完成整个案例的静态页面搭建和兼容性测试。
- 4-1 页面结构的分解
- 4-2 主体结构的HTML开发
- 4-3 主体结构的CSS样式开发
- 4-4 仿native上边栏的结构和CSS开发
- 4-5 底部边栏的HTML和CSS样式
- 4-6 仿native下边栏操作面板的结构开发
- 4-7 仿native下边栏操作面板的CSS开发
-
第5章 阅读器开发-页面前端交互代码的开发过程
使用HTML5和JS API开发案例中字体设置,阅读器的排版分页和导航栏的呼出等用户交互部分的功能。
- 5-1 前端交互部分的开发流程
- 5-2 搭建出基本的JS代码结构
- 5-3 触屏唤出上下边栏交互开发和优化
- 5-4 唤出字体面板交互开发
- 5-5 字体大小设置交互开发
- 5-6 字体面板中“背景”切换的交互开发
- 5-7 字体面板中“黑白天阅读模式”切换的交互开发
-
第6章 阅读器开发-页面和服务器通信代码的开发过程
针对项目中的前后端交互部分开发做详细的说明。主要介绍异步请求的处理技巧,如何能不使用传统的回调函数方式,更好的完成代码组织(promise ,pub-sub,ES6 genertor集中异步编程模式)。
- 6-1 实现数据层
- 6-2 实现数据层与UI渲染连调
- 6-3 实现上下翻页功能数据渲染
- 6-4 上下翻页功能优化
- 6-5 服务器端交互代码细节优化
- 6-6 使用ES6+promise组织异步代码
- 6-7 使用ES6+promise组织异步代码
- 6-8 promise实战
- 6-9 课程总结
-
第7章 阅读器开发-课程扩展
本章节是对html5一些概念性知识进行讲解。
- 7-1 HTML5技术对比native的优势
- 7-2 WEB+APP的发展现状
- 7-3 发展趋势
- 7-4 设计模式分解
- 7-5 HTML5+contentediton介绍
-
第8章 书城整站开发-介绍和WebApp的搭建
本章节开始课程的第二部分课程内容,在阅读器的基础上扩展开发一个书城的开发。
- 8-1 二期项目背景介绍
- 8-2 阅读器对整个项目承前启后的作用
- 8-3 webApp整站的搭建方式
-
第9章 书城整站开发-技术选型和技术点介绍
本章节把对整站开发所需要的技术点:node.js、npm、koa、Vue以及EJS做了简单的介绍,以便于后面章节的使用。
- 9-1 nodeJS的环境搭建,两种nodejs安装方法
- 9-2 npm的使用介绍
- 9-3 koa的介绍和使用
- 9-4 Vue的介绍和使用
- 9-5 EJS模版的介绍
-
第10章 书城整站开发-服务端环境搭建和开发过程
本章节讲解书城整站的服务端环境搭建和开发过程,包括:工程目录结构的搭建、使用koa中间件构建网站雏形、为网站添加接口及页面路由的完整开发。
- 10-1 webApp服务端搭建的过程
- 10-2 工程完整的目录结构的搭建
- 10-3 使用Koa中间件构建网站雏形
- 10-4 为网站添加Mock数据接口
- 10-5 为网站添加接口之线上HTTP接口调用
- 10-6 网站服务端Ajax接口的完整开发
- 10-7 页面路由的完整开发
-
第11章 书城整站开发-前端开发过程
书城整站的前端开发过程,包括页面的基础架构搭建,首页的开发、书籍详情页面静态页面实现,数据动态绑定、页面自适应屏幕宽度代码改造。
- 11-1 页面的基础架构搭建
- 11-2 页面HTML代码的模块化拆分
- 11-3 网站header的样式和结构实现
- 11-4 首页的顶部功能区域html结构实现
- 11-5 首页书籍列表的样式和结构实现(上)
- 11-6 首页书籍列表的样式和结构实现(下)
- 11-7 首页其它模块的静态结构和样式实现(上)
- 11-8 首页其它模块的静态结构和样式实现(下)
- 11-9 首页细节调整&首页的Vue数据绑定
- 11-10 首页动画效果和书架的实现(上)
- 11-11 首页动画效果和书架的实现(下)
- 11-12 书籍详情页面的静态实现(上)
- 11-13 书籍详情页面的静态实现(中)
- 11-14 书籍详情页面的静态实现(下)
- 11-15 书籍详情页的数据动态绑定
- 11-16 集成阅读器的代码到项目中
- 11-17 页面自适应屏幕宽度的代码改造
- 11-18 搜索功能的思路和项目总结