Html5 Tutorial - Future Technology

Showing posts with label css. Show all posts
Showing posts with label css. Show all posts

Monday, 2 December 2013

Node.js Video Tutorial



Node.js is a platform built on Chrome's JavaScript runtime for easily building fast, scalable network applications. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient, perfect for data-intensive real-time applications that run across distributed devices.



Current Version: v0.10.22


I am posting all node.js video tutorials here please check and subscribe.

Node.js Tutorial Videos:



Node js A Jumpstart for Devs 01 Installing Node js Part -1





Node js A Jumpstart for Devs 02 Building our Project Part - 2





Node js A Jumpstart for Devs 03 Handlebars Switching the Template Engine HD Part 3





Node js Jumpstart for Devs 04 Adding our First Template Part - 4





Node js A Jumpstart for Devs 05 Geolocation A Usable HTML5 API HD





Node js A Jumpstart for Devs 06 Geolocations Making it Human Friendly HD





Node js A Jumpstat for Devs 07 Dynamic HTML Making Use of Our Templates HD Part - 7





Node js A Jumpstart for Devs 08 Simple Persistence w SQLite & an ORM Package HD Part- 8





Node js A Jumpstart for Devs 09 Tracking Ourselves Part - 9





Node js A Jumpstart for Devs 10 Displaying Places We've Been HD Part- 10





HTML5 Tutorial - Html5 tutorial two chat programs using node.js

In this tutorial we will learn how to use HTML5 WebSockets. We need a server that supports this protocol. We will use the NodeJS server, a very popular server for writing web applications that use WebSockets or for writing HTML5 games. It's a small, powerful server, that embeds the V8 JavaScript interpreter (the one in Chrome), enablind server side JavaScript. We will look at two versions of a small chat application, that use the socket.io and express modules for NodeJS. Socket.io brings weNotice that socket.io has also implementations server side for Java, C#, Android, etc). Installation of NodeJS and of the express and socket.io modules Go to http://www.nodejs.org and install the last version of NodeJS. Click on the install button on the web page. Check the installation. Open a terminal window, type "node --version", this should print something like: "node 0.10.x". Test of a first NodeJS application Create somewhere a file names test.js, with this content
var http = require('http');
http.createServer(function (req, res) {
  res.writeHead(200, {'Content-Type': 'text/plain'});
  res.end('Hello World\n');
}).listen(8124, "127.0.0.1");
console.log('Server running at http://127.0.0.1:8124/');
Save and run this command from the terminal: node test.js You just ran your first nodeJS application, try it with a Web browser by opening: http://localhost:8124 You should see this in your web browser: The test.js file contains ultra minimal code for creating and configuring an HTTP web server. This ultra minimal server answers requests by sending string responses on the fly. If we want to serve HTML files, images, JS files, CSS files, we need a more complete web server. This is what the "express" module will bring to NodeJS. And we will also need the socket.io module for using WebSockets. NodeJS module installation We will use the "npm" (node package manager) command from the nodeJS installation Create a directory named "chatWithSocketIO" somewhere cd in it, run "npm install express", run "npm install socket.io". You should see a subdir named "node_modules" that contains the new modules you just downloaded/installed locally to your project. Simple chat application that uses express and socket.io This part is an updated/fixed version of this tutorial , that explains how to write a small chat application with nodeJS, express and socket.io. We cleaned the code and adapted it so it works with the last version of express (v3), and socket.io. Get this archive : chatSocketIO.rar Unarchive it in your working dir. You should get this; Now run this command "node simpleChatServer.js" and open "http://localhost:8080", in your browser. Open th URL in two different tabs. Enter two different names, try to chat, look at what happens in the different tabs.Open Chrome dev tools, you should find how to trace data exchanged over web sockets. Now, study the code of simpleChatServer.js, of simpleChat.html, and read : http://psitsmike.com/2011/09/node-js...chat-tutorial/, forget the beginning about the nodeJS installation, just read the code explanations. socket.io basic principles socket.on(event_name, callback) : executes the callback when an event with a given name is fired. (event_name = user defined). Some events like 'connection' or 'disconnect' are predefined. All event processing is performed in the io.sockets.on('connection', function (socket) {...}, call. socket.emit(event_name, data1, data2): sends only to the connected client the event and two parameters with data io.sockets.emit(event_name, data1, data2): same but sends to all connected clients socket.broadcast.emitevent_name, data1, data2): same but sends to all connected clients except the emitter simpleChatServer.js:
// We need to use the express framework: have a real web server that knows how to send mime types etc.
var express=require('express');

