SlideShare a Scribd company logo
1 of 37
Download to read offline
Google's HTML5 Work: what's next?
Google’s HTML5 Work:
What’s Next?
Patrick Chanezon (slides from Matthew Papakipos)

June 5 2009
Browsers Started a Revolution that Continues
    •  In 1995 Netscape introduced JavaScript
    •  In 1999, Microsoft introduces XMLHTTP
    •  In 2002, Mozilla 1.0 includes XMLHttpRequest natively


    ... Then web applications started taking off ...


    •  In 2004, Gmail launches as a beta
    •  In 2005, AJAX takes off (e.g. Google Maps)


    ... Now web applications are demanding more capabilities

3
What New Capabilities do Webapps Need?
    •  Plugins currently address some needs, others are still not
     well addressed
       –  Playing video
       –  Webcam / microphone access
       –  Better file uploads
       –  Geolocation
       –  Offline abilities
       –  3D
       –  Positional and multi-channel audio
       –  Drag and drop of content and files into and out of webapps
    •  Some of these capabilities are working their way through
     standards process
4
Our Goal
    •  Empower web applications
      –  If a native app can do it, why can’t a webapp?
      –  Can we build upon webapps strengths?
    •  Understand what new capabilities are needed
      –  Talking to application developers (you!)
      –  Figure out what native applications people run
           •  And what web applications serve similar purposes
           •  And what native applications have no web equivalent
    •  Implement (we’re going full speed ahead...)
      –  We prototyped in Gears
      –  Now we’re implementing natively in Google Chrome
    •  Standardize
5
Now I do not know whether I was then a
man dreaming I was a butterfly, or whether I
am now a butterfly, dreaming I am a man.

             or   Zhūangzi
Web vector graphics today



              99%               33%




                            33%
              20%



7
<canvas>
    •  One of the first HTML5 additions to be implemented by
     browsers – in Safari, then Firefox and Opera. (We got it for
     free in Google Chrome from WebKit).
    •  Provides a surface on which you can draw 2D images
    •  Talk of extending the model for 3D (more later)

    // canvas is a reference to a <canvas> element
      var context = canvas.getContext('2d');
      context.fillRect(0,0,50,50);
      canvas.setAttribute('width', '300'); // clears the canvas
      context.fillRect(0,100,50,50);
      canvas.width = canvas.width; // clears the canvas
      context.fillRect(100,0,50,50); // only this square remains

    (reproduced from http://www.whatwg.org/specs/web-apps/current-
    work/#canvas with permission)


8
OpenWeb vector graphics available in a browser
      near you

    •  Firefox, Safari (+iPhone),      http://a.deveria.com/caniuse/
      Opera, Chrome
    •  ~33% browsers natively
    •  Open Source JS Shims
      for Canvas and SVG (autumn
      2009) support in IE
       –  Much of SVG 1.1 Full
          supported by all browsers
          except IE
       –  Most of Canvas (except for
          text extensions) supported
          by all browsers except IE
    •  No Flash in iPhone & Android



9
The Grid




10
                from https://developer.mozilla.org/en/Canvas_tutorial
fill, stroke, lines, Rect




       context.fillStyle   = '#00f'; // blue
       context.strokeStyle = '#f00'; // red
       context.lineWidth   = 4;

       // Draw some rectangles.
       context.fillRect (0,    0, 150, 50);
       context.strokeRect(0, 60, 150, 50);
       context.clearRect (30, 25, 90, 60);
       context.strokeRect(30, 25, 90, 60);




11
Path
     // Set the style properties.
     context.fillStyle    = '#00f';
     context.strokeStyle = '#f00';
     context.lineWidth    = 4;
     context.beginPath();
     // Start from the top-left point.
     context.moveTo(10, 10); // give the (x,y) coordinates
     context.lineTo(100, 10);
     context.lineTo(10, 100);
     context.lineTo(10, 10);

     // Done! Now fill the shape, and draw the stroke.
     context.fill();
     context.stroke();
     context.closePath();




12
Arcs, Curves
     arc(x, y, radius, startAngle, endAngle, anticlockwise)




     quadraticCurveTo(cp1x, cp1y, x, y) // (BROKEN in FF 3.5)
     bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)




13
Styles and Colors
     ctx.fillStyle =   quot;orangequot;;
     ctx.fillStyle =   quot;#FFA500quot;;
     ctx.fillStyle =   quot;rgb(255,165,0)quot;;
     ctx.strokeStyle   = quot;rgba(255,0,0,0.5)quot;;

     lineWidth = value
     lineCap = type
     lineJoin = type
     miterLimit = value

     createLinearGradient(x1,y1,x2,y2)
     createRadialGradient(x1,y1,r1,x2,y2,r2)
     addColorStop(position, color)

     createPattern(image,type)




14
Images: draw, scale, slice
     //drawImage(image, sx, sy, sWidth, sHeight, dx, dy,
     dWidth, dHeight)// Draw slice
     ctx.drawImage(document.getElementById('source'),
     33,71,104,124,21,20,87,104);




     // Draw frame
     ctx.drawImage(document.getElementById('frame'),
     0,0);context.stroke();context.closePath();




15
Pixel manipulation of Images, Video

     computeFrame: function() {
            this.ctx1.drawImage(this.video, 0,
     0, this.width, this.height);
            let frame =
     this.ctx1.getImageData(0, 0, this.width,
     this.height);
            let l = frame.data.length / 4;

             for (let i = 0;    i < l; i++) {
                     let r =   frame.data[i *   4 + 0];
                     let g =   frame.data[i *   4 + 1];
                     let b =   frame.data[i *   4 + 2];
                     if (g >   100 && r > 100   && b < 43)
                               frame.data[i *   4 + 3] = 0;
             }
             this.ctx2.putImageData(frame, 0, 0);
             return;
     }

     https://developer.mozilla.org/en/manipulating_video_using_canvas
