Alex Thorpe

Free WordPress Theme: Easy Portfolio v1.1.0

Alex Thorpe — Sat, 16 Mar 2013 05:28:57 +0000

Intro

I have been working on this theme for a while and it is finally ready for release. Easy portfolio is an easy to use theme for creatives to get there work without the need for learning how to code. The design is simple but highly customizable, giving you the ability to make it look and function how you want. From start to finish you will be able to create a site in under 30 minutes that looks as good as any create professionals site already on the web.

Demo Site

Features include:

Responsive design
Touch friendly image galleries
Drag & Drop image uploader
Built in contact page
Fullscreen portfolio mode
Web App capable for installation on mobile devices
Fully Compatable with WP 3.5
High level of customization by the user without needing to change a singel line of code
Support for videos from Youtube or Vimeo
Auto updates

Easy Portfolio Theme

Download Theme

163 total downloads, 887.42 kB

Installation

Instructions coming soon…

Free Doctor Who Background for Phone, Tablet or Desktop

Alex Thorpe — Mon, 19 Nov 2012 02:29:30 +0000

I was feeling creative the other day and made this vector tardis. If you don’t know what a tardis is then I suggest you watch an episode of Doctor Who, it really is an amazing show. Click on the button that corresponds to your device and if you have any requests for more backgrounds leave them in the comments. Enjoy!

Phone Phone (w/ retina display)

Tablet Tablet (w/ retina display)

Desktop (up to 24″) Desktop (27″ & 30″)

CSS Image Sprites for Retina (HiRes) Devices

Alex Thorpe — Mon, 22 Oct 2012 02:47:41 +0000

Final Product

This is an iframe of a live site. If it is not working for you, click the button for the live preview.

Live Demo Download

Intro

For modern websites icons and graphics have become an increasingly important way to provide visitors with a more visual way to navigate. And as web applications replace more and more traditional desktop applications the use of icons will only increase. But unlike desktop applications anything on the web has to be loaded and having many graphics can slow a site down especially for a site with dozens of buttons. The best way to keep your site loading fast and looking good is to use a CSS Sprite.

CSS Sprites have been around for many years, if you are unfamiliar with them there is a great in depth article here on css-tricks. But the basic premise is that what impacts loading times the most the number of different resources you load on a page. So by combining all your icons into one file you are only loading one resource, thus making your page faster.

Now with the new crop of ultra high definition devices coming onto the market it is important to make sure your site not only continues to load quickly but all your icons and graphics look how you expect. If you do not optimize your graphics they will look like this on ultra high resolution devices:

But with some simple css you can keep the images correct:

Goals

Does not add to loading times
Delivers the optimum resolution for the users device

Tutorial

To begin we need a solid set of icons. I am going to use a few from my free icon set that you can download here, but any icons or graphics will work. For this tutorial we will be using 5 icons with the final size on the web of 32px by 32px. To create the high resolution icons we need to start with the 64×64 icons. After you have downloaded the icons open up illustrator and create a new file that is 320px by 64px.

Next place the icons you wish to use next to each other until all 5 are on the document. Then go file>save for web and press enter, name the graphic “icons@2x.png”, this is the big resolution version for retina display devices. Next go file>save for web and reduce the size of the image to 50% and name it “icons.png”.

It is now time to get to the coding. Create a new html file named index.html and add the following code



	
		CSS-Sprite Demo
		
	
	
	
		
			These icons look sharp
		
			pie-chart
			document
			group
			location
			microphone

The html for this demo is very simple, just a series of links that will each have a background icon applied to it. Next create a css file named style.css and add the following style rules to add the icons.

.icon {
	background: url('images/icons.png') no-repeat 0 0;
	width: 32px;
	height: 32px;
	float: left;
	margin: 10px;
	text-indent: -9999px;
}

If you were to view the site now you would see each link has the same first icon from the icons.png graphic. In order to have the correct icons displayed we have to slide the background image to the left in 32px increments using the following code that gets added to the css file.

.document {
	background-position: -32px 0 !important;
}

.group {
	background-position: -64px 0 !important;
}

.location {
	background-position: -96px 0 !important;
}

.microphone {
	background-position: -128px 0 !important;
}

The final step is to add the correct code to load the retina display icons instead of the regualer set. Add this code to the bottom of the css stylesheet.

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
    only screen and (-o-min-device-pixel-ratio: 3/2),
    only screen and (min--moz-device-pixel-ratio: 1.5),
    only screen and (min-device-pixel-ratio: 1.5) {
        .icon {
            background: url('images/icons@2x.png') no-repeat 0 0;
            background-size: 160px 32px;
        }
}

This section uses the new media query from CSS3 to determine the resolution of the users screen and display the icons@2x.png graphic we made. The trick to making it fit correctly is to make the new graphic the same size as the old one using the background-size property.

