SlideShare uma empresa Scribd logo
1 de 48
Baixar para ler offline
I Can’t
Believe It’s
Not Flash!


@thomasfuchs
<omg  code="on  slides"/>
I Can't Believe It's Not Flash
Animating CSS properties
    Timer




JavaScript   Reflow   Rendering   Paint
 sets CSS
I Can't Believe It's Not Flash
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
I Can't Believe It's Not Flash
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
I Can't Believe It's Not Flash
I Can't Believe It's Not Flash
I Can't Believe It's Not Flash
<!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/
I Can't Believe It's Not Flash
Fullscreen HD Video CPU%

         HTML5: 10%

        FLASH: 100+%
         (and dropped frames)



http://jilion.com/sublime/video
I Can't Believe It's Not Flash
Canvas
    Timer




JavaScript            Paint
   uses
 Canvas
   APIs
I Can't Believe It's Not Flash
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/
I Can't Believe It's Not Flash
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/
I Can't Believe It's Not Flash
JavaScript & CSS
CSS Transforms & Animations
   2D bitmapped graphics
      Physics engines
      Vector graphics
        HTML5 video
           WebGL
THANKS!



@thomasfuchs

Mais conteúdo relacionado

Mais procurados

How to build a html5 websites.v1
How to build a html5 websites.v1How to build a html5 websites.v1
How to build a html5 websites.v1Bitla Software
 
Mastering CSS Animations
Mastering CSS AnimationsMastering CSS Animations
Mastering CSS AnimationsGoodbytes
 
JavaOne 2009 - 2d Vector Graphics in the browser with Canvas and SVG
JavaOne 2009 -  2d Vector Graphics in the browser with Canvas and SVGJavaOne 2009 -  2d Vector Graphics in the browser with Canvas and SVG
JavaOne 2009 - 2d Vector Graphics in the browser with Canvas and SVGPatrick Chanezon
 
CSS3 : Animation ,Transitions, Gradients
CSS3 : Animation ,Transitions, GradientsCSS3 : Animation ,Transitions, Gradients
CSS3 : Animation ,Transitions, GradientsJatin_23
 
CSS3 Transforms Transitions and Animations
CSS3 Transforms Transitions and AnimationsCSS3 Transforms Transitions and Animations
CSS3 Transforms Transitions and AnimationsInayaili León
 
Joan Leon | Houdini, programando en CSS | Codemotion Madrid 2018
Joan Leon | Houdini, programando en CSS | Codemotion Madrid 2018Joan Leon | Houdini, programando en CSS | Codemotion Madrid 2018
Joan Leon | Houdini, programando en CSS | Codemotion Madrid 2018Codemotion
 
Yearning jQuery
Yearning jQueryYearning jQuery
Yearning jQueryRemy Sharp
 
Processing and Processing.js
Processing and Processing.jsProcessing and Processing.js
Processing and Processing.jsjeresig
 
Dynamic CSS: Transforms, Transitions, and Animation Basics
Dynamic CSS: Transforms, Transitions, and Animation BasicsDynamic CSS: Transforms, Transitions, and Animation Basics
Dynamic CSS: Transforms, Transitions, and Animation BasicsBeth Soderberg
 
Shibuya.js Lightning Talks
Shibuya.js Lightning TalksShibuya.js Lightning Talks
Shibuya.js Lightning Talksjeresig
 
CSS3 2D/3D transform
CSS3 2D/3D transformCSS3 2D/3D transform
CSS3 2D/3D transformKenny Lee
 
JavaScript 1.5 to 2.0 (TomTom)
JavaScript 1.5 to 2.0 (TomTom)JavaScript 1.5 to 2.0 (TomTom)
JavaScript 1.5 to 2.0 (TomTom)jeresig
 
Randomising css animations
Randomising css animationsRandomising css animations
Randomising css animationsasjb
 
Only JavaScript, only Meteor.js
Only JavaScript, only Meteor.jsOnly JavaScript, only Meteor.js
Only JavaScript, only Meteor.jsTomáš Hromník
 
Vue.js + Django - configuración para desarrollo con webpack y HMR
Vue.js + Django - configuración para desarrollo con webpack y HMRVue.js + Django - configuración para desarrollo con webpack y HMR
Vue.js + Django - configuración para desarrollo con webpack y HMRJavier Abadía
 