// Init globals variables for each module required
var app = express()
  , http = require('http')
  , server = http.createServer(app)
  , io = require('socket.io').listen(server);

// Indicate where static files are located  
app.configure(function () {  
    app.use(express.static(__dirname + '/'));  
});  

// launch the http server on given port
server.listen(8080);

// routing
app.get('/', function (req, res) {
  res.sendfile(__dirname + '/simpleChat.html');
});

// usernames which are currently connected to the chat
var usernames = {};

io.sockets.on('connection', function (socket) {

 // when the client emits 'sendchat', this listens and executes
 socket.on('sendchat', function (data) {
  // we tell the client to execute 'updatechat' with 2 parameters
  io.sockets.emit('updatechat', socket.username, data);
 });

 // when the client emits 'adduser', this listens and executes
 socket.on('adduser', function(username){
  // we store the username in the socket session for this client
  socket.username = username;
  // add the client's username to the global list
  usernames[username] = username;
  // echo to client they've connected
  socket.emit('updatechat', 'SERVER', 'you have connected');
  // echo globally (all clients) that a person has connected
  socket.broadcast.emit('updatechat', 'SERVER', username + ' has connected');
  // update the list of users in chat, client-side
  io.sockets.emit('updateusers', usernames);
 });

 // when the user disconnects.. perform this
 socket.on('disconnect', function(){
  // remove the username from global usernames list
  delete usernames[socket.username];
  // update list of users in chat, client-side
  io.sockets.emit('updateusers', usernames);
  // echo globally that this client has left
  socket.broadcast.emit('updatechat', 'SERVER', socket.username + ' has disconnected');
 });
});
And simpleChat.html:



USERS
Multiroom chat: several groups of clients can chat together This version enable clients to be in groups called "rooms". The Socket.io API has a complete set of functions for joining/leaving a room, sending messages to all people in a room, to all people except the emitter, etc. socket.join(room_name) and socket.leave(room_name) : when joining a non existing room it creates it, socket.broadcast.to(room_name).emit(...): similar to socket.broadcast.emit, sends a message to all clients in the room except the emitter. io.sockets.inroom_name).emit(...) : sends to all clients in the room. Complete documentation of the room API: https://github.com/LearnBoost/socket.io/wiki/Rooms multiRoomChatServer.js
// We need to use the express framework: have a real web server that knows how to send mime types etc.
var express=require('express');

// Init globals variables for each module required
var app = express()
  , http = require('http')
  , server = http.createServer(app)
  , io = require('socket.io').listen(server);

// Indicate where static files are located. Without this, no external js file, no css...
app.configure(function () {  
    app.use(express.static(__dirname + '/'));  
});  

// launch the http server on given port
server.listen(8080);

// routing with express, mapping for default page
app.get('/', function (req, res) {
  res.sendfile(__dirname + '/multiRoomChat.html');
});

// usernames which are currently connected to the chat
var usernames = {};

// rooms which are currently available in chat
var rooms = ['room1','room2','room3'];

io.sockets.on('connection', function (socket) {
 
 // when the client emits 'adduser', this listens and executes
 socket.on('adduser', function(username){
  // store the username in the socket session for this client
  socket.username = username;
  // store the room name in the socket session for this client
  socket.room = 'room1';
  // add the client's username to the global list
  usernames[username] = username;
  // send client to room 1
  socket.join('room1');
  // echo to client they've connected
  socket.emit('updatechat', 'SERVER', 'you have connected to room1');
  // echo to room 1 that a person has connected to their room
  socket.broadcast.to('room1').emit('updatechat', 'SERVER', username + ' has connected to this room');
  socket.emit('updaterooms', rooms, 'room1');
 });
 
 // when the client emits 'sendchat', this listens and executes
 socket.on('sendchat', function (data) {
  // we tell the client to execute 'updatechat' with 2 parameters
  io.sockets.in(socket.room).emit('updatechat', socket.username, data);
 });
 
 socket.on('switchRoom', function(newroom){
  socket.leave(socket.room);
  socket.join(newroom);
  socket.emit('updatechat', 'SERVER', 'you have connected to '+ newroom);
  // sent message to OLD room
  socket.broadcast.to(socket.room).emit('updatechat', 'SERVER', socket.username+' has left this room');
  // update socket session room title
  socket.room = newroom;
  socket.broadcast.to(newroom).emit('updatechat', 'SERVER', socket.username+' has joined this room');
  socket.emit('updaterooms', rooms, newroom);
 });
 

 // when the user disconnects.. perform this
 socket.on('disconnect', function(){
  // remove the username from global usernames list
  delete usernames[socket.username];
  // update list of users in chat, client-side
  io.sockets.emit('updateusers', usernames);
  // echo globally that this client has left
  socket.broadcast.emit('updatechat', 'SERVER', socket.username + ' has disconnected');
  socket.leave(socket.room);
 });
});
multiRoomChat.html



