웹데브모바일 3월 세미나 자료 : Raphael 로 손쉽게 그리는 웹벡터 그래픽

2,657 views

Published on

웹데브모바일 3월 세미나 자료 : Raphael 로 손쉽게 그리는 웹벡터 그래픽
http://webdevmobile.com

1 Comment
4 Likes
Statistics
Notes
No Downloads
Views
Total views
2,657
On SlideShare
0
From Embeds
0
Number of Embeds
290
Actions
Shares
0
Downloads
0
Comments
1
Likes
4
Embeds 0
No embeds

No notes for slide

웹데브모바일 3월 세미나 자료 : Raphael 로 손쉽게 그리는 웹벡터 그래픽

  1. 1. Raphaël (Web)
  2. 2. (Developer) @jongkwang !"#$%& *+,-!kim@jongkwang.com (%((!) okjsp.pe.kr/m okjsp.pe.kr/html5 !"#$%&$()**$+%$#"+) , -$.)*/(#)0$1%$2&3/*$4+* jongkwang.com t.melon.com Sencha Touch ( )
  3. 3. Index SVG Raphael Raphael nScreen Raphael!
  4. 4. SVG
  5. 5. SVG SVG
  6. 6. SVG S VG
  7. 7. SVG SVG S VG
  8. 8. SVG S calable Vector Graphics
  9. 9. SVG SVG S calable Vector Graphics
  10. 10. Scalable Vector Graphics from WikipediaSVG(Scalable Vector Graphics) 2 XML , 1999 W3C(World Wide Web Consortium) . SVG XML · · . SVG .SVG SVG .XML . SVG . SVG , , SVG Web .
  11. 11. Scalable Vector Graphics from WikipediaSVG(Scalable Vector Graphics) 2 XML , 1999 W3C(World Wide Web Consortium) . SVG XML · · . SVG .SVG SVG .XML . SVG . SVG , , SVG Web . !!
  12. 12. Scalable Vector Graphics from WikipediaSVG(Scalable Vector Graphics) 2 XML , 1999 W3C(World Wide Web Consortium) . SVG XML · · . SVG .SVG SVG .XML . SVG . SVG , , SVG Web .
  13. 13. Scalable Vector Graphics from WikipediaSVG(Scalable Vector Graphics) 2 2 XML XML ! , 1999 W3C(World Wide Web Consortium) . SVG W3C XML · · . SVG .SVG SVG .XML . SVG . IE SVG , , SVG Web .
  14. 14. Scalable Vector Graphics from WikipediaSVG(Scalable Vector Graphics) 2 2 XML XML ! , 1999 W3C(World Wide Web Consortium) . SVG W3C XML · · . SVG .SVG SVG .XML . SVG . IE SVG , , SVG Web . .
  15. 15. SVG SVG History
  16. 16. SVG SVG History SVG
  17. 17. SVG SVG History PGML VML SVG Canvas WebGL
  18. 18. SVG SVG History PGML 1998 Vector VML SVG 2001 Canvas 2006~ Pixel WebGL
  19. 19. SVG SVG History VML PGML S nvas WaVG L C ebG
  20. 20. SVG SVG History VML PGML 3C 1998 Microsoft W Adobe Macromedia IBM Autodesk Sun HP Netscape S nvas WaVG L C ebG
  21. 21. SVG SVG History VML PGML 3C 1998 Microsoft W Adobe Macromedia IBM Autodesk Sun HP Netscape SVG WanvaL C ebG s
  22. 22. SVG SVG History VML PGML 3C 1998 Microsoft W Adobe Macromedia IBM Autodesk Sun HP Netscape 3C 2001 W SVG WanvaL C ebG s
  23. 23. SVG SVG History PGML 3C 1998 Microsoft W Adobe Macromedia IBM Autodesk Sun HP Netscape IE 6, 7, 8 SVG VML WanvaL C ebG s
  24. 24. SVG SVG History PGML 3C 1998 Microsoft W Adobe Macromedia IBM Autodesk Sun HP Netscape 3C 2001 W IE 6, 7, 8 SVG VML WanvaL C ebG s
  25. 25. SVG Vector VML PGML SVG WanvaL C ebG s
  26. 26. SVG Vector VML PGML SVG WanvaL C ebG s
  27. 27. SVG Vector VML PGML SVG WanvaL C ebG s
  28. 28. SVG Vector VML PGML SVG WanvaL C ebG s
  29. 29. SVG Vector VML PGML SVG + = WanvaL C ebG s
  30. 30. SVG Canvas PML L V GGM SV Canvas WebGL
  31. 31. SVG Canvas PML L V GGM SV Canvas WebGL
  32. 32. SVG Canvas PML L V GGM SV Canvas WebGL
  33. 33. SVG SVG VML FireFox IE 6~8 Opera Chrome Safari IE 9 WanvaL PebM s C GG
  34. 34. SVG SVG VML FireFox IE 6~8 - Google Chrome Frame Opera - Renesis Player for IE - Ssrc SVG Plugin Chrome - Adobe SVG Viewer - Corel SVG Viewer Safari - Ample SDK - Raphaël IE 9 lug-In P WanvaL PebM s C GG
  35. 35. SVG SVG SVG FireFox Opera Chrome Safari IE 9 WVMLL Panvas C ebM GG
  36. 36. Raphaël
  37. 37. Raphaël- :‘ ’ .- :‘ ’ .
  38. 38. Raphael Raphael Raphaël SVG VML
  39. 39. Raphael Raphael Raphaël SVG VML
  40. 40. Raphael Raphael Raphaël JavaScript SVG VML
  41. 41. Raphael Raphael Raphaël FireFox 3.0+ Opera 9.5+ Chrome 5.0+ Safari 3.0+
  42. 42. Raphael Raphael Raphaël FireFox 3.0+ Opera 9.5+ Chrome 5.0+ Safari 3.0+ IE 6+ IE6 !
  43. 43. Raphael Raphaël Open Source JavaScript Libraries - Dojo ToolKit - Ext JS - jQuery - Mootools - Raphael
  44. 44. Raphael Raphaël Open Source JavaScript Libraries - Dojo ToolKit - Ext JS - jQuery - Mootools - Raphael ar y 3 000 cript Libr J avaS Li brar y
  45. 45. Raphael Raphaël Free !!
  46. 46. Raphael Raphaël Free !! !
  47. 47. Samples
  48. 48. ljs.comhttp://raphae
  49. 49. ljs.comhttp://raphae
  50. 50. ljs.comhttp://raphae
  51. 51. itgeist.com/ e psicozhttp://pe ns o co nnecti
  52. 52. s.com /polar- haeljht tp://rap l clo ck.htm
  53. 53. nScreen
  54. 54. nScreen r Gr aphic Vecto
  55. 55. nScreen
  56. 56. nScreen
  57. 57. nScreeniPhone4
  58. 58. nScreen
  59. 59. nScreen
  60. 60. nScreen
  61. 61. nScreen
  62. 62. How Make ?
  63. 63. How Make ?API .
  64. 64. <html xmlns:v="urn:schemas-microsoft-com:vml"> <body> <v:oval style="position: absolute; left: 0; top: 0; width: 100px; height: 50px; behavior: url(#default#VML);" fillcolor="blue" stroked="false"> </v:oval> </body></html> <?xml version="1.0"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg xmlns="http://www.w3.org/2000/svg" width="100" height="50"> <ellipse cx="50" cy="25" rx="50" ry="25" style="fill: blue;" /> </svg>
  65. 65. <html xmlns:v="urn:schemas-microsoft-com:vml"> <body> <v:oval style="position: absolute; left: 0; top: 0; width: 100px; height: 50px; behavior: url(#default#VML);" fillcolor="blue" stroked="false"> </v:oval> </body> </html> SVG / el js.comhttp://rapha tml <?xml version="1.0"?> reference.h <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg xmlns="http://www.w3.org/2000/svg" width="100" height="50"> <ellipse cx="50" cy="25" rx="50" ry="25" style="fill: blue;" /> </svg> VML
  66. 66. / ae ljs.comhttp ://raph .html ce r eferen
  67. 67. Where do I use ?
  68. 68. Replace FLASH ?
  69. 69. Replace FLASH ? r y Baran ovskiy) r. (from Dmit l is not F lash killeRaphae
  70. 70. Replace FLASH ? r y Baran ovskiy) r. (from Dmit l is not F lash killeRaphae imator ir n dobe A Se ncha A A
  71. 71. Icon
  72. 72. Chart
  73. 73. Chart
  74. 74. Chart k Times ew Yor The N
  75. 75. Chart
  76. 76. Chart
  77. 77. Chart st ton Po Washing
  78. 78. How Make ? API
  79. 79. Path StringM4.998,12.127v7.896h4.495l6.729,5.526l0.004-18.948l-6.73,5.526H4.998zM18.806,11.219c-0.393-0.389-1.024-0.389-1.415,0.002c-0.39,0.391-0.39,1.024,0.002,1.416v-0.002c0.863,0.864,1.395,2.049,1.395,3.366c0,1.316-0.531,2.497-1.393,3.361c-0.394,0.389-0.394,1.022-0.002,1.415c0.195,0.195,0.451,0.293,0.707,0.293c0.257,0,0.513-0.098,0.708-0.293c1.222-1.22,1.98-2.915,1.979-4.776C20.788,14.136,20.027,12.439,18.806,11.219zM21.101,8.925c-0.393-0.391-1.024-0.391-1.413,0c-0.392,0.391-0.392,1.025,0,1.414c1.45,1.451,2.344,3.447,2.344,5.661c0,2.212-0.894,4.207-2.342,5.659c-0.392,0.39-0.392,1.023,0,1.414c0.195,0.195,0.451,0.293,0.708,0.293c0.256,0,0.512-0.098,0.707-0.293c1.808-1.809,2.929-4.315,2.927-7.073C24.033,13.24,22.912,10.732,21.101,8.925zM23.28,6.746c-0.393-0.391-1.025-0.389-1.414,0.002c-0.391,0.389-0.391,1.023,0.002,1.413h-0.002c2.009,2.009,3.248,4.773,3.248,7.839c0,3.063-1.239,5.828-3.246,7.838c-0.391,0.39-0.391,1.023,0.002,1.415c0.194,0.194,0.45,0.291,0.706,0.291s0.513-0.098,0.708-0.293c2.363-2.366,3.831-5.643,3.829-9.251C27.115,12.389,25.647,9.111,23.28,6.746z
  80. 80. Path StringM4.998,12.127v7.896h4.495l6.729,5.526l0.004-18.948l-6.73,5.526H4.998zM18.806,11.219c-0.393-0.389-1.024-0.389-1.415,0.002c-0.39,0.391-0.39,1.024,0.002,1.416v-0.002c0.863,0.864,1.395,2.049,1.395,3.366c0,1.316-0.531,2.497-1.393,3.361c-0.394,0.389-0.394,1.022-0.002,1.415c0.195,0.195,0.451,0.293,0.707,0.293c0.257,0,0.513-0.098,0.708-0.293c1.222-1.22,1.98-2.915,1.979-4.776C20.788,14.136,20.027,12.439,18.806,11.219zM21.101,8.925c-0.393-0.391-1.024-0.391-1.413,0c-0.392,0.391-0.392,1.025,0,1.414c1.45,1.451,2.344,3.447,2.344,5.661c0,2.212-0.894,4.207-2.342,5.659c-0.392,0.39-0.392,1.023,0,1.414c0.195,0.195,0.451,0.293,0.708,0.293c0.256,0,0.512-0.098,0.707-0.293c1.808-1.809,2.929-4.315,2.927-7.073C24.033,13.24,22.912,10.732,21.101,8.925zM23.28,6.746c-0.393-0.391-1.025-0.389-1.414,0.002c-0.391,0.389-0.391,1.023,0.002,1.413h-0.002c2.009,2.009,3.248,4.773,3.248,7.839c0,3.063-1.239,5.828-3.246,7.838c-0.391,0.39-0.391,1.023,0.002,1.415c0.194,0.194,0.45,0.291,0.706,0.291s0.513-0.098,0.708-0.293c2.363-2.366,3.831-5.643,3.829-9.251C27.115,12.389,25.647,9.111,23.28,6.746z ?!
  81. 81. Path StringM4.998,12.127v7.896h4.495l6.729,5.526l0.004-18.948l-6.73,5.526H4.998zM18.806,11.219c-0.393-0.389-1.024-0.389-1.415,0.002c-0.39,0.391-0.39,1.024,0.002,1.416v-0.002c0.863,0.864,1.395,2.049,1.395,3.366c0,1.316-0.531,2.497-1.393,3.361c-0.394,0.389-0.394,1.022-0.002,1.415c0.195,0.195,0.451,0.293,0.707,0.293c0.257,0,0.513-0.098,0.708-0.293c1.222-1.22,1.98-2.915,1.979-4.776C20.788,14.136,20.027,12.439,18.806,11.219zM21.101,8.925c-0.393-0.391-1.024-0.391-1.413,0c-0.392,0.391-0.392,1.025,0,1.414c1.45,1.451,2.344,3.447,2.344,5.661c0,2.212-0.894,4.207-2.342,5.659c-0.392,0.39-0.392,1.023,0,1.414c0.195,0.195,0.451,0.293,0.708,0.293c0.256,0,0.512-0.098,0.707-0.293c1.808-1.809,2.929-4.315,2.927-7.073C24.033,13.24,22.912,10.732,21.101,8.925zM23.28,6.746c-0.393-0.391-1.025-0.389-1.414,0.002c-0.391,0.389-0.391,1.023,0.002,1.413h-0.002c2.009,2.009,3.248,4.773,3.248,7.839c0,3.063-1.239,5.828-3.246,7.838c-0.391,0.39-0.391,1.023,0.002,1.415c0.194,0.194,0.45,0.291,0.706,0.291s0.513-0.098,0.708-0.293c2.363-2.366,3.831-5.643,3.829-9.251C27.115,12.389,25.647,9.111,23.28,6.746z ?! ^^
  82. 82. to n PostWashing
  83. 83. g RaphaëlJavaScript libraryBased on Raphael graphic library FireFox 3.0+ Opera 9.5+ Chrome 5.0+ Safari 3.0+ IE 6+
  84. 84. g Raphaël aeljs.com g,raphJavaScript libraryBased on Raphael graphic library FireFox 3.0+ Opera 9.5+ Chrome 5.0+ Safari 3.0+ IE 6+
  85. 85. SummarySVG . . (Canvas ) nScreen , IE 6,7,8 .
  86. 86. SummarySVG . . (Canvas ) nScreen , IE 6,7,8 .
  87. 87. SummaryRaphael . JavaScript Library. Free !! SVG + VML . IE 6,7,8 . .
  88. 88. SummaryRaphael . JavaScript Library. Free !! SVG + VML . IE 6,7,8 . . to n Post Washing JavaScript SVG VML
  89. 89. Follow @DmitryBaranovskFollow @RaphaelJS : http://vimeo.com/17834923Doc : http://raphaeljs.com/reference.htmlgRaphael : http://g.raphaeljs.com/
  90. 90. THANK YOU

×