HTML 5 at a Glance
[ More HTML & CSS ][ More HTML & CSS ]
HTML 5 at a Glance
HTML5 Server-Sent Events
Servers can send upda tes automatically even if the client did not ask for it. For example, Facebook updates and Twitter Updates
The idea is you have to use the EventSource object to point to the remote script sending updates. Then you have to act upon the events onopen, onmessage, and onerror [the client script has to perform action on these events]. The onmessage event is the most useful. onmessage event occurs when the server sends meaages [and then you need to process the message as sent by the server]
How to check if the browser supports it or not
SSE is supported by all major browsers except Internet Explorer.
if(typeof(EventSource)!=="undefined") { // Yes! } else { // Sorry! No }
Example onmessage event
var script_source=new EventSource(“source.php”);
source.onmessage=function(event)
{
document.getElementById(“elementToChange”).innerHTML+=event.data + ”
“;
};
Server Side Code Example
<?php
header(‘Content-Type: text/event-stream’);
header(‘Cache-Control: no-cache’);
$time = date();
echo (“Server time: {$time}”);
flush();
?>
HTML 5 Web Worker
A Web Worker is a JavaScript Code running in the background without interfering (delaying) user interactions. Usually written in separate JavaScript files. However, webworkers can send messages to the frontend on onmessage event. Web Worker JS does not have access to the Document, Window and Parent objects.
Web Workers are supported by all major browsers except IE
Example use: You can keep options in buttons or texts to start and stop the web worker. On click on the start, the web worker defined in a separate JS file starts executing.
wrker = new Worker(“js_file_for_processing.js”); //how you start the background work.
On the stop button click, you can just call the terminate method (wrker.terminate). You can also check if the browser supports web worker or not using the following code if(typeof(Worker)!==”undefined”) { // Yes! } else { // Sorry! }
<script>
var wrker;
function start_web_Worker()
{
if(typeof(Worker)!==”undefined”)
{
if(typeof(wrker)==”undefined”)
{
wrker=new Worker(“wrker_js.js”);
}
w.onmessage = function (event) {
document.getElementById(“sum”).innerHTML=event.data;
};
}
else
{
document.getElementById(“sum”).innerHTML=”browser does not support web worker”;
}
}
function stop_web_Worker()
{
wrker.terminate();
}
</script>
HTML5 Application Cache
Supported by all major browsers except IE
In HTML 5, you can specify whether a page will be cached in the client side or not using HTML itself. Caching makes the application faster, and offers offline browsing of the website. You can use manifest attribute for the HTML tag to specify whether a page will be cached or not or you can mention in a manifest file what pages need to be cached and what pages are not cacheable.
< html manifest=”manifest_file.appcache” >
Manifest file example
CACHE MANIFEST
#will be cached
/x.css
/y.gif
/z.js
NETWORK:
#will never be cached
login.asp
FALLBACK:
#if a file cannot be found what page should be displayed
/html/forms/name.php /error.php
HTML5 Web Storage
supported by Internet Explorer 8+, Firefox, Opera, Chrome, and Safari.
This is cookie like storage but more secure and faster. Storage is the object used for the purpose. Large amounts of data can be stored without affecting the performance. There are two types of storage localStorage, and sessionStorage. localStorage has no expirartion date but sessionStorage is only for the current seession. And for sure, a webpage can only access data stored by itself. The data are stored as key value pairs
HTML5 Form Attributes
autocomplete, novalidate are the two new attributes for the form tag. autocomplete indicates if the form elements will be turned on or off for autocomplete. novalidate indicates when the form will be submitted, no validation will be performed on the data.
HTML 5 introduces some new attributes for the input element such as autocomplete, autofocus, form, formaction, formenctype, formmethod, formnovalidate, formtarget, height and width, list, min and max, multiple, pattern (regexp), paceholder, required, step. Will talk on them in a later article
HTML5 New Form Elements
datalist: pre defined list of data for an input element
keygen: generates public key and private key
output: used to keep output data
Example
<form action=”” method=”get”>
<input list=”browsers”><datalist id=”browsers”>
<option value=”Internet Explorer”>
<option value=”Firefox”>
<option value=”Chrome”>
<option value=”Opera”>
<option value=”Safari”>
</datalist>
<keygen name=”security”>
<output name=”x” for=”a b”></output>
</form>
HTML 5 New Input Types
New input types include: color, date, datetime, datetime-local, email, month, number, range, search, tel, time, url, week
Example
<input type=”color” name=”…”>
<input type=”date” name=”…”>
<input type=”datetime” name=”…”>
<input type=”datetime-local” name=”…”>
<input type=”email” name=”…”>
<input type=”month” name=”…”>
<input type=”number” name=”…” min=”1″ max=”5″>
<input type=”range” name=”…” min=”1″ max=”10″>
<input type=”search” name=”…”>
<input type=”tel” name=”…”>
<input type=”time” name=”…”>
<input type=”url” name=”…”>
<input type=”week” name=”…”>
HTML5 Audio
Supported by: Internet Explorer 9, Firefox, Opera, Chrome, and Safari
No need to use Flash to play sound, HTML5 provides ways to play audio files
Example
<audio controls=”controls”>
<source src=”xyz.ogg” type=”audio/ogg”>
<source src=”xyz.mp3″ type=”audio/mpeg”>
</audio>
You can use multiple sources, the browser will go with the first recognized format
HTML5 Video
Supported by: Internet Explorer 9, Firefox, Opera, Chrome, and Safari
<video width=”320″ height=”240″ controls=”controls”>
<source src=”xyz.mp4″ type=”video/mp4″>
<source src=”xyz.ogg” type=”video/ogg”>
</video>
HTML5 Geolocation
navigator.geolocation.getCurrentPosition can be used to find user’s current position
HTML5 Drag and Drop
Any element is draggable
The element you want to drag needs to use the attribute draggable=”true”; You need to use ondragstart and setData() to specify what should happen on drag event. ondragover mentions where the dragged data can be dropped.
HTML5 Inline SVG: Supporting Vector Graphics
In HTML5, you can use SVG tag to include vector graphics. SVG defines graphics in xml format. Vector Graphics are independent of resolution, can have events, can be manipulated without being redrawn
HTML5 Canvas
Defines an area in the web-page where drawings can be done using some scripts such as JavaScript.
<canvas id=”myCanvas” width=”200″ height=”100″></canvas>
Canvas Example
<script type=”text/javascript”>
var c=document.getElementById(“canvas_id”);
var ctx=c.getContext(“2d”);
ctx.fillStyle=”#FFFF00″;
ctx.fillRect(0,0,200,100);
</script>
New Elements in HTML5
article, aside, bdi, command, details, summary, figure, figcaption, footer, header, hgroup, mark, meter, nav, progress, ruby, rt, section, time, wbr From: http://sitestree.com/?p=342
Categories:Web Development, Root, By Sayed Ahmed, Introduction to HTML 5
Tags:
Post Data:2013-08-23 18:46:33
