Hybrid Mobile Apps

I came across a question – “Questions on Hybrid Apps”  in one of the Forums, and i thought it’s worth writing a blog post, so that it will help others (at least for my blog post visitors 😉 ) May be many of us have doubts about Hybrid Mobile Apps. Let me provide my thoughts –

Hybrid, the word itself states that, it’s mixture of multiple things. Now, Hybrid Mobile Apps – it’s mixture of multiple technologies.

1. How it is different from Regular / Native Mobile Apps?

Let me tell you the basic difference of Native Apps and Hybrid Apps –

Native Apps – Developed using Platform specific SDK (Software Development Kit). Native Mobile Apps built on platform SDK’s. For example, if you wish to develop an iOS App, then you may have to download the Apple iOS SDK and start building app. Now, you thought of powering Android users with your app, then you may have to download Android SDK and start building the app from scratch.

Hybrid Apps –  You can leverage your web skills to develop an Mobile App.

HTML 5 + CSS 3 + JavaScript + (APACHE CORDOVA / IONIC FRAMEWORK / TRIGGER.IO etc., )

We can achieve PORTABILITY – write once and deploy on multiple platforms.

2. How to access the device features like Contacts, Camera, GPS etc.,?

You can definitely access to all the device features through  – APACHE CORDOVA / IONIC FRAMEWORKTRIGGER.IOThese plugins will help us in accessing OS features through their API’s. Same is well documented in their respective sites.

3. Can i deploy the Apps to Stores for different platforms?

Yeah. You can deploy your app to multiple platforms App Stores. Consumers can download you app just like the Native Apps.

4. How do you control the layout of an Hybrid app considering it’s one app which will be run on many different devices with many different layouts?

Responsive Web Design. Using CSS 3 media queries you can achieve responsive web design. It allows to design layouts for different resolutions of the devices.

5. Which development framework is better Apache Cordova or Ionic Framework or  Trigger.io or any other?

Hard to answer. Most of the Hybrid Apps are developed on Apache Cordova. It’s Open Source. Even Ionic Framework internally uses Apache Cordova. Trigger.io is licensed and you may have to pay for it.

Each of the framework will have their own Pros and Cons. It’s better to do through analysis on choosing the right one for you!

Happy Mobile App programming!!!

Firefox browser tool to test Responsive Web design

Modern web browsers are more developer friendly, by providing Developer Tools to make web development easy. Thanks to Mozilla for integrating a feature, which allows to test the Responsive Web design with out using various physical devices.

How to use Responsive Web Design feature in Firefox?

  1. Launch Mozilla Firefox(Latest Version).
  2. Browse the website which you wish to test. For example – i will take – http://tickletheweb.com website, which is developed to have consistent view across the devices.

image

3.   Click on Firefox button on the left top corner of the browser, and select Web Developer –> Responsive Design View.

image

4.  It loads the Responsive Design View chrome –

image

5.  Select different resolutions from the dropdown control on the left corner of the chrome to test the website in different resolutions, which is simple and great.

image

6.  It also allows to test  Portrait or Landscape orientations. Click on rotate button, which toggles between the orientations.

image

Happy Web programming!!!

Limit File Upload size in ASP.NET Web applications

One of the problems in file upload is to check the file size before uploading to the server. It’s been a big problem for web developers to restrict the file upload, if it exceeds the given file size .

Now, we can restrict it before uploading to the server using simple JavaScript snippet. Thanks to latest browsers – Microsoft IE 10+, Chrome 21+, Firefox 15+ for making this happen.

Here is the code to do that –

Code Snippet
  1. <form id="form1" runat="server" enctype="multipart/form-data">
  2.     <div>
  3.         <asp:FileUpload runat="server" ID="fileUpload" />
  4.         <asp:Button runat="server" Text="Submit" OnClientClick="return Validate();" OnClick="FileUpload" />
  5.         <div id="Message"></div>
  6.     </div>
  7.     </form>
  8.     <script type="text/javascript" >
  9.         function Validate() {
  10.             var msg = "";
  11.             var bIsValid = true;
  12.             var uploadedFile = document.getElementById("<%=fileUpload.ClientID %>");
  13.  
  14.             if (uploadedFile.files[0].size > 512000) // greater than 512KB
  15.             {
  16.                 msg += "File Size is limited to 512 KB!";
  17.                 bIsValid = false;
  18.             }
  19.  
  20.             var ext = uploadedFile.value.substr(uploadedFile.value.indexOf(".") + 1, uploadedFile.value.length);
  21.             if (ext != "jpg" || ext != "png") {
  22.                 msg += "You can upload only .jpg or .png images!";
  23.                 bIsValid = false;
  24.             }
  25.             if (!bIsValid) {
  26.                 document.getElementById("Message").innerHTML = msg;
  27.                 return false;
  28.             }
  29.             //On Success
  30.             return true;
  31.         }
  32.     </script>

