html5 logo

HTML5: manage the web!

Its all about what's new in HTML5

use left,right arrow keys to navigate.

Agenda

  • Content Management
  • Performance Management
  • Storage Management
  • Status Management
  • Media Management
  • Art Management

Content Management

Content Management

  • Semantics
  • ContentEditable
  • download
  • Drag & Drop
  • Selectors
  • Shadow DOM

Semantics: Say Hello to your document structure

<section>,<article>,<nav>,<header>,<footer>,<aside>,<hgroup>
  • HTML5 gives you more semantic way organise the structure of document.
  • Most of the semantics describe the parts of document.
  • Now you can easily build complex layouts with these elements.

contenteditable: Edit me

<div contenteditable="true" >
		HTML5 Hello, World!
</div>
  • Which makes the content editable in the section
  • It provide WYSIWYG experience and rich text editing.

below section is editable

HTML5 introduces many cutting-edge features that enable developers to create apps and websites with the functionality, speed, performance, and experience of desktop applications. But unlike desktop applications, apps built on the web platform can reach a much broader audience using a wider array of devices. HTML5 accelerates the pace of your innovation and enables you to seamlessly roll out your latest work to all your users simultaneously.

download attribute: Get it simply!

<a href="/file.pdf" download="helloworld"></a>
						
  • download attribute specifies the hyperlink to be used for downloading resources.
  • It is very helpful in case of downloading generated files.

Drag & Drop: Move now

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<img id="drag1" src="img.jpg" draggable="true"ondragstart="drag(event)" >
function drop(e){
	//e.target is element and e.dataTransfer.getData() will return data
	return false;
}
  • draggable makes objects draggable and handle data on drop action.
  • Native way of drop and drop is more faster and It is ver useful to build more responsive web apps.

Selectors API: you can catch me!

var els = document.getElementsByClassName('finder');
 // Finding elements with CSS syntax (Selectors API)
els = document.querySelectorAll("p span:nth-child(odd)");
						
  • Selector API accepts css selectors.
  • This API takes the complicated process of selecting elements from the DOM and unifies it under a simple unified interface.
  • It provides two methods querySelector and querySelectorAll.

Shadow DOM: building reusable widgets.

<div>This is a brick in HTML5 </div>
var host = document.querySelector('div');
var root = host.webkitCreateShadowRoot();
root.textContent = 'HTML5 Hello, World!';
  • Shadow DOM adds new node to the element called shadow root.
  • Shadow root will render instead of shadow host.
  • Seperates content from presentation for serving needs.

Shadow DOM: style the shadows

<div>Just reached the edge. </div>
var host = document.querySelector('div');
var root = host.webkitCreateShadowRoot();
root.textContent = '<span>HTML5 Hello, World!</span>'+
		'<style>span{color:orange}</span>';
  • Shadow DOM styles are bound to ShadowRoot.
  • use @host to style the ShasowHost.

Shadow DOM:multiple shadows

<div>This is very advanced </div>
var host = document.querySelector('div');
var root1 = host.webkitCreateShadowRoot();
root.textContent = 'HTML5 Hello, World! 1';
var root2 = host.webkitCreateShadowRoot();
root2.textContent = 'HTML5 Hello, World! 2';
  • Web apps can do encapsulation without iFrame.
  • Host maintain stack of shadow trees and renders recent node.

Performance Management

Performance Management

  • Web Sockets
  • Web workers
  • requestAnimationFrame
  • XMLHttpRequest Level 2

WebSocket API: real time communication

var connection = new WebSocket("URL");
connection.binaryType = 'arraybuffer';
connection.onopen=function(e)...
connection.onerror=function(e)...
connection.onclose=function(e)...
connection.onmessage=function(e){
	console.log(e.data)//data from server
}
connection.send("ping");
  • Websockets is a bidirectional communication for web,redude bandwidth.
  • It maintains persistent connection with client, sends only data without HTTP headers.

webWorker API:background processing with js

