Best HTML5 Mobile Apps UI Frameworks

While the fight is still on whether HTML5 Apps are better or Native Mobile apps , the market is flooded by both and the number of free downloads are expected to grow to 138,809 Millions by 2014 as per the Gartner Report.  Since the growth rate of paid apps is much less than the free apps, there has to be a way to keep the cost of developing apps low.HTML5 Mobile Apps are in the market for quite some time and they have evolved a lot.  There’s no doubt that the HTML5 apps are a cheaper means to develop because of the following reasons :

  • HTML5 Apps are built on WORA concept( Write Once Run Anywhere ), one can develop for iOS, Android, Windows and BBM by writing the same code. ( You can read how to develop HTML5 apps by clicking here )so the cost of development is very low.
  • The cost for  Maintaining and Supporting  HTML5 Mobile Apps is less as there is only a single code base .

So  in this article, we will tell you some of the leading UI Frameworks that will help you to develop  HTML5 mobile apps. Using a framework saves the time of the developer and improves the performance.

One of the oldest UI Frameworks around, this is the most widely used mobile framework. This is light weight, extensively uses jQuery and includes huge number of third party plugins and themes. One of the reason of its popularity is that it’s free and open source (MIT licensed). There are large number of resources available online(Stack Overflow) that can teach how to use and will help in development.

However, personally we feel that this framework isn’t that robust and can’t handle heavy applications. Problems like flickering are rampant and jQueryMobile continues to improve.

Based on the popular MVC architecture, Sencha Touch comes with 50+ built in components . Developers can also created their own components and  it also gives storage, device profile and top-level application  abstractions. Now supporting phonegap, Sencha Touch is giving tough competition to jQueryMobile.

Developers having hands on experience in ExtJS and Backbone.js will not have any problems developing mobile apps in Sencha Touch.

While there aren’t any performance issues like that of jQueryMobile, the fact that it’s not free completely may be a disadvantage.

Telerik’s brain child Kendo UI Mobile has been the buzz word and those who have used it, rate it the best. Based on the MVC Framework like Sencha Touch, there aren’t any major performance issues. Having developed many financial apps in this framework, this will certainly capture the market very soon. The only disadvantage that it has the huge cost which makes it  not so suitable for developers but companies.

This is a part of the large Kendo UI Framework which makes it the best available option for web, mobile and the desktop apps. They have the much talked about “flat” theme of the iOS and otherOS specific themes and functionality.

The much talked about Intel’s framework is fast, optimized for iOS and Android but not reliable. It has MVC framework and it also allows external framework to work along.  There’s no need to depend upon Phonegap for this small and light framework.

However, the documentation available on the website isn’t detailed.  This framework is still in developing stage.

How mobile Apps are Changing the Traditional Politics

The largest democracy in the world will see the general elections in 2014 and Mobile Apps , just like other multi media technologies are proving to be a game changer. In the recently held elections in 5 states of India where the number of voters were more than the entire population of some countries of the world, the parties that used social media had an edge over the others. There are two ways in which mobile apps can be put to use in the elections. First is by the political parties, to woo the voters and to make them aware of the schemes or manifestos, Second is by the third parties, like NEWS companies to analyse, aware and to communicate.  Not only in India, the role of Mobile apps has been seen in the 2008 US elections and the recently held Japanese elections too.

Focusing on India, AAP’s mobile app connects very much with the public and contains latest blogs from their leaders, opinion polls, twitter and Facebook connectivity, videos and much more. It also has a donate feature which will help them to raise the money.  Similarly, BJP’s mobile app tells you about the BJP and provides important information for voters. Presently focused on Delhi, just like AAP’s app, these apps will have to be changed for the upcoming general elections.

Just like the role of social media can’t be ignored in the upcoming elections, Mobile apps too are gaining popularity. However, there is a huge scope for developers. There aren’t many mobile apps in the market for the upcoming elections in the India and considering the number of mobile phone users, the market is huge. This time , it will be different. If put to use correctly, the apps can provide a direct connect between voters and the politicians. India should learn from the social and digital campaign of Obama. The mobile apps developers need to tap this talent and fill this gap and engage more and more people through their mobile apps. While the apps are very few today, it will be interesting to see how things go by the time we come towards 2014 elections.

Mobile Markets for High-Tech Plungers

