2Q

2q mockup created in browser with Webstrom and Firefox.

Advertisements

IIN Learning Center

My project at IIN. Started in April 2013 version 1 launched in May 2014. I was responsible for coding the front-end and design as well.

Highlights

  • Mockups Designed in Photoshop
  • Front-end Built with AngularJs
  • Powered by Drupal RESTFUL Api

Code Sample


//String Format
dashboard.filter('strFormat', function () {
/*
  //String library
  vm.text = '$1 of $2';

  //Controller
  vm.data.s1 = 3;
  vm.data.s2 = 10;

  //Template
  ng-bind-html="vm.text | 
  strFormat:{$1: vm.data.s1, $2: vm.data.s2}"

*/

 return function (input, replacements) {

   angular.forEach(replacements, 
   
   function (val, ind) {

        input = input.replace(ind, val);

    });

    return input;
  }

 });
//End String Format

Using Meta and Link Tags for OS Integration

Key Meta and links can help Integrate your application or website into any OS. Which gives a professional prospective to your product. It makes it easier for the client to access your application/site as would access any native app.

Below are some tags I use to create “Add to Homescreen” icons. These meta and links are easy to implement but high impact on a product.

Windows 8

<meta name="application-name" content="iWebDraft"/>
<meta name="msapplication-tooltip" content="Salman Munawar / Web Design / Development" />
<meta name="msapplication-TileColor" content="#0f5cbf"/>
<meta name="msapplication-wide310x150logo" content="img/win-logo.jpg"/>
<meta name="msapplication-square150x150logo" content="img/ie150x150.jpg">
<meta name="msapplication-square70x70logo" content="img/ie70x70.jpg">

For more comprehensive list for windows 8 please visit: Pinned Sites

Andriod

For Android little more work is required. In addition to link tags you have to create a manifest file listing a supported size and application name.

<link rel="shortcut icon" sizes="196x196" href="img/touch-icon-196x196.jpg">
<link rel="manifest" href="manifest.json">

For more details please visit: Add to Homescreen

IOS

<link rel="apple-touch-startup-image" href="img/splash.jpg" sizes="640x1096">
<link href="img/ico/apple-touch-icon-57-precomposed.png" sizes="57x57" rel="apple-touch-icon">
<link href="img/ico/apple-touch-icon-114-precomposed.png" sizes="114x114" rel="apple-touch-icon">
<link href="img/ico/apple-touch-icon-72-precomposed.png" sizes="72x72" rel="apple-touch-icon">
<link href="img/ico/apple-touch-icon-144-precomposed.png" sizes="144x144" rel="apple-touch-icon">

For more details please visit: Add to Homescreen