Preflight

Developing With HTML5

Arne Roomann-Kurrik
Mihai Florin Ionescu
May 19, 2010

View live notes and ask questions about
this session on Google Wave:

View the source for this presentation:

This presentation was built using HTML5:

  • 637 HTML elements
  • 903 lines of (non-library) JavaScript
  • 119 CSS rules

Press → to advance.

Agenda
  • The Road to HTML5
  • HTML5 and Google Chrome
  • HTML5 Primer + Building an HTML5 Application
  • Demos
  • Key Take-Aways
  • Developer Resources
  • Q&A
Timeline of Web Development
Google Chrome: Where are we now?
  • 70+ million users
  • 28 stable releases or updates
  • 300% JavaScript performance improvement
  • HTML5 support for web application development
HTML5 - Making the Web More Powerful
Demo: Introducing the Chromabrush app
Section 1

The canvas element

Low level control over rendering

Coding on the Canvas
var canvas = document.getElementById("canvas2d");
var context = canvas.getContext("2d");
context.moveTo(x1, y1);
context.lineTo(x2, y2);
context.arc(x, y, r, Math.PI * 1/2, Math.PI * 3/2, false);
var id = context.getImageData(0, 0, width, height).data;
var r = id[0], g = id[1], b = id[2], a = id[3] / 255;
context.lineWidth = 20;
context.lineCap = "round";
context.strokeStyle = "rgba(255, 0, 0, 0.7)";
context.stroke();
Drawing on the Canvas
Canvas animation
Canvas 3D (WebGL)
<canvas id="canvas"></canvas>
<script>
var gl = document.getElementById("canvas").getContext("experimental-webgl");
gl.viewport(0, 0, canvas.width, canvas.height);
</script>
Demo: Canvas in Chromabrush
Section 2

Multimedia

A richer experience with sound and video

Going Multimedia with Audio and Video

Audio

<audio src="sound.ogg" controls></audio>
<script>
  document.getElementById("audio").muted=false;
</script>

Video

<video src='movie.webm' autoplay controls ></video>
<script>
  document.getElementById("video").play();
</script>
Video as a First Class Element
Demo: Multimedia in Chromabrush
Section 3

Processing

Storing and processing complex data

Storing Data on the Client
var loadedCount = parseInt(localStorage['loadedCount'] || '0') + 1;
localStorage['loadedCount'] = loadedCount;
document.getElementById('displayLoadedCount').innerHTML = loadedCount;

You've viewed this presentation on this computer X times.

Other Storage Options

Web SQL DB:

var db = window.openDatabase("Database Name", "Database Version");
db.transaction(function(tx) {
  tx.executeSql("SELECT * FROM author", [], successCallback, errorCallback);
});

Other:


Indexed DB

File API

App Cache
Working Hard with Worker Threads
main.js:
  var worker = new Worker(‘extra_work.js');
  worker.onmessage = function (event) { alert(event.data); };

extra_work.js:
  postMessage(some_data);

Paint here

Difference

Demo: Crunching Data in Chromabrush
Section 4

Desktop Experience

Interacting with the client Operating System

Dragging & Dropping
var elem = document.getElementById('dragElem');
elem.addEventListener('dragstart', ..., false);
elem.addEventListener('dragend', ..., false);

var target = document.getElementById('dragTarget');
target.addEventListener('dragenter', ..., false);
target.addEventListener('dragleave', ..., false);
target.addEventListener('dragover', ..., false);
target.addEventListener('drop', ..., false);
Drop here
No, drop here
Look Who's Calling - Notifications
if (window.webkitNotifications.checkPermission() == 0) {
  window.webkitNotifications.createNotification(picture, title, text).show();
} else {
  window.webkitNotifications.requestPermission();
}

This presentation currently X permission to display notifications.

Demo: Desktop Experience in Chromabrush
Section 5

CSS Enhancements

Making things look good

Transforms & Transitions
-webkit-transform: rotate(-10deg) scale(1.5);
rotate(-45deg) rotate(-15deg) rotate(15deg) rotate(45deg) rotate(75deg)
scale(0.2) scale(0.5) scaleX(0.5) scaleX(2.0) scaleY(1.5)
skewX(10deg) skewX(20deg) skewX(30deg) skewX(40deg) skewX(50deg) 
.myDiv { -webkit-transition: -webkit-transform 2s ease-in-out; }

.myDiv:hover { -webkit-transform: rotate(-20deg); }
Animations
@-webkit-keyframes pulse {
  0%   { -webkit-transform: scale(2) rotate(5deg); }
  50%  { -webkit-transform: scale(5) rotate(-15deg);  }
  100% { -webkit-transform: scale(2) rotate(5deg); }
}

div {
  -webkit-animation-name: pulse;
  -webkit-animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-direction: alternate;
}
Click Me!
Beautiful Fonts with @font-face
@font-face {
  font-family: 'Molengo';
  src: local('Molengo'), url('fonts/Molengo.otf') format('opentype');
}

div { font-family: 'Molengo'; }

Stop abusing the pulse animation or else...

Flexible Box Model
Width:
Height:
 
 
 
Now CSS supports 100% height and vertical centering!
Demo: CSS Enhancements in Chromabrush
More HTML5 Goodies to Consider
  • Application Cache
    • offline experience

  • Web Sockets
    • multi-user scenarios (e.g. whiteboard)

  • Geolocation
    • tag location information for drawings or users

Now for some exciting

real world

demos!

Demo

Thumbplay

Chris Phenner, EVP of Business Development

Mike Park, Director of Product

Demo

TweetDeck

Iain Dodsworth, CEO and Founder

Key Take-Aways
  • HTML5 gaining momentum

  • Browser innovation accelerating

  • Parity with desktop apps

  • Developer community participation essential
Q&A