新技术 新可能

HTML5 & CSS3 & hybrid API &...

lvxiaobao@360.cn
2014/9/26

H5是什么?

就是HTML5

HTML5是什么?

HTML4.0

  • 1999年发布
  • 沿用至今

HTML5.0

  • 2008年发布第一份草案
  • 预计2014年底发布正式标准

HTML5现状

  • 现代浏览器(除去IE6-8)逐渐支持
  • 移动端的支持程度好于PC端
  • PC端渐进增强
  • 移动端全面使用,微信页面,hybrid App
  • 移动端性能低下(android4.0以上情况稍好,低端Android机是噩梦)

为什么移动端选择H5

  • 更少的代码
  • 更快的开发速度
  • 更轻的应用(耗电、流量、发热、卡机)
  • 相比原生应用,方便的更新版本,快速迭代
  • 同一个内核(webkit),不用考虑IE
  • 乔布斯:thoughts on flash 中文版

那些令人amazing的新特性

举个例子:本高大上的PPT

让以前的不可能变为可能

令人amazing的新特性们

先从表单开始说起吧~

HTML5一大悍将canvas

  • 绘图能力
  • 图像处理能力
  • 游戏,取代flash游戏
  • HTML标签无法实现的动画,取代gif图片

canvas是什么?

canvas绘图能力,能做什么?

canvas图像处理能力,能做什么?

实用性

  • 检测视频是否正常播放
  • 检测logo白边
  • 自动裁剪出合格图片

H5对音视频的原生支持

<video>、<audio>标签

浏览器变成一个解码器

  • 无需依赖flash player
  • 页面无需加载flash播放器
  • 更“轻”的页面,更适合移动端
  • 更多的控制权交给开发者,自己开发炫酷的播放器

本地存储能力的提升

cookie(4KB) ==> localStorage(5MB)

==>本地数据库(本地执行sql语句)

本地存储能干什么呢?

发挥你的想象力

离线应用

web应用的致命缺陷:断网了怎么办?

浏览器 = 下载器 + 阅读器 + 脚本解析器

离线web应用:像原生应用那样,断网后照常使用。

H5第二悍将websocket

实时通信的桥梁

这么多年来,web一直在http协议下玩耍

  • 端/服-----请求/响应
  • 无连接
  • 无状态

socket通信搬到web ==> websocket

  • 端/服保持连接,实时通信
  • 双向数据传输,服务器可以主动推送数据给客户端

websocket可以做什么,请大胆想象

  • 本高大上的PPT
  • 网页版聊天室,已被玩坏
  • 。。。

获取当前地理位置

原生支持拖动操作

更自然的交互

移动端更佳

看一个例子

未完待续。。。

敬请期待CSS3、响应式、hybrid API

Q & A

<Thank You!>

Powered By nodePPT v0.8.9-1