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

The Magic of ASP.Net MVC Model Binding

          For the ASP.net developer MVC not less then a magic. In asp.net developer develop the page and hit the page and request for the page for that page and server send response for that page (I am not going in to detail for ASP.net handler as we are talking about MVC magic).
     
       It look like a magic because of the
1)The way we are accessing the MVC page (View)
2)The way data pass to the controller

         most of Developer aware with all the asp.net page life cycle. Let 's take look of MVC life Cycle

There are two MVC component perform the magic

1)MVCRouteHandler

2)MVCModelBinder

1)MVCRouteHandler

       The ASP.NET Routing module is responsible for mapping incoming browser requests to particular MVC controller actions. By the end of this tutorial, you will understand how the standard route table maps requests to controller actions.

      The default route handler is already define in Globle.aspx as bellow

  public class MvcApplication : System.Web.HttpApplication

  {

        public static void RegisterRoutes(RouteCollection routes)

        {

            routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

            routes.MapRoute(

                "Default",                                              // Route name

                "{controller}/{action}/{id}",                           // URL with parameters

                new { controller = "Home", action = "Index", id = "" }  // Parameter defaults

            );

        }

        protected void Application_Start()

        {

            RegisterRoutes(RouteTable.Routes);

        }

    }

     When an MVC application first starts, the Application_Start() method is called. This method, in turn, calls the RegisterRoutes() method. The RegisterRoutes() method creates the route table.

      The default route table contains a single route (named Default). The Default route maps the first segment of a URL to a controller name, the second segment of a URL to a controller action, and the third segment to a parameter named id.

Imagine that you enter the following URL into your web browser's address bar:

/Home/Index/3

The Default route maps this URL to the following parameters:

controller = Home

action = Index

id = 3

When you request the URL /Home/Index/3, the following code is executed:

HomeController.Index(3)

     The Default route includes defaults for all three parameters. If you don't supply a controller, then the controller parameter defaults to the value Home. If you don't supply an action, the action parameter defaults to the value Index. Finally, if you don't supply an id, the id parameter defaults to an empty string.

      Let's look at a few examples of how the Default route maps URLs to controller actions. Imagine that you enter the following URL into your browser address bar:

/Home

    Because of the Default route parameter defaults, entering this URL will cause the Index() method of the HomeController class in Listing 2 to be called.

   In this way MVC identify which controller action to be invoke and which view to be rander

2)MVCModelBinder

         The model binder takes a set of value providers, model metadata providers and validator providers and creates the objects in the parameters of your action methods, performs validation, and the resulting objects are passed in as parameters when the action method on the controller is invoked. That is how a form post can become a fully hydrated and validated object before you do anything explicitly in your controller. If you did not know it did all of that, well, pay attention because there is some interesting stuff ahead.   

    

    Will start with an example action method on a controller.

[AcceptVerbs(HttpVerbs.Post)]

public ActionResult AFormPost(string aSimpleType,

ACoolModel aComplexType)

{

//Do whatever...

}

      Let us say that this action method would be found on your site at http://foo.com/home/aformpost and you are posting to that url. The class in the framework that is responsible for calling the method above is called the ControllerActionInvoker (which you do not need to be too concerned about remembering as you do not use it directly). When the route is parsed by the runtime, that is the class that is responsible for calling an appropriate method on a controller. The ControllerActionInvoker sees that the action method has two parameters that it has to supply. To do that it uses the DefaultModelBinder to attempt to interpret the values available and force them into one of the two parameters specified. And where does it get its values? What are the available sources? Well, it looks in this order:

The form values.

The route data.

The query string.

The http file collection.

     These are called the "value providers". If it finds a value in the first provider, it will pull it from the first. If not, the second, and so on. It will look by name, so if you had a parameter named "foo" and a text input field also named "foo", it would match based on that. And it is not case sensitive.

      In the case of the first parameter in the example above, it will see that it is a simple model (like string, int, et al., as opposed to a complex model, which would be one defined by a separate class such as ACoolModel above) and will convert it to that type and assign it to the parameter.

    In the case of the second parameter, it will see that it is not a simple model and will instantiate an instance, figure out the properties, and for each one look in the value providers to find a value to assign to the property.

    In either case, if the assignment fails because of type conversion errors or the like, an error is added to the ModelState (the thing responsible for keeping track of the validation state of the model). The DefaultModelBinder will then look for any validators on the property and check those. If validation fails, an error will be added to the ModelState. More on validation and model state in the next tutorial.

    So that is the basics of the model binder. By creating your own model binder you can take complete control of the process. However, I have found that the default model binder works almost all of the time, but we will discuss how to create your own model binders at a later time.

     In summary, the model binder takes a set of value providers and creates the objects in theparameters of your action methods, performs validation, and the resulting objects are passed in as parameters when the action method on the controller is invoked. That is how a form post can become a fully hydrated and validated object before you do anything explicitly in your controller.

reference:

http://www.howmvcworks.net/OnModelsAndViewModels/TheBeautyThatIsTheModelBinder

http://www.patelsanjay.net/

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  

The rise of server side JavaScript

When first time I think about this it seems almost impossible, because as per my understanding JavaScript is client side scripting and it is execute by the browser. But the power of JavaScript has made it possible to have the server side JavaScript. This is very old concept it was first time introduce by Netscape Enterprise Server in late 1994 but Node.js has given more popularity to this concept. Moreover for Microsoft Azure has also adopted Node.js as development averment for cloud application.

Node.js is the server side JavaScript. 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. We can configure node JS to listen event on request on particular port and provide response to the request without any sever !

Node.js is currently using V8 JavaScript engine which was develop by Google. The same engine is used in Google chrome to parse the JavaScript.

Node.Js is the only one example we can find more server side JavaScript example on:
List of Server Side JS

Reference:
http://en.wikipedia.org
http://nodejs.org/