The State of Web Development
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

The State of Web Development

  • 3,392 views
Uploaded on

2010.05.14 Tomorrow`s web today のスライド...

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

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

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
3,392
On Slideshare
3,366
From Embeds
26
Number of Embeds
2

Actions

Shares
Downloads
19
Comments
0
Likes
3

Embeds 26

http://www.slideshare.net 15
http://blog.imagedrive.jp 11

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    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の話をおみせしたいと思います。







































Transcript

  • 1. The State of Web Development Tomorrow’s Web Today Takashi Kikuchi 2010.05.14 Roppongi hills Tomorrow’s Web Today
  • 2. The State Of Web Development Tomorrow’s Web Today
  • 3. The State Of Web Development Tomorrow’s Web Today
  • 4. MAMA http://dev.opera.com/articles/view/mama/ Tomorrow’s Web Today
  • 5. Web
  • 6. Web
  • 7. Web
  • 8. 2008 2010 2011 12 1 12
  • 9. 2008 2010 2011 12 1 12 13
  • 10. 1400
  • 11. 6 1400
  • 12. slideshare “mantangs” http://www.slideshare.net/mantangs/ state-of-web-development
  • 13. 2008
  • 14. 2008 →
  • 15. 2008 →
  • 16. 2008 → Javascript
  • 17. 2008 → Javascript Web
  • 18. 2010
  • 19. Mac OS CSS3 Webkit Webfonts HTML5 jQuery
  • 20. Mac OS
  • 21. Mac OS
  • 22. OS Mac OS X Windows 2008 46% 47% Mac OS X Windows 2010 52% 41% 0 50 100
  • 23. OS Mac OS X Windows 2008 46% 47% Mac OS X Windows 2010 52% 41% 0 50 100
  • 24. iPhone
  • 25. iPhone CSS3 animation ?
  • 26. Mac OS CSS3 Webkit Webfonts HTML5 jQuery
  • 27. Webkit
  • 28. Webkit
  • 29. 2008 25% Webkit
  • 30. 2008 25% Webkit
  • 31. 2008 2010 25% 47% Webkit
  • 32. 2010 Webkit
  • 33. 2010 x2 Webkit
  • 34. 1,Web 2, 3,
  • 35. Mac OS CSS3 Webkit Webfonts HTML5 jQuery
  • 36. HTML5
  • 37. HTML5
  • 38. 2008 1.3% HTML5 Doctype
  • 39. 2008 1.3% HTML5 Doctype
  • 40. 2008 2010 1.3% 12.6% HTML5 Doctype
  • 41. 2010 HTML5 Doctype
  • 42. 2010 x10 HTML5 Doctype
  • 43. Mac OS CSS3 Webkit Webfonts HTML5 jQuery
  • 44. CSS3
  • 45. CSS3
  • 46. 2008 45% CSS3
  • 47. 2008 45% CSS3
  • 48. 2008 2010 45% 68% CSS3
  • 49. 2010 CSS3
  • 50. 2010 70% CSS3
  • 51. Mac OS CSS3 Webkit Webfonts HTML5 jQuery
  • 52. Webfonts
  • 53. Webfonts
  • 54. 2008 4% Webfont
  • 55. 2008 4% Webfont
  • 56. 2008 2010 4% 23% Webfont
  • 57. 2010 Webfont
  • 58. 2010 4 1 Webfont
  • 59. Mac OS CSS3 Webkit Webfonts HTML5 jQuery
  • 60. Mac OS CSS3 Webkit Webfonts HTML5 jQuery
  • 61. Mac OS CSS3 Webkit jQuery Webfonts HTML5
  • 62. 2008 63% jQuery
  • 63. 2008 63% jQuery
  • 64. 2008 2010 63% 80% jQuery
  • 65. 2010 jQuery
  • 66. 2010 80% jQuery
  • 67. 2010
  • 68. 2010 HTML5 & CSS3
  • 69. 2010 HTML5 & CSS3 Web
  • 70. 2010 HTML5 & CSS3 Web
  • 71. 2010 HTML5 & CSS3 Web javascript
  • 72. The State Of Web Development Tomorrow’s Web Today
  • 73. Thanks Opera It`s Fridays
  • 74. Thanks Opera It`s Fridays
  • 75. CANVAS & SVG
  • 76. CANVAS & SVG
  • 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. 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. Canvas SVG http://www.slideshare.net/Dmitry.Baranovskiy/web-vector-graphics-presentation
  • 80. Canvas SVG http://www.slideshare.net/Dmitry.Baranovskiy/web-vector-graphics-presentation
  • 81. Canvas SVG http://www.slideshare.net/Dmitry.Baranovskiy/web-vector-graphics-presentation
  • 82. Canvas
  • 83. Canvas
  • 84. Canvas HTML
  • 85. Canvas JavaScript HTML
  • 86. Canvas JavaScript HTML
  • 87. SVG
  • 88. SVG XML
  • 89. SVG XML HTML
  • 90. SVG XML HTML iphone to 40”
  • 91. SVG XML HTML iphone to 40”
  • 92. SVG XML HTML iphone to 40” SEO
  • 93. SVG XML HTML iphone to 40” SEO DOM
  • 94. Test
  • 95. Canvas 788 http://philip.html5.org/tests/canvas/suite/tests/results.html 2 22
  • 96. SVG 280 http://www.codedread.com/svg-support.php 5 6
  • 97. Canvas + SVG 2
  • 98. 77%
  • 99. 81%
  • 100. SVG
  • 101. 31% SVG
  • 102. 87%
  • 103. 87% No.1
  • 104. Canvas
  • 105. BA Enter
  • 106. Canvas Game
  • 107. SVG
  • 108. Video
  • 109. SVG Map in the real world !!
  • 110. Nissan
  • 111. Raphael.js
  • 112. Pie Chart
  • 113. Work in Progress
  • 114. Song http://svg-wow.org/
  • 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. Thank you !! mail mantangs@gmail.com twitter mantangs