HTML5* – Web 开发的未来之路 – Transition Styles
HTML5* – Web 开发的未来之路 – Transition Styles
0 0
presentation-wn
Presentation of HTML5: Next Web. Created with reveal.jsOn Github Halo9Pan / presentation-wn
HTML5*
Web 开发的未来之路
潘昊
Transition Styles
You can select from different transitions, like: Cube - Page - Concave - Zoom - Linear - Fade - None - Default
Themes
Reveal.js comes with a few themes built in: Default - Sky - Beige - Simple - Serif - Night Moon - Solarized
* Theme demos are loaded after the presentation which leads to flicker. In production you should load your theme in the <head> using a <link>.
Web 技术路线图
- 1991 HTML
- 1994 HTML 2
- 1996 CSS 1 + JavaScript
- 1997 HTML 4
- 1998 CSS 2
- 2000 XHTML 1
- 2002 Tableless Web Design
- 2005 AJAX
- 2009 HTML 5
HTML5 ~= HTML + CSS + JS
主题：
离线存储
迎接意外
Web Storage
// use localStorage for persistent storage
// use sessionStorage for per tab storage
saveButton.addEventListener('click', function () {
window.localStorage.setItem('value', area.value);
window.localStorage.setItem('timestamp', (new Date()).getTime());
}, false);
textarea.value = window.localStorage.getItem('value');
Save text value on the client side (crash-safe)
保存Web SQL Database
var db = window.openDatabase("DBName", "1.0", "description", 5*1024*1024); //5MB
db.transaction(function(tx) {
tx.executeSql("SELECT * FROM test", [], successCallback, errorCallback);
});
创建表
删除表
添加数据
查看数据库：Developer > Developer Tools > Storage
IndexedDB
var idbRequest = window.indexedDB.open('DatabaseName');
idbRequest.onsuccess = function(event) {
var db = event.target.result;
var transaction = db.transaction(['ObjectStoreName'], 'readonly');
var curRequest = transaction.objectStore('ObjectStoreName').openCursor();
curRequest.onsuccess = ...;
};
idbRequest.onupgradeneeded = function(event) {
var db = event.target.result
var objectStore = db.createObjectStore('ObjectStoreName');
}
添加数据
删除数据库
Application Cache
<html manifest="cache.appcache">
window.applicationCache.addEventListener('updateready', function(e) {
if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
window.applicationCache.swapCache();
if (confirm('A new version of this site is available. Load it?')) {
window.location.reload();
}
}
}, false);
cache.appcache:
CACHE MANIFEST # version 1.0.0 CACHE: /assets/logic.js /assets/style.css /assets/background.png NETWORK: *
此演示可以离线运行！
Quota API
// Request Status
webkitStorageInfo.queryUsageAndQuota(webkitStorageInfo.TEMPORARY, function(used, remaining) {
console.log("Used quota: " + used + ", remaining quota: " + remaining);
}
);
// Request Quota (only for File System API)
webkitStorageInfo.requestQuota(webkitStorageInfo.PERSISTENT, 10 * 1024 * 1024, function(used) {
console.log("Used quota: " + used + ", remaining quota: " + remaining);
}
);
默认（临时）
配额（持久）
Web Storage
5Mb
N/A
App Cache
存储总空间的10%
使用量
已用：-- Bytes
剩余：-- Bytes
IndexedDB
WebSQL
File System API
随意
in Bytes
请求配额
已用：-- Bytes
实时通讯
保持连接
Web Workers
main.js:
var worker = new Worker('task.js');
worker.onmessage = function(event) { alert(event.data); };
worker.postMessage('data');
task.js:
self.onmessage = function(event) {
// Do some work.
self.postMessage("recv'd: " + event.data);
};
窗口的动画不会被 Web Workers打断
点击方块，开始动画。动画使用了 requestAnimationFrame的新方法
点击左边的按钮开始Web Worker
Messages from Worker:
WebSocket
var socket = new WebSocket('ws://html5rocks.websocket.org/echo');
socket.onopen = function(event) {
socket.send('Hello, WebSocket');
};
socket.onmessage = function(event) { alert(event.data); }
socket.onclose = function(event) { alert('closed'); }
在浏览器中实现和服务器端双向通信。双向通信可以拓展浏览器上的应用类型，例如实时的数据推送（股票行情）、游戏、聊天等。
简单的each的演示，收发消息使用了同一个WebSocket连接
WebSocket地址
使用 TLS/SSL 连接 断开消息：
发送
输出：
清除输出
Notifications
if (window.webkitNotifications.checkPermission() == 0) {
// you can pass any url as a parameter
window.webkitNotifications.createNotification(tweet.picture, tweet.title,
tweet.text).show();
} else {
window.webkitNotifications.requestPermission();
}
获取当前页面的通知权限
该按钮同时可以重置权限
弹出通知
弹出通知设备访问
与操作系统深度融合
Native Drag & Drop
document.addEventListener('dragstart', function(event) {
event.dataTransfer.setData('text', 'Customized text');
event.dataTransfer.effectAllowed = 'copy';
}, false);
Select text and drag
选择并拖拽文字试试:-)
目标区域
Desktop Drag-In (File API)
从文件系统拖入文件
document.querySelector('#dd-dropzone').addEventListener('drop', function(e) {
var reader = new FileReader();
reader.onload = function(evt) {
document.querySelector('img').src = evt.target.result;
};
reader.readAsDataURL(e.dataTransfer.files[0]);
}, false);
从操作系统中拖入一张图片试试
Desktop Drag-Out
拖出文件到文件系统
<a href="assets/let_it_go_1.mp4" draggable="true" class="dragout" data-downloadurl="MIMETYPE:FILENAME:ABSOLUTE_URI_TO_FILE">download</a>
var files = document.querySelectorAll('.dragout');
for (var i = 0, file; file = files[i]; ++i) {
file.addEventListener('dragstart', function(e) {
e.dataTransfer.setData('DownloadURL', this.dataset.downloadurl);
}, false);
}
仅仅支持Google Chrome
FileSystem APIs
使用Javascript异步的将文件写入沙盒文件系统中
window.requestFileSystem(window.TEMPORARY, 1024 * 1024, function(fs) {
// fs.root is a DirectoryEntry object.
fs.root.getFile('log.txt', {create: true}, function(fileEntry) {
fileEntry.createWriter(function(writer) { // writer is a FileWriter object.
writer.onwrite = function(e) { ... };
writer.onerror = function(e) { ... };
var bb = new BlobBuilder();
bb.append('Hello World!');
writer.write(bb.getBlob('text/plain'));
}, opt_errorHandler);
}
}, opt_errorHandler);
仅仅支持Google Chrome 9+
Geolocation
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var map = new BMap.Map("allmap");
var point = new BMap.Point(
position.coords.latitude, position.coords.longitude);
map.centerAndZoom(point,15);
}, errorHandler);
}
当前位置（百度地图）