16
Tranformations
     State: Canvas states are stored on a stack
     save()restore()
     translate(x, y)

     rotate(angle)

     scale(x, y)

     transform(m11, m12, m21, m22, dx, dy)
     setTransform(m11, m12, m21, m22, dx, dy)




17
transform example
     var i = 0;
     var sin = Math.sin(Math.PI/6);
     var cos = Math.cos(Math.PI/6);
     ctx.translate(200, 200);
     var c = 0;
     for (i; i <= 12; i++) {
       c = Math.floor(255 / 12 * i);
       ctx.fillStyle = quot;rgb(quot; + c + quot;,quot; + c + quot;,quot; + c + quot;)quot;;
       ctx.fillRect(0, 0, 100, 10);
       ctx.transform(cos, sin, -sin, cos, 0, 0);
     }

     ctx.setTransform(-1, 0, 0, 1, 200, 200);
     ctx.fillStyle = quot;rgba(255, 128, 255, 0.5)quot;;
     ctx.fillRect(0, 50, 100, 100);




18
2D -> Triangles -> 3D




     http://kawanet.blogspot.com/2009/02/incredible-javascriptcanvas-3d-demos.html



19
<canvas> Demo
Local Storage
     •  Provides a way to store data client side
     •  Useful for many classes of applications, especially in
      conjunction with offline capabilities
     •  2 main APIs provided: a database API (exposing a SQLite
      database) and a structured storage api (key/value pairs)
     •  Implementation under way in Google Chrome, already
      working in WebKit.
      db.transaction(function(tx) {
        tx.executeSql('SELECT * FROM MyTable', [],
            function(tx, rs) {
              for (var i = 0; i < rs.rows.length; ++i) {
                var row = rs.rows.item(i);
                DoSomething(row['column']);
              }
            });
        });

21
Workers
     •  Native apps have threads and processes
     •  Workers provide web apps with a means for concurrency
     •  Can offload heavy computation onto a separate thread so
      your app doesn’t block
     •  Come in 3 flavors
       –  Dedicated (think: bound to a single tab)
       –  Shared (shared among multiple windows in an origin)
       –  Persistent (run when the browser is “closed”)
     •  Implementation is ongoing in WebKit and Google Chrome




22
Application Cache
     •  Application cache solves the problem of how to make it such
      that one can load an application URL while offline and it just
      “works”
     •  Web pages can provide a “manifest” of files that should be
      cached locally
     •  These pages can be accessed offline
     •  Enables web pages to work without the user being connected
      to the Internet
     •  Implemented in WebKit, implementation ongoing in Google
      Chrome




23
<video>
     •  Allows a page to natively play video
       –  No plugins required
       –  As simple as including an image - <video src=“video.mp4”>
     •  Has built-in playback controls
       –  Stop
       –  Pause
       –  Play
     •  Scriptable, in case you want your own dynamic control
     •  Chrome will support MP4 (H.264 + AAC), and Ogg (Theora +
      Vorbis)
     •  Implemented in WebKit, implementation under way in Google
      Chrome (now in dev channel).
24
<video> Demo
Rich Text Editing
     •  contentEditable implementations vary widely between
      browsers
     •  Behaviour for simple things, such as selection ranges, is not
      well defined in any spec
     •  Currently helping to define a specification for existing
      behaviour, as well as improvements for new functionality
        –  Specify exactly what selections select
        –  Add execCommand to additional events where it makes sense
        –  getData(‘text/html’) for paste and drop events
     •  No reason web apps should have to ship 200KB to do rich
      text editing


26
Notifications
     •  Alert() dialogs are annoying, modal, and not a great user
       experience
     •  Provide a way to do less intrusive event notifications
     •  Work regardless of what tab / window has focus
     •  Provide more flexibility than an alert() dialog
     •  Not currently in any standard, we’re currently prototyping




27
Web Sockets
     •  Allows bi-directional communication between client and
      server in a cleaner, more efficient form than hanging gets (or
      a series of XMLHttpRequests)
     •  Specification is under active development




28
3D APIs
     •  Canvas 3D, developed by Mozilla, is a command-mode API
      that allows developers to make OpenGL calls via JavaScript
     •  O3D is an effort by Google to develop a retain-mode API
      where developers can build up a scene graph and
      manipulate via JavaScript, also hardware accelerated
     •  Discussion on the web and in standards bodies to follow




29
3D Demo
And So Much More…
     •  There’s much work that we haven’t even started yet.
     •  Some is well defined
       –  Geolocation
       –  Forms2
       –  Datagrid
     •  Many things less defined
       –  P2p APIs
       –  Better drag + drop support
       –  Webcam / Microphone access
       –  O/S integration (protocol / file extension handlers and more)
       –  Managing uploads, “blobs”, file APIs

31
       –  And more
Our Work in a Nutshell
               <video> hits dev channel, with         Additional APIs
                local storage, appcache, and          (TBD) to better
                       workers following               support web
                                                        applications

                                      Web sockets,
                                      more CSS3
                                       support hits
                    Polish work
                                      dev channel
                     on above




32
Resources
             •  Spec http://whatwg.org/html5
             •  http://code.google.com/chromium/
             •  http://code.google.com/apis/o3d/
             •  All demos at http://delicious.com/chanezon/openweb+demos
             •  https://developer.mozilla.org/en/Canvas_tutorial
             •  http://dev.opera.com/articles/view/html-5-canvas-the-basics/
             •  http://blog.mozbox.org/tag/demo
             •  https://bespin.mozilla.com/




