The State of Web Development

•Transferir como KEY, PDF•

3 gostaram•1,280 visualizações

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.

Tecnologia

The State of Web Development
Tomorrow’s Web Today
Takashi Kikuchi
2010.05.14
Roppongi hills

Tomorrow’s Web Today

The State Of
Web Development

Tomorrow’s Web Today

MAMA
http://dev.opera.com/articles/view/mama/

Tomorrow’s Web Today

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

Mac OS CSS3

Webkit
Webfonts

HTML5
jQuery

OS
Mac OS X Windows
2008 46% 47%

Mac OS X Windows
2010 52% 41%
0 50 100

Mac OS CSS3

Webkit
jQuery Webfonts

HTML5

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"

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

Canvas

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

Canvas

788
http://philip.html5.org/tests/canvas/suite/tests/results.html

2 22

SVG

280
http://www.codedread.com/svg-support.php

5 6

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

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

Mais conteúdo relacionado

Semelhante a The State of Web Development

HTML5 IntroPavingWays Ltd.

WHAT IS HTML5? (at CSS Nite Osaka)Shumpei Shiraishi

Change by HTML5dynamis

Familiar HTML5 - 事例とサンプルコードから学ぶ身近で普通に使わているHTML5Sadaaki HIRAI

Html5 OverviewDaniel Arndt Alves

HTML5 어디까지 왔나?정현 황

about HTML5Masato KONDO

What is HTML5Kyohei Morimoto

HTML5 Bootcamp: Essential HTML, CSS, & JavaScriptTodd Anglin

Mobile Java with GWT: Still "Write Once, Run Everywhere"Alex Theedom

2012 - HTML5, CSS3 and jQuery with SharePoint 2010Chris O'Connor

Keypoints html5dynamis

Designing for The Modern WebSara Cannon

Stefan Judis "Did we(b development) lose the right direction?"Fwdays

Echo HTML5Nathan Smith

Html5 on Mobile(For Developer)Adam Lu

About Best friends - HTML, CSS and JSNaga Harish M

HTML5 and Beyonddynamis

Web Anywhere: Mobile Optimisation With HTML5, CSS3, JavaScriptbrucelawson

Vaadin & Web ComponentsJoonas Lehtinen

Semelhante a The State of Web Development (20)

HTML5 Intro

WHAT IS HTML5? (at CSS Nite Osaka)

Change by HTML5

Familiar HTML5 - 事例とサンプルコードから学ぶ身近で普通に使わているHTML5

Html5 Overview

HTML5 어디까지 왔나?

about HTML5

What is HTML5

HTML5 Bootcamp: Essential HTML, CSS, & JavaScript

Mobile Java with GWT: Still "Write Once, Run Everywhere"

2012 - HTML5, CSS3 and jQuery with SharePoint 2010

Keypoints html5

Designing for The Modern Web

Stefan Judis "Did we(b development) lose the right direction?"

Echo HTML5

Html5 on Mobile(For Developer)

About Best friends - HTML, CSS and JS

HTML5 and Beyond

Web Anywhere: Mobile Optimisation With HTML5, CSS3, JavaScript

Vaadin & Web Components

Mais de Satoshi Kikuchi

Foresee　見極めることSatoshi Kikuchi

Responsive Web Design　HTML5勉強会Satoshi Kikuchi

The State Of Web Development (data only)Satoshi Kikuchi

Html5 whSatoshi Kikuchi

サルでもできるWebデザイン：SwapSkillsSatoshi Kikuchi

サルでもできるウェブデザイン : SwapSkills 2010 Vol01Satoshi Kikuchi

Html5 LoadingSatoshi Kikuchi

Html5Satoshi Kikuchi

Make your website 2 times fasterSatoshi Kikuchi

WDE08 State of the webSatoshi Kikuchi

WDE08 BULLETPROOF A to ZSatoshi Kikuchi

WDE08 Designing for interaction with AjaxSatoshi Kikuchi

WDE08 Visualizing Web of DataSatoshi Kikuchi

WDE09 State of The Web Japanese versionSatoshi Kikuchi

