What are QR Codes?

QR is an abbreviation of Quick Response.
QR is a two-dimensional bar code which presents information as a series of squares within squares and they are machine readable. They can contain alphanumeric text and are often used to identify and feature URLs that direct users to sites where they can learn about a product, a place or an object. They can be quickly read by mobile phones. This is also commonly known as “mobile tagging”.

Typically, barcodes are used to distinguish between products. Every product that you purchase has its own unique barcode. When you buy a can of coke, just turn it around and you will notice a series of vertical black and white lines. These lines are called barcodes. These barcodes can be found on any product that you buy, as they help in identifying and differentiating products. Similar to these barcodes, QR codes work in a similar fashion. Many modern cell phones can easily scan these QR codes thus enabling you to receive the info in your mobile phones.

So what makes QR Codes different from a regular barcode?

1. A barcode can encode the data horizontally. That is why you see vertical lines on the barcode of products like soft drink cans, tooth pastes, etc. as the scanners read the width and distance between these vertical lines. Unlike a regular barcode, QR code can encode the data, both horizontally and vertically in the form of a grid, built of tiny squares. This helps to add more data in a smaller region.

2. It is absolutely necessary that the barcodes to be aligned properly (mostly vertically) to be read properly by a scanner, whereas QR codes can be read and intercepted from any angle.

3. Barcodes are merely used to identify products and can be used only to provide static information about the product, prices, etc. They cannot trigger an action on their own. On the other hand, QR codes can trigger actions like downloading a file, launching a website, etc. thus adding more options and flexibility.

Why are QR Codes used?

QR Codes can be used to provide tracking information for routing data on a mailing label, contact information on a business card, products in industry, etc. They are also used to grab information from transient media (such as online ads, etc.), store and digitally present this info (can include text, URL, geo coordinates, etc.) and save/upload this information to your cell phone.

Once this information is available in your cell phone, it may provide you with more details about the product/entity that the QR code corresponds to, thus possibly allowing users to search for nearby locations, show website URL, provide contact information, etc. All of this really adds to our convenience and flexibility of providing and accessing information.

QR codes are commonly used in Websites, advertisements, magazine advertisements, on a billboard, a person’s T-shirt, etc.

How are QR Codes used?

QR codes can be scanned and intercepted by modern day mobile phones. If you have a modern day Smartphone, chances are high that it can scan and store this QR code. Contact your cell phone manufacturer or refer to your user manual to find out if this feature is available in your cell phone. If it is, then you can simply run supplied software/take a snapshot with the inbuilt camera.

The decoding software built into the mobile phones will take care of interpreting the code, once it is saved into your mobile. If you do not have a decoding software installed, then you may download one for free from Kaywa or QuickMarks. You may then share this info with others by means of Bluetooth, etc.

That’s it for now!

Do you know anything else about that you would like to share with us? Please feel free to do so by commenting below.

What is WordPress?

WordPress is an open-source, free, web-based software that anyone can use to build and maintain a blog. Of late, WordPress is also used to build and maintain websites. And because WordPress is open source, it now serves more than just a website or a blog. It is also being used as a “Content Management System” (CMS), thereby enabling full-sized, social media-rich business websites to be built and maintained with relative ease.

Why WordPress is used?

Some of the most general reasons are listed below:

• WordPress was originally intended to be a blogging tool and it later evolved to be a lot more than just a blogging platform. The ability to blog lets you write individual articles on any topic of your choice and exchange views from your visitors in the form of comments. Visitors can also subscribe to your site content using RSS, without having to visit your blog for every article, thereby improving your reader base.
• WordPress offers several Search Engine Optimization (SEO) techniques that the search engines love to respond to. Hence it offers a very good opportunity to grow your website’s reach thereby giving you an excellent opportunity to expand your visitor and customer base.
• It’s very easy to change the look and feel of your WordPress blog/website, without having to write even a single line of code yourself. The WordPress designs are based on “Themes”. These themes are nothing but a collection of webpage layout, CSS and images that let you customize the look and feel of a WordPress site. These page layouts can be created using software such Adobe Fireworks, Adobe Photoshop, etc.
• WordPress offers “User Management” feature. You can also have others manage your WordPress website for you by assigning them roles and thus, have them add articles, moderate comments and much more. The basic requirement to be able to carry out such tasks is to have an Internet connection and access to the WordPress website, hence it makes it very easy for the WordPress website owner to maintain it personally or have it done by others.
• Let’s you expand the standard functionality of WordPress by allowing you to install “Plugins”. The functionality of the plugins can include addition of contact form, shopping cart, e-commerce facilities and a lot more.