Google Confidential
33
“it is Google which is driving web standards
 forward. That is why we at Zoho are firmly
 aligned with them, even if they are our
 primary competitor. We believe in an open
 web, there is plenty of opportunity for all of
 us. Could Google abuse its position? Well, I
 am sure they understand karma.”
Microsoft Silverlight vs Google Wave: Why Karma Matters | Zoho Blogs


                Sridhar Vembu, CEO of AdventNet (Zoho)
Learn More at
http://code.google.com/chromium/
Q&A
Google's HTML5 Work: what's next?

More Related Content

What's hot

Hiveminder - Everything but the Secret Sauce
Hiveminder - Everything but the Secret SauceHiveminder - Everything but the Secret Sauce
Hiveminder - Everything but the Secret SauceJesse Vincent
 
Computer vision Nebraska (Nebraska Code)
Computer vision Nebraska (Nebraska Code)Computer vision Nebraska (Nebraska Code)
Computer vision Nebraska (Nebraska Code)Andrew Rangel
 
JavaScript & HTML5 - Brave New World
JavaScript & HTML5 - Brave New WorldJavaScript & HTML5 - Brave New World
JavaScript & HTML5 - Brave New WorldRobert Nyman
 
HTML5 JavaScript APIs
HTML5 JavaScript APIsHTML5 JavaScript APIs
HTML5 JavaScript APIsRemy Sharp
 
Creating Applications with WebGL and Three.js
Creating Applications with WebGL and Three.jsCreating Applications with WebGL and Three.js
Creating Applications with WebGL and Three.jsFuture Insights
 
Augmented Reality in JavaScript
Augmented Reality in JavaScriptAugmented Reality in JavaScript
Augmented Reality in JavaScriptZeno Rocha
 
HTML5 game dev with three.js - HexGL
HTML5 game dev with three.js - HexGLHTML5 game dev with three.js - HexGL
HTML5 game dev with three.js - HexGLThibaut Despoulain
 
Будь первым
Будь первымБудь первым
Будь первымFDConf
 
Understanding the Node.js Platform
Understanding the Node.js PlatformUnderstanding the Node.js Platform
Understanding the Node.js PlatformDomenic Denicola
 
BDD - Buzzword Driven Development - Build the next cool app for fun and for.....
BDD - Buzzword Driven Development - Build the next cool app for fun and for.....BDD - Buzzword Driven Development - Build the next cool app for fun and for.....
BDD - Buzzword Driven Development - Build the next cool app for fun and for.....Alessandro Cinelli (cirpo)
 
From Hello World to the Interactive Web with Three.js: Workshop at FutureJS 2014
From Hello World to the Interactive Web with Three.js: Workshop at FutureJS 2014From Hello World to the Interactive Web with Three.js: Workshop at FutureJS 2014
From Hello World to the Interactive Web with Three.js: Workshop at FutureJS 2014Verold
 
HTML5 (and friends) - History, overview and current status - jsDay Verona 11....
HTML5 (and friends) - History, overview and current status - jsDay Verona 11....HTML5 (and friends) - History, overview and current status - jsDay Verona 11....
HTML5 (and friends) - History, overview and current status - jsDay Verona 11....Patrick Lauke
 
Node.js in action
Node.js in actionNode.js in action
Node.js in actionSimon Su
 
Bs webgl소모임004
Bs webgl소모임004Bs webgl소모임004
Bs webgl소모임004Seonki Paik
 

What's hot (19)

Hiveminder - Everything but the Secret Sauce
Hiveminder - Everything but the Secret SauceHiveminder - Everything but the Secret Sauce
Hiveminder - Everything but the Secret Sauce
 
Yavorsky
YavorskyYavorsky
Yavorsky
 
Computer vision Nebraska (Nebraska Code)
Computer vision Nebraska (Nebraska Code)Computer vision Nebraska (Nebraska Code)
Computer vision Nebraska (Nebraska Code)
 
JavaScript & HTML5 - Brave New World
JavaScript & HTML5 - Brave New WorldJavaScript & HTML5 - Brave New World
JavaScript & HTML5 - Brave New World
 
HTML5 JavaScript APIs
HTML5 JavaScript APIsHTML5 JavaScript APIs
HTML5 JavaScript APIs
 
Creating Applications with WebGL and Three.js
Creating Applications with WebGL and Three.jsCreating Applications with WebGL and Three.js
Creating Applications with WebGL and Three.js
 
The jsdom
The jsdomThe jsdom
The jsdom
 
Augmented Reality in JavaScript
Augmented Reality in JavaScriptAugmented Reality in JavaScript
Augmented Reality in JavaScript
 
WebGL and three.js
WebGL and three.jsWebGL and three.js
WebGL and three.js
 
HTML5 game dev with three.js - HexGL
HTML5 game dev with three.js - HexGLHTML5 game dev with three.js - HexGL
HTML5 game dev with three.js - HexGL
 
Будь первым
Будь первымБудь первым
Будь первым
 
Understanding the Node.js Platform
Understanding the Node.js PlatformUnderstanding the Node.js Platform
Understanding the Node.js Platform
 
Implementing New Web
Implementing New WebImplementing New Web
Implementing New Web
 
BDD - Buzzword Driven Development - Build the next cool app for fun and for.....
BDD - Buzzword Driven Development - Build the next cool app for fun and for.....BDD - Buzzword Driven Development - Build the next cool app for fun and for.....
BDD - Buzzword Driven Development - Build the next cool app for fun and for.....
 
From Hello World to the Interactive Web with Three.js: Workshop at FutureJS 2014
From Hello World to the Interactive Web with Three.js: Workshop at FutureJS 2014From Hello World to the Interactive Web with Three.js: Workshop at FutureJS 2014
From Hello World to the Interactive Web with Three.js: Workshop at FutureJS 2014
 