We may live in a global world where the financial markets never sleep, but keeping in touch with the latest prices no longer requires us to be tethered to a laptop or desktop computer. The new breed of mobile apps allow us to receive up-to-the-minute charts, figures and analysts’ reports while equipped with nothing more than a free-wheeling tablet or smartphone. Below we’ve included ten of the best apps we can find, given the rather specific demands of these programs.

The best of these apps are far more than mere conversions of existing desktop software. Even in the normal-sized trading world, debates proliferate about whether it’s better to be a ‘Technical Analyst’, using chart action to plot the next move, or a ‘Fundamentals’ trader, combing the balance sheets for such old-fashioned snippets of info as revenue and cash flow. Either approach, though, demands access to lots of intricate data, and the cramped screens and limited workspace of even relatively large tablets aren’t a natural fit. However, by simplifying the controls, and creating nimble interfaces that allow users to effortlessly zoom in and out, or switch between timeframes, even stunningly ornate charts can be recreated in something like their full glory. The wonder ofiChartist, for instance, offers many of the everyday tools that a market trader might require. On the other hand, Stock Guru arms investors with all the stats, sheets, and ratios that they might need. In the capable hands of such apps, the financial markets have made a successful transition to the small screen.

There are some important points to remember. Most of the best financial apps are Apple only, and Android users will find themselves with fewer options – if you’re thinking of buying a device in the coming months, you’ll be more comfortable if you opt for Apple. Many of the apps here are cheap compared to desktop applications, but you’ll often have hidden charges. If you want anything other than delayed prices or end of day data, you’ll probably need to factor in exchange fees. You may also be forced to switch your money to another broker in order to get the full benefit of some apps. Make sure that the app itself is designed to handle the type of markets that you’re interested in. Playing the stock market, for instance, is very different from dealing in commodities or forex (foreign exchange). Options traders will likely need an app tailored to their needs. Also, a desktop PC is rather hard to lose. An iPad less so. If you’re looking to carry your device around with you for frequent updates, the risk of damage will be higher. Luckily, it’s quite easy to find some juicy policies for iPads that can cover you against theft, damage, and even the risk of pouring a cup of coffee onto the screen as your new stock climbs unexpectedly into the green.

Top 10 Apps

1. Stock Guru (Apple) – $19.99 – Stock Guru has quickly established itself as the essential app for those who work with old-fashioned fundamentals rather than Technical Analysis. It holds details of close to 7,000 stocks and shares (on NYSE, AMEX and NASDAQ), and collates many of the best-loved tools and reports. The Sharpe Ratio and Risk scores let you root out the safer picks, while financial strength and momentum ratings add texture to your findings. You can see what business luminaries are saying about specific stock, and check out their raw figures, using screening tools to remove the chaff. It’s not cheap, at $19.99, but to any serious investor, this will be money well spent.

2. iChartist (Apple) – $8.99 – In some senses the flipside of Stock Guru, iChartist is aimed squarely at Technical Analysis mavens. Effortlessly dodging the usual pitfalls of displaying charts on the small screen, iChartist impresses with a superb interface thatlets you zoom in and out with a quick pinch or squeeze of the fingers. You can choose between candlestick, line and OHLC charts. Impressively, you can even add trend lines, Fibonacci retracements, and such essentials as Bollinger Bands and MACD. It can even cater for commodities and forex, as well as stocks and shares. It’s not cheap, but the price does contain end of day data. You will get a fuller features list with a desktop version, but in the world of apps, this is the TA king.

3. StockWatch (Apple) – $2.99 – This app concentrates less on bringing you lots of information and analysis, and more on letting you check your entire portfolio at a glance. You can monitor every stock you own, stealing a quick glance at the price and gain/loss whenever you wish. Vastly simplified, it’s a neat way of checking where you are within seconds.

4. CBNC Real-Time (Apple) – Free – Probably the best of the news apps, CBNC’s slick interface lets you keep up with the latest events. Stock quotes even extend to pre- and post-market data, so you can see how participants are reacting to breaking news stories, financial results announced after the market close etc. A good use of graphs illuminate key stories, and historical charts are available to add a little context. News clips are collected from the television channel, so there’s a constant injection of new material. This is about the best there is for free. The Bloomberg app is also worth catching, though, especially with its use of push notifications to keep you fully informed throughout the day.

5. StockTwits (Apple/Android) – Free – Market trading is really about having the right information. As the name suggests, StockTwits tries to create a Twitter-style network for market enthusiasts, letting them talk figures and buy/sell signals all day long. You can follow all messages on a specific stock, or just subscribe to particular users instead. Like its model, StockTwits has plenty of babble, but if you’re prepared to sift a little, you can pick out sparkling nuggets of information. One to keep an eye on, but also one to try not being distracted by.