The above code may fail in browsers which doesn’t support HTML 5 features, so it’s better to validate at server end as well for additional security!

Code Snippet
  1. protected  void FileUpload(object sender, EventArgs e)
  2.       {
  3.           if (fileUpload.PostedFile.ContentLength > 512000)
  4.           {
  5.               return;
  6.           }
  7.       }

 

NOTE: The above JavaScript snippet can be used across the technologies including JSP, PHP etc.,

Happy Web Programming!!!

Tools and Tips for HTML 5 Videos

With introduction of HTML 5, embedding an video on a web page has become peace of cake! It has overcome the barrier of installing plug-ins(Adobe Flash, Silverlight etc.,).

When i start playing around with HTML 5 Videos, i encountered some problems and i wish to discuss the same, so that it will be helpful for people, who has similar issues.

Before diving in to the content, let me remind the browser compatibility of HTML 5. HTML 5 is supported in following browsers –

  • Microsoft IE 9 +
  • Mozilla Firefox 5 +
  • Google Chrome 10 +
  • Apple Safari 5 +
  • Opera 10 +

So, that means, HTML 5 video is supported only in the above mentioned browser list. For incompatible browser, you may have to use or <object> tags by using Fall back method. You can use Modernizer, to check whether the browser supports HTML 5 Video and provide an fall back method if doesn’t support!

Now, let looks in to the tools. Basically HTML 5 Video supports the following formats –

  • MP4 with H264 video codec and AAC audio codec
  • WebM with VP8 video codec and Vorbis audio codec
  • Ogg with Theora video codec and Vorbis audio codec

All web browsers doesn’t support all the video formats. It totally depends on the web browser.

Browser MP4 WebM Ogg
IE 9 + YES NO NO
Firefox 5 + NO YES YES
Chrome 10 + YES YES YES
Safari 5 + YES NO NO
Opera 10 + NO YES YES

Looks like Apple and Microsoft are great friends Smile because they support similar video format!!!

Now, the challenge is how to encode these videos to the required formats. If you wish to supports for all the browser, you may have to encode your video in all the three formats. After search on the web using Google and Bing, i found these below two software’s, which are pretty good in converting the videos to HTML 5 video support format!

  1. Any Video Converter
  2. Miro Video Converter

Both of the software do a good job in converting the videos in to the required format and it’s simple too!  

We are done converting the videos and we programmed it, and opened the web page…. BOOM… Oops, Video is not playing. It’s says, Video playback aborted due to a network error.

It’s because, MIME type is not set in the Web Server. I will consider, IIS 7 as my web server, and we will see, how to add the required MIME types!

  1. Launch IIS.
  2. Select the website. In the middle pane, under IIS section, select MIME Types icon.

image

3.   Now click on Add… option in the right pane. It will invoke Add MIME Type dialog box.

image

4.    Now add the following file types one by one in the respective edit boxes!

File name extension MIME type
.mp4 video/mp4
.webm video/webm
.ogg video/ogg

5.   Once, you are done adding the file types, close the IIS.

Now try again with the web page, which has video, surprise it’s working now. Yeah! it will work, because, we set the file type information.

NOTE: You can do the same for older IIS versions. For other web servers like Apache, we may have to do similar settings but in different way!

I think it’s time to kick the plug – ins and start using HTML 5 Video!

Happy Web Programming!!!

Thanks!

localStorage–Avoid Cookies!

With introduction of HTML 5 localStorage,  storing of small chunks of information in Cookies got eliminated! HTML 5 LocalStorage is an awesome feature which makes the storing and retrieving the data pretty easy.

Let us look at a simple example to demonstrate the HTML 5 LocalStorage feature!