Canvas
CanvasCanvas
CanvasRajon
 
HTML5: friend or foe (to Flash)?
HTML5: friend or foe (to Flash)?HTML5: friend or foe (to Flash)?
HTML5: friend or foe (to Flash)?Remy Sharp
 
Server-Side Push: Comet, Web Sockets come of age (OSCON 2013)
Server-Side Push: Comet, Web Sockets come of age (OSCON 2013)Server-Side Push: Comet, Web Sockets come of age (OSCON 2013)
Server-Side Push: Comet, Web Sockets come of age (OSCON 2013)Brian Sam-Bodden
 

Mais procurados (20)

How to build a html5 websites.v1
How to build a html5 websites.v1How to build a html5 websites.v1
How to build a html5 websites.v1
 
Mastering CSS Animations
Mastering CSS AnimationsMastering CSS Animations
Mastering CSS Animations
 
JavaOne 2009 - 2d Vector Graphics in the browser with Canvas and SVG
JavaOne 2009 -  2d Vector Graphics in the browser with Canvas and SVGJavaOne 2009 -  2d Vector Graphics in the browser with Canvas and SVG
JavaOne 2009 - 2d Vector Graphics in the browser with Canvas and SVG
 
CSS3 : Animation ,Transitions, Gradients
CSS3 : Animation ,Transitions, GradientsCSS3 : Animation ,Transitions, Gradients
CSS3 : Animation ,Transitions, Gradients
 
CSS3 Transforms Transitions and Animations
CSS3 Transforms Transitions and AnimationsCSS3 Transforms Transitions and Animations
CSS3 Transforms Transitions and Animations
 
Joan Leon | Houdini, programando en CSS | Codemotion Madrid 2018
Joan Leon | Houdini, programando en CSS | Codemotion Madrid 2018Joan Leon | Houdini, programando en CSS | Codemotion Madrid 2018
Joan Leon | Houdini, programando en CSS | Codemotion Madrid 2018
 
Yearning jQuery
Yearning jQueryYearning jQuery
Yearning jQuery
 
Processing and Processing.js
Processing and Processing.jsProcessing and Processing.js
Processing and Processing.js
 
Dynamic CSS: Transforms, Transitions, and Animation Basics
Dynamic CSS: Transforms, Transitions, and Animation BasicsDynamic CSS: Transforms, Transitions, and Animation Basics
Dynamic CSS: Transforms, Transitions, and Animation Basics
 
Shibuya.js Lightning Talks
Shibuya.js Lightning TalksShibuya.js Lightning Talks
Shibuya.js Lightning Talks
 
CSS3 2D/3D transform
CSS3 2D/3D transformCSS3 2D/3D transform
CSS3 2D/3D transform
 
JavaScript 1.5 to 2.0 (TomTom)
JavaScript 1.5 to 2.0 (TomTom)JavaScript 1.5 to 2.0 (TomTom)
JavaScript 1.5 to 2.0 (TomTom)
 
Randomising css animations
Randomising css animationsRandomising css animations
Randomising css animations
 
Only JavaScript, only Meteor.js
Only JavaScript, only Meteor.jsOnly JavaScript, only Meteor.js
Only JavaScript, only Meteor.js
 
Progressive What Apps?
Progressive What Apps?Progressive What Apps?
Progressive What Apps?
 
Vue.js + Django - configuración para desarrollo con webpack y HMR
Vue.js + Django - configuración para desarrollo con webpack y HMRVue.js + Django - configuración para desarrollo con webpack y HMR
Vue.js + Django - configuración para desarrollo con webpack y HMR
 
CSS Grid Layout
CSS Grid LayoutCSS Grid Layout
CSS Grid Layout
 
Canvas
CanvasCanvas
Canvas
 
HTML5: friend or foe (to Flash)?
HTML5: friend or foe (to Flash)?HTML5: friend or foe (to Flash)?
HTML5: friend or foe (to Flash)?
 
Server-Side Push: Comet, Web Sockets come of age (OSCON 2013)
Server-Side Push: Comet, Web Sockets come of age (OSCON 2013)Server-Side Push: Comet, Web Sockets come of age (OSCON 2013)
Server-Side Push: Comet, Web Sockets come of age (OSCON 2013)
 

Destaque (20)