HTML5 (and friends) - History, overview and current status - jsDay Verona 11....
HTML5 (and friends) - History, overview and current status - jsDay Verona 11....HTML5 (and friends) - History, overview and current status - jsDay Verona 11....
HTML5 (and friends) - History, overview and current status - jsDay Verona 11....
 
Node.js in action
Node.js in actionNode.js in action
Node.js in action
 
The State of JavaScript
The State of JavaScriptThe State of JavaScript
The State of JavaScript
 
Bs webgl소모임004
Bs webgl소모임004Bs webgl소모임004
Bs webgl소모임004
 

Similar to Google's HTML5 Work: what's next?

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
 
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
 
HTML5 - Daha Flash bir web?
HTML5 - Daha Flash bir web?HTML5 - Daha Flash bir web?
HTML5 - Daha Flash bir web?Ankara JUG
 
JavaScript Libraries: The Big Picture
JavaScript Libraries: The Big PictureJavaScript Libraries: The Big Picture
JavaScript Libraries: The Big PictureSimon Willison
 
HTML5 and Other Modern Browser Game Tech
HTML5 and Other Modern Browser Game TechHTML5 and Other Modern Browser Game Tech
HTML5 and Other Modern Browser Game Techvincent_scheib
 
WebGL: GPU acceleration for the open web
WebGL: GPU acceleration for the open webWebGL: GPU acceleration for the open web
WebGL: GPU acceleration for the open webpjcozzi
 
HTML5: where flash isn't needed anymore
HTML5: where flash isn't needed anymoreHTML5: where flash isn't needed anymore
HTML5: where flash isn't needed anymoreRemy Sharp
 
Basic html5 and javascript
Basic html5 and javascriptBasic html5 and javascript
Basic html5 and javascriptwendy017
 
Cape Cod Web Technology Meetup - 2
Cape Cod Web Technology Meetup - 2Cape Cod Web Technology Meetup - 2
Cape Cod Web Technology Meetup - 2Asher Martin
 
New Elements & Features in HTML5
New Elements & Features in HTML5New Elements & Features in HTML5
New Elements & Features in HTML5Jamshid Hashimi
 
webinale2011_Chris Mills_Brave new world of HTML5Html5
webinale2011_Chris Mills_Brave new world of HTML5Html5webinale2011_Chris Mills_Brave new world of HTML5Html5
webinale2011_Chris Mills_Brave new world of HTML5Html5smueller_sandsmedia
 
How to make Ajax Libraries work for you
How to make Ajax Libraries work for youHow to make Ajax Libraries work for you
How to make Ajax Libraries work for youSimon Willison
 
Everything is Awesome - Cutting the Corners off the Web
Everything is Awesome - Cutting the Corners off the WebEverything is Awesome - Cutting the Corners off the Web
Everything is Awesome - Cutting the Corners off the WebJames Rakich
 
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5Sadaaki HIRAI
 
Is html5-ready-workshop-110727181512-phpapp02
Is html5-ready-workshop-110727181512-phpapp02Is html5-ready-workshop-110727181512-phpapp02
Is html5-ready-workshop-110727181512-phpapp02PL dream
 
Is HTML5 Ready? (workshop)
Is HTML5 Ready? (workshop)Is HTML5 Ready? (workshop)
Is HTML5 Ready? (workshop)Remy Sharp
 
Event-driven IO server-side JavaScript environment based on V8 Engine
Event-driven IO server-side JavaScript environment based on V8 EngineEvent-driven IO server-side JavaScript environment based on V8 Engine
Event-driven IO server-side JavaScript environment based on V8 EngineRicardo Silva
 
IE 8 et les standards du Web - Chris Wilson - Paris Web 2008
IE 8 et les standards du Web - Chris Wilson - Paris Web 2008IE 8 et les standards du Web - Chris Wilson - Paris Web 2008
IE 8 et les standards du Web - Chris Wilson - Paris Web 2008Association Paris-Web
 
Speak the Web 15.02.2010
Speak the Web 15.02.2010Speak the Web 15.02.2010
Speak the Web 15.02.2010Patrick Lauke
 

Similar to Google's HTML5 Work: what's next? (20)

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
 
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
 
A More Flash Like Web?
A More Flash Like Web?A More Flash Like Web?
A More Flash Like Web?
 
HTML5 - Daha Flash bir web?
HTML5 - Daha Flash bir web?HTML5 - Daha Flash bir web?
HTML5 - Daha Flash bir web?
 
JavaScript Libraries: The Big Picture
JavaScript Libraries: The Big PictureJavaScript Libraries: The Big Picture
JavaScript Libraries: The Big Picture
 
HTML5 and Other Modern Browser Game Tech
HTML5 and Other Modern Browser Game TechHTML5 and Other Modern Browser Game Tech
HTML5 and Other Modern Browser Game Tech
 
WebGL: GPU acceleration for the open web
WebGL: GPU acceleration for the open webWebGL: GPU acceleration for the open web
WebGL: GPU acceleration for the open web
 
HTML5: where flash isn't needed anymore
HTML5: where flash isn't needed anymoreHTML5: where flash isn't needed anymore
HTML5: where flash isn't needed anymore
 
Basic html5 and javascript
Basic html5 and javascriptBasic html5 and javascript
Basic html5 and javascript
 
Cape Cod Web Technology Meetup - 2
Cape Cod Web Technology Meetup - 2Cape Cod Web Technology Meetup - 2
Cape Cod Web Technology Meetup - 2
 
New Elements & Features in HTML5
New Elements & Features in HTML5New Elements & Features in HTML5
New Elements & Features in HTML5
 
