Web Tools from Microsoft – modern.IE

I was amazed with the amazing tools provided by Microsoft for Web developers and they hosted a website specially for these tools – modern.IE

So, I’m planning to brief about the Tools in modern.IE site in this post. Let’s see what’s in?

Website Tile – I love this feature! It allows to create Windows Tile in few seconds. Allows the user the user to pin the website to their Windows 8 start screen.

Virtual Machines – It provides virtual machines for different platforms – PC, Mac and Linux. Allows to test your website on different versions of Internet Explorer from your Mac or Linux.

Site Scan – This is a service which allows you to scan your website for coding problems. It helps developers to improve the performance of the site by fixing the pitfalls. It’s Open Source!

Compatibility Scan – It allows to scan your website for your code which is no longer supported and you can update it! This is very useful for outdated browser support especially for < IE 9+ versions.

Browser ScreenShots – It takes the screenshots of your web site in different browser on various platforms includes Mobile Safari and Android.

Developer Channel – Like Firefox and Chrome, IE started pushing nightly build with upcoming features enabled on it! It allows the developers to test the upcoming features in IE to take advantage of latest features!

It has much more in it including Community Support, MSDN resources etc., It’s all yours to explore the hidden information!

Happy Website – IE programming!!!

Web Tools – makes WEB more beautiful.

I strongly believe we need great tools to build great Web Apps. I will walk you through few tools which i use in my development. It may be helpful for you too 🙂

 

Brackets   An awesome IDE.

Brackets from Adobe is an open source project which is an awesome tool for Web developers. It’s available across the platform include – Mac, PC and Linux. I strongly recommend to try this IDE, if you didn’t try it!

It has plug-in support which includes JS Hint, CSS Hint etc., which makes this tool more awesome.

extractcss.com – An awesome CSS tool.

It’s an Online tool to extract the inline styles to make clean HTML.

jsbeautifier.org – An awesome JavaScript & HTML beautifying tool.

It’s an Online tool to make the JavaScript and HTML readable. Also it makes the code adheres to JS Lint (Indentation only)!

Online JSON Viewer – An awesome Online JSON Viewer tool.

It’s an online tool to view and edit JSON data. Also, we can load data from external URL.

JS Hint – An awesome JS code quality tool.

It’s an online tool to make the JS lint free. Also available as plugin for Visual Studio, Brackets IDE etc.,

JS Bin –  An awesome WEB tool.

It’s an online tool to create Web snippets includes HTML, CSS, JavaScript. Allows exporting to GIT as gist. Many more features to explore!

Watch this space for more web tools!

Mobile Web Applications with ASP.NET WebForms

I have seen many people asking questions in forums about Mobile web application development using ASP.NET WebForms. So i planned to write a blog post on the same.

ASP.NET is a powerful web application development platform, allows to leverage most of the features in Mobile web application development. Now a days, mobile devices are capable of rendering HTML 5 content. Websites which works in desktop browser is rendering great in mobile browsers too. Mobile web browsing is rapidly increased and every one looking for ON THE GO solution!

Now, the question is, Can we convert the existing web application to Mobile web application?

Answer is YES. You can can do that. Just by adding the Viewport meta tag to the Head section of the webpage and you are done!

Viewport Meta tag
  1. <meta name="viewport" content="width=device-width" />

 

To know more about the Viewport meta tag, check this link – Viewport. This viewport meta tag works absolutely fine in all major mobile device browsers including –

  • Apple iPhone – Mobile Safari
  • Android(GingerBread, ICS, Jelly Bean) – Native browser, Google Chrome, Opera
  • WindowsPhone – IE9 and IE 10
  • BlackBerry – Native Browser

Sample Code

