What's new in HTML5, CSS3 and JavaScript, James Pearce

James Pearce@jamespearce

WHAT’S NEW INHTML5, CSS3 & JAVASCRIPT?

Thursday, November 3, 11

2011 HAS BEEN ANEXCITING YEAR FOR

HTML5


EVERYTHINGEXCITING IN 2011

HAS BEEN CALLED HTML5



CSS JS


Where is all this good stuff coming from?


WHATWG





localStorage

WebSQL

gradient

font-face

CSS Text

GeoLocation

canvastype=camera

@page

@mediamanifest

accelerometer

keyframe

transform<video>






JavaScript

Semantic HTML

CSS Styling & Layout

WebFont Video Audio Graphics

Workers & Parallel

Processing

File SystemsDatabases

App CachesCross-AppMessaging

Device Access

Camera

Location

Contacts

SMS

Orientation

Gyro

Network

HTTP

AJAX

Events

Sockets

SSL


State ofthe Art



HTML5 Semantics


<!DOCTYPE html><html>

<head>

<script src="app.js"></script>

<link rel="stylesheet" href="theme.css">

Document Structure


<header>

<footer>

<nav> <aside>

<section><article>

<article>

Document Structure



Input Types

<form> <input type='date' /> <input type='time' /> <input type='datetime' /></form>


Opera...

<input type='datetime' />


Input Types

numberrangecolorsearchtelurlemail

datetimedatetimemonth weekdatetime-local


iOS5 Support


Progress and meters

<progress max="10"></progress>

<progress max="10" value="6"></progress>


Progress and meters

<meter max="10" value="7"></meter>

<meter min="5" max="10" value="7"></meter>


Progress and meters

<meter max="10" high="8" value="1"></meter>

<meter max="10" high="8" value="9"></meter>


Data Attributes

<div id='el' data-smell='fish'></div>

<script> var el = document.getElementById('el'); console.log(el.dataset);</script>


Data Attributes

<script> el.dataset.generalAppearance = 'slimy'; console.log(el.outerHTML);</script>


Contenteditable

<div contenteditable=""></div>


Contenteditable

<!doctype html><html> <head> <style contenteditable=""> html {} head, style { display:block; font-size:2em; } </style> </head></html> Demo


http://sencha/contenteditable.html

http://sencha/contenteditable.html

Multimedia


Video

<video width="320" height="240" controls=""> <source src="movie.mp4" type="video/mp4" /> <source src="movie.ogg" type="video/ogg" /> Your browser does not support the video tag.</video>


Audio

<audio autoplay="" controls=""> <source src="horse.ogg" type="audio/ogg" /> <source src="horse.mp3" type="audio/mp3" /> Your browser does not support the audio element.</audio>


Connectivity


Web Sockets

var socket = new WebSocket( 'ws://echo.websocket.org');

socket.onopen = function(e) { socket.send('Echo... echo...');};

socket.onmessage = function(e) { console.log(e.data);};


Server-sent Events

var source = new EventSource('/status.php');

source.onmessage = function (e) { console.log(e.data);};

data: My message\n\n

data: Line 1\ndata: Line 2\n\n


Performance &Integration


Web Workers

var worker = new Worker('task.js');worker.onmessage = function(e) { alert('Worker says ' + e.data);};worker.postMessage();

// task.js:self.onmessage = function(e) { // calculate Fibonacci series or something self.postMessage("Answer is...");};


Navigation Timing

<script> function onLoad() { console.log( new Date().getTime() - performance.timing.navigationStart ); }</script>

<body onload="onLoad()"> ...



History API

window.history.pushState( {key:"value"}, "Title", "/newpage.html");

window.onpopstate = function(e) { console.log(e.state);};

Demo


https://github.com/jamesgpearce/project1015

https://github.com/jamesgpearce/project1015

Drag and Drop

<div draggable="true">Apple</div><div draggable="true">Orange</div><div draggable="true">Pear</div>

<div id='basket'>Basket: </div>


Drag and Dropwindow.ondragstart = function (e) { e.dataTransfer.setData( 'text/plain', e.target.innerHTML );};

var basket = document.getElementById('basket');basket.ondragover = function (e) { e.preventDefault();};basket.ondrop = function (e) { e.target.innerHTML += e.dataTransfer.getData('text/plain') + ' ';};

DemoThursday, November 3, 11

http://sencha/dd.html

http://sencha/dd.html

Offline & Storage


Web Storage

sessionStorage.setItem("user", "John");console.log(sessionStorage.getItem("user"));

localStorage.setItem("prefs", {a:'b'});console.log(localStorage.getItem("prefs"));

localStorage.removeItem("prefs");localStorage.clear();


Web SQL


Indexed DB

indexedDB.open('my_database')

db.createObjectStore('my_store', { keyPath: 'record_id'});

store.put({ record_id: 123, name: 'My record'});store.get(123);


Indexed DB

