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

•
•
• http://hikejun.com
• twitter: @kejunz
L(ayered) S(emantic) M(arkup)
MVC




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

                    IA




L(ayered) S(emantic) M(arkup)
Designer FrontEnd Engineer

    demo http://hikejun.com/work/qq/spec/example_mod_compare.html
PRD




PSD




HTML   CSS
PRD




PSD




HTML   CSS
PRD




PSD         HTML




      CSS
PRD




PSD         HTML




      CSS
JS




PSD     CSS




HTML   Prototype




PRD
JS
                   C-

PSD     CSS
                   V-

HTML   Prototype
                   M-

PRD
Javascript
        (   )


                       CSS

(   )




                    HTML
UI
step 1:                              HTML
               wireframe
demo: http://hikejun.com/work/qq/share_8.4/page_naked.p...
step 2:
reset                                                             rules(   )
        demo: http://hikejun.com/work...
step 3:
                          (      )
 demo: http://hikejun.com/work/qq/share_8.4/page_base_style_2.png
step 4:
demo: http://hikejun.com/work/qq/share_8.4/page_base_style_3.png
step 5:   /
•   UI

•
•
HTML
demo: http://hikejun.com/work/qq/share_8.23/mod_comp.html
‘     ’         http://hikejun.com/work/qq/share_8.23/sports.qq....
1.
demo: http://hikejun.com/work/qq/share_8.4/example2/article-layout.html
II.
demo: http://hikejun.com/work/qq/share_8.4/example2/article.html
III.
demo: http://localhost/~kejun/douban/ui-framework/test/all.html
IV.
demo: http://localhost/~kejun/douban/ui-framework/test/all.html
UI
Q&A
:)
LSM实践
LSM实践
LSM实践
LSM实践
LSM实践
LSM实践
Upcoming SlideShare
Loading in...5
×

LSM实践

2,017

Published on

分层语义化模板实践

Published in: Technology
1 Comment
11 Likes
Statistics
Notes
No Downloads
Views
Total Views
2,017
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
76
Comments
1
Likes
11
Embeds 0
No embeds

No notes for slide

LSM实践

  1. 1. http://hikejun.com twitter: @kejunz
  2. 2. Me. • • • http://hikejun.com • twitter: @kejunz
  3. 3. L(ayered) S(emantic) M(arkup)
  4. 4. MVC L(ayered) S(emantic) M(arkup)
  5. 5. MVC IA L(ayered) S(emantic) M(arkup)
  6. 6. Designer FrontEnd Engineer demo http://hikejun.com/work/qq/spec/example_mod_compare.html
  7. 7. PRD PSD HTML CSS
  8. 8. PRD PSD HTML CSS
  9. 9. PRD PSD HTML CSS
  10. 10. PRD PSD HTML CSS
  11. 11. JS PSD CSS HTML Prototype PRD
  12. 12. JS C- PSD CSS V- HTML Prototype M- PRD
  13. 13. Javascript ( ) CSS ( ) HTML
  14. 14. UI
  15. 15. step 1: HTML wireframe demo: http://hikejun.com/work/qq/share_8.4/page_naked.png
  16. 16. step 2: reset rules( ) demo: http://hikejun.com/work/qq/share_8.4/page_base_style_1.png
  17. 17. step 3: ( ) demo: http://hikejun.com/work/qq/share_8.4/page_base_style_2.png
  18. 18. step 4: demo: http://hikejun.com/work/qq/share_8.4/page_base_style_3.png
  19. 19. step 5: /
  20. 20. • UI • •
  21. 21. HTML
  22. 22. 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
  23. 23. 1. demo: http://hikejun.com/work/qq/share_8.4/example2/article-layout.html
  24. 24. II. demo: http://hikejun.com/work/qq/share_8.4/example2/article.html
  25. 25. III. demo: http://localhost/~kejun/douban/ui-framework/test/all.html
  26. 26. IV. demo: http://localhost/~kejun/douban/ui-framework/test/all.html
  27. 27. UI
  28. 28. Q&A
  29. 29. :)
  1. A particular slide catching your eye?

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

×