tag:blogger.com,1999:blog-70553791454303262282024-03-09T18:46:50.533-08:00PhoneGap TutorialUnknownnoreply@blogger.comBlogger35125tag:blogger.com,1999:blog-7055379145430326228.post-87184737388194027402014-06-10T22:48:00.002-07:002014-06-11T00:17:59.339-07:00HTML5 Tutorial Part 2 - HTML5 Semantics<div dir="ltr" style="text-align: left;" trbidi="on">
<br /></div>
<p>The HTML5 specification brings several new elements to web developers allowing them to describe the structure of a web document with standard semantics. This document describes these elements and how to use them to define the desired outline for any document.</p>
The structure of a document, i.e., the semantic structure of what is between <body> and </body>, is fundamental to presenting the page to the user. HTML4 uses the notion of sections and sub-sections of a document to describe its structure. A section is defined by an HTML Dividing (<div>) element with HTML Heading Elements <pre class="brush:html"><h1>, <h2>, <h3>, <h4>, <h5>, or <h6></pre> within it, defining its title. The relationships of these HTML Dividing and HTML Heading Elements leads to the structure of the document and its outline.
<h4>See the following Mark up</h4>
<pre class="brush:html">
<div class="section" id="forest-elephants" >
<h1>Forest elephants</h1>
<p>In this section, we discuss the lesser known forest elephants.
...this section continues...
<div class="subsection" id="forest-habitat" >
<h2>Habitat</h2>
<p>Forest elephants do not live in trees but among them.
...this subsection continues...
</div>
</div>
</pre>
<h3>Here is the Output for above program</h3>
<br>1. Forest elephants
</br> <br> 1.1 Habitat</br>
<p>
The div elements aren't mandatory to define a new section. The mere presence of an HTML Heading Element is enough to imply a new section. Therefore,
<pre class="brush:html">
<h1>Forest elephants</h1>
<p>In this section, we discuss the lesser known forest elephants.
...this section continues...
<h2>Habitat</h2>
<p>Forest elephants do not live in trees but among them.
...this subsection continues...
<h2>Diet</h2>
<h1>Mongolian gerbils</h1>
</pre>
<h3>Leads to the following outline:</h3>
<br>1. Forest elephants</br>
<br> 1.1 Habitat </br>
<br> 1.2 Diet </br>
<br>2. Mongolian gerbils</br>
<h3>Problems Solved by HTML5</h3>
<p>The HTML 4 definition of the structure of a document and its implied outlining algorithm is very rough and leads to numerous problems:</p>
<p>1) Usage of div for defining semantic sections, without defining specific values for the class attributes makes the automation of the outlining algorithm impossible ("Is that div part of the outline of the page, defining a section or a subsection?" Or "is it only a presentational div, only used for styling?"). In other terms, the HTML4 spec is very imprecise on what is a section and how its scope is defined. Automatic generation of outlines is important, especially for assistive technology, that are likely to adapt the way they present information to the users according to the structure of the document. HTML5 removes the need for div elements from the outlining algorithm by introducing a new element, section, the HTML Section Element.</p>
<p>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.</p>
<p>3) 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.</p>
<p> 4) 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.</p>
<p>More generally HTML5 brings precision to the sectioning and heading features, allowing document outlines to be predictable and used by the browser to improve the user experience.</p>
<h2>The HTML5 Outline Algorithm</h2>
<h3>Defining Sections in HTML5</h3>
<p>All content lying inside the body element is part of a section. Sections in HTML5 can be nested. Beside the main section, defined by the body element, section limits are defined either explicitly or implicitly. Explicitly-defined sections are the content within body, section, article, aside, footer, header, and nav tags. </p>
Example :
<pre class="brush:html">
<section>
<h1>Forest elephants</h1>
<section>
<h1>Introduction</h1>
<p>In this section, we discuss the lesser known forest elephants.</p>
</section>
<section>
<h1>Habitat</h1>
<p>Forest elephants do not live in trees but among them.</p>
</section>
<aside>
<p>advertising block</p>
</aside>
</section>
<footer>
<p>(c) 2010 The Example company</p>
</footer>
</pre>
<h3>This HTML snippet defines two top-level sections:</h3>
<pre class="brush:html">
<section>
<h1>Forest elephants</h1>
<section>
<h1>Introduction</h1>
<p>In this section, we discuss the lesser known forest elephants.</p>
</section>
<section>
<h1>Habitat</h1>
<p>Forest elephants do not live in trees but among them.</p>
</section>
<aside>
<p>advertising block</p>
</aside>
</section>
<footer>
<p>(c) 2010 The Example company</p>
</footer>
</pre>
<h3>The first section has three subsections:</h3>
<pre class="brush:html">
<section>
<h1>Forest elephants</h1>
<section>
<h1>Introduction</h1>
<p>In this section, we discuss the lesser known forest elephants.</p>
</section>
<section>
<h1>Habitat</h1>
<p>Forest elephants do not live in trees but among them.</p>
</section>
<aside>
<p>advertising block</p>
</aside>
</section>
<footer>
<p>(c) 2010 The Example company</p>
</footer>
</pre>
<h3>This leads to the following structure:</h3>
<br>1. Forest elephants</br>
<br>1.1 Introduction</br>
<br>1.2 Habitat</br>
<br>1.3 Section (aside)</br>
Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-7055379145430326228.post-21520876958880265062014-06-10T22:36:00.003-07:002014-06-10T22:43:03.629-07:00HTML5 Tutorial Part 1 - Introduction to HTML5<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<h3>HTML5 Features and Tutorial - Part 1</h3>
<p>HTML5 is the latest evolution of the standard that features html. The term represents two different concepts:
It is the new version of language html, with new elements, attributes, and behaviors.</p>
<p>And a larger set of technologies that allows more diverse and powerful websites and applications.This set is called HTML5 and friends and often called it as HTML5.</p>
<p>Designed to be usable by all Open Web developers, this reference page links to numerous resources about HTML5 technologies, classified into several groups based on their function.</p>
<ul>
<li>1)Semantics: Allowing you to describe more precisely what content is.</li>
<li>2) Connectivity: Allowing you to communicate with the server in new and innovative ways.</li>
<li>3) Offline & Storage : Allowing webpages to store data on the client-side locally and operate offline more efficiently.</li>
<li>4) Multimedia: Making Audio & Video first class citizens in the open web.</li>
<li>5) 2D/3D Graphics & Effects : Allowing a much more diverse range of presentation options.</li>
<li>6) Performance and Integration: Performing greater speed optimization and better usage of computer hardware.</li>
<li>7) Device Access : Allowing for the usage of various input and output devices.</li>
<li>8) Styling : letting authors write more sophisticated themes.</li>
</ul>
</div>
Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-7055379145430326228.post-71231677162119635192014-04-16T02:07:00.001-07:002014-04-16T03:03:11.006-07:00HTML5 Interview Questions and Answers Part - 1<b>What is the relationship between SGML,HTML , XML and HTML?</b>
SGML (Standard generalized markup language) is a standard which tells how to specify document markup. It’s only a Meta language which describes how a document markup should be. HTML is a markup language which is described using SGML.
So by SGML they created DTD which the HTML refers and needs to adhere to the same. So you will always find “DOCTYPE” attribute at the top of HTML page which defines which DTD is used for parsing purpose.
<pre class="brush:html">
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
</pre>
Now parsing SGML was a pain so they created XML to make things better. XML uses SGML. For example in SGML you have to start and end tags but in XML you can have closing tags which close automatically (“”).
XHTML was created from XML which was used in HTML 4.0. So for example in SGML derived HTML “
” is not valid but in XHTML it’s valid. You can refer XML DTD as shown in the below code snippet.<a href="http://www.codeproject.com/KB/aspnet/702051/image2.png" imageanchor="1" ><img border="0" src="http://www.codeproject.com/KB/aspnet/702051/image2.png" /></a>Unknownnoreply@blogger.com3tag:blogger.com,1999:blog-7055379145430326228.post-74058540006956242682014-03-10T04:55:00.000-07:002014-03-10T04:55:14.468-07:00HTML5 Simplequiz #1<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="entry">
A few years ago, <a href="http://www.simplebits.com/">Dan Cederholm</a> published a series of articles called <a href="http://simplebits.com/categories/simplequiz/">Simplequiz</a>
in which he posed some options for marking up a specified piece of
content and invited readers to choose the one they felt was the best way
to mark that up. The value was in the comments in which people said why
they made that choice and debated the options (which means it is <em>THE LAW</em> that you read the preceeding comments before adding your own).<br />
With Dan’s blessing, we’re beginning an occasional series of HTML5 Simplequizzes. And here’s the first.<br />
Consider a products page on a website. It might be a page showing widgets, HTML5 books or Remy’s favourite <a href="http://www.amazon.co.uk/s/ref=nb_sb_noss?url=search-alias%3Daps&field-keywords=nose+hair+remover&x=0&y=0">nose hair removers</a>. What’s the best way to mark up the products?<br />
<strong>Note: please DON’T USE ANGLE BRACKETS in your comments.
Escape them with &lt; and &gt; or just use [foo] – we’ll know
what you mean.</strong><br />
<h2>
A:</h2>
<pre><span class="tag"><div></span><span class="pln">
</span><span class="tag"><h2></span><span class="pln">Groom Mate Platinum Xl Nose & Ear Hair Trimmer by Groom Mate</span><span class="tag"></h2></span><span class="pln">
</span><span class="tag"></div></span><span class="pln">
</span><span class="tag"><div></span><span class="pln">
</span><span class="tag"><h2></span><span class="pln">Philips NT9110 Nose Hair Trimmer by Philips</span><span class="tag"><h2></span><span class="pln">
...</span><span class="tag"></div></span></pre>
<h2>
B:</h2>
<pre><span class="tag"><article></span><span class="pln">
</span><span class="tag"><h2></span><span class="pln">Groom Mate Platinum Xl Nose & Ear Hair Trimmer by Groom Mate</span><span class="tag"></h2></span><span class="pln">
...</span><span class="tag"></article></span><span class="pln">
</span><span class="tag"><article></span><span class="pln">
</span><span class="tag"><h2></span><span class="pln">Philips NT9110 Nose Hair Trimmer by Philips</span><span class="tag"><h2></span><span class="pln">
...</span><span class="tag"></article></span></pre>
<h2>
C:</h2>
<pre><span class="tag"><section></span><span class="pln">
</span><span class="tag"><h2></span><span class="pln">Groom Mate Platinum Xl Nose & Ear Hair Trimmer by Groom Mate</span><span class="tag"></h2></span><span class="pln">
...</span><span class="tag"></section></span><span class="pln">
</span><span class="tag"><section></span><span class="pln">
</span><span class="tag"><h2></span><span class="pln">Philips NT9110 Nose Hair Trimmer by Philips</span><span class="tag"><h2></span><span class="pln">
...</span><span class="tag"></section></span></pre>
<h2>
D:</h2>
<pre><span class="tag"><nav></span><span class="pln">
</span><span class="tag"><div></span><span class="pln">
</span><span class="tag"><h2></span><span class="pln">Groom Mate Platinum Xl Nose & Ear Hair Trimmer by Groom Mate</span><span class="tag"></h2></span><span class="pln">
...</span><span class="tag"></div></span><span class="pln">
</span><span class="tag"><div></span><span class="pln">
</span><span class="tag"><h2></span><span class="pln">Philips NT9110 Nose Hair Trimmer by Philips</span><span class="tag"><h2></span><span class="pln">
...</span><span class="tag"></div></span><span class="pln">
...</span><span class="tag"></nav></span></pre>
Your answers below, please, with your rationale.<br />
</div>
</div>
Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-7055379145430326228.post-15948391760168156822014-03-10T04:50:00.001-07:002014-03-10T04:50:49.045-07:00PhoneGap and Cordova with iOS 7<div dir="ltr" style="text-align: left;" trbidi="on">
<h4>
Running Existing Apps</h4>
The first thing I tried to do after the upgrade process was to run
the existing PhoneGap applications already installed on my phone. Good
news: They run “as is” (with a minor cosmetic issues: see below).<br />
<h4>
Building and Deploying</h4>
Building and deploying new apps was also pretty straightforward. Here are the steps (I’m assuming PhoneGap 3):<br />
<ol>
<li>Install Xcode 5: the update is available in the App Store on your Mac.</li>
<li>Start Xcode 5 before building your application to make sure Xcode
downloads the required components. Before you can build a project using
the PhoneGap or Cordova command line tool, you’ll also have to accept
the new license agreement in Xcode 5.</li>
<li>Build your PhoneGap application as usual on the command line:
<div>
<div class="syntaxhighlighter bash" id="highlighter_557676">
<table border="0" cellpadding="0" cellspacing="0"><tbody>
<tr><td class="gutter"><div class="line number1 index0 alt2">
1</div>
</td><td class="code"><div class="container">
<div class="line number1 index0 alt2">
<code class="bash plain">phonegap build ios</code></div>
</div>
</td></tr>
</tbody></table>
</div>
</div>
</li>
<li>Open the project (the .xcodeproj file in platforms/ios) in Xcode, and run it on your device.</li>
</ol>
<h4>
The Status Bar Issue</h4>
On iOS7, all the applications are running full screen, and the status
bar now overlays your application. As a result, it may cover some of
your content or interfere with your header:<br />
<br />
<a href="http://coenraets.org/blog/wp-content/uploads/2013/09/ios71.png"><img alt="ios71" class="aligncenter size-full wp-image-6391" height="250" src="http://coenraets.org/blog/wp-content/uploads/2013/09/ios71.png" width="640" /></a><br />
<br />
Different solutions have been discussed in the forums (<a href="https://groups.google.com/forum/?fromgroups#%21searchin/phonegap/ios7/phonegap/Ecrn8Qr6vow/f6VTfG5kFuIJ">here</a> and <a href="https://groups.google.com/forum/#%21topic/phonegap/nNUgSOfpt5Q">here</a>).
Some of them involve native code to offset the web view. I think the
simplest and cleanest solution is to add a 20px top margin to the
document’s body using CSS. You can use version detection to avoid adding
the margin if the application is running on iOS 6. <a href="http://shazronatadobe.wordpress.com/">Shazron</a> posted a nice <a href="https://gist.github.com/shazron/6602131">Gist</a> with a simple solution:<br />
<div>
<div class="syntaxhighlighter jscript" id="highlighter_588116">
<table border="0" cellpadding="0" cellspacing="0"><tbody>
<tr><td class="gutter"><div class="line number1 index0 alt2">
1</div>
<div class="line number2 index1 alt1">
2</div>
<div class="line number3 index2 alt2">
3</div>
<div class="line number4 index3 alt1">
4</div>
<div class="line number5 index4 alt2">
5</div>
<div class="line number6 index5 alt1">
6</div>
<div class="line number7 index6 alt2">
7</div>
</td><td class="code"><div class="container">
<div class="line number1 index0 alt2">
<code class="jscript keyword">function</code> <code class="jscript plain">onDeviceReady() {</code></div>
<div class="line number2 index1 alt1">
<code class="jscript spaces"> </code><code class="jscript keyword">if</code> <code class="jscript plain">(parseFloat(window.device.version) === 7.0) {</code></div>
<div class="line number3 index2 alt2">
<code class="jscript spaces"> </code><code class="jscript plain">document.body.style.marginTop = </code><code class="jscript string">"20px"</code><code class="jscript plain">;</code></div>
<div class="line number4 index3 alt1">
<code class="jscript spaces"> </code><code class="jscript plain">}</code></div>
<div class="line number5 index4 alt2">
<code class="jscript plain">}</code></div>
<div class="line number6 index5 alt1">
<code class="jscript spaces"> </code> </div>
<div class="line number7 index6 alt2">
<code class="jscript plain">document.addEventListener(</code><code class="jscript string">'deviceready'</code><code class="jscript plain">, onDeviceReady, </code><code class="jscript keyword">false</code><code class="jscript plain">);</code></div>
</div>
</td></tr>
</tbody></table>
</div>
</div>
<br /><br />
Here is the result:<br />
<a href="http://coenraets.org/blog/wp-content/uploads/2013/09/ios72.png"><img alt="ios72" class="aligncenter size-full wp-image-6392" height="250" src="http://coenraets.org/blog/wp-content/uploads/2013/09/ios72.png" width="640" /></a><br />
<br />
<h4>
Cordova 3.1</h4>
Cordova 3.1 is expected soon (probably next week) with additional iOS 7 support:<br />
<ul>
<li>Update to the splashscreen plugin to better support the status bar</li>
<li>Update to the Media and Media Capture plugins to handle the new Microphone access permissions</li>
<li>A fix to <a href="https://issues.apache.org/jira/browse/CB-3020">this bug</a> (keyboard preferences)</li>
</ul>
<h4>
Topcoat</h4>
iOS 7 is another reason to take a look at <a href="http://topcoat.io/">Topcoat</a>,
the new CSS toolkit that I have already covered and demonstrated
multiple times in this blog. Topcoat’s flat design with no gradients or
shadows fits perfectly with the new aesthetics of iOS7. Topcoat is just a
set of CSS styles and works with any JavaScript framework: Backbone.js
AngularJS, Ember, etc.<br />
<h3>
Follow Me</h3>
</div>
Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-7055379145430326228.post-19347597466151478412014-03-10T04:47:00.001-07:002014-03-10T04:49:08.076-07:00PhoneGap tutorial - Employee Directory Sample App<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<header>
<h1 class="title">
Employee Directory Sample Application with Ratchet 2.0</h1>
</header>
<br />
<div class="post-meta">
<span class="small">By</span> <span class="author vcard"><span class="fn"><a href="http://coenraets.org/blog/author/admin/" rel="author" title="Posts by Christophe Coenraets">Christophe Coenraets</a></span></span> <span class="small">on</span> <abbr class="date time published" title="2014-02-27T12:27:01-0400">February 27, 2014</abbr> <span class="small">in</span> <span class="categories"><a href="http://coenraets.org/blog/category/cordova/" title="View all items in Cordova">Cordova</a>, <a href="http://coenraets.org/blog/category/ratchet/" title="View all items in Ratchet">Ratchet</a></span> </div>
After this week’s <a href="http://blog.getbootstrap.com/2014/02/25/ratchet-2/">double announcement</a> that <a href="http://goratchet.com/">Ratchet</a> 2.0 is available and is now part of the <a href="https://github.com/twbs">Bootstrap organization</a>, I decided to update the Ratchet/<a href="http://backbonejs.org/">Backbone</a> version of my Employee Directory application with Ratchet 2.0 and see how it looks.<br />
You can experience the application in the phone “simulator” below (type a few characters in the search box), or click <a href="http://coenraets.org/apps/directory-backbone-ratchet">here</a> to run the app in a full browser window.<br />
<br />
<br />
<h3>
Platform-Specific Themes</h3>
Among other new features, Ratchet 2.0 has a new base theme that you can overlay with optional themes for iOS and Android.<br />
<h3>
iOS theme</h3>
Here is the exact same app with the iOS theme:<br />
<div style="background-image: url('http://coenraets.org/blog/wp-content/uploads/2013/06/iphone5.png'); background-repeat: no-repeat; height: 690px; margin: 0px 0px 0px 0px; padding: 145px 0px 0px 27px; width: 375px;">
</div>
Click <a href="http://coenraets.org/apps/directory-backbone-ratchet/index-ios.html">here</a> to run the app in a full browser window.<br />
<h3>
Android theme</h3>
And here is the same app with the Android theme:<br />
<div style="background-image: url('http://coenraets.org/blog/wp-content/uploads/2013/06/iphone5.png'); background-repeat: no-repeat; height: 690px; margin: 0px 0px 0px 0px; padding: 145px 0px 0px 27px; width: 375px;">
</div>
Click <a href="http://coenraets.org/apps/directory-backbone-ratchet/index-android.html">here</a> to run the app in a full browser window.<br />
<h3>
Source Code</h3>
The source code for the application is available on GitHub: <a href="http://github.com/ccoenraets/directory-backbone-ratchet">http://github.com/ccoenraets/directory-backbone-ratchet</a><br />
<h3>
Wrapping Up</h3>
After a long wait, it’s great to see this new version of Ratchet, and
it’s going to be interesting to see how the project evolves and how
active it will be in its new home.<br />
<a href="http://ionicframework.com/">Ionic</a> (built on top of <a href="http://angularjs.org/">AngularJS</a>)
has a lot of momentum in this space right now. It’s good to have
options, especially if you are using another architectural framework.
You can read about the Ionic/AngularJS version of the same application
in <a href="http://coenraets.org/blog/2014/02/sample-mobile-application-with-ionic-and-angularjs/">this post</a>.</div>
Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-7055379145430326228.post-15925500800327620322014-03-10T04:40:00.001-07:002014-03-10T04:40:32.104-07:00PhoneGap Build API for Node.js<div dir="ltr" style="text-align: left;" trbidi="on">
<a href="http://build.phonegap.com/">Adobe PhoneGap Build</a> has a powerful <a href="http://build.phonegap.com/docs/api">RESTful API</a>
that you can use to tap into PhoneGap Build’s functionality. With the
API, you can authenticate as a user and create, build, update, and
download PhoneGap applications.<br />
RESTful APIs are great but not without annoyances. All of the popular programming languages <em>(and not so popular ones)</em>
have HTTP libraries for RESTful access. The downside is that you still
need to implement the HTTP request and response communication logic.
It’s not complicated, except with some authentication types. But it is
more code to manage and grows as you encounter API quirks.<br />
This is why we use libraries.<br />
<a href="https://github.com/mwbrooks/phonegap-build-api-js">phonegap-build-api-js</a> is a <a href="https://npmjs.org/package/phonegap-build-api">published NPM module</a>
for accessing the PhoneGap Build API with node.js. It abstracts the
HTTP communication, deals with the API quirks, and leaves the rest
untouched. In other words, it simplifies accessing the PhoneGap Build
API, so that you can focus on integrating it with your product.<br />
<br />
<ul>
<li><a href="https://github.com/mwbrooks/phonegap-build-api-js">Source code</a></li>
<li><a href="https://github.com/mwbrooks/phonegap-build-api-js/issues">Issue tracker</a></li>
<li><a href="https://github.com/mwbrooks/phonegap-build-api-js#api">Interface documentation</a></li>
<li><a href="https://github.com/mwbrooks/phonegap-build-api-js#usage">Usage examples</a></li>
<li><a href="http://build.phonegap.com/docs/api">PhoneGap Build API Documentation</a></li>
</ul>
For your coding pleasure, here is an exhaustive list of usage examples:<br />
<h3 id="authentication">
Authentication</h3>
<pre><code>var client = require('phonegap-build-api');
client.auth({ username: 'zelda', password: 'tr1f0rce' }, function(e, api) {
// use `api` to make requests
});</code></pre>
<h3 id="get_httpsbuildphonegapcomapiv1me">
GET https://build.phonegap.com/api/v1/me</h3>
<pre><code>api.get('/me', function(e, data) {
console.log('error:', e);
console.log('data:', data);
});</code></pre>
<h3 id="get_httpsbuildphonegapcomapiv1apps">
GET https://build.phonegap.com/api/v1/apps</h3>
<pre><code>api.get('/apps', function(e, data) {
console.log('error:', e);
console.log('data:', data);
});</code></pre>
<h3 id="get_httpsbuildphonegapcomapiv1appsid">
GET https://build.phonegap.com/api/v1/apps/:id</h3>
<pre><code>api.get('/apps/199692', function(e, data) {
console.log('error:', e);
console.log('data:', data);
});</code></pre>
<h3 id="get_httpsbuildphonegapcomapiv1appsidicon">
GET https://build.phonegap.com/api/v1/apps/:id/icon</h3>
<pre><code>api.get('/apps/199692/icon').pipe(fs.createWriteStream('icon.png'));</code></pre>
<h3 id="get_httpsbuildphonegapcomapiv1appsidplatform">
GET https://build.phonegap.com/api/v1/apps/:id/:platform</h3>
<pre><code>api.get('/apps/199692/android').pipe(fs.createWriteStream('app.apk'));</code></pre>
<h3 id="get_httpsbuildphonegapcomapiv1keys">
GET https://build.phonegap.com/api/v1/keys</h3>
<pre><code>api.get('/keys', function(e, data) {
console.log('error:', e);
console.log('data:', data);
});</code></pre>
<h3 id="get_httpsbuildphonegapcomapiv1keysplatform">
GET https://build.phonegap.com/api/v1/keys/:platform</h3>
<pre><code>api.get('/keys/ios', function(e, data) {
console.log('error:', e);
console.log('data:', data);
});</code></pre>
<h3 id="get_httpsbuildphonegapcomapiv1keysplatformid">
GET https://build.phonegap.com/api/v1/keys/:platform/:id</h3>
<pre><code>api.get('/keys/ios/917', function(e, data) {
console.log('error:', e);
console.log('data:', data);
});</code></pre>
<h3 id="post_httpsbuildphonegapcomapiv1apps">
POST https://build.phonegap.com/api/v1/apps</h3>
<pre><code>var options = {
form: {
data: {
title: 'My App',
create_method: 'file'
},
file: '/path/to/app.zip'
}
};
api.post('/apps', options, function(e, data) {
console.log('error:', e);
console.log('data:', data);
});</code></pre>
<h3 id="put_httpsbuildphonegapcomapiv1appsid">
PUT https://build.phonegap.com/api/v1/apps/:id</h3>
<pre><code>var options = {
form: {
data: {
debug: false
},
file: '/path/to/app.zip'
}
};
api.put('/apps/197196', options, function(e, data) {
console.log('error:', e);
console.log('data:', data);
});</code></pre>
<h3 id="post_httpsbuildphonegapcomapiv1appsidicon">
POST https://build.phonegap.com/api/v1/apps/:id/icon</h3>
<pre><code>var options = {
form: {
icon: 'my-icon.png'
}
};
api.post('/apps/232741/icon', options, function(e, data) {
console.log('error:', e);
console.log('data:', data);
});</code></pre>
<h3 id="post_httpsbuildphonegapcomapiv1appsidbuild">
POST https://build.phonegap.com/api/v1/apps/:id/build</h3>
Build all platforms:<br />
<pre><code>api.post('/apps/232741/build', function(e, data) {
console.log('error:', e);
console.log('data:', data);
});</code></pre>
Build specific platforms:<br />
<pre><code>var options = {
form: {
data: {
platforms: [ 'android', 'blackberry', 'ios', 'winphone', 'webos' ]
}
}
};
api.post('/apps/232741/build', options, function(e, data) {
console.log('error:', e);
console.log('data:', data);
});</code></pre>
<h3 id="post_httpsbuildphonegapcomapiv1appsidbuildplatform">
POST https://build.phonegap.com/api/v1/apps/:id/build/:platform</h3>
<pre><code>api.post('/apps/232741/build/android', function(e, data) {
console.log('error:', e);
console.log('data:', data);
});</code></pre>
<h3 id="post_httpsbuildphonegapcomapiv1appsidcollaborators">
POST https://build.phonegap.com/api/v1/apps/:id/collaborators</h3>
<pre><code>var options = {
form: {
data: {
email: 'michael@michaelbrooks.ca',
role: 'dev'
}
}
};
api.post('/apps/232741/collaborators', options, function(e, data) {
console.log('error:', e);
console.log('data:', data);
});</code></pre>
<h3 id="put_httpsbuildphonegapcomapiv1appsidcollaboratorsid">
PUT https://build.phonegap.com/api/v1/apps/:id/collaborators/:id</h3>
<pre><code>var options = {
form: {
data: {
role: 'tester'
}
}
};
api.put('/apps/232741/collaborators/263955', options, function(e, data) {
console.log('error:', e);
console.log('data:', data);
});</code></pre>
<h3 id="post_httpsbuildphonegapcomapiv1keysplatform">
POST https://build.phonegap.com/api/v1/keys/:platform</h3>
<pre><code>var options = {
form: {
data: {
title: 'My BlackBerry Signing Key',
password: 'my-password'
},
db: '/path/to/sigtool.db',
csk: '/path/to/sigtool.csk'
}
};
api.post('/keys/blackberry', options, function(e, data) {
console.log('error:', e);
console.log('data:', data);
});</code></pre>
<h3 id="put_httpsbuildphonegapcomapiv1keysplatformid">
PUT https://build.phonegap.com/api/v1/keys/:platform/:id</h3>
<pre><code>var options = {
form: {
data: {
password: 'my-updated-password'
}
}
};
api.put('/keys/blackberry/1505', options, function(e, data) {
console.log('error:', e);
console.log('data:', data);
});</code></pre>
<h3 id="delete_httpsbuildphonegapcomapiv1appsid">
DELETE https://build.phonegap.com/api/v1/apps/:id</h3>
<pre><code>api.del('/apps/14450', function(e, data) {
console.log('error:', e);
console.log('data:', data);
});</code></pre>
<h3 id="delete_httpsbuildphonegapcomapiv1appsidcollaboratorsid">
DELETE https://build.phonegap.com/api/v1/apps/:id/collaborators/:id</h3>
<pre><code>api.del('/apps/232741/collaborators/263955', function(e, data) {
console.log('error:', e);
console.log('data:', data);
});</code></pre>
<h3 id="delete_httpsbuildphonegapcomapiv1keysplatformid">
DELETE https://build.phonegap.com/api/v1/keys/:platform/:id</h3>
<pre><code>api.del('/keys/ios/2729', function(e, data) {
console.log('error:', e);
console.log('data:', data);
});</code></pre>
Enjoy!<br />
</div>
Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-7055379145430326228.post-75357942223352014982014-03-10T04:32:00.000-07:002014-03-10T04:37:53.018-07:00Getting Started with PhoneGap and PhoneGap Build<div dir="ltr" style="text-align: left;" trbidi="on">
<b>PhoneGap Intro</b><br />
PhoneGap is a free and open source
framework that allows you to create mobile apps using the web
technologies you’re already familiar with: HTML, CSS, and JavaScript.
Use standardized web APIs and <a href="http://phonegap.com/about/feature/">target the platforms</a> you care about. <a href="http://phonegap.com/download">Download</a> PhoneGap for free right now and try it out.<br />
<br />
The beauty of PhoneGap is that you’re able to reuse your existing web
developer skills so you have a shorter learning curve and faster
development. It’s based on 100% web standards and backed by large
stakeholders like Google, Microsoft, BlackBerry, Intel, and more.<br />
<br />
<i>Other helpful reads:</i><br />
<a href="http://phonegap.com/2012/05/09/phonegap-beliefs-goals-and-philosophy/">PhoneGap’s Beliefs, Goals and Philosophy</a>.<br />
<a href="http://www.tricedesigns.com/2012/03/22/phonegap-explained-visually/">PhoneGap explained Visually</a><br />
<br />
<br />
<b>PhoneGap Build Intro</b><br />
Taking PhoneGap one step further, <a href="http://build.phonegap.com/">PhoneGap Build</a>
is a service that allows you to package mobile apps in the cloud for
multiple platforms. Simply upload your HTML, CSS, and JavaScript to the
PhoneGap Build cloud service and we do the work for you. No more hassles
of maintaining SDKs on your computer. You quickly and easily get
app-store ready apps for iOs, Android, BlackBerry, and more. PhoneGap
Build has a couple of subscription options, including a free
subscription to try it out. Learn more about <a href="http://phonegap.com/blog/build/getting-started-with-phonegap-and-phonegap-build/;//build.phonegap.com">PhoneGap Build</a>.<br />
Did you know? PhoneGap Build is also part of <a href="http://www.adobe.com/products/creativecloud.html">Adobe’s Creative Cloud</a>. PhoneGap Build is available to free and paid Creative Cloud members. Learn more about <a href="http://www.adobe.com/products/creativecloud.html">Creative Cloud</a>. You might also be interested in <a href="http://html.adobe.com/edge/">Adobe’s Edge Tools + Services</a>,
which are a complementary set of offerings for web designers and
developers looking to create beautiful mobile-ready content and apps
with HTML, CSS, and JavaScript.<br />
<br />
<b>What’s the difference between PhoneGap and Cordova?</b><br />
In October 2011, PhoneGap was donated to the Apache Software Foundation (ASF) under the name <a href="http://cordova.apache.org/">Apache Cordova</a>.
Through the ASF, future PhoneGap development will ensure open
stewardship of the project. It will remain free and open source under
the Apache License, Version 2.0.<br />
PhoneGap is an open source
distribution of Cordova. You may see references to both PhoneGap and
Cordova and their names used interchangeably. Think about Cordova’s
relationship to PhoneGap like WebKit’s relationship to Safari or Chrome.<br />
<br />
<br />
In October 2011, PhoneGap was donated to the Apache Software Foundation (ASF) under the name <a href="http://cordova.apache.org/">Apache Cordova</a>.
Through the ASF, future PhoneGap development will ensure open
stewardship of the project. It will remain free and open source under
the Apache License, Version 2.0. <br />
PhoneGap is an open source
distribution of Cordova. You may see references to both PhoneGap and
Cordova and their names used interchangeably. Think about Cordova’s
relationship to PhoneGap like WebKit’s relationship to Safari or Chrome.<br />
<em>Read more:</em><br /><a href="http://phonegap.com/2012/04/12/rolling-releases-how-apache-cordova-becomes-phonegap-and-why/">Rolling Releases: How Apache Cordova becomes PhoneGap</a><br /><a href="http://phonegap.com/2012/03/19/phonegap-cordova-and-what%E2%80%99s-in-a-name/">PhoneGap, Cordova and what’s in a name</a>.<br />
<strong>Where to begin?</strong><br />So you’ve got the background, <a href="http://phonegap.com/install">installed</a> PhoneGap, now what? Below are some helpful places to start:<br />
<ul>
<li>Get started with <a href="http://docs.phonegap.com/">our Docs</a>.
You’ll find references to all the APIs that PhoneGap supports as well
as Getting Started Guides, Command-Line Usage and more. Speak another
language? We’d love your help with translations!</li>
<li>Check out <a href="http://twitter.com/andytrice">Andrew Trice’s</a> helpful blog post <a href="http://www.tricedesigns.com/2013/01/18/my-workflow-for-developing-phonegap-applications/">My Workflow for Developing PhoneGap Applications</a></li>
<li>The <a href="http://www.adobe.com/devnet/html5.html">Adobe Developer Connection</a> (ADC) has a series of videos to walk you through the APIs available and how to use them: <a href="http://tv.adobe.com/show/adc-presents-phonegap/">ADC Presents: PhoneGap</a></li>
<li><a href="http://twitter.com/ccoenraets">Christophe Coenraets</a> has a <a href="http://coenraets.org/blog/phonegap-tutorial/">beginner’s tutorial</a> to help you develop your first PhoneGap application.</li>
</ul>
<em>Other handy resources:</em><br /><a href="http://wiki.phonegap.com/">wiki.phonegap.com</a><br /><a href="http://phonegap.com/about/faq/">PhoneGap FAQ</a><br /><a href="https://build.phonegap.com/docs/faq">PhoneGap Build FAQ</a><br />
<strong>Found a bug?</strong><br />Sometimes
you might find something that doesn’t look quite right. It might be in
the docs or a bug in Cordova itself. Help the community out by flagging
the issue. Submit the bug on the <a href="https://issues.apache.org/jira/browse/CB">Cordova Issue tracker</a>.<br />
<strong>What’s the community up to?</strong><br />The PhoneGap community is large and robust. Find out what they’ve been up to in a variety of places:<br />
<ul>
<li>The <a href="http://phonegap.com/app/feature/">PhoneGap Featured Apps</a> and <a href="http://phonegap.com/case/">Case Studies</a> highlight some notable apps made with PhoneGap and services that integrate with PhoneGap Build. Have you made a PhoneGap app? <a href="http://phonegap.com/app/submit">Submit yours here</a></li>
<li>The <a href="https://github.com/phonegap/phonegap-community">PhoneGap Community Repo</a>
shows a monthly breakdown of the PhoneGap events and articles. If
you’re organizing a PhoneGap event, speaking on PhoneGap, writing a blog
post or have something to share, please add it to the release notes on <a href="https://github.com/phonegap/phonegap-community">Github</a>.</li>
<li>Check out the <a href="http://phonegap.com/event/">PhoneGap Events calendar</a> to find out what events we’re sponsoring and where the team is speaking.</li>
<li>PhoneGap
meetups take place all over the world and have different community
organizers. Find one close to you or start your own: <a href="http://phonegap.meetup.com/">Meetup.PhoneGap.com</a></li>
</ul>
<strong>Where do I get help?</strong><br />Get answers to your questions from the community:<br />For PhoneGap, check out the <a href="https://groups.google.com/forum/#%21forum/phonegap">PhoneGap Google Group</a><br />For PhoneGap Build, check out the <a href="http://community.phonegap.com/">PhoneGap Build Forum</a><br />
Looking for extra, dedicated PhoneGap support? Check out PhoneGap’s paid <a href="http://phonegap.com/support">support options</a><br />
<strong>Stay connected</strong><br />Are you a PhoneGap Developer or part of a PhoneGap Dev shop? Maybe you’re looking for a Dev? Check out our new <a href="http://people.phonegap.com/">PhoneGap Developer Directory</a>. We have over 700 developers and dev shops in 83 countries listed so far!<br />
Find out what’s happening with PhoneGap and PhoneGap Build with our <a href="http://phonegap.com/newsletter">Newsletter</a>. Don’t worry, we hate spam too and won’t be sharing your info with anyone else.<br />
<br />
<br />
<br /></div>
Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-7055379145430326228.post-53911283915149459672014-03-10T04:30:00.000-07:002017-03-08T04:25:31.401-08:00Phonegap Video Tutorial - Real Time Work Shop Example <div dir="ltr" style="text-align: left;" trbidi="on">
<br /></div>
Abstract
Learn how to build large, complex, and native-like mobile apps using HTML, JavaScript, and CSS. In this workshop you'll learn modern strategies and architectural patterns to build real-life Hybrid Applications that work and perform like native apps. You'll also learn how to efficiently use PhoneGap to leverage the native capabilities of your device in JavaScript and to package your HTML application as a native app for distribution through the different app stores.
this video tutorial covers the following topics are covered and explained with real time examples
The PhoneGap APIs - explains all phonegap API's how to use and build them remotely, locally and test them on different divices.
Topcoat - Explains how to use Topcoat framework.
The Single Page Architecture - Describes how to develop single page architecture applications rather then multi page architechture , differentiate between them, advatages of using single page architecture.
Client-side HTML templates
Effective Touch Events
Modularization Approaches
Mobile Performance Optimization Techniques
Comparison of Leading JavaScript frameworks
PhoneGap Plugins
Unknownnoreply@blogger.com1tag:blogger.com,1999:blog-7055379145430326228.post-17824604384282915172013-12-02T21:47:00.001-08:002013-12-02T22:19:15.915-08:00Node.js Video Tutorial<div dir="ltr" style="text-align: left;" trbidi="on">
<br /></div>
<br><p>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.</p></br>
<br><p>Current Version: v0.10.22</p></br>
<p> I am posting all node.js video tutorials here please check and subscribe.</p>
<h2>Node.js Tutorial Videos:</h2>
<br>
<br>
<h3>Node js A Jumpstart for Devs 01 Installing Node js Part -1 </h3>
<br>
<br>
<iframe width="420" height="315" src="//www.youtube.com/embed/J2KhxWU2Ct8" frameborder="0" allowfullscreen></iframe>
<br>
<br>
<h3>Node js A Jumpstart for Devs 02 Building our Project Part - 2 </h3>
<br>
<br>
<iframe width="420" height="315" src="//www.youtube.com/embed/CnoTYeJTi8Y" frameborder="0" allowfullscreen></iframe>
<br>
<br>
<h3>Node js A Jumpstart for Devs 03 Handlebars Switching the Template Engine HD Part 3</h3>
<br>
<br>
<iframe width="420" height="315" src="//www.youtube.com/embed/c8ZAEYdR4xU" frameborder="0" allowfullscreen></iframe>
<br>
<br>
<h3>Node js Jumpstart for Devs 04 Adding our First Template Part - 4</h3>
<br>
<br>
<iframe width="420" height="315" src="//www.youtube.com/embed/gwyfOx5W5oY" frameborder="0" allowfullscreen></iframe>
<br>
<br>
<h3>Node js A Jumpstart for Devs 05 Geolocation A Usable HTML5 API HD</h3>
<br>
<br>
<iframe width="420" height="315" src="//www.youtube.com/embed/arEHRM4Dkxw" frameborder="0" allowfullscreen></iframe>
<br>
<br>
<h3>Node js A Jumpstart for Devs 06 Geolocations Making it Human Friendly HD</h3>
<br>
<br>
<iframe width="420" height="315" src="//www.youtube.com/embed/xIG0N19kgDM" frameborder="0" allowfullscreen></iframe>
<br>
<br>
<h3>Node js A Jumpstat for Devs 07 Dynamic HTML Making Use of Our Templates HD Part - 7</h3>
<br>
<br>
<iframe width="420" height="315" src="//www.youtube.com/embed/gGGD3yg1QoA" frameborder="0" allowfullscreen></iframe>
<br>
<br>
<h3>Node js A Jumpstart for Devs 08 Simple Persistence w SQLite & an ORM Package HD Part- 8 </h3>
<br>
<br>
<iframe width="420" height="315" src="//www.youtube.com/embed/bkF9JIGAlG0" frameborder="0" allowfullscreen></iframe>
<br>
<br>
<h3>Node js A Jumpstart for Devs 09 Tracking Ourselves Part - 9</h3>
<br>
<br>
<iframe width="420" height="315" src="//www.youtube.com/embed/A6e5OheKgtI" frameborder="0" allowfullscreen></iframe>
<br>
<br>
<h3>Node js A Jumpstart for Devs 10 Displaying Places We've Been HD Part- 10</h3>
<br>
<br>
<iframe width="420" height="315" src="//www.youtube.com/embed/Uvh7lR3mX0E" frameborder="0" allowfullscreen></iframe>
<br>
<br>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-7055379145430326228.post-12788613715521246512013-12-02T21:28:00.002-08:002013-12-02T22:21:07.645-08:00HTML5 Tutorial - Html5 tutorial two chat programs using node.jsIn 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
<pre class="brush:javascript">
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/');
</pre>
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
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBEnkPAwT_wVxb4aWSTPyOQdAZUUT1VxwDtdHOX2xJ3jPKPG58Y1qjq96YgtuliuEyO0VhYK7opony5cAE5O7R0RSmxiSgfxDbvVxMQrpY_taVaaD_DrjeapCdMFp5JCixLmreEs8aSRnk/s1600/Snap5.jpg" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBEnkPAwT_wVxb4aWSTPyOQdAZUUT1VxwDtdHOX2xJ3jPKPG58Y1qjq96YgtuliuEyO0VhYK7opony5cAE5O7R0RSmxiSgfxDbvVxMQrpY_taVaaD_DrjeapCdMFp5JCixLmreEs8aSRnk/s320/Snap5.jpg" /></a>
You should see this in your web browser:
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4IvdpVqZGhlmjm2YP2xS65hyphenhyphenhRLBdp718pUE3V-Ge5UudQjTpOegE91Lv6wMKrhAo_K0d8OqohGYjqRcXSjArbwO0tmblisD-eFdypkWzrOxotbax7Ods2VxmlSKivVGnfGjEWizaHjVQ/s1600/Snap6.jpg" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4IvdpVqZGhlmjm2YP2xS65hyphenhyphenhRLBdp718pUE3V-Ge5UudQjTpOegE91Lv6wMKrhAo_K0d8OqohGYjqRcXSjArbwO0tmblisD-eFdypkWzrOxotbax7Ods2VxmlSKivVGnfGjEWizaHjVQ/s320/Snap6.jpg" /></a>
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;
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjerbkLCLOHVHH2KnNdGPF9riWv2m5Mc8V4Iymj032MeGRlPWYbtoZ5mHvLPan2ev6tTL5vA04VeFKiO4ITA0T0rxwjWv54k1CmBK_ZmC6vlq8xO5KVAUXzzHP6_ahhqAsWlAkIxgIBoRlm/s1600/Snap13.jpg" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjerbkLCLOHVHH2KnNdGPF9riWv2m5Mc8V4Iymj032MeGRlPWYbtoZ5mHvLPan2ev6tTL5vA04VeFKiO4ITA0T0rxwjWv54k1CmBK_ZmC6vlq8xO5KVAUXzzHP6_ahhqAsWlAkIxgIBoRlm/s400/Snap13.jpg" /></a>
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:
<pre class="brush:javascript">
// 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');
});
});
</pre>
And simpleChat.html:
<pre class="brush:html">
<script src="/socket.io/socket.io.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script>
var socket = io.connect(); // we might pass the URL of the WS server as parameter here
// on connection to server, ask for user's name with an anonymous callback
socket.on('connect', function(){
// call the server-side function 'adduser' and send one parameter (value of prompt)
socket.emit('adduser', prompt("What's your name?"));
});
// listener, whenever the server emits 'updatechat', this updates the chat body
socket.on('updatechat', function (username, data) {
$('#conversation').append('<b>'+username + ':</b> ' + data + '<br>');
});
// listener, whenever the server emits 'updateusers', this updates the username list
socket.on('updateusers', function(data) {
$('#users').empty();
$.each(data, function(key, value) {
$('#users').append('<div>' + key + '</div>');
});
});
// on load of page
$(function(){
// when the client clicks SEND
$('#datasend').click( function() {
var message = $('#data').val();
$('#data').val('');
// tell server to execute 'sendchat' and send along one parameter
socket.emit('sendchat', message);
});
// when the client hits ENTER on their keyboard
$('#data').keypress(function(e) {
if(e.which == 13) {
$(this).blur();
$('#datasend').focus().click();
}
});
});
</script>
<div style="float:left;width:100px;border-right:1px solid black;height:300px;padding:10px;overflow:scroll-y;">
<b>USERS</b>
<div id="users"></div>
</div>
<div style="float:left;width:300px;height:250px;overflow:scroll-y;padding:10px;">
<div id="conversation"></div>
<input id="data" style="width:200px;" />
<input type="button" id="datasend" value="send" />
</div>
</pre>
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
<pre class="brush:javascript">
// 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);
});
});
</pre>
multiRoomChat.html
<pre class="brush:html">
<script src="/socket.io/socket.io.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script>
//var socket = io.connect('http://localhost:8080');
var socket = io.connect('http://localhost:8080');
// on connection to server, ask for user's name with an anonymous callback
socket.on('connect', function(){
// call the server-side function 'adduser' and send one parameter (value of prompt)
socket.emit('adduser', prompt("What's your name?"));
});
// listener, whenever the server emits 'updatechat', this updates the chat body
socket.on('updatechat', function (username, data) {
$('#conversation').append('<b>'+username + ':</b> ' + data + '<br>');
});
// listener, whenever the server emits 'updaterooms', this updates the room the client is in
socket.on('updaterooms', function(rooms, current_room) {
$('#rooms').empty();
$.each(rooms, function(key, value) {
if(value == current_room){
$('#rooms').append('<div>' + value + '</div>');
}
else {
$('#rooms').append('<div><a href="#" onclick="switchRoom(\''+value+'\')">' + value + '</a></div>');
}
});
});
function switchRoom(room){
socket.emit('switchRoom', room);
}
// on load of page
$(function(){
// when the client clicks SEND
$('#datasend').click( function() {
var message = $('#data').val();
$('#data').val('');
// tell server to execute 'sendchat' and send along one parameter
socket.emit('sendchat', message);
});
// when the client hits ENTER on their keyboard
$('#data').keypress(function(e) {
if(e.which == 13) {
$(this).blur();
$('#datasend').focus().click();
}
});
});
</script>
<div style="float:left;width:100px;border-right:1px solid black;height:300px;padding:10px;overflow:scroll-y;">
<b>ROOMS</b>
<div id="rooms"></div>
</div>
<div style="float:left;width:300px;height:250px;overflow:scroll-y;padding:10px;">
<div id="conversation"></div>
<input id="data" style="width:200px;" />
<input type="button" id="datasend" value="send" />
</div>
</pre>
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
<iframe width="420" height="315" src="//www.youtube.com/embed/J2KhxWU2Ct8" frameborder="0" allowfullscreen></iframe>
Part - 2
<iframe width="420" height="315" src="//www.youtube.com/embed/CnoTYeJTi8Y" frameborder="0" allowfullscreen></iframe>
Part - 3
<iframe width="420" height="315" src="//www.youtube.com/embed/c8ZAEYdR4xU" frameborder="0" allowfullscreen></iframe>
Part - 4
<iframe width="420" height="315" src="//www.youtube.com/embed/gwyfOx5W5oY" frameborder="0" allowfullscreen></iframe>
Part - 5
<iframe width="420" height="315" src="//www.youtube.com/embed/arEHRM4Dkxw" frameborder="0" allowfullscreen></iframe>
Part - 6
<iframe width="420" height="315" src="//www.youtube.com/embed/xIG0N19kgDM" frameborder="0" allowfullscreen></iframe>
Part - 7
<iframe width="420" height="315" src="//www.youtube.com/embed/gGGD3yg1QoA" frameborder="0" allowfullscreen></iframe>
Part- 8
<iframe width="420" height="315" src="//www.youtube.com/embed/bkF9JIGAlG0" frameborder="0" allowfullscreen></iframe>
Part - 9
<iframe width="420" height="315" src="//www.youtube.com/embed/A6e5OheKgtI" frameborder="0" allowfullscreen></iframe>
Part - 10
<iframe width="420" height="315" src="//www.youtube.com/embed/Uvh7lR3mX0E" frameborder="0" allowfullscreen></iframe>Unknownnoreply@blogger.com3tag:blogger.com,1999:blog-7055379145430326228.post-92077184510506127932013-10-03T22:00:00.000-07:002013-10-04T01:56:18.874-07:00HTML5 Tutorial - Advantages of HTML5<style>
ul {
list-style: none;
margin: 0;
padding: 0;
border: none;
}
li {
display: block;
padding: 5px 5px 5px 0.5em;
border-left: 10px solid #1958b7;
border-right: 10px solid #508fc4;
background-color: #2175bc;
color: #fff;
text-decoration: none;
width: 100%;
}
</style>
<div dir="ltr" style="text-align: left;" trbidi="on">
<h2>
Top 10 Advantages of HTML5 </h2>
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. -
<ul>
<li>
<br>1. Mutuality</br>
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.
</li>
<li>
<br>2. Cleaner markup / Improved Code</br>
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.
</li>
<li><br>
3. Improved Semantics
</br>
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.
</li>
<li><br>
4. Elegant forms </br>
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.
</li>
<li><br>
5. Consistency</br>
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.</li>
<li><br>6. Improved Accessibility</br>
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.
</li>
<li><br>
7. Fulfill the need of Web application</br>
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.</li>
<li><br>8. Offline Application cache</br>
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</li>
<li><br>9. Client-side database</br>
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.</li>
<li><br>10. Geolocation support</br>
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!</li>
</ul>
</div>
Unknownnoreply@blogger.com2tag:blogger.com,1999:blog-7055379145430326228.post-40193515596402200952013-09-30T22:14:00.001-07:002013-10-04T03:20:17.561-07:00HTML5 Tutorial - Difference between HTML4 & HTML5<style>
ul {
list-style: none;
margin: 0;
padding: 0;
border: none;
}
li {
display: block;
padding: 5px 5px 5px 0.5em;
border-left: 10px solid #1958b7;
border-right: 10px solid #508fc4;
background-color: #2175bc;
color: #fff;
text-decoration: none;
width: 100%;
}
</style>
<h2>Differences between HTML4 & HTML5 </h2>
<p>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.</p>
<h2>Here are ten important differences between HTML4 and HTML5</h2>
<ul><li><br>
1. HTML5 Is a Work in Progress</br>
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.</li>
<li><br>
2. Simplified Syntax</br>
The simpler doctype declaration is just one of the many novelties in HTML5. Now you need to write only:<!doctype html> and this is it. The syntax of HTML5 is compatible with HTML4 and XHTML1, but not with SGML.</li>
<li><br>
3. The New canvas Element</br>
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.</li>
<li><br>4. The header and footer Elements</br>
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.</li>
<li><br>6. New menu and figure Elements</br>
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.</li>
<li><br>7. New audio and video Elements</br>
Embedind audio and video has never been easier.
There are also some new multimedia elements and attributes, such as <track>, 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.
</li>
<li><br>8. New Forms</br>
The new <form> and <forminput> elements are looking good. If you do much with forms, you may want to take a look at what these have to offer.
</li>
<li><br>9. Kiss b and font Goodbye!</br>
CSS, all the time.
All the time, CSS.
</li>
<li><br>10. No More frame, center, big</br>
I bet you’re going to miss these.
</li>
</ul>
Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-7055379145430326228.post-83838466049972550162013-09-30T21:32:00.001-07:002013-10-04T03:27:04.776-07:00HTML5 Tutorial - Client-Side StorageIntroduction
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.Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-7055379145430326228.post-89751247951654085142013-07-17T23:24:00.000-07:002013-07-23T21:52:46.766-07:00HTML5 Tutorial - Create your own blog in minutes using html5,css,php and mysql part 1<div dir="ltr" style="text-align: left;" trbidi="on">
<br /></div>
<h2>HTML5 Tutorial - Create your own blog in minutes using html5,css,php and mysql.</h2>
/
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 <a href="http://serversfree.com">http://serversfree.com</a>
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.
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIqwxnnqPQsPUEGHf_mrHXD1zEXkJzzyccKy-Mrd0b5KXP5MDUHJLFyEutXH69JQvJH4fMMYiJ35H2zCDVvp5ZppbnDjJJFZ_q2VG494zcXS4VIiTZw3-0Rzc4cAYTjQslwMYHr35eep5p/s1600/blogpost1.png" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIqwxnnqPQsPUEGHf_mrHXD1zEXkJzzyccKy-Mrd0b5KXP5MDUHJLFyEutXH69JQvJH4fMMYiJ35H2zCDVvp5ZppbnDjJJFZ_q2VG494zcXS4VIiTZw3-0Rzc4cAYTjQslwMYHr35eep5p/s400/blogpost1.png" /></a>
Next enter phpMyAdmin, create a new table for storing blog items.
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmTgGQXD1zunwvVIFoQwxKDxNAeV6NVWB0gOpOUSlQrbp_DTjA3YEOUotvI8LNhasOJ-s_nT2HZDxRCCnj3n2V_nbuT7NoNE1dtv37vuGc8GDw1UZIqrG4bB4G1HQt4YV1Iw4G19B5MJlU/s1600/blogpost2.png" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmTgGQXD1zunwvVIFoQwxKDxNAeV6NVWB0gOpOUSlQrbp_DTjA3YEOUotvI8LNhasOJ-s_nT2HZDxRCCnj3n2V_nbuT7NoNE1dtv37vuGc8GDw1UZIqrG4bB4G1HQt4YV1Iw4G19B5MJlU/s400/blogpost2.png" /></a>
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 <a href="http://phonegaptutorial.blogspot.in/2013/06/phonegap-tutorial-posting-form-data-to.html">How to insert form data to mysql data base using php</a>
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 <a href="http://phonegaptutorial.blogspot.in/2013/06/converting-mysql-table-data-to-xml-file.html">tutorial converting mysql table data to here </a>
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.
<pre class="brush:html">
<body onload="test();">
<header>
<h1>Html5 Tutorial - Future Technology<h1>
</header>
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About Us</a>
<ul>
<li><a href="/crew">Our Crew</a></li>
<li><a href="/history">Plumbing History</a></li>
<li><a href="/vision">Plumbing Vision</a></li>
</ul>
</li>
<li><a href="/products">Products</a>
<ul>
<li><a href="/pipes">Pipes</a></li>
<li><a href="/wrenches">Wrenches</a></li>
<li><a href="/solder">Soldering Tools</a></li>
<li><a href="/pbc">PVC Joints</a></li>
<li><a href="/sprockets">Spacely Sprockets</a></li>
</ul>
</li>
<li><a href="/services">Services</a>
<ul>
<li><a href="/visites">Site Visits</a></li>
<li><a href="/spot">Spot Welding</a></li>
<li><a href="/tig">TiG Welding</a></li>
<li><a href="/mig">MiG Welding</a></li>
<li><a href="/drain">Drain Service</a></li>
</ul>
</li>
<li><a href="/contact">Contact</a>
<ul>
<li><a href="/email">Via Email</a></li>
<li><a href="/contact_form">Web Form</a></li>
<li><a href="/pigeon">Carrier Pigeon</a></li>
</ul>
</li>
</ul>
</nav>
<article>
<h2 id= "title1"></h2>
<section id="section1"></section>
</article>
<aside><Table><tr><td>The section element represents a generic document or application section. A section, in this context, is a thematic grouping of content, typically with a heading, possibly with a footer.</td></tr>
<tr><td><video controls loop>
<!-- I have two versions of the video encoded with
different codecs. The browser will automatically
choose the first one it knows it can play. -->
<source src="http://html5doctor.com/demos/video-canvas-magic/video.webm" type=video/webm>
<source src="http://html5doctor.com/demos/video-canvas-magic/video.ogg" type=video/ogg>
<source src="http://html5doctor.com/demos/video-canvas-magic/video.mp4" type=video/mp4>
</video></td></tr><tr><td><img src="test.jpg"></td></tr></table></aside>
<footer>All Rights Reserved to ss consultancy.
</footer>
</body>
</pre>
Here is Javascript used to parse xml file and display results in required fields.
<pre class="brush:javascript">
<script>
function test(){
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","http://html5.neq3.com/CouponsApp/coupons.php",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
blogs = xmlDoc.getElementsByTagName("Blog");
alert(blogs.length);
var title = blogs[0].getElementsByTagName("Title")[0].childNodes[0].nodeValue;
var description = blogs[0].getElementsByTagName("Description")[0].childNodes[0].nodeValue;
document.getElementById('title1').innerHTML = title;
document.getElementById('section1').innerHTML = description;
}
</script>
</pre>
Here is css file to align html5 elements.
<pre class="brush:css">
<style>
html {
margin: 0;
padding: 0;
background: #eee9df url(../images/tile1.png) center top repeat;
}
body {
width: 940px;
margin: 0 auto;
font: 10pt/1.5em Helvetica,"Helvetica neue", Arial, sans-serif;
}
/*HTML 5 specific*/
header,section,article,aside,footer{
display: block;
}
aside{
float: right;
width: 270px;
min-height: 480px;
background: url(../images/aside-bg.png) center top no-repeat;
margin: 0 0 20px 0;
}
section{
float: left;
width: 628px;
padding-left: 20px;
margin: 0 0 20px 0px;
border-left: 2px dotted #b2a497;
}
h1 {
font: 32pt Helvetica,"Helvetica neue", Arial, sans-serif;
background: url(../images/header-bg.png) center top no-repeat;
text-align: center;
text-transform: uppercase;
color: #e5b7ad;
padding-top: 30px ;
text-shadow: 1px 1px 2px #fff;
}
section h2 {
font: 14pt Helvetica,"Helvetica neue", Arial, sans-serif;
font-weight: lighter;
text-transform: uppercase;
color: #493831;
padding-bottom: 10px;
margin: 0;
}
footer{
clear:both !important;
width:940px;
height: 100px;
padding: 10px;
color:#200f08 ;
background:#ddd3bf;
/*Opacity*/
filter:alpha(opacity=50); /* msie */
-moz-opacity: 0.50; /* firefox 1.0 */
-khtml-opacity: 0.50; /* webkit */
opacity: 0.50; /* css 3 */
/*Gradient*/
background-image: -moz-linear-gradient(top, #ddd3bf, #bcae91); /* FF3.6 */
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #ddd3bf),color-stop(1, #bcae91)); /* Saf4+, Chrome *
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#ddd3bf', EndColorStr='#bcae91'); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#ddd3bf', EndColorStr='#bcae91')"; /* IE8 */
/*Round corners*/
-moz-border-radius: 12px; /* FF1+ */
-webkit-border-radius: 12px; /* Saf3+, Chrome */
border-radius: 12px; /* Opera 10.5, IE 9 */
}
header{
background-color:#195D95;
color: #ffffff;
}
nav {
background-color:#2C5463;
height:40px;
}
nav ul {
font-family: Arial, Verdana;
font-size: 20px;
margin: 0;
padding: 0;
list-style: none;
}
nav ul li {
display: block;
position: relative;
float: left;
}
nav li ul {
display: none;
}
nav ul li a {
display: block;
text-decoration: none;
padding: 7px 15px 3px 15px;
background: #2C5463;
color: #ffffff;
margin-left: 1px;
white-space: nowrap;
height:30px; /* Width and height of top-level nav items */
width:90px;
text-align:center;
}
nav ul li a:hover {
background: #617F8A;
}
nav li:hover ul {
display: block;
position: absolute;
height:30px;
}
nav li:hover li {
float: none;
font-size: 11px;
}
nav li:hover a {
background: #3A464F;
height:30px; /* Height of lower-level nav items is shorter than main level */
}
nav li:hover li a:hover {
background: #95A9B1;
}
nav ul li ul li a {
text-align:left; /* Top-level items are centered, but nested list items are left-aligned */
}
/* END NAV MENU */
</style>
</pre>
Ok you are done, <a href="http://html5.neq3.com/CouponsApp/html5test.html">Check here for demo</a>.
I will update part 2 as soon as posible please write comments or queries and i will solve them.
Unknownnoreply@blogger.com2tag:blogger.com,1999:blog-7055379145430326228.post-61630558465834697512013-07-16T03:56:00.000-07:002013-07-16T04:08:52.733-07:00HTML5 Tutorial - Header Element<div dir="ltr" style="text-align: left;" trbidi="on">
<br /></div>
<p><h2>Header Element</h2></p>
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.
<pre class="brush:html"><div id="header"></div></pre>
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 <header> element doesn’t introduce a new section but is the head of a section. You should also note that the <header> element should not be confused with the <head> element.
Where would I use the <header> 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.
<pre class="brush:html">
<header>
<h1>The most important heading on this page</h1>
<p>With some supplementary information</p>
</header>
</pre>
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 <header> for that section of the document. You could therefore have…
<pre class=brush:html">
<header>
<h1>The most important heading on this page</h1>
<p>With some supplementary information</p>
</header>
<article>
<header>
<h1>Title of this article</h1>
<p>By Richard Clark</p>
</header>
<p>...Lorem Ipsum dolor set amet...</p>
</article>
</pre>
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.
Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-7055379145430326228.post-7558807179332541212013-07-05T03:26:00.000-07:002013-07-05T03:29:53.065-07:00PhoneGap pagination tutorial using swiping from one page to another page.<div dir="ltr" style="text-align: left;" trbidi="on">
<br /></div>
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 :
<div>
<h2>Index.html</h2>
<pre class="brush:html">
<div data-role="page" id="home">
<div data-role="content">
<p>
<ul data-role="listview" data-inset="true" data-theme="c">
<li id="listitem">Swipe Right to view Page 1</li>
</ul>
</p>
</div>
</div>
<div data-role="page" id="page1">
<div data-role="content">
<ul data-role="listview" data-inset="true" data-theme="c">
<li data-role="list-divider">Navigation</li>
<li><a href="#home">Back to the Home Page</a></li>
</ul>
<p>
Yeah!<br />You Swiped Right to view Page 1
</p>
</div>
</div>
</pre>
</div>
Here is the jQuery and javascript for activating swipe functionality.
<div>
<pre class="brush:javascript">
// 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");
});
</pre>
</div>Unknownnoreply@blogger.com1tag:blogger.com,1999:blog-7055379145430326228.post-47409557552345313932013-06-26T03:32:00.000-07:002013-06-26T22:13:47.021-07:00HTML5 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.
<div>
<pre class="brush:html">
<body>
<canvas id="myCanvas" width="578" height="200"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
// do stuff here
</script>
</body>
</pre>
</div>
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.
<h2> Line </h2>
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidDeQFlEu8z189LiC4yFvIc1bLc69aIEmMHhUgd9nFN2JMC7AgAMSQUFksjgrUwmS5o6GBNH7XJnKLVrd4SR-_ses9qG4xg7zIgkENtiuR4mAoPbEETUSTDuGa0Rp8DLhBIzpl8a7L588U/s1600/canvas1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidDeQFlEu8z189LiC4yFvIc1bLc69aIEmMHhUgd9nFN2JMC7AgAMSQUFksjgrUwmS5o6GBNH7XJnKLVrd4SR-_ses9qG4xg7zIgkENtiuR4mAoPbEETUSTDuGa0Rp8DLhBIzpl8a7L588U/s320/canvas1.png" /></a></div>
Code for Above Image :
<div>
<pre class="brush:html">
<!DOCTYPE HTML>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="578" height="200"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.beginPath();
context.moveTo(100, 150);
context.lineTo(450, 50);
context.stroke();
</script>
</body>
</pre>
</div>
To Change the width of the line or increase the width of the line in the canvas , Please use the following code :
<div>
<pre class="brush:html">
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="578" height="200"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.beginPath();
context.moveTo(100, 150);
context.lineTo(450, 50);
context.lineWidth = 15;
context.stroke();
</script>
</body>
</pre>
</div>
Changing canvas line color in html5 :
<div>
<pre class="brush:html">
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="578" height="200"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.beginPath();
context.moveTo(100, 150);
context.lineTo(450, 50);
context.lineWidth = 10;
// set line color
context.strokeStyle = '#ff0000';
context.stroke();
</script>
</body>
</pre>
</div>
Html5 Line Cap Tutorial
<div>
<pre class="brush:javascript">
<script>
context.lineCap = 'round';
</script>
</pre>
</div>
<div>
<pre class="brush:html">
<body>
<canvas id="myCanvas" width="578" height="200"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
// butt line cap (top line)
context.beginPath();
context.moveTo(200, canvas.height / 2 - 50);
context.lineTo(canvas.width - 200, canvas.height / 2 - 50);
context.lineWidth = 20;
context.strokeStyle = '#0000ff';
context.lineCap = 'butt';
context.stroke();
// round line cap (middle line)
context.beginPath();
context.moveTo(200, canvas.height / 2);
context.lineTo(canvas.width - 200, canvas.height / 2);
context.lineWidth = 20;
context.strokeStyle = '#0000ff';
context.lineCap = 'round';
context.stroke();
// square line cap (bottom line)
context.beginPath();
context.moveTo(200, canvas.height / 2 + 50);
context.lineTo(canvas.width - 200, canvas.height / 2 + 50);
context.lineWidth = 20;
context.strokeStyle = '#0000ff';
context.lineCap = 'square';
context.stroke();
</script>
</body>
</pre>
</div>
Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-7055379145430326228.post-41000622663273518432013-06-26T02:57:00.002-07:002013-06-26T03:00:30.679-07:00HTML5 Tutorial - Drag and Drop <h2><b>Title: HTML5 Tutorial - Drag and Drop example.</b></h2>
<h2><p>Description : I am going to explain how to drag an item and drop the item at required position.</p></h2>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYaQ3kk0AW_f8AX6JfOm6jiXRSFTODBdUsx1r-Dp7RbeGuyQzHgYu9oQPFa80lA_L_nMUgueNS5igaozsF2umRi1Y6umOESnakzuiXv6unngxGhRyU45bWD9bkyCdGBgEyu4bqYXNy1rzn/s1600/drag+and+drop.png" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYaQ3kk0AW_f8AX6JfOm6jiXRSFTODBdUsx1r-Dp7RbeGuyQzHgYu9oQPFa80lA_L_nMUgueNS5igaozsF2umRi1Y6umOESnakzuiXv6unngxGhRyU45bWD9bkyCdGBgEyu4bqYXNy1rzn/s320/drag+and+drop.png" /></a>
In The above image i am going to move all right side boxes to trash i.e to left side dust bin.
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjX8wLbdRBkkUQo_NXcAj9cZGL-TJ6qusZ_nHHaswtgN60KGt3v9V-jvkXk9X_6GE3L2n0bY_OGjrqe16btARt2C3ZHoP6oXEXTPg_1RsWEAm0T3CHTdXXIATSQGzcmjBRWFhyphenhyphenpl3wPtOtz/s1600/draganddrop.png" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjX8wLbdRBkkUQo_NXcAj9cZGL-TJ6qusZ_nHHaswtgN60KGt3v9V-jvkXk9X_6GE3L2n0bY_OGjrqe16btARt2C3ZHoP6oXEXTPg_1RsWEAm0T3CHTdXXIATSQGzcmjBRWFhyphenhyphenpl3wPtOtz/s320/draganddrop.png" /></a>
CSS Code for above App
<div>
<pre class="brush:css">
<style type="text/css">
li {
list-style: none;
}
li a {
text-decoration: none;
color: #000;
margin: 10px;
width: 150px;
border: 3px dashed #999;
background: #eee;
padding: 10px;
display: block;
}
*[draggable=true] {
-moz-user-select:none;
-khtml-user-drag: element;
cursor: move;
}
*:-khtml-drag {
background-color: rgba(238,238,238, 0.5);
}
li a:hover:after {
content: ' (drag me)';
}
ul {
margin-left: 200px;
min-height: 300px;
}
li.over {
border-color: #333;
background: #ccc;
}
#bin {
background: url(images/bin.jpg) top right no-repeat;
height: 250px;
width: 166px;
float: left;
border: 5px solid #000;
position: relative;
margin-top: 0;
}
#bin.over {
background: url(images/bin.jpg) top left no-repeat;
}
#bin p {
font-weight: bold;
text-align: center;
position: absolute;
bottom: 20px;
width: 166px;
font-size: 32px;
color: #fff;
text-shadow: #000 2px 2px 2px;
}
</style>
</pre>
</div>
JavaScript and html5 Code
<div>
<pre class="brush:html">
<script>
var eat = ['yum!', 'gulp', 'burp!', 'nom'];
var yum = document.createElement('p');
var msie = /*@cc_on!@*/0;
yum.style.opacity = 1;
var links = document.querySelectorAll('li > a'), el = null;
for (var i = 0; i < links.length; i++) {
el = links[i];
el.setAttribute('draggable', 'true');
addEvent(el, 'dragstart', function (e) {
e.dataTransfer.effectAllowed = 'copy'; // only dropEffect='copy' will be dropable
e.dataTransfer.setData('Text', this.id); // required otherwise doesn't work
});
}
var bin = document.querySelector('#bin');
addEvent(bin, 'dragover', function (e) {
if (e.preventDefault) e.preventDefault(); // allows us to drop
this.className = 'over';
e.dataTransfer.dropEffect = 'copy';
return false;
});
// to get IE to work
addEvent(bin, 'dragenter', function (e) {
this.className = 'over';
return false;
});
addEvent(bin, 'dragleave', function () {
this.className = '';
});
addEvent(bin, 'drop', function (e) {
if (e.stopPropagation) e.stopPropagation(); // stops the browser from redirecting...why???
var el = document.getElementById(e.dataTransfer.getData('Text'));
el.parentNode.removeChild(el);
// stupid nom text + fade effect
bin.className = '';
yum.innerHTML = eat[parseInt(Math.random() * eat.length)];
var y = yum.cloneNode(true);
bin.appendChild(y);
setTimeout(function () {
var t = setInterval(function () {
if (y.style.opacity <= 0) {
if (msie) { // don't bother with the animation
y.style.display = 'none';
}
clearInterval(t);
} else {
y.style.opacity -= 0.1;
}
}, 50);
}, 250);
return false;
});
</script>
<a id="html5badge" href="http://www.w3.org/html/logo/">
<img src="http://www.w3.org/html/logo/badge/html5-badge-h-connectivity-device-graphics-multimedia-performance-semantics-storage.png" width="325" height="64" alt="HTML5 Powered with Connectivity / Realtime, Device Access, Graphics, 3D & Effects, Multimedia, Performance & Integration, Semantics, and Offline & Storage" title="HTML5 Powered with Connectivity / Realtime, Device Access, Graphics, 3D & Effects, Multimedia, Performance & Integration, Semantics, and Offline & Storage">
</a>
<footer><a href="/">HTML5 demos</a>/<a id="built" href="http://twitter.com/rem">@rem built this</a>/<a href="#view-source">view source</a></footer>
</section>
<a href="http://github.com/remy/html5demos"><img style="position: absolute; top: 0; left: 0; border: 0;" src="http://s3.amazonaws.com/github/ribbons/forkme_left_darkblue_121621.png" alt="Fork me on GitHub" /></a>
<script src="js/prettify.packed.js"></script>
<script>
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script>
try {
var pageTracker = _gat._getTracker("UA-1656750-18");
pageTracker._trackPageview();
} catch(err) {}</script>
</pre>
</div>
HTML5 Code
<div>
<pre class="brush:html">
<body>
<section id="wrapper">
<div id="carbonads-container"><div class="carbonad"><div id="azcarbon"></div><script type="text/javascript">var z = document.createElement("script"); z.type = "text/javascript"; z.async = true; z.src = "http://engine.carbonads.com/z/14060/azcarbon_2_1_0_VERT"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(z, s);</script></div></div>
<header>
<h1>Drag and drop</h1>
</header>
<style type="text/css">
li {
list-style: none;
}
li a {
text-decoration: none;
color: #000;
margin: 10px;
width: 150px;
border: 3px dashed #999;
background: #eee;
padding: 10px;
display: block;
}
*[draggable=true] {
-moz-user-select:none;
-khtml-user-drag: element;
cursor: move;
}
*:-khtml-drag {
background-color: rgba(238,238,238, 0.5);
}
li a:hover:after {
content: ' (drag me)';
}
ul {
margin-left: 200px;
min-height: 300px;
}
li.over {
border-color: #333;
background: #ccc;
}
#bin {
background: url(images/bin.jpg) top right no-repeat;
height: 250px;
width: 166px;
float: left;
border: 5px solid #000;
position: relative;
margin-top: 0;
}
#bin.over {
background: url(images/bin.jpg) top left no-repeat;
}
#bin p {
font-weight: bold;
text-align: center;
position: absolute;
bottom: 20px;
width: 166px;
font-size: 32px;
color: #fff;
text-shadow: #000 2px 2px 2px;
}
</style>
<article>
<p>Drag the list items over the dustbin, and drop them to have the bin eat the item</p>
<div id="bin"></div>
<ul>
<li><a id="one" href="#">one</a></li>
<li><a href="#" id="two">two</a></li>
<li><a href="#" id="three">three</a></li>
<li><a href="#" id="four">four</a></li>
<li><a href="#" id="five">five</a></li>
</ul>
</article>
</body>
</pre>
<a href="http://html5demos.com/">
Original Source</a>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-7055379145430326228.post-72591964669500257362013-06-25T22:28:00.000-07:002013-06-26T02:09:47.773-07:00PhoneGap Tutorial - Parsing xml file using javascipt and displaying the data on the android and ios mobile screens <b><h2>Title : I am going to explain u how to parse xml file and display data on your mobile screen.</h2></b>
<b><p>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.</p></b>
Here is the xml file which we are going to parse.
<pre class="brush:xml">
<Travels>
<website id="1">
<sitename>MakeMyTrip.com</sitename>
<Description>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.</Description>
<Image>travellogos/makemytrip-logo.jpg</Image>
</website>
<website id="2">
<sitename>GoIbibo.com</sitename>
<Description>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.</Description>
<Image>travellogos/goibibo_logo.png</Image>
</website>
<website id="3">
<sitename>Abhibus.com</sitename>
<Description>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.</Description>
<Image>travellogos/abhibus-logo.png</Image>
</website>
<website id="4">
<sitename>Travelyaari.com</sitename>
<Description>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.</Description>
<Image>travellogos/travelyaari-com-logo-w240.png</Image>
</website>
<website id="5">
<sitename>Redbus.in</sitename>
<Description>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.</Description>
<Image>travellogos/logo_bc9228d_163.jpg</Image>
</website>
<website id="6">
<sitename>Expedia.co.in</sitename>
<Description>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.</Description>
<Image>travellogos/expedia-logo.png</Image>
</website>
<website id="7">
<sitename>Other websites</sitename>
<Description>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.</Description>
<Image>travellogos/travel-agency-logos.jpg</Image>
</website>
</Travels>
</pre>
<p>
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.
<h2> Javascript file </h2>
<div>
<pre class="brush:javascript">
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<travels.length;travel++){
var websitename = travels[travel].getElementsByTagName("sitename")[0].childNodes[0].nodeValue;
websites.push(websitename);
var des = travels[travel].getElementsByTagName("Description")[0].childNodes[0].nodeValue;
description.push(des);
var images = travels[travel].getElementsByTagName("Image")[0].childNodes[0].nodeValue;
logos.push(images);
}
var listview = document.getElementById("container");
var ul = document.createElement("ul");
for(var i=0;i<websites.length;i++){
var livalue= document.createTextNode(websites[i]);
var desvalue = document.createTextNode(description[i]);
var li = document.createElement("li");
var table = document.createElement("table");
var table1 = document.createElement("table");
var tr1 = document.createElement("tr");
var td1 = document.createElement("td");
var img = new Image();
img.src= logos[i];
img.setAttribute("width",60);
img.setAttribute("height",30);
img.setAttribute('onclick', "test()");
td1.appendChild(img);
tr1.appendChild(td1);
var tr2 = document.createElement("tr");
var td2 = document.createElement("td");
var td3 = document.createElement("td");
td2.appendChild(livalue);
td3.appendChild(desvalue);
tr1.appendChild(td2);
tr2.appendChild(td3);
table.appendChild(tr1);
table1.appendChild(tr2);
li.appendChild(table);
li.appendChild(table1);
ul.appendChild(li);
}
listview.appendChild(ul);
}
</pre>
</div>
<h2>Html File </h2>
<div>
<pre class="brush:html">
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=320; user-scalable=no" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Minimal AppLaud App</title>
<link rel="stylesheet" href="Travels.css" />
<script type="text/javascript" charset="utf-8" src="phonegap-1.4.1.js"></script>
<script type="text/javascript" charset="utf-8">
var onDeviceReady = function() {
document.getElementById("content").innerHTML = "Welcome to Coupons Shop";
};
function init() {
document.addEventListener("deviceready", onDeviceReady, true);
}
</script>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="retina.js"></script>
<script type="text/javascript" src="js/Travel.js"></script>
</head>
<body onload="travel();" id="stage" class="theme">
<header><h2> Coupons Shop</h2>
</header>
<div id="container">
</div>
</body>
</html>
</pre>
</div>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7ajlL2VddYjhu517suJTEYAQM_VW8kWe3ggoCXTlGVZ41m8Q1iL3xB3v0tZXdFLGJPNIzRrDtMrKQT7li8Ospcy48RerrTYnkJFNJuhD7QBQXFgqFGXLzga9j1v6Rfi8ZORuodBVEFckT/s1600/parsingxml.png" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7ajlL2VddYjhu517suJTEYAQM_VW8kWe3ggoCXTlGVZ41m8Q1iL3xB3v0tZXdFLGJPNIzRrDtMrKQT7li8Ospcy48RerrTYnkJFNJuhD7QBQXFgqFGXLzga9j1v6Rfi8ZORuodBVEFckT/s320/parsingxml.png" /></a>Unknownnoreply@blogger.com27tag:blogger.com,1999:blog-7055379145430326228.post-76679991396564250752013-06-24T23:02:00.000-07:002013-06-25T21:48:15.052-07:00Converting 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.
<pre class="brush:php">
<?php
//database configuration
$config['mysql_host'] = "mysql.neq3.com";
$config['mysql_user'] = "u462945266_sree";
$config['mysql_pass'] = "9963447141";
$config['db_name'] = "u462945266_db";
$config['table_name'] = "Coupons";
//connect to host
mysql_connect($config['mysql_host'],$config['mysql_user'],$config['mysql_pass']);
//select database
@mysql_select_db($config['db_name']) or die( "Unable to select database");
$xml = "<?xml version=\"1.0\" encoding=\"UTF-8\"?>";
$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 .= "<![CDATA[$value]]>";
//and close the element
$xml .= "</$key>";
}
$xml.="</".$config['table_name'].">";
}
}
//close the root element
$xml .= "</$root_element>";
//send the xml header to the browser
header ("Content-Type:text/xml");
//output the XML data
echo $xml;
?>
</pre>
Here is the out put file i got with the above code.
<pre class="brush:xml">
<Travels><website id="1"><sitename>MakeMyTrip.com</sitename><Description>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.</Description><Image>travellogos/makemytrip-logo.jpg</Image></website><website id="2"><sitename>GoIbibo.com</sitename><Description>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.</Description><Image>travellogos/goibibo_logo.png</Image></website><website id="3"><sitename>Abhibus.com</sitename><Description>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.</Description><Image>travellogos/abhibus-logo.png</Image></website><website id="4"><sitename>Travelyaari.com</sitename><Description>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.</Description><Image>travellogos/travelyaari-com-logo-w240.png</Image></website><website id="5"><sitename>Redbus.in</sitename><Description>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.</Description><Image>travellogos/logo_bc9228d_163.jpg</Image></website><website id="6"><sitename>Expedia.co.in</sitename><Description>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.</Description><Image>travellogos/expedia-logo.png</Image></website><website id="7"><sitename>Other websites</sitename><Description>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.</Description><Image>travellogos/travel-agency-logos.jpg</Image></website></Travels>
</pre>
In next tutorial I will explain you how to parse this xml file and display data on mobile screen using phonegap.Unknownnoreply@blogger.com1tag:blogger.com,1999:blog-7055379145430326228.post-21354816299794730062013-06-24T02:06:00.001-07:002013-06-24T02:06:40.702-07:00PhoneGap Accelerometer Tutorial with example<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: center;">
<b>PhoneGap Accelerometer tutorial with example</b></div>
<div align="justify" style="text-align: center;">
</div>
</div>
Title : Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-7055379145430326228.post-24466649334871014462013-06-19T03:59:00.000-07:002013-06-24T22:24:05.002-07:00PhoneGap Tutorial - posting form data to MySql database Using PHPHi 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
<div>
<pre class=brush:"html">
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript">
// Category Lists
var categories = new Array();
categories['Travel_Coupons'] = new Array('Abhibus.com','RedBus.in','MakemyTrip.com','Travelyaari.com');
categories['Electronics_Coupons'] = new Array('FlipKart.com','shopping.com','deals.in','shopxyz.in');
categories['Fashion_Coupons'] = new Array('jabong.com','xyz.com','fashion.com');
categories['Gift_Coupons'] = new Array('giftshop.in','gifts.in','sendgifts.com','freegifts.in');
// State lists
var states = new Array();
states['Travel_Coupons'] = new Array('Alberta','British Columbia','Ontario');
states['Electronics_Coupons'] = new Array('Baja California','Chihuahua','Jalisco');
states['Gift_Coupons'] = new Array('California','Florida','New York');
function changeStates() {
cntrySel = document.getElementById('Category');
stateList = categories[cntrySel.value];
changeSelect('Website', stateList, stateList);
}
function changeSelect(fieldID, newOptions, newValues) {
selectField = document.getElementById(fieldID);
selectField.options.length = 0;
for (i=0; i<newOptions.length; i++) {
selectField.options[selectField.length] = new Option(newOptions[i], newValues[i]);
}
}
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}
addLoadEvent(function() {
changeStates();
});
</script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
</head>
<body>
<div style="padding:3px 2px;border-bottom:1px solid #ccc">Ajax Form</div>
<form id="ff" action="http://html5.neq3.com/CouponsApp/addcoupon.php" method="post">
<table>
<tr>
<td>Category:</td>
</tr>
<tr>
<td>
<select name="Category" id="Category" onchange="changeStates();">
<option value="Travel_Coupons">Travel Coupons</option>
<option value="Electronics_Coupons">Electronics Coupons</option>
<option value="Fashion_Coupons">Fashion Coupons</option>
<option value="Gift_Coupons">Gift Coupons</option>
</select>
</td>
</tr><tr>
<td>Website:</td>
</tr>
<tr>
<td>
<select name="Website" id="Website" onchange="changeCities();">
<option value="">Please select a Website</option>
</select>
</td>
</tr><tr>
<td>CouponTitle : <input type="text" id="CouponTitle" name="CouponTitle"></td>
</tr>
<tr>
<td>CouponDescription : <input type="text" id="CouponDescription" name="CouponDescription"></td>
</tr>
<tr>
<td>CouponCode : <input type="text" id="CouponCode" name="CouponCode"></td>
</tr>
<tr>
<td>AffiliateLink : <input type="text" id="AffiliateLink" name="AffiliateLink"></td>
</tr>
<tr>
<td>AffiliateImage : <input type="text" id="AffiliateImage" name="AffiliateImage"></td>
</tr>
<td><input type="submit" value="Submit"></input></td>
</table>
</form>
<script type="text/javascript">
$('#ff').form({
success:function(data){
$.messager.alert('Info', data, 'info');
}
});
</script>
</body>
</html>
</pre>
</div>
Here is the PHP Server file :
<pre class=brush:"php">
<?php
$username="u462945266_sree";
$password="9963447141";
$database="u462945266_db";
$url = "mysql.neq3.com";
$category = $_POST['Category'];
$website = $_POST['Website'];
$title = $_POST['CouponTitle'];
$description = $_POST['CouponDescription'];
$code = $_POST['CouponCode'];
$affiliatelink = $_POST['AffiliateLink'];
$affiliateimage = $_POST['AffiliateImage'];
mysql_connect($url,$username,$password);
@mysql_select_db($database) or die( "Unable to select database");
$query = "INSERT INTO Coupons(Category,Website,CouponTitle,CouponDescription,CouponCode,AffiliateLink,AffiliateImage) VALUES ('$category','$website','$title','$description','$code', '$affiliatelink', '$affiliateimage')";
mysql_query($query);
mysql_close();
echo "You successfully added your Coupon";
?>
</pre>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJ7RfST2AxFPaK8pch5ZQbyPnBQYrdU5FD3UGMLdJpaci0xiJjcVGRZa3Yht95XQZkUwYFes1NT_y14Bz4Lm2Shs3__YsRD_vTVKzK7LS_rxHvDOX3EYQvp7RDBjf2lBdCXmATMu5Xc40m/s1600/phpmysql1.png" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJ7RfST2AxFPaK8pch5ZQbyPnBQYrdU5FD3UGMLdJpaci0xiJjcVGRZa3Yht95XQZkUwYFes1NT_y14Bz4Lm2Shs3__YsRD_vTVKzK7LS_rxHvDOX3EYQvp7RDBjf2lBdCXmATMu5Xc40m/s320/phpmysql1.png" /></a>
All Form data will be stored in mysql database like this
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPt-SvoPqqg2DiccillB25s8xzJjfWYAh03Mt_wtXiTf9hVl5VGH-ZD_1VlnBKlucOaQQCLq9WK-Qn_tsN8zUSKL4AieJ2UGU5vU25T0uW7gvLCzGqLBgp3FdLbfPhxp3GgpX9r3RPwLM7/s1600/mysqltables.png" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPt-SvoPqqg2DiccillB25s8xzJjfWYAh03Mt_wtXiTf9hVl5VGH-ZD_1VlnBKlucOaQQCLq9WK-Qn_tsN8zUSKL4AieJ2UGU5vU25T0uW7gvLCzGqLBgp3FdLbfPhxp3GgpX9r3RPwLM7/s320/mysqltables.png" /></a>
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.Unknownnoreply@blogger.com20tag:blogger.com,1999:blog-7055379145430326228.post-25723806059975336302013-06-19T02:16:00.000-07:002013-06-19T04:08:10.784-07:00PhoneGap tutorial parsing xml file and displaying results on android screen.<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: center;">
<b>Parsing xml file using JavaScript for PhoneGap Applications. </b></div>
<br />
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 :
<br />
<pre class="brush:xml">
<travels>
<website id="1">
<sitename>MakeMyTrip.com</sitename>
<description>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.</description>
<img />travellogos/makemytrip-logo.jpg
</website>
<website id="2">
<sitename>GoIbibo.com</sitename>
<description>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.</description>
<img />travellogos/goibibo_logo.png
</website>
<website id="3">
<sitename>Abhibus.com</sitename>
<description>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.</description>
<img />travellogos/abhibus-logo.png
</website>
<website id="4">
<sitename>Travelyaari.com</sitename>
<description>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.</description>
<img />travellogos/travelyaari-com-logo-w240.png
</website>
<website id="5">
<sitename>Redbus.in</sitename>
<description>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.</description>
<img />travellogos/logo_bc9228d_163.jpg
</website>
<website id="6">
<sitename>Expedia.co.in</sitename>
<description>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.</description>
<img />travellogos/expedia-logo.png
</website>
<website id="7">
<sitename>Other websites</sitename>
<description>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.</description>
<img />travellogos/travel-agency-logos.jpg
</website>
</travels>
</pre>
</div>
I am going to parse above xml file and display results as below
Here is the JavaScript file source code :
Travel.js
<pre class="brush:javascript">
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<travels.length;travel++){
websitename=travels[travel].getElementsByTagName("sitename")[0].childNodes[0].nodeValue;
var websites.push(websitename);
var des=travels[travel].getElementsByTagName("Description")[0].childNodes[0].nodeValue;
description.push(des);
var images = travels[travel].getElementsByTagName("Image")[0].childNodes[0].nodeValue;
logos.push(images);
}
var listview = document.getElementById("container");
var ul = document.createElement("ul");
for(var i=0;i<websites.length;i++){
var livalue= document.createTextNode(websites[i]);
var desvalue = document.createTextNode(description[i]);
var li = document.createElement("li");
var table = document.createElement("table");
var table1 = document.createElement("table");
var tr1 = document.createElement("tr");
var td1 = document.createElement("td");
var img = new Image();
img.src= logos[i];
img.setAttribute("width",60);
img.setAttribute("height",30);
img.setAttribute('onclick', "test()");
td1.appendChild(img);
tr1.appendChild(td1);
var tr2 = document.createElement("tr");
var td2 = document.createElement("td");
var td3 = document.createElement("td");
td2.appendChild(livalue);
td3.appendChild(desvalue);
tr1.appendChild(td2);
tr2.appendChild(td3);
table.appendChild(tr1);
table1.appendChild(tr2);
li.appendChild(table);
li.appendChild(table1);
ul.appendChild(li);
}
listview.appendChild(ul);
}
</pre>
</div>
Here is the html source code :
Coupons.html
<pre class="brush:html">
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=320; user-scalable=no" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Minimal AppLaud App</title>
<link rel="stylesheet" href="Travels.css" />
<script type="text/javascript" charset="utf-8" src="phonegap-1.4.1.js"></script>
<script type="text/javascript" charset="utf-8">
var onDeviceReady = function() {
document.getElementById("content").innerHTML = "Welcome to Coupons Shop";
};
function init() {
document.addEventListener("deviceready", onDeviceReady, true);
}
</script>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="retina.js"></script>
<script type="text/javascript" src="js/Travel.js"></script>
</head>
<body onload="travel();" id="stage" class="theme">
<header><h2> Coupons Shop</h2>
</header>
<div id="container">
</div>
</body>
</html>
</pre>
</div>
Css file used for this page :
Styles.css source code
<pre class="brush:css">
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%; }
</pre>
ScreenShot
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEK9fH3ND4SibuhteBVPt59rDJSXIOBEgZQPGnSyxJt4w5tt2U8L0ZJluc_zhsbY-Kdj6qCSLgb9dJo9UCKkAAI8LwA2HrkxtS9XIvu5ZUOwDbwRou0W7jsxUNaSz6N8alwgVSZcQJofS6/s1600/CouponShop+1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEK9fH3ND4SibuhteBVPt59rDJSXIOBEgZQPGnSyxJt4w5tt2U8L0ZJluc_zhsbY-Kdj6qCSLgb9dJo9UCKkAAI8LwA2HrkxtS9XIvu5ZUOwDbwRou0W7jsxUNaSz6N8alwgVSZcQJofS6/s320/CouponShop+1.png" /></a></div>
Unknownnoreply@blogger.com1tag:blogger.com,1999:blog-7055379145430326228.post-39402292046333229202013-06-18T22:59:00.000-07:002013-06-18T23:00:06.696-07:00The Java Tutorials - What can Java do? How can Java Technology Change My Life?<div dir="ltr" style="text-align: left;" trbidi="on">
Answers to Above Questions :<br />
<br />
<br />
<h1>
What Can Java Technology Do?</h1>
<br />
<div id="PageContent">
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:<br />
<ul>
<li>
<b>Development Tools</b>: 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 <code>javac</code> compiler, the <code>java</code> launcher, and the <code>javadoc</code> documentation tool.<br />
</li>
<li>
<b>Application Programming Interface (API)</b>: 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
<a class="OutsideLink" href="http://docs.oracle.com/javase/7/docs/index.html" target="_blank">Java Platform Standard Edition 7 Documentation</a>.<br />
</li>
<li>
<b>Deployment Technologies</b>: 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.<br />
</li>
<li>
<b>User Interface Toolkits</b>: The Swing and Java 2D toolkits make it possible to create sophisticated Graphical User Interfaces (GUIs).<br />
</li>
<li>
<b>Integration Libraries</b>: 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.<br />
<br />
<br />
<div id="PageTitle">
<h1>
How Will Java Technology Change My Life?</h1>
</div>
<div id="PageContent">
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:<br />
<ul>
<li><b>Get started quickly</b>: 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++.</li>
<li><b>Write less code</b>: 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++.</li>
<li><b>Write better code</b>: 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.</li>
<li><b>Develop programs more quickly</b>: 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.</li>
<li><b>Avoid platform dependencies</b>: You can keep your program portable by avoiding the use of libraries written in other languages.</li>
<li><b>Write once, run anywhere</b>: Because applications
written in the Java programming language are compiled into
machine-independent bytecodes, they run consistently on any Java
platform.</li>
<li><b>Distribute software more easily</b>: 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.</li>
</ul>
</div>
</li>
</ul>
</div>
</div>
Unknownnoreply@blogger.com0