Douban pulse

3,454 views

Published on

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

1 Comment
14 Likes
Statistics
Notes
  • cool
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
3,454
On SlideShare
0
From Embeds
0
Number of Embeds
175
Actions
Shares
0
Downloads
80
Comments
1
Likes
14
Embeds 0
No embeds

No notes for slide







































  • Douban pulse

    1. 1. twitter @mockee Apple Google shimano flickr github TextMate VIM
    2. 2. HTML5 Chrome Extension: Douban Pulse
    3. 3. 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’
    4. 4. 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’
    5. 5. UE F2E
    6. 6. IE IE
    7. 7. IE IE IE
    8. 8. CSS3
    9. 9. border-*-*-radius: [ <length> | <%> ][ <length> | <%> ]? border-top-left-radius: 100px 50px
    10. 10. 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;
    11. 11. border-radius: [ <length> | <percentage> ]{1,4} [ / [ <length> | <percentage> ]{1,4} ]? border-radius: 25px 10px / 10px 25px
    12. 12. Gradients http://www.w3.org/TR/css3-background/ http://dev.w3.org/csswg/css3-images/
    13. 13. -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
    14. 14. Douban Pulse -
    15. 15. RGBA HSL HSLA
    16. 16. RGBA HSL HSLA Red Hue Hue Green Saturation Saturation Blue Lightness Lightness Alpha Alpha
    17. 17. HSL http://zh.wikipedia.org/zh/HSL
    18. 18. HSL [0-100%] [0 ~ 360] [0-100%]
    19. 19. http://mugtug.com/sketchpad/
    20. 20. a:hover http://site.douban.com/106371/ http://site.douban.com/106664/
    21. 21. @font-face { font-family: Radiotime; src: url('/fonts/04B_03B.TTF'); } .time { font-family: Radiotime, Arial; }
    22. 22. CSS3 http://www.w3.org/TR/css3-selectors/ http://quirksmode.org/css/contents.html
    23. 23. CSS3
    24. 24. 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
    25. 25. Douban Pulse CSS Transitions #radio menu li { -webkit-transition: opacity 0.5s ease-out; } #radio menu .disable { opacity: 0.5; cursor: default }
    26. 26. 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)); };
    27. 27. Douban Pules cookies “ ”
    28. 28. 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/
    29. 29. Douban Pules Douban Pulse v1.2
    30. 30. <audio> http://dev.w3.org/html5/spec/video.html#audio
    31. 31. <audio src=”*.mp3”></audio> autoplay, preload, load(), pause(), ended, error, loadstart, loadedmetadata, timeupdate...
    32. 32. Chrome Chromium Firefox Safari
    33. 33. 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/

    ×