If you look at your site now you will see each icon is properly displayed and looks sharp regardless of the devices resolution.

Bonus

To add a little style to the demo I added a background image and some CSS3 transitions. Here is the complete code for the demo.

body {
	background: url('images/grey.png') repeat 0 0;
}

.icons-wrapper {
	width: 260px;
	overflow: hidden;
	display: block;
	margin: 150px auto;
	text-align: center;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	-webkit-box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, .3);
	box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, .3);
	background: #ffffff; /* Old browsers */
}

.icon {
	background: url('images/icons.png') no-repeat 0 0;
	width: 32px;
	height: 32px;
	float: left;
	margin: 10px;
	text-indent: -9999px;
	/* CSS3 Transitions */
	opacity: 1;
    filter: alpha(opacity=100);
    -webkit-transition: all 400ms ease;
    -moz-transition: all 400ms ease;
    -ms-transition: all 400ms ease;
    -o-transition: all 400ms ease;
    transition: all 400ms ease;
}

.icon:hover {
	opacity: .4;
    filter: alpha(opacity=40);
}

.document {
	background-position: -32px 0 !important;
}

.group {
	background-position: -64px 0 !important;
}

.location {
	background-position: -96px 0 !important;
}

.microphone {
	background-position: -128px 0 !important;
}

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
    only screen and (-o-min-device-pixel-ratio: 3/2),
    only screen and (min--moz-device-pixel-ratio: 1.5),
    only screen and (min-device-pixel-ratio: 1.5) {
        .icon {
            background: url('images/icons@2x.png') no-repeat 0 0;
            background-size: 160px 32px;
        }

        body {
	        background: url('images/grey@2x.png') repeat 0 0;
	        background-size: 397px 322px;
        }
}

As you can see even a repeating background image can be optimized for a retina display using this technique. The new CSS3 properties for transitions, rounded borders and drop shadows can add those small details that make a site stand out from the crowd. I hope you enjoyed the tutorial and as always if you have anything to say just leave a comment.

Learn how to drag, drop & chart a file using HTML5

Alex Thorpe — Wed, 18 Apr 2012 00:15:52 +0000

This is going to be an in depth tutorial teaching you how to build a complex web application using html5, CSS3 and Javascript. It is geared towards people with an intermediate level of experience with web technology and should take 2-3 hours to complete. The end goal is to get a webpage where a user can drag and drop a csv file onto it and the page reads the contents of the file, loads it into a chart and prints the chart onto the page.

Beginning Files

Click the button above to download all required libraries including Modernizr for detecting browser support, highcharts for creating graphs, normalize to reset CSS elements and some images used for backgrounds. Once downloaded and unzipped you need to add a file and call it index.html. Add the following code to the file:




	
		File Uploader
	
	
	
		
			Upload a File - Get a Graph!
		
		
		
			
			
				drag & drop here
			
		
		
		
			
		
		
		
			This HTML5 demo was created by Alex Thorpe

