Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
分层语义化模板实现
Search
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
Max
February 17, 2013
Programming
0
180
分层语义化模板实现
分层语义化模板实现
Max
February 17, 2013
Tweet
Share
More Decks by Max
See All by Max
让前端开发更高效
maxlee
1
190
如何发现前端性能问题
maxlee
4
200
七年很痒
maxlee
1
140
跟乐高学模块设计
maxlee
2
140
从YUI2到YUI3看前端的演变
maxlee
0
130
Qzone-前端-CPU-性能优化
maxlee
0
200
更好的文件组织
maxlee
0
95
Mobile App Action design
maxlee
1
100
关于数据分析
maxlee
0
170
Other Decks in Programming
See All in Programming
Unicodeどうしてる? PHPから見たUnicode対応と他言語での対応についてのお伺い
youkidearitai
PRO
1
2.6k
AIによる開発の民主化を支える コンテキスト管理のこれまでとこれから
mulyu
3
490
OSSとなったswift-buildで Xcodeのビルドを差し替えられるため 自分でXcodeを直せる時代になっている ダイアモンド問題編
yimajo
3
630
AIと一緒にレガシーに向き合ってみた
nyafunta9858
0
250
プロダクトオーナーから見たSOC2 _SOC2ゆるミートアップ#2
kekekenta
0
230
ノイジーネイバー問題を解決する 公平なキューイング
occhi
0
110
副作用をどこに置くか問題:オブジェクト指向で整理する設計判断ツリー
koxya
1
610
フロントエンド開発の勘所 -複数事業を経験して見えた判断軸の違い-
heimusu
7
2.8k
CSC307 Lecture 04
javiergs
PRO
0
660
コマンドとリード間の連携に対する脅威分析フレームワーク
pandayumi
1
460
CSC307 Lecture 06
javiergs
PRO
0
690
開発者から情シスまで - 多様なユーザー層に届けるAPI提供戦略 / Postman API Night Okinawa 2026 Winter
tasshi
0
210
Featured
See All Featured
Game over? The fight for quality and originality in the time of robots
wayneb77
1
120
Chasing Engaging Ingredients in Design
codingconduct
0
110
Facilitating Awesome Meetings
lara
57
6.8k
Organizational Design Perspectives: An Ontology of Organizational Design Elements
kimpetersen
PRO
1
470
Getting science done with accelerated Python computing platforms
jacobtomlinson
2
120
Leveraging Curiosity to Care for An Aging Population
cassininazir
1
170
Designing Experiences People Love
moore
144
24k
The Limits of Empathy - UXLibs8
cassininazir
1
220
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
12
1k
Un-Boring Meetings
codingconduct
0
200
AI Search: Implications for SEO and How to Move Forward - #ShenzhenSEOConference
aleyda
1
1.1k
Transcript
ٳҪეၬ߄ଆϰൌ क़फ http://hikejun.com twitter: @kejunz
Me. • ᅦक़फ • భ؊۽ӱഽčϵĎ • http://hikejun.com • twitter: @kejunz
L(ayered) S(emantic) M(arkup)
L(ayered) S(emantic) M(arkup) ٳҪĒ భ؊֥MVCࡏܒ
L(ayered) S(emantic) M(arkup) ٳҪĒ భ؊֥MVCࡏܒ ეၬĒ ކקၬIA
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
PRD PSD HTML CSS JS Prototype ࢌྛູ ൪तіགྷ ྐ༏ࡏܒ
PRD PSD HTML CSS JS Prototype ࢌྛູ ൪तіགྷ ྐ༏ࡏܒ C
- ॥ᇅ V - ᅚགྷ M - ଆ
HTML CSS Javascript ଽಸ ൪त(࣡) Ⴈྛູ()
UI֥ࡶࣉൌགྷݖӱ
step 1: ձࡹHTML ۴ऌwireframeބ၂်֥૫҃अaଆॶࢲܒ demo: http://hikejun.com/work/qq/share_8.4/page_naked.png
step 2: ނྏဢൔ ѓదresetđሳุđ৽ࢤđଆॶಸఖđ๙Ⴈଆॶဢൔčิൕaਙіaο୦֩Ďđ်૫҃अđၛࠣӈႨ֥rules(ۚਊaႅҟaౢڜ֩) demo: http://hikejun.com/work/qq/share_8.4/page_base_style_1.png
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 ၂۱ಸၞФದޭ൪֥ܱ࢘
ა൪तܱ
None
None
ᇗႨ 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
ѓሙ߄ࢲܒ
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ॖၛ֤֞၂֥॥ᇅ
ླྀቔaॖ॥aིੱ
Q&A
྆྆Ć:)