• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content

Loading…

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

Like this presentation? Why not share!

重新认识Html5

on

  • 3,238 views

rer

rer

Statistics

Views

Total Views
3,238
Views on SlideShare
2,613
Embed Views
625

Actions

Likes
3
Downloads
34
Comments
0

7 Embeds 625

http://adamlu.com 615
http://xianguo.com 5
http://new.xianguo.com 1
http://reader.youdao.com 1
http://zhuaxia.com 1
http://cache.baidu.com 1
http://www.wumii.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    重新认识Html5 重新认识Html5 Presentation Transcript

    • 重新认识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/col or/” />…
    • 了解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.
    • Thanks! Email: luchaowu@gmail.com MSN : luchaowu@hotmail.com