Html5 Tutorial - Future Technology

Friday 28 December 2012

Html5 PhoneGap app - how to play video example and tutorial


Title : Html5 PhoneGap app - how to play video example and tutorial

Hi , i am going to explain how to use html5 new video tag in phonegap particularly on android device.

here is the screen shots of playing a video in android mobile from a url.




Here is the code for the app.

create html file with name index.html with the following code


<!
DOCTYPE HTML>
<
html>
<head>
<meta name="viewport" content="width=320; user-scalable=yes" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>PhoneGap</title>
<script type="text/javascript" charset="utf-8" src="cordova-2.2.0.js"></script>
<script type="text/javascript" charset="utf-8" src="video.js"></script>
<
script type="text/javascript">
function
init(){
document.addEventListener(
"deviceready", console.log('ready'), true);
}

function
playVideo(vidUrl) {
window.plugins.videoPlayer.play(vidUrl);
}

</
script>
</head>
<body onload="init();">
<a href="#" onclick="playVideo('http://www.youtube.com/embed/9HDeEbJyNK8')">Play HTTP</a><p/>
<a href="#" onclick="playVideo('http://broken-links.com/tests/media/BigBuck.m4v')">Play File</a><p/>
</body></
html>
Next add cordova video plugin for your app for adding plugin see the following steps.

for adding videoplayer plugin visit the following link Cordova VideoPlayer Plugin

VideoPlayer plugin for Phonegap
The video player allows you to display videos from your PhoneGap application.
This command fires an Intent to have your devices video player show the video.

Adding the Plugin to your project

Using this plugin requires Android PhoneGap.
  1. To install the plugin, move www/video to your project's www folder and include a reference to it in your html file after phonegap.js.
    <script type="text/javascript" charset="utf-8" src="phonegap.js"></script>
    <script type="text/javascript" charset="utf-8" src="video.js"></script>
  2. Create a directory within your project called "src/com/phonegap/plugins/video" and move VideoPlayer.java into it.
  3. In your res/xml/plugins.xml file add the following line:
    <plugin name="VideoPlayer" value="com.phonegap.plugins.video.VideoPlayer"/>

Using the plugin

The plugin creates the object window.plugins.videoPlayer. To use, call the play() method:
  /**
    * Display an intent to play the video.
    *
    * @param url           The url to play
    */
  play(url)
