The document summarizes the state of web development in 2010. It discusses the rise in usage of HTML5, CSS3, jQuery, Webkit, and other modern web technologies between 2008 and 2010. SVG and Canvas are also introduced as technologies for vector graphics on the web. Specific trends mentioned include large increases in usage of HTML5 doctypes, CSS3, Webkit, and webfonts during this period.

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

6. Web

7. Web

8. Web

12. 2008 2010 2011
12 1 12

13. 2008 2010 2011
12 1 12
13

15. 1400

17. 6
1400

19. slideshare “mantangs”
http://www.slideshare.net/mantangs/
state-of-web-development

20. 2008

21. 2008
→

22. 2008
→

23. 2008
→
Javascript

24. 2008
→
Javascript
Web

25. 2010

26. Mac OS CSS3
Webkit
Webfonts
HTML5
jQuery

27. Mac OS

28. Mac OS

29. OS
Mac OS X Windows
2008 46% 47%
Mac OS X Windows
2010 52% 41%
0 50 100

30. OS
Mac OS X Windows
2008 46% 47%
Mac OS X Windows
2010 52% 41%
0 50 100

32. iPhone

33. iPhone
CSS3 animation ?

34. Mac OS CSS3
Webkit
Webfonts
HTML5
jQuery

35. Webkit

36. Webkit

37. 2008
25%
Webkit

38. 2008
25%
Webkit

39. 2008 2010
25% 47%
Webkit

40. 2010
Webkit

41. 2010
x2
Webkit

44. 1,Web
2,
3,

45. Mac OS CSS3
Webkit
Webfonts
HTML5
jQuery

46. HTML5

47. HTML5

48. 2008
1.3%
HTML5 Doctype

49. 2008
1.3%
HTML5 Doctype

50. 2008 2010
1.3% 12.6%
HTML5 Doctype

51. 2010
HTML5 Doctype

52. 2010
x10
HTML5 Doctype

53. Mac OS CSS3
Webkit
Webfonts
HTML5
jQuery

54. CSS3

55. CSS3

56. 2008
45%
CSS3

57. 2008
45%
CSS3

58. 2008 2010
45% 68%
CSS3

59. 2010
CSS3

60. 2010
70%
CSS3

61. Mac OS CSS3
Webkit
Webfonts
HTML5
jQuery

62. Webfonts

63. Webfonts

64. 2008
4%
Webfont

65. 2008
4%
Webfont

66. 2008 2010
4% 23%
Webfont

67. 2010
Webfont

68. 2010
4 1
Webfont

69. Mac OS CSS3
Webkit
Webfonts
HTML5
jQuery

70. Mac OS CSS3
Webkit
Webfonts
HTML5
jQuery

71. Mac OS CSS3
Webkit
jQuery Webfonts
HTML5

72. 2008
63%
jQuery

73. 2008
63%
jQuery

74. 2008 2010
63% 80%
jQuery

75. 2010
jQuery

76. 2010
80%
jQuery

77. 2010

78. 2010
HTML5 & CSS3

79. 2010
HTML5 & CSS3
Web

80. 2010
HTML5 & CSS3
Web

81. 2010
HTML5 & CSS3
Web
javascript

82. The State Of
Web Development
Tomorrow’s Web Today

83. Thanks Opera It`s Fridays

84. Thanks Opera It`s Fridays

85. CANVAS & SVG

86. CANVAS & SVG

87. 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"

88. 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);

89. Canvas
SVG
http://www.slideshare.net/Dmitry.Baranovskiy/web-vector-graphics-presentation

90. Canvas
SVG
http://www.slideshare.net/Dmitry.Baranovskiy/web-vector-graphics-presentation

91. Canvas
SVG
http://www.slideshare.net/Dmitry.Baranovskiy/web-vector-graphics-presentation

92. Canvas

93. Canvas

94. Canvas
HTML

95. Canvas
JavaScript
HTML

96. Canvas
JavaScript
HTML

97. SVG

98. SVG
XML

99. SVG
XML
HTML

100. SVG
XML
HTML
iphone to 40”

101. SVG
XML
HTML
iphone to 40”

102. SVG
XML
HTML
iphone to 40”
SEO

103. SVG
XML
HTML
iphone to 40”
SEO
DOM

105. Test

106. Canvas
788
http://philip.html5.org/tests/canvas/suite/tests/results.html
2 22

107. SVG
280
http://www.codedread.com/svg-support.php
5 6

108. Canvas + SVG
2

109. 77%

110. 81%

111. SVG

112. 31%
SVG

114. 87%

115. 87%
No.1

116. Canvas

117. BA
Enter

118. Canvas Game

119. SVG

120. Video

121. SVG Map in the real world !!

122. Nissan

123. Raphael.js

125. Pie Chart

126. Work in Progress

127. Song
http://svg-wow.org/

129. 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

130. Thank you !!
mail
mantangs@gmail.com
twitter
mantangs