Convert desktop version of website to mobile site

Google has start a new application GOMO for convert your existing desktop web application version to mobile version.

Google has made collaboration with dudaMobile. It is very exiting application for Google.
The application is convert desktop version website in mobile website within few seconds.

• Application not only convert site in to mobile version user can also select the theme for the mobile application.
• User can edit/delete the content from the mobile application.
• User can customize contains for mobile site.
• Not only this Google is also providing free hosting for the site for a year.
• User can also take free help from support team for a year.

Those all facility provide to only attract most of the individual/ organization to once convert their site into mobile application but it also has some drawbacks.

• Your desktop site should be well designed before mobile conversion.
• The application will convert all site in to mobile version it include each and every link which may not require for the mobile site and it may create extra load for the mobile application.
• This application may not work on lower end mobile device or older smart phone.

so in conclusion I can say that this is best opportunity for individuals and organization who has their static site and want to develop mobile site, but for a well organize site or for dynamic site this is not a good choice.

Reference:
 GOMO

HTML5 Geolocation for Mobile

HTML 5 is develop not only to target desktop but also to target every device which can access internet like Mobile, Smart TV, Gaming console etc.

HTML 5 Geolocation  can be use with Mobile to develop various application, before this native application is the only way to develop Geolocation application of course developer can access the native features of Mobile device using Phonegap

With HTML5 it is possible to get as accurate geolocation information as device native application give. actually it is using different algorithms to get geolocation coordinate information. Developer can get accurate coordinate information of end user by using "enableHighAccuracy "  option.   

The navigator.geolocation object offers is quite small but offers the following (at the time of writing):

Methods:

1. void navigator.geolocation.getCurrentPosition(success_callback_function, error_callback_function, position_options)
2. long navigator.geolocation.watchPosition(success_callback_function, error_callback_function, position_options)
3. void navigator.geolocation.clearWatch(watch_position_id)

position_options is specified as a JSON-style string with up to three parameters:

• enableHighAccuracy – A boolean (true/false) which indicates to the device that you wish to obtain it’s most accurate readings (this parameter may or may not make a difference, depending on your hardware)
• maximumAge – The maximum age (in milliseconds) of the reading (this is appropriate as the device may cache readings to save power and/or bandwidth)
• timeout – The maximum time (in milliseconds) for which you are prepared to allow the device to try to obtain a Geo location

wpid=navigator.geolocation.watchPosition(geo_success, geo_error, {enableHighAccuracy:true, maximumAge:30000, timeout:27000});

The success_callback_function is passed a single parameter, a position object which has the following properties:

• coords.latitude – The current latitude reading
• coords.longitude – The current longitude reading
• coords.accuracy – The accuracy of the current latitude and longitude readings (in metres)
• coords.speed – The current speed reading in metres per second (you can simply multiply by 2.2369 to convert to miles per hour or multiply by 3.6 to convert to kilometres per hour)
• coords.altitude – The current altitude reading (in metres)
• coords.altitudeAccuracy – The accuracy of the current altitude reading (in metres)

here we take a look of simple example


Example of a "one-shot" position request.

    function showMap(position) {
      // Show a map centered at (position.coords.latitude, position.coords.longitude).
    }

    // One-shot position request.
    navigator.geolocation.getCurrentPosition(showMap);

you can use above example when developer want to use geolocation information once in a code


Example of requesting repeated position updates and handling errors.

    function scrollMap(position) {
      // Scrolls the map so that it is centered at (position.coords.latitude, position.coords.longitude).
    }

    function handleError(error) {
      // Update a div element with error.message.
    }

    // Request repeated updates.
    var watchId = navigator.geolocation.watchPosition(scrollMap, handleError);

    function buttonClickHandler() {
      // Cancel the updates when the user clicks a button.
      navigator.geolocation.clearWatch(watchId);
    }


Example of requesting a potentially cached position.

    // Request a position. We accept positions whose age is not
    // greater than 10 minutes. If the user agent does not have a
    // fresh enough cached position object, it will automatically
    // acquire a new one.
    navigator.geolocation.getCurrentPosition(successCallback,
                                             errorCallback,
                                             {maximumAge:600000});

    function successCallback(position) {
      // By using the 'maximumAge' option above, the position
      // object is guaranteed to be at most 10 minutes old.
    }

    function errorCallback(error) {
      // Update a div element with error.message.
    }


