디자인 패턴과 YUI를 이용해 Rich UI 빠르게 구현하기

2,226 views
2,032 views

Published on

디자인 패턴과 YUI를 이용해
리치 UI 빠르게 구현하기

우리가 원하는 것들
무엇이 문제인가
디자인 패턴 라이브러리
YUI 라이브러리
환경변수 Class 선택기
METRO 적용사례

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,226
On SlideShare
0
From Embeds
0
Number of Embeds
50
Actions
Shares
0
Downloads
43
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

디자인 패턴과 YUI를 이용해 Rich UI 빠르게 구현하기

  1. 1. • – – • – –
  2. 2. • • • • • •
  3. 3. • • • • •
  4. 4. • PPT,XLS PSD,PNG HTML,JS C,PHP
  5. 5. • • • • HAP PY
  6. 6. • • •
  7. 7. • • • •
  8. 8. http://developer.yahoo.com/ypatterns/
  9. 9. • – – – • • – • – – – –
  10. 10. • Layout • Navigation • Selection • Rich Interaction • Social
  11. 11. • http://developer.yahoo.com/ypatterns/selection/calendar.html
  12. 12. http://developer.yahoo.com/ypatterns/navigation/accordion.html
  13. 13. • • – – • – http://developer.yahoo.com/ypatterns/about/stencils/
  14. 14. • – – • – – •
  15. 15. http://developer.yahoo.com/yui/
  16. 16. • – – • – • –
  17. 17. • • • • • • –
  18. 18. • – • • •
  19. 19. • • • • •
  20. 20. http://developer.yahoo.com/yui/carousel/ <!-- Core + Skin CSS --> <link rel="stylesheet" type="text/css" href="http:// yui.yahooapis.com/2.8.0r4/build/carousel/assets/skins/sam/ carousel.css"> <!-- Dependencies --> <script type="text/javascript" src="http://yui.yahooapis.com/ 2.8.0r4/build/yahoo-dom-event/yahoo-dom-event.js"></script> <script type="text/javascript" src="http://yui.yahooapis.com/ 2.8.0r4/build/element/element-min.js"></script> <!-- Source file --> <script type="text/javascript" src="http://yui.yahooapis.com/ 2.8.0r4/build/carousel/carousel-min.js"></script>
  21. 21. http://developer.yahoo.com/yui/examples/carousel/csl_circular_source.html <div id="container"> <ol> <li><img alt="" src="..."></li> ... </ol> </div> var carousel = new YAHOO.widget.Carousel("container", { isCircular: true // for a circular Carousel }); carousel.render(); carousel.show();
  22. 22. • http://developer.yahoo.com/yui/examples/carousel/csl_circular_source.html
  23. 23. http://www.flickr.com/photos/anniemole/313981428/
  24. 24. • • • • – –
  25. 25. • Conditional Comments? <!--[if IE]> <link rel="stylesheet" type="text/css" href=“for_ie.css“ /> <![endif]--> <!--[if lte IE 6]> <link rel="stylesheet" type="text/css" href=“for_ie6.css“ /> <![endif]-->
  26. 26. • Hack? /* for IE6 */ p {_color:white;} /* for IE */ p {*color: green;} • * html body{} *:first-child+html body{}
  27. 27. • <html class="gecko ff3 ff3_5 win">
  28. 28. • PHP CSS Browser Selector – http://bastian-allgeier.de/css_browser_selector/
  29. 29. • PHP CSS Browser Selector • <?php require("css_browser_selector.php"); ?> <html class="<?php echo css_browser_selector() ?>"> • <html class="gecko ff3 linux">
  30. 30. Environment Class Selectors • O/S Win Microsoft Windows Mac Mac OS Iphone iPhone • ie6 Internet Explorer 6.x ie7 Internet Explorer 7.x ff3_5 Firefox 3.5 Opera10 Opera 10.x chrome Google Chrome
  31. 31. Environment Class Selectors .ie body { background-color: yellow } .ie7 body { background-color: orange }
  32. 32. • • •
  33. 33. • • •
  34. 34. • developer.yahoo.com/ • developer.yahoo.com/yui/ • developer.yahoo.com/ypatterns/ • bastian-allgeier.de/css_browser_selector/ • www.nmindplus.com/2006/06/28/css-hack/
  35. 35. PDF, PPT, Key ydnkrblog.com/blog/?p=696

×