求知 文章 文库 Lib 视频 iProcess 课程 认证 咨询 工具 讲座 Modeler   Code  
会员   
 
 
 
开班计划 | 技术学院 | 管理学院 | 嵌入式学院 | 电子&机械 | 军工学院 | 定向培养 | 专家指导  
 电话 English
成功案例   品质保证
 
   
成功案例
某集成电 多核体系的软件仿真
某电力能 设计模式原理及应用
南方航空 软件设计方法与实践
某跨国公 软件设计原理与实
爱立信( 软件设计
Moto 设计模式
北京 软件设计原理与实践

 
全部课程 >web开发  
HTML 5应用开发方法与实践
750 次浏览  72 次
Kent.Ben
曾任某知名互联网公司高级开发工程师。
 
时间地点: 北京 深圳 上海 根据报名开班
课程费用:5300元/人
企业内训:可以根据企业需求,定制内训,详见 内训学习手册


本课程介绍使用HTML5新的技术特性,结合实际应用需求创建具有良好用户体验的Web应用程序,课程将通过大量的实例讲解如何有效而适当的应用HTML5和相关技术苦康佳进行实践。

培训目标:
结合实际案例,进行Web前端解析
  • Web前端框架概览
  • Web前端框架实现原理
结合实际APP讲解如何基于HTML进行应用开发,把知识贯穿于案例实践之中
  • APP应用开发案例介绍
  • 首先了解HTML5
  • 使用HTML5 标签语言
  • 在应用开发中使用:HTML5表单
  • 在应用开发中使用:HTML5 音频和视频播放
  • 在应用开发中使用:HTML5 Canvas绘制图形
  • 在应用开发中使用:扩展图形标记
  • 在应用开发中使用:响应式Web设计
  • 在应用开发中使用:使用HTML5 通讯APIs
  • 在应用开发中使用:HTML5 Web Sockets
  • 在应用开发中使用:HTML5 Web Workers
  • 在应用开发中使用:地理定位
  • 在应用开发中使用:HTML5存储
  • 在应用开发中使用:WebSql
  • 在应用开发中使用:Web 应用缓存
  • 在应用开发中使用:移动端前端框架jQuery Mobile
  • 在应用开发中使用:移动封装框架
培训对象:web软件开发人员
学员基础:了解HTML、JavaScript、CSS有软件开发经验
授课方式: 定制课程 + 案例讲解 + 小组讨论,60%案例讲解,40%实践演练
培训内容:2天
结合实际案例,进行Web前端解析
Web前端框架概览 Web前端技术架构:
  • 展示层:html5,css
  • 控制层:JavaScript
  • 后端服务接口:ajax,restful,node.js
  • Web前端运行原理解析
    Web前端当前开发趋势
    典型的web前端开发框架:
  • jQuery、
  • Bootstrap
  • AngularJS
  • ReactJS
    Web前端框架实现原理 主流JS框架实现剖析:jQuery、BootstrapAngularJS,ReactJS,Node.JS
    浏览器工作原理
  • Html加载
  • Css渲染
  • Js 处理
  • 事件与响应的过程模型
  • JavaScript对象生命周期管理
  • JavaScript对象关系绑定:继承、多态
    JS框架实现原理剖析
  • 类库的组织
  • JS事件响应模型
  • Html对象注入方式
  • 应用JS的绑定与注入
    结合实际APP讲解如何基于HTML进行应用开发,把知识贯穿于案例之中
    APP应用开发 APP功能需求介绍
    案例介绍 从前端到后端的架构蓝图
    基于HTML5应用开发框架介绍
    选择HTML5要解决的APP开发问题定位
    开始我们的HTML5实践之旅!
    首先了解HTML5 HTML5的版本
    WHATWG and W3C 规范
    HTML5的新特性
    HTML5能做什么
    HTML5能做什么对HTML5和CSS3的支持
    检测浏览器对HTML 5的支持
    使用HTML5 标签语言 HTML5页面结构
    HTML5 DOCTYPE
    根元素
    字符编码
    HTML5新增的语义元素
    其他新增的元素
    验证HTML5页面及显示页面大纲
    动手实践案例:标签语言小练习

     

    在应用开发中使用:HTML5表单 HTML 4的困惑
    HTML 5新增的输入组件
    HTML 5新增的输入属性
    测试浏览器对HTML5表单元素的支持
    HTML5的表单验证
    (1) 定制验证错误消息
    (2) 定制验证显示方式
    (3) 取消验证
    动手实践案例:HTML5表单的应用
    在应用开发中使用:HTML5 音频和视频播放
    video元素及其属性 
    视频编解码器 
    视频转换工具
    各种浏览器支持些什么格式 
    旧浏览器的过渡解决方案 
    视频与脚本--简单的视频播放器
    音频的嵌入与控制操作
    动手实践案例: 控制音频和视频播放
    在应用开发中使用:HTML5 Canvas绘制图形 网页中直接绘制图表也曾经是控件垄断的天下,各种图报表的绘制曾经困扰着广大开发者,现在HTML5中引入了原生的图形绘制工具,可以让你在HTML代码中直接绘制图表(矢量图与动画),本节课程将介绍如何使用这一功能
    <canvas>元素
    检查浏览器的支持情况
    基本图形绘制:画线,矩形,曲线
    路径,
    变换: 平移,缩放,旋转
    渐变:线性渐变,径向渐变
    绘制文本,绘制图像
    动手实践案例:Canvas绘制图形
    在应用开发中使用:扩展图形标记 动手实践案例:
  • 使用Canvas对象绘制位图,通过使用这些API可以实现位图的加载,水印文字的绘制,
  • 丰富的像素级位图操作,
  • 在页面内实现滤镜效果。
    在应用开发中使用:响应式Web设计 自适应网页设计实现网站在多种浏览设备(从桌面电脑显示器到移动电话或其他移动产品设备)上阅读和导航,
    自适应带来的效率:减少缩放、平移和滚动。响应式Web设计原则,
    如何把网站变成响应式的。
    动手实践案例:响应式Web设计
    在应用开发中使用:使用HTML5 通讯APIs 跨文档消息通信
    源安全
    检测浏览器对postMessage的支持
    XMLHttpRequest Level2
    XMLHttpRequest Level2新增事件
    检测浏览器对XMLHttpRequest2的支持
    跨域访问注意事项。
    动手实践案例:使用HTML5 通讯APIs
    在应用开发中使用:HTML5 Web Sockets HTTP特点
    如何实现实时(real-time)通讯
    WebSocket特性
    WebSocket与轮询方式的比较
    Web Socket建立方法
    WebSocket 的事件
    WebSocket的属性
    渐进增强和降级处理
    动手实践案例:使用Web Sockets
    在应用开发中使用:HTML5 Web Workers Web Workers介绍
    Multi-core processor architecture
    Web Worker communication
    使用 Web Workers APIs
    动手实践案例:使用Web Workers
    在应用开发中使用:地理定位 地理定位介绍
    在浏览器中使用地理定位
    定位的技术背景
    openstreetmap上显示当前位置 
    使用googlemaps追踪位置 
    案例应用实践,练习指导
    动手实践案例:地理定位的应用
    在应用开发中使用:HTML5存储 为什么需要本地存储
    本地存储的限制
    Web存储的两种类型
    判断浏览器是否支持WebStorage
    存取信息
    storage事件
    Web SQL
    IndexedDB
    在应用开发中使用:WebSql Web SQL Database 的异步访问API
    SQLite 是一款轻型的数据库的访问方法
  • openDatabase:这个方法使用现有数据库或新建数据库来创建数据库对象
  • transaction:这个方法允许我们根据情况控制事务提交或回滚
  • executeSql:这个方法用于执行真实的 SQL 查询。
  • WebSQL的数据库连接管理
    WebSQL的并发访问与性能优化
    动手实践案例:WebSql的应用
    在应用开发中使用:Web 应用缓存 什么是应用程序缓存(Application Cache)?
    应用程序缓存为应用带来三个优势:
  • 离线浏览 - 用户可在应用离线时使用它们
  • 速度 - 已缓存资源加载得更快
  • 减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。
  • HTML5 Cache Manifest 实例
    manifest 文件解析:
  • CACHE MANIFEST
  • NETWORK
  • FALLBACK
  • 缓存的更新与常见问题处理方法
    动手实践案例:Web 应用缓存
    在应用开发中使用:移动端前端框架jQuery Mobile jQuery Mobile设计的技术思考和商业思考
    jQuery Mobile入门初体验;
    使用页眉、工具栏和标签栏;
    jQuery Mobile中的表单和按钮;
    jQuery Mobile中的列表;
    jQuery Mobile和CSS结合;
    jQuery Mobile主题;
    jQuery Mobile的API;
    和服务器集成;
    jQuery Mobile和HTML5开发框架PhoneGap结合
    动手实践案例:通过使用JQuery框架创建一个TodoList的应用,使用HTML,CSS,JAVASCRIPT,JQUERY,以及HTML5 Local Storage.技术实现
    在应用开发中使用:移动封装框架 PhoneGap移动开发框架解析。
    基于PhoneGap使用标准的Web技术(HTML5,CSS3和JavaScript)的跨平台开发。应用针对每个平台的封套内执行,并依靠符合标准的API绑定来访问每个设备的传感器,数据和网络状态。.
    基于Cordova的跨平台应用开发
    Cordova核心解析:
    Architecture
  • WebView
  • Web App
  • Plugins
  • Development Paths
  • 安装 Cordova
  • 动手实践案例:创建第一个Cordova应用(跨平台,Android,iOS,windows)
  • 创建插件
  • 在原生应用中包裹Cordova
  • 在宿主和Cordova应用之间传递数据
    案例总结 开发技术列表
    问题解答
     
    750 次浏览  72 次
    其他人还看了课程
    Python 编程方法与应用开发  11615 次浏览
    Web前端技术-Vue.JS开发  606 次浏览
    Web前端框架、选型与应用  1556 次浏览
    Python及数据分析  3395 次浏览
    HTML5游戏开发原理与实践  1023 次浏览
    HTML5 娱乐多媒体开发实践  1035 次浏览
    定制内训


    咨询服务:架构评估与优化
    咨询目标
    对现有的架构进行评估,发现问题,并优化
    咨询范围 业务架构,应用架构,数据架构,技术架构
    咨询方式 对现有架构进行建模,然后诊断问题,对问题进行集成分析,设计优化方案,指导团队实施优化,最终效果评估。
    成功案例 中国移动广西分公司,中国电信
    详情咨询:010-62670969, zhgx@uml.net.cn

    最新活动计划
    企业架构师(TOGAF官方认证)3-9[北京]
    大数据平台架构与应用实战 2-24[北京]
    基于UML和EA进行系统分析设计 2-28[北京]
    软件架构设计方法、案例与实践 3-22[北京]
    人工智能,机器学习和深度学习 2-12[上海]
    产品经理与产品管理 2-17[深圳]
    敏捷开发过程与项目管理 3-19 [成都]
     2020年工程日历
     ArchiMate 3.1 图解
     
     
    某通信设备企业  Python数据分析与挖掘
    北京  需求分析师能力认证
    某电信运营供应商  应用UML进行面向对象分析设计
    某综合性科研机构  人工智能与机器学习应用
    中国平安  测试质量控制与管理