Top 5 Free and Open Source – Mobile App Makers – Native vs Hybrid


Mobile Apps

Mobile Apps

 

Mobile Application Development is booming in the Industry in a rapid pace. We all feel that we need be part of the web but that opinion is changed from Web to Mobile First.

While working on JS/HTML5 mobile apps, I have stumbled upon a huge stash of Freebies &  open source applications that gives the ease of mobile app development by just adding JS/CSS/HTML coding and in just few minutes you have your App ready to deploy.

Some of the best online app makers:
http://www.appmakr.com/
http://ibuildapp.com/
http://buildfire.com/
http://www.appypie.com/
http://www.shoutem.com/

Some Custom HyBrid Apps:
http://phonegap.com/ (Simplicity)
http://www.appcelerator.com/titanium/ (Efficiency)
http://cordova.apache.org/
http://www.sencha.com/products/touch/

Create amazing apps
The beautiful, open source front-end SDK for developing hybrid mobile apps with HTML5.
http://www.ionicframework.com/
https://www.polymer-project.org/0.5/
https://github.com/reapp by Facebook
https://software.intel.com/en-us/html5/tools

 

As you see there are many options in the market to choose from, but one question always itches my head is: “Which is the best for my product/website?” and the Million Dollar answer is very simple its hidden in your requirement, example lets take a scenario:

#1: I would like to make a simple website for Deals & Shopping (like everyone does !!) that will have a 3 folds: header – body – footer panel. The header will have my logo and a menu icon. Menu will be dynamic and change based on trending categories. Posts will be dynamic based on current trends in shopping and deals. Post will an image and summary of the post and on click provide details of the product and the vendor/shopping site to purchase from.

Solution: Create a HTML5 Mobile site using PhoneGap or Titanium Appaccelerator as the site is completely dynamic in nature and the app can be Update & release faster than  native apps.
Best bargain in Cost of Development, Cost of Release and Cost of Time – to develope the App.

But in this same scenario if you want to use the Contacts Book, GPS, FB/Twitter Direct Share, Open Products from Apps installed, Smooth UI – movement in UI element fading, show/hide etc, then I would suggest Native Apps.

How to Choose an App Maker

Let me know whats your opinion on this topic.

 

I would soon be adding another post on my experience in Native vs HyBrid Apps

 

 

Advertisements

Compress Javascript and CSS Files Using PHP


Enhance your Javascript and CSS resources:

I have been doing some web applications lately, and wanted to compress my Javascript and CSS files so that page loads are quicker and also the files are cached at all times.

So i thought to myself, that we could truncate the JS and CSS files by removing the unwanted spaces and characters.

So i began writing a script that does the following:

  1. Reads JS or CSS files(s) from a particular folder called either js or css.
  2. Removes all the unwanted characters and blank spaces.
  3. Creates a new file in a new directory called js_cache or css_cache.
  4. Wallla!! we have done it, you have successfully reduced the file file size.

The script will allow you to manage easily your Javascript and CSS resources and to reduce the amount of data transferred between the server and the client.

Performances:

We can say that the performance is better but not the best, but it works.

You would see a slight reduce in time between the server and the client.

Restrictions:

In CSS files there are no problems, but in case of Javascript there may some problems where single line comments are used like ‘// comment ‘.

Therefore always use multi line comments like /* comment */ if you want to use this script

Requirements:

  1. Create a folder for you project
  2. Dump all the js files in js folder and css files in css folder
  3. Then create two more folders js_cache and css_cache
  4. Copy and paste this script in the project directory
  5. Edit the script by changing the constant FILE_TYPE as js or css only
  6. Run the script
  7. New files will be created in js_cache and css_cache
  8. Wow, its done now use these file instead of the original one

ALL THE BEST…

HAPPY SCRIPTING…..

Do keep sharing!!!

Download file:

Compress Javascript and CSS Files Using PHP

Basic AJAX (Asynchronous JavaScript and XML)


Ajax, sometimes written as AJAX (shorthand for asynchronous JavaScript and XML), is a group of interrelated web development techniques used on the client-side to create interactive web applications or rich Internet applications.

