Skip to main content

MOBILE APPLICATIONS USING WEB TECHNOLOGIES


As the world of smart phones helps in increasing the usage of the world of internet in everyday life. In this is tutorials, learn how to use existing technologies in mobile applications. Prerequisite for building these hybrid applications is some web development skills.

JQuery mobile with help of Phonegap technology make it possible to build the hybrid applications that work on different operating systems like native applications which developed with the native language of that operating system. There are many operating systems such as iOS, Android, Blackberry OS, Windows OS, Bada and many others.



The Applications which are targeting multiple OS environment are built using web technologies and these applications are also being called as hybrid applications.

Let us start building some basic mobile application, before starting the application the prerequisites:

<! DOCTYPE HTML>
<html lang= “en”>
<head>
<meta charset= “utf-8”/>
<title> View Source </title>
<meta name= “viewport” content= “width=device-width, Intial-scale=1,maximum-scale=1”/>


<meta name= “viewport” content= “width=device-width, Intial-scale=1,maximum-scale=1”/>

Note:
One of the most useful note for mobile developer about the Meta tag. When developing a responsive website that can be opened in every device.


< link rel= “stylesheet” Href= “ http://code.jquery.com/mobile/1.1.0/ jquery.mobie-1.1.0.min.css”/>
< script src= “http://code.jquery.com-1.6.4.min.js></script>
<script src= “http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.10.min.js”></script>
<script src="_/js/myscript.js"></script> 
<link rel="stylesheet" href="_/css/mystyles.css" />
</head>
<body>Welcome to the My App</body>
</html>

In order to understand the mobile app development, firstly you need to understand jQuery Mobile which uses the HTML5 data attribute create data-role attribute with different values to create a mobile phone interfaces.


<!DOCTYPE html>
<html lang="en">
<head>      
<meta charset="utf-8" />     
<title>View Source</title>   
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<link rel="stylesheet" href="_/css/jquery.mobile.css" />  
<script src="_/js/jquery.js"></script>     
<script src="_/js/jquery.mobile.js"></script> 
<script src="_/js/myscript.js"></script> 
<link rel="stylesheet" href="_/css/mystyles.css" />
</head>
<body>      
<div id="home" data-role="page" data-title="View Source: Home"> 
<div data-role="header">                        
<h1>Home</h1>                            
<a href="#blog" data-icon="arrow-r" data-iconpos="right" class="ui-btn-right">Blog</a>           
</div>                 
<p>Welcome to the View Source App</p>              
<a href="#blog" data-transition="flip">Blog</a>     
</div>       
<div id="blog" data-role="page" data-title="View Source: Blog">                
<div data-role="header">                        
<h1>Blog</h1>                     
<a href="#home" data-icon="home" data-iconpos="notext">Home</a>    
</div>                 
<p>This is our blog.</p>                
<a href="#home" data-transition="pop">Home</a>        
</div>
</body>
</html>


Here is the some of the tags which will help us to understand the jQuerymobile.

Button:

data-role= “button”

Data Attributes                      Values
1.    data-corners                      True/false( Rounding the corners)
2.    data-icon
3.    data-iconpos                     left/right/top/bottom/notext
4.    data-iconshadow              true/false
5.    data-inline                         true/false
6.    data-mini                           true/false
7.    data-shadow                     true/false
8.    data-theme                       letter(a-z)

To know more about buttons a useful link is provided below:

jquerymobile.com/demos/1.1.0/docs/buttons/buttons-icons.html

 
To group the menu-icons use using container, we use the data-role= “controlgroup” and including another attribute with data-type= “ horizontal/veritical”
  

Checkbox

type="checkbox"

Attribute List:              
1.    data-mini                          
2.    data-theme                      
3.    data-role  
                                   
Collapsible

  • data-role= “collapsible”
Attribute list:                                                     
1.    data-collapsed                                         
2.    data-collapsed-cue-text
3.    data-collapsed-icon
4.    data-content-theme                                
5.    data-expanded-cue-text
6.    data-expanded-icon
7.    data-icons

Collapsible-set
  • data-role= “collapsibleset”
Attribute list:                                                     
1.    data-collapsed-icon
2.    data-content-theme
3.    data-expanded-icon
4.    data-iconpos
5.    data-inset
6.    data-mini
7.    data-theme


Controlgroup
  • data-role= “ controlgroup”
Attribute list:
1.    data-exclude-invisible
2.    data-mini
3.    data-theme
4.    data-type


Dialog
  • data-dialog= “true”
Attribute list:
1.    data-close-btn
2.    data-close-btn-text
3.    data-corners
4.    data-dom-cache
5.    data-overlay-theme
6.    data-theme
7.    data-title

Enhancement

data-enhancement= “false” or data-ajax= “ false”

Attribute list:

     1.    data-enhancement
2.    data-ajax

 Fixed Toolbar

data-role= “ header” or data-role= “footer” with fixed position

data-position= “fixed”.

Attribute Lists:

     1.    data-disable-page-zoom
2.    data-fullscreen
3.    data-tap-toggle
4.    data-transition
5.    data-update-page-padding
6.    data-visible-on-page-show

Flip Toggle Switch

An <input type= “checkbox”> with a data-role of "flipswitch".

Attribute List:

     1.    data-mini
2.    data-on-text
3.    data-off-text

Footer

data-role= “footer”

Attribute List:

     1.    data-id
2.    data-position
3.    data-fullscreen
4.    data-theme(a-z)

Header

data-role = “header”

Attribute List:

     1.    data-id
2.    data-position
3.    data-fullscreen
4.    data-theme

Page

data-role= “page”

Attribute List:

     1.    data-dom-cache
2.    data-overlay-theme
3.    data-theme
4.    data-title
5.    data-url