Difference between  getCurrentPosition() and watchPosition()

The getCurrentPosition() method takes one, two or three arguments. When called, it must immediately return and then asynchronously attempt to obtain the current location of the device

The watchPosition() is doing  same but, The watch operation then must continue to monitor the position of the device and invoke the appropriate callback every time this position changes

Reference :
http://dev.w3.org/geo/api/spec-source
http://www.thedotproduct.org/2010/04/example-of-navigator-geolocation-watchposition/

Configure Web Application for iPhone/iPad

To develop rich mobile application there are some guide lines provide by safari developer library. Developer can develop web application like a native application using this guide lines. here are the highlight of some guide line

1) Specify Lunch icon/ web clip:

Developer can specify the lunch icon for web application like native application it is default feature of safari. It is not necessary to specify the lunch icon, safari provide default lunch icon for the web application.

• To specify an icon for the entire website (every page on the website), place an icon file in PNG format in the root document folder called apple-touch-icon.png or apple-touch-icon-precomposed.png. If you use apple-touch-icon-precomposed.png as the filename, Safari on iOS won’t add any effects to the icon.
• To specify an icon for a single webpage or replace the website icon with a webpage-specific icon, add a link element to the webpage, as in:

  
  

  <link rel="apple-touch-icon" href="/custom_icon.png"/>
• In the above example, replace custom_icon.png with your icon filename. If you don’t want Safari on iOS to add any effects to the icon, replace apple-touch-icon with apple-touch-icon-precomposed.
• To specify multiple icons for different device resolutions—for example, support both iPhone and iPad devices—add a sizes attribute to each link element as follows:

<link rel="apple-touch-icon" href="touch-icon-iphone.png" />
<link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad.png" />
<link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone4.png" />

• The icon that is the most appropriate size for the device is used. If no sizes attribute is set, the element’s size defaults to 57 x 57.

If there is no icon that matches the recommended size for the device, the smallest icon larger than the recommended size is used. If there are no icons larger than the recommended size, the largest icon is used. If multiple icons are suitable, the icon that has the precomposed keyword is used.

If no icons are specified using a link element, the website root directory is searched for icons with the apple-touch-icon... or apple-touch-icon-precomposed... prefix. For example, if the appropriate icon size for the device is 57 x 57, the system searches for filenames in the following order:

1. apple-touch-icon-57x57-precomposed.png
2. apple-touch-icon-57x57.png
3. apple-touch-icon-precomposed.png
4. apple-touch-icon.png

2)Define star up screen for iPhone/iPad

On iOS, similar to native applications, you can specify a startup image that is displayed while your web application launches. This is especially useful when your web application is offline. By default, a screenshot of the web application the last time it was launched is used. To set another startup image, add a link element to the webpage, as in:

3)Hide status bar:

For hiding status bar for iOS device developer can use following meta tag:

 <meta name="apple-mobile-web-app-status-bar-style" content="black" />

Reference:

http://developer.apple.com/library/safari/#documentation/appleapplications/reference/safariwebcontent/configuringwebapplications/configuringwebapplications.html 

CSS 3 Media Queries

If you have ever created a print stylesheet for a website then you will be familiar with the idea of creating a specific stylesheet to come into play under certain conditions – in the case of a print stylesheet when the page is printed. This functionality was enabled in CSS2 by media types. Media Types let you specify a type of media to target, so you could target print, handheld and so on. Unfortunately these media types never gained a lot of support by devices and, other than the print media type, you will rarely see them in use.

The Media Queries in CSS3 take this idea and extend it. Rather than looking for a type of device they look at the capability of the device, and you can use them to check for all kinds of things. For example:

• width and height (of the browser window)
• device width and height
• orientation – for example is a phone in landscape or portrait mode?
• resolution

If the user has a browser that supports media queries then we can write CSS specifically for certain situations. For example, detecting that the user has a small device like a smart phone of some description and giving them a specific layout.

The first way to use media queries is to have the alternate section of CSS right inside your single stylesheet. So to target small devices we can use the following syntax:

@media only screen and (max-device-width: 480px) {

}

above style only apply to devices which width is less than 480 px

We can then add our alternate CSS for small screen and width devices inside the curly braces. By using the cascade we can simply overwrite any styles rules we set for desktop browsers earlier in our CSS. As long as this section comes last in your CSS it will overwrite the previous rules. So, to linearize our layout and use a smaller header graphic I can add the following:

@media only screen and (max-device-width: 480px) {
 div#wrapper {
  width: 400px;
 }

 div#header {
  background-image: url(media-queries-phone.jpg);
  height: 93px;
  position: relative;
 }

 div#header h1 {
  font-size: 140%;
 }

 #content {
  float: none;
  width: 100%;
 }

 #navigation {
  float:none;
  width: auto;
 }
}

Linking a separate stylesheet using media queries

Adding the specific code for devices inline might be a good way to use media queries if you only need to make a few changes, however if your stylesheet contains a lot of overwriting or you want to completely separate the styles shown to desktop browsers and those used for small screen devices, then linking in a different stylesheet will enable you to keep the CSS separate.

To add a separate stylesheet after your main stylesheet and use the cascade to overwrite the rules, use the following.

<link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" href="small-device.css" />

some more examples for mobile device and orientation

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

References

1) http://mobile.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/

2)http://mobile.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/

3)http://www.javascriptkit.com/dhtmltutors/cssmediaqueries.shtml

Mobile web testing

             When we are developing any web application we can test that application on browsers. In the same way we can test the mobile web application on mobile browser. but some time it is not possible to setup mobile testing environment Immediately as it is expensive in term of time and money.
 
             To set up testing environment we need the different mobile devices which is target for the same application and we also need to setup Wi-Fi  enlivenment to access the application through mobile devices

             But for a quick test specially  for unit testing one can use simulators. some of simulator are the same simulators which are use for native application development and some simulators are special design to test web application

1)Apple device(iPhone/iPad/IPod):
             For iPhone Mac Os hasp provide iPhone and iPad simulators, for windows device one can use ibbDemo2(ibbdemo2 link1 ,ibbddemo link2) or from web one can access this simulator
           
              one of the other way use the safari browser as a simulator as Apple default browser is safari to do this install the safari browser go to preferences an check the show developer menu option, now you can see the developer menu , from developer menu select user agent and you can change user agent from safari desktop to iPhone/iPod/iPad this is one the best way as we can debug the JS, CSS  and HTML

2)Android devices
         To test the web application on android device developer has to download and install the Android SDK you can download it from this: link .

         The other alternate is the safari browser by setting the custom user agent, you can search and add add the Android user agent in safari browser as both are web-kit browser

          But some of  HTML5 and CSS3 features developer has to install Targeted OS's simulator

3)Window Mobile
         For windows Mobile developer can download and install windows mobile SDK from this: link

4)BlackBerry
        To test web application on BB device developer can download simulator from this: link

5)Opera Mobile/Mini
       Some smart phone user also install the opera browser for the mobile developer can download the opera mobile simulator from this: link and opera min simulator from this:link

Off-course simulators/emulators is provide 100% result ,but  it can use as alternate.I recommend to test application on actual mobile device before any build
       


   

MVC makes Mobile web Manageable

When we start development for mobile application our basic question is what is the platform or what architecture developer can use to develop mobile web application

  Mobile web application can develop with any platform (languages like Java, PHP , .net etc) but the architecture should be MVC

The main advantage of MVC is TDD we can easily test over code. but for mobile web application we have another advantage as bellow:

This is only require when developer want to target more than one device and want to provide native look and feel ex. for iPhone navigation should be at bottom and fix where in BB it should be at the top of page

With the MVC developer can commonly used the Model and Controller code only they need to develop different view for each targeted device using this way we can develop rich mobile application

ASP.net has also develop MVC architecture which a good choice to develop mobile application and Microsoft  has also provide mobile web development with MVC2 and MVC4

As I discussed previous here developer can design common model and controller and develop the different view for targeted device

Now next question is how to redirect end user to related view  (EX. if  end user access the web application via iPhone/iPod then he/she will be redirect to iPhone specific view which look like iPhone native app, and if end user access it via android then he/she will be redirected to Android view)

Even developer can develop one view to target desktop browser and other to target mobile device this view is known as generic mobile view

for that developer can use Mobile capable view engine which available on internet(Free). MVC is the open source architecture  from Microsoft so developer can also develop their own engine .

With MVC developer has to define related view under same folder (ex. iOS related views are stored under folder name iPhone and android related view are stored under folder name android )

Any request from and user is redirected to the view engine it will check the header information sp. user-agent information of the request and render the particular view accordingly