6. JStock Android (Android) – Free ($4.99 to lose advertisements) – Android users aren’t best served by general charts packages, but this is one of the better options, and covers most stocks. The effective use of color makes it a pleasure to use, and a number of useful filters and conversion tools help you to keep on top of your stocks. It lacks the sophisticated features of Stock Guru or iChartist, but will be a workable substitute for Android users.

7. FuturesLive (Apple) – $1.99 – Dedicated to the commodities markets, this app makes it very easy to monitor the price of pork bellies, orange juice, oil, gold, or just about any commodity. In all honesty, the commodities markets are extensive enough in their own right, so it’s nice not having to give extra room to also accommodate the stockmarkets. It lacks the advanced features of iChartist, but will provide commodities specialists with the best way of keeping an eye on their portfolio.

8. OptionsHouse (Apple/Android) – Free – The maths-heavy world of options trading isn’t for everyone, but this is the top app in that field. You may want to look elsewhere for properly designed charts and news, but many of the options-specific features are stunning, including the wonderfully intuitive handling of options chains. You will need to open an account with OptionsHouse but, otherwise, this is an exemplary guide through the esoteric landscape of options trading.

9. iTrade Stock Market Simulator (Apple) – Free – A simulation of the stock market that allows would-be investors to have a plunge without putting their real funds at risk, this is a sparkling introduction to the markets. You’re given up to 100K to build a portfolio, and you even get the chance to do research and follow the news stories on your choices. It can’t recreate the nervous tension that most real-life investors will be familiar with, but it does give you a taste of what will be needed to succeed. You can add extra pep by getting your friends and family to join, and you can even create a private leaderboard to increase the competitive edge. The Fantasy Stock app is another very nice variation on this theme.

10. Stockmarket Technical Analysis (Android) – Free -Everyone needs to start somewhere. This app takes you through all the basics (and some of the more advanced features) of technical analysis, using clear illustrations to make the point. It perhaps doesn’t do anything a decent web-site can’t, and serious users would be better off burying their heads in a copy of John J Murphy. But as an intro to the unforgiving world of TA, this is a nice little app.

This post is written by Eve Pearce who has a Graduation in International Business and Journalism

Healthcare Apps for a Digital Age

While most of us are anchored firmly in the digital world, the landscape of hospitals and other healthcare organizations seems rather primitive, often choosing to drown its inhabitants in a sea of paperwork rather than offering them a versatile and adaptive digital interface that provides them with all the information when and where they need it. Here we’ll look at the reasons why the mobile app revolution could transform healthcare – and why the wheels have taken so long to start turning.

Big systems bigger bottlenecks

Most hospitals are now wired into a vast computer system. Yet, despite the presence of so much technology, data entry remains frustratingly backwards. Computer crashes and nurses queuing to get access to the system are just two of the likely bottlenecks. Where doctors and nurses are on the move, they frequently have access to little more than a clipboard and pen. Any notes they make have to be laboriously recopied across into the system – dramatically increasing the chances that mistakes will be introduced into a patient’s details, possibly with life-threatening consequences. For the sake of increasing time and decreasing tedium, errors and bottlenecks, then, it makes sense that healthcare professionals can carry a mobile tablet with them, entering the data directly into the system as they go. It would then be easy to use this extensive data as part of much larger research projects, allowing professionals to create more advanced statistics and information. Much more than that, though, a portable interface would mean that every professional had the entire resources of the hospital system at his or her fingertips.

Whether they want to check a patient’s history, see what they’ve been treated for previously, or look at which medications they’re on, medical staff will be able to pull up the information with a few simple clicks. There’ll be no more relying on incomplete charts, or trying to remember what they may have read on the computer minutes (or even hours) ago. Neither will they need to plague patients with a barrage of questions – never easy given the likely bewilderment and disorientation of the patient (and even their relatives). Doctors can even order medications or check labs reports on the fly. A recent Black Book user poll showed that 83% of professionals would instantly move across to mobile devices for entering in data, ordering meds etc, confirming there is a definite interest in taking up such technology

Mobile technology breaks down walls

