Html5 Tutorial - Future Technology

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

Thursday, 3 October 2013

HTML5 Tutorial - Advantages of HTML5

Top 10 Advantages of HTML5

Basically HTML5 has it’s many new syntactical features, which include the video, audio, and canvas elements, as well as the integration of SVG content. Due to these new elements, it will be very easy to integrate multimedia and graphical content to web without using flash and third party plugins. There are also another new elements like section, article, header and nav which enrich the semantic value of the document. Other major advantages of HTML5 are described below. -

  • 1. Mutuality
    Due to usability purpose the web sites made by developers are highly interactive nowadays and for this developers need to include fluid animations, stream video, play music and Social Network sites like Facebook and Twitter into the websites. Till now they have only the option to integrate it with the help of Flash or Silverlight, Flex or javascript like tools. But these consume so much time to develop and even the complexity of web application also increased. But now with the help of HTML5 it is possible to embed video and audio, high quality drawings, charts and animation and many other rich content without using any plugins and third party programmas as the functionality is built into the browser.

  • 2. Cleaner markup / Improved Code
    HTML 5 will enable web designers to use cleaner, neater code, we can remove most div tags and replace them with semantic HTML 5 elements.

  • 3. Improved Semantics
    Now it is easy to see which parts of the page are headers, nav, footers, aside, etc as the tags are specific for these all and most importantly know what their meaning and purpose is in whole the format. By using HTML5 elements we can increase the semantic value of the web page as the codes are very standardized.

  • 4. Elegant forms
    HTML5 enables designer to use more fancier forms. Even it makes form validation native to HTML, User interface enhancements and reduced need for JavaScript (only needed in browsers that don’t support form types). There will be different type of text inputs, search and different fields for different purpose.

  • 5. Consistency
    As websites adopt the new HTML5 elements we will see more greater consistency in terms of the HTML used to code a web page on one site compared to another. This will make it more easier for designers and developers to immediately understand how a web page is structured.

  • 6. Improved Accessibility
    Different technologies can elaborate on the features with the help of HTML5, as they can Immediately make more detailed understanding of the structure of a page by take a look at HTML5 elements it has.

  • 7. Fulfill the need of Web application
    Many new features and standards have emerged as part of HTML 5. Once you detect the available features in today’s browsers, you can take advantage of those features in your application. Main focus of HTML5 is to make easier application with easy front-ends, drag and drop tools, discussion boards, wikis and other useful elements.

  • 8. Offline Application cache
    All browsers have some kind of caching m After a sometime, you open up your laptop and click the Back button in the browser hoping to see the previous page that was opened. However, as you are not connected to the internet and the browser didn’t cache the page properly, you are unable to view that page. You then click the Forward button thinking that at least that page will load, but it doesn’t. You need to reconnect to the internet to be able to view the pages. HTML 5, thankfully, provides a smarter solution. While building the site, the developer can specify the files that the browser should cache. So, even if you refresh the page when you are offline, the page will still load correctly. This sort of caching has several advantages like offline browsing, files load much faster and reduced load on server

  • 9. Client-side database
    While cookies have been used to track unique user data for years, they have serious disadvantages. The largest flaw is that all of your cookie data is added to every HTTP request header. This can end up having a measurable impact on response time. So a best practice is to reduce cookie size. With HTML5 we can do better by using sessionStorage and localStorage(two different storage in HTML5) in place of cookies. It is not a permanent database, but enables you to store structured data, temporarily.

  • 10. Geolocation support
    With help of Geolocation any one can find out where you are in the world and sharing that information with people. There is different ways to figure out where you are — your IP address, your wireless network connection, which cell tower your phone is talking to, or dedicated GPS hardware that calculates latitude and longitude from information sent by satellites in the sky. But The new HTML5 geolocation APIs make location, whether generated via GPS or other methods, directly available to any HTML5-compatible browser-based application. This is only the overview of the HTML5 advantages, actually there is lots more to know about HTML5. In the near future HTML5 will become a online development language. It is assumed that it will not completely finished before 2022.So just keep it in your mind and start using HTML5 in your designs right now!

Monday, 30 September 2013

HTML5 Tutorial - Difference between HTML4 & HTML5

Differences between HTML4 & HTML5

It’s going to be a while before HTML5 is the new standard and everything HTML5 has to offer is supported by all the important browsers. If you’re a web dev, what should you do? If you’re new to the game or you’re an old pro, you eventually have to ask yourself when and how to begin transitioning over. Perhaps the first thing that you should learn and keep in mind is exactly what the differences between the two are. It’s going to be a while before HTML5 is the new standard and everything HTML5 has to offer is supported by all the important browsers. If you’re a web dev, what should you do? If you’re new to the game or you’re an old pro, you eventually have to ask yourself when and how to begin transitioning over. Perhaps the first thing that you should learn and keep in mind is exactly what the differences between the two are.