webinale2011_Chris Mills_Brave new world of HTML5Html5
webinale2011_Chris Mills_Brave new world of HTML5Html5webinale2011_Chris Mills_Brave new world of HTML5Html5
webinale2011_Chris Mills_Brave new world of HTML5Html5
 
How to make Ajax Libraries work for you
How to make Ajax Libraries work for youHow to make Ajax Libraries work for you
How to make Ajax Libraries work for you
 
Everything is Awesome - Cutting the Corners off the Web
Everything is Awesome - Cutting the Corners off the WebEverything is Awesome - Cutting the Corners off the Web
Everything is Awesome - Cutting the Corners off the Web
 
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
 
Is html5-ready-workshop-110727181512-phpapp02
Is html5-ready-workshop-110727181512-phpapp02Is html5-ready-workshop-110727181512-phpapp02
Is html5-ready-workshop-110727181512-phpapp02
 
Is HTML5 Ready? (workshop)
Is HTML5 Ready? (workshop)Is HTML5 Ready? (workshop)
Is HTML5 Ready? (workshop)
 
Event-driven IO server-side JavaScript environment based on V8 Engine
Event-driven IO server-side JavaScript environment based on V8 EngineEvent-driven IO server-side JavaScript environment based on V8 Engine
Event-driven IO server-side JavaScript environment based on V8 Engine
 
IE 8 et les standards du Web - Chris Wilson - Paris Web 2008
IE 8 et les standards du Web - Chris Wilson - Paris Web 2008IE 8 et les standards du Web - Chris Wilson - Paris Web 2008
IE 8 et les standards du Web - Chris Wilson - Paris Web 2008
 
Speak the Web 15.02.2010
Speak the Web 15.02.2010Speak the Web 15.02.2010
Speak the Web 15.02.2010
 

More from Patrick Chanezon

KubeCon 2019 - Scaling your cluster (both ways)
KubeCon 2019 - Scaling your cluster (both ways)KubeCon 2019 - Scaling your cluster (both ways)
KubeCon 2019 - Scaling your cluster (both ways)Patrick Chanezon
 
KubeCon China 2019 - Building Apps with Containers, Functions and Managed Ser...
KubeCon China 2019 - Building Apps with Containers, Functions and Managed Ser...KubeCon China 2019 - Building Apps with Containers, Functions and Managed Ser...
KubeCon China 2019 - Building Apps with Containers, Functions and Managed Ser...Patrick Chanezon
 
Dockercon 2019 Developing Apps with Containers, Functions and Cloud Services
Dockercon 2019 Developing Apps with Containers, Functions and Cloud ServicesDockercon 2019 Developing Apps with Containers, Functions and Cloud Services
Dockercon 2019 Developing Apps with Containers, Functions and Cloud ServicesPatrick Chanezon
 
GIDS 2019: Developing Apps with Containers, Functions and Cloud Services
GIDS 2019: Developing Apps with Containers, Functions and Cloud ServicesGIDS 2019: Developing Apps with Containers, Functions and Cloud Services
GIDS 2019: Developing Apps with Containers, Functions and Cloud ServicesPatrick Chanezon
 
Docker Enterprise Workshop - Intro
Docker Enterprise Workshop - IntroDocker Enterprise Workshop - Intro
Docker Enterprise Workshop - IntroPatrick Chanezon
 
Docker Enterprise Workshop - Technical
Docker Enterprise Workshop - TechnicalDocker Enterprise Workshop - Technical
Docker Enterprise Workshop - TechnicalPatrick Chanezon
 
The Tao of Docker - ITES 2018
The Tao of Docker - ITES 2018The Tao of Docker - ITES 2018
The Tao of Docker - ITES 2018Patrick Chanezon
 
Microsoft Techsummit Zurich Docker and Microsoft
Microsoft Techsummit Zurich Docker and MicrosoftMicrosoft Techsummit Zurich Docker and Microsoft
Microsoft Techsummit Zurich Docker and MicrosoftPatrick Chanezon
 
Develop and deploy Kubernetes applications with Docker - IBM Index 2018
Develop and deploy Kubernetes  applications with Docker - IBM Index 2018Develop and deploy Kubernetes  applications with Docker - IBM Index 2018
Develop and deploy Kubernetes applications with Docker - IBM Index 2018Patrick Chanezon
 
Docker Meetup Feb 2018 Develop and deploy Kubernetes Apps with Docker
Docker Meetup Feb 2018 Develop and deploy Kubernetes Apps with DockerDocker Meetup Feb 2018 Develop and deploy Kubernetes Apps with Docker
Docker Meetup Feb 2018 Develop and deploy Kubernetes Apps with DockerPatrick Chanezon
 
The Tao of Docker - Devfest Nantes 2017
The Tao of Docker - Devfest Nantes 2017The Tao of Docker - Devfest Nantes 2017
The Tao of Docker - Devfest Nantes 2017Patrick Chanezon
 
Docker 之道 Modernize Traditional Applications with 无为 Create New Cloud Native ...
Docker 之道 Modernize Traditional Applications with 无为 Create New Cloud Native ...Docker 之道 Modernize Traditional Applications with 无为 Create New Cloud Native ...
Docker 之道 Modernize Traditional Applications with 无为 Create New Cloud Native ...Patrick Chanezon
 
Moby Open Source Summit North America 2017
Moby Open Source Summit North America 2017Moby Open Source Summit North America 2017
Moby Open Source Summit North America 2017Patrick Chanezon
 
Moby Introduction - June 2017
Moby Introduction - June 2017Moby Introduction - June 2017
Moby Introduction - June 2017Patrick Chanezon
 
