• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
I Can't Believe It's Not Flash
 

I Can't Believe It's Not Flash

on

  • 75,539 views

My talk at Webstock 2010 about up and coming open web technologies.

My talk at Webstock 2010 about up and coming open web technologies.

Statistics

Views

Total Views
75,539
Views on SlideShare
43,962
Embed Views
31,577

Actions

Likes
91
Downloads
677
Comments
18

107 Embeds 31,577

http://www.pjhome.net 17117
http://ajaxian.com 8255
http://mir.aculo.us 3598
http://www.shejidaren.com 655
http://www.jornaljava.com 519
http://pjhome.net 417
http://www.slideshare.net 334
http://www.extjs.com 85
http://localhost 61
http://feeds.feedburner.com 56
http://posterous.com 54
http://www.ditii.com 39
http://gerardo.posterous.com 32
http://learning101.posterous.com 30
http://fejlesztes.atti.la 24
http://xianguo.com 18
http://keif.posterous.com 15
http://www.hanrss.com 15
http://onwebdev.blogspot.com 14
http://static.slidesharecdn.com 14
http://linux-live-usb.org 12
http://staging5.inceptum.eu 10
http://www.zhuaxia.com 10
http://i.ecjtu.org.cn 10
http://ibrii.com 9
http://juhat.posterous.com 9
http://www.soup.io 8
http://translate.googleusercontent.com 8
http://reader.youdao.com 7
http://blog.jayfallon.net 7
http://www.mashme.tv 6
http://paper.li 6
http://swik.net 6
http://livecarnation.jp 5
resource://brief-content 5
http://webcache.googleusercontent.com 4
http://127.0.0.1:8795 4
http://xss.yandex.net 4
http://www.ca15.org 3
http://aajax.com 3
http://staging9.inceptum.eu 3
http://javascript.feederss.com 3
http://chinaone.blog.china.com 3
http://67.23.18.111 3
http://shahriarhaque.tumblr.com 3
http://www.brijj.com 3
http://blog.wcweb.info 2
http://twitter.com 2
http://literature.britishcouncil.org 2
https://twitter.com 2
More...

Accessibility

Upload Details

Uploaded via as Adobe PDF

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

110 of 18 previous next Post a comment

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • I love these slides! Did you know we’re running a competition on SlideShare to win a 3M PocketProjector MP180? To enter, simply tag your presentation with ‘3MInform’. Head over to our page for more details... and don’t forget to follow us to find out if you get shortlisted!
    Are you sure you want to
    Your message goes here
    Processing…
  • ●.·☀•჻¨●·.☀•჻¨●.·☀•჻¨●·.☀•჻¨●.·☀•჻¨●·.
    ONLY THREE DAYS TO VOTE IN THE CONTEST!.. VOTING ENDS NOV.29/10..
    ●.·☀•჻¨●·.☀•჻¨●.·☀•჻¨●·.☀•჻¨●.·☀•჻¨●·●.·☀•჻¨●·.☀•჻¨●.·☀•჻¨●·.☀•჻¨●.·☀•჻¨●·. .
    Hello My Friend ♥
    ☀ We would very much appreciate if you would kindly take the time to view & vote for Doina’s two shows http://www.slideshare.net/doina/end-of-life-presentation-horror-story-contest-slideshare-2010 http://www.slideshare.net/doina/andante-slideshare-2010
    The shows are now on videos so you don’t have to download .. Thank you very much and enjoy a wonderful day ..
    Spiderwebb99 on Slideshare .. Vanessa ♥
    ●.·☀•჻¨●·.☀•჻¨●.·☀•჻¨●·.☀•჻¨●.·☀•჻¨●·.
    Are you sure you want to
    Your message goes here
    Processing…

  • Are you sure you want to
    Your message goes here
    Processing…

  • Are you sure you want to
    Your message goes here
    Processing…
  • HTML5 vs Flash, it is really a funny war. From mashable votes, more people like HTML5 more than Flash. Flash is No.1 animation technology in the market for a long time. Now it is time to choose another big boss!
    G

    http://www.tophotdeal.com
    Are you sure you want to
    Your message goes here
    Processing…

110 of 18 previous next