Code Snippet
  1. <%@ Page    Language="C#"
  2.             AutoEventWireup="true"
  3.             CodeBehind="Index.aspx.cs"
  4.             Inherits="MobileApp_WebForms.Index" %>
  5.  
  6. <!DOCTYPE html>
  7.  
  8. <html>
  9. <head runat="server">
  10.     <title>Mobile WebForms</title>
  11.     <meta charset="urf-8" />
  12.     <meta name="viewport" content="width=device-width" />
  13.     <style type="text/css">
  14.         body
  15.         {
  16.             font-family:Verdana;
  17.         }
  18.         label
  19.         {
  20.             width:100px;
  21.             float:left;
  22.             display:block;
  23.         }
  24.         input[type=text]
  25.         {
  26.             width:200px;
  27.         }
  28.         .content
  29.         {
  30.             width:350px;
  31.             margin:0px auto;
  32.         }
  33.         header
  34.         {
  35.             width:350px;
  36.             text-align:center;
  37.             font-size:15px;
  38.             font-weight:bold;
  39.         }
  40.         .button
  41.         {
  42.             width:350px;
  43.             text-align:center;
  44.         }
  45.     </style>   
  46. </head>
  47. <body>
  48.     <form id="form1" runat="server">
  49.     <div class="content">
  50.         <header>
  51.             Contact Us
  52.         </header>
  53.         <div>
  54.             <label>Name</label>
  55.             <asp:TextBox runat="server" ID="txtbox" />
  56.         </div>
  57.         <div>
  58.             <label>Email</label>
  59.             <asp:TextBox runat="server" ID="txtEmail" />
  60.         </div>
  61.         <div>
  62.             <label>Phone</label>
  63.             <asp:TextBox runat="server" ID="txtPhone" />
  64.         </div>
  65.         <div class="button">
  66.             <asp:Button Text="Send" runat="server"  />
  67.         </div>
  68.     </div>
  69.     </form>
  70. </body>
  71. </html>

Try the above code in a mobile browser and you will find the difference!

Next question is, How do we create a separate version of Mobile web application?

We can create stunning mobile specific web application using ASP.NET WebForms and when you access the web application from desktop browser it renders the general desktop web app and when you access it from Mobile browser it renders the mobile web app.

How we need to redirect the user to the respective web app, when user access from different devices? 

I explained the same in one of my earlier blog post – Detect the device and redirect in ASP.NET. That’s one way of doing it. We have few more ways to do the same.

  • JavaScript – By sniffing the UserAgent string and redirect to the appropriate web app – DetectMobileBrowsers
  • CSS 3 Media Queries – Take advantage of CSS 3 media queries and you can redirect the users based on the requested device – MediaQueries. I feel it’s more elegant way.

It’s up to you to choose the right method, based on the devices you are going to support! 

I also suggest you to check the following JavaScript Framework, which has great API support for mobile web application development.

There are many mobile frameworks available, but the above mentioned are good and have great API’s to quickly design a mobile web application.

Now comes the final part, Testing. Testing the mobile web application is real challenge. Everyone can’t afford to buy physical devices and test the web applications. Few device manufacturers provide Emulators, so that we use to test your web application.

Check the below links, which i have blogged earlier related to testing the web application on Emulators!

Apple iPhone/ iPod/ iPad 

Windows Phone

Android, Android Emulator

BlackBerry – Ripple Emulator

So, not least, ASP.NET Mobile website – Mobile. Great repository of information related to developing mobile web applications in ASP.NET and links to some cool tutorials.

If you have any queries or doubts in developing Mobile web applications, do post your questions in Mobile and Handheld Devices Section in ASP.NET Forums. All time experts, great answers!

Happy mobile web programming!!!

Thanks!

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!

Detect requesting device type and redirect in ASP.NET

Smart Phones are rapidly increasing, so web app developers are more concentrating on porting their web applications compatible to view on smart phones.

With ASP.NET, making an existing web application compatible for smart phones is pretty easy. You can just add the following META tags in the &lt;head&gt; section and you are done. ASP.NET takes care of the rest!

META Tags
  1. <meta name="HandheldFriendly" content="true" />
  2. <meta name="viewport" content="width=device-width" />

 

ASP.NET MVC 4 has got pretty more options for making the website Mobile compatible!

http://www.asp.net/mvc/tutorials/mvc-4/aspnet-mvc-4-mobile-features