ROOMS
Code explanations here: http://psitsmike.com/2011/10/node-js-and-socket-io-multiroom-chat-tutorial/ (we made small updates to the code) Node.js Tutorial Videos: Part - 1 Part - 2 Part - 3 Part - 4 Part - 5 Part - 6 Part - 7 Part- 8 Part - 9 Part - 10

Monday, 24 June 2013

Converting MySql table data to xml file or xml web service - a part of phonegap tutorial for mobile web developers

Title : Converting mysql table data to xml file. Description : All mobile developers know how to parse xml data and display the data in the blocks of mobile screen.and it is also easy to parse xml data rather then fetching data directly from database every time going and hitting database and requesting to open connection and retriving data and closing connection.so i am going to explain you how to convert database data to xml file, and also in my previous tutorial i have explained you how to store form data to mysql database table. Now create a database, and create a table and store some data inthe table or open PhpMyAdmin panel and click on create table tab. now create some columns with some variables, and insert some data into the fields.so that you can able to create some usefull table to use it as webservices. Here is the following code to convert your table data to xml file.
";
$root_element = $config['table_name']."s"; //fruits
$xml         .= "<$root_element>";

//select all items in table
$sql = "SELECT * FROM ".$config['table_name'];
 
$result = mysql_query($sql);
if (!$result) {
    die('Invalid query: ' . mysql_error());
}
 
if(mysql_num_rows($result)>0)
{
   while($result_array = mysql_fetch_assoc($result))
   {
      $xml .= "<".$config['table_name'].">";
 
      //loop through each key,value pair in row
      foreach($result_array as $key => $value)
      {
         //$key holds the table column name
         $xml .= "<$key>";
 
         //embed the SQL data in a CDATA element to avoid XML entity issues
         $xml .= "";
 
         //and close the element
         $xml .= "";
      }
 
      $xml.="";
   }
}
//close the root element
$xml .= "";
 
//send the xml header to the browser
header ("Content-Type:text/xml");
 
//output the XML data
echo $xml;
?>
Here is the out put file i got with the above code.
MakeMyTrip.comMakeMyTrip.com is one of the good website providing Travel services to book oonline Flight,Hotel,Train and Bus tickets with guranteed lowest prices and provides new deals , offers and discount coupons every week and help you save money upto 20% while you travel.travellogos/makemytrip-logo.jpgGoIbibo.comGoIbibo.com is one of the good website providing Travel services to book oonline Flight,Hotel,Train and Bus tickets with guranteed lowest prices and provides new deals , offers and discount coupons every week and help you save money upto 20% while you travel.travellogos/goibibo_logo.pngAbhibus.comAbhibus.com is one of the good website providing Travel services to book oonline Flight,Hotel,Train and Bus tickets with guranteed lowest prices and provides new deals , offers and discount coupons every week and help you save money upto 20% while you travel.travellogos/abhibus-logo.pngTravelyaari.comTravelyaari.com is one of the good website providing Travel services to book oonline Flight,Hotel,Train and Bus tickets with guranteed lowest prices and provides new deals , offers and discount coupons every week and help you save money upto 20% while you travel.travellogos/travelyaari-com-logo-w240.pngRedbus.inRedbus.com is one of the good website providing Travel services to book oonline Flight,Hotel,Train and Bus tickets with guranteed lowest prices and provides new deals , offers and discount coupons every week and help you save money upto 20% while you travel.travellogos/logo_bc9228d_163.jpgExpedia.co.inExpedia.co.in is one of the good website providing Travel services to book oonline Flight,Hotel,Train and Bus tickets with guranteed lowest prices and provides new deals , offers and discount coupons every week and help you save money upto 20% while you travel.travellogos/expedia-logo.pngOther websitesWe Provide more websites that offer good Travel services to book oonline Flight,Hotel,Train and Bus tickets with guranteed lowest prices and provides new deals , offers and discount coupons every week and help you save money upto 20% while you travel.travellogos/travel-agency-logos.jpg
In next tutorial I will explain you how to parse this xml file and display data on mobile screen using phonegap.

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.