第二节课：html5 – web开发步入新阶段

HTML5 – Web开发步入新阶段

演变历程

1991 HTML

1994 HTML 2

1996 CSS 1 + Javascript

1997 HTML 4

1998 CSS 2

2000 XHTML 1

2002 Tableless

2005 AJAX

2009 HTML5

91 94 96 97 98 00 02 05 09

HTML5是什么

ì  广义上：一套技术标准的集合

语义化 SEMANTICS

语义化标签

<h1>HTML5</h1> <h2>Web开发步入新阶段</h2> <p>......</p>

<hgroup> <h1>HTML5</h1> <h2>Web开发步入新阶段</h2> </hgroup> <p>......</p>

语义化标签

<article>

<header>

<h1>文章标题</h1>

</header>

<p>文章内容</p>

<footer>

<a href="?comments=1">评论</a>

</footer>

</article>

语义化标签

<p>以下代码展示了如何通过JS创建一个元素。</p>

<figure id="l4”>

<figcaption>代码14：创建元素</figcaption>

<pre><code>document.createElement("div");</code></pre>

</figure>

语义化标签

语义化标签

应用相关标签

<meter min="0" max="100" low="40" high="90" optimum="100" value="91">A+</meter>

<progress>正在处理</progress>

<progress value="75" max="100”>完成75%</progress>

应用相关标签

<menu> <command type="command">另存为...</command> </menu>

<details> <summary>fileInfo</summary> <summary>metadata</summary> <summary>camera data</summary> </details>

表单标签

<input type="email" value="[email protected]" />

<input type="date" min="2010-‐08-‐14" max="2011-‐08-‐14" value="2010-‐08-‐14"/>

<input type="range" min="0" max="50" value="10" />

<input type="search" results="10" placeholder="Search..." />

表单标签

<input type="tel" placeholder="(555) 555-‐5555"

pattern="^$?\d{3}$?[-‐\s]\d{3}[-‐\s]\d{4}.*?$" />

<input type="color" placeholder="e.g. #bbbbbb" />

<input type="number" step="1" min="-‐5" max="10" value="0" />

表单标签

<style>

[required] {

border-‐color: #88a;

-‐webkit-‐box-‐shadow: 0 0 3px rgba(0, 0, 255, .5);

}

:invalid {

border-‐color: #e88;

-‐webkit-‐box-‐shadow: 0 0 5px rgba(255, 0, 0, .8);

}

</style>

移动平台上的表单标签

type="email" type="tel"

离线存储 OFFLINE & STORAGE

Once upon a time⋯

Cookies的问题

ì  速度

ì  安全

ì  容量

Web Storage

<input type="text" id="name" />

sessionStorage.setItem("username", document.getElementById("name").value)

<!-‐-‐ on next page -‐-‐>

alert(sessionStorage.getItem("username"))

Web Storage

localStorage.setItem('lng', map.getCenter().lng);

localStorage.setItem('lat', map.getCenter().lat);

localStorage.setItem('mapZoom', map.getZoom());

Web SQL Database

var db = window.openDatabase('MyDB', '1.0', 'my database', 5 * 1024 * 1024);

db.transaction(function(tx){

tx.executeSql("CREATE TABLE IF NOT EXISTS test (id unique, text)");

tx.executeSql("INSERT INTO test (id, text) VALUES (1, 'my data')");

tx.executeSql("SELECT * FROM test", [], successCallback);

});

但是⋯

ì  W3C已经停止了规范更新

Indexed Database

var idbReq = window.indexedDB.open("My Database");

idbReq.onsuccess = function(event){

var db = event.srcElement.result;

// do something here

}

Application Cache

<html manifest="cache.appcache">

cache.appcache文件内容（MIME Type：text/cache-manifest）：

CACHE MANIFEST index.html style.css images/logo.png scripts/main.js

设备访问 DEVICE ACCESS

设备访问

ì  与操作系统集成的更紧密

ì  文件、硬件信息访问

Geolocation

if (navigator.geolocation) {

navigator.geolocation.getCurrentPosition(function(pos){

alert(pos.coords.latitude + ',' + pos.coords.longitude);

})

}

Geolocation

Native Drag & Drop

span.addEventListener("dragstart", function(e){

e.dataTransfer.setData("text", this.innerHTML);

});

drop.addEventListener('drop', function(e){

this.innerHTML = e.dataTransfer.getData('text');

}, false);

File API(Desktop Drag-In)

holder.ondrop = function (e) { e.preventDefault(); var file = e.dataTransfer.files[0], reader = new FileReader(); reader.onload = function (event) { holder.style.background = 'url(' + event.target.result + ') no-‐repeat center'; }; reader.readAsDataURL(file); return false; };

File API(Desktop Drag-In)

holder.ondrop = function (e) { e.preventDefault(); var file = e.dataTransfer.files[0], reader = new FileReader(); reader.onload = function (event) { holder.innerHTML = event.target.result; }; reader.readAsText(file); return false; };

File API(Desktop Drag-Out)

<a href="pic.png" id="dragout" draggable="true" data-‐downloadurl="application/octet-‐stream:pic.png:URI">A Picture</a>

var file = document.getElementById('dragout'); file.ondragstart = function(e){ e.dataTransfer.setData('DownloadURL', file.dataset.downloadurl); }

Device Orientation

window.addEventListener("deviceorientation", function(e){

var a = e.alpha;

var b = e.beta;

var g = e.gamma;

}, false);

Speech Input

<input type="text" x-‐webkit-‐speech />

数据连通 CONNECTIVITY

数据连通

ì  改善前后数据交互

WebSocket

ì  减少header traffic

ì  不需要轮询

ì  全双工

WebSocket

var socket = new WebSocket(host);

socket.send(message);

