The document discusses HTML5 features including Canvas, SVG, WebSockets, Web Storage, Web SQL Database, Audio/Video tags, and CSS3 properties like gradients, transitions and animations. It provides examples and links to resources about implementing these new technologies. Key HTML5 features like local storage, audio playback, and the Canvas API are highlighted in the context of enhancing the Douban Pulse application.

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/