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

分层语义化模板实现

Avatar for Max Max
February 17, 2013
Programming
0
170

 分层语义化模板实现

分层语义化模板实现

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
130
跟乐高学模块设计
Avatar for Max maxlee
2
140
从YUI2到YUI3看前端的演变
Avatar for Max maxlee
0
130
Qzone-前端-CPU-性能优化
Avatar for Max maxlee
0
190
更好的文件组织
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
CSC305 Lecture 10
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
330
Amazon ECS Managed Instances が リリースされた！キャッチアップしよう！！ / Let's catch up Amazon ECS Managed Instances
Avatar for 02 cocoeyes02
0
120
スマホから Youtube Shortsを見られないようにする
Avatar for lemolatoon lemolatoon
27
34k
Introducing RemoteCompose: break your UI out of the app sandbox.
Avatar for Nicolas Roard camaelon
2
300
alien-signals と自作 OSS で実現する フレームワーク非依存な ロジック共通化の探求 / Exploring Framework-Agnostic Logic Sharing with alien-signals and Custom OSS
Avatar for aose aoseyuu
3
5.3k
GC25 Recap: The Code You Reviewed is Not the Code You Built / #newt_gophercon_tour
Avatar for mazrean mazrean
0
140
マンガアプリViewerの大画面対応を考える
Avatar for kk__777 kk__777
0
440
Ktorで簡単AIアプリケーション
Avatar for Keita Tsukamoto tsukakei
0
120
ボトムアップの生成AI活用を推進する社内AIエージェント開発
Avatar for aku11i aku11i
0
1.4k
品質ワークショップをやってみた
Avatar for Nealle nealle
0
830
Module Proxyのマニアックな話 / Niche Topics in Module Proxy
Avatar for kuro kuro_kurorrr
0
480
Pythonに漸進的に型をつける
Avatar for Nealle nealle
1
150

Featured

See All Featured
Art, The Web, and Tiny UX
Avatar for Lynn Fisher lynnandtonic
303
21k
Facilitating Awesome Meetings
Avatar for Lara Hogan lara
57
6.6k
Into the Great Unknown - MozCon
Avatar for Noah Learner thekraken
40
2.1k
Scaling GitHub
Avatar for Zach Holman holman
463
140k
The World Runs on Bad Software
Avatar for Brandon Keepers bkeepers
PRO
72
11k
Fight the Zombie Pattern Library - RWD Summit 2016
Avatar for Marcelo Somers marcelosomers
234
17k
Building a Modern Day 
E-commerce SEO Strategy
Avatar for Aleyda Solis aleyda
44
7.9k
Dealing with People You Can't Stand - Big Design 2015
Avatar for Cassini Nazir cassininazir
367
27k
Practical Tips for Bootstrapping Information Extraction Pipelines
Avatar for Matthew Honnibal honnibal
PRO
23
1.5k
The Success of Rails: Ensuring Growth for the Next 100 Years
Avatar for Eileen M. Uchitelle eileencodes
46
7.8k
Thoughts on Productivity
Avatar for Jon Yablonski jonyablonski
72
4.9k
Fantastic passwords and where to find them - at NoRuKo
Avatar for Phil Nash philnash
52
3.5k

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