This is a very simple html document with a title, content section where we will load the graph, sidebar where we will have the upload box and a footer for the copyright area. Once the basic file structure is in place we need to check if all the new HTML api’s we are using are supported by the browser. To handle this we will use a great javascript plugin called modernizr. It has the ability to check the current browser and load different files if it sees the api’s are not fully supported. For this tutorial the only api we need to worry about is the filereader because it is only supported by firefox and chrome (safari 6 and IE 10 will both have support later this year. Include the following code right before the closing body tag:

Now will walk through each line and explain what this does.

This loads the jquery library, the core modernizr plugin along with an extension to check for the file-api.

Modernizr.load({
  test: Modernizr.filereader,
  yep: ['js/highcharts.js', 'js/modules/exporting.js', 'js/html5demo.js'],
  nope: ['js/nosupport.js']
});

There are 3 parts to a check done by modernizr. First is a test for a specific api, in our case the filereader api. If support is detected the yep statement tells the browser what file to load, if there is no support the nope statement allows you to load other files.

Now that we have detected what files to load we need to create those files. Inside the js folder make a new file and name it nosupport.js. This is going to be a simple javascript file that tells the user there current browser is not supported and they should try a different one. Add the following lines of code to the newly created nosupport file.

var container = $('#container');

container.innerHTML = '

Your browser does not support FileReader. Try using Firefox or Chrome

';

You can now close this file and create a new one in the same js folder called html5demo.js. This file all of the magic is going to happen. Begin by adding the following lines of code to the html5demo.js file:

//set the DOM element of dropbox as a variable
var dropbox = document.getElementById("dropbox");

//Listen for the drag & drop events
dropbox.addEventListener("drop", drop, false);

This code looks cryptic but it is rather simple once you know what you are looking at. We set the HTML element with an id of dropbox from our index.html file as a variable and then we “listen” for something to happen to that element. When the event is detected the function declared is executed. The final paramater is whether to bubble up or capture the event. Don’t know what that means? Then read this explination and come back to this tutorial when you are done. For this tutorial we are going to chose bubble so use false. There are several other events that you can register with the drag and drop api listed here.

//event handler parts
element.addEventListener("event", function, type);

Next we need to write the drop function. Add the following code after the event handlers:

//When File is dropped on zone do the following
function drop(event) {

	//stop moving through DOM
	event.stopPropagation();

	//Prevent the defualt action
	event.preventDefault();

	//Register the data transfer event
	var files = event.dataTransfer.files;

	//Record number of files being uploaded
	var number = files.length;

	//Only trigger parseFiles function if at least one file uploaded
	if (number > 0) {
		parseFiles(files);
	}
}

This function is how we tell if a file has been dropped onto the dropbox element.

//stop moving through DOM
event.stopPropagation();

//Prevent the default action
event.preventDefault();

These two lines from the function stop any default actions otherwise used on the page. To better understand the stopPropagation and preventDefault commands I suggest you read this. The 2 commands are not truly necessary for this application but if you are building a more advanced application they will be so I included them to make this code as useful as possible.

//Registers the files as an array
var files = event.dataTransfer.files;

This line records each file as an element in an array called files. Then we create a new variable to record the number of files uploaded

//Record number of files being uploaded
var number = files.length;

The last part only calls the parseFiles function if there was at least 1 file uploaded.

//Only trigger parseFiles function if at least one file uploaded
if (number > 0) {
	parseFiles(files);
}

After the drop function we need to create another function named parseFiles that will be responsible for selecting the file and reading all the meta information.

//Process the uploaded file
function parseFiles(files) {

	//Register the first file uploaded
	var file = files[0];

        //set the DOM element of file-data to a variable
  	var fileData = document.getElementById("file-data");

  	//Add file information to the HTML page
        var output = "
file: " + file.name + "

";
    	output += "
last update: " + file.lastModifiedDate + "

";
		output += "
type: " + file.type + "

";
		output += "
size: " + file.size + " bytes

";

	fileData.innerHTML = output;

	//Open FileReader to read content
	var reader = new FileReader();

	// begin the read operation
	reader.readAsText(file, "UTF-8");

	// init the reader event handlers
	reader.onload = handleReaderLoad;

}

The first 2 statements create 2 new variables:

//Register the first file uploaded
var file = files[0];

//set the DOM element of file-data to a variable
var fileData = document.getElementById("file-data");

The first records the first document saved in the files array, for this tutorial we only care about the first uploaded file but you could easily add a loop to read multiple files. The second is setting the div with an id of file-data as a new object so we can add information to it.

//Add file information to the HTML page
    var output = "
file: " + file.name + "

";
    	output += "
last update: " + file.lastModifiedDate + "

";
	output += "
type: " + file.type + "

";
	output += "
size: " + file.size + " bytes

";

This section takes all the metadata from the file such as name, date last modified, type and size and adds it to a new variable named output along with some html tags to help us style the information later. Then we add the output contents of the output variable to the inside of the file-data div:

fileData.innerHTML = output;

Next we create a new instance of the filereader, tell the browser to read the contents of the file as unicode data and once the file has been loader start the handleReaderLoad function.

//Open FileReader to read content
var reader = new FileReader();

// begin the read operation
reader.readAsText(file, "UTF-8");

// init the reader event handlers
reader.onload = handleReaderLoad;

After the parseFiles function add the following:

function handleReaderLoad(event, file) {

  	//Set csv variable equal to file contents
  	csv = event.target.result;

  	//Run CSV parsing function
  	processData();
}

We are using a new variable call csv to store the inforamtion read from the file but we have not yet declared it. Because we need to use it several times in the document we should create it as a global variable. You do this by adding the following lines right bellow the var dropbox line at the top of the page.

//create new global variable
var csv;

The processData function is the most complicated part of this app but it is also the most powerful. It allows you to read through a csv file and create seperate objects for each piece of data. In our app we will take this and chart it directly but you could also use this function to load a huge excell file into a database for processing or more complex data manipulations. The function should go bellow the handleReaderLoad function:

function processData() {

    //Seperate file by line breaks
    var allTextLines = csv.split(/\r\n|\n/);

    //Set Key equal to the first row
    var headers = allTextLines[0].split(',');

    //loop through each line
    for (var i=1; i
    	//Seperate line by comma
        var data = allTextLines[i].split(',');

        //Create associated array for each line
        if (data.length == headers.length) {

	    //Declare temp array
            var array = {};

            //Loop through values
            for (var j=0; j
            	//Set header to Key
            	var key = headers[j];

            	//Set data to value
            	var value = data[j];

            	//Add Key Value pair to temp array
            	array[key] = value;
            }

            //Add temp line array to array of all data
            lines.push(array);
        }
    }

    //Convert data to graphical form
    renderChart();
}

The first line seperates each line of the csv file and places it into an array called allTextLines. It looks like this:

allTextLines = ["Name,Fall 2011,Winter 2012", "john,3.2,3.4", ...];

The next line

//Set Key equal to the first row
var headers = allTextLines[0].split(',');

Splits the first row of data into a new array by commas. This are the categories associated with the csv file:

var headers = ["Name", "Fall 2011", "Winter 2012"];

//loop through each line
for (var i=1; i
    //Seperate line by comma
    var data = allTextLines[i].split(',');

    //Create associated array for each line
    if (data.length == headers.length) {

        //Declare temp array
        var array = {};

        //Loop through values
        for (var j=0; j
        	//Set header to Key
        	var key = headers[j];

        	//Set data to value
        	var value = data[j];

        	//Add Key Value pair to temp array
        	array[key] = value;
        }

        //Add temp line array to array of all data
        lines.push(array);
    }
}

We set up a loop to start at the second row of the allTextLines array (we already used row 1 for the headers) and parse each string separately.

//Seperate line by comma
var data = allTextLines[i].split(',');

There is a new temporary array created called data to hold all the values from the split.

//Create associated array for each line
if (data.length == headers.length) {

	//Declare temp array
    var array = {};

    //Loop through values
    for (var j=0; j
    	//Set header to Key
    	var key = headers[j];

    	//Set data to value
    	var value = data[j];

    	//Add Key Value pair to temp array
    	array[key] = value;
    }

    //Add temp line array to array of all data
    lines.push(array);
}

This loop checks if the number of data points is equal to the number of categories and then adds the category name and data point to an object array as a key value pair:

//example of the object array
array = {
   name: john,
   fall 2011: 3.2.
   winter 2012: 3.4
}

After all values have been added for the record the object array is added to an array of arrays called lines. We have not created the lines array yet so we should do that now. Add the following code to the top of the page right bellow the var csv; line.

//Create new global array for parsed csv data
var lines = [];

The final command calls the function that will create the chart using the data we just loaded. Add the following function after proccessData.

function renderChart() {

	var options = {
	    chart: {
	        renderTo: 'container',
	        defaultSeriesType: 'line'
	    },
	    title: {
	        text: 'Grades'
	    },
	    xAxis: {
	        categories: []
	    },
	    yAxis: {
	        title: {
	            text: 'GPA'
	        }
	    },
	    series: [{
			name: 'Fall 2011',
			data: []
		}, {
			name: 'Winter 2012',
			data: []
		}],
	    exporting: {
            enabled: true
        }
	};

	//Add object values from csv to the chart
	for(i = 0; i < lines.length; i++) {
		var obj = lines[i];

		for(var index in obj) {
			if (index === 'Name') {
				options.xAxis.categories.push(obj[index]);
			}

			if (index === 'Fall 2011') {
				options.series[0].data.push(parseFloat(obj[index]));
			}

			if (index === 'Winter 2012') {
				options.series[1].data.push(parseFloat(obj[index]));
			}
		}
	}

	//Create the chart
	var chart = new Highcharts.Chart(options);
}

The code for creating the chart comes from the highcharts website. They do a great job explaining there system in the documentation on there site here. The values from the object arrays in the lines array are added based on the category each row belongs too. For this tutorial the categories are hard coded but in a real app you would want to make them more dynamic.

To style the application add a new file in the css folder with the following code:

@import url('normalize.css');
@import url(http://fonts.googleapis.com/css?family=Droid+Serif);

body {
	background: url(images/arches.png);
	font-size: 12px;
	font-weight: 400;
}

header {
	width: 100%;
	display: block;
	background: #292a2d; /* Old browsers */
	background: -moz-linear-gradient(top,  #292a2d 0%, #000000 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#292a2d), color-stop(100%,#000000)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #292a2d 0%,#000000 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #292a2d 0%,#000000 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #292a2d 0%,#000000 100%); /* IE10+ */
	background: linear-gradient(top,  #292a2d 0%,#000000 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#292a2d', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
	color: #fff;
	border-bottom: 2px solid #f8f8f8;
	-webkit-box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, .5);
	-moz-box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, .5);
	box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, .5);
}

header h1.title {
	font-family: 'Droid Serif', serif;
	font-size: 2em;
	line-height: 1.5em;
	padding: 5px 15px;
}

h1.no-support {
	font-size: 24px;
}

#fileToUpload {
	position: absolute;
	right: 30px;
	bottom: 140px;
	padding: 5px;
	margin: 0px;
	width: 170px;
}

