Friday, January 31, 2014

Convert your Magento Store to Mobile Store and Mobile Web Application (Magento Mobile)

Do you have a Magento store and you want to reach to maximum number customers? Then read this blog.

As we know that mobile revolution has changed the world. Number of people are using smart phones and tablets now a days for day to day work. They use mobile internet for almost everything. So your customers may browse your magento store from mobile devices and if your store is not optimized for mobile, it may not load on mobile, or have some issue. Hence users may not be able to buy products on your store and eventually you lost your customer. Now lets see in details, why you need separate mobile web app for your store.

1) Limited Screen Size

On mobile devices screen size is limited so we don't get much space like desktop computers to show data. In very small space you have to effectively show the content to user so user can easily read it and see it. Many magento stores have this issues. As the site is optimized for desktop only, so the content is not visible properly.

2) Limited BandWidth

Generally mobile networks are slow you your magento store may take time to load. As we know that for each magento page there are some CSS some JS files. There are plenty of images, banners etc. Every time when user navigate on your magento store there is considerable delay in loading resources of the page. This may slow down performance on the mobile devices. Some of the users don't like slow websites.  If we use responsive mobile theme, we can improve the layout performance but still we have delay in page refresh

3) Different Resolutions

As we know that there are mobile devices with different screen resolutions. For example iPhone has high resolution retina display. Some of the android phones also support HD graphics. While some mobiles does not support HD graphics. In this scenario your assets like images, CSS should support high resolution and normal resolution. So if you don't support high graphics, your website does not look good on high resolution devices.

So how to solve all above problems and optimize your magento store for all the mobile devices? We have a solution for that. We have built an JavaScript/HTML 5 /CSS 3 based application for magento stores. This application has following features. With our solution your magento store is easily converted to Magento Mobile Store.

1) Responsive layout to fit all the devices.
2) Support all types of touch gestures
3) Show resources based on resolution
4) Rendering engine to support landscape and portrait orientation
5) Have services to load data instead of page refreshes.
6) Supports private browsing
7) Slide navigation for menus
8) Support for local storage of data
9) Supports all types of magento products
10) Customized from same magento admin
11) Optimized for best speed and performance.
12) Rich user interface

Our solution is completely build in HTML and JavaScript. So once the application is loaded. There is no page refresh. All the navigation is local navigation. Data is coming via Ajax request with JSON format. It drastically reduces the network usage. It uses space such a way that you will see the clear information about products and content.

Don't believe it? See the difference
This is our recent implementation in one of the biggest magento store. Following is the regular desktop site in iPhone.

As you see that it looks bit cluttered in iPhone. None of the content is visible unless you zoom in. So to read the content properly, you have to zoom in and zoom out. After zoom in you have to scroll left and right to see the content properly.Now lets how our mobile web app for magento looks in mobile browser.


Pretty cool right? With our application your magento store look like mobile web application in mobile phones and users have easy to use navigation, clear content, rich media, high resolution graphics, high performance. When you implement our solution, your users will still see the desktop site when they view it on desktop browsers. But they will see above mobile app when they visit your store from mobile browser.

Want this app for your magento store? Contact me right away.

Email : hdave10@gmail.com
Skype: hiren.dave
Phone: +91-9327452580

Wednesday, January 29, 2014

Why a Restaurant Need a Mobile Website?

In this blog I am going to explain benefits of having mobile website for a restaurant.

First lets see what customers wants to see on restaurant websites.

1) Address of Restaurant
2) Phone Number
3) Location and directions with Maps
4) Menu of Restaurant
5) Amenities of Restaurant
6) Deals and Promotional Offers
7) Hours of Operation
8) Restaurant reviews
9) Reserve the table
10) Order online

Above mentioned content is essentials for restaurant to attract a customer. As most of the customer will search for a restaurant on Google or other search engines and they will get a link of website. When they visit the website they want to see all the details and make a decision to visit the restaurant. So if the details are missing customer may not visit the restaurant. Now a days most of the users use smartphones and tablets. A customer can search for the restaurant from mobile and comes to a restaurant site. Now lets see what issues customer may face if the the website is not mobile compatible.

1) They will see information in very small size that is not clear to read and see. For example see the screenshot below.

