• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Douban pulse
 

Douban pulse

on

  • 3,123 views

话题来自OpenParty “清雨榕香”活动

话题来自OpenParty “清雨榕香”活动

Statistics

Views

Total Views
3,123
Views on SlideShare
2,955
Embed Views
168

Actions

Likes
14
Downloads
69
Comments
1

2 Embeds 168

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

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

11 of 1 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • cool
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />

Douban pulse Douban pulse Presentation Transcript

  • twitter @mockee Apple Google shimano flickr 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’
  • 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 IE IE
  • CSS3
  • 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
  • CSS3
  • 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/