Web component

1,621 views
1,541 views

Published on

Published in: Technology, Design
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,621
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
19
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Web component

  1. 1. Web Components 전용우12년 7월 19일 목요일
  2. 2. Google I/O 2012 The Web Platforms Cutting Edge.12년 7월 19일 목요일
  3. 3. 12년 7월 19일 목요일
  4. 4. 12년 7월 19일 목요일
  5. 5. 12년 7월 19일 목요일
  6. 6. 12년 7월 19일 목요일
  7. 7. 12년 7월 19일 목요일
  8. 8. UI Component12년 7월 19일 목요일
  9. 9. Widget12년 7월 19일 목요일
  10. 10. 12년 7월 19일 목요일
  11. 11. Resource <link rel="stylesheet" href="../assets/scrollview/horizontal.css" type="text/css" charset="utf-8"> <script src="http://yui.yahooapis.com/3.5.1/build/yui/yui- min.js"></script>12년 7월 19일 목요일
  12. 12. HTML <div id="scrollview-container"> <div id="scrollview-header"> <h1>Paged ScrollView</h1> </div> <div id="scrollview-content" class="yui3-scrollview-loading"> <ul> <li><img src="c621e0b501.jpg" alt="Above The City II"></li> <li><img src="1373a0ef89.jpg" alt="Walls and Canyon"></li> <li><img src="4303e8eaea.jpg" alt="Stairs Using In Situ Stone"></li> <li><img src="854e8c0ef3.jpg" alt="Tree Silhouette"></li> </ul> </div> <div id="scrollview-pager"> <button id="scrollview-prev">Prev</button> <button id="scrollview-next">Next</button> </div> </div> <div id="additional-content"> <p> Aliquam nec auctor lectus. Etiam ut ipsum a nibh iaculis fringilla.</p> <p>Aliquam nec auctor lectus. Etiam ut ipsum a nibh iaculis fringilla.</p> </div>12년 7월 19일 목요일
  13. 13. JavaScript YUI().use(scrollview, scrollview-paginator, function(Y) { var scrollView = new Y.ScrollView({ id: "scrollview", srcNode : #scrollview-content, width : 320, flick: { minDistance:10, minVelocity:0.3, axis: "x" } }); scrollView.plug(Y.Plugin.ScrollViewPaginator, { selector: li }); scrollView.render(); });12년 7월 19일 목요일
  14. 14. http://www.flickr.com/photos/exalthim/2150224411/12년 7월 19일 목요일
  15. 15. Complexity12년 7월 19일 목요일
  16. 16. Performance12년 7월 19일 목요일
  17. 17. Resource12년 7월 19일 목요일
  18. 18. Rendering12년 7월 19일 목요일
  19. 19. Web Components12년 7월 19일 목요일
  20. 20. • Shadow DOM • Custom Element • Template • Decorator12년 7월 19일 목요일
  21. 21. Shadow DOM12년 7월 19일 목요일
  22. 22. 12년 7월 19일 목요일
  23. 23. <div id="scrollview-container"> <div id="scrollview-header"> <h1>Paged ScrollView</h1> </div> <div id="scrollview-content" class="yui3-scrollview-loading"> <ul> <li><img src="c621e0b501.jpg" alt="Above The City II"></li> <li><img src="1373a0ef89.jpg" alt="Walls and Canyon"></li> <li><img src="4303e8eaea.jpg" alt="Stairs Using In Situ Stone"></li> <li><img src="854e8c0ef3.jpg" alt="Tree Silhouette"></li> </ul> </div> <div id="scrollview-pager"> <button id="scrollview-prev">Prev</button> <button id="scrollview-next">Next</button> </div> </div> <div id="additional-content"> <p> Aliquam nec auctor lectus. Etiam ut ipsum a nibh iaculis fringilla.</p> <p>Aliquam nec auctor lectus. Etiam ut ipsum a nibh iaculis fringilla.</p> </div>12년 7월 19일 목요일
  24. 24. <div id="scrollview-container"> <div id="scrollview-header"> <h1>Paged ScrollView</h1> </div> <div id="scrollview-content" class="yui3-scrollview-loading"> <ul> <li><img src="c621e0b501.jpg" alt="Above The City II"></li> <li><img src="1373a0ef89.jpg" alt="Walls and Canyon"></li> <li><img src="4303e8eaea.jpg" alt="Stairs Using In Situ Stone"></li> <li><img src="854e8c0ef3.jpg" alt="Tree Silhouette"></li> </ul> </div> <div id="scrollview-pager"> <button id="scrollview-prev">Prev</button> <button id="scrollview-next">Next</button> </div> </div> <div id="additional-content"> <p> Aliquam nec auctor lectus. Etiam ut ipsum a nibh iaculis fringilla.</p> <p>Aliquam nec auctor lectus. Etiam ut ipsum a nibh iaculis fringilla.</p> </div>12년 7월 19일 목요일
  25. 25. <x-slide> <li><img src="c621e0b501.jpg" alt="Above The City II"></li> <li><img src="1373a0ef89.jpg" alt="Walls and Canyon"></li> <li><img src="4303e8eaea.jpg" alt="Stair In Stone"></li> <li><img src="854e8c0ef3.jpg" alt="Tree Silhouette"></li> </x-slide>12년 7월 19일 목요일
  26. 26. <x-slide> <li><img src="c621e0b501.jpg" alt="Above The City II"></li> <li><img src="1373a0ef89.jpg" alt="Walls and Canyon"></li> <li><img src="4303e8eaea.jpg" alt="Stair In Stone"></li> <li><img src="854e8c0ef3.jpg" alt="Tree Silhouette"></li> </x-slide> <div id="scrollview-container"> <div id="scrollview-header"> <h1>Paged ScrollView</h1> </div> <div id="scrollview-content" class="yui3-scrollview-loading"> <ul> <li><img src="c621e0b501.jpg" alt="Above The City II"></li> <li><img src="1373a0ef89.jpg" alt="Walls and Canyon"></li> <li><img src="4303e8eaea.jpg" alt="Stairs Using In Situ Stone"></li> <li><img src="854e8c0ef3.jpg" alt="Tree Silhouette"></li> </ul> </div> <div id="scrollview-pager"> <button id="scrollview-prev">Prev</button> <button id="scrollview-next">Next</button> </div> </div> <div id="additional-content"> <p> Aliquam nec auctor lectus. Etiam ut ipsum a nibh iaculis fringilla.</p> <p>Aliquam nec auctor lectus. Etiam ut ipsum a nibh iaculis fringilla.</p> </div>12년 7월 19일 목요일
  27. 27. Encapsulation12년 7월 19일 목요일
  28. 28. 12년 7월 19일 목요일
  29. 29. 12년 7월 19일 목요일
  30. 30. 12년 7월 19일 목요일
  31. 31. <x-slide> <li><img src="c621e0b501.jpg" alt="Above The City II"></li> <li><img src="1373a0ef89.jpg" alt="Walls and Canyon"></li> <li><img src="4303e8eaea.jpg" alt="Stair In Stone"></li> <li><img src="854e8c0ef3.jpg" alt="Tree Silhouette"></li> </x-slide>12년 7월 19일 목요일
  32. 32. <x-slide> <li><img src="c621e0b501.jpg" alt="Above The City II"></li> <li><img src="1373a0ef89.jpg" alt="Walls and Canyon"></li> <li><img src="4303e8eaea.jpg" alt="Stair In Stone"></li> <li><img src="854e8c0ef3.jpg" alt="Tree Silhouette"></li> </x-slide> Rendered12년 7월 19일 목요일
  33. 33. <x-slide> <li><img src="c621e0b501.jpg" alt="Above The City II"></li> <li><img src="1373a0ef89.jpg" alt="Walls and Canyon"></li> <li><img src="4303e8eaea.jpg" alt="Stair In Stone"></li> <li><img src="854e8c0ef3.jpg" alt="Tree Silhouette"></li> </x-slide> <div id="scrollview-container"> Rendered <div id="scrollview-header"> <h1>Paged ScrollView</h1> </div> <div id="scrollview-content" class="yui3-scrollview-loading"> <ul> <li><img src="c621e0b501.jpg" alt="Above The City II"></li> <li><img src="1373a0ef89.jpg" alt="Walls and Canyon"></li> <li><img src="4303e8eaea.jpg" alt="Stairs Using In Situ Stone"></li> <li><img src="854e8c0ef3.jpg" alt="Tree Silhouette"></li> </ul> </div> <div id="scrollview-pager"> <button id="scrollview-prev">Prev</button> <button id="scrollview-next">Next</button> </div> </div> <div id="additional-content"> <p> Aliquam nec auctor lectus. Etiam ut ipsum a nibh iaculis fringilla.</p> <p>Aliquam nec auctor lectus. Etiam ut ipsum a nibh iaculis fringilla.</p> </div>12년 7월 19일 목요일
  34. 34. <x-slide> <li><img src="c621e0b501.jpg" alt="Above The City II"></li> <li><img src="1373a0ef89.jpg" alt="Walls and Canyon"></li> <li><img src="4303e8eaea.jpg" alt="Stair In Stone"></li> <li><img src="854e8c0ef3.jpg" alt="Tree Silhouette"></li> </x-slide> <div id="scrollview-container"> Shadow DOM Rendered <div id="scrollview-header"> <h1>Paged ScrollView</h1> </div> <div id="scrollview-content" class="yui3-scrollview-loading"> <ul> <li><img src="c621e0b501.jpg" alt="Above The City II"></li> <li><img src="1373a0ef89.jpg" alt="Walls and Canyon"></li> <li><img src="4303e8eaea.jpg" alt="Stairs Using In Situ Stone"></li> <li><img src="854e8c0ef3.jpg" alt="Tree Silhouette"></li> </ul> </div> <div id="scrollview-pager"> <button id="scrollview-prev">Prev</button> <button id="scrollview-next">Next</button> </div> </div> <div id="additional-content"> <p> Aliquam nec auctor lectus. Etiam ut ipsum a nibh iaculis fringilla.</p> <p>Aliquam nec auctor lectus. Etiam ut ipsum a nibh iaculis fringilla.</p> </div>12년 7월 19일 목요일
  35. 35. <video width="320" height="240" controls="controls"> <source src="movie.mp4" type="video/mp4" /> <source src="movie.ogg" type="video/ogg" /> </video>12년 7월 19일 목요일
  36. 36. 12년 7월 19일 목요일
  37. 37. video tag?12년 7월 19일 목요일
  38. 38. Custom Element12년 7월 19일 목요일
  39. 39. slide-component.html <element name="x-slide" extends="ul" constructor="SlideControl"> <template> <style></style> <div class="slide"> <ul> <content select="li"></content> </ul> </div> </template> <script> this.lifecycle({ "created":function(){} }); SlideControl.prototype={}; </script> </element>12년 7월 19일 목요일
  40. 40. <link rel="components" href="slide-component.html"/> <x-slide is="x-slide"> <li><img src="img/1.jpeg" height="333px" width="500px"/></li> <li><img src="img/2.jpeg" height="333px" width="500px"/></li> <li><img src="img/3.jpeg" height="333px" width="500px"/></li> <li><img src="img/4.jpeg" height="333px" width="500px"/></li> </x-slide>12년 7월 19일 목요일
  41. 41. 12년 7월 19일 목요일
  42. 42. Template <template> <style> .slide{ overflow:hidden; width : 500px; } </style> <div class="slide"> <ul> <content select="li"></content> </ul> </div> </template>12년 7월 19일 목요일
  43. 43. Template <template> <style> .slide{ overflow:hidden; width : 500px; } </style> <div class="slide"> <ul> <content select="li"></content> </ul> </div> </template>12년 7월 19일 목요일
  44. 44. 12년 7월 19일 목요일
  45. 45. 12년 7월 19일 목요일
  46. 46. 12년 7월 19일 목요일
  47. 47. <x-slide is="x-slide"> <li><img src="img/1.jpeg" height="333px" width="500px"/></li> <li><img src="img/2.jpeg" height="333px" width="500px"/></li> <li><img src="img/3.jpeg" height="333px" width="500px"/></li> <li><img src="img/4.jpeg" height="333px" width="500px"/></li> </x-slide> <div class="slide"> <ul> <content select="li"></content> </ul> </div>12년 7월 19일 목요일
  48. 48. HTMLElement <element name="x-slide" extends="ul" constructor="SlideControl"> --- function SlideControl(){}; SlideControl.prototype { "currentNum" : function(){}, "lastNum" : function(){} }; var slide = new SlideControl(); // var slide = document.createElement("x-slide"); document.body.appendChild(slide); slide.addEventListener("click", function (event) { event.target.currentNum(); }); side.lastNum(); silde instanceof HTMLElement //==> true silde instanceof HTMLULElement //==> true12년 7월 19일 목요일
  49. 49. lifecycle this.lifecycle({ "created": function() {}, "attributeChanged": function() {}, "inserted": function() {}, "removed": function() {} });12년 7월 19일 목요일
  50. 50. Web Components • Easy-to-Use • Semantic • High Performance12년 7월 19일 목요일
  51. 51. Future?12년 7월 19일 목요일
  52. 52. 감사합니다.12년 7월 19일 목요일

×