HTML 5 and webOS Development

HTML 5 & webOS

Offline web apps, Web Database, <canvas>, <audio>, <video>

HTML 5

Not just a markup language

Family of related specs

WebKit

Rendering engine of Safari, Google Chrome, etc.

Supports many HTML 5 & CSS 3 features

webOS

Apps built with HTML, CSS, and JavaScript

Uses WebKit rendering engine

Offline web apps

Provides a cache for web app assets (images, javascript, stylesheets, etc.)

manifest=""

New attribute on the <html> element points at your app cache manifest

text/cache-manifest

CACHE MANIFEST
# Uses shell-style comments
offline.html
offline.css
offline.js

Example

Web Database

Synchronous & asynchronous API for client-side SQL storage 

var db = null;
try {
 db = window.openDatabase("preDevCamp",
  "1.0",
  "preDevCamp San Diego sample database",
  4*1024);
 if (!db) alert("Can't open DB.");
} catch (e) alert("Web Database failure!");

db.transaction(function(tx) {
 tx.executeSql("SELECT * FROM comments",
  [],
  function(tx, result) {
   for (var i=0;i<result.rows.length;i++) {
    alert(result.rows.item(i)['comment']);
   }
 });
});

Example

<canvas>

Immediate-mode 2D bitmap graphics.

var ctx = canvas.getContext('2d');
ctx.lineWidth = 1;
ctx.fillStyle = '#fff';
ctx.strokeStyle = '#000';
ctx.beginPath(); ctx.moveTo(10, 400);
ctx.lineTo(10, 200); ctx.lineTo(110, 100);
ctx.lineTo(210, 200); ctx.lineTo(210, 400);
ctx.lineTo(10, 400);
ctx.fill(); ctx.stroke();
ctx.closePath();

Warning

webOS supports a subset of the Canvas API.

Example

Showing off my mad drawing skilz

<audio> & <video>

In-browser media playback.

Markup

<audio src="hello.mp3"></audio>

or JavaScript API

var beep = new Audio("hello.mp3");
beep.play();
<video poster="screencap.png">
  <source src="hello.mp4"
          type="video/mp4" />
  <source src="hello.ogg"
          type="video/ogg" />
</video>

Questions?

http://tess.oconnor.cx/2009/preDevCamp/

CC BY-SA 3.0