Date post: | 12-May-2015 |
Category: |
Technology |
Upload: | sencha |
View: | 5,489 times |
Download: | 1 times |
James Pearce@jamespearce
WHAT’S NEW INHTML5, CSS3 & JAVASCRIPT?
Thursday, November 3, 11
2011 HAS BEEN ANEXCITING YEAR FOR
HTML5
Thursday, November 3, 11
EVERYTHINGEXCITING IN 2011
HAS BEEN CALLED HTML5
Thursday, November 3, 11
Thursday, November 3, 11
CSS JS
Thursday, November 3, 11
Where is all this good stuff coming from?
Thursday, November 3, 11
WHATWG
Thursday, November 3, 11
Thursday, November 3, 11
Thursday, November 3, 11
Thursday, November 3, 11
localStorage
WebSQL
gradient
font-face
CSS Text
GeoLocation
canvastype=camera
@page
@mediamanifest
accelerometer
keyframe
transform<video>
Thursday, November 3, 11
Thursday, November 3, 11
Thursday, November 3, 11
Thursday, November 3, 11
Thursday, November 3, 11
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
Thursday, November 3, 11
State ofthe Art
Thursday, November 3, 11
Thursday, November 3, 11
HTML5 Semantics
Thursday, November 3, 11
<!DOCTYPE html><html>
<head>
<script src="app.js"></script>
<link rel="stylesheet" href="theme.css">
Document Structure
Thursday, November 3, 11
<header>
<footer>
<nav> <aside>
<section><article>
<article>
Document Structure
Thursday, November 3, 11
Thursday, November 3, 11
Input Types
<form> <input type='date' /> <input type='time' /> <input type='datetime' /></form>
Thursday, November 3, 11
Opera...
<input type='datetime' />
Thursday, November 3, 11
Input Types
numberrangecolorsearchtelurlemail
datetimedatetimemonth weekdatetime-local
Thursday, November 3, 11
iOS5 Support
Thursday, November 3, 11
Progress and meters
<progress max="10"></progress>
<progress max="10" value="6"></progress>
Thursday, November 3, 11
Progress and meters
<meter max="10" value="7"></meter>
<meter min="5" max="10" value="7"></meter>
Thursday, November 3, 11
Progress and meters
<meter max="10" high="8" value="1"></meter>
<meter max="10" high="8" value="9"></meter>
Thursday, November 3, 11
Data Attributes
<div id='el' data-smell='fish'></div>
<script> var el = document.getElementById('el'); console.log(el.dataset);</script>
Thursday, November 3, 11
Data Attributes
<script> el.dataset.generalAppearance = 'slimy'; console.log(el.outerHTML);</script>
Thursday, November 3, 11
Contenteditable
<div contenteditable=""></div>
Thursday, November 3, 11
Contenteditable
<!doctype html><html> <head> <style contenteditable=""> html {} head, style { display:block; font-size:2em; } </style> </head></html> Demo
Thursday, November 3, 11
Multimedia
Thursday, November 3, 11
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>
Thursday, November 3, 11
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>
Thursday, November 3, 11
Connectivity
Thursday, November 3, 11
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);};
Thursday, November 3, 11
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
Thursday, November 3, 11
Performance &Integration
Thursday, November 3, 11
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...");};
Thursday, November 3, 11
Navigation Timing
<script> function onLoad() { console.log( new Date().getTime() - performance.timing.navigationStart ); }</script>
<body onload="onLoad()"> ...
Thursday, November 3, 11
Thursday, November 3, 11
History API
window.history.pushState( {key:"value"}, "Title", "/newpage.html");
window.onpopstate = function(e) { console.log(e.state);};
Demo
Thursday, November 3, 11
Drag and Drop
<div draggable="true">Apple</div><div draggable="true">Orange</div><div draggable="true">Pear</div>
<div id='basket'>Basket: </div>
Thursday, November 3, 11
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
Thursday, November 3, 11
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();
Thursday, November 3, 11
Web SQL
Thursday, November 3, 11
Indexed DB
indexedDB.open('my_database')
db.createObjectStore('my_store', { keyPath: 'record_id'});
store.put({ record_id: 123, name: 'My record'});store.get(123);
Thursday, November 3, 11
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'); }
};
Thursday, November 3, 11
File API
<input type="file" id="picker">
<script> var picker = document.getElementById('picker'); picker.onchange = function (e) { console.log(picker.files[0]); };</script>
Thursday, November 3, 11
App cache
CACHE MANIFEST# v556
CACHE:theme.cssapp/app.js
NETWORK:login.phphttp://api.twitter.com
FALLBACK:/login.php /static.html
Thursday, November 3, 11
3D, Graphics, Effects
Thursday, November 3, 11
Web GL
Demo
Thursday, November 3, 11
CSS3 Styling
Thursday, November 3, 11
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
<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);
Thursday, November 3, 11
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>
Thursday, November 3, 11
window.matchMedia
@media screen and (min-width: 400px) { * { font-family: sans-serif }}
window.matchMedia( "screen and (min-width: 400px)")
Thursday, November 3, 11
Transformations& Translations
Demo
Thursday, November 3, 11
CSS Shaders
div.waving { filter: custom(url('wave.vs'), 20 20, phase 0, amplitude 50 );}
Thursday, November 3, 11
CSS Shaders
div.waving { filter: grayscale(1.0) custom( url('book.vs') url('page.fs') );}
Demo
Thursday, November 3, 11
Device Access
Thursday, November 3, 11
Geolocation&
Accelerometer
Thursday, November 3, 11
Compass
window.ondeviceorientation = function(e) { console.log(e.webkitCompassHeading); }
Thursday, November 3, 11
Media Capture
<input type="file" id="picker" accept="image/*" capture='camera'>
// camcorder// microphone// filesystem
Thursday, November 3, 11
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>
Thursday, November 3, 11
Everything Else
:-(
Thursday, November 3, 11
ES 5
Thursday, November 3, 11
Object.createObject.definePropertyObject.definePropertiesObject.getPrototypeOfObject.keys
Object.sealObject.freezeObject.preventExtensionsObject.isSealedObject.isFrozenObject.isExtensible
Object
Thursday, November 3, 11
arr.indexOfarr.lastIndexOfarr.everyarr.somearr.forEacharr.maparr.filterarr.reduce
Array.prototype
Thursday, November 3, 11
What’s coming down the track?
Thursday, November 3, 11
ES.6‘.next’
‘Harmony’
Thursday, November 3, 11
Block Scope
for (...) { let myvar='scoped'; const myconst=42; function myfunc() { //... }}
console.log(myvar); //RefError
Thursday, November 3, 11
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});
Thursday, November 3, 11
Default Arguments
function myfunc(a=1, b=2) { console.log(a); console.log(b);}
myfunc();
Thursday, November 3, 11
Rest
function myfunc(a, ...b) { console.log(a);
b.forEach(function (i) { console.log(b); });
}
myfunc(1, 2, 3, 4);
Thursday, November 3, 11
function myfunc(a, b, c, d) { console.log(a); //...}
var args = [2, 3, 4];
myfunc(1, ...args);
Spread
Thursday, November 3, 11
Modules
module MyModule { export function a() {}; export function b() {};}
import MyModule.*;
module Ext = require('http://../ext.js');
Thursday, November 3, 11
Classes
class MyClass { constructor(a, b) { private a = a; //... } myMethod() { //... }}
Thursday, November 3, 11
IteratorsGenerators
Comprehensions
Thursday, November 3, 11
Device Access
Thursday, November 3, 11
CameraMicrophone
ContactsCalendar
MessagingTelephony
NFC...
Thursday, November 3, 11
Funky Stuff
Thursday, November 3, 11
Web ComponentsShadow DOM
Model Driven Views
Thursday, November 3, 11
What does thismean for you?
Thursday, November 3, 11
http://blogs.msdn.com/b/ie/https://developer.mozilla.org
http://chromestatus.com
Stay on top of change
Thursday, November 3, 11
CanIUseBrowserScope
ModernizrDeviceAtlas
HTML5 Rocks
Stay on top of diversity
Thursday, November 3, 11
Stay on top of change
Capabilities & specifications
Supp
ort 100%
Browsers
Thursday, November 3, 11
Stay on top of change
Capabilities & specifications
100%
Polyfills
Supp
ort
Frameworks Browsers
Thursday, November 3, 11
...to do amazing things!
Relish the opportunity...
Thursday, November 3, 11
THANKS
James Pearce@jamespearce
Thursday, November 3, 11