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

The State of Web Development

on

  • 3,207 views

2010.05.14 Tomorrow`s web today のスライド

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

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

Statistics

Views

Total Views
3,207
Views on SlideShare
3,181
Embed Views
26

Actions

Likes
3
Downloads
19
Comments
0

2 Embeds 26

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

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • <br />
  • <br />
  • <br />
  • <br />
  • 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; <br />
  • 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; <br />
  • 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; <br />
  • &#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; <br />
  • &#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; <br />
  • &#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; <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • &#x3044;&#x304F;&#x3064;&#x304B;&#x306E;&#x30AD;&#x30FC;&#x30EF;&#x30FC;&#x30C9;&#x3092;&#x629C;&#x304D;&#x51FA;&#x3057;&#x307E;&#x3057;&#x305F;&#x3002; <br />
  • &#x3044;&#x304F;&#x3064;&#x304B;&#x306E;&#x30AD;&#x30FC;&#x30EF;&#x30FC;&#x30C9;&#x3092;&#x629C;&#x304D;&#x51FA;&#x3057;&#x307E;&#x3057;&#x305F;&#x3002; <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • &#x3044;&#x304F;&#x3064;&#x304B;&#x306E;&#x30AD;&#x30FC;&#x30EF;&#x30FC;&#x30C9;&#x3092;&#x629C;&#x304D;&#x51FA;&#x3057;&#x307E;&#x3057;&#x305F;&#x3002; <br />
  • &#x3044;&#x304F;&#x3064;&#x304B;&#x306E;&#x30AD;&#x30FC;&#x30EF;&#x30FC;&#x30C9;&#x3092;&#x629C;&#x304D;&#x51FA;&#x3057;&#x307E;&#x3057;&#x305F;&#x3002; <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • &#x3044;&#x304F;&#x3064;&#x304B;&#x306E;&#x30AD;&#x30FC;&#x30EF;&#x30FC;&#x30C9;&#x3092;&#x629C;&#x304D;&#x51FA;&#x3057;&#x307E;&#x3057;&#x305F;&#x3002; <br />
  • &#x3044;&#x304F;&#x3064;&#x304B;&#x306E;&#x30AD;&#x30FC;&#x30EF;&#x30FC;&#x30C9;&#x3092;&#x629C;&#x304D;&#x51FA;&#x3057;&#x307E;&#x3057;&#x305F;&#x3002; <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • &#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; <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />

The State of Web Development The State of Web Development Presentation Transcript

  • 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
  • The State Of Web Development Tomorrow’s Web Today
  • MAMA http://dev.opera.com/articles/view/mama/ Tomorrow’s Web Today
  • Web
  • Web
  • Web
  • 2008 2010 2011 12 1 12
  • 2008 2010 2011 12 1 12 13
  • 1400
  • 6 1400
  • slideshare “mantangs” http://www.slideshare.net/mantangs/ state-of-web-development
  • 2008
  • 2008 →
  • 2008 →
  • 2008 → Javascript
  • 2008 → Javascript Web
  • 2010
  • Mac OS CSS3 Webkit Webfonts HTML5 jQuery
  • Mac OS
  • Mac OS
  • OS Mac OS X Windows 2008 46% 47% Mac OS X Windows 2010 52% 41% 0 50 100
  • OS Mac OS X Windows 2008 46% 47% Mac OS X Windows 2010 52% 41% 0 50 100
  • iPhone
  • iPhone CSS3 animation ?
  • Mac OS CSS3 Webkit Webfonts HTML5 jQuery
  • Webkit
  • Webkit
  • 2008 25% Webkit
  • 2008 25% Webkit
  • 2008 2010 25% 47% Webkit
  • 2010 Webkit
  • 2010 x2 Webkit
  • 1,Web 2, 3,
  • Mac OS CSS3 Webkit Webfonts HTML5 jQuery
  • HTML5
  • HTML5
  • 2008 1.3% HTML5 Doctype
  • 2008 1.3% HTML5 Doctype
  • 2008 2010 1.3% 12.6% HTML5 Doctype
  • 2010 HTML5 Doctype
  • 2010 x10 HTML5 Doctype
  • Mac OS CSS3 Webkit Webfonts HTML5 jQuery
  • CSS3
  • CSS3
  • 2008 45% CSS3
  • 2008 45% CSS3
  • 2008 2010 45% 68% CSS3
  • 2010 CSS3
  • 2010 70% CSS3
  • Mac OS CSS3 Webkit Webfonts HTML5 jQuery
  • Webfonts
  • Webfonts
  • 2008 4% Webfont
  • 2008 4% Webfont
  • 2008 2010 4% 23% Webfont
  • 2010 Webfont
  • 2010 4 1 Webfont
  • Mac OS CSS3 Webkit Webfonts HTML5 jQuery
  • Mac OS CSS3 Webkit Webfonts HTML5 jQuery
  • Mac OS CSS3 Webkit jQuery Webfonts HTML5
  • 2008 63% jQuery
  • 2008 63% jQuery
  • 2008 2010 63% 80% jQuery
  • 2010 jQuery
  • 2010 80% jQuery
  • 2010
  • 2010 HTML5 & CSS3
  • 2010 HTML5 & CSS3 Web
  • 2010 HTML5 & CSS3 Web
  • 2010 HTML5 & CSS3 Web javascript
  • The State Of Web Development Tomorrow’s Web Today
  • Thanks Opera It`s Fridays
  • Thanks Opera It`s Fridays
  • CANVAS & SVG
  • CANVAS & SVG
  • 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 SVG http://www.slideshare.net/Dmitry.Baranovskiy/web-vector-graphics-presentation
  • Canvas SVG http://www.slideshare.net/Dmitry.Baranovskiy/web-vector-graphics-presentation
  • Canvas
  • Canvas
  • Canvas HTML
  • Canvas JavaScript HTML
  • Canvas JavaScript HTML
  • SVG
  • SVG XML
  • SVG XML HTML
  • SVG XML HTML iphone to 40”
  • SVG XML HTML iphone to 40”
  • SVG XML HTML iphone to 40” SEO
  • SVG XML HTML iphone to 40” SEO DOM
  • Test
  • 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
  • Canvas + SVG 2
  • 77%
  • 81%
  • SVG
  • 31% SVG
  • 87%
  • 87% No.1
  • Canvas
  • BA Enter
  • Canvas Game
  • SVG
  • Video
  • SVG Map in the real world !!
  • Nissan
  • Raphael.js
  • Pie Chart
  • Work in Progress
  • Song http://svg-wow.org/
  • 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