var worker = new Worker("worker.js");	
worker.onmessage=function(e){
	console.log(e.data)//data from worker
}
worker.postMessage("start");
worker.js
onmessage=function(e){
	var data=e.data;//data from main thread
	postMessage(data);//send data to main
}
  • webworkers are the scripts, run in backgorund. MessagePassing is used to communicate and Transferrable objects is to pass complex types.

requestAnimationFrame:styling changes

function moveElem() {
    requestAnimFrame( moveElem );
    render();
}

function render(){
	// DOM changes
}
  • rAF gives performance on making changes with few milliseconds intervals.
  • rAF optimize the refresh rate.

XMLHttpRequests Level 2

  var xhr = new XMLHttpRequest();
  xhr.open('POST', '/server', true);
  xhr.responseType = 'text';
  xhr.onload = function(e) {
    if (this.status == 200) {
      console.log(this.response);
    }
  };
  xhr.send("some text");
  • isn't HTML5 but it got dramatic changes and became faster.
  • It supports binary data Transfers and cross origin requests.

Storage Management

Storage

  • IndexedDB
  • File
  • File System
  • DOM Storage

IndexedDB: Store prefernces

indexedDB.db = null;
indexedDB.onerror = function(e) {
  console.log(e);
};
indexedDB.open = function() {
  var request = indexedDB.open("todos");
  request.onsuccess=successCallback;
  request.onfailure=failureCallback;
 }
  • IndexedDB provides faster and easy way to store data.
  • It is an object store with versioning.
  • Retrieve data by key or query.

File API: Read files locally.

 <input type="file" id="files" />
function selectedFiles(evt) {
    var files = evt.target.files; // selected list of files  
    for (var i = 0, f; f = files[i]; i++) {
    	console.log(escape(f.name)+" "+f.type+" "+f.size+" "+f.lastModifiedDate);
    } 
  }
document.getElementById("files").addEventListener("change",selectedFiles,false);
  • File API gives standard mehtod to access files.
  • Read the files and create URLs using File API.
  • FileReader, FileWriter, slice are the mehtods to get into files

FileSystem API: Access your Files

<input type="file" id="files" multiple />
  document.querySelector('#files').onchange = function(e) {
  var files = this.files;
  window.requestFileSystem(window.TEMPORARY, 1024*1024, function(fs) {
    for (var i = 0, file; file = files[i]; ++i) {
      (function(f) {
        fs.root.getFile(f.name, {create: true, exclusive: true}, function(fileEntry) {
          fileEntry.createWriter(function(fileWriter) {
            fileWriter.write(f); 
          }, errorHandler);
        }, errorHandler);
      })(file);
    }}, errorHandler);
};

FileSystem API

  • The web applications can create own sandboxed users local file system.
  • Files and Folders can be create,read,navigate and write.
  • web app require requestquota to use filesystem.
  • Web apps can copy,move,rename the files and folders.

data-* : DOM Storage

<div data-left="1500" id="domdata" >Some data...</div>
//get data
var el = document.getElementById('domdata');
var left = el.getAttribute('data-left');
console.log(left);
  • data-* attributes are to store custom data in applications.

Status Management

Status

  • Online and Offline
  • Performance
  • Focus
  • PointerLock
  • Full Screen
  • Geo
  • History

onLine: Are you alive?

if(navigator.onLine){ //test the network conection
	console.log("Connected.");
}else{
	console.log("not Connected.");
}
Get the status of the network connection.

window.performance: Performance Statistics

console.log(performance);

//navigation timing
connectEnd: 1363679948438
connectStart: 1363679948438
domComplete: 1363679955254
domContentLoadedEventEnd: 1363679950350
domContentLoadedEventStart: 1363679950308
domInteractive: 1363679950237
...
  • Measure performace using navigation timing.
  • Open console and type performance for more

PageVisibility API: Is it clear?

function manageFocus() {
    if (document.hidden) {
        stopAnimation(); 
    } else  {
       startAnimation();
    }
}
document.addEventListener("visibilitychange", manageFocus, false);
						
Change the state of document when blur and focus.

PointerLock API: Catch mouse!

element.webkitRequestPointerLock(); // Chrome