In ASP.NET WebForms too, we have an option to check whether the requested device is Mobile or not – Request.IsMobileDevice, which is not appropriate in most of the scenarios! I mean, it’s failing to detect the device type correctly!

Now, we discuss about custom solution for ASP.NET WebForms – detect the device type and redirecting!

Suppose if you have two versions of your web application – Mobile & Desktop, and you may wish to redirect the user to the appropriate web app based on the requested device.

To do that, try the following code snippet!

Detect Device in ASP.NET
  1. //Redirect the user based on the requested device
  2.             bool bIsMobileDevice = false;
  3.            
  4.             string[] MobileDevices = new string[] { "iPhone", "iPad","iPod","BlackBerry",
  5.                                                      "Nokia", "Android", "WindowsPhone",
  6.                                                      "Mobile"
  7.                                                      };
  8.             foreach (string MobileDeviceName in MobileDevices)
  9.             {
  10.                 if ((Request.UserAgent.IndexOf(MobileDeviceName, StringComparison.OrdinalIgnoreCase)) > 0)
  11.                 {
  12.                     bIsMobileDevice = true;
  13.                     break;
  14.  
  15.                 }
  16.             }//end:foreach loop
  17.  
  18.             if (bIsMobileDevice)
  19.             {
  20.                 Response.Redirect("Mobile/Home.aspx");
  21.             }
  22.             else
  23.             {
  24.                 Response.Redirect("Desktop/Home.aspx");
  25.             }

Let’s examine, what the above code does – A String array holds the mobile device names, which is matched with the User Agent string. If match is successful, then the user is redirected to the Mobile website!

Cool! If you examine the above code, it  contains the device names hardcoded in string array! Suppose, in future if you wish to add another device. For that, you may have add the new device name to the string array, recompile it and upload it back to the web server!

Seems to be an inefficient solution. The above solution will be suitable for scenarios like if you are targeting particular device type like iPad etc.,

Now we will see a more generic way to achieve the solution to the problem! We create an XML file, which holds the Mobile device names –

MobileDevices.xml
  1. <?xml version="1.0" encoding="utf-8" ?>
  2. <Devices>
  3.   <Device>iPad</Device>
  4.   <Device>iPhone</Device>
  5.   <Device>iPod</Device>
  6.   <Device>WindowsPhone</Device>
  7.   <Device>Android</Device>
  8.   <Device>BlackBerry</Device>
  9.   <Device>Nokia</Device>
  10.   <Device>Samsung</Device>
  11.   <Device>Mobile</Device>
  12. </Devices>

 

The above file can be created under App_Data folder! Now you can read the device names from this file using classes in System.Xml.Linq namespace.

To do that, check the below code snippet,

Code Snippet
  1. bool bIsMobileDevice = false;
  2.  
  3.             XDocument mobileDeviceDoc = XDocument.Load(Server.MapPath("App_Data/MobileDevices.xml"));
  4.  
  5.             var mobileDevices = from devices in mobileDeviceDoc.Root.Elements()
  6.                                 select devices;
  7.  
  8.             foreach (XElement device in mobileDevices)
  9.             {
  10.                 if (!string.IsNullOrEmpty(device.Value))
  11.                 {
  12.                     if ((Request.UserAgent.IndexOf(device.Value, StringComparison.OrdinalIgnoreCase)) > 0)
  13.                     {
  14.                         bIsMobileDevice = true;
  15.                         break;
  16.  
  17.                     }
  18.                 }
  19.  
  20.             }//end:foreach loop
  21.  
  22.             if (bIsMobileDevice)
  23.             {
  24.                 Response.Redirect("Mobile/Home.aspx");
  25.             }
  26.             else
  27.             {
  28.                 Response.Redirect("Desktop/Home.aspx");
  29.             }

Now this solution was more feasible! When you want to add new device, just add an element in the MobieDevices.xml and you are done. No need to re compile you code and upload it back to the web server. It just works!!!

Happy Mobile Web Programming!!!