As you can see above content is hard to read unless you zoom it. Sometimes customer may not like to zoom in or zoom out. If you zoom in, you have to scroll left and right to read the content. Some customer may not like it.

2) They can not see the phone number and dial it directly from the site. This is not good as user may have to remember the phone number and dial it. Instead of this it will be good if user can click on phone number on site and it dials itself.

3) Many restaurant websites are build in flash for having nice animations and good looking content but this may not work on all the mobile devices so customer can not see the site.

4) There is no way to order food online on website. Some customer may want to carry out food from restaurant but they don't want to wait. If restaurant website does not allow online ordering, customer have to come to restaurant, order a food and wait till it gets complete. Instead of this if there is a facility to submit order, they can place the order and come at their connivence so they don't have to wait.

So in short an restaurant now a days need a mobile website with features like online ordering, booking a table, view menu, location maps etc. If a restaurant does not have it, they may be loosing the potential customers.

Contact me if you want to have a mobile websites for a restaurant with all the features. This will surely help to increase your business.

Email : hdave10@gmail.com
Skype: hiren.dave
Phone: +91-9327452580

Monday, January 6, 2014

Introduction to JavaScript Series Part-3

Before going through this blog please check Part-2.

Control Structure in JavaScript

if else  

It is used to evaluate condition and execute statements based in evaluation.

if(condition){
//statements
}else if(condition){
//statements
}else{
//statements
}

Turnery operator

Turnery operator is same as if else statement. It evaluates the expression and executes one of the statements.

var result = (condition)? Statements: Alternatives;

var result = (true)? alert(‘True’): alert(‘False’);
Here both statements and alternatives should be specified. Above code will show True in alert.

Switch Statement
Switch Statement is used to evaluate condition and execute more than one cases based on it.

switch(condition){
case firstvalue: break;
case secondvalue: break;
case thirdvalue: break;
default: break;
}

break statement is optional but it's necessary to stop execution of next cases. default is optional, but generally it is use to manage default case. String literals can be used instead of values.

For Loop

For loop is used to execute statements more than till particular condition is matched.

for(initialization; condition ; increment) {
//statements
}

For In loop

Generally for in loop is used to iterate through all the properties of object or all the indices of an array.

for( var property in object){
//statements
}

While loop

While loop is used to execute statements more than once based on certain condition. Unlike for loop there is no increment in while loop.

while(condition){
//statements
}

Do While loop

Do while loop is same as while loop. Only difference is, statements inside loop will be executed at least once.
do{
//statements
}while(condition)

How to use JavaScript

JavaScript can be inserted in any html page with Script tag in head section

<head>
<script type=”text/javascript” language=”JavaScript”>
//JavaScript statements.
</script>
</head>

Also JavaScript can be placed in external file with .js extension and can be referenced in head section.
<head>
<script src=”myfile.js” language=”JavaScript” />
</head>
Also JavaScript can be placed in external file with .js extension and can be referenced in head section.

Saturday, January 4, 2014

Introduction to JavaScript Series Part-2

Before going through this blog please check Part 1.

Primitive Data Types of JavaScript

Numbers

JavaScript as a single number type and it is represented internally as 64 bit floating point. Following are valid numbers in JavaScript.

var a =1; //Integer
var a=1.23; //Float
var a = 0111; //Octal, actual value is 73
var a = 0xFF; //Hexadecimal, actual value is 255

Number constructor can be used for numeric conversion.

var a = '11.11';
var b= Number(a);

Strings

In JavaScript string literal can be wrapped in single quote or double quote. It can contain any number of digits or characters. Backslash (\) is used as escape character.

var s = 'this is string';
var s = 'This is Tom\'s house'; //use of backslash to escape single //quote.
Strings can be compared with == operator and it returns true if string content and all the character cases match.

Boolean

Boolean variables can be defined true or false literals.

var a = true;

Arrays in JavaScript

Array object is used to store multiple values indexed by integer keys in a single variable.
var arr = []; //defines an empty array

var arr = [1,2,3,4]; //defines an array with four elements.

Values inside an array can be accessed using index.

var arr = [1,2,3,4];
var b= arr[0];
Here variable b will have value 1. Array constructor can also be used to declare an array.

var arr = new Array(10); //defines array with 10 elements.
length property can be used to know number of elements in an array.

var arr = [1,2,3,4,5];
var b=arr.length;

