Browsed by
Category: Web Technology

Web Beacons or Web Bug : What are they ?

Web Beacons or Web Bug : What are they ?

A web bug/beacons is an object that is embedded in a web page or email and is usually invisible to the user but allows checking that a user has viewed the page or email.[1] Common uses are email tracking and page tagging for Web analytics. Alternative names are web beacon, tracking bug, tag, or page tag. Common names for web bugs implemented through an embedded image include tracking pixel, pixel tag, 1×1 gif, and clear gif.[2] When implemented using JavaScript, they may be called JavaScript tags.

Lets see an example :(To Check whether the mail recipients has read the mail or not)
Now-a-days an email is written in HTML Format.So you can insert the below code easily.

What will happen here is,the Email client will try to fetch the image from the src path, But instead of actual image the PHP script will get executed.So this way you can check if the user has read the mail or not.

Note : In most of the email clients images are blocked by default,in that case this will not help.

Ref:
Wiki

Internationalization (i18n) and Localization (l10n)

Internationalization (i18n) and Localization (l10n)

You might have seen these keywords in Project Design Docs. Lets understand their significance.

Internationalization (i18n)
Internationalization is often written i18n, where 18 is the number of letters between i and n in the English word (I……18 letters……n).

Internationalization is the design and development of a product, application or document content that enables easy localization for target audiences that vary in culture, region, or language.

Localization (l10n)
Localization is sometimes written as l10n, where 10 is the number of letters between l and n.

Localization refers to the adaptation of a product, application or document content to meet the language, cultural and other requirements of a specific target market (a locale).

Example 1: (Developing a Web Portal)
While developing you can keep all your text entries into a DB or in a Flat File instead of hard-coding to the views (HTML/JSP). If you doing this way then you keep a provision to change you locale without changing the code. This way you follow Internationalization and when you deliver you product to end-users with their local language then you are doing Localization.

Example 2: (OS)
I18N: Suppose your OS is English(US),You can just change the OS language to Japanese/Chineese and can Install application in either Japanese/Chineese support.

L10N: Your OS must be in the same locale as the application.eg on Japanese OS you can install Japanese language supported application.Here every thing will be in the same lacale.

Ref:

Responsive Web Design (RWD)

Responsive Web Design (RWD)

From Wiki
Responsive web design (RWD) is a web design approach aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of re-sizing, panning, and scrolling—across a wide range of devices (from mobile phones to desktop computer monitors).

In simple words we want to develop website that suites all devices. You might have seen few domains have their mobile site different from main site like m.google.com. In such cases you will have to maintain both of the them (more maintenance means more cost). If you have one site that behaves well for all devices (desktop,ipad,iphone etc…) . dont you think that will be great ??? This is what Responsive Design is?

Lets start with an example.

1) Responsive Design
You can just re-size your browser window (to mobile size) to see how it works for the current site (i.e. http://www.bibek.in). Or you can check the same in with Mobil devices.
You will notice that the menus are converted to drop downs and study other segments behaviors.

2) Non-Responsive Design
Open this url ( http://bibek.in/eh/view/) in resized browser window or in Mobil devices. You will see the difference.

As of now you might have understood the significance of responsive design. So lets start working with RWD.

No doubt RWD a big thing now. To newbies, responsive design might sound a bit complicated, but it is actually simpler than you think. Lets learn about the basic logic of responsive design and media queries.

Media Queries : CSS2 allows you to specify style-sheet for specific media type such as screen or print. Now CSS3 makes it even more efficient by adding media queries. You can add expressions to media type to check for certain conditions and apply different style-sheets. For example, you can have one style-sheet for large displays and a different style-sheet specifically for mobile devices.

Example :
The following CSS will apply if the viewing area is smaller or equal to 320px.

You can google to understand more into media quires.

Stay tuned for updates on this article.

JavaScript Utility

JavaScript Utility

Below are few Java Script methods to help you.

Debugging in JavaScript:
Debugging in JavaScript is now become easier with modern browsers.But still you will be facing issues in many cases so the alternative can be writing print statments in javaScript (i.e. console.log(“Message”)).

But in IE browser if you console is not opened (it can be opened with Developer tools (F12)) then it will show function undefined error and will stop further javascript execution. To prevent this you can use console as below.

window.console && console.log (“Message To Log”);

Getting Param From URL
function getParam(name) {
name = name.replace(/[\[]/, “\\\[“).replace(/[\]]/, “\\\]”);
var regexS = “[\\?&]” + name + “=([^&#]*)”;
var regex = new RegExp(regexS);
var results = regex.exec(window.location.href);
if (results == null)
return “”;
else
return results[1];
}

Example :

You must either modify your dreams or magnify your skills …

getParam(“load”) will return true;

Reload the Page Native Method
location.reload();

Lot more come.. Stay tuned…

Twitter Bootstrap

Twitter Bootstrap

From Wiki
Bootstrap is a free collection of tools for creating websites and web applications. It contains HTML and CSS-based design templates for typography, forms, buttons, navigation and other interface components, as well as optional JavaScript extensions.
It is the most popular project on GitHub and has been used by NASA and MSNBC among others.

Bootstrap was developed by Mark Otto and Jacob Thornton at Twitter as a framework to encourage consistency across internal tools. Before Bootstrap, various libraries were used for interface development, which led to inconsistencies and a high maintenance burden.

Bootstrap website

Bootstrap is simple to use. Look at few examples .

Bootstrap come with many ready to use features. See why to use at this link.