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.



Tuesday, 25 December 2012

Difference between Native , Web and Hybrid Mobile Applications.

Title : Difference Between Native Web and hybrid Mobile Applications.

Hi, I am going to explain the main differences between Native , Web and Mobile Applications.In Present days smart phones are playing a major role in market where millions of people are expecting new features and new technologies in their mobiles.Every person using smart phone want to change his mobile in two years and expecting to purchase new mobile with more features then the previous mobile what he is using.
so that as a mobile developer we have to come with new technology with that we have to consider cost,portability,reusablity,performance,user interactivity and apperance.based upon the above things i am going to exaplain how native applications,web applications and hybrid applications play and which one to choose.

Native Apps :  Native mobile Applications are the applications build using the native language of the mobile and can be deployed to a specified store for example if we want to build native android application we have to know java and using java and android sdk we can build native android app and can only be deployed android market(Play Store).where as iphone applications can be developed by a c++ proggramer
and can be only deployed itunes.coming to portability Native apps are platform dependent.coming to cost native apps are cost as we need different programmers for devloping different native apps and every application need to be deployed in it's own market store and we have to pay for diploying our applications.
coparing to others native applications are fast , user interactive, provide good apperance and also deploying to market stores makes your application reachable to users easily.

 to develop native applications please refer the following link.

Web Applications : Web Applications are simple applications build using HTML5 and JavaScript and can be deployed in our own webservers. any mobile user can use this application from their mobile browser.compared to native apps this applications are low cost and can be used by any mobile user it is platform independent.Compared to native apps web apps are slow,appearence is not good as native apps,we cannot use mobile hardware like camera,gps,sensors.any web developer can develop web apps and can deploy the apps in their own web server and can be accessed by any mobile os devices.

to devlop web apps please refer the following link.

Hybrid Apps : Hybrid Apps are the applications build using HTML5 And JavaScript and deployed to any mobile os store by just changing some configurations and this is done by some opensource frameworks like PhoneGap.PhoneGap is a frame work that consists of different libraries which can convert a web application into native application and uses native apps webview and display the webapp in the webview and makes work as native apps.it is platform independent(but need to change some configurations while deploying).
it solves many disadvantages seen in webapplications and native applications.cost is less then native apps,can be deployed in market stores like playstore,itunes,ovi.Mobile hardware can be accessed by hybrid apps as native apps uses.user interactivity is good any web developer can build this hybrid apps with some additional things.user interactivity is good,appearence is good,reusability.

to develop hybrid apps please refer the following link.