Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

The State of Web Development

2,942 views

Published on

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

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

Published in: Technology
  • Be the first to comment

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

×