Mobile apps provide flexibility, and start to take us away from the idea of healthcare as incarceration in a clinical environment. A doctor visiting a patient in their home will be able to tap straight into hospital records, delving into as much information as they want in order to make a diagnosis. If they require more information, it may only take a few seconds to hook up a quick Skype conversation with a specialist, or somebody at the hospital who has more in-depth knowledge of the patient than they do. And although we’re dealing here more with apps being used within healthcare organisations, there are also practical solutions that will help patients themselves.

Self-diagnosis isn’t necessarily the best idea, but where patients (with the full guidance of their doctor) can use fully-checked and authorized apps to monitor abnormal heart rhythms, levels of glucose, perform ultrasounds etc. then this will relieve the strain on hospitals and cut the costs of providing specific equipment. It’ll also give many patients additional peace of mind, by allowing themselves to check and monitor themselves as they recover from a serious procedure. Research2Guidance state that as many as 500 million patients may be using medical mobile apps by 2015. Even without apps, technology itself will help ease the strain on overworked hospital equipment. For example, as Licensed Prescriptions explain, Autonomic Technologies has created a small electronic gum implant that can stop chronic headaches and migraines in their tracks. MELA Sciences has developed the MelaFind Scanner, a device that detects possible signs of skin cancer. This kind of self-help is bound to become a growth area in the future, and the industry needs to exploit technology sooner rather than later.

So, why the delay?

Healthcare professionals can save lots of time with mobile apps, and can also cut down errors and increase the quality of information available to them. So then, why have mobile apps not swept through hospitals and other institutions, even when introduced? Well, at least some of the blame is down to the design of the apps themselves. Some professionals are given little more than a smartphone. But even on a large-screen tablet, the size of the display is unimpressive – the Apple iPad Retina and Google Nexus 10, for instance, measure just 9.7 and 10 inches respectively. This amount of pixel real estate isn’t great for showing detailed statistics, or for offering lots of different options. In the Black Book user poll quoted earlier, 95% of the respondents said that the small screens were a problem, while 88% said they had problems navigating the interface and moving across charts etc. It’s not enough for healthcare apps to be simply miniature versions of the main computer system used across the hospital. Betting companies, for example, have found that apps for their sites need to be vastly simplified, with fewer immediately available options, and much larger buttons – carefully optimized to take full advantage of touch-sensitivity. Text and figures need to be larger in size. Until healthcare app designers start following the same lines, professionals will continue to find tablets and smartphones difficult and unrewarding to use.

There needs to be greater regulation and standardization surrounding these apps. This isn’t easy, since a variety of different platforms and interfaces can be employed, making the job of creating powerful but intuitive apps that can be understood by everyone, a tricky task. The new review procedures being implemented by the United States Food and Drug Act look like bringing some sanity and consistency to this area, but there’ll still be the matter of how do we keep data confidential when mobile devices can be left lying around, or are easy to steal. But with the mobile health app market estimated to reach $26 billion by 2017, there is a genuine need for organizations to use this opportunity to radically transform healthcare and remold it for the 21st century.

 

This post is written by Eve Pearce who has a Graduation in International Business and Journalism

Develop iOS, Android and Windows applications using HTML – Part 2

This post is in the continuation of my previous post . In this post, I will tell you about :

  • How to deploy HTML code to build iOS , Android and Windows application.
  • How to retrive the value of the data from the form that we created in my previous post.

The submit button that we created in our previous does nothing. In this, we will add some functionality to it. We will show a popup after we press submit showing the values that we entered in the text boxes. To do this, you need to write a function in a javascript. It is a good idea to create a separate folder for all your scripts. I have created a folder named “js” and created a file called “custom.js” in that.

 

For the popup, you need create a separate “div” tag. Place the code shown above the closing “</body>” tag .

<div data-role="popup" id="submitPopup" data-inline="true"  data-transition="slideup" data-position-to="origin" >

 


 

    <span id="popupText"></span>

 

</div>

The “data-role” defines that the element will be a pop-up and the id  “popupText” will be explained later.  Now we will call this popup on click of the submit button. For this, we need to write a function that will show this. Open your text editor and create a new file “custom.js” in the “js” folder that you have just created and paste the code below :

var name, email, id ; //every parameter is a variable in javascript, no int, strings or floats, just variables

 

function getData()

 

{

 

    name= document.getElementById("name").value; //code to get the user input of "name" field

 

    phone= document.getElementById("phone").value; //code to get the user input of "phone" field

 

    address= document.getElementById("address").value;    //code to get the user input of "address" field

 


 


 

    $("#submitPopup").popup("open"); // this will open the pop up

 

    $("#popupText").html("Hi " +name+", please verify your phone :"+phone +" and address : "+address+". Thanks."); //setting the value in the "popupText" id span

 


 


 

}

