|
HTML5高级开发与应用实战培训
|
|
班级规模及环境--热线:4008699035 手机:15921673576( 微信同号) |
坚持小班授课,为保证培训效果,增加互动环节,每期人数限3到5人。 |
上课时间和地点 |
上课地点:【上海】:同济大学(沪西)/新城金郡商务楼(11号线白银路站) 【深圳分部】:电影大厦(地铁一号线大剧院站)/深圳大学成教院 【北京分部】:北京中山学院/福鑫大楼 【南京分部】:金港大厦(和燕路) 【武汉分部】:佳源大厦(高新二路) 【成都分部】:领馆区1号(中和大道) 【沈阳分部】:沈阳理工大学/六宅臻品 【郑州分部】:郑州大学/锦华大厦 【石家庄分部】:河北科技大学/瑞景大厦 【广州分部】:广粮大厦 【西安分部】:协同大厦
最近开课时间(周末班/连续班/晚班):即将开课,详情请咨询客服! |
实验设备 |
☆资深工程师授课
☆注重质量
☆边讲边练
☆合格学员免费推荐工作
★实验设备请点击这儿查看★ |
质量保障 |
1、培训过程中,如有部分内容理解不透或消化不好,可免费在以后培训班中重听;
2、课程完成后,授课老师留给学员手机和Email,保障培训效果,免费提供半年的技术支持。
3、培训合格学员可享受免费推荐就业机会。 |
课程大纲 |
第一部分:课程介绍
HTML5高级开发与应用实战培训
课程名称 HTML5高级开发与应用实战培训
课程描述 本课程主要针对前端开发相关技术人员,深入讲授当前炙手可热的HTML5新技术。课程的主要内容有以下几个部分:第一部分是讲HTML5的历史,开发框架以及开发工具等基础知识;第二部分讲的是javascript和jQuery的开发和使用以及CSS3的知识;第三部分是讲HTML5语义化便签体系;第四部分是讲HTML5所有的新加功能以及标签等;第五部分讲HTML5本地存储技术和文件系统API;第六部分讲HTML5多线程编程,服务器和客户端数据交互等高级编程技术;第七部分讲常用硬件访问技术;第八部分讲HTML5的3D绘图技术webGL,第九部分讲跨平台的移动开发技术.
本课程内容丰富,涵盖面广,讲解由浅入深,并始终以案例讲解和一线开发经验贯穿始终。通过本课程的学习,可使得学员对HTML5的开发有一个很好的了解,对具体开发工作游刃有余。
授课对象 程序员、架构师等技术开发类岗位,了解Web开发基本技术:包括HTML和DHTML、CSS、Javascript
学习属性 概念/理论: 讲授、启发、提问、个人思考等
步骤/结构: 实战演练+动手练习
实用技巧: 实战经验讲授、案例分析等
学习工具: 工具应用分析、使用练习等
实战案例: 小组研讨、互动讨论、实战演练等
课堂练习: 个人练习、小组研讨等
综合测评: 个人测试等
授课说明 课程形式: 课堂讲授、讲义解析、项目关联
培训环境 机器要求: RAM:8G以上
CPU:双核以上
软件要求: Windows Server 2003+SP2或其他windows 操作系统
浏览器IE10,浏览器opera
浏览器firefox,浏览器chrome
等所有主流浏览器
Dreamweaver
其它要求: 局域网、白板、投影仪
课程内容
HTML5基础和环境
HTML5的前世今生
开发环境准备
Dreamweaver
HTML5 Javascript编程
Javascript核心语法
Javascript面向对象编程
prototype
类的定义(封装),继承,多肽
callee和caller
定时器
DOM
jQuery对象
jQuery选择器
CSS3显示效果
CSS3 选择器
Webfonts,Text wrapping,Text stroke,Border image...等16种常用效果展示
HTML5新增功能和标签(一)
HTML5 head标准写法
HTML5语义化标签体系
自定义数据的使用
兼容性
自定义数据配合JS优点缺点
【实验一】用jQuery显示各种字符效果
【实验二】用语义化标签体系实现一个HTML5页面
HTML5新增标签和功能(二)
HTML5全局属性
contenteditable
Accesskey
dir
HTML5智能表单
color, email, date...等十三种新的输入类型
required, autofocus, pattern...等六个新属性
<datalist>, <output>,<progress>...等五个新的 elements
HTML5表单验证
JS配合HTML5表单校验
checkValidity()方法的使用
HTML5 Canvas
浏览器对Canvas的支持情况
栅格图基本特性
在页面中添加Canvas
Canvas坐标系
描边样式和填充样式
直线和曲线绘制
Canvas的路径(Path)使用
Canvas复杂图形的绘制
Canvas插入图片
Canvas线性渐变和径向渐变
Canvas阴影效果
Canvas的变换技术
Canvas的动画制作
HTML5 SVG
浏览器对SVG的支持检测
矢量图基本特性
在页面中添加SVG
SVG的组件定义标签defs使用
SVG的线性渐变和放射性渐变
SVG路径(PATH)
SVG的PATH中的八种常用命令
【实验三】演示智能表单的各种特性
【讨论一】canvas和SVG的异同
【案例一】动画“窗外下着雨”
HTML5新增标签和功能(三)
拖拽功能
dragable属性
DataTransfer对象
Drag事件
1)ondragstart
2)ondragenter
3)ondragstart
4)ondragenter
5)Ondragover
6)ondrop
7)ondragend
HTML5 Video和Audio标签
浏览机器对Video和Audio的支持检测
HTML5支持的视频和音频格式
Video的播放属性和UI属性
Audio的播放属性和UI属性
HTML5 桌面通知Notifications
webkitNotifications对象的使用
createNotification()方法的参数
设定通知图标
设置标题和内容
用checkPermission检查用户授权
用requestPermission()请求权限
HTML5之前的本地存储技术
Cookies
Flash Storage
IE UserData
Google Gears
Dojo Storage
Window.name(hack)
【讨论三】罗列的这些本地存储技术存在那些局限性
【案例二】实现一个将垃圾拖动到垃圾箱的web页面
【案例三】实现一个页面Audio播放器和一个页面Video播放器
【案例四】弹出一个桌面通知,显示一段时间,让其自动消失
Web Storage
localStorage
sessionStorage
Storage事件处理
Web SQL Database
数据库的建立
数据库的版本管理
事务处理
执行SQL语句
结果集的处理
Indexed Database
版本管理
onupgradeneeded事件
onversionchange事件
事务处理
Object Store的操作
创建Object Store
读/写Object Store
删除Object Store
索引查询
查询条件IDBKeyRange
游标
四种游标方向
【实验四】分别使用Web Storage,Web SQL,IndexDb读写数据
【讨论四】这三种本地存储的性能分析比较
FileSystem API
请求File System
临时(TEMPORARY)文件系统
持久(PERSISTENT)文件系统
读取和处理文件
File/Blob API
FileList API
FileReader API
创建和写入
BlobBuilder API
FileWriter API
目录和文件系统访问
DirectoryReader API
FileEntry/DirectoryEntry
LocalFileSystem
FileReader API
FileSystem & FileWriter API
HTML5 fileSystem API比较好的应用
Native Drag & Drop
Desktop Drag-In
Desktop Drag-Out
【实验五】使用FileApi读写本地文件
HTML5多线程
Web Workers
如何使用Web Worker
主线程与新线程之间的数据交换
要点与局限性
典型案例分析
SharedWorker
如何使用SharedWorker
要点与局限性
XMLHttpRequest2
跨源数据请求
上传文件到服务器端
进度事件(Progress events)
HTML5服务器和客户端通讯模式
Server-Send Event模式
Server-Send Event客户端实现
Server-Send Event服务器端实现
WebSocket模式
轮询
长轮询
Comet
WebSocket机制
WebSocket客户端实现
WebSocket服务器端实现
【案例五】聊天室服务端和客户端实现
离线web应用程序
新增的本地缓存
本地缓存与浏览器网页缓存的区别
manifest文件
浏览器与服务器的交互过程
applicationcache对象
swapcache方法
applicationcache对象的事件
【案例六】一个便签纸的web应用
硬件访问API
geolocation
geolocation的用法
地理信息的定位精度
测试geolocation的方法
兼容性和兼容检测
getCurrentPosition()的使用
latitude和longitude
altitude和altitudeAccuracy
heading和speed
Device Orientation
Speech Input
【案例七】实现一个定位导航web应用
WebGL基本组成
场景
渲染器
光源
物体的形状和材质
【案例八】实现一俩可不同角度观察的汽车的三维模型
jQuery Mobile编程
jQuery Mobile关键特性
jQuery Mobile链接处理方式
jQuery Mobile使用页眉、工具栏和标签栏
jQuery Mobile中的表单和按钮
jQuery Mobile中的列表和表格
List View的使用
Grid layout的使用
jQuery Mobile和CSS结合
jQuery Mobile主题
jQuery Mobile的API
jQuery Mobile事件
触摸事件
方向改变事件
滚动事件
页面隐藏和显示事件
页面初始化
jQuery Mobile的移动设备支持情况
jQuery Mobile和服务器集成
PhoneGap的跨平台开发
PhoneGap的架构
PhoneGap与本地系统iOS,Android等的关系
PhoneGap与HTML5、CSS3、JavaScript的关系
PhoneGap支持的移动平台核心功能
相机访问
文件访问
地理定位
加速器
获取联系人
声音和振动
jQuery Mobile和PhoneGap结合使用
PhoneGap的功能扩展
PhoneGap插件开发
PhoneGap插件安装
【实验六】在Android平台实现:列出PhoneGap支持的Device,分别通过按钮点击实现支持
【实验七】在iOS平台实现:列出PhoneGap支持的Device,分别通过按钮点击实现支持
总结、讨论、答疑
|
|
|
|
|
|
|