JQuery Mobile (jQuery Mobile 1.0 Beta 3 Released!)


Hello Mobile Web Developers,

After reading lots of article, posts and trying out few samples in JQuery Mobile, I found it would be a great technology and idea to share with.

JQuery Mobile is a new generation scripting language framework specifically built for Smart Phone devices. This framework aims at building dynamic touch based User Interface, which can very much compete with the Smart Phone Apps.

JQuery Mobile framework has considered the below points to deal with

  • Seriously cross-platform & cross-device
  • Touch-optimized layouts & UI widgets
  • Theamable designs: Bigger and better

You must be worried about the device support….No worries !! Just CLICK HERE and see the list of device support this Framework.

Here I would like to share few cool posts/articles about JQuery fundamentals and design guides…Let go through the below links and try out some cool stuffs on your own..

1) http://jquerymobile.com/

A unified user interface system across all popular mobile device platforms, built on the rock-solid jQuery and jQuery UI foundation. Its lightweight code is built with progressive enhancement, and has a flexible, easily themeable design

2) http://www.ibm.com/developerworks/web/library/wa-jqmobile/index.html

jQuery Mobile is a touch-friendly web UI development framework that lets you develop mobile web applications that work across smartphones and tablets.  The jQuery Mobile framework builds on top of jQuery core and provides a number of facilities, including HTML and XML document object model (DOM) traversing and manipulation, handling events, performing server communication using Ajax, as well as animation and image effects for web pages. The mobile framework itself is a separate, additional download of around 12KB (minified and gzipped) from jQuery core, which is around 25KB when minified/gzipped. As with the rest of the jQuery framework, jQuery Mobile is a free, dual-licensed (MIT and GPL) library.

Cheers!!!!!!!!!

Swagat

How do you recognize Mobile Browser??


Hello Developers,

You all might have noticed when you browse any popular sites from any mobile device, your browser gives you a mobile compatible version of the same sites not the site you see on the desktop or laptop..Right!!!!

HOW DO THEY DO THAT…

Answer is very simple…They recognize the “User Agent” and do the tweaking.

User Agent holds the description about the browser, operting system, browser version, OS version etc. We can easily get this from the request header.

For example:

Mozilla/5.0 (Linux; U; Android 2.2.1; de-de; X2 Build/FRG83) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1

This example shows the request has come from an Android device. Similarly there are different USER AGENTS for different devices. You can easily get this by using Javascript or Code Behind.

Javascript:  Using Navigator object. As

navigator.userAgent

ASP.NET CODE BEHIND: Using Request object

Request.ServerVariables[“http_user_agent”];

Now you can write a static helper method to recognize the requested device as below

public static bool IsMobileDevice(string userAgent)   {

userAgent = userAgent.ToLower();

return userAgent.Contains(“iphone”) |

userAgent.Contains(“android”) |

userAgent.Contains(“blackberry”) |

userAgent.Contains(“palm”);

}

Similarly you can have a Dictionary or List of devices and get the peroper device through these objects.

Thanks for reading this article.

With Personal Regards

Swagat

How to recognize javaScript is enabled or not in browser?


Hello Developers,

As we all know Javascript is the most popular scripting language for all Web developers. But always there is a question from other end(customers). Question is something like this

If browser does not support JavaScript then what will happen to the JS logic?

Simple answer to this……..the JS logic will never work..:P

But we can think of some alternative like, why not ask the end user to enable the Javascript for your web application. Sounds crazy right!!!

But we have to go in this way. how do you do that?

This solution is simple…just include a HTML tag with few message then you are done. You can see below for example

<noscript> javascript is not enabled on your browser!!!!!!!! </noscript>

This <noscript> tag will do the work for you. As soon as user browses your site with Javascript disabled, this tag will execute and show the particular message. Otherwise this tag will never execute.

You can also try some samples and test in multiple browsers. this should work for you.

Thanks for reading this article.

With Personal Regards

Swagat