Oswald Campesato

Speaking Sessions

• HTML5 (Session #1): CSS3 and Cool New Features

  11:15 AM Saturday   Room: 1501

  If you've dabbled in HTML5 and you're ready for more, then this year's "Working With HTML5" sessions might help you reach the next level of knowledge. We'll explore HTML5 through demos on mobile devices and desktops, and also look at code samples, with excerpts from two HTML5 books (2012 and 2013) and links to some of my open source projects. Session #1 starts with a demo of pure CSS3 3D animation effects on multiple devices (an iPad3, an Asus Prime Android ICS tablet, a Sprint S 4G phone with Android ICS, and a Macbook). We'll discuss the key code concepts, and then you'll see examples of CSS3 and jQuery that create unusual animation effects. You'll see demos of CSS Custom Filters (aka CSS Shaders prior to 09/24/2012), which create effects that were previously only possible in WebGL, and at least three related open source projects (CSS3, jQuery/CSS3, and CSS custom filters) provide additional code samples. Finally, we'll look at some demos of CSS Exclusions and CSS Flow Regions (time permitting), which are two recent features of CSS3. A basic understanding of HTML and CSS, and some jQuery can also be useful for this session, which wraps up with a raffle of an HTML5 book. Please note that this session is similar to my presentation during OWC (07/2012) at PayPal. Supplemental bonus: spherical coordinates and cylindrical coordinates both explained in under two minutes (don't be afraid). Recent book: http://www.amazon.com/HTML5-Canvas-CSS3-Graphics-Primer/dp/1936420341 upcoming book: http://www.merclearning.com/titles/jQuery_CSS3_HTML5_Mobile.html

• HTML5 (Session #2): HTML5 Canvas, Media, and Mobile

  1:45 PM Saturday   Room: 1501

  The demos in Session #2 cover a lot of ground: 2D shapes in HTML5 Canvas, HTML5 WebSockets updating a Canvas-based 3D bar chart with real time data, inverting JPG pixels in a Canvas element and examples of some "smoothing functions" for softening images. You'll also see examples of Canvas graphics combined with CSS3-based 3D effects that create vivid visual effects. We'll look at a real-time Canvas-based graphical visualization of an audio file, and then see a video playing inside an HTML5 Canvas element where you can "obliterate" the video with your mouse. The last demo is a fusion of WebGL, Web Sockets, Canvas, CSS3, Javascript, Flash, and Web Audio APIs. If there's enough time, we'll take a quick look at a data visualization toolkit called D3, followed by a demo that uses jQuery Mobile on an iPad3 and an Android tablet. Three related open source projects (HTML5 Canvas, Canvas/Node.js, and Easel.js) provide additional code samples. Basic knowledge of HTML and CSS is helpful for this session, which wraps up with a raffle of a recent HTML5 book.

• HTML5 (Session #3): HTML5 WebSockets, SPDY, SSE, and NodeJS

  3:30 PM Saturday   Room: 1501

  Session #3 delves into WebSockets and SPDY (what they are and what they aren't), SSE, and Node.js, and also when and why you would use these technologies. You'll see a demo of a jQuery client that interacts with a WebSockets server, and you'll find out how to set up a WebSocket server on your own laptop. Time permitting, you'll see a demo of a jQuery client that communicates with a Node.js server, and then a multi-user program using HTML5 Canvas in a web browser and NodeJS as a server. If we have time we'll also explore some of the alternatives to NodeJS. Some knowledge of CSS3 and Canvas (covered in sessions #1 and #2) is helpful for this session, which wraps up with a raffle of my first HTML5 book. NOTE: currently the system does not allow me to upload the slide deck, so if you're interested in getting the slides, please send me email and I will send you the slide deck.