Navbar

data-role= “navbar”

Attribute List:

1.    data-icon

2.    data-iconpos

List

data-role= “listview”

Attribute List:

1.    data-autodividers

2.    data-count-theme

3.    data-divider-theme

4.    data-filter

5.    data-filter-placeholder

6.    data-filter-theme

7.    data-icon

8.    data-inset

9.    data-split-theme

10.  data-theme




<!DOCTYPE html>

<html lang="en">

<head>      

<meta charset="utf-8" />     

<title>View Source</title>   

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

<link rel="stylesheet" href="_/css/jquery.mobile.css" />  

<script src="_/js/jquery.js"></script>     

<script src="_/js/jquery.mobile.js"></script> 

<script src="_/js/myscript.js"></script> 

<link rel="stylesheet" href="_/css/mystyles.css" />

</head>

<body>      

<div id="home" data-role="page" data-title="View Source: Home"> 

<div data-role="header">                        

<h1>Home</h1>                   

</div>                 

<p>Welcome to the View Source App</p>              

<div data-role="controlgroup">

<a href="#blog" data-transition="flip" data-role="button" data-icon="arrow-r">Blog</a>               

<a href="#videos" data-transition="flip" data-role="button" data-icon="arrow-r">Videos</a> 

<a href="#photos" data-transition="flip" data-role="button" data-icon="arrow-r">Photos</a>          

<a href="#tweets" data-transition="flip" data-role="button" data-icon="arrow-r">Tweets</a>

</div>       

</div>       

<div id="blog" data-role="page" data-title="View Source: Blog">                

<div data-role="header">                        

<h1>Blog</h1>                     

<a href="#home" data-icon="home" data-iconpos="notext">Home</a>    

</div>

<p>This is our blog.</p>                

<a href="#home" data-transition="pop">Home</a>        

</div>

<div id="videos" data-role="page" data-title="View Source: Videos">        

<div data-role="header">                        

<h1>Videos</h1>                           

<a href="#home" data-icon="home" data-iconpos="notext">Home</a>    

</div>                 

<p>Videos Page.</p>  

<a href="#home" data-transition="pop">Home</a>        

</div>

     

<div id="photos" data-role="page" data-title="View Source: Photos">       

<div data-role="header">              

<h1>Photos</h1>                          

<a href="#home" data-icon="home" data-iconpos="notext">Home</a>    

</div>                 

<p>Photos from Flickr</p>           

<a href="#home" data-transition="pop">Home</a>        

</div>                 

<div id="tweets" data-role="page" data-title="View Source: Tweets">       

<div data-role="header">                        

<h1>Tweets</h1>

<a href="#home" data-icon="home" data-iconpos="notext">Home</a>    

</div>                 

<p>Tweets page.</p>           

<a href="#home" data-transition="pop">Home</a>        

</div>

</body>

</html>

Comments

Post a Comment

Popular posts from this blog

Blog monetization methods and techniques for extra Income

PEOPLE WHO ARE ONLINE WANT TO REACH OUT TO OTHERS. SO THEY ALL TRY OUT DIFFERENT WAYS TO INCREASE THEIR TRAFFIC . THE KNOWLEDGE OF GETTING TRAFFIC TO A WEBSITE OR A BLOG IS TURNING OUT TO BE EXPENSIVE IN PRESENT TIMES. SO MONETIZING BLOG IN ALL POSSIBLE WAYS IS MUST AND SHOULD BE TRIED. The creativity and passion for setting up a new blog or getting traffic to existing blog need a lot of efforts. Monetizing a blog is important but getting traffic is more important to get monetisation to be benefitted. MAKING ONLINE MONEY is not just a method for earning money and but it helps to make an extra income monthly. Monetization methods: 1. Try to create affiliate links 2. Create a short URL( PPC methods) methods 3. If it is your own business promote your own products. 4.  Allow Google Adsense and monetize. Most of the people do the same procedure for getting traffic and the traffic is more important to reach out.Obtain organic traffic, paid traffic, social media traffic, referral links...
Post a Comment
Read more

SEO Importance in Digital World

One of the significant advantage of SEO .SEO works to obtain a better ranking in the search engine search result. So in order to get on to the first page of the search engine’s SERP results, we need SEO and every website or blog owner plan for the same. CREATE A KIND OF WORK THAT CHERISH YOUR IDENTITY SEO IS LOVELY AND PERFECT TONE FOR UNIQUE PRODUCTS. Every SEO tip plays a crucial role in bringing your brand close to the people. SEO is the magnet of the web world to attract and bring in the business. So every website or blog owner suggests investing their time and money in SEO. It will build your business empire for the better future and get notice your hard by the people. SEO Optimized website that ranked in the search engine result pages gets a great deal of traffic. Think about everyday search request Think about clicks that obtain from organic search results the most highly successful marketer also admitted that SEO is the only effective way of obtaining organic traffic. Search ...
Post a Comment
Read more

Free Keyword Planner Tools To Rank in Google

SEO Tools for beginners: How to find keywords? Every website owners or blog runners are always looking Keywords for their topics and SEO keywords are very important to get their website noticed on SERP to dominate the huge competition they are in. I am also one of the contender in this game. So,  Many people like us search for keyword searching tools that are available for free in the market. I found some best sites and extensions ( plugins) helped in my process. So, I like to share this knowledge on this SEO and keyword searching tools. Keyword Surfer: Keyword Surfer is a 100% free extension that allows you to see search volumes directly in Google search results. By analyzing search volumes that appear in the SERPs and we also can find similar keywords for 70 countries. Keyword Surfer 2.0 also comes with  metrics such as word count and the number of exact keywords for top-ranking pages. The Presentation of this tool is very easy to understand make keyword research a...
3 comments
Read more