#dropbox {
	width: 180px;
	height: 110px;
	background: url(images/download.png) no-repeat center center;
	background-color: #454545;
	position: absolute;
	right: 30px;
	bottom: 20px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	-webkit-box-shadow: inset 1px 2px 8px 1px rgba(0, 0, 0, .4);
	-moz-box-shadow: inset 1px 2px 8px 1px rgba(0, 0, 0, .4);
	box-shadow: inset 1px 2px 8px 1px rgba(0, 0, 0, .4);
}

#message {
	color: #F8F8F8;
	font-size: 1.2em;
	bottom: 5px;
	display: block;
	text-align: center;
	margin-top: 73px;
}

#container {
	margin: 50px 0 0 50px;
	width: 700px;
	height: 350px;
}

#file-data {
	font-family: 'Droid Serif', serif;
	font-size: 1.25em;
	line-height: 1.5em;
	right: 30px;
	top: 100px;
	width: 180px;
	position: absolute;
}

#file-data span.meta {
	color: #308FD9;
}

.copyright {
	position: absolute;
	left: 20px;
	bottom: 15px;
	font-weight: bold;
	color: #454545;
}

.highcharts-container {
	-webkit-box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, .5);
	-moz-box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, .5);
	box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, .5);
}

I am not going to go over the styling I used in this tutorial but please look through it and try to understand what each part is doing.