The below example shows how to store “UserName” in to LocalStorage and retrieve it back!

<!DOCTYPE html>
<html>
<head>
    <title>HTML 5 World!!!</title>
</head>
<body>
    <header>HTML 5 Local Storage Demo!</header>
        <input type="text" id="txtUserName" />
        <input type="button" value="Save" onclick="SaveToOfflineStorage();" />
        <label id="msg" ></label>
    <footer>Copyright &copy;2011</footer>

    <script type="text/javascript">

        if (localStorage) {

            var UserName = localStorage.getItem("UserName");
            document.getElementById('txtUserName').value = UserName;
        }

        function SaveToOfflineStorage() {
            try {
                //If localStorage supports with the browser
                if (localStorage) {
                    var txtValue = document.getElementById('txtUserName').value;
                    localStorage.setItem("UserName", txtValue);
                    document.getElementById('msg').innerHTML = "Saved Successfully!";
                }
            }
            catch (err) {
                document.getElementById('msg').innerHTML = err.Description;
            }
        }
    </script>
</body>
</html>

NOTE: The above example works on HTML 5 Compatible browsers – Microsoft IE9 & above, Mozilla Firefox 3.5 & above, Google Chrome etc.,

You can also take advantage of sessionStorage,  which stores data temporarily for particular browser session! It works similar like Session in ASP.NET, JSP etc.,

Happy HTML5 Web Programming!!!

Finding the location using Bing Maps on Windows Phone 7.1[Code name Mango] using ASP.NET

First of all thanks to Microsoft for providing Microsoft IE 9 browser to Windows Phone 7.1(Mango Update). With the introduction of HTML 5 and CSS 3 in Microsoft IE9, web development is easier for Windows Phone devices.
In this article, let us see how to show Bing Maps on Windows Phone 7.1 device and pinning the current location on the go.

First of all, create a Bing Maps Account, which is free of cost from the link – http://www.bingmapsportal.com/. Once you are done with creating account, log into Maps Account center and create a key by providing the “Application Name” and “Application Type”. Now copy the Key/URL and save it in notepad.

Now launch Visual Studio 2010 and create a new Web application.  Change the doctype to HTML 5 doctype, as shown below.

<!DOCTYPE html>

 

Add the following code in the <head> section.

<meta name="viewport" content="width=device-width" />
    <script type="text/javascript"
            src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0">
    </script>

 

 Now copy the following code in the <body> section.

<form id="form1" runat="server">
         <div id="mapDiv" style="width:500px;height:500px;position:relative;" >

        </div>

        <script type="text/javascript">
            //Fetch the current location using HTML 5 Geolocation
            navigator.geolocation.getCurrentPosition(showPosition, FetchingLocation_Error);

	//On Successfully fetch of location, show it on Bing Map
            function showPosition(position) {

                var mapOptions = { credentials: "Your Key/URL",
                                    mapTypeId: Microsoft.Maps.MapTypeId.aerial };

                //Display the Bing Maps in the div - mapDiv
                var map = new Microsoft.Maps.Map(document.getElementById("mapDiv"), mapOptions);

                //Fetch the location using the Latitude and Longitude
                var loc = new Microsoft.Maps.Location(position.coords.latitude, position.coords.longitude);

                //Add a pin to the center of the map
                var pin = new Microsoft.Maps.Pushpin(loc);
                map.entities.push(pin);

                //Center the map on the location
                map.setView({center:loc, zoom:10});

            }
			//If fetching of location failed, the display error message
            function FetchingLocation_Error()
            {
                alert("Failed to fetch the location!");
            }

        </script>

    </form>

 

Now replace the text “Your Key/URL” with the key, which you have saved already. Once you are done with it, you are done with the coding stuff. Now testing it on Windows Phone 7.1 emulator.

NOTE: The above sample won’t work in Windows Phone 7. It work’s only with Windows Phone Mango Update, for which developer tools are available from the Microsoft’s website.

                  Maps on WP7.1

For more information on Bing Maps, check the following link http://www.microsoft.com/maps/developers/web.aspx

Important Notes:

  • The above sample works absolutely fine in Desktop browsers too (Microsoft IE9, Mozilla Firefox 4, Google Chrome 12).
  • It also works in Mobile devices which support HTML 5 including Apple iPhone.

Happy Web programming for WP7.1!!!