重新认识Html5
16
重新认识HTML5 鲁超伍|Adam 新浪高级前端工程师 http://adamlu.com/ 我的前端博客 http://revieweb20.com/ 评论全球最酷Web2.0网站 http://t.sina.com.cn/adamlu 我的微博
-
Upload
adam-lu -
Category
Technology
-
view
3.057 -
download
3
description
rer
Transcript of 重新认识Html5
重新认识HTML5
鲁超伍|Adam 新浪高级前端工程师
http://adamlu.com/ 我的前端博客
http://revieweb20.com/ 评论全球最酷Web2.0网站
http://t.sina.com.cn/adamlu 我的微博
主要内容
正确认识HTML5
了解HTML5特性
学习HTML5必备
开始实践HTML5
正确认识HTML5
HTML5不包括CSS3
HTML5是HTML的一个规范
HTML5不是一个概念，对于互联网开发者来说是一个挑战和机遇
HTML5并不遥远，现在就可以应用它
你了解HTML5吗？
了解HTML5特性
语义化标记
图像处理
媒体支持
改善用户界面
网络存储
网络通信
移动设备支持
增强可访问性
了解HTML5特性-语义化标记
头部：<!DOCTYPE html> <meta charset=“utf-8”> <style></style>…
布局：<header> <section> <article>…
内容： <small> <meter> <progress> <time> <command> <datagrid> <output>…
表单：<input type=“datetime/number/range/email/url/color/” />…
了解HTML5特性-图像处理
<canvas> + <svg> (+ JS + Methematic)
Canvas提供了通过JavaScript绘制图形的方法，此方法使用简单但功能强大
两个框架:
http://processingjs.org/ canvas
http://raphaeljs.com/ svg
DEMO: http://modern-
carpentry.com/workshop/html5/waveform/
了解HTML5特性-媒体支持
<video> <audio>
好处：无需安装插件，适用于不支持Flash
如Iphone的移动设备
缺点：浏览器对媒体编码的支持不同
DEMO:
http://www.apple.com/html5/showcase/vid
eo/
了解HTML5特性-改善用户界面
Drag&Drop
FileAPI
ContentEditable
History
Web Worker
DEMO:
http://www.lo2k.net/v7/lab/flickr/index/flickr
_id/23006509%40N00
了解HTML5特性-网络存储
LocalStorage
Web Database
Offline Application Caching
好处：客户端存储操作方便，存储空间增大，离线存储很实用
了解HTML5特性-网络通信
Web Socket
减少不必要的网络流量和延迟等待时间
提供的全双工套接字连接功能，直接与后端服务进行通信
Cross-Document Messaging
DEMO: Simple chat client
了解HTML5特性-移动设备支持
Geolocation
Navigator.onLine
offline Event
WebForms 2.0
了解HTML5特性-增强可访问性
Microdata
例子: Let’s go to <abbr class=“geo”
title=“455.0121;875.0125245”>Beijing</abbr>
ARIA(Accesible Rich Internet Application)
The ARIA spec. defines roles, states and properties to
manage the interface between rich web documents
and assistive technologies. The primary expression of
roles, states and properties in markup languages is
via attributes.
学习HTML5必备
查看HTML5资源网站
http://bbs.9ria.com/forum-52-1.html
http://www.apple.com/html5/
http://www.html5rocks.com/
http://html5demos.com/
http://html5gallery.com/
关于HTML5的书
学习计算机图形编程，学好css和javascript
开始实践HTML5
神器：HTML5+CSS3+JAVASCRIPT
发挥你的想象，开始使用HTML5
使用优雅降级和渐进增强建立浏览器应用
推荐一个框架(Sencha Touch)：http://www.sencha.com/products/touch/
The First HTML5 Mobile Web App Framework
Sencha Touch allows you to develop mobile web apps that look and feel native on iPhone and Android touch devices.