Here are ten important differences between HTML4 and HTML5


  • 1. HTML5 Is a Work in Progress
    As cool as it is to see what HTML5 can do for you, it hasn’t been standardized like HTML4. You don’t have to worry about updating pages built using HTML4. It’s more than ten years old and it’s a set standard. If you jump into HTML5 with both feet, you’re going to be making updates. Elements and attributes are added and modified several times a year. Of course, this is dependent how much you depend on rich elements, but it’s certainly a risk you must take into consideration when using a fluid language. Build with HTML4, play with HTML5.

  • 2. Simplified Syntax
    The simpler doctype declaration is just one of the many novelties in HTML5. Now you need to write only: and this is it. The syntax of HTML5 is compatible with HTML4 and XHTML1, but not with SGML.

  • 3. The New canvas Element
    This is what killed Flash. Although it isn’t as … uh … flashy … most assume that it will eventually make Flash obsolete. Only time will tell.

  • 4. The header and footer Elements
    For good or bad, HTML5 has acknowledged the new web anatomy. With HTML5, header and footer are specifically marked for such. Because of this, it is unnecessary to identify these two elements with a div tag.

  • 6. New menu and figure Elements
    menu can be used for your main menu, but it can also be used for toolbars and context menus. The figure element is another way to arrange text and images.

  • 7. New audio and video Elements
    Embedind audio and video has never been easier. There are also some new multimedia elements and attributes, such as , that provides text tracks for the video element. With these additions HTML5 is definitely getting more and more Web 2.0-friendly. The problem is that by the time HTML5 becomes widely accepted, Web 2.0 might be old news.

  • 8. New Forms
    The new
    and elements are looking good. If you do much with forms, you may want to take a look at what these have to offer.

  • 9. Kiss b and font Goodbye!
    CSS, all the time. All the time, CSS.

  • 10. No More frame, center, big
    I bet you’re going to miss these.

HTML5 Tutorial - Client-Side Storage

Introduction This is an overview of client-side storage, a general term for several separate but related APIs: Web Storage, Web SQL Database, Indexed Database, and File Access. Each of these techniques provides a distinct way to store data on the user's hard drive, instead of the server, where data usually resides. There are two main reasons to do this: (a) to make the web app available offline; (b) to improve performance. For a detailed explanation of the use cases for client-side storage, see the HTML5Rocks article, "Offline": What does it mean and why should I care?. The APIs share a similar scope and similar principles. So let's first understand what they have in common before launching to the specifics of each. Common Features Storage on the Client Device In practice, "client-side storage" means data is passed to the browser's storage API, which saves it on the local device in the same area as it stores other user-specific information, e.g. preferences and cache. Beyond saving data, the APIs let you retrieve data, and in some cases, perform searches and batch manipulations. Sandboxed All four storage APIs tie data to a single "origin". e.g. if http://abc.example.com saves some data, then the browser will only permit http://abc.example.com to access that data in the future. When it comes to "origins", the domain must be exactly the same, so http://example.com and http://def.example.com are both disqualified. The port must match too, so http://abc.example.com:123 also cannot see http://abc.example.com (which defaults to port 80), and so must the protocol (http versus https, etc.). Quotas You can imagine the chaos if any website was allowed to populate unsuspecting hard drives with gigabytes of data! Thus, browsers impose limits on storage capacity. When your app attempts to exceed that limit, the browser will typically show a dialog to let the user confirm the increase. You might expect the browser to enforce a single limit for all storage an origin can use, but the major browsers are actually enforcing limits separately for each storage mechanism. This may change in the future, but for now, you should think of the browser as maintaining a 2-D matrix, with "origin" in one dimension and "storage" in the other. For example, "http://abc.example.com" is allowed to store up to 5MB of Web Storage, 25MB of Web SQL Database Storage, and forbidden to use Indexed Database. Another welcome enhancement in this area would be user interfaces to let users view and control how much space they have allocated for each origin. There are also environments where the user can see upfront how much storage will be used, e.g. in the case of the Chrome Web Store, when a user installs an app, they will be prompted upfront to accept its permissions, which include storage limits. One possible value is "unlimited_storage". Transactions The two "database" storage formats support transactions. The aim is the same reason regular relational databases use transactions: To ensure the integrity of the database. Transactions prevent "race conditions", a phenomenon where two sequences of operations are applied to the database at the same time, leading to results that are both unpredictable and a database whose state is of dubious accuracy. Synchronous and Asynchronous Modes Most of the storage formats all support synchronous and asynchronous modes. Synchronous mode is blocking, meaning that the storage operation will be executed to completion before the next line of Javascript is executed. Asynchronous mode will cause the next line of Javascript to be executed immediately, with a new thread implicitly created to perform the storage operation. The application will be notified when the operation is finished by way of a callback function being called, a function which must be specified when the call is made. Synchronous mode is okay for low-impact situations, e.g. maintaining a set of preferences; it's a much simpler programming model, and such operations only take a few milliseconds. But in many production situations, data crunching will block the main thread, which includes the user interface. The display won't update during that time, and the user won't know if their mouse and keyboard actions have been received. So with larger data and complex operations, you should really choose asynchronous mode to keep your app running smoothly. Or alternatively, you can run synchronous operations in a spearate thread using Web Workers. Indeed, aside from Web Storage, you're forced to do it this way; all the other APIs only make their synchronous versions available from inside a Web Worker.

Wednesday, 17 July 2013

HTML5 Tutorial - Create your own blog in minutes using html5,css,php and mysql part 1


HTML5 Tutorial - Create your own blog in minutes using html5,css,php and mysql.

/ Hi friends, I am going to explain you how to create your own blog using html5,css,php and mysql. Requirements : 1) Basic knowledge on html5 and how to use new elements. 2) Basic knowledge on html5 and how to use new elements. 3) Php and mysql hosting(PhpMyAdmin). 4) Notepad++ for editing code. Get a free PHP,MySql account for this project from here http://serversfree.com Now you got all your requirements for free, now go to control panel and create a database,and create one user and add the user to created database.to create database you go to advanced tab in control panel and click on mysql databases icon as shown below. Next enter phpMyAdmin, create a new table for storing blog items. Now Create a table with xyz name and add Blog Title,Description,Image fields. After creating table you have to insert values in to data base by creating one admin panel or one html form to insert data. I have allready written one example showing how to insert form data to php mysql database. Here is the example link to create it and add data to database table. Please check How to insert form data to mysql data base using php For now i will tell you one simple step how to insert data to table directly. Click on table name right side and click insert button and form appears according to your fields.now insert data to our example. Now convert the form data to xml service so, that we can use the data where ever we want to use. For converting mysql data to xml service using php please visit our tutorial converting mysql table data to here Ok now we are ready with our back end services. Now we have to concentrate on front end i.e mostly html5 and css. Here is the HTML5 code for Placing header,content,article,section,aside and footer.

