分层语义化模板实践

1. http://hikejun.com
twitter: @kejunz

2. Me.
•
•
• http://hikejun.com
• twitter: @kejunz

3. L(ayered) S(emantic) M(arkup)

4. MVC
L(ayered) S(emantic) M(arkup)

5. MVC
IA
L(ayered) S(emantic) M(arkup)

6. Designer FrontEnd Engineer
demo http://hikejun.com/work/qq/spec/example_mod_compare.html

7. PRD
PSD
HTML CSS

8. PRD
PSD
HTML CSS

9. PRD
PSD HTML
CSS

10. PRD
PSD HTML
CSS

11. JS
PSD CSS
HTML Prototype
PRD

12. JS
C-
PSD CSS
V-
HTML Prototype
M-
PRD

13. Javascript
( )
CSS
( )
HTML

14. UI

15. step 1: HTML
wireframe
demo: http://hikejun.com/work/qq/share_8.4/page_naked.png

16. step 2:
reset rules( )
demo: http://hikejun.com/work/qq/share_8.4/page_base_style_1.png

17. step 3:
( )
demo: http://hikejun.com/work/qq/share_8.4/page_base_style_2.png

18. step 4:
demo: http://hikejun.com/work/qq/share_8.4/page_base_style_3.png

19. step 5: /

20. • UI
•
•

21. HTML

25. demo: http://hikejun.com/work/qq/share_8.23/mod_comp.html
‘ ’ http://hikejun.com/work/qq/share_8.23/sports.qq.com.html
http://hikejun.com/work/qq/share_8.23/news.qq.com.html

27. 1.
demo: http://hikejun.com/work/qq/share_8.4/example2/article-layout.html

28. II.
demo: http://hikejun.com/work/qq/share_8.4/example2/article.html

29. III.
demo: http://localhost/~kejun/douban/ui-framework/test/all.html

30. IV.
demo: http://localhost/~kejun/douban/ui-framework/test/all.html

32. UI

34. Q&A

35. :)