0
twitter

                  @mockee
Apple
          Google
shimano   flickr   github
   TextMate
                VIM
HTML5
Chrome Extension: Douban Pulse
Video
Audio
                            (SVG)

                                                 webfont       /
        2D...
Video
Audio
                            (SVG)

                                                 webfont       /
        2D...
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 1...
border-radius:
[ <length> | <percentage> ]{1,4}
[ / [ <length> | <percentage> ]{1,4} ]?




border-radius: 25px 10px / 10p...
Gradients




http://www.w3.org/TR/css3-background/
http://dev.w3.org/csswg/css3-images/
-webkit-gradient(...);

                                   type,
                        linear, radial, angle,
          ...
Douban Pulse -
RGBA   HSL   HSLA
RGBA     HSL         HSLA
 Red       Hue          Hue
Green   Saturation   Saturation
 Blue   Lightness    Lightness
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-transform...
Douban Pulse           CSS Transitions




#radio menu li {
  -webkit-transition: opacity 0.5s ease-out;
}
#radio menu .di...
Web Storage
localStorage[‘name’] = ‘Open Party’;
localStorage.name = ‘Open Party’;
localStorage.setItem(‘name’, ‘Open Part...
Douban Pules
           cookies




               “   ”
Web SQL Database
RADIO.radioDB = window.openDatabase(
    'doubanFM', '0.1','songs list.', 20000
);


RADIO.radioDB.transa...
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/chromeexperimen...
Douban pulse
Douban pulse
Douban pulse
Douban pulse
Douban pulse
Douban pulse
Douban pulse
Upcoming SlideShare
Loading in...5
×

Douban pulse

2,860

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
2,860
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
76
Comments
1
Likes
14
Embeds 0
No embeds

No notes for slide







































  • Transcript of "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/
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×