分层语义化模板实现

分层语义化模板实现

Transcript

1. ٳҪეၬ߄ଆϰൌ࡬ क़फ http://hikejun.com twitter: @kejunz
2. Me. • ᅦक़फ • భ؊۽ӱഽč׸ϵĎ • http://hikejun.com • twitter: @kejunz
3. L(ayered) S(emantic) M(arkup)
4. L(ayered) S(emantic) M(arkup) ٳҪĒ భ؊֥MVCࡏܒ
5. L(ayered) S(emantic) M(arkup) ٳҪĒ భ؊֥MVCࡏܒ ეၬĒ ކ৘קၬIA
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. PRD PSD HTML CSS JS Prototype ࢌ޺ྛູ ൪तіགྷ ྐ༏ࡏܒ
12. PRD PSD HTML CSS JS Prototype ࢌ޺ྛູ ൪तіགྷ ྐ༏ࡏܒ C - ॥ᇅ V - ᅚགྷ M - ଆ྘
13. HTML CSS Javascript ଽಸ ൪त(࣡෿) Ⴈ޼ྛູ(׮෿)
14. UI֥ࡶࣉൌགྷݖӱ
15. step 1: ձࡹHTML ۴ऌwireframeބ๤၂်֥૫҃अaଆॶࢲܒ demo: http://hikejun.com/work/qq/share_8.4/page_naked.png
16. step 2: ނྏဢൔ ѓదresetđሳุđ৽ࢤđଆॶಸఖđ๙Ⴈଆॶဢൔčิൕaਙіaο୦֩Ďđ်૫҃अđၛࠣӈႨ֥rules(ۚਊaႅҟaౢڜ׮֩) 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 ၂۱ಸၞФದޭ൪֥ܱ࡯࢘೤
22. ა൪त໭ܱ
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
26. ѓሙ߄ࢲܒ
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
31. ஻ਈളӁᇉਈन်֥֩૫
32. Ӂ௖֥UIॖၛ֤֞๤၂֥॥ᇅ
33. ླྀቔaॖ॥aིੱ
34. Q&A
35. ྆྆Ć:)