The State of Web Development

  • 2,491 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
2,491
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
19
Comments
0
Likes
3

Embeds 0

No embeds

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