Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

LSM实践

2.754 visualizaciones

Publicado el

分层语义化模板实践

Publicado en: Tecnología
  • Inicia sesión para ver los comentarios

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

×