Yes! I'm Lonesome tonight
Yes! I'm Lonesome tonightYes! I'm Lonesome tonight
Yes! I'm Lonesome tonight
 
Windy day
Windy dayWindy day
Windy day
 
Superacion
SuperacionSuperacion
Superacion
 
Diferencia porno / sensual
Diferencia porno / sensualDiferencia porno / sensual
Diferencia porno / sensual
 
Labellezaazul
LabellezaazulLabellezaazul
Labellezaazul
 
Brutas
BrutasBrutas
Brutas
 
Raquel
RaquelRaquel
Raquel
 
Misterios Da Vida2
Misterios Da Vida2Misterios Da Vida2
Misterios Da Vida2
 
Developers in the New Age of the Web
Developers in the New Age of the WebDevelopers in the New Age of the Web
Developers in the New Age of the Web
 
Twistori Tech
Twistori TechTwistori Tech
Twistori Tech
 
Rich and Snappy Apps (No Scaling Required)
Rich and Snappy Apps (No Scaling Required)Rich and Snappy Apps (No Scaling Required)
Rich and Snappy Apps (No Scaling Required)
 
Bikini selfies and suggestive lip dubs: Examining queer women’s performances...
Bikini selfies and suggestive lip dubs: Examining queer women’s performances...Bikini selfies and suggestive lip dubs: Examining queer women’s performances...
Bikini selfies and suggestive lip dubs: Examining queer women’s performances...
 
Human Trafficking
Human TraffickingHuman Trafficking
Human Trafficking
 
Monjaytaxi
MonjaytaxiMonjaytaxi
Monjaytaxi
 
Juegavivo
JuegavivoJuegavivo
Juegavivo
 
Fotosxxx
FotosxxxFotosxxx
Fotosxxx
 
Zima staf-1 m
Zima staf-1 mZima staf-1 m
Zima staf-1 m
 
Eye catching photos
Eye catching photosEye catching photos
Eye catching photos
 
Holocauto
HolocautoHolocauto
Holocauto
 
Zoe Girl By
Zoe Girl  ByZoe Girl  By
Zoe Girl By
 

Semelhante a I Can't Believe It's Not Flash

CSS3 Takes on the World
CSS3 Takes on the WorldCSS3 Takes on the World
CSS3 Takes on the WorldJonathan Snook
 
[A5]deview 2012 pt hds webkit_gpu
[A5]deview 2012 pt hds webkit_gpu[A5]deview 2012 pt hds webkit_gpu
[A5]deview 2012 pt hds webkit_gpuNAVER D2
 
PreDevCampSF - CSS3 Tricks
PreDevCampSF - CSS3 TricksPreDevCampSF - CSS3 Tricks
PreDevCampSF - CSS3 Tricksincidentist
 
Interface Styling & Scripting on WebKit Mobile
Interface Styling & Scripting on WebKit MobileInterface Styling & Scripting on WebKit Mobile
Interface Styling & Scripting on WebKit MobileDavid Aurelio
 
CSS3: Ready for Primetime?
CSS3: Ready for Primetime?CSS3: Ready for Primetime?
CSS3: Ready for Primetime?Jeff Bridgforth
 
JavaONE 2012 Using Java with HTML5 and CSS3
JavaONE 2012 Using Java with HTML5 and CSS3JavaONE 2012 Using Java with HTML5 and CSS3
JavaONE 2012 Using Java with HTML5 and CSS3Helder da Rocha
 
Implementing Awesome: An HTML5/CSS3 Workshop
Implementing Awesome: An HTML5/CSS3 WorkshopImplementing Awesome: An HTML5/CSS3 Workshop
Implementing Awesome: An HTML5/CSS3 WorkshopShoshi Roberts
 
SVCC 2013 D3.js Presentation (10/05/2013)
SVCC 2013 D3.js Presentation (10/05/2013)SVCC 2013 D3.js Presentation (10/05/2013)
SVCC 2013 D3.js Presentation (10/05/2013)Oswald Campesato
 
HTML5 تکنولوژی های موجود در
HTML5 تکنولوژی های موجود در HTML5 تکنولوژی های موجود در
HTML5 تکنولوژی های موجود در Shiraz LUG
 
codebits 2009 HTML5 JS APIs
codebits 2009 HTML5 JS APIscodebits 2009 HTML5 JS APIs
codebits 2009 HTML5 JS APIsRemy Sharp
 