socket.onmessage = function(message){alert(message.data);}

WebSocket

Web Workers

ì  浏览器单线程工作

ì  background thread

Web Workers

var worker = new Worker('worker.js'); worker.onmessage = function(event){ document.getElementById('result').text = event.data; };

worker.js var n = 1; search: while(true) { n += 1; for (var i = 2; i <= Math.sqrt(n); i += 1) { if (n % i == 0) continue search; } postMessage(n); }

Notifications

function RequestPermission (callback) { window.webkitNotifications.requestPermission(callback); } function showNotification(){ if (window.webkitNotifications.checkPermission() > 0) { RequestPermission(showNotification); } else { window.webkitNotifications.createNotification("header.png", "Title", "Body").show(); } }

Notifications

新消息提示

新邮件提示

多媒体 MULTIMEDIA

Audio & Video

<audio /> <video />

优酷的代码

<object type="application/x-‐shockwave-‐flash" data="http://static.youku.com/v1.0.0161/v/swf/player.swf" id="movie_player" height="100%" width="100%”> <param name="allowFullScreen" value="true"> <param name="wmode" value="opaque"> <param name="allowscriptaccess" value="always"> <param name="flashvars" value="VideoIDS=XMjczNzc3NDI4&ShowId=0&Cp=0&Light=on&THX=off&Tid=0&isAutoPlay=true&Version=/v1.0.0668&show_ce=1&winType=interior&Type=Folder&Fid=6190074&Pt=0&Ob=1"> <param name="movie" value=http://static.youku.com/v1.0.0161/v/swf/player.swf> </object>

Audio

<audio src="vincent.mp3" controls="controls" />

Audio格式兼容

format IE9 Firefox 3.5 Opera 10.5 Chrome 3 Safari 3 Ogg Vorbis No Yes Yes Yes No MP3 Yes No No Yes Yes WAV No Yes Yes No Yes

Video

<video src="mapapi.mp4" controls="controls" />

Video格式兼容

format IE Firefox Opera Chrome Safari Ogg No 3.5+ 10.5+ 5.0+ No MP4 9.0+ No No 5.0+ 3.0+ WebM No 4.0+ 10.6+ 6.0+ No

三维，图形和特效 3D, GRAPHICS, EFFECTS

canvas

ì  绘图界面

ì  像素级别控制

canvas

var canvasContext = document.getElementById("canvas").getContext("2d");

canvasContext.fillRect(250, 25, 150, 100);

canvasContext.beginPath();

canvasContext.arc(450, 110, 100, Math.PI * 1/2, Math.PI * 3/2);

canvasContext.lineWidth = 15;

canvasContext.lineCap = 'round';

canvasContext.strokeStyle = 'rgba(255, 127, 0, 0.5)';

canvasContext.stroke();

Inline SVG

<body> <svg> <circle id="myCircle" class="important" cx="50%" cy="50%" r="100 fill="url(#myGradient) onmousedown="alert('hello');"/> </svg> </body>

WebGL

var context = canvas.getContext("experimental-‐webgl");

More WebGL Demos at hNp://www.chromeexperiments.com/

性能与集成 PERFORMANCE & INTEGRATION

XMLHttpRequest 2

ì  改进XMLHttpRequest

ì  cross origin

ì  progress event

ì  byte stream

样式 CSS3

CSS3 Selector

.row:nth-‐child(even){

background: #dde;

}

.row:nth-‐child(odd){

background: white;

}

CSS3 Selector

button:not([DISABLED])

*:not(span)

:enabled

:required

Font Resources

@font-‐face { font-‐family: Gentium; src: url(http://example.com/fonts/Gentium.ttf); }

p { font-‐family: Gentium, serif; }

Text stroke

div {

-‐webkit-‐text-‐fill-‐color: white;

-‐webkit-‐text-‐stroke-‐color: black;

-‐webkit-‐text-‐stroke-‐width: 1px;

}

Vendor Prefixes

ì  -‐webkit-‐xxxx

ì  -‐moz-‐xxxx

ì  -‐o-‐xxxx

Vendor Prefixes

div {

-‐webkit-‐box-‐shadow: 1px 1px 5px #888

-‐moz-‐box-‐shadow: 1px 1px 5px #888;

box-‐shadow: 1px 1px 5px #888;

}

Color Opacity

color: rgba(255, 0, 0, 0.75);

background: rgba(0, 0, 255, 0.25);

圆角和渐变

border-‐radius: 10px

background-‐image: -‐moz-‐linear-‐gradient(#fff, #000);

background-‐image: -‐moz-‐linear-‐gradient(30deg, #000, #fff 75%, #000);

圆角和渐变

圆角和渐变

阴影

text-‐shadow: 4px 4px 1px #aaa;

box-‐shadow: 1px 1px 2px #fff;

box-‐shadow: inset 0 0 10px #000;

Transition

.left{background: red;left:0px}

.right{background: green;left:1000px}

#myDiv {

-‐webkit-‐transition: left 1s ease-‐in-‐out, background 1s ease-‐in-‐out;

}

Transform

-‐webkit-‐transform: rotateY(45deg);

-‐webkit-‐transform: scaleX(2);

-‐webkit-‐transform: translate3d(0, 0, 90deg);

Animation

@-‐webkit-‐keyframes movingbox{

0%{left:90%;}

50%{left:10%;}

100%{left:90%;}

}

.box2{ -‐webkit-‐animation:movingbox 5s infinite; }

HTML5学习资源

hNp://dev.w3.org/html5/spec/Overview.html hNp://www.html5rocks.com/en/ hNp://diveintohtml5.org/ hNp://www.sitepoint.com/tag/html5/ hNp://www.css3.info/

Q&A

Technology

第二节课：html5 – web开发步入新阶段