Here we are binding the “div” id(s) to the function.

Now we need to call the “getData()” function on the press of the “Submit” button. To do this, add

onClick="getData()"

 

in the <a> tag in index.html. Also, in the index.html, link the script file. The complete file looks like this :

<!DOCTYPE>

 

<html>

 

<head>

 

    <meta charset="UTF-8" />

 

    <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">

 

    <title>ChillGeeks</title>

 

    <link href="jquery-mobile/jquery.mobile-1.3.0.min.css" rel="stylesheet" type="text/css" />

 

    <script src="jquery-mobile/jquery-1.8.2.min.js" type="text/javascript"></script>

 

    <script src="jquery-mobile/jquery.mobile-1.3.0.min.js" type="text/javascript"></script>

 


 


 

    <script src="js/custom.js" type="text/javascript"></script>

 

</head>

 


 

<body>

 

    <div data-role="header" data-theme="b">

 

        <h1>Chill Geeks</h1>

 

    </div>

 

    <div data-role="content">

 

        <h3>

 

            This demo will show you how to add form elements

 

        </h3>

 

    </br>

 

    <input type="text"  id="name" value="" placeholder="Enter Your Name">

 

    <input type="tel"  id="phone" value="" placeholder="Enter Your Phone Number">

 

    <input type="text" id="address" value="" placeholder="Enter Your Address">

 

</div>

 

</br>

 

<div style="text-align:center">

 

    <a href="#" data-role="button" data-inline="true" data-theme="b" onClick="getData()" >Submit</a>

 

</div>

 


 

<div data-role="popup" id="submitPopup" data-inline="true" data-transition="slideup" data-position-to="origin" >

 


 

    <span id="popupText"></span>

 

</div>

 


 

</body>

 

</html>

Just run the code, and you will see the following screenshot after pressing Submit  button :

popup

Now comes the main part to deploy this code on actual mobile. We will do this with the help of Phonegap. To know what actual is Phonegap and what it does, click here.

You need to download the “cordova.js”. You can download it from here. Paste the contents (3 JS files)  in “HelloWorld” folder . Update the “index.html” to give it the reference of the Cordova files. The complete code looks like this :

<!DOCTYPE>

 

<html>

 

<head>

 

    <meta charset="UTF-8" />

 

    <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">

 

    <title>ChillGeeks</title>

 

    <link href="jquery-mobile/jquery.mobile-1.3.0.min.css" rel="stylesheet" type="text/css" />

 

    <script src="jquery-mobile/jquery-1.8.2.min.js" type="text/javascript"></script>

 

    <script src="jquery-mobile/jquery.mobile-1.3.0.min.js" type="text/javascript"></script>

 


 


 


 

    <script src="js/custom.js" type="text/javascript"></script>

 


 


 

    <script src="cordova.js" type="text/javascript"></script>

 


 


 


 

</head>

 


 

<body>

 

    <div data-role="header" data-theme="b">

 

        <h1>Chill Geeks</h1>

 

    </div>

 

    <div data-role="content">

 

        <h3>

 

            This demo will show you how to add form elements

 

        </h3>

 

    </br>

 

    <input type="text"  id="name" value="" placeholder="Enter Your Name">

 

    <input type="tel"  id="phone" value="" placeholder="Enter Your Phone Number">

 

    <input type="text" id="address" value="" placeholder="Enter Your Address">

 

</div>

 

</br>

 

<div style="text-align:center">

 

    <a href="#" data-role="button" data-inline="true" data-theme="b" onClick="getData()" >Submit</a>

 

</div>

 


 

<div data-role="popup" id="submitPopup" data-inline="true" data-transition="slideup" data-position-to="origin" >

 


 

    <span id="popupText"></span>

 

</div>

 


 

</body>

 

</html>

 

Create a new file in your text editor and name it “config.xml” that will give Phonegap the basic information about the application and save it in “HelloWorld” folder . Paste the following code in it :