How to use WordPress?

I have written a full-fledged article that explains how to use WordPress with examples. Feel free to check it out here.

If you would like to own a WordPress website and would like us to help you with it, feel free to contact us and we will build a custom WordPress theme that will fit your requirement.

What is jQuery AJAX?

Before we start with the definitions and other good stuff, let’s take a quick look at what jQuery & AJAX stands for.

jQuery – It is a JavaScript framework that helps speed up web development by providing code for most commonly used actions, such as animation, display/hide elements on web page,  etc.

AJAX – It stands for Asynchronous JavaScript and XML. “Asynchronous” means an action occurring on the page, after it’s loaded.

Why to use AJAX in jQuery?

Why to primarily use AJAX?

In general sense, when a page is loaded by a web browser, the content remains the same until the user leaves the page or up until he presses the submit button. When AJAX is used, the JavaScript requests new content from the server and makes changes to the current page and displays the new information dynamically. All of this happens within the already loaded page, without having to refresh, submit or redirecting it.

So in short, AJAX is used to load data in the background and display it on the webpage, without reloading the whole page.

Popular examples of applications using AJAX:
Gmail, Twitter Tweets, Facebook Like button, Youtube videos, Google Maps, etc.

So really, why should you use AJAX in jQuery?

Using AJAX with jQuery can be a great combination for immensely speeding up the process of web development. Once AJAX is implement, most of the process will be transparent to the user as processing takes place in the background and users will be able to take advantage of the facilities offered, without having to spend more time on page reload, refresh or redirection. So altogether, it will provide rich user experience and save time to your users.

Secondly, writing regular AJAX code can be a bit tricky and could get out of control at times. This is because different browsers have different syntax for AJAX implementation.So this means that its highly likely that you will end up writing extra code to test for different browsers and eventually end up spending more time. So to avoid this and to make sure that the same code works uniformly across different browsers, jQuery takes care of this automatically and lets us write AJAX functionality with only one single line of code and this code will work evenly across different browsers.

How to use AJAX in jQuery?

jQuery provides several methods for AJAX functionality. Using the different AJAX methods, you can request text, HTML, XML, or JSON from a remote server using both HTTP Get and HTTP Post. You can also load external data directly into the selected HTML elements of your web page & show animations in the process to keep the user interested. So before we start diving deep into AJAX, let’s look at the most important requirement. It is to add the jQuery library to your page. Without it, the AJAX functionality won’t work.

Add jQuery to web page:

<script type="text/javascript" src="js/jquery_1.7.1_min.js"></script>

In the above code src points to the physical location of the jQuery core file. I am using a minified version of the jQuery core library and it’s located in the js folder. This js folder is in turn, located in the root directory of my website. Just update the source and add the above code just above the </head> tag in your web page and make sure that you download and place the jQuery core file in the js folder. If you would like this to be take care of automatically i.e. if you would like to always include latest version of jQuery automatically in your web page, then click here.

So now let’s look at the basic syntax of using AJAX in jQuery:

$.ajax();

Are you surprised? Yes, that’s it for the basic syntax. There are others things that go into it, such as declaration of events, etc. We will be discussing them later in this article. You may have even seen something like this:

$.ajax({ });

Or like this

$.ajax({

});

The above code means that you can split the code as shown and this will have the same effect as the code shown previously. So what would go within the curly braces? Well, that’s the place where you enter the “settings”.  Here is a general representation:

$.ajax({
settings,
events
});

The settings and events are optional. Here’s a much better example:

$.ajax({
cache: false,
type: "POST",
url: "target_url.php",
data: "country=USA&state=Texas",
success: function(response)
{
alert( "Response received: " + response);
}
});

There are some key points to understand in the above code. Here they are:

cache, type, url, data are individual settings.