Html5 Tutorial - Future Technology

All Rights Reserved to ss consultancy.
Here is Javascript used to parse xml file and display results in required fields.

Here is css file to align html5 elements.

Ok you are done, Check here for demo. I will update part 2 as soon as posible please write comments or queries and i will solve them.

Tuesday, 16 July 2013

HTML5 Tutorial - Header Element


Header Element

As we have seen Recent growth of HTML5 and its adobtion by web professionals.With in HTML5 specification we have seen there is more number of tags and elements added , in this we are going to discuss one of the element HEADER which i am going to explain in my post.
on a large majority of sites that you visit, well now with HTML 5 that isn’t required anymore we can add some more semantic value with the header element. What does the element represent? According to the spec the header element represents “ a group of introductory or navigational aids. A header element typically contains the section’s heading (an h1–h6 element or an hgroup element), but can also contain other content, such as a table of contents, a search form, or any relevant logos. It is important to note that the
element doesn’t introduce a new section but is the head of a section. You should also note that the
element should not be confused with the element. Where would I use the
element Well the obvious place to start would be at the beginning of your page. We we can start with something like this that includes your primary page heading.

The most important heading on this page

With some supplementary information

An important point to note is that you are not restricted to using one header element per site. You can use multiple headers, each of which will then become the
for that section of the document. You could therefore have…

The most important heading on this page

With some supplementary information

Title of this article

By Richard Clark

...Lorem Ipsum dolor set amet...

Also note the use of two h1‘s within that piece of html, this is perfectly valid in HTML 5 (and HTML 4) but will cause issues with accessibility, so we advise caution if you have a large number of articles on a page. We will cover this in more detail in another post. What is required in the header element We now know that we can have multiples headers in a page but what are the must have’s within the element in order for it to validate? In short, a header typically contains at least (but not restricted to) one heading tag (h1 – h6). You can also include the hgroup element but we’ll discuss that more in another post (read more about the hgroup in the spec). The element can also contain other content within the document flow such as a table of contents, logos or a search form. Following a recent change to the spec you can now include the nav element within the header. Styling the header One short point I’d also like to cover is that in order for the majority of browsers to render the header element as a block level element you will need to explicitly declare it as a block in your CSS like so: header { display:block;} In fact you will need to do this for the majority of block level elements in HTML 5. Just as soon as browsers make it default we’ll let you know so you can save those precious bytes from your CSS. In the meantime be sure to keep up with what has or hasn’t been implemented in layout engines on this wiki. Conclusion In summary header give us some great added semantic value in order to describe the head of a section.

Friday, 5 July 2013

PhoneGap pagination tutorial using swiping from one page to another page.


Title : Hi i am going to explain you how to navigate from one screen to other screen using swiping. Description : In PhoneGap Application there are two ways to implement pagination using swiping , one way is writing our custom code for swiping from one page to other page.another way is using jQuery Mobile framework in our script.I am using the second way to explain you and in next article i will explain you the first method. I am assuming all of you know how to import jQuery mobile libraries into our html file. Download jQuery mobile files and add them to your working folder or give reference to online repository. Here is the html code :

Index.html

  • Swipe Right to view Page 1

Yeah!
You Swiped Right to view Page 1

Here is the jQuery and javascript for activating swipe functionality.
// If you swipe your page right you screen will be filled by page1 content.
$("#listitem").swiperight(function() {
    $.mobile.changePage("#page1");
});

// If you swipe your page right you screen will be filled by page1 content.
$("#listitem").swipeleft(function() {
    $.mobile.changePage("#page2");
});

Wednesday, 26 June 2013

HTML5 Tutorial - Canvas Element Lines Part - 1

Hi , I am going to explain you how to use or work with html5 new canvas element.In part one i am going to explain you about how to draw lines in canvas. Canvas Element : The canvas element is the actual DOM node that's embedded in the HTML page. Canvas Context : The canvas context is an object with properties and methods that you can use to render graphics inside the canvas element.It may be 2D or webgl(3D). Each canvas element can only have one context. If we use the getContext() method multiple times, it will return a reference to the same context object. Template of HTML5 Canvas Element.

  
  

To draw a line using HTML5 Canvas, we can use the beginPath(), moveTo(), lineTo(), and stroke() methods. First, we can use the beginPath() method to declare that we are about to draw a new path. Next, we can use the moveTo() method to position the context point (i.e. drawing cursor), and then use the lineTo() method to draw a straight line from the starting position to a new position. Finally, to make the line visible, we can apply a stroke to the line using stroke(). Unless otherwise specified, the stroke color is defaulted to black.

Line

Code for Above Image :


  
    
  
  
    
    
  

To Change the width of the line or increase the width of the line in the canvas , Please use the following code :

    
  
  
    
    
  
Changing canvas line color in html5 :
    
  
  
    
    
  
Html5 Line Cap Tutorial


    
    
  

HTML5 Tutorial - Drag and Drop