<?xml version="1.0" encoding="UTF-8" ?>

 

    <widget xmlns = "http://www.w3.org/ns/widgets"

 

        xmlns:gap = "http://phonegap.com/ns/1.0"

 

        id        = "com.headstrong.stockintelligence"

 

        versionCode="10"

 

        version   = "1.0.0">

 


 

    <!-- versionCode is optional and Android only -->

 


 

    <name>Chill Geeks</name>

 


 

    <description>

 

        Created with the help of www.ChillGeeks.com .

 

    </description>

 


 

    <author>

 

    Chill Geeks

 

    </author>

 


 

     <feature name="http://api.phonegap.com/1.0/device" />

 


 

    <preference name="phonegap-version" value="2.9.0" />

 

    <preference name="orientation"      value="default" />

 

    <preference name="target-device"    value="universal" />

 

    <preference name="fullscreen"       value="false" />

 


 

    <icon src="icon.png" height="72" width="72" />

 


 

</widget>

 

You are almost done. Now create a new account on https://build.phonegap.com . Once created, you need to upload your code using a .zip format. Just zip all the contents of the Helloworld and upload and you will see something like this :

 

HTML app using phonegap 

Just scan the code using any bar code reader on your mobile and run the app. It will run smoothly.

To run on iOS device, you need to upload the developer certificate and configuration file.

 

This was all about building Android, iOS and Windows app using HTML5 and CSS. We will be sharing more tutorials in few days.

Develop iOS, Android and Windows applications using HTML – Part 1

Prerequisites: Basic knowledge of HTML , CSS and jQuery Mobile

 

This is the part one of the series, You can directly to second part from Develop iOS, Android and Windows applications using HTML – Part 2

 

There are different ways to develop mobile applications. One is to develop the applications using the Native Software Development Tools ( like developing Android applications using Eclipse in JAVA, or developing iOS application using XCode in Objective C) and the other one is to develop cross platform (i.e. platform independent applications, iOS, Android, Windows,  BBM) applications using Hybrid Development Tools in HTML5 and CSS.   To know about the difference between Native and Hybrid application development, please refer here . This tutorial will be a part of the series and some more tutorials will follow after this post.

 

Step 1

Donwload a Text Editor to write HTML code. Proffered ones are Notepad++ and Sublime Text. I am using a great Text Editor called Sublime Text 2 which you can download here.

Step 2

Download  Wamp Server from here.  After installation, run it and go to localhost. You will see an image as shown below.

wamp

 

Step 3

Go to the wamp server installation directory and create a folder named “HelloWorld” in www . (path: C:wampwww)

HelloWorld

Download jQueryMobile reference files from here to  Include the jQuery Mobile Scripts into your html page . Download Minified: jquery.mobile-1.3.1.min.js and Minified with Default theme: jquery.mobile-1.3.1.min.css (Right Click and Save As).

After this, Download jQuery scripts from hereDownload the compressed, production jQuery 1.10.1 and create a new folder in “HelloWorld” by the name of “jquery-mobile” .

jquery-mobile

Step 4

Go to “HelloWorld” folder and create a new .html file using using sublime text.

Reference the scripts downloaded in Step 3 and create the basic HTML Structure as shown below :

   1:  <!DOCTYPE>

 

   2:  <html>

 

   3:  <head>

 

   4:      <meta charset="UTF-8" />

 

   5:      <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">

 

   6:      <title>ChillGeeks</title>

 

   7:      <link href="jquery-mobile/jquery.mobile-1.3.0.min.css" rel="stylesheet" type="text/css" />

 

   8:      <script src="jquery-mobile/jquery-1.8.2.min.js" type="text/javascript"></script>

 

   9:      <script src="jquery-mobile/jquery.mobile-1.3.0.min.js" type="text/javascript"></script>

 

  10:  </head>

 

  11:  

 

  12:  <body>

 

  13:  

 

  14:  </body>

 

  15:  </html>

This is the basic page without any content. Now go to http://view.jquerymobile.com/1.3.1/dist/demos/ and click on Header Toolbar. View the source of any header you like to insert. I am in love with blue color so I am using that.

Insert the below code in the <body> tag :

   1:  <div data-role="header" data-theme="b">

 

   2:          <h1>Chill Geeks</h1>

 

   3:  </div>

 

After this your code looks like this :

   1:  <!DOCTYPE>

 

   2:  <html>

 

   3:  <head>

 

   4:      <meta charset="UTF-8" />

 

   5:      <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">

 

   6:      <title>ChillGeeks</title>

 

   7:      <link href="jquery-mobile/jquery.mobile-1.3.0.min.css" rel="stylesheet" type="text/css" />

 

   8:      <script src="jquery-mobile/jquery-1.8.2.min.js" type="text/javascript"></script>

 

   9:      <script src="jquery-mobile/jquery.mobile-1.3.0.min.js" type="text/javascript"></script>

 

  10:  </head>

 

  11:  

 

  12:  <body>

 

  13:      <div data-role="header" data-theme="b">

 

  14:          <h1>Chill Geeks</h1>

 

  15:      </div>

 

  16:  </body>

 

  17:  </html>