Finally we need to add a reference to the css file in the header of index.html.

To run the application you have to upload it to a hosted server. The file api does not work locally for security reasons. Once you have the web app deployed you can use the included csv file to test out if it works. The next steps you should take are to try and figure out how to make the charted categories dynamic rather than hard coded.

You now have a web application that can take a csv file that is dropped onto the page, read it and display the information as a graph without have to refresh or talk to a server. You can view the commented source code on github or check out the completed demo bellow. I hope you learned some new techniques while reading this tutorial and if you have any questions or improvements please leave them in the comments.

Source Files Demo

Snake! an HTML5 game for iPhone & Android

Alex Thorpe — Mon, 12 Mar 2012 05:39:17 +0000

This is my first HTML5 game for mobile phones. Snake! is an updated version of the classic Nokia game from the 90′s (yes I know the game is technically older than that but Nokia is the company that made it famous). This version uses swipes to move the snake and can be installed as an app on your home screen.

Its built using the latest web technologies including CSS3, HTML5 canvas & offline caching, Javascript, Google @Font-face and jQuery touch events. The web app is designed to work the best on a modern touch phone but it will also work on tablets and a regular computer (use the arrow keys). Bellow are some screen shots of the game and link. Future improvements will include audio and game speed settings but for now just go to the site and Enjoy!

Snake! Game

The source code is now hosted on github so if you want to see how this was created or want to submit improvements you can.

Source Code

Mobile Device Policy & Development in Enterprise

Alex Thorpe — Fri, 24 Feb 2012 19:28:18 +0000

As mobile devices become more powerful and ubiquitous in the workplace companies need to begin supporting and developing for these consumer devices. The old command and control framework of IT management providing a limited number of hardware devices needs to be re-evaluated and adapted to the new workplace.

By adapting a ‘bring your own device’ policy management can decrease costs, increase worker happiness and improve data security. Major companies like Kraft Foods gives employees a stipend to purchase a device for use with their corporate systems.

A key part to this bring your own device strategy is leveraging the cloud to roll out software to devices and insure data security. Using a cloud based system insures no data is maintained on the device unless the application is active and the user has logged into the app.

This post details ways to build native phone/tablet applications, a separate post will cover web app development technologies including Sencha Touch, Phonegap and jQuery Mobile.

Device & Policy Selection

Adapting a ‘Bring your own device’ policy will empower employees and reduce training time. It can make employees more effective and reduce the number of calls to IT support.
Setting up a website detailing all company policies and resources for mobile devices will insure that everyone has access to information. The site should contain a forum for users to ask other users for help and video tutorials on application features.
Passwords should be mandated for any device with corporate information and IT should have rights to remote wipe the device if it is lost or stolen.

Development

There are currently 5 major operating systems competing in the mobile space with no one system maintaining more than 30 percent market share. In order to insure the long-term viability of the mobile application it needs to be designed and built to work on all major operating systems.

Developing for all of the current and future operating systems requires the use of a third party development environment. There are three main mobile development platforms: Rhomobile, Appcelerator Titanium and Corona SDK.

Rhomobile

Rhomobile is a set of developer tools; RhoHub, RhoSync and RhoGallery, that allow companies to build and deploy mobile applications that integrate seamlessly with existing enterprise servers.

