The State of Web Development

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

2008 2010 2011 12 1 12

2008 2010 2011 12 1 12 13

6 1400

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

2008 →

2008 → Javascript

2008 → Javascript Web

Mac OS CSS3 Webkit Webfonts HTML5 jQuery

Mac OS

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

iPhone

iPhone CSS3 animation ?

Webkit

2008 25% Webkit

2008 2010 25% 47% Webkit

2010 Webkit

2010 x2 Webkit

1,Web 2, 3,

2008 1.3% HTML5 Doctype

2008 2010 1.3% 12.6% HTML5 Doctype

2010 HTML5 Doctype

2010 x10 HTML5 Doctype

2008 45% CSS3

2008 2010 45% 68% CSS3

2010 CSS3

2010 70% CSS3

Webfonts

2008 4% Webfont

2008 2010 4% 23% Webfont

2010 Webfont

2010 4 1 Webfont

Mac OS CSS3 Webkit jQuery Webfonts HTML5

2008 63% jQuery

2008 2010 63% 80% jQuery

2010 jQuery

2010 80% jQuery

2010 HTML5 & CSS3

2010 HTML5 & CSS3 Web

2010 HTML5 & CSS3 Web javascript

The State Of Web Development Tomorrow’s Web Today

Thanks Opera It`s Fridays

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

Canvas HTML

Canvas JavaScript HTML

SVG XML

SVG XML HTML

SVG XML HTML iphone to 40”

SVG XML HTML iphone to 40” SEO

SVG XML HTML iphone to 40” SEO DOM

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

31% SVG

87% No.1

Canvas

BA Enter

Canvas Game

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

The State of Web Development

by satoshi kikuchi on May 14, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

2 Embeds 23

Statistics

The State of Web Development — Presentation Transcript

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