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
:)
分层语义化模板实践 ---- 张克军
分层语义化模板实践 ---- 张克军
分层语义化模板实践 ---- 张克军
分层语义化模板实践 ---- 张克军
分层语义化模板实践 ---- 张克军
分层语义化模板实践 ---- 张克军
Upcoming SlideShare
Loading in …5
×

分层语义化模板实践 ---- 张克军

9,841 views

Published on

webrebuild.org北京第一届交流会-悟道WEB标准,分层语义化模板实践。

Published in: Education, Technology, Design
2 Comments
20 Likes
Statistics
Notes
  • 分层语义化
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • 国内应用案例
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
9,841
On SlideShare
0
From Embeds
0
Number of Embeds
66
Actions
Shares
0
Downloads
210
Comments
2
Likes
20
Embeds 0
No embeds

No notes for slide

分层语义化模板实践 ---- 张克军

  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. :)

×