Your SlideShare is downloading. ×
HTML5概览
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

HTML5概览

1,022
views

Published on

Published in: Technology

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,022
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
13
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. HTML5 概览鲁超伍 / Adam Luhttp://adamlu.com/ @adamlu
  • 2. Who am I• Software Engineer at Yahoo! R&D Beijing• 天地会HTML5/CSS3版版主• 《 YUI3 Cookbook 》中文版译者• 我的博客: http://adamlu.com• 我的微博: http://weibo.com/adamlu
  • 3. 议程• 什么是 HTML5• HTML5 能做什么• HTML5 摘要• CSS3 新特性• 移动上的 HTML5
  • 4. 时间轴• 1995 Nov – HTML 2.0 由 IETF 发布• 1997 Jan – HTML3.2 发布 , W3C• 1997, Dec – HTML 4.• 1999, Dec – HTML 4.01 发布 .• 2000, Jan – XHTML 1.0• 2001, May – XHTML 1.1
  • 5. 之后发生了什么?
  • 6. W3C 和 XHTML2• 2002 年 W3C 开始工作在 XHTML2 上• 这是一个灾难• ……
  • 7. WHATWG• W3C 指定的标准完全理论化而与网站设计者的需 求无关• 2004 年, Ian Hickson 提议扩展 HTML 来创建 Web 应用程序• 提议被否决• WHATWG 形成 (Web Hypertext Applications Working Group)• Ian Hickson 成为 HTML5 的编辑• 2006 年, W3C 采用了 WHATWG 所做的工作作 为基础重新统一了规范
  • 8. 什么是 HTML5HTML5 是新的 HTML 标准 !
  • 9. HTML5 HTML + CSS + JSStructure + Presentation + Behavior
  • 10. 为什么 HTML5• 已存在的网站可以移植到 HTML5• 渐进增强• 旧浏览器将仍能使用页面• Modernizr: http://www.modernizr.com/
  • 11. HTML5 技术语义:作为 HTML5 的前端和中心,语义学能够赋予框架结构以意义。更详尽的标签组合以及资源描述框架,微型数据和微型格式将为你和你的用户打造一套数据驱动的网络。
  • 12. HTML5 技术离线和存储:在应用缓存,本地存储,索引数据库和文件应用程序接口的帮助下, HTML5 应用甚至能在没有因特网连接的情况下工作。
  • 13. HTML5 技术设备访问:地理定位只是一个开始, HTML5 能够让应用程序访问连结到你计算机上的任何设备。
  • 14. HTML5 技术连结:更有效率的连结性将能带来更实时的聊天,更快的游戏速度以及更好的沟通交流。服务器与客户端之间的网络套接字和邮件摄像头将比以往更加便捷。
  • 15. HTML5 技术多媒体:音频和视频可是 HTML5 世界的一等公民,他们将与你的应用程序和网站和睦共处。灯光,摄影,开始 !
  • 16. HTML5 技术平面和三维效果:在 SVG, Canvas, WebGL 和 CSS33D 效果这些特性之间,你一定能找到让你的用户眼花缭乱,美不胜收的创意。
  • 17. HTML5 技术性能和集成:使你的应用程序和网络在大量诸如 WebWorkers 和 XMLHttpRequest 2 这样的技术下更加快速。没有人愿意停下了等你跟进的。
  • 18. HTML5 技术CSS3 :在不牺牲你的讲义结构和性能的情况下, CSS3 提供了大量的样式效果和加强你的网络应用。另外 WOFF(WebOpen Font Format) 提供了前所未有的印刷灵活性控制。
  • 19. HTML5 能做什么 http://www.cuttherope.ie/
  • 20. HTML5 能做什么 http://read.douban.com
  • 21. HTML5 能做什么https://touch.www.linkedin.com
  • 22. HTML5 能做什么http://www.thewildernessdowntown.com/
  • 23. HTML5 摘要• 语义化标签• 图像处理• 媒体支持• 设备支持• 改善用户界面• 网络存储• 网络通信
  • 24. 语义化标签• 很少的头代码 • 不需要 type 属性<!DOCTYPE HTML> <script src=”foo.js”></script><html><head> <link href=”foo.css”></link><meta charset=”utf-8”><title>foo</title></head> ...
  • 25. 语义化标签Section :<article><hgroup><h1>Apples</h1><h2>Tasty, delicious fruit!</h2></hgroup><p>The apple is the pomaceous fruit of the apple tree.</p><section><h1>Red Delicious</h1><p>These bright red apples are the most common found inmany supermarkets.</p></section><section><h1>Granny Smith</h1><p>These juicy, green apples make a great filling for applepies.</p></section></article> Example: https://youzee.com/en/
  • 26. 语义化标签 不再需要 <div id=“header”></div> <div class=“section”></div> <div class=“article”></div> <div id=“footer”></div>
  • 27. 语义化标签<output name="result"></output><progress id="p" max=100><span>0</span>%</progress><meter value=6 max=8>6 blocks used (out of 8 total)</meter>Voter turnout: <meter value=0.75><img alt="75%"src="graph75.png"></meter>Tickets sold: <meter min="0" max="100"value="75"></meter>
  • 28. 语义化标签Details 和 Summary :<details><summary>Copying... <progress max="375505392"value="97543282"></progress> 25%</summary><dl><dt>Transfer rate:</dt><dd>452KB/s</dd><dt>Local filename:</dt><dd>/home/rpausch/raycd.m4v</dd></dl></details>
  • 29. 语义化标签Address :<address><a href="../People/Raggett/">DaveRaggett</A>, <ahref="../People/Arnaud/">Arnaud Le Hors</A>,contacts for the w3c HTML activity </address>Address 应用于最近的 article 或 body 标签
  • 30. 语义化标签Data 属性:<div class="spaceship" data-ship-id="92432" data-weapons="laser 2" data-shields="50%" data-x="30" data-y="10" data-z="90"><button class="fire"></div><script>div = document.getElementsByTagName(‘ div’)[0];spaceships[div.dataset.shipId].fire();</script>
  • 31. 语义化标签Figure 和 Figure 标题:<figure><img src="bubbles-work.jpeg" alt="Bubbles, sitting in hisoffice chair, works on his latest project intently.“ /><figcaption>Bubbles at work</figcaption></figure>
  • 32. 语义化标签Time 和发布日期属性:<time pubdate datetime="2009-10-09T14:28-08:00"></time>菜单和命令:<menu type="toolbar"><command type="radio" radiogroup="alignment"checked="checked" label="Left" icon="icons/alL.png"onclick="setAlign(left)"><command type="radio" radiogroup="alignment"label="Center" icon="icons/alC.png"onclick="setAlign(center)"><command type="radio" radiogroup="alignment"label="Right" icon="icons/alR.png"onclick="setAlign(right)"></menu>
  • 33. 语义化标签Mark 用户高亮某些东西,<p><mark>Momentum is preserved acrossthe wormhole. Electromagnetic radiationcan travel in both directions through awormhole, but matter cannot.</mark></p>而 Strong 则是用来表示重要。<p>When a wormhole is created, a vortexnormally forms. <strong>Warning: Thevortex caused by the wormhole openingwill annihilate anything in itspath.</strong></p>
  • 34. 语义化标签并不是所有的导航都要用 <nav><nav></nav> 只表示主导航,例如底部的navArticle 是页面的唯一内容<article></article>Hgroup 最高级别的头部组<hgroup></hgroup>
  • 35. 语义化标签Itemscope 和 Itemprop :<div itemscope><p>My name is <spanitemprop="name">Elizabeth</span>.</p></div><div itemscope><p>My name is <span itemprop="name">Daniel</span>.</p></div><div itemscope><p>My name is <span itemprop="name">Neil</span>.</p><p>My band is called <span itemprop="band">Four PartsWater</ span>.</p><p>I am <span itemprop="nationality">British</span>.</p></div>http://jsfiddle.net/adamlu/vKurD/
  • 36. 图像处理Canvas :<canvas id=”square”> fallback content </canvas><script>var canvas = document.getElementById(‘square’);context = canvas.getContext(‘2d’);context.fillStyle = “#000000”;context.fillRect(0, 0, 100, 100);</script>Example: http://mudcu.be/sketchpad/
  • 37. 媒体支持<audio src=”test.ogg”></audio> <video controls/><audio src=”test.ogg” autoplay <source src=”cat.mp4” />controls loop> <a <source src=”cat.ogg” />href=”test.ogg”>download</a> </video></audio>http://html5.grooveshark.com/ http://m.youtube.com/
  • 38. 媒体支持Video 格式支持:Ogg Theora/Voribs- Firefox 3.5+- Chrome- OperaMPEG-4 H.264/AAC- Safari- Chrome- Opera
  • 39. 设备支持原生地理位置定位:navigator.geolocation.getCurrentPosition(function(position){ position.coords.latitude, position.coords.longitude;}, errorCallback, config);GPSA-GPS基站信息WiFi 位置DEMO: http://chrome.360.cn/html5_labs/demos/geolocation/index.htmlDEMO: https://maps.google.com/
  • 40. 设备支持输入类型:<input type=”email” />tel datetime search date email range url color不支持的浏览器默认为 text.DEMO: http://jquerymobile.com/demos/1.1.0-rc.1/docs/forms/textinputs/
  • 41. iPhone 上不同 input 类型时键盘的输入框变化
  • 42. 设备支持桌面通知:if (window.webkitNotifications.checkPermission() == 0) { // 0 isPERMISSION_ALLOWED window.webkitNotifications.createNotification(icon.png, NotificationTitle, Notification content...).show(); } else { window.webkitNotifications.requestPermission(); }http://jsfiddle.net/adamlu/neunM/
  • 43. 改善用户界面拖拽: 可编辑的内容—把一个元素变为可 编辑的区域<div draggable=”true”></div> <script>addEvent(div, “dragstart”, function(e){ document.getElementsByTagNamee.dataTransfer.setData(‘foo’, ‘bar’); (p)[0].contentEditable = true;}, true); </script>addEvent(div, ‘dragend’, function(e){e.dataTransfer.getData(‘foo’);}, true);DEMO: http://pi-squared.co.za/development/html5-touch/index.html
  • 44. 改善用户界面Web Worker :new Worker("worker.js");无法访问 DOM 或页面,需要通过 postMessage 接口来通信。DEMO: http://html5demos.com/worker
  • 45. 改善用户界面History API :pushState(data, title [, url]);replaceState(data, title [, ulr]);window.addEventListener("popstate", function(e){e.state;}Example: https://github.com/adamlu/yui3-cookbook
  • 46. 网络存储Storage : Application Storage/Offline :sessionStorage.setItem(key, value); <html manifest=”cache.manifest”>sessionStorage.getItem(key); 检测 online 或 offlinelocalStorage.setItem(key, value); window.addEventListener(online,localStorage.getItem(key); online, true);localStorage.removeItem(key); window.addEventListener(offline, online, true); 不再需要依赖 Cookies ,插件和针对浏览器的 APIDEMO: http://www.webkit.org/demos/sticky-notes/
  • 47. 网络通信跨域通信:postMessage(string);onMessage(event) { event.data; }Web Sockets :var ws = new WebSocket("ws://hostname:80/");ws.onmessage = function (event) { event.data };ws.onclose = function () {};ws.onopen = function () {};DEMO: http://html5demos.com/web-socket
  • 48. CSS3 新特性• 圆角• 阴影• 渐变• 颜色• 背景• 边框• 字体• 变换 DEMO: http://jsfiddle.net/adamlu/xGuKy/• 过渡• 动画
  • 49. CSS3 能做什么DEMO: http://demo.tutorialzine.com/2009/12/colorful-clock-jquery-css/demo.html
  • 50. CSS3 能做什么DEMO: http://anthonycalzadilla.com/css3-ATAT/index-bones.html
  • 51. CSS3 能做什么DEMO: http://demo.tutorialzine.com/2009/11/hovering-gallery-css3-jquery/demo.php
  • 52. 移动上的 HTML5• 移动网站在增长• 移动用户在五年后会超过桌面网络用户• 2016 年之前将有 21 亿移动设备装有支持 HTML5 的浏览器• HTML5 对于移动非常好• 不需要下载原生应用• 同一套代码,发布到各个流行的设备上• 大量的 HTML5 特性已经在移动浏览器上被支持
  • 53. http://html5test.com/
  • 54. 移动上使用 HTML5 的网站
  • 55. 移动上使用 HTML5 的网站
  • 56. 移动上使用 HTML5 的网站
  • 57. 移动上使用 HTML5 的网站
  • 58. Mobile 在增长 Source: Nielsen (January 2012)
  • 59. 对比原生应用移动用户更喜欢浏览器浏 览 ( 来源 : Adobe)
  • 60. Web App 和 Native App Web App Native App Comparation 只需要键入一个地址 必须被发布并下载 安装和更新 访问网站分析,基于 Apple Store, Google Play 获得价值 SaaS 的增值策略 渐进增强 依照规范 终端体验 GeoLocation, Offline 摄像头 , 陀螺仪 , 话筒 , 访问硬件特性Storage, Canvas, Audio, 指南针 , 加速计 , GPS Video, Camera HTML5, CSS3, Object-C, Java, C++, 开发者经验 Javascript, UI 库 J2EE, .NET, Cocoa TouchWeb Workers, 图像加速 , 直接运行固件特性 , GPU 性能 WebGL 加速 , 多线程
  • 61. http://mobilehtml5.org/
  • 62. HTML 头<meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1, user-scalable=no"><link rel="apple-touch-icon" href="images/favicon.png" />
  • 63. 高级表单<input type="number" pattern="[0-9]*" /><input type="email” required /><input type="url" /><input type="tel" /><input type="time" /><input type="date" /><input type="month" /><input type="week" /><input type="datetime" /><input type="datetime-local" />
  • 64. JavaScript 事件window.addEventListener("touchstart", function(e){//e.touches;}, false);window.addEventListener("orientationchange", function(e){//window.orientation(0 is portrait, 90 and -90 are landscape)}, false);window.addEventListener("deviceorientation", function(e){//e.alpha//e.beta//e.gamma}, false);window.addEventListener("devicemotion", function(e){//e.acceleration.x/y/z//e.accelerationIncludingGravity.x/y/z}, false);
  • 65. 设备支持window.devicePixelRationavigator.connection(Android2.2+)//navigator.connection object{ "type": "3", "UNKNOWN": "0", "ETHERNET": "1", "WIFI": "2", "CELL_2G": "3", "CELL_3G": "4"}
  • 66. Mobile 上的 CSS-webkit-text-size-adjust: none;-webkit-user-select: none;-webkit-touch-callout;-webkit-tap-highlight-color: transparent;position: fixed;input[type="search"]{ -webkit-appearance: none/textfield;}
  • 67. Mobile Web App http://app.ft.com
  • 68. 移动优先的响应式设计响应式网站设计是建议设计和开发应该根据屏幕大小、平台和转向来响应用户行为和环境的方法。
  • 69. CSS3 媒体查询@media screen and (max-width: 600px) { .class { background: #ccc; } .nav{display:none}; .dropdown-menu{display:block;}}@media screen and (min-width: 900px) { .class { background: red; }}@media screen and (max-device-width: 480px) { .class { background: 000; }}http://mediaqueri.es/
  • 70. http://pinchzoom.com/uploads/anatomy-of-a-html5-mobile-app.png
  • 71. Mobile 设计模式http://mobile-patterns.com/
  • 72. 相关框架• 模板: http://html5boilerplate.com/mobile• 打包工具: – http://phonegap.com/ – http://www.appmobi.com/• 应用程序框架: – http://jquerymobile.com/ – http://yuilibrary.com/ – http://sproutcore.com/ – http://www.sencha.com/ – http://zeptojs.com/• HTML5 游戏框架: – http://www.limejs.com/ – http://craftyjs.com/
  • 73. Mobile 调试工具• 调试: – WEINRE – WebKit Remote Debugging• 模拟器: – Mobile Emulators and Simulators – Android Emulator – iOS Simulator• 性能监测: – Mobile PerfBookmarklet – http://www.blaze.io/mobile/
  • 74. 兼容性测试• http://haz.io/• http://caniuse.com/• http://css3test.com/• http://css3generator.com/• http://css3info.com/• http://html5test.com/• http://css3please.com/• http://mobilehtml5.org/• http://quirksmode.org/m/
  • 75. HTML5 is the future of Mobile!