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/
Douban pulse

Douban pulse