push method can be used to add an element in an array. push method will insert element at next empty index.

var arr = [];
arr.push(1);
sort method can be used to sort an array. Default sort order is alphabetic and ascending.

var arr = [];
arr.sort();
pop method can be used to remove last element from an array.

var arr = [1,2,3,4,5];
arr.pop();
reverse method can be used to reverse order of elements in an array.

var arr = [1,2,3,4,5];
arr.reverse(); //Now arr elements will be [5,4,3,2,1]
JavaScript also supports an associative array. An associative array is set of key value pairs. Values are stored in association with a key and when we provide a key, array will return its associative value.

var arr = {key1: 'value1',key2: 'value2'};
var a = arr['key1']; //variable a has value 'value1'

Functions in JavaScript

Functions contain set of reusable statements. Every function in JavaScript is instance of Native Function object of JavaScript. Function can be defined using function literal.

function add(a,b){
var c= a + b;
return c;
}
Also we can define a variable as a function.

var add = function(a,b){
var c= a + b;
return c;
}
Function can be invoked by name of the function and passing necessary arguments to it. 

add(1,2);

A function which returns value can be assigned to any variable.

var c = add(1,2); 

Objects in JavaScript

In JavaScript string, number, Boolean, null and undefined are primitive data types. All other values are objects. Class definition is not required to create objects in JavaScript. JavaScript objects are mutable keyed collection. JavaScript object contains methods and properties. Property is key value pair and methods are instance of Function object. Generally objects are used to store and organize data. Objects can contain other objects, to represent tree structure. Object literal can be specified by pair of curly braces with zero or more than one properties or methods. Objects are always passed by reference.

var obj = {}; //represent an empty object.

var obj = {
name: 'John Smith',
phone: '123456789'
}; //represent object with two properties.

Specific property value can be accessed by using name of property.

var name = obj.name; //name will have value 'John Smith'

Any attempt of accessing non existing member will return value undefined.

var email = obj.email; //email will have value undefiend.

Member can also be accessed in associative array style.

var phone = obj['phone']; //phone will have value 123456789

Any member value can be updated by assigning new value to it.

obj.name = 'Mark Smith';
obj['name'] = 'Mark Smith';

Any member of object can be deleted using delete statement.

delete obj.name;

typeof operator can be used to determine type of object property.

alert(typeof obj.name); //will alert string.

JavaScript supports inheritance by prototype model.

var base = function() {
this.baseproperty = 'Base Property';
this.overridefunction = function(){
alert('base function');
}

}
var derived = function(){
this. overridefunction = function(){
alert('derived function');
}
}

var b = new base();
derived.prototype =  b;

var d= new derived();

d.overridefunction(); // shows alert ' derived function '
var property = d. baseproperty; //stores value 'Base Property' in variable

Also a new member can be added in object as follow.

Base.prototype.myMethod = function(){
}

Friday, January 3, 2014

Introduction to JavaScript Series Part-1

In this series I am going to explain JavaScript. This series will be good for beginners who want to learn about JavaScript.

JavaScript - Birth

JavaScript was originally invented at Netscape. They introduced it as a light weight scripting language to interact with web pages and providing dynamic content to web pages. Original name of the language developed by Netscape was Livescript but later it was changed to JavaScript when Netscape added support for Java in their Netscape Navigator web browser. After its introduction, JavaScript was quickly adopted as client side scripting language for web pages. Later Microsoft introduced JavaScript support to its web browser. Soon after releasing JavaScript as a client side script language Netscape introduced it as a server side scripting language. Today JavaScript is the most popular programming language among the web developers. JavaScript standards are defined by ECMA script.

Introduction to JavaScript

As the name suggest JavaScript is not a programming language but it's a scripting language. However it's C like syntax makes it look like a traditional procedural language. JavaScript supports functions, dynamic objects, loosely typed variables, associative arrays, regular expressions, prototype inheritance and DOM support.  With features like this one can hardly call it “Just a Scripting Language”.
JavaScript is object oriented language. But here objects are dynamic. You can create objects at run time and add properties and methods to it. Also you can remove properties and methods from object at run time. This makes JavaScript objects completely dynamic in nature. In traditional object oriented programming language, classes are defined and objects are created from template of the class. JavaScript allows you to create object directly without a class. Objects can be created simply by adding their components like properties and methods. JavaScript is also a prototype based language. New objects can be created from existing objects.  JavaScript implements prototype inheritance in slightly different manner and this is the point where most of the programmers fail to understand object orientation in JavaScript.

