Sunday, 1 November 2015

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="_/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>

2 comments:


  1. Mobile aplication testing is the process by which the application software is developed for the hand held mobile devices mainly for its functionality.
    Mobile Testing Training in Chennai | Mobile application training in Chennai

    ReplyDelete
  2. This is such a great information for me, because i do an online job thats why i need fast Internet connection, i search how to bost internet speed then ireach at a right place.

    Ice Age: Collision Course online, Warcraft online , Alice Through the Looking Glass online

    ReplyDelete