cache – If the application is static, then cache can be used to cache AJAX calls to speed up the app. But if the data being dealt with is dynamic & can change, then it’s better to use cache value as false to prevent caching, thereby requesting the accurate results via the calls.

type – It indicates the type of request that is being sent i.e. whether if it is $_POST or $_GET or $_REQUEST. The most common forms are $_POST or $_GET.

url – It is the the server side processing target file that handles the incoming data, processes it & sends output based on the processing done or as per the coding. It this target file does not exist, then the page will simply not show any response other than 404 & that too in the debugging mode.

data – This is the actual data that is being sent to the target url to process. Here Country name & State name are passed for the sake of the example.

success – This is an event. This event, as it’s name suggests, occurs only when the response from the target URL is successfully received without any errors. There are other events such as error, complete that occur upon receiving an error or when the ajax operation is complete.

So this would be your starting point for ajax development understanding  and in understanding how jQuery html ajax php etc. can be used together to make a static/dynamic AJAX application. If you want to learn AJAX in much more detail, then remember to bookmark our blog and keep visiting it often for updates. You may also opt to subscribe for our emails so that you don’t miss our next tutorial on AJAX in jQuery.

Your Turn!

Do you know like this article on ajax Query? Feel free to share your thoughts by commenting below.

WordPress Login: How to login into WordPress for Admin / Users

After you have installed your WordPress blog or after it has been setup by your web host/developer, you will need to login into your WordPress Admininstration area (also commonly known as Admin Panel). So you may login as the site Admin or as a user. The login URL is same for both Admin & a general user. You can also create other profiles for other users & have them login into the website using the same URL. So from within this Admin Panel, you can write Articles, Posts, Manage plugins, Themes, etc. To login to WordPress admin panel, simply type your website URL in your web browser, followed by wp-admin/. An example is as follows:

http://www.mydomainname.com/wp-admin/

where mydomainname.com is your website domain name

Once you arrive on the page, you would be greeted with a login page such as this:

WordPress Login: How to login into WordPress website as Admin / User

Once you arrive see the box as shown above, simply enter your username, password & hit the Log in button. If you have successfully authenticated yourself, you will see your Dashboard.

• If you would like to know more about What is WordPress? Why WordPress is used? How to use WordPress?
• If you would like to go through the WordPress tutorial to get you started with it, feel free to read my article on How to WordPress (screenshots included)

Simple, isn’t it?

What do you think of this short WordPress login tutorial? Did you find it easy to follow? Feel free to leave your comments below.

Examples of Rollover Effects using jQuery

Before we move on with the examples, here’s the basic syntax for rollovers using jQuery. You can apply the same principle to achieve rollovers for any html elements.

Basic Syntax for jQuery Rollover using Element’s ID

$("#element_id").on('hover', function(e) {
//do this
});

Basic Syntax for jQuery Rollover using Element’s class

$(".element_class").on('hover', function(e) {
//do this
});

Back to jQuery Rollovers Examples

Let’s assume that we have some html elements in our web page. Let’s look at some rollover examples for these elements. Here’s the full HTML source code. jQuery code for the rollovers will be provided as we go along.

Example 1: Rollover Effect using .slideToggle() method in jQuery

Toggle a Div when you rollover a hyperlink or when it is hovered upon. The hyperlink has a class of “link”. This has a rollover effect of “slow”. You can also use “fast” to speed up the toggle.

$(document).ready(function() {

$("a.link").on('hover', function(e) {
$('#my_div').slideToggle('slow');
});

});

Example 2: Rollover effect using .hide() in jQuery

Assuming that you have a div with ID “my_div”, you want to hide this Div from display when you rollover a hyperlink with class “link”.

$(document).ready(function() {

$("a.link").on('hover', function(e) {
$('#my_div').hide();
});

});

Example 3: Rollover effect using .show() in jQuery

If you have followed the Example 2 above, you will notice that when you rollover hyperlink, it hides the div. Now if you want to show that div, you can use the following jQuery code:

$(document).ready(function() {

$("a.link").on('hover', function(e) {
$('#my_div').show();
});

});

Example 4: Image Rollover effect using jQuery (You must check it out!)

Here is a jQuery Image Rollover effect with example

Example 5: Multiple Rollover effects combined into a single effect using jQuery

