HTML5 & ChromeOS
A true friendship

Ido Green @greenido   http://plus.ly/greenido
Get the slides at bit.ly/html5LiveLondon
Oct 19, 2011

Agenda

HTML5 & CSS3 Support

2008

http://html5readiness.com/

HTML5 & CSS3 Support

2011

http://html5readiness.com/
When can we start using HTML5?
Today!
But how can I use it safely?
Feature Detection
You are using feature detection, right? right?
http://modernizr.com
Okay, how about older browsers?
PolyFills - When you need them

Good To Go

Semantic Tags, doctype, charset, quotes & more

<!doctype html>
<html lang="en">
  <head>
    <title>page title</title>
    <meta charset=utf-8>
    <style>
      body { background-color: #ccc; }
    </style>
  </head>
  <body class=myClass>
    <article>Hello, world!</article>
    <input type=text required>
  </body>
  <script>
    console.log('Oh, hello there!');
  </script>
</html>

Form Elements

<input type="text" required />
<input type="email" value="some@email.com" />
<input type="date" min="2010-08-14" max="2011-08-14" 
  value="2010-08-14"/>
<input type="range" min="0" max="50" value="10" />
<input type="search" results="10" placeholder="Search..." />
<input type="tel"  placeholder="(555) 555-5555"
   pattern="^\(?\d{3}\)?[-\s]\d{3}[-\s]\d{4}.*?$" />
<input type="color" placeholder="e.g. #bbbbbb" />
<input type="number" step="1" min="-5" max="10" value="0" />
Playground For Fields

Data Attributes

<div id="out" data-double="rainbow" data-freak="out">
// Add new data attributes via JS.
var el = document.querySelector('#out');
el.setAttribute('data-foo', 'bar');

var html = [];
for (var key in el.dataset) {
  html.push(key, ': ', el.dataset[key], '<br>');
}

el.innerHTML = html.join('');

Output:

double: rainbow
freak: out

Geo Location

if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(function(position) {
    var latLng = new google.maps.LatLng(
        position.coords.latitude, position.coords.longitude);
    var marker = new google.maps.Marker({position: latLng, map: map});
    map.setCenter(latLng);
  }, errorHandler);
}

Speech Input

<input type="text" x-webkit-speech />
function startSearch(event) {
  if (event.target.results.length > 1) {
    var second = event.target.results[1].utterance;
    document.getElementById("second_best").value = second;
  }
  event.target.form.submit();
}

Canvas

<canvas id="canvas" width="838" height="220"></canvas>
<script>
  var canvasContext = 
    document.getElementById("canvas").getContext("2d");
  canvasContext.fillRect(250, 25, 150, 100);
  
  canvasContext.beginPath();
  canvasContext.arc(450, 110, 100, Math.PI * 1/2, Math.PI * 3/2);
  canvasContext.lineWidth = 15;
  canvasContext.lineCap = 'round';
  canvasContext.strokeStyle = 'rgba(255, 127, 0, 0.5)';
  canvasContext.stroke();
</script>

Gradients

background: linear-gradient(top, rgba(206,220,231,1) 0%, 
  rgba(89,106,114,1) 100%);
background: radial-gradient(center, 100px 100px, red, black);

http://colorzilla.com/gradient-editor/

Transitions & Transforms

div {
  margin-left: -2100px;
  -webkit-transform: scale(0.5);
  -webkit-transition: all 800ms ease-in; 
     -moz-transition: all 800ms ease-in; 
       -o-transition: all 800ms ease-in; 
          transition: all 800ms ease-in;
}

.div:hover {
  margin-left: auto;
  -webkit-transform: scale(1.0);
}

Save Data On The Client Side

Application Cache

<html manifest="cache.appcache">

cache.appcache:

CACHE MANIFEST
# version 1.0.0

CACHE:
/html5/src/logic.js
/html5/src/style.css
/html5/src/background.png

NETWORK:
*

Web Storage

saveButton.addEventListener('click', function () {
  window.localStorage.setItem('value', area.value);
  window.localStorage.setItem('timestamp', (new Date()).getTime());
}, false);
textarea.value = window.localStorage.getItem('value');

IndexedDB

Will eventually replace WebSQL as an object store, for storing significant quantities of structured JSON data.

var idbRequest = window.indexedDB.open('Database Name');
idbRequest.onsuccess = function(event) {
  var db = event.result;
  var transaction = db.transaction([], IDBTransaction.READ_ONLY);
  var curRequest = 
    transaction.objectStore('ObjectStore Name').openCursor();
  curRequest.onsuccess = ...;
};

How To Use IndexedDB

Web Workers

index.html

function startWorker(settings) {
  var myWorker = new Worker('scripts/worker.js');
  myWorker.addEventListener("message", workerListener, false);
  myWorker.postMessage(settings);
}

worker.js

self.addEventListener('message', function(e) {
  doSomeWork();
};

function doSomeWork() {
  importScripts('http://url?callBack=handleWork');
}

function handleWork() {
  postMessage(result);
}

ChromeOS

Intro

  1. Chrome - a browser
  2. Chrome OS - an operating system
  3. Chromebook - a netbook
The Power Of The Cloud
+
Desktop Richness
Modern Web Apps

Always Connected

More Improvments

Designed from the ground up with security in mind

chrome.fileBrowserHandler

Use chrome.fileBrowserHandler module to extend the Chrome OS file browser.


File API - Manifest

Declare the "fileBrowserHandler" permission in the extension manifest, and use the "file_browser_handlers" 

{
  "name": "Upload to flickr",
  ...
  "file_browser_handlers": [
  {
    "id": "upload",
    "default_title": "Save to flickr", // What the button will display
    "file_filters": [
    "filesystem:*.jpg",
    "filesystem:*.jpeg",
    "filesystem:*.png"
    ]
  }
  ],
  "permissions" : [
    "fileBrowserHandler"
  ],
  "icons": { 
    "16": "icon16.png",
    "48": "icon48.png",
    "128": "icon128.png"
  }
}

File Uploader JS Example 

uploadFile: function(file) {
  var pro1 = document.querySelector('#pro1');
  var progressBar =  pro1.querySelector('progress');
  var formData = new FormData();
  formData.append('file', file);

  var xhr = new XMLHttpRequest();
  xhr.open('POST', this.uploadServer, true);

  xhr.onload = function(e) {
    if (this.status == 200) {
        console.log(this.response);
        alert("The image is safe in Flickr " + this.response);
    }
};

xhr.onerror = function(e) {
    console.log(this, this.status, this.responseText, 
    this.getAllResponseHeaders())
};

xhr.send(formData);
},
...

Tools & Resources

<meta http-equiv="X-UA-Compatible" content="chrome=1">

ChromeStatus.com

updates.HTML5Rocks.com

Resources

Developer Guides & Tutorials

Tools & Libraries

Thank you!

Questions?

Ido Green
@greenido
+greenido

greenido.wordpress.com