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

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

@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

Orientation

Network

Events

Sockets

State ofthe Art

HTML5 Semantics

<!DOCTYPE html><html>

<head>

Document Structure

Document Structure

Input Types

Opera...

Input Types

numberrangecolorsearchtelurlemail

datetimedatetimemonth weekdatetime-local

iOS5 Support

Progress and meters

Progress and meters

Progress and meters

Data Attributes

Data Attributes

Contenteditable

Contenteditable

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

Multimedia

<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 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

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

History API

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

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

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

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

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

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

Element.classList

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

window.matchMedia

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

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

Transformations& Translations

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') );}

Device Access

Geolocation&

Accelerometer

Compass

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

Media Capture

// camcorder// microphone// filesystem

Media Capture

Everything Else

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();

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

ort 100%

Browsers

Capabilities & specifications

Polyfills

Frameworks Browsers

...to do amazing things!

Relish the opportunity...

THANKS

James Pearce@jamespearce

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

Technology

HTML5 & CSS3 : Jeux

Html5 css3 websocket

Html5 and-css3

Curso css3 - Programacion en HTML5 CSS3

HTML5? · HTML5 und CSS3 sind keine abgeschlossenen Speziﬁkationen. Die Implementation in Browsern ist noch lückenhaft. HTML5 + CSS3 + More = NEWT. HTML5 + CSS3 + More = NEWT SVG,

Découverte HTML5/CSS3

Html5 &&& css3

css3, html5

HTML5 CSS3

html5 and css3

Html5 y Css3

Html5 Css3 Js

HTML5+CSS3 01

Oficina HTML5 + CSS3

Html5 i css3

Formation HTML5/CSS3

HTML5/CSS3 @ Baidu

Html5 css3 javascript

HTML5 e CSS3

HTML5 & CSS3