Keeping the Code Club Projects With You

Having a copy of the Code Club projects to hand can be really useful. Sometime you might want to look something up while another time you might want to show a potential volunteer how great the resources are. Originally I had a copy of all the project PDFs on my Nexus 7 and could access them via a shortcut on my home screen that would take me to the top folder. This method was ok but with all the projects getting refreshed and being hosted on GitHub I thought that there must be a better way.

With the ability to download a zip file containing the projects area of the Code Club website from GitHub (https://github.com/CodeClub/CodeClubUK-Projects) I decided that this was what I wanted loaded on my tablet. After expanding the zip file I place a shortcut to the top webpage page on my home screen using ES File Explorer (as I had done with my previous solution). Again this was ok but  but I wasn't quite happy with the result. While previously I was left with a folder structure to navigate through this time I was given a generic html icon that I thought could look better.

After a bit of investigation I came across an interesting feature that was released with build 31 of the Chrome browser for Android (https://developer.chrome.com/multidevice/android/installtohomescreen). When you view a webpage through Chrome you can choose to place a shortcut on your home page that when clicked takes you directly to that page. Even better than that was you could have the page opened in full screen (like an application) and have a personalised image used for the shortcut icon on your home screen. All this is controlled by three extra lines in the head section of the page your interested in linking to.

So I edited the top index.html file in projects zip file downloaded from GitHub. Just below the existing meta tags in the header section I added the following;

<meta name="mobile-web-app-capable" content="yes">

This would open the page in full screen. For the personalised icon I had to provide an image at two sizes (128x128 pixels and 196x196 pixels). This would allow the best icon to be used dependant on what the screen resolution of the device being used was. Copies of my images can be found at the following links;

ccuk_logo_128x128.png
ccuk_logo_196x196.png

I placed copies of these images in the img folder found along with the index.html file. Next I inserted references to the images in the index.html file. Just below the existing link tags in the header section I added the following;

<link rel="icon" size="128x128" href="./img/ccuk_logo_128x128.png">
<link rel="icon" size="196x196" href="./img/ccuk_logo_196x196.png">

Next I had to open the index.html file in Chrome, not as easy as it sounds. The method I used was to open ES File Explorer, select the file, chose to open as, when presented with a list of what to open it as to choose other and finally when presented with a list of applications to choose Chrome. Now this will open the page like normal, not full screen just yet. Next from the drop down menu I chose to Add to home screen and from the dialogue that appeared I named it UK Projects. After clicking add I got a Code Club logo on my home screen that when clicked launches like application. Unfortunately it is slightly spoilt by a line appearing at the top showing that page is being loaded directly from the internal memory. You can get rid of it but you have to load the pages through a local HTTP daemon and I'm not that bothered by the text.