Let’s say that we have an input box inside a div. This div has ID “my_div”. When the page loads, we want to hide this input & show it when we rollover the div. Here’s the HTML source code:

<div id="my_div" class="my_class" title="My Div title">This is my div.
<input type="text" name="name" id="name">
</div>

Rollover Div to show input element using jQuery

$(document).ready(function() {

$('#name').hide();

$("#my_div").on('hover', function(e) {
$('#name').show();
});

});

Rollover Div to show hide the input element shown in the above process using jQuery

$("#my_div").mouseleave(function(e) {
$('#name').hide();
});

So the combined code for Rollover Div to show and hide the input element using jQuery is:

$(document).ready(function() {

$('#name').hide();

$("#my_div").on('hover', function(e) {
$('#name').show();
});

$("#my_div").mouseleave(function(e) {
$('#name').hide();
});

});

Now you might ask a question. Why use mouseleave instead of mouseout! Yes, there is a MouseOut event as well that you can use. But in our case, its not useful. Why? Well, for the scenario mentioned, here’s the main difference between mouseleave() and mouseout() in jQuery:

MouseOut():

When a child element of an element receives focus and we are performing an action on this child element, MouseOut() does not support it. That means when the mouse focus shifts from the parent element to the child element, it acts if the parent element has lost focus, even though you have a child element inside this parent element and the you have a mouseover this child element.

MouseLeave();

When we have a child element inside a parent element and we shift the mouse focus from the parent element to the child element, then the focus state of the parent element is considered to be existing unlike MouseOut() that loses focus. In other words, if you have a parent element and you hover the mouse on this, the hover event is triggered and maintained. When you hover over a child element of this parent element, the hover event that was just triggered, is remembered and retained.

So if you do use mouseout in our example instead of mouseleave and try out the code, you will notice that when you hover over the div, the input box will show up. But as soon as you hover over the input box and try to click in it to enter something, the input box disappears. And if you do use mouseleave, you will see that when you hover over “my_div”, it will show the input box and when you hover over the input box, this input box will remain in place and you will be able to click in it & enter something. This input box will remain in view as long as you hover over the parent element or the child element or both. Whereas when you use MouseOut(), the input box will remain in view if and only if the parent div is hovered over at all times.

Hope the above comparison helps you in understanding the difference between mouseleave vs mouseout in jQuery.

That’s it for now!

Do you know of any other ways to make rollover effects in jQuery? Feel free to suggest by commenting below.

What is jQuery Mobile?

jQuery Mobile is a JavaScript framework developed by the jQuery team in order to ease up and enhance the development of mobile web applications. This is done with the aid of integration of jQuery, jQuery UI, HTML5 and CSS3 into the framework. This helps keep the framework and the code, clean and organized.

Why jQuery Mobile?

Here are some of the top reasons why jQuery Mobile is used:

• jQuery Mobile is built on top of jQuery core. Hence the learning curve is very minimal for people who are already familiar with jQuery syntax.
• jQuery uses minimal scripting for  laying out pages in HTML5 and CSS3.
• jQuery Mobile allows to create themes with relative ease.
• The code is very scalable and robust thereby automatically scale to any screen.
• Its Progressive enhancement approach brings core content and functionality to all mobile, tablet and desktop platforms and a rich, installed application-like experience on newer mobile platforms.
• jQuery Mobile boasts of ajax-powered navigation thereby decreasing the amount of time one may need to browse the website.
• jQuery Mobile’s API supports Touch events, Mouse events usually associated with jQuery, making it completely cross-browser and platform compatible.
• jQuery Mobile provides animated page transitions for slick transitions and effects that are pleasing to the eye.
• jQuery Mobile is lightweight, uses minimal image dependencies and hence it is very fast.
• Built in controls are themable by the built in UI and the Touch Optimized interface is completely supported by the UI.
• jQuery Themeroller can be used to build custom widget designs.
• jQuery Mobile is compatible with all major mobile platforms as well as all major desktop browsers, including iPhone, iOS, Android, Blackberry, Palm, Symbian, Windows Mobile, Opera Mobile/Mini, Firefox Mobile and all modern desktop browsers, etc.

How to use jQuery Mobile?