WDE09 state of the web panel discussionSatoshi Kikuchi

SwapSkills css3Satoshi Kikuchi

WDE09 The usability for Japan and overseasSatoshi Kikuchi

WDE08 CSS Reloaded JaSatoshi Kikuchi

Mais de Satoshi Kikuchi (18)

Foresee　見極めること

Responsive Web Design　HTML5勉強会

The State Of Web Development (data only)

Html5 wh

サルでもできるWebデザイン：SwapSkills

サルでもできるウェブデザイン : SwapSkills 2010 Vol01

Html5 Loading

Html5

Make your website 2 times faster

WDE08 State of the web

WDE08 BULLETPROOF A to Z

WDE08 Designing for interaction with Ajax

WDE08 Visualizing Web of Data

WDE09 State of The Web Japanese version

WDE09 state of the web panel discussion

SwapSkills css3

WDE09 The usability for Japan and overseas

WDE08 CSS Reloaded Ja

Último

From Family Reminiscence to Scholarly Archive .Alan Dix

A Framework for Development in the AI AgeCprime

New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024BookNet Canada

Moving Beyond Passwords: FIDO Paris Seminar.pdfLoriGlavin3

Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptxLoriGlavin3

UiPath Community: Communication Mining from Zero to HeroUiPathCommunity

A Deep Dive on Passkeys: FIDO Paris Seminar.pptxLoriGlavin3

What is DBT - The Ultimate Data Build Tool.pdfMounikaPolabathina

Digital Identity is Under Attack: FIDO Paris Seminar.pptxLoriGlavin3

Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxLoriGlavin3

Data governance with Unity Catalog PresentationKnoldus Inc.

Time Series Foundation Models - current state and future directionsNathaniel Shimoni

TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc

(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...AliaaTarek5

Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptxLoriGlavin3

Take control of your SAP testing with UiPath Test SuiteDianaGray10

How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesThousandEyes

Generative AI for Technical Writer or Information DevelopersRaghuram Pandurangan

The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptxLoriGlavin3

So einfach geht modernes Roaming fuer Notes und Nomad.pdfpanagenda

The State of Web Development

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

10.

11.

12. 2008 2010 2011 12 1 12

13. 2008 2010 2011 12 1 12 13

14.

15. 1400

16.

17. 6 1400

18.

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

31.

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

42.

43.

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

104.

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

113.

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

124.

125. Pie Chart

126. Work in Progress

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

128.

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

Notas do Editor

State of Web Development &#x306F; Opera mama &#x306E;&#x3088;&#x3046;&#x306B;&#x3001;Web&#x696D;&#x754C;&#x3067;&#x306A;&#x306B;&#x304C;&#x304A;&#x3053;&#x3063;&#x3066;&#x3044;&#x308B;&#x306E;&#x304B;&#x306E;&#x5168;&#x4F53;&#x50CF;&#x3092;&#x3064;&#x304B;&#x307F;&#x3001;&#x305D;&#x306E;&#x4F7F;&#x308F;&#x308C;&#x3066;&#x3044;&#x308B;&#x30C6;&#x30AF;&#x30CE;&#x30ED;&#x30B8;&#x30FC;&#x3001;&#x6280;&#x8853;&#x3001;&#x305D;&#x3057;&#x3066;&#x4F7F;&#x3063;&#x3066;&#x3044;&#x308B;&#x30C4;&#x30FC;&#x30EB;&#x306A;&#x3069;&#x3092;&#x8ABF;&#x3079;&#x308B;&#x305F;&#x3081;&#x306B; Web Directions &#x306E;&#x304A;&#x3053;&#x306A;&#x3063;&#x3066;&#x3044;&#x307E;&#x3059;&#x3002;
State of Web Development &#x306F; Opera mama &#x306E;&#x3088;&#x3046;&#x306B;&#x3001;Web&#x696D;&#x754C;&#x3067;&#x306A;&#x306B;&#x304C;&#x304A;&#x3053;&#x3063;&#x3066;&#x3044;&#x308B;&#x306E;&#x304B;&#x306E;&#x5168;&#x4F53;&#x50CF;&#x3092;&#x3064;&#x304B;&#x307F;&#x3001;&#x305D;&#x306E;&#x4F7F;&#x308F;&#x308C;&#x3066;&#x3044;&#x308B;&#x30C6;&#x30AF;&#x30CE;&#x30ED;&#x30B8;&#x30FC;&#x3001;&#x6280;&#x8853;&#x3001;&#x305D;&#x3057;&#x3066;&#x4F7F;&#x3063;&#x3066;&#x3044;&#x308B;&#x30C4;&#x30FC;&#x30EB;&#x306A;&#x3069;&#x3092;&#x8ABF;&#x3079;&#x308B;&#x305F;&#x3081;&#x306B; Web Directions &#x306E;&#x304A;&#x3053;&#x306A;&#x3063;&#x3066;&#x3044;&#x307E;&#x3059;&#x3002;
State of Web Development &#x306F; Opera mama &#x306E;&#x3088;&#x3046;&#x306B;&#x3001;Web&#x696D;&#x754C;&#x3067;&#x306A;&#x306B;&#x304C;&#x304A;&#x3053;&#x3063;&#x3066;&#x3044;&#x308B;&#x306E;&#x304B;&#x306E;&#x5168;&#x4F53;&#x50CF;&#x3092;&#x3064;&#x304B;&#x307F;&#x3001;&#x305D;&#x306E;&#x4F7F;&#x308F;&#x308C;&#x3066;&#x3044;&#x308B;&#x30C6;&#x30AF;&#x30CE;&#x30ED;&#x30B8;&#x30FC;&#x3001;&#x6280;&#x8853;&#x3001;&#x305D;&#x3057;&#x3066;&#x4F7F;&#x3063;&#x3066;&#x3044;&#x308B;&#x30C4;&#x30FC;&#x30EB;&#x306A;&#x3069;&#x3092;&#x8ABF;&#x3079;&#x308B;&#x305F;&#x3081;&#x306B; Web Directions &#x306E;&#x304A;&#x3053;&#x306A;&#x3063;&#x3066;&#x3044;&#x307E;&#x3059;&#x3002;
&#x5BFE;&#x8C61;&#x3078;&#x306E;&#x30A2;&#x30D7;&#x30ED;&#x30FC;&#x30C1;&#x306F;&#x3001;&#x904E;&#x53BB;&#x306B;Web Directions &#x306E;&#x30AB;&#x30F3;&#x30D5;&#x30A1;&#x30EC;&#x30F3;&#x30B9;&#x306B;&#x53C2;&#x52A0;&#x3055;&#x308C;&#x305F;&#x4EBA;&#x3078;&#x30E1;&#x30FC;&#x30EB;&#x914D;&#x4FE1;&#x3084;&#x3001;&#x958B;&#x767A;&#x8005;&#x306E;&#x30D6;&#x30ED;&#x30B0;&#x3084;&#x30A6;&#x30A7;&#x30D6;&#x30B5;&#x30A4;&#x30C8;&#x3078;&#x30EA;&#x30F3;&#x30AF;&#x3092;&#x8CBC;&#x308B;&#x306A;&#x3069;&#x3057;&#x3066;&#x3001;&#x8ABF;&#x67FB;&#x306B;&#x53C2;&#x52A0;&#x3057;&#x3066;&#x3082;&#x3089;&#x3044;&#x307E;&#x3057;&#x305F;&#x3002;
&#x5BFE;&#x8C61;&#x3078;&#x306E;&#x30A2;&#x30D7;&#x30ED;&#x30FC;&#x30C1;&#x306F;&#x3001;&#x904E;&#x53BB;&#x306B;Web Directions &#x306E;&#x30AB;&#x30F3;&#x30D5;&#x30A1;&#x30EC;&#x30F3;&#x30B9;&#x306B;&#x53C2;&#x52A0;&#x3055;&#x308C;&#x305F;&#x4EBA;&#x3078;&#x30E1;&#x30FC;&#x30EB;&#x914D;&#x4FE1;&#x3084;&#x3001;&#x958B;&#x767A;&#x8005;&#x306E;&#x30D6;&#x30ED;&#x30B0;&#x3084;&#x30A6;&#x30A7;&#x30D6;&#x30B5;&#x30A4;&#x30C8;&#x3078;&#x30EA;&#x30F3;&#x30AF;&#x3092;&#x8CBC;&#x308B;&#x306A;&#x3069;&#x3057;&#x3066;&#x3001;&#x8ABF;&#x67FB;&#x306B;&#x53C2;&#x52A0;&#x3057;&#x3066;&#x3082;&#x3089;&#x3044;&#x307E;&#x3057;&#x305F;&#x3002;
&#x3053;&#x306E;&#x8ABF;&#x67FB;&#x306F;&#x4ECA;&#x307E;&#x3067;&#x306B;2&#x56DE;&#x304A;&#x3053;&#x306A;&#x308F;&#x308C;&#x3066;&#x3001;1&#x56DE;&#x76EE;&#x306F;2008&#x5E74;&#x306F;12&#x6708;&#x306B;&#x304A;&#x3053;&#x306A;&#x3044;&#x3001;2&#x56DE;&#x76EE;&#x306F;&#x305D;&#x308C;&#x304B;&#x3089;13&#x30F6;&#x6708;&#x305F;&#x3063;&#x305F;2010&#x5E74;1&#x6708;&#x306B;&#x304A;&#x3053;&#x306A;&#x3044;&#x307E;&#x3057;&#x305F;&#x3002;
&#x3044;&#x304F;&#x3064;&#x304B;&#x306E;&#x30AD;&#x30FC;&#x30EF;&#x30FC;&#x30C9;&#x3092;&#x629C;&#x304D;&#x51FA;&#x3057;&#x307E;&#x3057;&#x305F;&#x3002;
&#x3044;&#x304F;&#x3064;&#x304B;&#x306E;&#x30AD;&#x30FC;&#x30EF;&#x30FC;&#x30C9;&#x3092;&#x629C;&#x304D;&#x51FA;&#x3057;&#x307E;&#x3057;&#x305F;&#x3002;
&#x3044;&#x304F;&#x3064;&#x304B;&#x306E;&#x30AD;&#x30FC;&#x30EF;&#x30FC;&#x30C9;&#x3092;&#x629C;&#x304D;&#x51FA;&#x3057;&#x307E;&#x3057;&#x305F;&#x3002;
&#x3044;&#x304F;&#x3064;&#x304B;&#x306E;&#x30AD;&#x30FC;&#x30EF;&#x30FC;&#x30C9;&#x3092;&#x629C;&#x304D;&#x51FA;&#x3057;&#x307E;&#x3057;&#x305F;&#x3002;
&#x3044;&#x304F;&#x3064;&#x304B;&#x306E;&#x30AD;&#x30FC;&#x30EF;&#x30FC;&#x30C9;&#x3092;&#x629C;&#x304D;&#x51FA;&#x3057;&#x307E;&#x3057;&#x305F;&#x3002;
&#x3044;&#x304F;&#x3064;&#x304B;&#x306E;&#x30AD;&#x30FC;&#x30EF;&#x30FC;&#x30C9;&#x3092;&#x629C;&#x304D;&#x51FA;&#x3057;&#x307E;&#x3057;&#x305F;&#x3002;
&#x6700;&#x5F8C;&#x306B;Flash &#x306E;&#x8A71;&#x984C;&#x304C;&#x3067;&#x307E;&#x3057;&#x305F;&#x306E;&#x3067;&#x3001;CANVAS &#x3068; SVG&#x306E;&#x8A71;&#x3092;&#x304A;&#x307F;&#x305B;&#x3057;&#x305F;&#x3044;&#x3068;&#x601D;&#x3044;&#x307E;&#x3059;&#x3002;

The State of Web Development

Recomendados

Recomendados

Mais conteúdo relacionado

Semelhante a The State of Web Development

Semelhante a The State of Web Development (20)

Mais de Satoshi Kikuchi

Mais de Satoshi Kikuchi (18)

Último

Último (20)

The State of Web Development

Notas do Editor