基于H5移动端开发课程
课程天数:2天
课程介绍
通过本课程的学习,旨在帮助前端开发人员进一步梳理工作中的开发流程和巩固已有的知识结构体系,加深对技术背景的理解。
课程收益
通过本课程的学习,使用前端开发人员掌握HTML5、CSS3等新型框的核心技术点,完全胜任使用前端框架开发移动项目的需求。
培训对象
正在从事传统PC端Web页面的技术开发人员。
希望从事移动端WebApp应用开发的技术人员。
对前端技术感兴趣,希望从事这方面工作的人员。
掌握一些传统的前端开发技术,想进一步学习HTML5、CSS3方面的人员。
课程大纲
1、认识Html5新增元素与属性,优化页面代码,提升开发速度;
• Html5的标准,以及优势的地方,从API,表达,对移动设备的支持上更突出
• 常见的HTML5新标签与属性
• datalist使用
• oniput事件
• 动态控制状态条
• 滑动条改变背景色
2、了解Css3应用与响应式设计,可以更好地与UI部门合作,协调工作;
• 解决跨浏览器问题,视口调试等
• 响应式设计中的Html5
• link方式实现响应式设计
• style方式实现响应式设计
• 响应样式的兼容性与优劣比较
• 文本阴影与圆角边框
• 图片遮罩效果
• 图片遮罩形成探照灯
3、掌握Css3效果,可以大大提升制作页面动画的速度;
• 2d基本效果
• 3d动画基本效果
• 制作过渡动画效果
• 过滤动画效果的各种状态
• 制作3d翻页效果
4、了解本地存储localstorage的API,可以优化页面打开速度和用户体验;
• Localstorage与SessionStorage
• local保存和显示内容
• 使用数组、对象形式的跟踪用户行为
• 案例-即时更新缓存中API数据
• Html5的离线API
• 利用web Storage API实现持久化
5、了解重力感应和地理定位API,增加应用开发的新思路;
• 地理定位获取位置信息
• 案例-根据定位获取商家信息
• 重力感应基本操作
6、掌握Web页面的性能优化,加速代码的执行效果
• 代码层级的优化。
• 文件的体积和请求的优化
• 服务端接口方面的优化
7、了解文件API的知识,完善产品的更多功能
• 查看文件的基本属性
• 使用对象拖放上传图片文件
• 使用方法读取文本文件内容
• 使用方法预览图片
8、掌握绘图canvas 元素API,加快实现动画和游戏应用的开发;
• 绘图的基本使用
• 绘制圆
• 获取点击中的绘制区域
• 案例-绘制找不同游戏
• 案例-亮视点
9、了解Worker API的特征,进一步优化代码的结构;
• 线程基本操作
• 在单独的worker对象中操作图片和传值
• 在浏览浏览器中嵌套worker对象传值
10、响应式布局基础
• Bootstrap起步
• Bootstrap全局CSS样式
• Bootstrap组件
• Bootstrap JavaScript插件
• Bootstrap实例
11、Angular的框架
• Angular的简介
• Angular的控制器
• Angular的依赖注入
• Angular与服务端交互
• Angular的指令
12、PhoneGap框架开发应用
• PhoneGap的安装与环境配置
• PhoneGap的基本API
• PhoneGap硬件设备的调用
• PhoneGap封装跨平台应用
• WebAPP开发技术兼容与手势事件
13、微信JSSDK功能开发实现
• 微信页面实现功能的前提
• 实现微信页自定义分享图标API流程的分析
• 微信页自定义功能注意事项
• 实现微信中的自定义分享功能
14、掌握Websocket 通讯API,通过页面实现APP的更多功能;
• 使用Websocket与服务器基本通讯实现
• 使用Socket.IO创建WebSocket
• 在NodeJS环璄下架构Websocket通讯
• 聊天室的实现