HTML5概览
78
HTML5 概概 概概概 / Adam Lu http://adamlu.com/ @adamlu
-
Upload
adam-lu -
Category
Technology
-
view
1.030 -
download
0
Transcript of HTML5概览
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摘要• 语义化标签• 图像处理• 媒体支持• 设备支持• 改善用户界面• 网络存储• 网络通信
语义化标签• 很少的头代码 • 不需要 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特性已经在移动浏览器上被支持
移动上使用 HTML5的网站
移动上使用 HTML5的网站
移动上使用 HTML5的网站
移动上使用 HTML5的网站
Mobile在增长
Source: Nielsen (January 2012)
对比原生应用移动用户更喜欢浏览器浏览
(来源 : Adobe)
Web App 和 Native App
Web App Native App 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加速 , 多线程
性能
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;}
移动优先的响应式设计响应式网站设计是建议设计和开发应该根据屏幕大小、平台和转向来响应用户行为和环境的方法。
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
相关框架• 模板： 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!
![Linux 系列分享[1] 概览](https://static.fdocument.pub/doc/165x107/5404fc2d8d7f72a6768b4969/linux-1-.jpg)
