How to Dynamically Create Mobile Touch Shortcut Icon for Apple iOS and Android

Goal:

Say your website has 2 users, each has a different avatar icon.  You want the user to be able to create a mobile touch / shortcut / favorite icon on their Apple iOS / Android device / Desktop.  It isn’t really a bookmark icon.

Solution:

You need to create the icon of the right sizes and add the following to the head section of the HTML:

<head>
...
<meta name="mobile-web-app-capable" content="yes">
...
<link href="http://www.xxxx.com/Images/B5-76x76.png" rel="apple-touch-icon" sizes="76x76" />
<link href="http://www.xxxx.com/Images/B5-120x120.png" rel="apple-touch-icon" sizes="120x120" />
<link href="http://www.xxxx.com/Images/B5-152x152.png" rel="apple-touch-icon" sizes="152x152" />
<link href="http://www.xxxx.com/Images/B5-128x128.png" rel="shortcut icon" sizes="128x128" />
<link href="http://www.xxxx.com/Images/B5-196x196.png" rel="shortcut icon" sizes="196x196" />
...
</head>

Note that you have the flexibility of specifying both the url and image filename.

Here is a sample code for ASP.NET to generate the above <link> HTML:

protected void Page_Init(object sender, EventArgs e)
{
#region shortcut icons for iOS
AddTouchIcon(76, "apple-touch-icon");
AddTouchIcon(120, "apple-touch-icon");
AddTouchIcon(152, "apple-touch-icon");
#endregion

#region shortcut icons for Android
AddTouchIcon(128, "shortcut icon");
AddTouchIcon(196, "shortcut icon");
#endregion
}

private void AddTouchIcon(int size, string rel)
{
HtmlLink myHtmlLink = new HtmlLink();

myHtmlLink.Href = string.Format("~/Images/B{0}-{1}x{1}.png", CurrentUser.BranchID, size);
myHtmlLink.Attributes.Add("rel", rel);

switch (size)
{
case 76:
case 120:
case 128:
case 152:
case 196:
myHtmlLink.Attributes.Add("sizes", string.Format("{0}x{0}", size));
break;
default:
break;
}

Page.Header.Controls.Add(myHtmlLink);
}

Don’t forget the <meta> tag for Android Chrome.

Of course you need to create and store those different images as well.

Testing

Note that creating the shortcut is both OS and browser dependent.  On iOS (iPad and iPhone), I had to use Safari.  I could not get Chrome to do it. 

On Android (Samsung Note 3), we had to use Chrome to create the shortcut to the home page.

On PC desktop, I used Chrome to create a shortcut.  Note that it is NOT the same as bookmark.

 

Reference:

https://developers.google.com/chrome/mobile/docs/installtohomescreen

http://socialmedia.biz/2012/02/21/encourage-visitors-to-save-your-site-as-a-mobile-shortcut/

http://www.kylejlarson.com/blog/2013/adding-an-icon-for-iphone-ipad-android-to-your-website/

https://support.google.com/chrome/answer/95710?hl=en

Advertisements

Windows Server 2012 MS FTP Server FileZilla Client “The supplied message is incomplete” via FTP SSL

Problem:

I have a Windows Server 2012 running Microsoft FTP Service.  I use FileZilla Client to connect via FTP over SSL. 

When I try to upload a file, I get:

“Response: 550 The supplied message is incomplete.  The signature was not verified.”

 

Solution:

Fix #1:

http://support.microsoft.com/kb/2888853

Fix #2:

http://trac.filezilla-project.org/ticket/7910

Deploy / Migration a WordPress Site to Windows Platform

If you want do it manually.  This is the article for you.  http://wp.smashingmagazine.com/2013/04/08/moving-wordpress-website/

There are plenty of paid solutions for this.  Two promising options include:

  • Backup Buddy ($50)
  • UpdraftPlus (The migrate add-on costs $30)

However, I am reviewing a FREE option here: Duplicator.

Here are some quick steps I used to create a windows 2012 production server at AWS:

  1. Launch an instance with Windows 2012 Base.
  2. Add IIS 8.0.  Be sure to select CGI in the role selection. How-to.
  3. Install WordPress via Windows Web App Gallery.
  4. It will create a MySQL database.  Be sure to click on the finish page link to copy the database information to your clipboard.  Paste that to a notepad and save it to a secure place.  You will need the database name, database username, and the password.
  5. Within IIS, recycle the application pool for the WordPress to make sure there are no files locked.
  6. Delete all folders within your newly created WordPress website physical directory (e.g. c:\inetpub\www.xxxx.com\)
  7. Install and run Duplicator on your source WordPress site.  You need to copy both the installer file and package file to the target website physical directory (e.g. c:\inetpub\www.xxxx.com\)
  8. Make sure your website has the appropriate hostname (e.g. http://www.xxxx.com&#8221;), not just “localhost”.
  9. Use a browser and navigate to www.xxxx.com/installer.php
  10. On Step1: enter the saved database name, username, and password.
  11. Check “Table Removal” to delete existing tables in the MySQL database.
  12. On Step2, leave everything as it is.  For me, changing the New Settings URL & Path only screwed up the migration.
  13. Verify that your new production wordpress site actually works.
  14. Follow the steps to resave permalinks and clean up installation files.

One final tip: Everyone temporarily.

PowerShell Invoke-WebRequest Error

Problem

I have setup a scheduled task to run powershell to post to web api as UserX.

When I login as UserX and run the following in command prompt:

C:\Windows\System32\WindowsPowerShell\v1.0\powershell.EXE “Invoke-WebRequest -Method POST http://api.xxxxx.com/api/v1/xxxx/xxxxx

It returns the following error:

C:\Users\xxxx>C:\Windows\System32\WindowsPowerShell\v1.0\powershell.EXE "Invoke
-WebRequest -Method POST http://api.xxxxx.com/api/v1/xxxx/xxxxxx"

Invoke-WebRequest : The response content cannot be parsed because the Internet
Explorer engine is not available, or Internet Explorer's first-launch
configuration is not complete. Specify the UseBasicParsing parameter and try
again.
At line:1 char:1
+ Invoke-WebRequest -Method POST
http://api.xxxxx.com/api/v1/xxxx/xxxxxx ...
+ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
~~~
+ CategoryInfo : NotImplemented: (:) [Invoke-WebRequest], NotSupp
ortedException
+ FullyQualifiedErrorId : WebCmdletIEDomNotSupportedException,Microsoft.Po
werShell.Commands.InvokeWebRequestCommand

 

Solution

In my case, login as UserX and launch Internet Explorer and setup the initial configuration.