The CSS of Tomorrow (Front Row 2011)
The CSS of Tomorrow (Front Row 2011)The CSS of Tomorrow (Front Row 2011)
The CSS of Tomorrow (Front Row 2011)Peter Gasston
 
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference ZürichHTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference ZürichRobert Nyman
 
Professional reports with SVG
Professional reports with SVGProfessional reports with SVG
Professional reports with SVGSpeedPartner GmbH
 
A brief look at CSS3 techniques by Aaron Rodgers, Web Designer @ vzaar.com
A brief look at CSS3 techniques by Aaron Rodgers, Web Designer @ vzaar.comA brief look at CSS3 techniques by Aaron Rodgers, Web Designer @ vzaar.com
A brief look at CSS3 techniques by Aaron Rodgers, Web Designer @ vzaar.comapplicake
 

Semelhante a I Can't Believe It's Not Flash (20)

HTML5 - A Whirlwind tour
HTML5 - A Whirlwind tourHTML5 - A Whirlwind tour
HTML5 - A Whirlwind tour
 
CSS3 Takes on the World
CSS3 Takes on the WorldCSS3 Takes on the World
CSS3 Takes on the World
 
[A5]deview 2012 pt hds webkit_gpu
[A5]deview 2012 pt hds webkit_gpu[A5]deview 2012 pt hds webkit_gpu
[A5]deview 2012 pt hds webkit_gpu
 
PreDevCampSF - CSS3 Tricks
PreDevCampSF - CSS3 TricksPreDevCampSF - CSS3 Tricks
PreDevCampSF - CSS3 Tricks
 
Interface Styling & Scripting on WebKit Mobile
Interface Styling & Scripting on WebKit MobileInterface Styling & Scripting on WebKit Mobile
Interface Styling & Scripting on WebKit Mobile
 
CSS3: Ready for Primetime?
CSS3: Ready for Primetime?CSS3: Ready for Primetime?
CSS3: Ready for Primetime?
 
JavaONE 2012 Using Java with HTML5 and CSS3
JavaONE 2012 Using Java with HTML5 and CSS3JavaONE 2012 Using Java with HTML5 and CSS3
JavaONE 2012 Using Java with HTML5 and CSS3
 
Implementing Awesome: An HTML5/CSS3 Workshop
Implementing Awesome: An HTML5/CSS3 WorkshopImplementing Awesome: An HTML5/CSS3 Workshop
Implementing Awesome: An HTML5/CSS3 Workshop
 
Svcc 2013-d3
Svcc 2013-d3Svcc 2013-d3
Svcc 2013-d3
 
SVCC 2013 D3.js Presentation (10/05/2013)
SVCC 2013 D3.js Presentation (10/05/2013)SVCC 2013 D3.js Presentation (10/05/2013)
SVCC 2013 D3.js Presentation (10/05/2013)
 
HTML5 تکنولوژی های موجود در
HTML5 تکنولوژی های موجود در HTML5 تکنولوژی های موجود در
HTML5 تکنولوژی های موجود در
 
Css animation
Css animationCss animation
Css animation
 
codebits 2009 HTML5 JS APIs
codebits 2009 HTML5 JS APIscodebits 2009 HTML5 JS APIs
codebits 2009 HTML5 JS APIs
 
The CSS of Tomorrow (Front Row 2011)
The CSS of Tomorrow (Front Row 2011)The CSS of Tomorrow (Front Row 2011)
The CSS of Tomorrow (Front Row 2011)
 
HTML5, the new buzzword
HTML5, the new buzzwordHTML5, the new buzzword
HTML5, the new buzzword
 
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference ZürichHTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich
 
Professional reports with SVG
Professional reports with SVGProfessional reports with SVG
Professional reports with SVG
 
CSS3 pronti all'uso
CSS3 pronti all'usoCSS3 pronti all'uso
CSS3 pronti all'uso
 
Accelerated Stylesheets
Accelerated StylesheetsAccelerated Stylesheets
Accelerated Stylesheets
 
A brief look at CSS3 techniques by Aaron Rodgers, Web Designer @ vzaar.com
A brief look at CSS3 techniques by Aaron Rodgers, Web Designer @ vzaar.comA brief look at CSS3 techniques by Aaron Rodgers, Web Designer @ vzaar.com
A brief look at CSS3 techniques by Aaron Rodgers, Web Designer @ vzaar.com
 