With Ajax, web applications can retrieve data from the server asynchronously in the background without interfering with the display and behavior of the existing page.


/**
* Declare global variable....
* @param string elementName this is to identify the elemnt in which the response should be dispalyed. like as div id (required)
*/
var elementName = "";

/**
* Open a connection to the specified URL, which is
* intended to provide an XML message. The specified data
* is sent to the server as parameters. This is the same as
* calling xmlOpen(“POST”, url, toSend, responseHandler).
*
* @param string url The URL to connect to.
* @param string toSend The data to send to the server; must be URL encoded.
* @param function responseHandler The Javascript function handling server response.
* @param function elementIdentify The elemnt in which the response should be dispalyed.
*/
function xmlPost(url, toSend, responseHandler, elementIdentify)
{
elementName = elementIdentify;
xmlOpen(“POST”, url, toSend, responseHandler);
}

/**
* Open a connection to the specified URL, which is
* intended to provide an XML message. No other data is
* sent to the server. This is the same as calling
* xmlOpen(“GET”, url, null, responseHandler).
*
* @param string url The URL to connect to.
* @param function responseHandler The Javascript function handling server response.
* @param function elementIdentify The elemnt in which the response should be dispalyed.
*/
function xmlGet(url, responseHandler, elementIdentify)
{
elementName = elementIdentify;
xmlOpen(“GET”, url, null, responseHandler);
/**
* This code can be used if you need to call the required function after every interval i.e seconds..
* setTimeout(“xmlGet(‘products.php’, notesResponseHandler)”,3000);
* setTimeout(“alert(‘products.php’)”,3000);
*/
}

/**
* Open a connection to the specified URL, which is
* intended to respond with an XML message.
*
* @param string method The connection method; either “GET” or “POST”.
* @param string url The URL to connect to.
* @param string toSend The data to send to the server; must be URL encoded.
* @param function responseHandler The Javascript function handling server response.
*/
function xmlOpen(method, url, toSend, responseHandler)
{
// alert(url);
if (window.XMLHttpRequest)
{
// browser has native support for XMLHttpRequest object
req = new XMLHttpRequest();
}
else if (window.ActiveXObject)
{
// try XMLHTTP ActiveX (Internet Explorer) version
req = new ActiveXObject(“Microsoft.XMLHTTP”);
}

if(req)
{
req.onreadystatechange = responseHandler;
req.open(method, url, true);
req.setRequestHeader(“content-type”,”application/x-www-form-urlencoded”);
req.send(toSend);
}
else
{
alert(‘Your browser does not seem to support XMLHttpRequest.’);
}
}

/**
* Handler for server’s response to notes.xml request.
* Notes are pulled from notes.xml and replace the
* contents of the DIV with id ‘notesSection’.
*/
function notesResponseHandler()
{
// Make sure the request is loaded (readyState = 4)
if (req.readyState == 4)
{
// Make sure the status is “OK”
if (req.status == 200)
{
var swappableSection = document.getElementById(elementName);
var str = req.responseText;
swappableSection.innerHTML = str;
}
else
{
alert(“There was a problem retrieving the XML data:\n” +
req.statusText);
}
}
}

/**
* When a file gets included in the page….
* Call the function on load or on click….
*/
//xmlGet(‘products.php’, notesResponseHandler);
//alert(‘called’);

IE6+ window.location doesn’t work (redirect to a page)


In IE6+ window.location doesn’t work so a turn around would be changing the JS script or working with the environment and calling the JS script in a different manner.

Here how it works:-
1. First check the browser and its version.
2. Call the JS script.

Example:

var url=’https://austinnoronha.wordpress.com’;
var browser_type=navigator.appName
var browser_version=parseInt(navigator.appVersion)
if (browser_type==”Netscape”&&browser_version>=4)
{
//if NS 4+
window.location.replace(url);
}
else if (browser_type==”Microsoft Internet Explorer”&&browser_version>=4)
{
//if IE 4+
window.location.replace(url);
}
else
{
//Default goto page (NOT NS 4+ and NOT IE 4+)
window.location=url;
}