Save it and run http://localhost/helloworld/ on your Chrome. It should look like this :

appWithHeader

This won’t give you the feel of how it would look on Mobile. To do this, download the mobile simulator ripple from here and add it to Chrome.  Enable it and your app will look like this :

appWithHeaderEmulator

 

You can put any type of the element using jQueryMobile demo website. Just visit here .

After this initial header, let us just add some form elements. We will be adding textboxes and buttons.

Now after the closing div tag of the header, just add the following code :

 

<div data-role="content">

 

        <h3>

 

            This demo will show you how to add form elements

 

        </h3>

 

        </br>

 

        <input type="text" name="text" id="name" value="" placeholder="Enter Your Name">

 

        <input type="tel" name="text" id="phone" value="" placeholder="Enter Your Phone Number">

 

        <input type="text" name="text" id="address" value="" placeholder="Enter Your Address">

 

</div>

 

The data-role element in the above code defines the role of the content and then map its designing as based on the jQueryMobile scripts. After this , let’s add a submit button.

</br>

 

    <div style="text-align:center">

 

        <a href="#" data-role="button" data-inline="true" data-theme="b" >Submit</a>

 

    </div>

After this, your complete code looks like this :

<!DOCTYPE>

 

<html>

 

<head>

 

    <meta charset="UTF-8" />

 

    <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">

 

    <title>ChillGeeks</title>

 

    <link href="jquery-mobile/jquery.mobile-1.3.0.min.css" rel="stylesheet" type="text/css" />

 

    <script src="jquery-mobile/jquery-1.8.2.min.js" type="text/javascript"></script>

 

    <script src="jquery-mobile/jquery.mobile-1.3.0.min.js" type="text/javascript"></script>

 

</head>

 


 

<body>

 

    <div data-role="header" data-theme="b">

 

        <h1>Chill Geeks</h1>

 

    </div>

 

    <div data-role="content">

 

        <h3>

 

            This demo will show you how to add form elements

 

        </h3>

 

        </br>

 

        <input type="text" name="text" id="name" value="" placeholder="Enter Your Name">

 

        <input type="tel" name="text" id="phone" value="" placeholder="Enter Your Phone Number">

 

        <input type="text" name="text" id="address" value="" placeholder="Enter Your Address">

 

    </div>

 

</br>

 

    <div style="text-align:center">

 

        <a href="#" data-role="button" data-inline="true" data-theme="b" >Submit</a>

 

    </div>

 


 

</body>

 

</html>

Save the document and run http://localhost/helloworld/ on your Chrome. It should look like this :

App

 

This is the basic application, and does nothing but helps you to understand how to create mobile application. This currently runs on your browser, however, in the next tutorial, I’ll show you how to run this on your mobile.

5 reasons why path would eventually overtake facebook

We all have heard so many things about Facebook . The fastest growing company, a company with millions of users and other stuff and we are so much carried away by this that we don’t know that there actually exists some other social networking sites that are way better than Facebook. Recently, I came across Path . Launched in 2010 by the ex employees of Facebook, this wonderful app delivers much more than Facebook. Here’s why you would love this and why Path would eventually overtake Facebook :

  • Neat and Clean Design

PathThe first thing that you will notice after installing this app is how clean its design is. Only important things without the clutter. Unlike Facebook where they try to include so many things in so little space. The designers at path have done an excellent job.

  • User Friendly app

Path is all about sharing your precious moments. It’s all about the delight one gets through design, information, and communication after using the app. As they say in their values, it’s is simple, personal and a quality product.

  • Like a Journal

Sharing something on Path is like adding journal entries. It’s like writing a daily diary and keeping the best moments for ever. It’s much better than the Facebook’s timeline.

  • Edit and Upload Your Photos in Secs

path images With a built in photo editor that has so many options, the photo editing and uploading is much faster and easier.

  • Get the best of Instagram, Facebook and Twitter

In a way, Path is a mixture of three of these and is wonderfully designed. One can share his location, his activities, the music one is listening to and many more things in a very easy way.

Last but not the least, unlike Facebook, Path is only an app. It is designed for mobile users only and is gaining much popularity since its launch. To know more about the features and other stuff, you can click here . We at ChillGeeks give a thumbs up to this app