RhoHub It is the only development as a service platform that does not require software installation on a local machine, all development and testing is done in the cloud. This allows development of iOS applications on windows machines, something no other platform allows.

Apps built with RhoHub are true native applications with support for Model-View-Control, synchronized data and operate on most major mobile operating systems; iOS, Android, Blackberry and Windows Phone 7.

Interaction with an enterprise server is done through RhoSync, an app integration server that keeps all the data on the device synchronized with the backend system. RhoSync uses “No SQL” to allow for high volumes of data and devices to be interacting with the server at once. The device not only syncs data with the enterprise applications but metadata as well. This means that if new fields get added to the enterprise application they are automatically synchronized to the device.

RhoGallery allows for companies to manage apps and deploy them to employee devices. If a device is stolen or an employee is terminated the applications can be remotely removed as well. By managing only the applications and not the device it makes support cheaper and easier.

The Rhomobile framework is used by over 15,000 developers and is well supported, but documentation is not as good as the competitors and sample code is not provided. Because the framework uses high level-programming models there is a steep learning curve and users should be familiar with the underling languages (Ruby, HTML, CSS) before beginning development.

Verdict

With the ability to develop apps in the cloud, interact with an enterprise server and deploy apps remotely Rhomobile is the clear choice for developing mobile applications in enterprise. It is the only platform that allows for deep integration with an existing system and enterprise level security.

Rhomobile Link

Corona

The Corona SDK is a framework that allows for cross platform development using the Lua programing language. It is designed allow programmers to create multimedia rich applications and games without Objective-C, C++ or Java knowledge. Finished apps can be deployed to iOS and android devices through their respective app stores.

Using the Lua language allows developers to focus on creating applications quickly. It is primarily for game development but includes APIs for interacting with enterprise servers on a basic level.

Applications have to be built on an Intel Mac OSX 10.5+ system and there is no way to manage applications on user devices once they are released in the app store. All business logic is stored in the view as JavaScript and no support for model-view-controller framework.

Verdict

Corona SDK is a framework best suited to game development. It is easy to learn but lacks the required enterprise services such as application management, and server synchronization.

Corona SDK Link

Appcelerator Titanium

With over 1.5 million active developers Titanium is the largest mobile development platform. Apps built with Titanium work on iOS, Android and desktop environments. It is well documented and has multiple prebuilt apps to begin development with.

It is designed to work with databases and create more business minded apps than corona that is designed more for game creation. The software works on both Windows and Mac, but just like corona if you want to deploy to iOS devices you need to compile the code for iOS on a mac.

Verdict

While Titanium is capable of creating more business-oriented applications then Corona it does not match Rhomobile for enterprise integration and deployment. It is the only platform that can create desktop apps along with mobile applications.

Titanium Link

Top 10 iPad apps for Business, Jan 2012

Alex Thorpe — Thu, 05 Jan 2012 08:42:07 +0000

With the new year starting I thought it would be a great time to recap the best business apps available for the Apple iPad. Each of these apps are ones I used almost daily during 2011 and will continue to use into 2012.

10. Moprise Mobile Collaboration

If you use Sharepoint to store and manage documents then Moprise is an easy choice for viewing those documents to the iPad. To set up just enter your Sharepoint URL, username and password and your done. All your documents can now be viewed, edited and updated on an iPad. The free personal version allows you to connect to 2 sites while the business addition is unlimited.

`Pros`

Easy to Set Up
Allows for downloading and updating of any document
You can configure as many sites as required

`Cons`

App crashes occasionally when working with large files
Pay version requires enterprise agreement

iTunes Link

9. Wyse PocketCloud

With Wyse PocketCloud you can have the power of your desktop on your iPad. There are many remote desktop applications but this is my favorite. Works with PC or Mac and configuration is a snap. It is the only RDP app I could get to work on a corporate computer. The free version will work for most people but pro gives you a document viewer that rocks. It lets you browse folders and files on your PC in simple and intuitive way. The multifunction pointer is a nice touch and makes it easy to scroll, right click and drag windows but it does not work for the right 2 inches of the screen because the multifunction controller is locked to the right of the pointer.

`Pros`

Works with systems behind a corporate firewall
Remote file browser
Pro version allows for multiple computers
Can connect to a Windows servers
Supports sound output to iPad from remote system

`Cons`

Frame rate too slow for gaming.
Brief delay between screen press and mouse movement
Can not use multi-function pointer when clicking on the right part of the screen

iTunes Link

8. Flipboard

View all your favorite blogs and online publications in one place with Flipboard, the social magazine for iPad. There is a content guide for browsing sources and deep integration with Facebook, Twitter and Linkedin. Create your own trade magazines from Linked in today and stay on top of your industry with this award winning App.

