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

分层语义化模板实现

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for Max Max
February 17, 2013
Programming
0
180

 分层语义化模板实现

分层语义化模板实现

Avatar for Max

Max

February 17, 2013
Tweet

More Decks by Max

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

Other Decks in Programming

See All in Programming
Unicodeどうしてる？ PHPから見たUnicode対応と他言語での対応についてのお伺い
Avatar for てきめん tekimen youkidearitai
PRO
1
2.6k
AIによる開発の民主化を支える コンテキスト管理のこれまでとこれから
Avatar for Mulyu mulyu
3
490
OSSとなったswift-buildで Xcodeのビルドを差し替えられるため 自分でXcodeを直せる時代になっている ダイアモンド問題編
Avatar for yimajo yimajo
3
630
AIと一緒にレガシーに向き合ってみた
Avatar for nyafunta9858 nyafunta9858
0
250
プロダクトオーナーから見たSOC2 _SOC2ゆるミートアップ#2
Avatar for Kenta Suzuki kekekenta
0
230
ノイジーネイバー問題を解決する 公平なキューイング
Avatar for Shoichi Ochi occhi
0
110
副作用をどこに置くか問題：オブジェクト指向で整理する設計判断ツリー
Avatar for Koya Masuda koxya
1
610
フロントエンド開発の勘所 -複数事業を経験して見えた判断軸の違い-
Avatar for Yoichiro Kubo heimusu
7
2.8k
CSC307 Lecture 04
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
660
コマンドとリード間の連携に対する脅威分析フレームワーク
Avatar for Aja9tochin pandayumi
1
460
CSC307 Lecture 06
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
690
開発者から情シスまで - 多様なユーザー層に届けるAPI提供戦略 / Postman API Night Okinawa 2026 Winter
Avatar for tasshi tasshi
0
210

Featured

See All Featured
Game over? The fight for quality and originality in the time of robots
Avatar for Wayne Barker wayneb77
1
120
Chasing Engaging Ingredients in Design
Avatar for Sebastian Deterding codingconduct
0
110
Facilitating Awesome Meetings
Avatar for Lara Hogan lara
57
6.8k
Organizational Design Perspectives: An Ontology of Organizational Design Elements
Avatar for Dr. Kim W Petersen kimpetersen
PRO
1
470
Getting science done with accelerated Python computing platforms
Avatar for Jacob Tomlinson jacobtomlinson
2
120
Leveraging Curiosity to Care for An Aging Population
Avatar for Cassini Nazir cassininazir
1
170
Designing Experiences People Love
Avatar for Jonathan Moore moore
144
24k
The Limits of Empathy - UXLibs8
Avatar for Cassini Nazir cassininazir
1
220
Fight the Zombie Pattern Library - RWD Summit 2016
Avatar for Marcelo Somers marcelosomers
234
17k
The Web Performance Landscape in 2024 [PerfNow 2024]
Avatar for Tammy Everts tammyeverts
12
1k
Un-Boring Meetings
Avatar for Sebastian Deterding codingconduct
0
200
AI Search: Implications for SEO and How to Move Forward - #ShenzhenSEOConference
Avatar for Aleyda Solis aleyda
1
1.1k

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