HTML5 & FRIENDS

Intro to HTML5

Agenda

  • 什么是 HTML5 ?
  • HTML5 都包含哪些内容?

什么是 HTML5 ?

HTML5 是定义了 HTML 的标准的最新演进版本。这个术语代表了两个不同的概念:

  • 它是 HTML 语言的一个新的版本,具有新的元素,属性和行为;
  • 以及可以使 Web 站点和应用更加多样化和功能更强大的更丰富的一套技术。这套技术有时被称作 HTML5 & Friends 而且往往被缩减到仅是 HTML5。

W3C HTML5 和 "HTML5"

从技术上来讲,HTML5 只是来源于 W3C 的一个规范。但是今天我们大多数人谈到 HTML5 的时候,其实是在描述现在正在发生的针对 Web 平台的巨大变化。对于正式的标准,我们可以称其为 W3C HTML5。比如 W3C HTML5 把 video,audio 这些标记升级为 Web 的“一等公民”。

我们大家平常所说的 HTML5,通常指的是一个更大的概念。包括并不是 Web 本身的部分,例如硬件设备访问,二进制数据,文件系统,多线程并发处理等。

简而言之,W3C HTML5 规范是在其上面发生的所有有趣的 HTML5 开发的基础和框架。

W3C HTML5 的重要性所在

虽然HTML5规范的实际内容只是对最近三四年Web平台上最先进技术的一个正式描述。但是他的重要性在于把多年来的经验进行了文档化,同时也试图移除大部分现在被认为是错误的东西。

他也为各种 DOM API 和 HTML 元素带来了很大的一致性和完整性。

并且有可能最重要的是,它使各种浏览器厂商达成一致。这意味着Web开发者针对W3C HTML5规范开发的程序应该可以在所有的现代浏览器上工作正常,而无需浏览器特定的功能。

W3C HTML5 的主要内容

  • SEMANTICS
  • OFFLINE & STORAGE
  • DEVICE ACCESS
  • CONNECTIVITY & REALTIME
  • MULTIMEDIA
  • 3D, GRAPHICS & EFFECTS
  • PERFORMANCE & INTEGRATION
  • CSS3 & STYLING

SEMANTICS

能够让你更恰当地描述你的内容是什么:

  • 简洁的语法
  • 新的 outline 元素
  • HTML5 的表单
  • 供应用程序使用的元素和属性
  • 其他语义元素

OFFLINE & STORAGE

能够让网页在客户端本地存储数据以及更高效地离线运行

  • 在线和离线事件
  • 离线 Web 应用
  • sessionStorage 和 localStorage
  • IndexedDB
  • File API(Web中使用文件)

DEVICE ACCESS

能够处理各种输入和输出设备

  • Media Capture
  • 触控事件
  • 地理位置服务
  • 检测设备方向
  • 指针锁定 API
  • Pick Contacts Intent
  • Vibration API
  • Battery Status API
  • Calendar API
  • The Messaging API
  • Permission for Device API Access
  • The System Information API
  • . . .
http://www.w3.org/TR/tr-groups-all#tr_Device_APIs_Working_Group

CONNECTIVITY / REALTIME

能够让你和服务器之间通过创新的新技术方法进行通信

  • Web Sockets
  • Server-sent events
  • WebRTC

MULTIMEDIA

使 video 和 audio 成为了 Web 中的"一等公民"

  • HTML5 音视频
  • Camera API
  • Track & WebVTT

GRAPHICS, 3D & EFFECTS

渲染的更多选择

  • Canvas 2D
  • SVG
  • WebGL

SVG

SVG(Scalable Vector Graphic)格式已经存在了一个很长的时间,并且有些浏览器已经能够在Web页中嵌入SVG图片。SVG最终开始被所有的浏览器厂商采用,增加了功能强大的API,并允许完全访问和操作所包含的元素(即一个真正的一级元素)。

SVG Tiger
http://caniuse.com/#search=svg

WebGL

WebGL是Canvas 3D Context,并且它基本上是一个基于Web的硬件加速OpenGL API。WebGL可以给Web带来更多的适用领域,包括Web的3D游戏。

Euphony
http://www.chromeexperiments.com/detail/euphony/?f=

PERFORMANCE & INTEGRATION

提供了非常显著的性能优化和更有效的计算机硬件使用

  • Web Workers
  • XMLHttpRequest Level2
  • 更快的 JavaScript 引擎
  • History API
  • 全屏 API
  • Drag & Drop
  • requestAnimationFrame

CSS3 / STYLING

  • Border
  • Transform
  • Transition
  • Animation
  • New Selector
  • Multi-columns
  • Typography
  • Flexible boxes
  • ...

对 Web 开发的影响和 Web 开发的趋势

  • 响应式设计(RWD - Responsive Web Design)
  • Mobile First
  • Mobile Webs, Apps, or Hybrid?
  • Web 应用的新领域
  • 新的工具和技术
  • ...

<Thank you!>

Feel free to contact me if you have any question.