What is PHP?

PHP stands for PHP: Hypertext Preprocessor.

PHP is a free, open source server scripting language (similar to ASP, .NET, etc). Unlike HTML, PHP scripts are executed on the server and the final output is displayed on the browser in HTML format. In general, PHP files have the extension “.php”,  “.php3”, or “.phtml”.

Why PHP is used?

PHP especially used in web development. The additional feature of PHP is that it can be embedded into HTML. PHP is very to use and supports many databases  such as MySQL, Oracle, Sybase, PostgreSQL, etc., thus making it very robust and efficient. It is also compatible with many servers such as Apache, IIS, etc, thus making it the most widely used server side scripting language.

How to use PHP?

In order to use PHP, you can follow any of the following 2 ways:

• Install Apache (or IIS) on your own server and install PHP.
• Buy a web hosting plan with PHP support.

Download PHP for free:
http://www.php.net/downloads.php

Download Apache for free:
http://httpd.apache.org/download.cgi

I personally use PHP with MySQL database, so you may download MySQL for free:
http://www.mysql.com/downloads/

Some common applications of PHP are to:

• Connect databases like MySQL to the Web to store & retrieve data.
• Conduct online surveys.
• Create graphics dynamically as required.
• Process online payments and develop E-Commerce websites.
• Serve different content to users based on their IP address, browser, date and time, or numerous other chacteristics.
• Read and process XML.
• Send mail.
• Communicate with other web sites.

That’s it for now!

Example of Image Roll Over Effect Using jQuery

Let’s look at the demo first:

Before Rollover:

After Rollover:

For the sake of example, let’s assume that you have a main “container” div that contains both the images i.e the image that needs to be shown by default and the roll over image as well.

Example: Here is the complete source code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery Image Rollover</title>
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<style type="text/css">
.container {
width: 300px;
}
</style>
</head>

<body>

<div class="container">
<img src="1.jpg" width="300" height="300" class="img_default">
<img src="2.jpg" width="300" height="300" class="img_rollover">
</div>

<script type="text/javascript" language="javascript" >
$(document).ready(function(){

$('.img_rollover', $(this)).hide();

$('.container').hover(
function() {
$('.img_default', $(this)).hide();
$('.img_rollover', $(this)).show();
},
function() {
$('.img_default', $(this)).show();
$('.img_rollover', $(this)).hide();
}
);

});
</script>
</body>
</html>

Simple, isn’t it?

Do you know of any other ways to make Image rollover effect using jQuery? Feel free to suggest by commenting below.

P.S:  If you would like to find out how to achieve Image Rollover effect using CSS, then read my article on CSS Image Rollover with Example

If you do not know what CSS is, then I suggest you read my article on CSS.

What is CSS3?

CSS3 is an extended or enhanced version of CSS2 (the current version) and it is the latest standard used in defining the styles for the different elements of a web page and even more. This includes animating the elements of a web page, applying different effects such as gradients, shadows and many more. CSS3 is backward compatible. This means that your existing CSS2 styles will remain the same and can be used as is, without any changes.

Basically, CSS3 is split up into “modules” to enhance the web page. Some of the most important CSS3 modules are:

• Animations
• Backgrounds and Borders
• Selectors
• Box Model
• 2D/3D Transformations
• Text Effects
• User Interface
• Multiple Column Layout

Why CSS3 is used?

The features, convenience & ease of usage provided by CSS3 are the main advantages. It lets you make the elements of a web page more dynamic, add life with a decorative touch. For example, before CSS3 to create rounded corners it was mandatory to make use of images and then write more code, both in CSS and HTML to align them as needed. But with introduction of CSS3, it is just a matter of 1-3 lines of code to provide rounded corners without ever using images! Hope this gives you an idea of the raw power of CSS3.

The scope of CSS3 is not limited to just rounded corners. Many other features such as animations, drop shadows, bevel effects, multiple background, gradients, opacity, embedding custom web fonts, etc. are introduced that remove the need to use another piece of software to achieve the same effect. These features can now be achieved by writing very simple and small code in CSS3!