Sample use:
window.plugins.videoPlayer.play("http://path.to.my/video.mp4");
window.plugins.videoPlayer.play("file:///path/to/my/video.mp4");
window.plugins.videoPlayer.play(file:///android_asset/www/path/to/my/video.mp4);



Html5 local storage example

Title : Html5 local storage example - a small tutorial.


User can enter the contact details , store the contact details in a table , can modify them, can retrive them and can remove them when he wanted.
Html5 comes with a new feature local storage that can add an item with key value pair and can retrive,modify,delete them when he wants.
Here is the code for the above example.

<!
doctype html>
<
html>
<
head>
<meta charset="utf-8" />
<title>Contacts</title>
<style>
a { color: #0068D2; cursor: pointer; }
a:link, a:visited { text-decoration: none; color: #0068D2; }
a:hover, a:active { text-decoration: underline; color: #0068D2; }
body { font: 12px/18px "Lucida Grande", "Lucida Sans Unicode", sans-serif; }
#contacts-table { border-collapse: collapse; }
#contacts-table, #contacts-table th, #contacts-table td { padding: 8px 16px; text-align: left; border: 0px solid #B9BABE; }
#contacts-table th { font-weight: bold; font-size: 14px; color: #29344B; }
#contacts-table td { color: #000; }
#contacts-table tr:nth-child(2n) { background: #E8EDFF; }
#contacts-form { padding: 10px; }
.text input, .button input { padding: 5px; margin: 0; border: 1px solid #ccc; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; }
#contacts-form .item { margin: 3px 0; }
#contacts-form label, #contacts-form .field { display: inline-block; color: #0C0B07; }
#contacts-form label { width: 110px; font-weight: bold; text-align: right; color: #666; }
#contacts-form .text input { width: 176px; padding: 3px; }
#contacts-form .button { display: inline-block; }
#contacts-form .button-wrapper { padding-left: 113px; }
.button input { padding: 4px 8px; color: #343434; background-color: #fdfdfd; background: -moz-linear-gradient(#fdfdfd, #e1e1e1); background: -webkit-gradient(linear, 0 0, 0 100%, from(#fdfdfd), to(#e1e1e1)); }
.button-default input { font-weight: bold; color: #fff; background-color: #7ca0c7; background: -moz-linear-gradient(#acc6e1, #7ca0c7); background: -webkit-gradient(linear, 0 0, 0 100%, from(#acc6e1), to(#7ca0c7)); border-color: #5b80b2; }
</style>
</
head>
<
body>
<h1>Contacts</h1>
<table id="contacts-table">
<tr id="contacts-head">
<th>ID</th>
<th>First name</th>
<th>Last name</th>
<th>Email</th>
<th>Actions</th>
</tr>
</table>
<form id="contacts-form">
<div class="item text">
<label>First name:</label>
<div class="field"><input type="text" name="first_name" /></div>
</div>
<div class="item text">
<label>Last name:</label>
<div class="field"><input type="text" name="last_name" /></div>
</div>
<div class="item text">
<label>Email:</label>
<div class="field"><input type="text" name="email" /></div>
</div>
<div class="button-wrapper">
<div class="item button">
<div class="field"><input type="button" id="contacts-op-discard" value="Discard" /></div>
</div>
<div class="item button button-default">
<div class="field"><input type="submit" id="contacts-op-save" value="Save" /></div>
</div>
</div>
<input type="hidden" name="id_entry" value="0" />
</form>
<script>
var Contacts = {
index: window.localStorage.getItem(
"Contacts:index"),
$table: document.getElementById(
"contacts-table"),
$form: document.getElementById(
"contacts-form"),
$button_save: document.getElementById(
"contacts-op-save"),
$button_discard: document.getElementById(
"contacts-op-discard"),
init:
function() {
// initialize storage index
if (!Contacts.index) {
window.localStorage.setItem(
"Contacts:index", Contacts.index = 1);
}
// initialize form
Contacts.$form.reset();
Contacts.$button_discard.addEventListener(
"click", function(event) {
Contacts.$form.reset();
Contacts.$form.id_entry.value = 0;
},
true);
Contacts.$form.addEventListener(
"submit", function(event) {
var entry = {
id: parseInt(
this.id_entry.value),
first_name:
this.first_name.value,
last_name:
this.last_name.value,
email:
this.email.value
};
if (entry.id == 0) { // add
Contacts.storeAdd(entry);
Contacts.tableAdd(entry);
}
else { // edit
Contacts.storeEdit(entry);
Contacts.tableEdit(entry);
}
this.reset();
this.id_entry.value = 0;
event.preventDefault();
},
true);
// initialize table
if (window.localStorage.length - 1) {
var contacts_list = [], i, key;
for (i = 0; i < window.localStorage.length; i++) {
key = window.localStorage.key(i);
if (/Contacts:\d+/.test(key)) {
contacts_list.push(JSON.parse(window.localStorage.getItem(key)));
}
}
if (contacts_list.length) {
contacts_list
.sort(
function(a, b) {
return a.id < b.id ? -1 : (a.id > b.id ? 1 : 0);
})
.forEach(Contacts.tableAdd);
}
}
Contacts.$table.addEventListener(
"click", function(event) {
var op = event.target.getAttribute("data-op");
if (/edit|remove/.test(op)) {
var entry = JSON.parse(window.localStorage.getItem("Contacts:"+ event.target.getAttribute("data-id")));
if (op == "edit") {
Contacts.$form.first_name.value = entry.first_name;
Contacts.$form.last_name.value = entry.last_name;
Contacts.$form.email.value = entry.email;
Contacts.$form.id_entry.value = entry.id;
}
else if (op == "remove") {
if (confirm('Are you sure you want to remove "'+ entry.first_name +' '+ entry.last_name +'" from your contacts?')) {
Contacts.storeRemove(entry);
Contacts.tableRemove(entry);
}
}
event.preventDefault();
}
},
true);
},
storeAdd:
function(entry) {
entry.id = Contacts.index;
window.localStorage.setItem(
"Contacts:index", ++Contacts.index);
window.localStorage.setItem(
"Contacts:"+ entry.id, JSON.stringify(entry));
},
storeEdit:
function(entry) {
window.localStorage.setItem(
"Contacts:"+ entry.id, JSON.stringify(entry));
},
storeRemove:
function(entry) {
window.localStorage.removeItem(
"Contacts:"+ entry.id);
},
tableAdd:
function(entry) {
var $tr = document.createElement("tr"), $td, key;
for (key in entry) {
if (entry.hasOwnProperty(key)) {
$td = document.createElement(
"td");
$td.appendChild(document.createTextNode(entry[key]));
$tr.appendChild($td);
}
}
$td = document.createElement(
"td");
$td.innerHTML =
'<a data-op="edit" data-id="'+ entry.id +'">Edit</a> | <a data-op="remove" data-id="'+ entry.id +'">Remove</a>';
$tr.appendChild($td);
$tr.setAttribute(
"id", "entry-"+ entry.id);
Contacts.$table.appendChild($tr);
},
tableEdit:
function(entry) {
var $tr = document.getElementById("entry-"+ entry.id), $td, key;
$tr.innerHTML =
"";
for (key in entry) {
if (entry.hasOwnProperty(key)) {
$td = document.createElement(
"td");
$td.appendChild(document.createTextNode(entry[key]));
$tr.appendChild($td);
}
}
$td = document.createElement(
"td");
$td.innerHTML =
'<a data-op="edit" data-id="'+ entry.id +'">Edit</a> | <a data-op="remove" data-id="'+ entry.id +'">Remove</a>';
$tr.appendChild($td);
},
tableRemove:
function(entry) {
Contacts.$table.removeChild(document.getElementById(
"entry-"+ entry.id));
}
};
Contacts.init();
</script>
</
body></
html>
I  willl explain the line by line code with in this week so, please follow this blog.

Wednesday 26 December 2012

HTML5 Tutorial

HTML5 Tutorial

Hi every body, I am going to explain what HTML5 is,what is it's features,its advantages and it's disadvantages as well as some demo's tutorial with code.

HTML5 is the latest evolution of HTML.It is new version of html comes with new html elements,attributes and behaviors.and it is a larger set of technologies  that allows to develop powerfull web applications as well as mobile apps.this set is some times called it as HTML5 and friends and shorten to HTML5.Html5 is specified to develop or designed to open to all developers(means development code is visible to all people).HTML5 is still a work in progress. However, the major browsers support many of the new HTML5 elements and APIs.

Where this HTML5 started?

HTML5 is a cooperation between the World Wide Web Consortium (W3C) and the Web Hypertext Application Technology Working Group (WHATWG).
WHATWG was working with web forms and applications, and W3C was working with XHTML 2.0. In 2006, they decided to cooperate and create a new version of HTML.
Some rules for HTML5 were established:
  • New features should be based on HTML, CSS, DOM, and JavaScript
  • Reduce the need for external plugins (like Flash)
  • Better error handling
  • More markup to replace scripting
  • HTML5 should be device independent
  • The development process should be visible to the public

This tutorial links to different pages which consists of above features with demo's code explained clearly.

Semantics : Describes mostly how you place your content(mark up your content).
Connectivity : Allowing you to connect with different servers and exchange data.
OffLine and Storage : Allowing webpages to store data locally(client side) and operate offline more efficiently.
Multimedia : How to use Audio and Video new Elemnets.
2D/3D Graphics & Effects : Explains how to create 2d and 3d graphics in your applications.
Performance & Integration : Explains how HTML5 provides speed optimization and better usage of computer hardware.
Device Access : Explains How to use or access different input and output resourses of a device.
Style : Explains authors or developers can write most sophisticated articles and how to increase the appearence by styling them.