HTML5概览

HTML5概览鲁超伍 / Adam Lu http://adamlu.com/ @adamlu

Who am I • Software Engineer at Yahoo! R&D Beijing
• 天地会HTML5/CSS3版版主 • 《YUI3 Cookbook》中文版译者 • 我的博客：http://adamlu.com • 我的微博：http://weibo.com/adamlu

议程 • 什么是HTML5 • HTML5能做什么 • HTML5摘要 • CSS3新特性 •
移动上的HTML5

时间轴 • 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

之后发生了什么？

W3C和XHTML2 • 2002年W3C开始工作在XHTML2上 • 这是一个灾难 • ……

WHATWG • W3C指定的标准完全理论化而与网站设计者的需求无关 • 2004年，Ian Hickson提议扩展HTML来创建Web 应用程序 • 提议被否决
• WHATWG形成(Web Hypertext Applications Working Group) • Ian Hickson成为HTML5的编辑 • 2006年，W3C采用了WHATWG所做的工作作为基础重新统一了规范

什么是HTML5 HTML5是新的HTML标准！

HTML5 HTML + CSS + JS Structure + Presentation +
Behavior

为什么HTML5 • 已存在的网站可以移植到HTML5 • 渐进增强 • 旧浏览器将仍能使用页面 • Modernizr: http://www.modernizr.com/

HTML5技术语义：作为HTML5的前端和中心，语义学能够赋予框架结构以意义。更详尽的标签组合以及资源描述框架，微型数据和微型格式将为你和你的用户打造一套数据驱动的网络。

HTML5技术离线和存储：在应用缓存，本地存储，索引数据库和文件应用程序接口的帮助下，HTML5应用甚至能在没有因特网连接的情况下工作。

HTML5技术设备访问：地理定位只是一个开始，HTML5能够让应用程序访问连结到你计算机上的任何设备。

HTML5技术连结：更有效率的连结性将能带来更实时的聊天，更快的游戏速度以及更好的沟通交流。服务器与客户端之间的网络套接字和邮件摄像头将比以往更加便捷。

HTML5技术多媒体：音频和视频可是HTML5世界的一等公民，他们将与你的应用程序和网站和睦共处。灯光，摄影，开始!

HTML5技术平面和三维效果：在SVG, Canvas, WebGL和CSS3 3D效果这些特性之间，你一定能找到让你的用户眼花缭乱，美不胜收的创意。

HTML5技术性能和集成：使你的应用程序和网络在大量诸如Web Workers和XMLHttpRequest 2这样的技术下更加快速。没有人愿意停下了等你跟进的。

HTML5技术 CSS3：在不牺牲你的讲义结构和性能的情况下，CSS3提供了大量的样式效果和加强你的网络应用。另外WOFF(Web Open Font Format)提供了前所未有的印刷灵活性控制。

HTML5能做什么 http://www.cuttherope.ie/

HTML5能做什么 http://read.douban.com

HTML5能做什么 https://touch.www.linkedin.com

HTML5能做什么 http://www.thewildernessdowntown.com/

HTML5摘要 • 语义化标签 • 图像处理 • 媒体支持 • 设备支持 •
改善用户界面 • 网络存储 • 网络通信

语义化标签 • 很少的头代码 • 不需要type属性 <!DOCTYPE HTML> <html> <head> <meta
charset=”utf-8”> <title>foo</title> </head> ... <script src=”foo.js”></script> <link href=”foo.css”></link>

语义化标签 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 in many supermarkets.</p> </section> <section> <h1>Granny Smith</h1> <p>These juicy, green apples make a great filling for apple pies.</p> </section> </article> Example: https://youzee.com/en/

语义化标签不再需要 <div id=“header”></div> <div class=“section”></div> <div class=“article”></div> <div id=“footer”></div>

语义化标签 <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>

语义化标签 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>

语义化标签 Address： <address> <a href="../People/Raggett/">Dave Raggett</A>, <a href="../People/Arnaud/">Arnaud Le Hors</A>,
contacts for the w3c HTML activity </address> Address 应用于最近的article或body标签

语义化标签 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>

语义化标签 Figure和Figure标题： <figure> <img src="bubbles-work.jpeg" alt="Bubbles, sitting in his office
chair, works on his latest project intently.“ /> <figcaption>Bubbles at work</figcaption> </figure>

语义化标签 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>

语义化标签 Mark用户高亮某些东西， <p><mark>Momentum is preserved across the wormhole. Electromagnetic radiation
can travel in both directions through a wormhole, but matter cannot.</mark></p> 而Strong则是用来表示重要。 <p>When a wormhole is created, a vortex normally forms. <strong>Warning: The vortex caused by the wormhole opening will annihilate anything in its path.</strong></p>

语义化标签并不是所有的导航都要用<nav> <nav></nav>只表示主导航，例如底部的nav Article是页面的唯一内容 <article></article> Hgroup最高级别的头部组 <hgroup></hgroup>

语义化标签 Itemscope和Itemprop： <div itemscope> <p>My name is <span itemprop="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 Parts Water</ span>.</p> <p>I am <span itemprop="nationality">British</span>.</p> </div> http://jsfiddle.net/adamlu/vKurD/

图像处理 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/

媒体支持 <audio src=”test.ogg”></audio> <audio src=”test.ogg” autoplay controls loop> <a href=”test.ogg”>download</a>
</audio> <video controls/> <source src=”cat.mp4” /> <source src=”cat.ogg” /> </video> http://html5.grooveshark.com/ http://m.youtube.com/

