Ultimate Guide to Mobile Web Icon Markup

My Windows Phone Start Screen

I've been fighting a problem for the last few days, as I've been trying to identify why my blog (and a friend's blog) are not formatting Windows Phone Live Tile content properly.  For those of you who don't use a windows phone, this is one of the uber-cool features of the device where I can bookmark a website as a tile on the start screen and updates to the site are broadcast as new text that rotates across the "back of the tile".  

In my Phone home screen, you can see that I have a number of websites pinned so that I can quickly get to them.  This is from the lower part of the screen, but you can see the sites:

You can immediately see headlines on a number of those site's tiles.  Others, a simple and sometimes crappy looking screenshot of what the site looked like when I pinned the site.  

On Android and iPhone devices, you have a similar feature that creates an icon on the start screen.  The device will typically take a screenshot and shrink that down for use as an icon.  Other times, it will use the favicon with some simple formatting to create a home screen button.   Yuck...

In this article, I'm going to outline all of the tags to add to your site to make it look cool on your visitor's home screens.

Get Started Easy - Android Icons

The easiest device to support is Android.  With thee simple tags and two simple images, we can support a custom icon on the start screen.  For my blog, I added these lines to my HTML header:

<meta name="mobile-web-app-capable" content="yes">
<!-- Hi-res photo -->
<link rel="icon" sizes="196x196" href="http://csharpfritz.github.io/icons/large_and.png">
<!-- Lo-res photo for less capable devices -->
<link rel="icon" sizes="128x128" href="http://csharpfritz.github.io/icons/small_and.png">

 

The meta tag is required in order for the phone to enable the "Add to Homescreen" button.  Now you can add a link to CsharpFritz.com to your home screen on Android and see the following:

Next Up:  Apple iOS

Apple's mobile devices come in four different sizes, and the following meta link tags are needed to add icons for devices with white cables:

<!-- iOS Meta tags -->
<link rel="apple-touch-icon" href="http://csharpfritz.github.io/icons/small_ios.png">
<link rel="apple-touch-icon" sizes="76x76" href="http://csharpfritz.github.io/icons/small_ipad.png">
<link rel="apple-touch-icon" sizes="120x120" href="http://csharpfritz.github.io/icons/larse_ios.png">
<link rel="apple-touch-icon" sizes="152x152" href="http://csharpfritz.github.io/icons/large_ipad.png">

At this point, we now have six different shortcut icon sizes.  But wait!  That's not all!!


Windows and Windows Phone - Internet Explorer Meta Tags

This is the pair that really drives some neat functionality in the mobile devices.  Microsoft provides a three-step wizard to build out some initial pinned tiles functionality for your website at: http://www.buildmypinnedsite.com 

This wizard will help you generate the following markup:

<meta name="application-name" content="CSharp on the Fritz"/>
<meta name="msapplication-TileColor" content="#2714cb"/>
<meta name="msapplication-square70x70logo" content="http://csharpfritz.github.io/icons/small_w.png"/>
<meta name="msapplication-square150x150logo" content="http://csharpfritz.github.io/icons/medium.png"/>
<meta name="msapplication-wide310x150logo" content="http://csharpfritz.github.io/icons/wide.png"/>
<meta name="msapplication-square310x310logo" content="http://csharpfritz.github.io/icons/large.png"/>
<meta name="msapplication-notification" content="frequency=30;polling-uri=http://notifications.buildmypinnedsite.com/?feed=http://www.csharpfritz.com/blog?format=rss&amp;id=1;polling-uri2=http://notifications.buildmypinnedsite.com/?feed=http://www.csharpfritz.com/blog?format=rss&amp;id=2;polling-uri3=http://notifications.buildmypinnedsite.com/?feed=http://www.csharpfritz.com/blog?format=rss&amp;id=3;polling-uri4=http://notifications.buildmypinnedsite.com/?feed=http://www.csharpfritz.com/blog?format=rss&amp;id=4;polling-uri5=http://notifications.buildmypinnedsite.com/?feed=http://www.csharpfritz.com/blog?format=rss&amp;id=5;cycle=1"/>

These tags should be fairly self-explanatory:

  • application-name is the name to present on the tile for your website
  • TileColor is the background color to present for your tile
  • the logo tiles are all location for four more images to possibly present as the tile content on the start screen.
  • notification is an service location for Windows to poll for updates to present

For more information about the API Internet Explorer, Windows and Windows Phone uses to present tiles for your website, check MSDN at: http://msdn.microsoft.com/en-us/library/ie/bg183312(v=vs.85).aspx

Summary

With a little bit of simple HTML header tags and 10 different sized images you can make your website appear like an application on the home screen of your mobile visitors.  Next thing we need to figure out is a standard button that can be placed on our web pages that, when clicked, forces the browser to make an icon or tile for our website on the device home screen.  

My Ice Bucket Challenge for ALS

Yesterday I was tagged on Facebook by Hunter Payette, son of Carey Payette for the ice bucket challenge for ALS.  I did some research, and learned that this Ice Bucket Challenge was the brainchild of former Boston College baseball player Pete Frates.

You learn more about Pete and the Ice Bucket Challenge from ESPN.

I extend my challenge to my friends:

  • John Petersen
  • Burke Holland
  • Lino Tadros

 

Next Pluralsight Course: Advanced ASP.NET Web Forms

I was a bit coy about my next Pluralsight course, but now lets get right to it.  I'm going to open the box and show you all of the cool tricks that can make you successful with an Advanced ASP.NET Web Forms course.  

This course is designed to cover:

  • Building re-usable components
    • User Controls
    • Custom Controls
    • Scaffolding
    • Dynamic Data
  • Advanced Data Access Techniques with Model Binding
  • The OWIN-based ASP.NET Identity and Security sub-system
  • Extensibility of ASP.NET with Modules, Handlers, and Dependency Injection for Web Forms
  • Unit Testing your Web Forms

I wanted to cover these topics to deliver the insight and abilities that made me a successful web forms developer.  You shouldn't be mired in repeating your code and stuck software practices when you can use these features to make your web forms development easier.

Oh, and just to sweeten the pot:  I'm bringing some of the Telerik secret ingredients to the controls modules so that you can learn some of the techniques that help us to create the tools that you know and love.

I'm actively producing this course now, and hope to have it delivered in August.  Are there any problems that you have with ASP.NET web forms that you want to learn how to solve?  Sound off in the comments below

Application Security: Where You Want It, When You Need It with Visual Guard

 

This post originally appears on CodeProject.com 

I’ve been spending a lot of time thinking about application security recently. This used to be one of those topics I would plan to implement last when I read specification documents for projects. "Security is easy ... just put a few If/Then statements around the things that need to be secured and we’re done, right?" Then I went shopping at a large American retailer in the winter of 2013. Their systems were compromised and three months later, my credit card was shut off while I was attempting to pay for dinner at a nice restaurant. That hurt ... and security of applications suddenly became a problem that hurt me in a REAL way.

When I think about all of the .NET applications that I have written over the last 10 years, I’m sure there are many features that could use an improvement to their authorization policies. Perhaps that customized authentication provider I wrote could be hardened a bit more. I think I’ve tried to play the security expert too much in the past, and if I were in a place to maintain those applications today, I would be thinking real hard about how to implement better security in them. After doing some research and looking at the new techniques published by Microsoft for securing their frameworks, I think I found a third party solution that does a great job with green-field and brown-field applications.

I’ve been reviewing Novalys Visual Guard for the last 2 weeks, and found some really interesting nuggets in this package that would make my network administrators stand up and take notice. Let’s start with the basics: Visual Guard will let me configure a secure repository for my organization in several mediums including Microsoft SQL Server, Oracle Database, and a file share. In this repository, I can connect Active Directory or any number of third party OAuth providers for my users. Sweet! However, storing user credentials is just the tip of the iceberg.

User Authentication is the door that opens to get access to an application. It is your logon page, the logon screen, and the persisting of those credentials for the duration of time that someone is using one of your secured applications. Notice the use of the plural there: applications. Visual Guard allows me to configure a security repository that can administer many applications for a shared user base. With theVisual Guard console, I can clearly see what applications are managed and the permissions available inside of each application. Let’s go over that again: permissions for an application are managed outside of the application.

Even better than permissions managed outside of the application, I can configure multiple servers to manage the authentication and authorization rights in my application. That gives me scalability, and according to the manuals that I read through, it is even possible to configure Visual Guard to allow management of users and permissions with a web based console. There’s a ton of flexibility in the deployment of the Visual Guard server, and I’ve only just scratched the surface.

The web-based console can have its look and layout customized, even integrated into my application so that it appears seamlessly alongside my content. I can then review and manage security from anywhere in the world, with any device that can connect to my website.

The windows console shows a tree of information about an application, like this one for the Console itself. You can clearly see the permissions available under the Visual Guard Console – Permissions folder. These permissions are grouped into Permission Sets and then assigned to Roles. Finally, roles can be assigned to users to grant authorization inside of your applications. With one set of credentials, I now have a single-sign-on across all applications that are integrated with my instances of the Visual Guard server.

The killer feature here is the integration with your application. This is where I really saw an application for those long-life applications that I wrote many years ago. You can add Visual Guard on to an existing web application without having to recompile! Due to the provider model of the ASP.NET web forms project, as long as your login page is using the security providers defined in web.config, you should be able to swap out the authentication provider for Visual Guard. After that, the addition of an HttpModule is all you need to secure the rest of the application. Visual Guard secures your application by intercepting normal events as they occur, and allows you to specify what actions to take at those events.

Each permission defined in Visual Guard can have Property Actions or Script Actions associated with it. These are codified changes to make to your application, written and managed in the administrative console and executed at run-time of the application. You can do something as simple as create a ViewGrid permission and set the Visible property on a grid to true if the user has that permission. Once the permissions are defined, this can be managed by your operations or security teams with no intervention from a developer required. There are more advanced integrations available that involve a developer modifying code to provide additional security checks if that is what you require. However, this is too cool for me to be able to delegate the authorization checks of my application to the operations team!

Another interesting feature that Visual Guard could help me with is multi-tenancy. I have architected and written several large multi-tenant applications in my past, and the story of data access and security is always a sticky one to describe and get correct with thousands of lines of code to manage. Visual Guard has built in inheritance of permissions from group to child-group. This hierarchy is a nightmare to manage in a SQL database, and I can now rely on Visual Guard to apply that hierarchy and data-filter for me.

Finally, there is always a question of accountability. Who performed what secured operation and what time in the application? In the past, I’ve written huge database tables and logging mechanisms to provide this auditability of secure content. Visual Guard provides an audit report that outputs all records of security checks in your applications. After having handcrafted several of these services, I am happy to see that I don’t need to do that again. According to the docs from Novalys, Visual Guard is HIPPA and SOX compliant ... another headache that I can leave to professionals who are focused on that task.

My mindset on security has changed. No longer do I view it as an afterthought that can be added to my code once I have the core functionality working. Now I see security as something that I can partner with my operations team to implement. I can enable them to secure the services we are producing with the help of Novalys Visual Guard. This leads to more secure systems, security officers who are more aware of how software services are secured and more secure control of authorization capabilities within those facilities.

Disclosure of Material Connection: I received one or more of the products or services mentioned above for free in the hope that I would mention it on my blog. Regardless, I only recommend products or services I use personally and believe my readers will enjoy. I am disclosing this in accordance with the Federal Trade Commission’s 16 CFR, Part 255: "Guides Concerning the Use of Endorsements and Testimonials in Advertising.

Microsoft MVP - Two Years Running..

This morning I was renewed as a Microsoft MVP in ASP.NET and IIS.  This is a tremendous validation of the efforts I have put in through conference appearances, Pluralsight courses, blogging, and writing of other articles.

I'm going to be writing a lot more in the coming weeks and months on the advances in ASP.NET vNext, my next Pluralsight course, and I've got an app idea or two in the plans as well.  

Stay with me and I think you'll find some neat angle brackets, curly braces, and web goodness coming from yours truly before the summer is out.