All these features combined,  make the web page and its content load faster and accurate. Because CSS loads simultaneously with page loading as it is embedded in the web page, there wont be any additional time consumption. For example, without CSS3, to give a rounded corners to a div, images are used. Individual images or sprites could be used for the rounded corners. This means that at the minimum, at least 1 images must be used and can go up to 4 images, depending upon the method chosen to implement these rounded corners. But with CSS3, just 1 line of CSS3 code is enough. To extend this behavior to support other browsers couple of additional lines will be needed. So all in all, CSS3 is a huge time saver and helps load web page faster.

How to use CSS3?

There is no change in how you write CSS. The syntax and rule are same. Only declarations will vary.

Here are new CSS3 tricks and their effects:

Rounded Corners to a div:

div
{
border: 2px solid red;
border-radius: 10px;
-moz-border-radius: 10px;
}

Box Shadow:

div
{
box-shadow: 5px 5px 2px #333;
}

Stretch background image to fill content area:

div
{
background:url(img_flwr.gif);
-moz-background-size:100% 100%; /* Firefox 3.6 */
background-size:100% 100%;
background-repeat:no-repeat;
}

Multiple background images for a div:

body
{
background-image:url(img_1.jpg), url(img_2.png);
}

Shadow Effect to text:

h1
{
text-shadow: 5px 5px 5px #FF0000;
}

Word Wrap:

p
{
word-wrap: break-word;
}

Embedding Custom Font:

@font-face
{
font-family: MyCustomFont;
src: url('Some_Custom_font.ttf'),
url('Some_Custom_font.eot');
}

h1
{
font-family: MyCustomFont;
}

The above are some of the common and most used effects. There are many other new features and tricks that can be done using CSS3. This will be the scope of another article, on another day.

That’s it!

Hope this article was able to explain to you what is CSS3 and why CSS3 is used and how to use CSS3. Do you know of any other CSS3 effects that you would like to share? Please feel free to do so by commenting below.

What is CSS?

CSS is the abbreviation for Cascading Style Sheets.

It is a file that is included along with a web page to control it’s appearance. In olden days, the styles of an element were defined inline, i.e. whether a heading should appear as bold or if a certain piece of text should appear in red color, etc. The styles let you define how to display HTML elements.

Why CSS is used?

The biggest advantage is that using Style Sheets can save a lot of time needed to maintain the styles of each and every element.  The styles give an excellent control over the appearance of different elements that make up the web page. So whether you want to change the text color or how a form button looks or as a matter of fact, the look of any element of a web page, they can be changed very easily from a centralized location and that is nothing but CSS.

How to use CSS?

Although the styles of an element can be specified within the web page directly inline or within the head section of a web page, it is best to include the styles in an external file and this file is the CSS. A CSS rule basically consists of two main parts. One is Selector and the other is a Declaration. There could be a single or multiple Declarations for each rule.

Selector: Selector refers to the HTML element that needs to be styled. For example: h1, p, div, etc. There are two types of selectors. ID and Class.

Declaration: A declaration consists of a Property and its corresponding value. They are enclosed in curly braces. Multiple declarations are separated with semi-colons.

Property: The property is the style attribute you want to change.

Value: The value can be a numeric value (example: 12 px) or a textual value (example: underline)

Example:

div
{
align: center;
color: black;
}

In the above example, “div” is selector. “align” and “color” are the properties of “div”. “center” and “black” are the corresponding values of the properties. The above method is the most general way of writing CSS for readability purposes. All the code can also be written on a single line (but generally avoided for readability purposes), like this:

div { align: center; color: black; }

ID Selector:

For example:

#my_div { align: center; }

Class Selector:

For example:

.my_div { align: center; }

There are basically 3 ways to insert CSS in a webpage.

1. Inline
2. Internal Style Sheet
3. External Style Sheet

Inline:

Example:  

.my_div { align: center; }
<div style="color: #000;  padding-right: 10px">Some content.</p>

Internal:

Example:  

<head>
<style type="text/css">
div  { color: black; }
h1 { margin-bottom: 10px; }
</style>
</head>

External Style Sheet:

Example:  

<head>
<link rel="stylesheet" type="text/css" href="my_styles.css" />
</head>

Hope this article helped you get in touch with what css is and why css is used. Different ways of how to use CSS are also discussed. So make sure you follow the recommended approach.