Your SlideShare is downloading. ×
Raphaël   (Web)
(Developer)                      @jongkwang     !"#$%&                      *+,-!kim@jongkwang.com                        ...
Index       SVG    Raphael      Raphael nScreen       Raphael!
SVG
SVG      SVG
SVG      S VG
SVG          SVG      S VG
SVG      S calable Vector Graphics
SVG                               SVG      S calable Vector Graphics
Scalable Vector Graphics                               from WikipediaSVG(Scalable Vector Graphics) 2                      ...
Scalable Vector Graphics                               from WikipediaSVG(Scalable Vector Graphics) 2                      ...
Scalable Vector Graphics                               from WikipediaSVG(Scalable Vector Graphics) 2                      ...
Scalable Vector Graphics                               from WikipediaSVG(Scalable Vector Graphics) 2       2              ...
Scalable Vector Graphics                               from WikipediaSVG(Scalable Vector Graphics) 2       2              ...
SVG      SVG History
SVG         SVG History      SVG
SVG            SVG History      PGML       VML       SVG      Canvas      WebGL
SVG                     SVG History               PGML      1998      Vector    VML                SVG      2001          ...
SVG                   SVG History      VML   PGML                    S nvas                   WaVG L                   C ebG
SVG                                      SVG History         VML                   PGML                    3C 1998       M...
SVG                                      SVG History         VML                   PGML                    3C 1998       M...
SVG                                      SVG History         VML                   PGML                    3C 1998       M...
SVG                                      SVG History                               PGML                    3C 1998       M...
SVG                                      SVG History                               PGML                    3C 1998       M...
SVG              Vector      VML PGML        SVG                 WanvaL                 C ebG s
SVG              Vector      VML PGML        SVG                 WanvaL                 C ebG s
SVG              Vector      VML PGML        SVG                 WanvaL                 C ebG s
SVG              Vector      VML PGML        SVG                 WanvaL                 C ebG s
SVG                      Vector      VML PGML        SVG                 +                     =                         W...
SVG           Canvas      PML L      V GGM       SV                Canvas               WebGL
SVG           Canvas      PML L      V GGM       SV                Canvas               WebGL
SVG           Canvas      PML L      V GGM       SV                Canvas               WebGL
SVG       SVG      VML      FireFox   IE 6~8      Opera      Chrome       Safari       IE 9                         WanvaL...
SVG       SVG                                       VML      FireFox                                    IE 6~8            ...
SVG            SVG      SVG  FireFox  Opera Chrome      Safari      IE 9               WVMLL                Panvas        ...
Raphaël
Raphaël-       :‘            ’              .-       :‘        ’    .
Raphael                   Raphael    Raphaël              SVG   VML
Raphael                   Raphael    Raphaël              SVG   VML
Raphael                       Raphael    Raphaël                JavaScript              SVG       VML
Raphael                       Raphael     Raphaël               FireFox 3.0+               Opera 9.5+               Chrome...
Raphael                                 Raphael     Raphaël               FireFox 3.0+               Opera 9.5+           ...
Raphael           Raphaël    Open Source JavaScript Libraries          - Dojo ToolKit          - Ext JS          - jQuery ...
Raphael           Raphaël    Open Source JavaScript Libraries          - Dojo ToolKit          - Ext JS          - jQuery ...
Raphael          Raphaël                    Free !!
Raphael          Raphaël                    Free !!                              !
Samples
ljs.comhttp://raphae
ljs.comhttp://raphae
ljs.comhttp://raphae
itgeist.com/               e         psicozhttp://pe ns           o co nnecti
s.com /polar-           haeljht tp://rap l clo ck.htm
nScreen
nScreen        r Gr aphic  Vecto
nScreen
nScreen
nScreeniPhone4
nScreen
nScreen
nScreen
nScreen
How Make ?
How Make ?API        .
<html xmlns:v="urn:schemas-microsoft-com:vml"> <body>  <v:oval style="position: absolute; left: 0; top: 0;    width: 100px...
<html xmlns:v="urn:schemas-microsoft-com:vml">                           <body>                            <v:oval style="...
/            ae ljs.comhttp ://raph .html             ce    r eferen
Where do I use ?
Replace FLASH ?
Replace FLASH ?                                           r y Baran ovskiy)                            r. (from   Dmit    ...
Replace FLASH ?                                           r y Baran ovskiy)                            r. (from   Dmit    ...
Icon
Chart
Chart
Chart                     k Times              ew Yor        The N
Chart
Chart
Chart                      st               ton Po        Washing
How Make ?        API
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....
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....
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....
to n PostWashing
g RaphaëlJavaScript libraryBased on Raphael graphic library         FireFox 3.0+          Opera 9.5+         Chrome 5.0+  ...
g Raphaël                     aeljs.com              g,raphJavaScript libraryBased on Raphael graphic library         Fire...
SummarySVG              .                         . (Canvas       )  nScreen            , IE 6,7,8               .
SummarySVG              .                         . (Canvas       )  nScreen            , IE 6,7,8               .
SummaryRaphael                         .   JavaScript Library. Free !!   SVG + VML                        .   IE 6,7,8    ...
SummaryRaphael                         .   JavaScript Library. Free !!   SVG + VML                        .   IE 6,7,8    ...
Follow @DmitryBaranovskFollow @RaphaelJS             : http://vimeo.com/17834923Doc : http://raphaeljs.com/reference.htmlg...
THANK YOU
웹데브모바일 3월 세미나 자료 : Raphael 로 손쉽게 그리는 웹벡터 그래픽
웹데브모바일 3월 세미나 자료 : Raphael 로 손쉽게 그리는 웹벡터 그래픽
웹데브모바일 3월 세미나 자료 : Raphael 로 손쉽게 그리는 웹벡터 그래픽
웹데브모바일 3월 세미나 자료 : Raphael 로 손쉽게 그리는 웹벡터 그래픽
웹데브모바일 3월 세미나 자료 : Raphael 로 손쉽게 그리는 웹벡터 그래픽
웹데브모바일 3월 세미나 자료 : Raphael 로 손쉽게 그리는 웹벡터 그래픽
웹데브모바일 3월 세미나 자료 : Raphael 로 손쉽게 그리는 웹벡터 그래픽
웹데브모바일 3월 세미나 자료 : Raphael 로 손쉽게 그리는 웹벡터 그래픽
웹데브모바일 3월 세미나 자료 : Raphael 로 손쉽게 그리는 웹벡터 그래픽
웹데브모바일 3월 세미나 자료 : Raphael 로 손쉽게 그리는 웹벡터 그래픽
웹데브모바일 3월 세미나 자료 : Raphael 로 손쉽게 그리는 웹벡터 그래픽
웹데브모바일 3월 세미나 자료 : Raphael 로 손쉽게 그리는 웹벡터 그래픽
웹데브모바일 3월 세미나 자료 : Raphael 로 손쉽게 그리는 웹벡터 그래픽
웹데브모바일 3월 세미나 자료 : Raphael 로 손쉽게 그리는 웹벡터 그래픽
웹데브모바일 3월 세미나 자료 : Raphael 로 손쉽게 그리는 웹벡터 그래픽
웹데브모바일 3월 세미나 자료 : Raphael 로 손쉽게 그리는 웹벡터 그래픽
웹데브모바일 3월 세미나 자료 : Raphael 로 손쉽게 그리는 웹벡터 그래픽
웹데브모바일 3월 세미나 자료 : Raphael 로 손쉽게 그리는 웹벡터 그래픽
웹데브모바일 3월 세미나 자료 : Raphael 로 손쉽게 그리는 웹벡터 그래픽
웹데브모바일 3월 세미나 자료 : Raphael 로 손쉽게 그리는 웹벡터 그래픽
웹데브모바일 3월 세미나 자료 : Raphael 로 손쉽게 그리는 웹벡터 그래픽
웹데브모바일 3월 세미나 자료 : Raphael 로 손쉽게 그리는 웹벡터 그래픽
웹데브모바일 3월 세미나 자료 : Raphael 로 손쉽게 그리는 웹벡터 그래픽
웹데브모바일 3월 세미나 자료 : Raphael 로 손쉽게 그리는 웹벡터 그래픽
웹데브모바일 3월 세미나 자료 : Raphael 로 손쉽게 그리는 웹벡터 그래픽
웹데브모바일 3월 세미나 자료 : Raphael 로 손쉽게 그리는 웹벡터 그래픽
웹데브모바일 3월 세미나 자료 : Raphael 로 손쉽게 그리는 웹벡터 그래픽
웹데브모바일 3월 세미나 자료 : Raphael 로 손쉽게 그리는 웹벡터 그래픽
웹데브모바일 3월 세미나 자료 : Raphael 로 손쉽게 그리는 웹벡터 그래픽
웹데브모바일 3월 세미나 자료 : Raphael 로 손쉽게 그리는 웹벡터 그래픽
웹데브모바일 3월 세미나 자료 : Raphael 로 손쉽게 그리는 웹벡터 그래픽
웹데브모바일 3월 세미나 자료 : Raphael 로 손쉽게 그리는 웹벡터 그래픽
Upcoming SlideShare
Loading in...5
×

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

2,305

Published on

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

1 Comment
4 Likes
Statistics
Notes
No Downloads
Views
Total Views
2,305
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
1
Likes
4
Embeds 0
No embeds

No notes for slide

Transcript of "웹데브모바일 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

×