Mais de Thomas Fuchs

Zepto and the rise of the JavaScript Micro-Frameworks
Zepto and the rise of the JavaScript Micro-FrameworksZepto and the rise of the JavaScript Micro-Frameworks
Zepto and the rise of the JavaScript Micro-FrameworksThomas Fuchs
 
Zepto.js, a jQuery-compatible mobile JavaScript framework in 2K
Zepto.js, a jQuery-compatible mobile JavaScript framework in 2KZepto.js, a jQuery-compatible mobile JavaScript framework in 2K
Zepto.js, a jQuery-compatible mobile JavaScript framework in 2KThomas Fuchs
 
Prototype & Scriptaculous
Prototype  & ScriptaculousPrototype  & Scriptaculous
Prototype & ScriptaculousThomas Fuchs
 
Extreme JavaScript Performance
Extreme JavaScript PerformanceExtreme JavaScript Performance
Extreme JavaScript PerformanceThomas Fuchs
 
Adventures In JavaScript Testing
Adventures In JavaScript TestingAdventures In JavaScript Testing
Adventures In JavaScript TestingThomas Fuchs
 
Ruby On Rails Introduction
Ruby On Rails IntroductionRuby On Rails Introduction
Ruby On Rails IntroductionThomas Fuchs
 

Mais de Thomas Fuchs (7)

Zepto and the rise of the JavaScript Micro-Frameworks
Zepto and the rise of the JavaScript Micro-FrameworksZepto and the rise of the JavaScript Micro-Frameworks
Zepto and the rise of the JavaScript Micro-Frameworks
 
Zepto.js, a jQuery-compatible mobile JavaScript framework in 2K
Zepto.js, a jQuery-compatible mobile JavaScript framework in 2KZepto.js, a jQuery-compatible mobile JavaScript framework in 2K
Zepto.js, a jQuery-compatible mobile JavaScript framework in 2K
 
Prototype & Scriptaculous
Prototype  & ScriptaculousPrototype  & Scriptaculous
Prototype & Scriptaculous
 
Extreme JavaScript Performance
Extreme JavaScript PerformanceExtreme JavaScript Performance
Extreme JavaScript Performance
 
Textorize
TextorizeTextorize
Textorize
 
Adventures In JavaScript Testing
Adventures In JavaScript TestingAdventures In JavaScript Testing
Adventures In JavaScript Testing
 
Ruby On Rails Introduction
Ruby On Rails IntroductionRuby On Rails Introduction
Ruby On Rails Introduction
 

Último

Automation Ops Series: Session 2 - Governance for UiPath projects
Automation Ops Series: Session 2 - Governance for UiPath projectsAutomation Ops Series: Session 2 - Governance for UiPath projects
Automation Ops Series: Session 2 - Governance for UiPath projectsDianaGray10
 
Patch notes explaining DISARM Version 1.4 update
Patch notes explaining DISARM Version 1.4 updatePatch notes explaining DISARM Version 1.4 update
Patch notes explaining DISARM Version 1.4 updateadam112203
 
Introduction to RAG (Retrieval Augmented Generation) and its application
Introduction to RAG (Retrieval Augmented Generation) and its applicationIntroduction to RAG (Retrieval Augmented Generation) and its application
Introduction to RAG (Retrieval Augmented Generation) and its applicationKnoldus Inc.
 
SIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENT
SIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENTSIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENT
SIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENTxtailishbaloch
 
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptxEmil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptxNeo4j
 
Flow Control | Block Size | ST Min | First Frame
Flow Control | Block Size | ST Min | First FrameFlow Control | Block Size | ST Min | First Frame
Flow Control | Block Size | ST Min | First FrameKapil Thakar
 
AI Workshops at Computers In Libraries 2024
AI Workshops at Computers In Libraries 2024AI Workshops at Computers In Libraries 2024
AI Workshops at Computers In Libraries 2024Brian Pichman
 
My key hands-on projects in Quantum, and QAI
My key hands-on projects in Quantum, and QAIMy key hands-on projects in Quantum, and QAI
My key hands-on projects in Quantum, and QAIVijayananda Mohire
 
