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

2. twitter
@mockee
Apple
Google
shimano flickr github
TextMate
VIM

3. HTML5
Chrome Extension: Douban Pulse

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. 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’

6. UE F2E

11. IE
IE

12. IE
IE
IE

13. CSS3

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

15. 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;

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

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

18. -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

19. Douban Pulse -

20. RGBA HSL HSLA

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

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

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

24. http://mugtug.com/sketchpad/

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

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

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

28. CSS3

29. 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

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

32. 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));
};

33. Douban Pules
cookies
“ ”

34. 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/

35. Douban Pules
Douban Pulse v1.2

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

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

38. Chrome Chromium
Firefox Safari

39. 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/