Upgrade to Pro — share decks privately, control downloads, hide ads and more …

分层语义化模板实现

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
Avatar for Max Max
February 17, 2013
Programming
180
0

 分层语义化模板实现

分层语义化模板实现

Avatar for Max

Max

February 17, 2013

More Decks by Max

See All by Max
让前端开发更高效
Avatar for Max maxlee
1
200
如何发现前端性能问题
Avatar for Max maxlee
4
200
七年很痒
Avatar for Max maxlee
1
140
跟乐高学模块设计
Avatar for Max maxlee
2
150
从YUI2到YUI3看前端的演变
Avatar for Max maxlee
0
130
Qzone-前端-CPU-性能优化
Avatar for Max maxlee
0
200
更好的文件组织
Avatar for Max maxlee
0
97
Mobile App Action design
Avatar for Max maxlee
1
100
关于数据分析
Avatar for Max maxlee
0
170

Other Decks in Programming

See All in Programming
SkillがSkillを生む：QA観点出しを自動化した
Avatar for sontixyou sontixyou
6
3.4k
夢の無限スパゲッティ製造機 -実装篇- #phpstudy
Avatar for hideki kinjyo o0h
PRO
0
210
実践CRDT
Avatar for tamadeveloper tamadeveloper
0
550
Mastering Event Sourcing: Your Parents Holidayed in Yugoslavia
Avatar for Marek Matulka super_marek
0
150
年間50登壇、単著出版、雑誌寄稿、Podcast出演、YouTube、CM、カンファレンス主催……全部やってみたので面白さ等を比較してみよう / I’ve tried them all, so let’s compare how interesting they are.
Avatar for nrs nrslib
4
780
KagglerがMixSeekを触ってみた
Avatar for Morim morim
0
380
アーキテクチャモダナイゼーションとは何か
Avatar for nwiizo nwiizo
17
5.1k
ハンズオンで学ぶクラウドネイティブ
Avatar for Tatsuki Minami tatsukiminami
0
130
YJITとZJITにはイカなる違いがあるのか？
Avatar for yamanao nakiym
0
220
ハーネスエンジニアリングとは？
Avatar for kinopee kinopeee
4
2k
forteeの改修から振り返るPHPerKaigi 2026
Avatar for muno92 muno92
PRO
3
280
PHPで TLSのプロトコルを実装してみるをもう一度しゃべりたい
Avatar for higaki higaki_program
0
200

Featured

See All Featured
Between Models and Reality
Avatar for mayunak mayunak
3
260
Technical Leadership for Architectural Decision Making
Avatar for Kenny Baas-Schwegler baasie
3
320
[SF Ruby Conf 2025] Rails X
Avatar for Vladimir Dementyev palkan
2
950
StorybookのUI Testing Handbookを読んだ
Avatar for Shingo Yamazaki zakiyama
31
6.7k
How To Stay Up To Date on Web Technology
Avatar for Chris Coyier chriscoyier
790
250k
JavaScript: Past, Present, and Future - NDC Porto 2020
Avatar for David Neal reverentgeek
52
5.9k
Mobile First: as difficult as doing things right
Avatar for Swwweet swwweet
225
10k
How to Build an AI Search Optimization Roadmap - Criteria and Steps to Take #SEOIRL
Avatar for Aleyda Solis aleyda
1
2k
How to build an LLM SEO readiness audit: a practical framework
Avatar for Nick Samuel nmsamuel
1
710
10 Git Anti Patterns You Should be Aware of
Avatar for Lemi Orhan Ergin lemiorhan
PRO
659
61k
The B2B funnel & how to create a winning content strategy
Avatar for Katarina Dahlin katarinadahlin
PRO
1
330
The Curse of the Amulet
Avatar for Matthew Lei leimatthew05
1
11k

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. ა൪त໭ܱ

  23. None
  24. None

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