The State of Web Development

2,791 views
2,731 views

Published on

2010.05.14 Tomorrow`s web today のスライド
こちらは、詳細データはありません。

URL
http://www.webdirections.org/sotw10/

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

No Downloads
Views
Total views
2,791
On SlideShare
0
From Embeds
0
Number of Embeds
26
Actions
Shares
0
Downloads
23
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide




  • State of Web Development は Opera mama のように、Web業界でなにがおこっているのかの全体像をつかみ、その使われているテクノロジー、技術、そして使っているツールなどを調べるために Web Directions のおこなっています。
  • State of Web Development は Opera mama のように、Web業界でなにがおこっているのかの全体像をつかみ、その使われているテクノロジー、技術、そして使っているツールなどを調べるために Web Directions のおこなっています。
  • State of Web Development は Opera mama のように、Web業界でなにがおこっているのかの全体像をつかみ、その使われているテクノロジー、技術、そして使っているツールなどを調べるために Web Directions のおこなっています。
  • 対象へのアプローチは、過去にWeb Directions のカンファレンスに参加された人へメール配信や、開発者のブログやウェブサイトへリンクを貼るなどして、調査に参加してもらいました。
  • 対象へのアプローチは、過去にWeb Directions のカンファレンスに参加された人へメール配信や、開発者のブログやウェブサイトへリンクを貼るなどして、調査に参加してもらいました。
  • この調査は今までに2回おこなわれて、1回目は2008年は12月におこない、2回目はそれから13ヶ月たった2010年1月におこないました。









  • いくつかのキーワードを抜き出しました。
  • いくつかのキーワードを抜き出しました。




  • いくつかのキーワードを抜き出しました。
  • いくつかのキーワードを抜き出しました。






  • いくつかのキーワードを抜き出しました。
  • いくつかのキーワードを抜き出しました。





























  • 最後にFlash の話題がでましたので、CANVAS と SVGの話をおみせしたいと思います。







































  • The State of Web Development

    1. 1. The State of Web Development Tomorrow’s Web Today Takashi Kikuchi 2010.05.14 Roppongi hills Tomorrow’s Web Today
    2. 2. The State Of Web Development Tomorrow’s Web Today
    3. 3. The State Of Web Development Tomorrow’s Web Today
    4. 4. MAMA http://dev.opera.com/articles/view/mama/ Tomorrow’s Web Today
    5. 5. Web
    6. 6. Web
    7. 7. Web
    8. 8. 2008 2010 2011 12 1 12
    9. 9. 2008 2010 2011 12 1 12 13
    10. 10. 1400
    11. 11. 6 1400
    12. 12. slideshare “mantangs” http://www.slideshare.net/mantangs/ state-of-web-development
    13. 13. 2008
    14. 14. 2008 →
    15. 15. 2008 →
    16. 16. 2008 → Javascript
    17. 17. 2008 → Javascript Web
    18. 18. 2010
    19. 19. Mac OS CSS3 Webkit Webfonts HTML5 jQuery
    20. 20. Mac OS
    21. 21. Mac OS
    22. 22. OS Mac OS X Windows 2008 46% 47% Mac OS X Windows 2010 52% 41% 0 50 100
    23. 23. OS Mac OS X Windows 2008 46% 47% Mac OS X Windows 2010 52% 41% 0 50 100
    24. 24. iPhone
    25. 25. iPhone CSS3 animation ?
    26. 26. Mac OS CSS3 Webkit Webfonts HTML5 jQuery
    27. 27. Webkit
    28. 28. Webkit
    29. 29. 2008 25% Webkit
    30. 30. 2008 25% Webkit
    31. 31. 2008 2010 25% 47% Webkit
    32. 32. 2010 Webkit
    33. 33. 2010 x2 Webkit
    34. 34. 1,Web 2, 3,
    35. 35. Mac OS CSS3 Webkit Webfonts HTML5 jQuery
    36. 36. HTML5
    37. 37. HTML5
    38. 38. 2008 1.3% HTML5 Doctype
    39. 39. 2008 1.3% HTML5 Doctype
    40. 40. 2008 2010 1.3% 12.6% HTML5 Doctype
    41. 41. 2010 HTML5 Doctype
    42. 42. 2010 x10 HTML5 Doctype
    43. 43. Mac OS CSS3 Webkit Webfonts HTML5 jQuery
    44. 44. CSS3
    45. 45. CSS3
    46. 46. 2008 45% CSS3
    47. 47. 2008 45% CSS3
    48. 48. 2008 2010 45% 68% CSS3
    49. 49. 2010 CSS3
    50. 50. 2010 70% CSS3
    51. 51. Mac OS CSS3 Webkit Webfonts HTML5 jQuery
    52. 52. Webfonts
    53. 53. Webfonts
    54. 54. 2008 4% Webfont
    55. 55. 2008 4% Webfont
    56. 56. 2008 2010 4% 23% Webfont
    57. 57. 2010 Webfont
    58. 58. 2010 4 1 Webfont
    59. 59. Mac OS CSS3 Webkit Webfonts HTML5 jQuery
    60. 60. Mac OS CSS3 Webkit Webfonts HTML5 jQuery
    61. 61. Mac OS CSS3 Webkit jQuery Webfonts HTML5
    62. 62. 2008 63% jQuery
    63. 63. 2008 63% jQuery
    64. 64. 2008 2010 63% 80% jQuery
    65. 65. 2010 jQuery
    66. 66. 2010 80% jQuery
    67. 67. 2010
    68. 68. 2010 HTML5 & CSS3
    69. 69. 2010 HTML5 & CSS3 Web
    70. 70. 2010 HTML5 & CSS3 Web
    71. 71. 2010 HTML5 & CSS3 Web javascript
    72. 72. The State Of Web Development Tomorrow’s Web Today
    73. 73. Thanks Opera It`s Fridays
    74. 74. Thanks Opera It`s Fridays
    75. 75. CANVAS & SVG
    76. 76. CANVAS & SVG
    77. 77. SVG <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE svg PUBLIC "-//W3C// DTD SVG 1.1//EN" "http://www.w3.org/ Graphics/SVG/1.1/DTD/svg11.dtd"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <rect fill="#333" width="426" height="260.667"/> <ellipse cx="213" cy="130" rx="205" ry="117"> </svg> <animate <animate attributeName="fill" attributeType="CSS" begin="0s" dur="6s" fill="freeze" from="#000" to="#f00"/> attributeName="rx" begin="0s" dur="6s" fill="freeze" from="205" to="117"/> </ellipse> <path fill="none" stroke="#fff" stroke-width="5"
    78. 78. Canvas <canvas></canvas> window.onload = function () { var elem = document.createElement("canvas"); elem.width = 500; elem.height = 500; document.body.appendChild( elem ); var context = elem.getContext("2d"); context.fillRect(0, 0, elem.width, elem.height); var pos = 0, dir = 1; setInterval(function () { context.rotate( 15 ); context.fillStyle = "rgba(0,0,0,0.05)"; context.fillRect(0, 0, elem.width, elem.height); context.fillStyle = "rgba(255, 0, 0, 1)"; context.fillRect(pos, pos, 20, 20); pos += dir; if ( pos > elem.width ) { dir = -1; } else if ( pos + 20 < 0 ) { dir = 1; } }, 10);
    79. 79. Canvas SVG http://www.slideshare.net/Dmitry.Baranovskiy/web-vector-graphics-presentation
    80. 80. Canvas SVG http://www.slideshare.net/Dmitry.Baranovskiy/web-vector-graphics-presentation
    81. 81. Canvas SVG http://www.slideshare.net/Dmitry.Baranovskiy/web-vector-graphics-presentation
    82. 82. Canvas
    83. 83. Canvas
    84. 84. Canvas HTML
    85. 85. Canvas JavaScript HTML
    86. 86. Canvas JavaScript HTML
    87. 87. SVG
    88. 88. SVG XML
    89. 89. SVG XML HTML
    90. 90. SVG XML HTML iphone to 40”
    91. 91. SVG XML HTML iphone to 40”
    92. 92. SVG XML HTML iphone to 40” SEO
    93. 93. SVG XML HTML iphone to 40” SEO DOM
    94. 94. Test
    95. 95. Canvas 788 http://philip.html5.org/tests/canvas/suite/tests/results.html 2 22
    96. 96. SVG 280 http://www.codedread.com/svg-support.php 5 6
    97. 97. Canvas + SVG 2
    98. 98. 77%
    99. 99. 81%
    100. 100. SVG
    101. 101. 31% SVG
    102. 102. 87%
    103. 103. 87% No.1
    104. 104. Canvas
    105. 105. BA Enter
    106. 106. Canvas Game
    107. 107. SVG
    108. 108. Video
    109. 109. SVG Map in the real world !!
    110. 110. Nissan
    111. 111. Raphael.js
    112. 112. Pie Chart
    113. 113. Work in Progress
    114. 114. Song http://svg-wow.org/
    115. 115. flickr & other resources http://www.flickr.com/photos/65819195@N00/4561033659/sizes/o/ http://www.slideshare.net/Dmitry.Baranovskiy/web-vector-graphics-presentation http://philip.html5.org/tests/canvas/suite/tests/results.html http://www.codedread.com/svg-support.php
    116. 116. Thank you !! mail mantangs@gmail.com twitter mantangs

    ×