Oracle Database 23c Security New Features.pptx
Oracle Database 23c Security New Features.pptxOracle Database 23c Security New Features.pptx
Oracle Database 23c Security New Features.pptxSatishbabu Gunukula
 
Webinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - Tech
Webinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - TechWebinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - Tech
Webinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - TechProduct School
 
Planetek Italia Srl - Corporate Profile Brochure
Planetek Italia Srl - Corporate Profile BrochurePlanetek Italia Srl - Corporate Profile Brochure
Planetek Italia Srl - Corporate Profile BrochurePlanetek Italia Srl
 
From the origin to the future of Open Source model and business
From the origin to the future of  Open Source model and businessFrom the origin to the future of  Open Source model and business
From the origin to the future of Open Source model and businessFrancesco Corti
 
UiPath Studio Web workshop series - Day 1
UiPath Studio Web workshop series  - Day 1UiPath Studio Web workshop series  - Day 1
UiPath Studio Web workshop series - Day 1DianaGray10
 
Trailblazer Community - Flows Workshop (Session 2)
Trailblazer Community - Flows Workshop (Session 2)Trailblazer Community - Flows Workshop (Session 2)
Trailblazer Community - Flows Workshop (Session 2)Muhammad Tiham Siddiqui
 
TrustArc Webinar - How to Live in a Post Third-Party Cookie World
TrustArc Webinar - How to Live in a Post Third-Party Cookie WorldTrustArc Webinar - How to Live in a Post Third-Party Cookie World
TrustArc Webinar - How to Live in a Post Third-Party Cookie WorldTrustArc
 
March Patch Tuesday
March Patch TuesdayMarch Patch Tuesday
March Patch TuesdayIvanti
 
UiPath Studio Web workshop series - Day 2
UiPath Studio Web workshop series - Day 2UiPath Studio Web workshop series - Day 2
UiPath Studio Web workshop series - Day 2DianaGray10
 
2024.03.12 Cost drivers of cultivated meat production.pdf
2024.03.12 Cost drivers of cultivated meat production.pdf2024.03.12 Cost drivers of cultivated meat production.pdf
2024.03.12 Cost drivers of cultivated meat production.pdfThe Good Food Institute
 
How to become a GDSC Lead GDSC MI AOE.pptx
How to become a GDSC Lead GDSC MI AOE.pptxHow to become a GDSC Lead GDSC MI AOE.pptx
How to become a GDSC Lead GDSC MI AOE.pptxKaustubhBhavsar6
 

Último (20)

Automation Ops Series: Session 2 - Governance for UiPath projects
Automation Ops Series: Session 2 - Governance for UiPath projectsAutomation Ops Series: Session 2 - Governance for UiPath projects
Automation Ops Series: Session 2 - Governance for UiPath projects
 
Patch notes explaining DISARM Version 1.4 update
Patch notes explaining DISARM Version 1.4 updatePatch notes explaining DISARM Version 1.4 update
Patch notes explaining DISARM Version 1.4 update
 
Introduction to RAG (Retrieval Augmented Generation) and its application
Introduction to RAG (Retrieval Augmented Generation) and its applicationIntroduction to RAG (Retrieval Augmented Generation) and its application
Introduction to RAG (Retrieval Augmented Generation) and its application
 
SIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENT
SIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENTSIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENT
SIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENT
 
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptxEmil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
 
Flow Control | Block Size | ST Min | First Frame
Flow Control | Block Size | ST Min | First FrameFlow Control | Block Size | ST Min | First Frame
Flow Control | Block Size | ST Min | First Frame
 
AI Workshops at Computers In Libraries 2024
AI Workshops at Computers In Libraries 2024AI Workshops at Computers In Libraries 2024
AI Workshops at Computers In Libraries 2024
 
My key hands-on projects in Quantum, and QAI
My key hands-on projects in Quantum, and QAIMy key hands-on projects in Quantum, and QAI
My key hands-on projects in Quantum, and QAI
 
Oracle Database 23c Security New Features.pptx
Oracle Database 23c Security New Features.pptxOracle Database 23c Security New Features.pptx
Oracle Database 23c Security New Features.pptx
 
Webinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - Tech
Webinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - TechWebinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - Tech
Webinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - Tech
 