`Pros`

Access any site with an RSS feed
Deep integration with Facebook, Linkedin, Twitter and Tumblr
Intuitive interface

`Cons`

Does not always update feeds
Occasional crashes

iTunes Link

7. Analytics Pro for iPad

If you build it how will you know if they have come? Web stat tracking might not be glamorous but it can be quick and easy with Analytics Pro for iPad. Run custom reports and save them as pdfs to dropbox for use in reports on how your sites are doing. There is a limited free version but I would suggest spending the 6 bucks on the full version to track multiple sites and grab any metric you need.

`Pros`

Easy to define your own queries
You can export reports as PDFs

`Cons`

No guide to running complex reports
Expensive

iTunes Link

6. SG Project

A key to meeting any deadline is good project management and SG Project makes it easy. The Gnatt chart view is brilliant and provides you a snapshot of owners, percentage done, tasks, start/end dates and you can drill into any task/decision to get a detailed view. Updating, adding and deleting is a breeze, making this a good learning platform for anyone new to project management.

Full time project managers will love that Microsoft Project XML files are supported but should opt for SG Project Pro, the more expensive professional version that gives you a more feature rich home page and more advanced options such as project risks and costs. Both apps allow you to export any view or chart as a PDF and Dropbox support is coming soon according to the developers.

`Pros`

Import/Export Microsoft Project XML files
Intuitive interface, great for a person new to project management
Multiple projects support

`Cons`

Does not handle Projects with 300+ tasks well
No dropbox (cloud storage) support
Pro version is expensive

iTunes Link

5. Wolfram Alpha

Ever needed to find an answer to a random question like what is the population of Switzerland? Or how many minutes are in a year? Wolfram|Alpha is the easiest way. Wolfram|Alpha is a computational knowledge engine, not a search engine. Rather than crawl the web and give you back relevant sites like google, Wolfram|Alpha gives you back an answer to your question. For a more in-depth look visit Wolfram|Alpha. The mobile app is the same as the website, just a cleaner interface for the iPad.

`Pros`

Appears to know everything
Can handle advance mathematical equations
Makes you look really smart in meetings or class

`Cons`

Only works with computational questions
App costs 3 bucks while the web version is free

iTunes Link

4. Find My iPhone

Nothing is more frustrating than running late because you can’t find your phone. This app will show you on a map where your phone is and you can have it play a sound on your device even if it is on silent. Incase you can’t locate your phone this app also lets your remote wipe the device protecting your sensitive data.

`Pros`

Can play a continuous beeping tone on device until found
Has a map showing you where your device is
Allows you to remote wipe your device

`Cons`

Takes a while to locate phone indoors
Lost phone has to be turned on to work

iTunes Link

3. Dropbox

I have used Box.net, Sugarsync, Jungle Disk and several other cloud storage applications but the one I keep coming back to is Dropbox. You get 5gb of free storage and a desktop sync app that works on Mac or PC. Be carful with cloud storage applications because some companies have restrictions on information that is stored outside corporate control.

`Pros`

Instant access and updating of any document in dropbox folder
5gb for free with all features included
Deeply integrated into most other document/photo applications

`Cons`

Possible security issues with sensitive data
File size limit of 1gb with free version

iTunes Link

2. SimpleMind+

If your anything like me you spend a great deal of time trying to map out your ideas. Getting your websites, reports and training materials organized makes all the difference and I am finding that with Simplemind+ I am doing this step from my iPad more and pen and paper less. This is probably the simplest app on this list and that is why I love it. There is nothing to get in-between me and my ideas.

Unlike traditional pen and paper there is no limit to the size of my mind maps. I can expand/collapse subsections and re-arrange items with ease. Best of all this app is free so there is no reason not to give it a try.

`Pros`

No size limit for maps
Automatic Links and color coding

`Cons`

No image/multimedia support
Other mind mapping applications are more feature rich
No Dropbox or cloud storage support

iTunes Link

1. iMockups

I do a lot of interface design work and for quick mockups I love this app. Using the included UI tools you can build mobile, web and desktop wireframes to nail down the functionality of your app before you write a single line of code. The application interface is clean and intuitive and the app makes great use of gestures to navigate pages.

Custom tailed for iPad gestures, iMockups is the feel good tool for expressing new web ideas with simple wireframes. With the ability to generate Lorem Ipsum, easily arrange objects, create a multitude of projects with a multitude of artboards, and export your designs to your Photo Library, it’s an easy to pickup wireframing tool that is accessible to both beginners and professionals. If you want to design on the go, this is a must have application.

`Pros`

Easy to use
Interface elements for iPad, iPhone or web apps
You can link pages together and playback for clients on the fly
Can add your own images, icons