Build Loyal Visitors and Increase Traffic To Your Blog/Website With Punchtab

Getting more people to visit your blog is quite attainable but making them a regular visitor of your platter might not seem that easy. For that you need to play the trick, you need to lure them.

The underlying idea is simple you reward your visitor with something when he comes, and if the reward seems to be interesting enough he’s bound to bounce back for more. Now it comes to the rewards and I am pretty sure there are hundreds of options, including party casino and other goodies.

The installation is fairly simple on most of the platforms including Blogger and WordPress. after installation a “Rewards” tabs appear in your blog which when clicked by the user opens up a dialog offering the rewards.

loyalty marketing

You choose where to keep that button and you choose your own rewards.

02e create reward

Choose or make your rewards, set the number of points needed and you’re done!

02g choose points

You can also offer a one-time give away offer to your readers.
04c giveaway preview

The last step is copying the generated code snippet and pasting it in the HTML mode of your blog post.

blog loyalty program

Try this now, Click here!

Download Songs Directly To Your iPod

It might sometimes feels a bit hectic for the world’s best music playing device to be dependent on a PC for downloading songs and for you to wait that long. iPod touch, every music lover’s desire can not only play your favourite songs, music and videos but helps you have your documents with you anytime with ease. With this article we shall tell you about one of the best methods to download music directly on your iPod without using your PC.

For obvious reasons downloading music directly on your iPod will require internet connectivity, so please be sure of that. As you may already know that not all file types are compatible with your iPod, however the most common, MP3, AAC, VBR, WAV, AIFF, and AAX can be played with ease.

MusicMeow

Direct Download with Music Meow

Music Meow is a simple music download application that runs smoothly on your iPod. You may get the installer by using Cydia (You will need to jailbreak your iPod Touch before you get Cydia).

After installing the app, open the application inside your iPod.

You can now see three categories on your home screen, Search, Top 10 songs and Recent Searches. Just browse through these categories or make a new search, find and tap on the song you want and tada!, download your favourite song.

Top Financial Apps for iPhone, Android, Blackberry, HTC and Nokia

This list is something that you can finally tell your dad so as to why he must buy you a smartphone. Here’s a list of all time best Financial Apps.

Pageonce


pageonce

Available for download on iPhone, Android and Blackberry, Pageonce is a free app that lets you manage your personal finance in the most gracious way. It automatically organizes and tracks your money, bills, bank accounts, credit cards, investment accounts, frequent flyer miles, rewards, mobile minutes, text and data usage. You can even customize the app to get reminders and alerts.


Mint.com

min

Another little app from mint.com to organize all your money, investment and bills from your smartphone device. The app allows you add transactions and even their locations with the help of Google Maps. This app is available for download on iPhone and Android.

 

Money Manager

moneymanager

This simple app lets you manage your finances in an easy way. It features in and out entries, category management, charts, CSV export and comes with a widget, backup and restore capabilities, choose date and choose currency ability.

Bloomberg

bloombergAvailable for Symbian, iPhone and Android, this app from Bloomberg itself helps you get business and finance news, market data and stock tracking tools from the most trusted source financial professionals around the world rely upon.

E*Trade Mobile Pro

ChekbookThis app here, allows you to securely buy, sell, and place orders with a few taps, Anywhere, Anytime during market hours. It also provides free real-time quotes, news, charts and market commentary.

 

Checkbook

ETrade.Checkbook is an app that helps you manage your financial transactions without having the need if carrying your paper register with you all the time.
This app is been featured in in Daniel Begun’s upcoming book "Amazing Android Apps for Dummies".

Currency

CurrencyThis app helps you convert among 160+ currencies and commodities using up-to-the-minute foreign exchange rates.

Mortgage Calculator

Mortgage CalculatorThis app lets you calculate interests, outstanding amounts eligibility criteria for various loans. It also helps you manage all your loan needs and manages your loan accounts.

Stocks

StocksThis app lets you synchronize you portfolio at Google finance so that you never loose your transactions again. It support markets in US, Canada, UK, HK, Japan etc..

Expense Manager

EXPENSE MANAGERA very simple, yet extremely useful app that lets you manage all your sources of income and all your expenditure in the same place. It includes expense tracking and weekly/monthly/yearly income tracking. It can operate among multiple accounts, schedule the payments and recurring payments, payment alerts and more. The app is available for download on Symbian, Android and iPhone