Title: HTML5 Tutorial - Drag and Drop example.

Description : I am going to explain how to drag an item and drop the item at required position.

In The above image i am going to move all right side boxes to trash i.e to left side dust bin. CSS Code for above App


JavaScript and html5 Code



HTML5 Powered with Connectivity / Realtime, Device Access, Graphics, 3D & Effects, Multimedia, Performance & Integration, Semantics, and Offline & Storage

     

Fork me on GitHub






HTML5 Code

Drag and drop

Drag the list items over the dustbin, and drop them to have the bin eat the item

Original Source

Tuesday, 25 June 2013

PhoneGap Tutorial - Parsing xml file using javascipt and displaying the data on the android and ios mobile screens

Title : I am going to explain u how to parse xml file and display data on your mobile screen.

Description : In today's world every business application need to contact webservices or xml services or xml files in the server and parse the files and need to display some results on the screen.for example take a live cricket score card : in the server we write a program where the score will be updated ball by ball,run by run in the web service , and the xml file also get updated with the live score and now the our application screen should also contact the webservice every 5 seconds and parse xml file and will update the live score for us , I will explain this with source code latter , for now i will explain you a simple example.

Here is the xml file which we are going to parse.
    
    
        MakeMyTrip.com
        MakeMyTrip.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.jpg
    
    
        GoIbibo.com
        GoIbibo.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.png
    
    
        Abhibus.com
        Abhibus.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.png
    
    
        Travelyaari.com
        Travelyaari.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.png
    
    
        Redbus.in
        Redbus.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.jpg
    
    
        Expedia.co.in
        Expedia.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.png
    
    
        Other websites
        We 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
    

Now we have to parse the above file using java script and display the results using html5. Here is the html and javascript code to parse this xml file.

Javascript file