With MVC 4 the view storing convince in MVC 4 developer add the view in same folder but define the view like index.iPhone. extinction or index.Android. extinction as Microsoft has provide view engine in such a way

That is why MVC is the best option for mobile web development when we are targeting multiple device with different view(presentation).

pros:
1) MVC web application is easily manageable/easy maintenance .
2) MVC allow Test Driven Development
3) MVC projects are easily scale developer can easily add targeted view for without make any change in controller or model

cons:
1)Developer has to learn MVC  architecture
2) For small project TDD can increase the development time.
 

  

HTML 5 and Mobile Device :Myview

HTML5 is one of the hottest topic today for the discussion as a mobile web developer I want to share my view on HTML 5

On 14 February 2011, the W3C extended the charter of its HTML Working Group with clear milestones for HTML5. In May 2011, the working group advanced HTML5 to "Last Call", an invitation to communities inside and outside W3C to confirm the technical soundness of the specification. The W3C is developing a comprehensive test suite to achieve broad interoperability for the full specification by 2014, which is now the target date for Recommendation

HTML5 is the standard which defined by W3C and other open source working group.

For the development of those standard they have use broad view and consider all the browser from different device like mobile, Gaming console, Smart Tv and introduce many features for all type of devices that having browser and some them are not much useful for desktop/laptop browser

Tag are design so carefully that browser can render animation, video, audio without any plugin. 

As we all know only android native browser support the flash plugin, all other smart phone's native browser dose not have capability of use flash plugin to play video or animated flash file on browser

but with help of HTML 5 this will be possible to give support of animation and  video without flash player

let's take overview of some of HTML5 features

1)Canvas:

with the help of canvas tag and JavaScript developer can draw images, but not only images canvas can also use to develop animation.

2)Video

With the help of Video tag developer can add video in webpage

3)Audio

With the help of Audio tag developer can add audio element in web page

4) Geo-location:

HTML 5 has develop Geo-loaction algorithm using which developer can use end user's  Geoloaction position information.

6)Application cache:

Using application cache developer can develop web application that can work in offline mode (without internet connection) once it downloaded on user machine user can access the application in offline

7)Storage :

HTML5 also allow developer to store values on client end, I am not talking about cookie. HTML 5 has provide

Session Storage: data remain on client machine for a session only

Local storage: data remain on client machine forever same as cookie key value pair

Web SQL db: developer can store large amount of data in table format just like database ,but those data are stored on client end

8) Worker:

Like ajax some of JavaScript code execute in other thread and it will note affect the performance of the main page loading thread,this can be use with heavy JavaScript function which take more time to execute. but developer can not access document, Window ,etc object in worker it is message base communication between main thread and worker thread

9) Web Socket ,Server Push:

It is bi-directional/ uni-directional communication of browser and server, can be use to develop application like facebook which can give updates on browser in regular interval

10)new input type:

There are many input types are introduce for mobile device they are not much useful for desktop machine like number,date, date time, URL, email add., search etc.

12)Validation 

Client side validation without any JavaScript i.e. require and reg.expression validation

13)Microdata:

add SEO related information in tag

14)new Tags

like input type many new tag are introduce with HTML5 ex. output, section tags etc

This list dose not stop here it s going on and on .....

With this HTML 5 has make web powerful  , but currently no browser is supporting all the features of HTML 5 as it is under draft face but I am sure by the end of 2014 browser developer try to support most of the features of HTML 5.

HTML 5 will make developer life easy. 

Without HTML 5 all those is possible but developer has to suffer lot to archive all those functionality across the browser. 

Reference :

http://www.w3.org  

Mobile web beginner

Mobile web development is as simple as web development for desktop but programmer should consider the basic thing i.e. device size and design pages accordingly more ever developer has to follow some guide lines

1) Add meta tag for view port

A typical mobile-optimized site contains something like the following:



The width property controls the size of the viewport. It can be set to a specific number of pixels like width=600 or to the special value device-width value which is the width of the screen in CSS pixels at a scale of 100%. (There are corresponding height and device-height values, which may be useful for pages with elements that change size or position based on the viewport height.)

The initial-scale property controls the zoom level when the page is first loaded. The maximum-scale, minimum-scale, and user-scalable properties control how users are allowed to zoom the page in or out.

This will fix the page render problems on mobile devices
ex:-

first image is with meta tag viewport and second is without meta tag