Post Comment
Edit your comment

    I Can't Believe It's Not Flash I Can't Believe It's Not Flash Presentation Transcript

    • I Can’t Believe It’s Not Flash! @thomasfuchs
    • <omg  code="on  slides"/>
    • Animating CSS properties Timer JavaScript Reflow Rendering Paint sets CSS
    • Animating CSS properties Timer JavaScript Reflow Rendering Paint sets CSS
    • Performance hit
    • Performance hit JavaScript Reflow Rendering Paint
    • Performance hit JavaScript Reflow Rendering Paint
    • Performance hit JavaScript Reflow Rendering Paint
    • Performance hit JavaScript Reflow Rendering Paint
    • Performance hit JavaScript Reflow Rendering Paint
    • Browser CSS animation/ transitions Timer Browser Reflow Rendering Paint updates CSS
    • Timer JavaScript Reflow Rendering Paint sets CSS Timer Browser Reflow Rendering Paint updates CSS
    • Timer JavaScript Reflow Rendering Paint sets CSS Timer Browser Reflow Rendering Paint updates CSS
    • -webkit-transform Paint JavaScript or Browser sets CSS
    • <!DOCTYPE  html  PUBLIC  "-­‐//W3C//DTD  XHTML  1.0  Transitional//EN"    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-­‐transitional.dtd"> <html  xmlns="http://www.w3.org/1999/xhtml"  xml:lang="en"  lang="en"> <head>    <meta  http-­‐equiv="Content-­‐Type"  content="text/html;  charset=utf-­‐8"/>    <title>index</title>    <style  type="text/css"  media="screen">        div  {            position:  absolute;            border:  3px  solid  red;        }        #d1  {            left:  20px;  top:  20px;  width:  400px;  height:  400px;            -­‐webkit-­‐transform:translateZ(0px);        }        #d2  {            left:  100px;  top:  30px;  width:  150px;  height:  100px;            -­‐webkit-­‐transform:translateZ(-­‐100px);        }        #d3  {            left:  300px;  top:  40px;  width:  100px;  height:  50px;            -­‐webkit-­‐transform:translateZ(-­‐200px);        }        #d4  {            left:  320px;  top:  80px;  width:  90px;  height:  50px;            -­‐webkit-­‐transform:translateZ(-­‐300px);        }        #d5  {            left:  280px;  top:  90px;  width:  90px;  height:  50px;            -­‐webkit-­‐transform:translateZ(-­‐400px);        }        body  {            -­‐webkit-­‐transform-­‐style:  preserve-­‐3d;
    •        #d2  {            left:  100px;  top:  30px;  width:  150px;  height:  100px;            -­‐webkit-­‐transform:translateZ(-­‐100px);        }        #d3  {            left:  300px;  top:  40px;  width:  100px;  height:  50px;            -­‐webkit-­‐transform:translateZ(-­‐200px);        }        #d4  {            left:  320px;  top:  80px;  width:  90px;  height:  50px;            -­‐webkit-­‐transform:translateZ(-­‐300px);        }        #d5  {            left:  280px;  top:  90px;  width:  90px;  height:  50px;            -­‐webkit-­‐transform:translateZ(-­‐400px);        }        body  {            -­‐webkit-­‐transform-­‐style:  preserve-­‐3d;            -­‐webkit-­‐transform:rotateX(0deg)  rotateY(0deg)  rotateZ(0deg)  perspective(0);        }        body.stage2  {            -­‐webkit-­‐transition:  -­‐webkit-­‐transform  10s;            -­‐webkit-­‐transform:rotateX(30deg)  rotateY(-­‐50deg)  rotateZ(10deg)  perspective(0);        }    </style> </head> <body>    <div  id="d1"></div>    <div  id="d2"></div>    <div  id="d3"></div>    <div  id="d4"></div>    <div  id="d5"></div> </body> </html>
    • Safari on Snow Leopard, or on Windows: Nokia’s Starlight browser (alpha) http://www.starlight-webkit.org/
    • http://pepsicozeitgeist.com/
    • Fullscreen HD Video CPU% HTML5: 10% FLASH: 100+% (and dropped frames) http://jilion.com/sublime/video
    • Canvas Timer JavaScript Paint uses Canvas APIs
    • Physics engine with Canvas Timer 1) clear canvas Paint 2) physics iteration 3) draw shapes Box2D physics engine
    • function  createBall(world,  x,  y)  {    var  ballSd  =  new  b2CircleDef();    ballSd.density  =  0.3;    ballSd.radius  =  20+Math.random()*20;    ballSd.restitution  =  0.1;    ballSd.friction  =  0.2;    var  ballBd  =  new  b2BodyDef();    ballBd.rotation  =  0.3;    ballBd.AddShape(ballSd);    ballBd.position.Set(x,y);    return  world.CreateBody(ballBd); }
    •                    world.Step(ms,1);
    • 3) draw shapes box2d objects/ positions canvas
    • http://pepsicozeitgeist.com/
    • Vector graphics SVG + VML JavaScript Reflow Rendering Paint creates vector graphics nodes
    • http://raphaeljs.com/
    • <path  fill="none"  stroke="#5cbfff"   d="M52.2,40.5L47.23,55.5L38.53,70.5L33.88,85.5L36.63,100.5L50.1 ,115.5L70.7,130.5L97.85,145.5L123.65,160.5L139.3,175.5L126.2,19 0.5L132.95,205.5L157.58,220.5L143.85,235.5L155.25,250.5L151.43, 265.5L149.05,280.5L104.5,295.5L103.6,310.5L97.85,325.5L94.58,34 0.5L86.7,355.5L78.95,370.5L69.35,385.5M56.4,440.5L42.3,455.5L32 .93,470.5L26.38,485.5L28.23,500.5L28.95,515.5L40.45,530.5L57.55 ,545.5L80.18,560.5L123.55,575.5L144.95,590.5L137.33,605.5L134.9 8,620.5L149.7,635.5L162.73,650.5L142.83,665.5L164.2,680.5L106.2 5,695.5L97.28,710.5L88.75,725.5L90.83,740.5L87.15,755.5L85.15,7 70.5L62.55,785.5M52.78,840.5L41.5,855.5L33.1,870.5L22.38,885.5L 25.63,900.5L24.05,915.5L33.05,930.5L48.3,945.5L65.35,960.5L115. 2,975.5L137.7,990.5L136.43,1005.5L102.28,1020.5L132.28,1035.5L1 37.5,1050.5L132.05,1065.5L155.83,1080.5L107.3,1095.5L95.98,1110 .5L94.73,1125.5L94.65,1140.5L86.25,1155.5L83.4,1170.5L70.48,118 5.5M58.6,1240.5L43.38,1255.5L33.35,1270.5L28.43,1285.5L29.05,13 00.5L38.43,1315.5L51.35,1330.5L82.38,1345.5L105.73,1360.5L159.7 8,1375.5L176.05,1390.5L164.13,1405.5L139.48,1420.5L131.53,1435. 5L164.83,1450.5L161.15,1465.5L157.2,1480.5L112.68,1495.5L105.68 ,1510.5L103.83,1525.5L104.25,1540.5L92.5,1555.5L91.35,1570.5L70 .48,1585.5M54.05,1640.5L48.6,1655.5L35.02,1670.5L32.8,1685.5L36 .98,1700.5L41.75,1715.5L63.78,1730.5L90.6,1745.5L112.28,1760.5L 161.35,1775.5L171.2,1790.5L180.43,1805.5L171.88,1820.5L168.65,1 835.5L153.88,1850.5L148.35,1865.5L140.28,1880.5L110.2,1895.5L10 4.68,1910.5L101.2,1925.5L96.7,1940.5L96.5,1955.5L80.08,1970.5L6 8.4,1985.5M54.8,2040.5L41.23,2055.5L35.85,2070.5L30.15,2085.5L3
    • http://pepsicozeitgeist.com/
    • WebGL shaders Timer JavaScript Paint
    • WebGL <script  id="vshader"  type="x-­‐shader/x-­‐vertex">    uniform  mat4  u_modelViewMatrix;    uniform  mat4  u_modelViewProjMatrix;    uniform  mat4  u_normalMatrix;    uniform  vec3  lightDir;    attribute  vec3  vNormal;    attribute  vec4  vTexCoord;    attribute  vec4  vPosition;                    varying  float  v_Dot;    varying  vec2  v_texCoord;                    void  main()    {        gl_Position  =  u_modelViewProjMatrix  *  vPosition;        v_texCoord  =  vTexCoord.st;        vec4  transNormal  =  u_normalMatrix  *  vec4(vNormal,1);        v_Dot  =  max(dot(transNormal.xyz,  lightDir),  0.0);    } </script>
    •    var  exampleScene  =  scene(        {},        /*  A  renderer  node  binds  subnodes  to  a  WebGL  canvas  element              defined  in  the  HTML  tab  then  clears  the  depth  and  colour  buffers          */        renderer({                                canvasId:  'theCanvas',                                clear  :  {  depth  :  true,  color  :  true}                        },                /*  A  simple  phong  GLSL  shader  to  render  sub-­‐nodes,  with                      a  single  light  source.  This  shader  type  only  supports                      a  one  light  source.                  */                shader(                    {  type:  'simple-­‐shader'  },                    lights( scenejs.org                        {                            lights:  [                                {                                    pos:  {  x:  -­‐30.0,  y:  30.0,  z:  -­‐30.0  }                                }                            ]},                        /*  Perspective  transformation                          */
    • http://github.com/OneGeek/WebGLU
    • http://learningwebgl.com/
    • http://ftp.mozilla.org/pub/mozilla.org/ firefox/nightly/latest-trunk/
    • JavaScript & CSS CSS Transforms & Animations 2D bitmapped graphics Physics engines Vector graphics HTML5 video WebGL
    • THANKS! @thomasfuchs