Planetek Italia Srl - Corporate Profile Brochure
Planetek Italia Srl - Corporate Profile BrochurePlanetek Italia Srl - Corporate Profile Brochure
Planetek Italia Srl - Corporate Profile Brochure
 
From the origin to the future of Open Source model and business
From the origin to the future of  Open Source model and businessFrom the origin to the future of  Open Source model and business
From the origin to the future of Open Source model and business
 
UiPath Studio Web workshop series - Day 1
UiPath Studio Web workshop series  - Day 1UiPath Studio Web workshop series  - Day 1
UiPath Studio Web workshop series - Day 1
 
Trailblazer Community - Flows Workshop (Session 2)
Trailblazer Community - Flows Workshop (Session 2)Trailblazer Community - Flows Workshop (Session 2)
Trailblazer Community - Flows Workshop (Session 2)
 
TrustArc Webinar - How to Live in a Post Third-Party Cookie World
TrustArc Webinar - How to Live in a Post Third-Party Cookie WorldTrustArc Webinar - How to Live in a Post Third-Party Cookie World
TrustArc Webinar - How to Live in a Post Third-Party Cookie World
 
March Patch Tuesday
March Patch TuesdayMarch Patch Tuesday
March Patch Tuesday
 
SheDev 2024
SheDev 2024SheDev 2024
SheDev 2024
 
UiPath Studio Web workshop series - Day 2
UiPath Studio Web workshop series - Day 2UiPath Studio Web workshop series - Day 2
UiPath Studio Web workshop series - Day 2
 
2024.03.12 Cost drivers of cultivated meat production.pdf
2024.03.12 Cost drivers of cultivated meat production.pdf2024.03.12 Cost drivers of cultivated meat production.pdf
2024.03.12 Cost drivers of cultivated meat production.pdf
 
How to become a GDSC Lead GDSC MI AOE.pptx
How to become a GDSC Lead GDSC MI AOE.pptxHow to become a GDSC Lead GDSC MI AOE.pptx
How to become a GDSC Lead GDSC MI AOE.pptx
 

I Can't Believe It's Not Flash

  • 1. I Can’t Believe It’s Not Flash! @thomasfuchs
  • 4. Animating CSS properties Timer JavaScript Reflow Rendering Paint sets CSS
  • 6. Animating CSS properties Timer JavaScript Reflow Rendering Paint sets CSS
  • 8. Performance hit JavaScript Reflow Rendering Paint
  • 9. Performance hit JavaScript Reflow Rendering Paint
  • 10. Performance hit JavaScript Reflow Rendering Paint
  • 11. Performance hit JavaScript Reflow Rendering Paint
  • 12. Performance hit JavaScript Reflow Rendering Paint
  • 13. Browser CSS animation/ transitions Timer Browser Reflow Rendering Paint updates CSS
  • 15. Timer JavaScript Reflow Rendering Paint sets CSS Timer Browser Reflow Rendering Paint updates CSS
  • 16. Timer JavaScript Reflow Rendering Paint sets CSS Timer Browser Reflow Rendering Paint updates CSS
  • 17. -webkit-transform Paint JavaScript or Browser sets CSS
  • 21. <!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;
  • 22.        #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>
  • 23. Safari on Snow Leopard, or on Windows: Nokia’s Starlight browser (alpha) http://www.starlight-webkit.org/
  • 26. Fullscreen HD Video CPU% HTML5: 10% FLASH: 100+% (and dropped frames) http://jilion.com/sublime/video
  • 28. Canvas Timer JavaScript Paint uses Canvas APIs
  • 30. Physics engine with Canvas Timer 1) clear canvas Paint 2) physics iteration 3) draw shapes Box2D physics engine
  • 31. 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); }
  • 32.                    world.Step(ms,1);
  • 33. 3) draw shapes box2d objects/ positions canvas
  • 35. Vector graphics SVG + VML JavaScript Reflow Rendering Paint creates vector graphics nodes
  • 37. <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
  • 40. WebGL shaders Timer JavaScript Paint
  • 41. 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>
  • 42.    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                          */
  • 45. http://ftp.mozilla.org/pub/mozilla.org/ firefox/nightly/latest-trunk/
  • 47. JavaScript & CSS CSS Transforms & Animations 2D bitmapped graphics Physics engines Vector graphics HTML5 video WebGL