function travel(){	
	if (window.XMLHttpRequest)
	 {	// code for IE7+, Firefox, Chrome, Opera, Safari
		xmlhttp=new XMLHttpRequest();
	 }
	else
	 {	// code for IE6, IE5
		xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	 }
		xmlhttp.open("GET","Travel.xml",false);
		xmlhttp.send();
		xmlDoc=xmlhttp.responseXML;		
		travels = xmlDoc.getElementsByTagName("website");
		alert("travels:"+travels.length);
		var websites = [];
		var description = [];
		var logos = [];		
		for(var travel=0;travel

Html File



  
    
    
    Minimal AppLaud App


	  
	    

 
  
  
 
  
  
  

Coupons Shop

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.

PhoneGap Accelerometer Tutorial with example

PhoneGap Accelerometer tutorial with example

Title :

Wednesday, 19 June 2013

PhoneGap Tutorial - posting form data to MySql database Using PHP

Hi friends i am going to explain how to post mobile form data to MySql Database using PHP : Title : PhoneGap Tutorial - posting form data to MySql database Using PHP. Here is the html form source code , Requirements : PHP Server(you can install it in your local server or other wise you can use many free php webhosting servers online , I am using neq3.com for free control panel) Html5 JavaScript Css Here are the source files Html and JavaScript Files : Index.html




Insert title here





    
Ajax Form
Category:
Website:
CouponTitle :
CouponDescription :
CouponCode :
AffiliateLink :
AffiliateImage :
Here is the PHP Server file :

All Form data will be stored in mysql database like this In my next tutorial i am going to explain how to convert this table data xml service or xml sothat it can be used as webservice.

PhoneGap tutorial parsing xml file and displaying results on android screen.

Parsing xml file using JavaScript for PhoneGap Applications.

Hi Friends i am going to show how to parse xml file using javascript without using using any jQuery  Mobile Here is the xml file i am going to parse :
    
    
        MakeMyTrip.com
        MakeMyTrip.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.jpg
    
    
        GoIbibo.com
        GoIbibo.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.png
    
    
        Abhibus.com
        Abhibus.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.png
    
    
        Travelyaari.com
        Travelyaari.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.png
    
    
        Redbus.in
        Redbus.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.jpg
    
    
        Expedia.co.in
        Expedia.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.png
    
    
        Other websites
        We 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
    


I am going to parse above xml file and display results as below Here is the JavaScript file source code : Travel.js
function travel(){	
	if (window.XMLHttpRequest)
	 {	// code for IE7+, Firefox, Chrome, Opera, Safari
		xmlhttp=new XMLHttpRequest();
	 }
	else
	 {	// code for IE6, IE5
		xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	 }
		xmlhttp.open("GET","Travel.xml",false);
		xmlhttp.send();
		xmlDoc=xmlhttp.responseXML;		
		travels = xmlDoc.getElementsByTagName("website");
		alert("travels:"+travels.length);
		var websites = [];
		var description = [];
		var logos = [];		
		for(var travel=0;travel
Here is the html source code : Coupons.html


  
    
    
    Minimal AppLaud App


	  
	    

 
  
  
 
  
  
  

Coupons Shop

Css file used for this page : Styles.css source code
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  outline: none;
}
html { height: 101%; }
body { font-size: 62.5%; line-height: 1; font-family: Verdana, Arial, Tahoma, sans-serif; }

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
ol, ul { list-style: none; }

blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }

table { border-collapse: collapse; border-spacing: 0; }
img { border: 0; max-width: 100%; }

a { text-decoration: none; }

/** content display **/
#view { display: block; max-width: 800px; padding: 0; margin: 0; }

#container { display: block; margin-top: 55px; }
#container ul { }
#container ul a li { 
	display: block;
	width: 100%;
	height: 90px;
	border-bottom: 1px solid #b9b9b9;
	border-top: 1px solid #f7f7f7;
	background: #ebebeb;
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ffffff) to(#ebebeb));
  background-image: -webkit-linear-gradient(top, #ffffff, #ebebeb);
  background-image:    -moz-linear-gradient(top, #ffffff, #ebebeb);
  background-image:      -o-linear-gradient(top, #ffffff, #ebebeb);
  background-image:         linear-gradient(top, #ffffff, #ebebeb); 
}

#container ul a { display: block; position: relative; width: 100%; }
#container ul li h2 { font-size: 2.1em; line-height: 1.3em; font-weight: normal; letter-spacing: -0.03em; padding-top: 4px; color: #55678d; }
#container ul li p.desc { color: #555; font-family: Arial, sans-serif; font-size: 1.3em; line-height: 1.3em; white-space: nowrap; overflow: hidden; }

#container ul li .price { position: absolute; bottom: 10px; left: 90px; font-size: 1.2em; font-weight: bold; color: #6ea247; }

#container ul li img.thumbnail { 
	background: #fff;
	display: inline-block;
	float: left;
	padding: 2px;
	margin-top: 6px;
	margin-left: 5px;
	margin-right: 8px;
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

#container ul a:hover li h2 { color: #7287b1; }
#container ul a:hover li p.desc { color: #757575; }

#container ul a:hover li {
background: #efefef;
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ffffff) to(#efefef));
background-image: -webkit-linear-gradient(top, #ffffff, #efefef);
background-image:    -moz-linear-gradient(top, #ffffff, #efefef);
background-image:      -o-linear-gradient(top, #ffffff, #efefef);
background-image:         linear-gradient(top, #ffffff, #efefef);
}

/** top header bar **/
header { 
display: block;
position: fixed; 
top: 0;
z-index: 9999;
height: 55px;
width: 100%;
max-width: 800px;
border-bottom: 1px solid #262422;

background: #195d95;

}

header h2 { font-size: 2.4em; font-family: Tahoma, Arial, sans-serif; font-weight: bold; line-height: 55px; text-align: center; color: #efefef; text-shadow: 1px 1px 0px #000;
 animation-duration: 3s;
  animation-name: slidein;
}
 
@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%
  }
 
  to {
    margin-left: 0%;
    width: 100%;
  }
}


/** basic media queries **/
@media only screen and (max-width: 480px) {
	#container ul li h2 { font-size: 1.75em; }
	
	#container ul li img.thumbnail { margin-top: 2px; }
}

@media only screen and (max-width: 320px) {
	#container ul li p.desc { display: none; }
}


/** clearfix **/
.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
.clearfix { display: inline-block; }
 
html[xmlns] .clearfix { display: block; }
* html .clearfix { height: 1%; }
ScreenShot

Tuesday, 18 June 2013

The Java Tutorials - What can Java do? How can Java Technology Change My Life?

Answers to Above Questions :


What Can Java Technology Do?


The general-purpose, high-level Java programming language is a powerful software platform. Every full implementation of the Java platform gives you the following features:
  • Development Tools: The development tools provide everything you'll need for compiling, running, monitoring, debugging, and documenting your applications. As a new developer, the main tools you'll be using are the javac compiler, the java launcher, and the javadoc documentation tool.
  • Application Programming Interface (API): The API provides the core functionality of the Java programming language. It offers a wide array of useful classes ready for use in your own applications. It spans everything from basic objects, to networking and security, to XML generation and database access, and more. The core API is very large; to get an overview of what it contains, consult the Java Platform Standard Edition 7 Documentation.
  • Deployment Technologies: The JDK software provides standard mechanisms such as the Java Web Start software and Java Plug-In software for deploying your applications to end users.
  • User Interface Toolkits: The Swing and Java 2D toolkits make it possible to create sophisticated Graphical User Interfaces (GUIs).
  • Integration Libraries: Integration libraries such as the Java IDL API, JDBC™ API, Java Naming and Directory Interface™ (JNDI) API, Java RMI, and Java Remote Method Invocation over Internet Inter-ORB Protocol Technology (Java RMI-IIOP Technology) enable database access and manipulation of remote objects.


    How Will Java Technology Change My Life?

    We can't promise you fame, fortune, or even a job if you learn the Java programming language. Still, it is likely to make your programs better and requires less effort than other languages. We believe that Java technology will help you do the following:
    • Get started quickly: Although the Java programming language is a powerful object-oriented language, it's easy to learn, especially for programmers already familiar with C or C++.
    • Write less code: Comparisons of program metrics (class counts, method counts, and so on) suggest that a program written in the Java programming language can be four times smaller than the same program written in C++.
    • Write better code: The Java programming language encourages good coding practices, and automatic garbage collection helps you avoid memory leaks. Its object orientation, its JavaBeans™ component architecture, and its wide-ranging, easily extendible API let you reuse existing, tested code and introduce fewer bugs.
    • Develop programs more quickly: The Java programming language is simpler than C++, and as such, your development time could be up to twice as fast when writing in it. Your programs will also require fewer lines of code.
    • Avoid platform dependencies: You can keep your program portable by avoiding the use of libraries written in other languages.
    • Write once, run anywhere: Because applications written in the Java programming language are compiled into machine-independent bytecodes, they run consistently on any Java platform.
    • Distribute software more easily: With Java Web Start software, users will be able to launch your applications with a single click of the mouse. An automatic version check at startup ensures that users are always up to date with the latest version of your software. If an update is available, the Java Web Start software will automatically update their installation.

The Java Tutorials - About the Java Technology

Java technology is both a programming language and a platform.

The Java Programming Language

The Java programming language is a high-level language that can be characterized by all of the following buzzwords:
  • Simple
  • Object oriented
  • Distributed
  • Multithreaded
  • Dynamic
  • Architecture neutral
  • Portable
  • High performance
  • Robust
  • Secure
Each of the preceding buzzwords is explained in The Java Language Environment , a white paper written by James Gosling and Henry McGilton.
In the Java programming language, all source code is first written in plain text files ending with the .java extension. Those source files are then compiled into .class files by the javac compiler. A .class file does not contain code that is native to your processor; it instead contains bytecodes — the machine language of the Java Virtual Machine1 (Java VM). The java launcher tool then runs your application with an instance of the Java Virtual Machine.
Figure showing MyProgram.java, compiler, MyProgram.class, Java VM, and My Program running on a computer.
An overview of the software development process.
Because the Java VM is available on many different operating systems, the same .class files are capable of running on Microsoft Windows, the Solaris™ Operating System (Solaris OS), Linux, or Mac OS. Some virtual machines, such as the Java SE HotSpot at a Glance, perform additional steps at runtime to give your application a performance boost. This include various tasks such as finding performance bottlenecks and recompiling (to native code) frequently used sections of code.
Figure showing source code, compiler, and Java VM's for Win32, Solaris OS/Linux, and Mac OS
Through the Java VM, the same application is capable of running on multiple platforms.

The Java Platform

A platform is the hardware or software environment in which a program runs. We've already mentioned some of the most popular platforms like Microsoft Windows, Linux, Solaris OS, and Mac OS. Most platforms can be described as a combination of the operating system and underlying hardware. The Java platform differs from most other platforms in that it's a software-only platform that runs on top of other hardware-based platforms.
The Java platform has two components:
  • The Java Virtual Machine
  • The Java Application Programming Interface (API)
You've already been introduced to the Java Virtual Machine; it's the base for the Java platform and is ported onto various hardware-based platforms.
The API is a large collection of ready-made software components that provide many useful capabilities. It is grouped into libraries of related classes and interfaces; these libraries are known as packages. The next section, What Can Java Technology Do? highlights some of the functionality provided by the API.
Figure showing MyProgram.java, API, Java Virtual Machine, and Hardware-Based Platform
The API and Java Virtual Machine insulate the program from the underlying hardware.
As a platform-independent environment, the Java platform can be a bit slower than native code. However, advances in compiler and virtual machine technologies are bringing performance close to that of native code without threatening portability.
The terms"Java Virtual Machine" and "JVM" mean a Virtual Machine for the Java platform.



Source : http://docs.oracle.com/javase/tutorial/getStarted/intro/definition.html

Wednesday, 2 January 2013

HTML5 Tutorial - Sections and Outlines of an HTML5 Document


Title : Sections and Outlines of an HTML5 Document.

Details:Technology : HTML5/JavaScript

Completion Time: 1 Hour

Difficulty : easy

Description :
    
                   I am going to explain some new elements in HTML5 allowing web developers to describe the web document with standard semantics.

Problems solved in HTML5 compared to HTML 4 

1)HTML5 removes the need for <br />
<div>
elements from the outlining algorithm by introducing     a new element,<br />
<section>,the Html Section element.

2)Merging several documents is hard: inclusion of a sub-document in a main document     means changing the level of the HTML Headings Element so that the outline is kept. This  is solved in HTML5 as the newly introduced sectioning elements (<article>, <section>, <nav> and <aside>) are always subsections of their nearest ancestor section, regardless of what sections are created by internal headings.

3)Because each HTML Heading Element is part of the outline, it is not possible to describe a subtitle or secondary title (e.g., <h1>
Justine</h1>
<h2>
Les Malheurs de la Vertu</h2>
creates the outline 1. Justine 1.1 Les Malheurs de la Vertu). HTML5 introduces the <hgroup> element that hides all the heading elements except the first one of the highest rank (e.g., <hgroup><h1>
Justine</h1>
<h2>
Les Malheurs de la Vertu</h2>
</hgroup> creates the outline 1. Justine).

4)In HTML4, every section is part of the document outline. But documents are often not that linear. A document can have special sections containing information that is not part of, though it is related to, the main flow, like an advertisement block or an explanation box. HTML5 introduces the <aside> element allowing such sections to not be part of the main outline.

5)Again, in HTML4, because every section is part of the document outline, there is no way to have section containing information related not to the document but to the whole site, like logos, menus, table of contents, or copyright information and legal notices. For that purpose, HTML5 introduces three specific sections elements: <nav> for collections of links, such as a table of contents, <footer> and <header> for site-related information.

Here is an Example for Showing Basic Html5 Elements(<section>,<article>,<header>,<nav>,<footer>,<aside>):

<section>  : Our Home page has been divided into number of sections which consisits of header,article 1,article 2 and footer.we have innersections also where we can embed animations inside section , we can write articles inside section element for more details , please go through the code , demo and image below.






From , the above image we can see <header>,<nav,<article>,<aside>,<footer> and some animations where a girl rides a bicycle,birds flies in the sky.

All this elements are aligned with particular space looking the code our body of the page starts with <section> tag with id="wrapper" for style and this section consists <header>,<nav>,<article>,<aside>,<footer> elements.
<header> : Next going through code we have <header> element where place some logo there.
<article>  : We have article tag for writing some articles like some tutorials,stories etc.
<aside>    : We have this element for writing some notes side to our articles or displaying some
                    advertisements.
<footer>  : We have this tag for writing some copy write notices or linking up some back links for              our sitemap index.
animation : I have included some sections which wraps css3 elements or style elements using id's assigned in the css style sheet.

Index.html












 
 
 
         HTML5 Semantics Example
 

 


    

HTML5 Semantics Example

What We Provide?

Posted on by Alex Jones
We Provide All Domestic academic admissions for B.Tech,M.tech,Mca,Mba,Bds,Mbbs through out the country.we provide admissions for councilling fee only with out any donations,we look after accomdation along with career guidence.we are developing mobile app for colleges and students to communicate with each others and get admissions online from your mobile only.we provide online tutorials for students who want to learn new technologies with out any fee

Technologies

Posted on by Alex Jones
We Provide online courses for the following : JAVA HTML5 JavaScript Mobile Development
SS Educational Consultancy
Here is the code for css
@charset "utf-8";
/* CSS Document

Name: Vivek Kumar
Email: vivekwebmaker@gmail.com
Company:IDS Infotech Ltd.
 */

* {
	margin:0px;
	padding:0px;
}
body {
	overflow-x:hidden;
}

/*
//////////////////////////////////////////////////
				CLOUD
//////////////////////////////////////////////////
*/
#clouds {
	padding:100px 0px 0px;
	background:#c9dbe9;
	background:-webkit-linear-gradient(top, #c9dbe9 0%, #fff 100%);
	background:-linear-gradient(top, #c9dbe9 0%, #fff 100%);
	background:-moz-linear-gradient(top, #c9dbe9 0%, #fff 100%);
}
.cloud {
	width:200px;
	height:60px;
	background:#fff;
	border-radius:200px;
	-moz-border-radius:200px;
	-webkit-border-radius:200px;
	position:relative;
}
.cloud:before, .cloud:after {
	content:'';
	position:absolute;
	width:100px;
	height:80px;
	background:#fff;
	position:absolute;
	top:-15px;
	left:10px;
	border-radius:100px;
	-moz-border-radius:100px;
	-webkit-border-radius:100px;
	-webkit-transform:rotate(30deg);
	transform:rotate(30deg);
	-moz-transform:rotate(30deg);
}
.cloud:after {
	width:120px;
	height:120px;
	top:-55px;
	left:auto;
	right:15px;
}

/*
//////////////////////////////////////////////////
				CLOUD Animation Code
//////////////////////////////////////////////////
*/

.x1 {
	-webkit-animation:moveclouds 18s ease-in-out infinite;
	-moz-animation:moveclouds 18s ease-in-out infinite;
	-o-animation:moveclouds 18s ease-in-out infinite;
	top:-10px;
	
}
.x2 {
	left:200px;
	top:-50px;
	-webkit-transform:scale(0.6);
	-mox-transform:scale(0.6);
	transform:scale(0.6);
	opacity: 0.6; /*opacity proportional to the size*/
	-webkit-animation:moveclouds 25s ease-in-out infinite;
	-moz-animation:moveclouds 25s ease-in-out infinite;
	-o-animation:moveclouds 25s ease-in-out infinite;
	}
.x3 {
	left:0px;
	top:-175px;
	-webkit-transform:scale(0.8);
	-mox-transform:scale(0.8);
	transform:scale(0.8);
	opacity: 0.6; /*opacity proportional to the size*/
	-webkit-animation:moveclouds 30s ease-in-out infinite;
	-moz-animation:moveclouds 30s ease-in-out infinite;
	-o-animation:moveclouds 30s ease-in-out infinite;
	
}
.x4 {
	left:470px;
	top:-195px;
	-webkit-transform:scale(0.75);
	-mox-transform:scale(0.75);
	transform:scale(0.75);
	opacity: 0.75; /*opacity proportional to the size*/
	-webkit-animation:moveclouds 15s ease-in-out infinite;
	-moz-animation:moveclouds 15s ease-in-out infinite;
	-o-animation:moveclouds 15s ease-in-out infinite;
	
}
.x5 {
	left:-100px;
	top:-150px;
	-webkit-transform:scale(0.8);
	-mox-transform:scale(0.8);
	transform:scale(0.8);
	opacity: 0.8; /*opacity proportional to the size*/
	-webkit-animation:moveclouds 35s ease-in-out infinite;
	-moz-animation:moveclouds 35s ease-in-out infinite;
	-o-animation:moveclouds 35s ease-in-out infinite;
	
}
.x6 {
	left:50px;
	top:-280px;
	opacity: 0.4; /*opacity proportional to the size*/
	-webkit-animation:moveclouds 22s ease-in-out infinite;
	-moz-animation:moveclouds 22s ease-in-out infinite;
	-o-animation:moveclouds 22s ease-in-out infinite;
	
}
.x7 {
	left:-80px;
	top:-255px;
	-webkit-transform:scale(0.8);
	-mox-transform:scale(0.8);
	transform:scale(0.8);
	opacity: 0.8; /*opacity proportional to the size*/
	-webkit-animation:moveclouds 40s ease-in-out infinite;
	-moz-animation:moveclouds 40s ease-in-out infinite;
	-o-animation:moveclouds 40s ease-in-out infinite;
	
}
@-webkit-keyframes moveclouds {
	0% {
		margin-left:110%;
	}
 	100% {
		margin-left:-110%;
	}
}
@-moz-keyframes moveclouds {
	0% {
		margin-left:110%;
	}
	100% {
		margin-left:-110%;
	}
}
@-o-keyframes moveclouds {
	0% {
		margin-left:110%;
	}
100% {
		margin-left:-110%;
	}
}

/*
//////////////////////////////////////////////////
				GRASS
//////////////////////////////////////////////////
*/
.grass {
	background:url(grass.png) bottom center no-repeat;
	height:295px;
	width:100%;
	bottom:0px;
	position:absolute;
}
.cycle {
	/*background:url(cycle-2.png) no-repeat;*/
	width:279px;
	height:260px;
	position:absolute;
	right:0px;
	bottom:-2px;
	
}
.bycycle {
	background:url(cycle-2.png) no-repeat;
	width:279px;
	height:260px;
	position:absolute;
	z-index:1;
}
/*
//////////////////////////////////////////////////
				Cycle Animation Code
//////////////////////////////////////////////////
*/
.cycle-ride {
	-webkit-animation:movecycle 25s ease-in-out infinite;
	-moz-animation:movecycle 25s ease-in-out infinite;
	-o-animation:movecycle 25s ease-in-out infinite;
}
@-webkit-keyframes movecycle {
	0% {
		margin-right:100%;
	}
	100% {
		margin-right:-100%;
	}
}
@-moz-keyframes movecycle {
	0% {
		margin-right:100%;
	}
	100% {
		margin-right:-100%;
	}
}
@-o-keyframes movecycle {
	0% {
		margin-right:100%;
	}
	100% {
		margin-right:-100%;
	}
}

/*
//////////////////////////////////////////////////
				BIRD
//////////////////////////////////////////////////
*/
.bird {
	background:url(birds.png) no-repeat;
	width:376px;
	height:191px;
	position:absolute;
}
/*
//////////////////////////////////////////////////
				BIRD Animation Code
//////////////////////////////////////////////////
*/
.fly {
	-webkit-animation:birdfly 20s ease-in-out infinite;
	-moz-animation:birdfly 20s ease-in-out infinite;
	-o-animation:birdfly 20s ease-in-out infinite;
}
@-webkit-keyframes birdfly {
	0% {
		margin-left:100%;
		top:300px
	}
	20% {
		top:200px;
	}
	40% {
		top:150px;
	}
	50% {
		top:100px;
	}
	60% {
		top:50px;
	}
	70% {
		top:-300px;
	}
	80% {
		top:-50px;
	}
	100% {
		margin-left:-100%;
		top:-70px;
		opacity:.4;
		-webkit-transform:scale(0.4);
		-moz-transform:scale(0.4);
		transform:scale(0.4);
	}
}
@-moz-keyframes birdfly {
	0% {
		margin-left:100%;
		top:300px
	}
	20% {
		top:200px;
	}
	40% {
		top:150px;
	}
	 50% {
		top:100px;
	}
	60% {
	 	top:50px;
	}
	70% {
		top:-300px;
	}
	80% {
		top:-50px;
	}
	100% {
		margin-left:-100%;
	 	top:-70px;
	 	opacity:.4;
	 	-webkit-transform:scale(0.4);
	 	-moz-transform:scale(0.4);
	 	transform:scale(0.4);
	}
}
@-o-keyframes birdfly {
	0% {
		margin-left:100%;
		top:200px
	}
	20% {
		top:150px;
	}
	40% {
		top:100px;
	}
	50% {
		top:500px;
	}
	60% {
		top:0px;
	}
	70% {
		top:-50px;
	}
	80% {
		top:-70px;
	}
	100% {
		margin-left:-100%;
	 	top:-100px;
	 	opacity:.4;
	 	-webkit-transform:scale(0.4);
	 	-mox-transform:scale(0.4);
	 	transform:scale(0.4);
	}
}

.name{
	font-size:30px;
	color: transparent;
	right:20px;
	position:absolute;
	bottom:0px;
	
	-webkit-animation:name 25s ease-in-out infinite;
	-moz-animation:name 25s ease-in-out infinite;
	-o-animation:name 25s ease-in-out infinite;
}

@-webkit-keyframes name {
	0% {
		text-shadow: 0 0 0px rgba(0,0,0,1);
	}
	100% {
		text-shadow: 0 0 10px rgba(0,0,0,0.5);
	}
}
@-moz-keyframes name {
	0% {
		text-shadow: 0 0 0px rgba(0,0,0,1);
	}
	100% {
		text-shadow: 0 0 10px rgba(0,0,0,0.5);
	}
}
@-o-keyframes name {
	0% {
		text-shadow: 0 0 0px rgba(0,0,0,1);
	}
	100% {
		text-shadow: 0 0 10px rgba(0,0,0,0.5);
	}
}





/* Create the animation blocks */


/* Spinning, gradient circle; CSS only! */
.cycle-front, .cycle-back {
  width: 108px;
  height: 107px;
  position:absolute;
  bottom:8px;
  right:8px;

  background:url(wheel-front.png) no-repeat;  
 
  -webkit-animation:spin 3s ease-in-out infinite;
  -moz-animation:spin 3s ease-in-out infinite;
  -o-animation:spin 3s ease-in-out infinite;
 
}

.cycle-back{
	background:url(wheel-back.png) no-repeat;
	bottom:8px;
  	left:8px;
}

@-webkit-keyframes spin {
  from {  
    -webkit-transform: rotate(0deg);  
}  
to {  
    -webkit-transform: rotate(360deg);  
    }  
}
@-moz-keyframes spin {
  from {  
    -moz-transform: rotate(0deg);  
}  
to {  
    -moz-transform: rotate(360deg);  
    }  
}
@-o-keyframes spin {
  from {  
    -o-transform: rotate(0deg);  
}  
to {  
    -o-transform: rotate(360deg);  
    }  
}