Docker Cap Gemini CloudXperience 2017 - la revolution des conteneurs logiciels
Docker Cap Gemini CloudXperience 2017 - la revolution des conteneurs logicielsDocker Cap Gemini CloudXperience 2017 - la revolution des conteneurs logiciels
Docker Cap Gemini CloudXperience 2017 - la revolution des conteneurs logicielsPatrick Chanezon
 
Weave User Group Talk - DockerCon 2017 Recap
Weave User Group Talk - DockerCon 2017 RecapWeave User Group Talk - DockerCon 2017 Recap
Weave User Group Talk - DockerCon 2017 RecapPatrick Chanezon
 
Oscon 2017: Build your own container-based system with the Moby project
Oscon 2017: Build your own container-based system with the Moby projectOscon 2017: Build your own container-based system with the Moby project
Oscon 2017: Build your own container-based system with the Moby projectPatrick Chanezon
 

More from Patrick Chanezon (20)

KubeCon 2019 - Scaling your cluster (both ways)
KubeCon 2019 - Scaling your cluster (both ways)KubeCon 2019 - Scaling your cluster (both ways)
KubeCon 2019 - Scaling your cluster (both ways)
 
KubeCon China 2019 - Building Apps with Containers, Functions and Managed Ser...
KubeCon China 2019 - Building Apps with Containers, Functions and Managed Ser...KubeCon China 2019 - Building Apps with Containers, Functions and Managed Ser...
KubeCon China 2019 - Building Apps with Containers, Functions and Managed Ser...
 
Dockercon 2019 Developing Apps with Containers, Functions and Cloud Services
Dockercon 2019 Developing Apps with Containers, Functions and Cloud ServicesDockercon 2019 Developing Apps with Containers, Functions and Cloud Services
Dockercon 2019 Developing Apps with Containers, Functions and Cloud Services
 
GIDS 2019: Developing Apps with Containers, Functions and Cloud Services
GIDS 2019: Developing Apps with Containers, Functions and Cloud ServicesGIDS 2019: Developing Apps with Containers, Functions and Cloud Services
GIDS 2019: Developing Apps with Containers, Functions and Cloud Services
 
Docker Enterprise Workshop - Intro
Docker Enterprise Workshop - IntroDocker Enterprise Workshop - Intro
Docker Enterprise Workshop - Intro
 
Docker Enterprise Workshop - Technical
Docker Enterprise Workshop - TechnicalDocker Enterprise Workshop - Technical
Docker Enterprise Workshop - Technical
 
The Tao of Docker - ITES 2018
The Tao of Docker - ITES 2018The Tao of Docker - ITES 2018
The Tao of Docker - ITES 2018
 
Moby KubeCon 2017
Moby KubeCon 2017Moby KubeCon 2017
Moby KubeCon 2017
 
Microsoft Techsummit Zurich Docker and Microsoft
Microsoft Techsummit Zurich Docker and MicrosoftMicrosoft Techsummit Zurich Docker and Microsoft
Microsoft Techsummit Zurich Docker and Microsoft
 
Develop and deploy Kubernetes applications with Docker - IBM Index 2018
Develop and deploy Kubernetes  applications with Docker - IBM Index 2018Develop and deploy Kubernetes  applications with Docker - IBM Index 2018
Develop and deploy Kubernetes applications with Docker - IBM Index 2018
 
Docker Meetup Feb 2018 Develop and deploy Kubernetes Apps with Docker
Docker Meetup Feb 2018 Develop and deploy Kubernetes Apps with DockerDocker Meetup Feb 2018 Develop and deploy Kubernetes Apps with Docker
Docker Meetup Feb 2018 Develop and deploy Kubernetes Apps with Docker
 
DockerCon EU 2017 Recap
DockerCon EU 2017 RecapDockerCon EU 2017 Recap
DockerCon EU 2017 Recap
 
Docker Innovation Culture
Docker Innovation CultureDocker Innovation Culture
Docker Innovation Culture
 
The Tao of Docker - Devfest Nantes 2017
The Tao of Docker - Devfest Nantes 2017The Tao of Docker - Devfest Nantes 2017
The Tao of Docker - Devfest Nantes 2017
 
Docker 之道 Modernize Traditional Applications with 无为 Create New Cloud Native ...
Docker 之道 Modernize Traditional Applications with 无为 Create New Cloud Native ...Docker 之道 Modernize Traditional Applications with 无为 Create New Cloud Native ...
Docker 之道 Modernize Traditional Applications with 无为 Create New Cloud Native ...
 
Moby Open Source Summit North America 2017
Moby Open Source Summit North America 2017Moby Open Source Summit North America 2017
Moby Open Source Summit North America 2017
 
Moby Introduction - June 2017
Moby Introduction - June 2017Moby Introduction - June 2017
Moby Introduction - June 2017
 
Docker Cap Gemini CloudXperience 2017 - la revolution des conteneurs logiciels
Docker Cap Gemini CloudXperience 2017 - la revolution des conteneurs logicielsDocker Cap Gemini CloudXperience 2017 - la revolution des conteneurs logiciels
Docker Cap Gemini CloudXperience 2017 - la revolution des conteneurs logiciels
 
Weave User Group Talk - DockerCon 2017 Recap
Weave User Group Talk - DockerCon 2017 RecapWeave User Group Talk - DockerCon 2017 Recap
Weave User Group Talk - DockerCon 2017 Recap
 
Oscon 2017: Build your own container-based system with the Moby project
Oscon 2017: Build your own container-based system with the Moby projectOscon 2017: Build your own container-based system with the Moby project
Oscon 2017: Build your own container-based system with the Moby project
 

Recently uploaded

UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6DianaGray10
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1DianaGray10
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureEric D. Schabell
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxGDSC PJATK
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintMahmoud Rabie
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding TeamAdam Moalla
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.YounusS2
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostMatt Ray
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?IES VE
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXTarek Kalaji
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPathCommunity
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemAsko Soukka
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Will Schroeder
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Websitedgelyza
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsSeth Reyes
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UbiTrack UK
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1DianaGray10
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfAijun Zhang
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfJamie (Taka) Wang
 

Recently uploaded (20)

UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability Adventure
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptx
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership Blueprint
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBX
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation Developers
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystem
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Website
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and Hazards
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
 
20150722 - AGV
20150722 - AGV20150722 - AGV
20150722 - AGV
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdf
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
 

Google's HTML5 Work: what's next?

  • 2. Google’s HTML5 Work: What’s Next? Patrick Chanezon (slides from Matthew Papakipos) June 5 2009
  • 3. Browsers Started a Revolution that Continues •  In 1995 Netscape introduced JavaScript •  In 1999, Microsoft introduces XMLHTTP •  In 2002, Mozilla 1.0 includes XMLHttpRequest natively ... Then web applications started taking off ... •  In 2004, Gmail launches as a beta •  In 2005, AJAX takes off (e.g. Google Maps) ... Now web applications are demanding more capabilities 3
  • 4. What New Capabilities do Webapps Need? •  Plugins currently address some needs, others are still not well addressed –  Playing video –  Webcam / microphone access –  Better file uploads –  Geolocation –  Offline abilities –  3D –  Positional and multi-channel audio –  Drag and drop of content and files into and out of webapps •  Some of these capabilities are working their way through standards process 4
  • 5. Our Goal •  Empower web applications –  If a native app can do it, why can’t a webapp? –  Can we build upon webapps strengths? •  Understand what new capabilities are needed –  Talking to application developers (you!) –  Figure out what native applications people run •  And what web applications serve similar purposes •  And what native applications have no web equivalent •  Implement (we’re going full speed ahead...) –  We prototyped in Gears –  Now we’re implementing natively in Google Chrome •  Standardize 5
  • 6. Now I do not know whether I was then a man dreaming I was a butterfly, or whether I am now a butterfly, dreaming I am a man. or Zhūangzi
  • 7. Web vector graphics today 99% 33% 33% 20% 7
  • 8. <canvas> •  One of the first HTML5 additions to be implemented by browsers – in Safari, then Firefox and Opera. (We got it for free in Google Chrome from WebKit). •  Provides a surface on which you can draw 2D images •  Talk of extending the model for 3D (more later) // canvas is a reference to a <canvas> element var context = canvas.getContext('2d'); context.fillRect(0,0,50,50); canvas.setAttribute('width', '300'); // clears the canvas context.fillRect(0,100,50,50); canvas.width = canvas.width; // clears the canvas context.fillRect(100,0,50,50); // only this square remains (reproduced from http://www.whatwg.org/specs/web-apps/current- work/#canvas with permission) 8
  • 9. OpenWeb vector graphics available in a browser near you •  Firefox, Safari (+iPhone), http://a.deveria.com/caniuse/ Opera, Chrome •  ~33% browsers natively •  Open Source JS Shims for Canvas and SVG (autumn 2009) support in IE –  Much of SVG 1.1 Full supported by all browsers except IE –  Most of Canvas (except for text extensions) supported by all browsers except IE •  No Flash in iPhone & Android 9
  • 10. The Grid 10 from https://developer.mozilla.org/en/Canvas_tutorial
  • 11. fill, stroke, lines, Rect context.fillStyle = '#00f'; // blue context.strokeStyle = '#f00'; // red context.lineWidth = 4; // Draw some rectangles. context.fillRect (0, 0, 150, 50); context.strokeRect(0, 60, 150, 50); context.clearRect (30, 25, 90, 60); context.strokeRect(30, 25, 90, 60); 11
  • 12. Path // Set the style properties. context.fillStyle = '#00f'; context.strokeStyle = '#f00'; context.lineWidth = 4; context.beginPath(); // Start from the top-left point. context.moveTo(10, 10); // give the (x,y) coordinates context.lineTo(100, 10); context.lineTo(10, 100); context.lineTo(10, 10); // Done! Now fill the shape, and draw the stroke. context.fill(); context.stroke(); context.closePath(); 12
  • 13. Arcs, Curves arc(x, y, radius, startAngle, endAngle, anticlockwise) quadraticCurveTo(cp1x, cp1y, x, y) // (BROKEN in FF 3.5) bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) 13
  • 14. Styles and Colors ctx.fillStyle = quot;orangequot;; ctx.fillStyle = quot;#FFA500quot;; ctx.fillStyle = quot;rgb(255,165,0)quot;; ctx.strokeStyle = quot;rgba(255,0,0,0.5)quot;; lineWidth = value lineCap = type lineJoin = type miterLimit = value createLinearGradient(x1,y1,x2,y2) createRadialGradient(x1,y1,r1,x2,y2,r2) addColorStop(position, color) createPattern(image,type) 14
  • 15. Images: draw, scale, slice //drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)// Draw slice ctx.drawImage(document.getElementById('source'), 33,71,104,124,21,20,87,104); // Draw frame ctx.drawImage(document.getElementById('frame'), 0,0);context.stroke();context.closePath(); 15
  • 16. Pixel manipulation of Images, Video computeFrame: function() { this.ctx1.drawImage(this.video, 0, 0, this.width, this.height); let frame = this.ctx1.getImageData(0, 0, this.width, this.height); let l = frame.data.length / 4; for (let i = 0; i < l; i++) { let r = frame.data[i * 4 + 0]; let g = frame.data[i * 4 + 1]; let b = frame.data[i * 4 + 2]; if (g > 100 && r > 100 && b < 43) frame.data[i * 4 + 3] = 0; } this.ctx2.putImageData(frame, 0, 0); return; } https://developer.mozilla.org/en/manipulating_video_using_canvas 16
  • 17. Tranformations State: Canvas states are stored on a stack save()restore() translate(x, y) rotate(angle) scale(x, y) transform(m11, m12, m21, m22, dx, dy) setTransform(m11, m12, m21, m22, dx, dy) 17
  • 18. transform example var i = 0; var sin = Math.sin(Math.PI/6); var cos = Math.cos(Math.PI/6); ctx.translate(200, 200); var c = 0; for (i; i <= 12; i++) { c = Math.floor(255 / 12 * i); ctx.fillStyle = quot;rgb(quot; + c + quot;,quot; + c + quot;,quot; + c + quot;)quot;; ctx.fillRect(0, 0, 100, 10); ctx.transform(cos, sin, -sin, cos, 0, 0); } ctx.setTransform(-1, 0, 0, 1, 200, 200); ctx.fillStyle = quot;rgba(255, 128, 255, 0.5)quot;; ctx.fillRect(0, 50, 100, 100); 18
  • 19. 2D -> Triangles -> 3D http://kawanet.blogspot.com/2009/02/incredible-javascriptcanvas-3d-demos.html 19
  • 21. Local Storage •  Provides a way to store data client side •  Useful for many classes of applications, especially in conjunction with offline capabilities •  2 main APIs provided: a database API (exposing a SQLite database) and a structured storage api (key/value pairs) •  Implementation under way in Google Chrome, already working in WebKit. db.transaction(function(tx) { tx.executeSql('SELECT * FROM MyTable', [], function(tx, rs) { for (var i = 0; i < rs.rows.length; ++i) { var row = rs.rows.item(i); DoSomething(row['column']); } }); }); 21
  • 22. Workers •  Native apps have threads and processes •  Workers provide web apps with a means for concurrency •  Can offload heavy computation onto a separate thread so your app doesn’t block •  Come in 3 flavors –  Dedicated (think: bound to a single tab) –  Shared (shared among multiple windows in an origin) –  Persistent (run when the browser is “closed”) •  Implementation is ongoing in WebKit and Google Chrome 22
  • 23. Application Cache •  Application cache solves the problem of how to make it such that one can load an application URL while offline and it just “works” •  Web pages can provide a “manifest” of files that should be cached locally •  These pages can be accessed offline •  Enables web pages to work without the user being connected to the Internet •  Implemented in WebKit, implementation ongoing in Google Chrome 23
  • 24. <video> •  Allows a page to natively play video –  No plugins required –  As simple as including an image - <video src=“video.mp4”> •  Has built-in playback controls –  Stop –  Pause –  Play •  Scriptable, in case you want your own dynamic control •  Chrome will support MP4 (H.264 + AAC), and Ogg (Theora + Vorbis) •  Implemented in WebKit, implementation under way in Google Chrome (now in dev channel). 24
  • 26. Rich Text Editing •  contentEditable implementations vary widely between browsers •  Behaviour for simple things, such as selection ranges, is not well defined in any spec •  Currently helping to define a specification for existing behaviour, as well as improvements for new functionality –  Specify exactly what selections select –  Add execCommand to additional events where it makes sense –  getData(‘text/html’) for paste and drop events •  No reason web apps should have to ship 200KB to do rich text editing 26
  • 27. Notifications •  Alert() dialogs are annoying, modal, and not a great user experience •  Provide a way to do less intrusive event notifications •  Work regardless of what tab / window has focus •  Provide more flexibility than an alert() dialog •  Not currently in any standard, we’re currently prototyping 27
  • 28. Web Sockets •  Allows bi-directional communication between client and server in a cleaner, more efficient form than hanging gets (or a series of XMLHttpRequests) •  Specification is under active development 28
  • 29. 3D APIs •  Canvas 3D, developed by Mozilla, is a command-mode API that allows developers to make OpenGL calls via JavaScript •  O3D is an effort by Google to develop a retain-mode API where developers can build up a scene graph and manipulate via JavaScript, also hardware accelerated •  Discussion on the web and in standards bodies to follow 29
  • 31. And So Much More… •  There’s much work that we haven’t even started yet. •  Some is well defined –  Geolocation –  Forms2 –  Datagrid •  Many things less defined –  P2p APIs –  Better drag + drop support –  Webcam / Microphone access –  O/S integration (protocol / file extension handlers and more) –  Managing uploads, “blobs”, file APIs 31 –  And more
  • 32. Our Work in a Nutshell <video> hits dev channel, with Additional APIs local storage, appcache, and (TBD) to better workers following support web applications Web sockets, more CSS3 support hits Polish work dev channel on above 32
  • 33. Resources •  Spec http://whatwg.org/html5 •  http://code.google.com/chromium/ •  http://code.google.com/apis/o3d/ •  All demos at http://delicious.com/chanezon/openweb+demos •  https://developer.mozilla.org/en/Canvas_tutorial •  http://dev.opera.com/articles/view/html-5-canvas-the-basics/ •  http://blog.mozbox.org/tag/demo •  https://bespin.mozilla.com/ Google Confidential 33
  • 34. “it is Google which is driving web standards forward. That is why we at Zoho are firmly aligned with them, even if they are our primary competitor. We believe in an open web, there is plenty of opportunity for all of us. Could Google abuse its position? Well, I am sure they understand karma.” Microsoft Silverlight vs Google Wave: Why Karma Matters | Zoho Blogs Sridhar Vembu, CEO of AdventNet (Zoho)
  • 36. Q&A