Douban pulse

twitter @mockee Apple Google shimano ﬂickr github TextMate VIM

HTML5 Chrome Extension: Douban Pulse

Video Audio (SVG) webfont / 2D/3D (Canvas) Web Socket 3D Drag Drop Touch Range Colorpicker Search Client-side SQLite from kejun’s keynote - ‘html5 intro’

UE F2E

IE IE IE

border-*-*-radius: [ <length> | <%> ][ <length> | <%> ]? border-top-left-radius: 100px 50px

border-radius: [ <length> | <percentage> ]{1,4} [ / [ <length> | <percentage> ]{1,4} ]? border-top-left-radius: 25px 10px; border-top-right-radius: 10px 25px; border-bottom-left-radius: 10px 25px; border-bottom-right-radius: 25px 10px;

border-radius: [ <length> | <percentage> ]{1,4} [ / [ <length> | <percentage> ]{1,4} ]? border-radius: 25px 10px / 10px 25px

Gradients http://www.w3.org/TR/css3-background/ http://dev.w3.org/csswg/css3-images/

-webkit-gradient(...); type, linear, radial, angle, reflected, diamond x1 y1, x2 y2, from(color), to(color), [color-stop(),...] http://www.quirksmode.org/css/gradient.html

Douban Pulse -

RGBA HSL HSLA

RGBA HSL HSLA Red Hue Hue Green Saturation Saturation Blue Lightness Lightness Alpha Alpha

HSL http://zh.wikipedia.org/zh/HSL

HSL [0-100%] [0 ~ 360] [0-100%]

http://mugtug.com/sketchpad/

a:hover http://site.douban.com/106371/ http://site.douban.com/106664/

@font-face { font-family: Radiotime; src: url('/fonts/04B_03B.TTF'); } .time { font-family: Radiotime, Arial; }

CSS3 http://www.w3.org/TR/css3-selectors/ http://quirksmode.org/css/contents.html

CSS Transitions http://www.w3.org/TR/css3-transitions/ CSS Transforms 2D/3D http://dev.w3.org/csswg/css3-2d-transforms/ http://dev.w3.org/csswg/css3-3d-transforms/ CSS Animations http://www.w3.org/TR/css3-animations/ http://css3.bradshawenterprises.com

Douban Pulse CSS Transitions #radio menu li { -webkit-transition: opacity 0.5s ease-out; } #radio menu .disable { opacity: 0.5; cursor: default }

Web Storage localStorage[‘name’] = ‘Open Party’; localStorage.name = ‘Open Party’; localStorage.setItem(‘name’, ‘Open Party’); JSON Storage.prototype.setObject = function (key, value) { this.setItem(key, JSON.stringify(value)); }; Storage.prototype.getObject = function (key) { return JSON.parse(this.getItem(key)); };

Douban Pules cookies “ ”

Web SQL Database RADIO.radioDB = window.openDatabase( 'doubanFM', '0.1','songs list.', 20000 ); RADIO.radioDB.transaction(function (tx) { tx.executeSql( 'CREATE TABLE IF NOT EXISTS SongsList(...)', [], successCallback, errorCallback ); }); http://dev.w3.org/html5/webdatabase/

Douban Pules Douban Pulse v1.2

<audio> http://dev.w3.org/html5/spec/video.html#audio

<audio src=”*.mp3”></audio> autoplay, preload, load(), pause(), ended, error, loadstart, loadedmetadata, timeupdate...

Chrome Chromium Firefox Safari

Canvas 2D/3D http://ghost-hack.com/post/jsexperiments/tunneler/tunneler.html http://mrdoob.com/projects/chromeexperiments/ball_pool/ http://www.andrew-hoyer.com/experiments/cloth http://spielzeugz.de/html5/liquid-particles.html http://the389.com/works/three/ http://guciek.net/test/burn http://bomomo.com/

http://app.beijing-open-party.org	88
http://www.beijing-open-party.org	68

Douban pulse

by Open Party on Aug 31, 2010

Accessibility

Tags

Upload Details

Usage Rights

2 Embeds 156

Statistics

Douban pulse — Presentation Transcript