`Cons`

Limited exporting options

iTunes Link

Wrap Up

Thats it for my top ten. Stay tuned for future posts were I will be doing longer reviews that detail how I use each app and how they fit into my workflow. If you have any apps that you use at work sound off in the comments, I love to hear about new apps that can make me more effective.

Getting Started with Salesforce – Part 1

Alex Thorpe — Wed, 04 Jan 2012 07:52:52 +0000

This is part 1 of a 3 part series detailing everything you need to evaluate and setup a Salesforce.com system. Part 1 will go over what Salesforce is and how to get set up with a developers evaluation account. Part 2 will cover setting up your computer for coding with the Salesforce platform. Part 3 will cover resources where you can learn more about Salesforce, Visualforce, APEX and Force.com.

As a Information Systems Developer one of the most advantages platforms to learn is Salesforce. With over 80,000 companies and 3,000,000 users they are one of the top software companies in the world. Salesforce is a Customer Relationship Management system, if your not sure what that is or if it is something your company needs I would suggest reading What is CRM? and How to Choose CRM Software, before continuing. Moving to a CRM is a huge undertaking and not something that should be done unless you will see real benefit from the system. If you have already done the research on CRM then read on to learn more about Salesforce.

Unlike a traditional CRM system Salesforce is not hosted locally by the client. The application and all of the data are stored and maintained by Salesforce on their servers, this is what is called cloud computing. This software is never installed on a users computer, they simply need access to a web browser and an internet connection. As a developer this means you do not need to worry about maintaing testing systems or computer requirements, the user can access the platform from a Mac, PC, Linux or mobile device.

The licensing model for this kind of software is different then the traditional client based solution. Instead of paying for it up front and owning the software you pay per user per month, effectively leasing the software for as long as you wish to use it. This is called Software as a Service, or SaaS for short.

For smaller companies (100 employees or less) the SaaS model is a no brainer. The cost of a single database administrator would be more than the annual fees and you do not need to worry about trying to maintain your own hardware. For larger companies, especially ones that already have significant infrastructure the cost justifications are not as clear. With 1,000 users at $15 per user per month Salesforce becomes very expensive very fast. This is the cost before you start adding functionality the geotagging, e-mail marketing campaigns and lead processing. You will have to carefully account for all the costs included in switching over to the new system and the on going monthly fees to see if the platform would be cost effective.

Another other major problem with the cloud is data security. Your information is now stored with a 3rd party and when you delete data it is never really deleted. Often it will live on in backups on the vendors system. This can be a serious problem if you are working with highly sensitive data and something you need to consider carefully before moving to the cloud.

Before you make any business decisions you need to do an evaluation and a great way to test Salesforce is to sign up for an demo account. I would suggest skipping the free 30 day account and instead opt for the free developer account. This way you get the full enterprise edition of Salesforce for 2 users (developer and end user for example) for an unlimited amount of time, allowing you to test, evaluate and learn at your own pace.

Getting signed up is easy, just visit developer.force.com, press the sign up button in the upper righthand corner and fill out the registration form. In a few minutes you will have a Salesforce site as your own personal sandbox. The account will come preloaded with about 20 dummy contacts as well as several leads, opportunities and events. At this point I would suggest trying the site and getting familiar with the default interface. Enter some information, take notes on where you get lost and what is working/not working the way you expect. I find it invaluable to first try and figure everything out without asking for help because that is what most of your end users are going to do. This way I get a feel for where the bottle necks are and what areas are going to need the most attention.

In part 2 I will cover how to set up your local environment for developing salesforce applications and get you started on building out the Salesforce platform. If you have any questions just let me know in the comments and I will answer them the best I can.

96 Free Vector Icons for iOS, Android, Windows Phone or Web Apps

Alex Thorpe — Wed, 04 Jan 2012 01:47:38 +0000

A while ago I was working on a large mobile project for a company I was interning with and I had a very hard time finding good clean icons for the interface. With that in mind I thought it would be great for other UI designers and coders to have access to what I did not.

Download Icons

The minimalist icons are designed to look great on any background and both black and white versions are ready for use.

Included in the download are 96 png icons in sizes: 128×128, 64×64, 32×32 & 16×16. Fully editable illustrator file with all the icons is in the download. These icons are released free of charge for both commercial & personal use. No attribution is required but I a would love a link to see what you have used them for.

Download Icons

Free Professional Business Card Template

Alex Thorpe — Mon, 02 Jan 2012 20:00:11 +0000

I know how hard it can be to create a business card so I have done the hard part for you! This is a free photoshop business card template for you to download, use and change anyway you want. All layers are in folders for easy updating and color changes.

To create your own QR Code just go to QR-Code Generator and follow the instructions.

Enjoy!

Download Template