JavaScript Syntax

Like other languages, JavaScript also have syntax that makes it completely structured language. JavaScript is case sensitive language.

Whitespaces

Whitespaces are generally referred to tabs, spaces and newlines used outside the string constant. In JavaScript whitespaces are normally used to separate tokens.

var foo = 'Hello World';
Here spaces between var and foo can’t be removed. Other spaces like space between foo and = and space between = and ‘Hello World’ can be removed. JavaScript uses semicolons as statement terminators. That is optional. If you don't insert semicolon but add new line between statements and if those statements are well formed, there will not be any error.

a = b + c
(d*e)

These statements are parsed as

a = b+c(d*e)
But only well formatted statements are parsed. So for a good practice it's recommended to use semicolon as statement terminators.

Comments

JavaScript support single line and multi-line comments.

//This is single line comment
/*This is
multi-line comment*/

Variables

Variables are declared with a var statement. In JavaScript variables does not have type attached to it so any value can be stored in variables.  Variable name must start with a letter or underscore (_) followed by any number of letters and digits. As mentioned earlier, JavaScript is a case sensitive language so var a and var A both are different variables. Variables name should not be one of the reserved keywords of JavaScript. Like other languages JavaScript variables also have scope.

var a=1;
function test(){
var b =2;
var c = a+b;
}
Scope of b variable inside a function is limited to its body while variable a declared outside the function has a global scope and it also can be accessed in a function.

Any uninitialized variable will have undefined value.

var a; //undefined
Null is used to define a variable with empty value.

var a = null;
Here undefined and null are primitive data types of JavaScript.

JavaScript Operators

JavaScript has set of arithmetic operators, assignment operators, conditional operators. Following are arithmetic operators.

  • + Used for adding  two numbers or to concat  two strings
  • - Used for subtraction of two numbers. 
  • * Used for multiplication of  two numbers
  • / Used for divison of two numbers
  • % Used for getting reminder of divison
  • ++ Used to increment variable value by 1
  • -- Used to decrement variable value by 1

Following are conditional operators.

  • == Equal to .Used to compare two values
  • === Used to compare two values and types
  • != Not equal to. 
  • !== Not equal value and type.
  • > Greater than
  • >= Greater than or equal to 
  • < Less than
  • <= Less than or equal to

Thursday, January 2, 2014

Cordova Android Application in Play Store, Does Not Support Tablet

Hello,

Wish you all a very Happy New Year, This is my first blog of 2014.

Recently we faced a strange issue with our Corodva Application. We built Sencha Touch application and used Cordova as native wrapper. When we uploaded APK to Google Play store, there was a notification that, application does not support tablets.

We were not sure what could be the issue, as we did not specify anything like this in application. First we thought it's a issue related to layouts, as some tablets may have high definition resolution. So we added all the layout files like ldpi, mdpi, hdpi and xhdpi. But still issue was the same. Later on we figured out that, this issue was actually related to permissions mentioned in Android manifest file. Normally when we create phoengap application for android, we specify following permissions.

<supports-screens android:largeScreens="true" android:normalScreens="true" android:smallScreens="true" android:resizeable="true" android:anyDensity="true" />
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.VIBRATE" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" />
<uses-permission android:name="android.permission.READ_PHONE_STATE" />
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.RECEIVE_SMS" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
<uses-permission android:name="android.permission.READ_CONTACTS" />
<uses-permission android:name="android.permission.WRITE_CONTACTS" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /> <uses-permission android:name="android.permission.GET_ACCOUNTS" />
<uses-permission android:name="android.permission.BROADCAST_STICKY" />

If you see the above permission, we specified permission like RECEIVE_SMS, WRITE_EXTERNAL_STORAGE, RECORD_AUDIO etc. IT may be possible that the tablet only allows Wifi connection and it does not have any sim card or external storage so it may not receive the SMS or record audio or write to external storage. But we requested the permission in manifest file and which was not possible to grant so the application can not work on tablets.

If you face the same issue try and remove the permissions which are not necessary and may not be available in some tablets. After removing permissions, upload APK to Play store and it will work.

Hope this helps you.