store.openCursor().onsuccess = function(e) {

var cursor = e.target.result;

if (cursor) { console.log(cursor.value); cursor.continue(); } else { console.log('Got them all'); }

};


File API

<input type="file" id="picker">

<script> var picker = document.getElementById('picker'); picker.onchange = function (e) { console.log(picker.files[0]); };</script>


App cache

CACHE MANIFEST# v556

CACHE:theme.cssapp/app.js

NETWORK:login.phphttp://api.twitter.com

FALLBACK:/login.php /static.html


3D, Graphics, Effects


Web GL

Demo


http://mrdoob.github.com/three.js/examples/webgl_materials_normalmap2.html

http://mrdoob.github.com/three.js/examples/webgl_materials_normalmap2.html

CSS3 Styling


The clichés

border-radius: 5px 10px;

text-shadow: -1px -1px #fff, 1px 1px #333;

box-shadow: 0 0 5px 5px #888;

DemoThursday, November 3, 11

http://www.viget.com/uploads/file/boxshadows/

http://www.viget.com/uploads/file/boxshadows/

Element.classList

<div id='el' class='extjs'></div>

var el = document.getElementById('el');el.classList.remove('extjs'); el.classList.add('sencha'); el.classList.toggle('rocks');el.classList.contains('rockstars');

console.log(el.classList);


Element.matchesSelector

<div id='el' class='sencha'></div>

<script> var el = document.getElementById('el'); console.log(el.matchesSelector('.sencha')); console.log(el.matchesSelector('#extjs'));</script>


window.matchMedia

@media screen and (min-width: 400px) { * { font-family: sans-serif }}

window.matchMedia( "screen and (min-width: 400px)")


Transformations& Translations

Demo


http://dev.sencha.com/animator/demos/kickfu/

http://dev.sencha.com/animator/demos/kickfu/

CSS Shaders

div.waving { filter: custom(url('wave.vs'), 20 20, phase 0, amplitude 50 );}


CSS Shaders

div.waving { filter: grayscale(1.0) custom( url('book.vs') url('page.fs') );}

Demo


http://www.youtube.com/watch?v=NZRqnohI3m4

http://www.youtube.com/watch?v=NZRqnohI3m4

Device Access


Geolocation&

Accelerometer


Compass

window.ondeviceorientation = function(e) { console.log(e.webkitCompassHeading); }


Media Capture

<input type="file" id="picker" accept="image/*" capture='camera'>

// camcorder// microphone// filesystem


Media Capture

<input type="file" id="picker" accept="image/*" />

<script> var picker = document.getElementById('picker'); picker.onchange = function (e) { var image = picker.files[0]; image.getFormatData( function (data) { console.write(data); } ); };</script>


Everything Else

:-(


ES 5


Object.createObject.definePropertyObject.definePropertiesObject.getPrototypeOfObject.keys

Object.sealObject.freezeObject.preventExtensionsObject.isSealedObject.isFrozenObject.isExtensible

Object


arr.indexOfarr.lastIndexOfarr.everyarr.somearr.forEacharr.maparr.filterarr.reduce

Array.prototype


What’s coming down the track?


ES.6‘.next’

‘Harmony’


Block Scope

for (...) { let myvar='scoped'; const myconst=42; function myfunc() { //... }}

console.log(myvar); //RefError


Destructuring

var [x, y] = [1, 2];

var {a:x, b:y} = {a:1, b:2};

function myfunc( {a:x, b:y} ) {...}myfunc({a:1, a:2});


Default Arguments

function myfunc(a=1, b=2) { console.log(a); console.log(b);}

myfunc();


Rest

function myfunc(a, ...b) { console.log(a);

b.forEach(function (i) { console.log(b); });

}

myfunc(1, 2, 3, 4);


function myfunc(a, b, c, d) { console.log(a); //...}

var args = [2, 3, 4];

myfunc(1, ...args);

Spread


Modules

module MyModule { export function a() {}; export function b() {};}

import MyModule.*;

module Ext = require('http://../ext.js');


Classes

class MyClass { constructor(a, b) { private a = a; //... } myMethod() { //... }}


IteratorsGenerators

Comprehensions


Device Access


CameraMicrophone

ContactsCalendar

MessagingTelephony

NFC...


Funky Stuff


Web ComponentsShadow DOM

Model Driven Views


What does thismean for you?


http://blogs.msdn.com/b/ie/https://developer.mozilla.org

http://chromestatus.com

Stay on top of change


CanIUseBrowserScope

ModernizrDeviceAtlas

HTML5 Rocks

Stay on top of diversity



Capabilities & specifications

Supp

ort 100%

Browsers



Capabilities & specifications

100%

Polyfills

Supp

ort

Frameworks Browsers


...to do amazing things!

Relish the opportunity...


THANKS

James Pearce@jamespearce


Technology

What's new in HTML5, CSS3 and JavaScript, James Pearce