Monday, 20 October 2014

Ebola and open data

Get involved with planning and support related to health outbreaks and specifically ebola in New York.

Friday, 19 September 2014

Open Data meets Football?

KID STORIES FOR SPORT DADS provides you with real time updates for major sports headlines based on your favourite teams. If you're seeking sports headlines for teams in the Major League Baseball (MLB), National Basketball Association (NBA), National Football League (NFL) or the National Hockey League (NHL) then be sure to use Kid Stories For Sports Dads. 

We know that quality time reading to your child is very important, but so is your time! Share your love for sports with your child as they become the star of their own sports story that also happens to include live sports headlines from the four major sports in North America. Kid Stories For Sports Dads also includes a free drawing app where your child can use their imagination and draw scenes from the big game. 

Also, enjoy the Speedy logo game where you child must try and click on team logos before the timer expires. See if they can beat their record every day. Kid Stories For Sports Dads is working on not just more free stories but it is also expanding to include Major League Baseball, National Hockey League and professional soccer. With Kid Stories For Sports Dads you'll never miss that important time with your child or team updates!

Download now in Google Play (

Sunday, 13 July 2014

DIY Apps For Women

Apps4Canadians has recently launched a new DIY app called DIY CHIC ( that was focused at helping women doing DIY or home reno projects.  While working on the project we came across some other great DIY apps that we'd like to mention here.  The apps are listed in no particular order.

Craftgawker Lite

Looking for arts and crafts ideas? Then the mobile companion to is the perfect iPhone app for you. craftgawker is a photo gallery that allows you to visually search and discover handmade arts and crafts to inspire your own projects. We publish photography submitted by craft bloggers from around the world. Our editors review submissions daily and choose the highest quality, most creative images to showcase.

Martha Stewart CraftStudio

Our easy-to-use app allows you to personalize cards, invitations, thank-you notes, scrapbook pages, keepsakes, and more. Browse through an array of colored and patterned “paper” backgrounds, import your own photos, and embellish with an abundance of stickers, stamps, glitter, textured borders, fonts, and punches. Tap to share your works of art with family and friends. So versatile, it’s the only digital crafting tool you’ll need!


For over 50 years, PANTONE has been the international language of color. Why struggle with color communication when you can simply reference a PANTONE Color and designers and manufacturers all over the world will know your exact hue. With the myPANTONE™ app you have access to over 13,000 PANTONE® Colors, including the PANTONE PLUS SERIES and Fashion + Home colors. Easily create color palettes for inspiration and share them with friends, clients and vendors. myPANTONE offers designers and color conscious consumers a way to take PANTONE Colors with them wherever they go. Can’t remember what a color looks like? Now you can have Portable Color Memory™.


"Dimension" is a revolutionary 3D tool case that contains measuring tools animated with gorgeous 3D graphics.

- Dimension wakes up the distance meter that was sleeping in your iPhone. Thanks to our revolutionary sonar combined with the camera of the iPhone, you will able to measure any distances in a house or appartment and save them to use them later on and build an accurate plan.
... but that's not all ...
"With the I.D. Wood app for your iPhone, you'll look like a pro every time."
"A well devised reference tool for those on the run, and also those perplexed by Bruce Hoadley’s work." Curated Magazine
"A must for any green builder or customer who is conscious about the materials they are going to buy....this app should be de rigueur." Charles and Hudson
"Remember the classic wood info and identification books on your shelf? This is the electronic version of those resources – somewhat easier to carry around in your pocket." Woodworker's Journal
I.D. Wood is your Pocket Guide to Woods from around the world with full screen samples and detailed information for over 200 different woods.

I.D. Wood

"Turn your already awesome iPhone into the best thing ever, with a decent wood guidebook." Sal Vaglica, This Old House

DIY CHIC added to Google Play Store

DIY CHIC (do it yourself CHIC) has been added to the Google Play Store on Sunday July 13th, 2014.  Once published it will be available for download here

Use DIY CHIC to help you with your renovation or DIY projects. Use the Inventory Tracker to create a list of your tools and the Shopping List to remember what items you need for your next project and avoid buying twice and the return lanes. 

DIY CHIC also includes multiple calculators to help you determine the correct amount of materials and it provides a daily DIY tip guide from several leading DIY sites. 

If you need to know when the next waste/garbage pickup is scheduled then use our simple to use address feature to find the schedule for your street. This app uses open data data sets from numerous towns and cities in both Canada and the United States with the help of ReCollect widget.

Here are some sample screenshots from DIY CHIC.

main navigation page 

use the inventory tracker to know what materials you already own

create your project shopping list and stay organized

learn about new DIY and reno tips and tricks with new updates each day

find the garbage waste schedule for your specified address

Apps 4 Canadians is now in Windows Phone Store

Apps 4 Canadians is now in the Windows Phone Store.  This app is the single source to access all other free apps that will be added.  Download today and get immediate access to Free Real Estate Planner, Our Neighbourhood Guide, DIY CHIC, and Four Told.  Download once and get access to all of the updates and new apps that will be added.

Download it today at Windows Phone Store:

Friday, 11 July 2014

HTML5 Local Storage example

When you are developing a mobile web application you may want to capture a user's preferences for language, locale or any previous entered submission.  You may need to pass the data entered on your page to a second page.  There are multiple ways in which to store data such as retrieving the data from a database, saving it in a session or saving it in local storage.  This example will provide a brief demo of how to get started with HTML local storage that can be used to save and retrieve data within a mobile web application.

This example will focus on using HTML5, jQuery Mobile and JavaScript for local storage and it assumes that your browser is capable of local storage.

Let's get started....

Step 1.  Develop Page 1.html

Our initial page will require multiple references to be added for jQuery and Modernizr within the page's <head> tag.  We'll also control the form element's formatting within the <style> tags that will be added to this section.  The first JavaScript uses the Modernizr function to confirm that the page is capable of supporting localStorage.  Our JavaScript function called showStoreValue() will be used to show the stored value and render it with a form element we'll call storeItem.  A form element called "message" will be used to communicate when failures occur.

The important code to highlight related to the localStorage capability is defining a variable at the beginning of the JavaScript function that will be assigned the stores value(s).

var localStorageKey = "demoStorageKey";

Your code refers to localStorage object and then the method "setItem".  In our example we're assigning it the value of the input field identified as "entry".

localStorage.setItem(localStorageKey, $('#entry').val());

During the initial load of the page there will not be a value defined for the localStorage variable.  However, once a value has been saved then on each subsequent page load the showStoreValue() function is called which calls the localStorage's get method in order to retreive the value.  This can be seen by the code "localStorage.getItem(localStorageKey);".

Step 2. Add the following code for Page1.html.

Save the following code as "localStorageDemo1.html" and then load in a browser.

<!DOCTYPE html>
    <title>jQuery Mobile local storage demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href=""/>
    <script type="text/javascript" src=""></script>
    <script type="text/javascript" src=""></script>
    <script type="text/javascript" src=""></script>
        #message {
            display: none;
            border-radius: 10px;
            padding: 10px;
            background-color: #ff0000;
            color: #fff;

        #storageDemoPage h2 {
            white-space: normal;
    <script type="text/javascript">
        var localStorageKey = "demoStorageKey";
        $('#storageDemoPage').live('pagecreate', function() {
            if (Modernizr.localstorage) {
            else {
                $('#message').text("Unfortunately your browser doesn't support local storage");
                $('#addToStorage').attr('disabled', 'disabled');
            $('#addToStorage').click(function(e) {
                localStorage.setItem(localStorageKey, $('#entry').val());

        function showStoreValue() {
            var item = localStorage.getItem(localStorageKey);
            if (item == null) {
                item = 'nothing in the store';
            else if (item.length === 0) {
                item = 'Store contains empty value';
<section data-role="page" id="storageDemoPage">
    <section data-role="header">
        <h2>Apps 4 Canadians jQuery Mobile local storage demo</h2>
    <section data-role="content">
        <p id="message"/>
        <ul data-role="listview" data-inset="true">
            <li data-role="list-divider">Enter text to store</li>
                <input type="text" id="entry" name="entry" placeholder="Enter text to store"/>
                <input type="button" id="addToStorage" value="Add to local storage"/>
            <li data-role="list-divider">Item in store</li>
            <li class="storeItem"/>

Step 3.  TEST

Enter a value in the entry input field and confirm that it is displayed in the storeItem form element.

Create a simple jQuery Mobile slider menu panel

The development of a user interface is one of the most important features of any good mobile app.  A user needs to be able navigate easily and most importantly quickly throughout your app.  There are different navigational options that can be added to your app such as maintaining a header or footer navigational style, adding navigational links in the body of the page, or even create a menu that can hide and display on the click of a menu option.  This demo will focus on an example where the app will show and hide the primary menu in order to help save valuable real state space on our page.

Our demo will focus on using HTML5, jQuery Mobile and CSS.  The complete source code for this example will be available for download in the Downloads menu tab.

Let's get started.....

Step 1.  Referencing jQuery Mobile

You will need to add the necessary jQuery Mobile imports into the page's <head> tags.  For this example we'll add the following items:

<link rel="stylesheet"  href=""> <script src=""></script>
<script src=""></script>
<script src=""></script

Step 2.  Creating the jQuery Mobile page structure

After the <body> tag we will want to add a responsive panel and our menu option for the form.  Add the following immediately after the <body> tag:

<div data-role="page" class="ui-responsive-panel">

<div data-role="header" data-theme="a">
<h1>Apps 4 Canadians Title</h1>
<a href="#add-form" data-icon="plus" data-iconpos="notext">Add</a>
</div><!-- /header -->
<div data-role="content" data-theme="a">
<h2><p><center>"Apps 4 Canadians"</center></p></h2>
</div><!-- /content -->

<div class="jqm-footer">
<center>&copy; Apps4Canadians</center>

Notice that we haven't yet added the closing <div> tag for the page level since we still need to add more code.

The data-theme "a" was selected but you can enter any of the available options that you may have created in jQuery Mobile Theme Roller or other theme producing service.  A sample page title was also added to the page header.  Navigating to our hidden menu capability will be done by means of clicking on the menu icon option, which is being rendered as a jQuery Mobile icon instead of text.  You can remove the references to data-icon and use text if you prefer.

The main contents section of the page can be marked up to include additional descriptive text or an image.  In order to keep the code reduced to the core requirements we'll simply adding Apps 4 Canadians text as a <h2>.  The <div> containing the footer is optional but recommended if you want to add another means to include key navigational links such as your main landing page or a support email link.

Step 3.  Adding format to the jQuery Mobile Panel

In preparation for displaying our menu we'll consider some of the formatting options and naming conventions.  The <style> tags will go directly after our the </div> for the footer.  In later steps we'll be adding our menu to the page so let's decide to call our associated stylesheet class as the name nav-search.  We'll just add a few attributes for the anticipated form element, such as background color. In future more advanced examples you can add additional formatting options for additional form controls and this content can also be added to its own .CSS file that can be referenced in the <head> tags for the page.

.nav-search .ui-btn-up-a {
.nav-search .ui-btn-inner {
border-top: 1px solid #EADAF8;
border-color: rgba(255, 255, 255, 1);

Step 4.  Adding the jQuery Mobile Panel

The ability to show and hide the menu will be controlled by a panel control.  The added listview control is referencing the class "nav-search" for formatting the list items or menu options that we defined in the earlier step. If you want to add more or less menu options then simply add or remove <li> elements.  

Add the following code below the </style> tag.

<div data-role="panel" data-position="left" data-position-fixed="false" data-display="reveal" id="nav-panel" data-theme="b">

<ul data-role="listview" data-theme="a" data-divider-theme="a" style="margin-top:-16px;" class="nav-search">
<li data-icon="delete" style="background-color:#111;">
<a href="#" data-rel="close">Close menu</a>
<li data-filtertext="Book Sellers Canada">
<a href="" rel="external" data-transition="slideup" data-prefetch>Book Sellers Canada</a>
<li data-filtertext="A4C Main">
<a href="" rel="external" data-transition="slideup" data-prefetch>Apps 4 Canadians</a>
<li data-filtertext="Apps 4 Canadians">
<a href="" rel="external" data-transition="slideup" data-prefetch>Apps 4 Canadians</a>

<!-- panel content goes here -->
</div><!-- /panel -->

Step 5.  Finishing off the code

We can't forget to add the closing <div>, <body> and <html> tags so we'll add it within this step as shown in the following code.

</div><!-- /page -->

Step 6.  Test

Save the file as "panelmenu.html" to a location that you can access and then launch it within your broswer.  You should now see the + icon and once clicked opens the form.  Click on the various menu options to confirm that you're navigated to a new page and that the close menu option hides the menu from being displayed.