element.mozRequestPointerLock() //FF
						
  • PointerLock API gives access to mouse data
  • Focus all events to an element

FullScreen API: I am Big

function toggleFullScreen(el) {
  if (!el.fullscreenElement) {  
    if (el.requestFullscreen) {
      el.requestFullscreen();
    } 
  } else {
    if (el.cancelFullScreen) {
      el.cancelFullScreen();
    } 
  }
}
FullScreen API allows to show any elements content in Fullscreen mode.

Geo Location: where are you?

if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(success, error);
  //returns longitude and latitude points of current location on success.
} else {
  error('not supported');
}
Detect the location using geo loaction API.

History API: not just read, create it.

navigator.pushState({ foo : "bar"}, "New title", "new-url.html");
window.addEventListener('popstate', function(event) {
	console.log(event.state);//get the data
}
This API mainly useful for single page applications. The web apps can push history,replace and navigate.

Media Management

Media Management

  • Audio and Video
  • WebRTC
  • Web Audio
  • Web Speech

Audio & Video: look and listen

<video src="video.ogg" controls>
Your browser does not support the video element.
</video>
<audio src="/test/audio.ogg">
Your browser does not support the audio element.
</audio>						
Audio and Video elements for playing media files on web.

WebRTC: Plugin free communication

   navigator.getUserMedia ({video: true,audio: true},
   function(localMediaStream) {
      var video = document.querySelector('video');
      video.src = window.URL.createObjectURL(localMediaStream);
      video.onloadedmetadata = function(e) {
         // Do something with the video here.
      };
   },
   function(err) {
    console.log("The following error occured: " + err);
   });
  • WebRTC implements 3 APIs, MediaStream,RTCPeerConnection,RTCDataChannel.
  • WebRTC needs several things like audio,video,signaling,streaming and exchange of information.

DataChannel: peer-to-peer communication

var sndr = pc1.createDataChannel("crispy");  
var rcvr = pc2.createDataChannel("crispy");  

var receiveLog = document.querySelector("div#receive");
rcvr.onmessage = function(event) {
  receiveLog.innerHTML += event.data;
};
var input = document.querySelector("input#send");
function sendToPeer() {
  sndr.send(input.value);//send message 
}
  
  • RTCDataChannel will establish peer-to-peer communication.

Web Audio API: Sound Engineer

var context = new webkitAudioContext();

function playSound(buffer) {
  var source = context.createBufferSource(); // creates a sound source
  source.buffer = buffer;                    // tell the source which sound to play
  source.connect(context.destination);       // connect the source to the context's destination
  source.noteOn(0);                          // play the source now
}
Web Audio API is for precessing and synthesizing audio in Web apps.

Web Speech API: Lets talk with app

var recognition = new webkitSpeechRecognition();
recognition.onstart=function(e)...
recognition.onend=function(e)...
recognition.onerror=function(e)...
recognition.onresult=function(e)...	
recognition.start();
Web Speech API enables users to talk with apps.

Art Management

Art Management

  • Canvas
  • SVG
  • WebGL

Canvas: Draw it on fly

<canvas id="canvasid" width="150" height="150"></canvas>
						
var canvas = document.getElementById('canvasid');
var ctx = canvas.getContext('2d');
  • canvas is used to draw graphics, on the fly, via scripting.
  • canvas can create,edit,open and export images.

SVG: Scale the Art

<svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
<circle id="redcircle" cx="50" cy="50" r="50" fill="red"/>
</svg>
						
						
  • SVG is a way to present vector based line drawings.
  • SVG creates dynamic and interactive graphics.

Webgl: Visualize imaginations

var canvas = document.getElementById("canvas");
try{
var gl = canvas.getContext("experimental-webgl");
}
catch(e){}					
if(!gl){
	console.log("Your browser doesn't support webgl");
}					
  • WEBGL makes realtime 3D graphics and 2d graphics in browser.
  • WebGL allows GPU accelerated usage of physics and image processing and effects.

Who is this fellow!

Raju K profile

Development Engineer at antkorp

Thank you