媒体支持 Video格式支持： Ogg Theora/Voribs - Firefox 3.5+ - Chrome -
Opera MPEG-4 H.264/AAC - Safari - Chrome - Opera

设备支持原生地理位置定位： navigator.geolocation.getCurrentPosition(function(position){ position.coords.latitude, position.coords.longitude; }, errorCallback, config); DEMO: http://chrome.360.cn/html5_labs/demos/geolocation/index.html
GPS A-GPS 基站信息 WiFi位置 DEMO: https://maps.google.com/

设备支持输入类型： <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/

iPhone上不同input类型时键盘的输入框变化

设备支持桌面通知： if (window.webkitNotifications.checkPermission() == 0) { // 0 is
PERMISSION_ALLOWED window.webkitNotifications.createNotification('icon.png', 'Notification Title', 'Notification content...').show(); } else { window.webkitNotifications.requestPermission(); } http://jsfiddle.net/adamlu/neunM/

改善用户界面拖拽： <div draggable=”true”></div> addEvent(div, “dragstart”, function(e){ e.dataTransfer.setData(‘foo’, ‘bar’); },
true); addEvent(div, ‘dragend’, function(e){ e.dataTransfer.getData(‘foo’); }, true); 可编辑的内容—把一个元素变为可编辑的区域 <script> document.getElementsByTagName ('p')[0].contentEditable = true; </script> DEMO: http://pi-squared.co.za/development/html5-touch/index.html

改善用户界面 Web Worker： new Worker("worker.js"); 无法访问DOM或页面，需要通过postMessage接口来通信。 DEMO: http://html5demos.com/worker

改善用户界面 History API： pushState(data, title [, url]); replaceState(data, title [,
ulr]); window.addEventListener("popstate", function(e){ e.state; } Example: https://github.com/adamlu/yui3-cookbook

网络存储 Storage： sessionStorage.setItem(key, value); sessionStorage.getItem(key); localStorage.setItem(key, value); localStorage.getItem(key); localStorage.removeItem(key); 不再需要依赖Cookies，插件和针对浏览器的API
Application Storage/Offline： <html manifest=”cache.manifest”> 检测online或offline window.addEventListener('online', online, true); window.addEventListener('offline', online, true); DEMO: http://www.webkit.org/demos/sticky-notes/

网络通信跨域通信： 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

CSS3新特性 • 圆角 • 阴影 • 渐变 • 颜色 •
背景 • 边框 • 字体 • 变换 • 过渡 • 动画 DEMO: http://jsfiddle.net/adamlu/xGuKy/

CSS3能做什么 DEMO: http://demo.tutorialzine.com/2009/12/colorful-clock-jquery-css/demo.html

CSS3能做什么 DEMO: http://anthonycalzadilla.com/css3-ATAT/index-bones.html

CSS3能做什么 DEMO: http://demo.tutorialzine.com/2009/11/hovering-gallery-css3-jquery/demo.php

移动上的HTML5 • 移动网站在增长 • 移动用户在五年后会超过桌面网络用户 • 2016年之前将有21亿移动设备装有支持HTML5的浏览器 • HTML5对于移动非常好
• 不需要下载原生应用 • 同一套代码，发布到各个流行的设备上 • 大量的HTML5特性已经在移动浏览器上被支持

http://html5test.com/

移动上使用HTML5的网站

Mobile在增长 Source: Nielsen (January 2012)

对比原生应用移动用户更喜欢浏览器浏览 (来源: Adobe)

Web App 和 Native App Web App Web App Web
App Native App Native App Native App Comparation Comparation Comparation 只需要键入一个地址必须被发布并下载安装和更新访问网站分析，基于SaaS 的增值策略 Apple Store, Google Play 获得价值渐进增强依照规范终端体验 GeoLocation, Offline Storage, Canvas, Audio, Video, Camera 摄像头, 陀螺仪, 话筒, 指南针, 加速计, GPS 访问硬件特性 HTML5, CSS3, Javascript, UI库 Object-C, Java, C++, J2EE, .NET, Cocoa Touch 开发者经验 Web Workers, 图像加速, WebGL 直接运行固件特性, GPU 加速, 多线程性能

http://mobilehtml5.org/

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" />

高级表单 <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" />

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);

设备支持 window.devicePixelRatio navigator.connection(Android2.2+) //navigator.connection object { "type": "3", "UNKNOWN": "0",
"ETHERNET": "1", "WIFI": "2", "CELL_2G": "3", "CELL_3G": "4" }

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;}

Mobile Web App http://app.ft.com

移动优先的响应式设计响应式网站设计是建议设计和开发应该根据屏幕大小、平台和转向来响应用户行为和环境的方法。

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/

http://pinchzoom.com/uploads/anatomy-of-a-html5-mobile-app.png

Mobile设计模式 http://mobile-patterns.com/

相关框架 • 模板：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/

Mobile调试工具 • 调试： – WEINRE – WebKit Remote Debugging •
模拟器： – Mobile Emulators and Simulators – Android Emulator – iOS Simulator • 性能监测： – Mobile PerfBookmarklet – http://www.blaze.io/mobile/

兼容性测试 • 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/

HTML5 is the future of Mobile!

HTML5概览

HTML5概览

More Decks by Adam Lu

Other Decks in Technology

Featured

Transcript