Friday, July 31, 2015

Bootstrap Learning

Must Used Bootstrap Classes
class="lead"
class="col-lg-4-offset"
class="col-lg-4-pull"
class="col-lg-4-push"
class="text-left"
class="text-right"
class="text-center"
class="text-nowrap"
class="text-justify"
class="text-lowercase"
class="text-uppercase"
class="text-capitalize"
class="active"
class="success"
class="info"
class="warning"
class="danger"
class="input-lg"
class="text-hide"

Most Used Bootstrap tags
<abbr>
<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>
<mark>
<code>
<small>
<em>
<blockquote>
<footer>

<blockquote class="blockquote-reverse">
  ...
</blockquote>

UL LI
==================
<ul class="list-inline">
  <li>...</li>
</ul>

Table
=================
<table class="table table-striped">
  ...
</table>

Colors
@brand-primary: darken(#428bca, 6.5%);

Scaffolding
===================
@body-bg:    #fff;
@text-color: @black-50;

Links
=======================
@link-color:       @brand-primary;
@link-hover-color: darken(@link-color, 15%);

Monday, July 6, 2015

Understand Blogspot Basics

Blogger template has mainly three types of variables
one which controls the flow of the code
one which pulls data from the databases behind
third are expressions.

b:namespace
=========================
=========================
The variables in this namespace mainly control the layout and control flow of the template.

The template is mainly divided in sections
=>sections will include widgets
==>Widgets will have includables
====>includables are useless unless you use it by using the include tag.

Section
====================
<b:section [attribs] >
</b:section>

1. id (Required) A name identifying the section must be unique.
2. class (Optional) Common class names are 'navbar,' 'header,' 'main,' 'sidebar,' and 'footer.'
3. maxwidgets (Optional) The maximum number of widgets.
4. growth (Optional) Can be 'horizontal' or 'vertical,'.

Widgets
============================
<!--Simple form.-->
<b:widget [attribs] />

<!-- Expanded form. -->
<b:widget [attribs] >
</b:widget>
A widget may have the following attributes:
1. id (Required) May contain letters and numbers only, and each widget ID in your template should be unique.
2. type: (Required) Indicates what kind of a widget it is.
3. locked: (Optional) Can be 'yes' or 'no,' with 'no' as the default.
4. title: (Optional) A display title for the widget.
5. pageType: (Optional) Can be 'all,' 'archive,' 'main,' or 'item,' with 'all' as the default.

The includables Tag
===========================
<b:includable id='[some-unique-id]' [attribs] >
</b:includable>

The includable tag has the following attributes:
1. id: (Required) A unique identifier made up of letters and numbers.
2. var: (Optional) An identifier made up of letters and numbers, for referencing data within this section.

The include Tag
=============================
<b:include name='[the-includable-name]' data='[the-expression-for-var]'/>

The attributes name and data:
name: (Required) This name will be pointing to the includable which is to be included.
data: (Optional) Like a parameter is passed to function this data is passed to includable.

The if / else Tag
===============================
<!-- both if and else-->
<b:if cond='[some cond check]'>
 <!--  [Then do this]  -->
<b:else/>
 <!--  [else do this]  -->
</b:if>

Examples:
<!-- to check a boolean variable. -->
<b:if cond='data:useImage'>
 <!--  [execute if the header for your blog is image instead of text]  -->
</b:if>

<!-- to compare equivalence of two values-->
<b:if cond='data:blog.pageType == "item"'>
 <!--  [True if the current page is an item page (post page).]  -->
</b:if>

<!-- to compare non-equivalence -->
<b:if cond='data:displayname != "Fred"'>
 <!--  [True if this is not Fred's display name.]  -->
</b:if>

<!-- comparing greater than, less than-->
<b:if cond='data:post.numComments > 1'>
 <!--  [True if the current post has more than one comment.]  -->
</b:if>

The Loop Tag
=================================
<b:loop var='some-identifying-var' values='set-of-something'>
 <!--  [For every var in the values i.e., for every data in the set of data do something here]  -->
</b:loop>

data:namespace
=========================
=========================
<!--[The blog's title.]-->
<data:blog.title/>

<!--[
The type of the current page. One of 'item', 'archive', or 'index'.
This var is quite useful for selectively showing content on
different type of pages. Put an if and check if its index page or
item page and then display selective content
]-->
<data:blog.pageType/>

<!--  [The URL of the current page.]  -->
<data:blog.url/>

<!--  [The homepage of the blog.]  -->
<data:blog.homepageUrl/>

<!--[
The title of the current page. This is often the blog title,
but may contain additional information on archive or post pages.
]-->
<data:blog.pageTitle/>

<!--  [The encoding to use for the blog, e.g. UTF-8.]  -->
<data:blog.encoding/>

<!--[
Either "ltr" or "rtl" for left-to-right
and right-to-left languages, respectively.
]-->
<data:blog.languageDirection/>

<!--  [The autodiscovery feed links for the page header.]  -->
<data:blog.feedLinks/>


Widget Types
===========
Page Header
Blog Archives
Profile
Text / HTML / JavaScript
Feed
Picture
Labels
List
Link List
Logo
Blog Posts

Page Header
===============
<!--[The blog's title. ]-->
<data:title/>

<!-- [ The blog's description. ]-->
<data:description/>

Blog Archives in Blogger template
==================================
title: The title of the widget.
style: One of 'MENU', 'FLAT', or 'HIERARCHY'.
data: A list of each archive unit, each of which contains:
->-> name: The name of this archive interval or period.
->-> url: The link to the page containing posts from this interval.
->-> post-count: How many posts there are in this interval.

<!--[ Simple usage of title ]-->
<b:if cond='data:title'>
 <h2><data:title/></h2>
</b:if>

<!--[ For a includable flat type ]-->
<b:includable id='flat' var='data'>
 <ul>
  <b:loop values='data:data' var='i'>
   <li class='archivedate'>
    <a expr:href='data:i.url'>
     <data:i.name/>
    </a>
    (<data:i.post-count/>)
   </li>
  </b:loop>
 </ul>
</b:includable>


Profile Widget in Blogger template
=====================================
This is the profile of the author. There can be one author of a blog or maybe the blog has a team of authors.

For a blog with a single author, the profile widget contains the following information.
-> title The title of the widget.
-> userUrl The author's profile URL.
-> location The location from the author's profile.
-> aboutme The "About Me" information from the profile.
-> displayname The author's display name.
-> photo The user's profile photo, made up of the following:
-> -> url: The photo URL.
-> -> width: The photo's width, in pixels.
-> -> height: The photo's height, in pixels.
-> -> alt: The "alt" text for the photo.

Team blog widgets contain less information compare to single blog widgets. The tags are:
-> title: The title of the widget.
-> authors: The list of all authors, each of which contains the following:
-> -> displayname: The author's display name.
-> -> userURL: The author's profile URL.

If you want to design your template to handle both single- and multiple-author blogs, you can use the data:team variable to distinguish between the two cases as shown below.

<b:if cond='data:team=="true"'>
 <!--[display multiple authors] -->
</b:if>

Text / HTML / JavaScript Widget in Blogger template
=======================================
HTML / Javascript and Text widgets are very simple widgets and contain only two data elements.
-> title: The widget's title.
-> content: The content of the widget.

Source:
https://support.google.com/blogger/answer/47270



Friday, July 3, 2015

Digital Watch Creation Through Javascript

Understand Regular Expression

CharacterDescription
\wMatches any word character (alphanumeric).
\WMatches any non-word character.
\sMatches any whitespace character (tab, newline, carriage return, form feed, vertical tab).
\SMatches any non-whitespace character.
\dMatches any numerical digit.
\DMatches any character that is not a number.
[\b]Matches a backspace.
.Matches any character except a newline.
[...]Matches any one character within the brackets.
[^...]Matches any one character not within the brackets.
[x-y]Matches any character in the range of x to y.
[^x-y]Matches any character not in the range of x to y.
{x,y}Matches the previous item at least x times but not to exceed y times.
{x,}Matches the previous item at least x times.
{x}Matches the previous item exactly x times.
?Matches the previous item once or not at all.
+Matches the previous item at least once.
*Matches the previous item any number of times or not at all.
|Matches the expression to the left or the right of the | character.
(...)Group everything inside parentheses into a subpattern.
\xMatches the same characters that resulted from the subpattern in group number x. Groups, which are designated with parentheses, are numbered from left to right.
^Matches the beginning of the string or beginning of a line, in multiline matches.
$Matches the end of the string or end of a line, in multiline matches.
\bMatches the position between a word character and a non-word character.
\BMatches the position that is not between a word character and a non-word character.
Know More in Regular Expression
CharacterDescription
\fForm feed
\nNewline
\rCarriage return
\tTab
\vVertical tab
\/Forward slash (/)
\\Backward slash (\)
\.Period (.)
\*Asterisk (*)
\+Plus (+)
\?Question Mark (?)
\|Horizontal bar (|)
\(Left parenthesis (
\)Right parenthesis )
\[Left bracket ([)
\]Right bracket (])
\{Left curly brace ({)
\}Right curly brace (})
\XXXASCII character represented by the octal number XXX
\xHHASCII character represented by the hexadecimal number HH
\cXThe control character represented by X

Window Object Functions: Learn Here

Methods/PropertiesDescription
alertLoads an alert dialog box with the text string passed.
backLoads the previous page in place of the window instance.
blurRemoves the focus from a window.
captureEventsSets the window to capture all events of a specified type.
clearIntervalClears the interval set with the setInterval method.
clearTimeoutClears the timeout set with the setTimeout method.
closeCloses the instance of the window.
confirmDisplays a confirmation dialog box.
disableExternalCaptureDisables external event capturing.
enableExternalCaptureEnables external event capturing for the pages loaded from other servers.
findDisplays a Find dialog box where the user can enter text to search the _current page.
focusAssigns the focus to the specified _window instance.
forwardLoads the next page in place of the window instance.
handleEventInvokes the handler for the event passed.
homeLoads the user's specified home page in place of the window instance.
moveByMoves the window by the amounts specified.
moveToMoves the window to the specified location.
openOpens a new instance of a window.
printInvokes the Print dialog box so the user can print the current window.
promptDisplays a prompt dialog box.
releaseEventsReleases the captured events of a specified type.
resizeByResizes the window by the specified amount.
resizeToResizes the window to the specified size.
routeEventPasses the events of a specified type to be handled natively.
scrollScrolls the document in the window to a specified location.
scrollByScrolls the document in the window by a specified amount.
scrollToScrolls the document, both width and height, in the window to a specified location.
setIntervalInvokes a function or evaluates an expression every time the number of milliseconds has passed.
setTimeoutInvokes a function or evaluates an expression when the number of milliseconds has passed.
stopStops the current window from loading other items within it.
closedSpecifies if the window instance has been closed.
defaultStatusIs the default message in the window's status bar.
documentReferences all the information about the document within this window. See the Document object for more information.
framesReferences all the information about the frames within this window. See the Frame object for more information.
historyReferences the URLs the user has _visited.
innerHeightContains the height of the display area of the current window in pixels.
innerWidthContains the width of the display area of the current window in pixels.
lengthRepresents the number of frames in the current window.
locationContains the current URL loaded into the window.
locationbarReference to the browser's location bar.
menubarReference to the browser's menu bar.
nameName of the window.
openerContains the name of the window from which a second window was opened.
outerHeightContains the height of the outer area of the current window in pixels.
outerWidthContains the width of the outer area of the current window in pixels.
pageXOffsetContains the x-coordinate of the current window.
pageYOffsetContains the y-coordinate of the current window.
parentReference to the upper most window that is displaying the current frame.
personalbarReference to the browser's personal bar.
scrollbarsReference to the browser's scroll bars.
selfReference for the current window.
statusReference to the message in the window's status bar.
statusbarReference to the browser's status bar.
toolbarReference to the browser's tool bar.
topReference to the upper most window that is displaying the current frame.
windowReference for the current window.

JavaScript String Functions: Learn Here

Method/PropertyDescription
anchor()Creates an instance of the tag with the NAME attribute set to the string passed to the method.
big()Converts the string into an instance of the tag.
blink()Converts the string into an instance of the tag.
bold()Converts the string into an instance of the tag.
charAt()Returns the character at the index passed to the method.
charCodeAt()Returns the ISO-Latin-1 number of the character at the index passed to the method.
concat()Concatenates the two strings passed to return a new string. This method was added in JavaScript 1.2.
fixed()Converts the string into an instance of the , fixed pitch font tag.
fontcolor()Sets the COLOR attribute of an instance of the tag.
fontsize()Sets the SIZE attribute of an instance of the tag.
fromCharCode()Returns the string value of the ISO-Latin-1 number passed to the method.
indexOf()Returns the index of the first occurrence of the string passed to the method within an instance of a String object.
italics()Converts the string into an instance of the tag.
lastIndexOf()Returns the index of the last occurrence of the string passed to the method within an instance of a String object.
link()Converts the string into an instance of the tag and sets the HREF attribute with the URL that is passed to the method.
match()Returns an array containing the matches found based on the regular expression passed to the method.
replace()Performs a search and replace, using the regular expression and replace string passed to the method, on the instance of a String that calls it.
search()Returns the index location of the match found in the string passed to the method. A -1 is returned if the string is not found.
slice()Returns the string between the beginning and ending index passed to the method. If a negative number is passed, the index is referenced from the end of the string passed.
small()Converts the string into an instance of the tag.
split()Returns the string split into segments defined by the string and instance limit passed to the method.
strike()Converts the string into an instance of the tag.
sub()Converts the string into an instance of the tag.
substr()Returns the string beginning with the indexed location and number of characters to return. If a negative number is passed, the index is referenced from the end of the string passed.
substring()Returns the string between the beginning and ending index passed to the method.
sup()Converts the string into an instance of the tag.
toLowerCase()Converts all the characters in the string to lowercase.
toSource()Returns the string representation of the String passed.
toString()Returns the characters passed as type string.
toUpperCase()Converts all the characters in the string to uppercase.
lengthReturns the length of the string.
prototypeProvides the ability for a programmer to add properties to instances of the String object.

Friday, June 26, 2015

How to Create RSS Feed through PHP, MySQL

http://www.pontikis.net/blog/simple-rss-class-create-rss-feed

Wednesday, June 24, 2015

How to Use Google Map on Web Page

 <head><style>
      #map-canvas {
        width: 500px;
        height: 400px;
background-color: #CCC;
      }
    </style>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script>
  function initialize() {
  var mapCanvas = document.getElementById('map-canvas');
    var mapOptions = {
      center: new google.maps.LatLng(28.38, 77.12),
      zoom: 8,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(mapCanvas, mapOptions);
  }
  google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
  <body>
  <div id="map-canvas"></div>
  </body>

Source to get Longitude and Latitude Values
http://www.latlong.net/

Tuesday, June 23, 2015

Must Use CSS

Body Right Side Image
body{
background: #FFFFFF url(http://3.bp.blogspot.com/-OmaZsi_XmgA/TzY787sKUrI/AAAAAAAABPg/xYSLXr8epZI/s1600/Gita+Blog+Side+Bar.jpg) repeat-y fixed top right;
}

Change Cursor for Site
<style>
body {
cursor: url('favicon.ico'), default;
}
</style>

Block Right Click Disable
tr
{
-ms-user-select:none;
-webkit-user-select:none;
-moz-user-select:none;
}

Use Google Font:
  <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Open+Sans">
    <style>
      body {
        font-family: 'Open Sans', sans-serif;
      }
    </style>

Style to First Letter
<style type="text/css"> 
p:first-letter{
    font-size:200%;
    color:#8A2BE2;
}

Login Form Focus
:focus{
            border: thin black solid; 
            padding: 4px; 
        } 
</style>

Image Change on Mouseover
<a href="URL ADDRESS"><img src="URL OF THE FIRST IMAGE GOES HERE" onmouseover="this.src='URL OF THE SECOND IMAGE GOES HERE'" onmouseout="this.src='URL OF THE FIRST IMAGE GOES HERE'" /></a>

Friday, March 6, 2015

Facebook Advertisement

Ads Placements
=============
Desktop News Feed
Mobile News Feed
Right Hand Side Ads

Types of Advertisement
======================
Clicks to Website: Send people to your website.
Website Conversions: Increase conversions on your website. You'll need a conversion pixel for your website before you can create this ad.
Page Post Engagement: Boost your posts.
Page Likes: Promote your Page and get Page likes to connect with more of the people who matter to you.
App Installs: Get installs of your app.
App Engagement: Increase engagement in your app.
Offer Claims: Create offers for people to redeem in your store.
Local Awareness: Reach people near your business.
Event Responses: Raise attendance at your event.
Video Views: Create ads that get more people to view a video.

Campaign Structure of Facebook Ads
====================================
1. Campaign
2. Ads Set
3. Ads


Ads Set:
=======
An ad set contains one or more ads. You’ll set a budget and a schedule for each of your ad sets. You’ll also define your audience, placement, and bidding (bid type and bid value) at the ad set level. This way you can control how much you spend on each audience, schedule when they see your ads, and measure their response.

Create an Offer
================
If you have a Page for a local business/place with at least 50 likes, you can create an offer from ad creation without a budget and promote it later.
Source: https://www.facebook.com/help/www/102534329872055

Power Editor
============
To Create many ads
https://www.facebook.com/ads/manage/powereditor

Ads Guide
============
https://www.facebook.com/business/ads-guide/

Website Conversions
====================
Image size: 1,200 x 628 pixels
Image ratio: 1.9:1
Text: 90 characters
Headline: 25 characters
Link description: 30 characters
Your image may not include more than 20% text. See how much text is on your image.

Add
=======
Call to Action
e.g. Shop Now

Targeting Options
=================
Location
Gender
Age
Likes and Interests
Relationship Status
Workplace and Education

Facebook Remarketing
=====================
https://www.facebook.com/business/a/online-sales/custom-audiences-website
http://www.socialmediaexaminer.com/benefits-facebook-remarketing/

Monday, March 2, 2015

Google Alogorithm Updates

Panda - Search Filter
Penguin - Spam Filter
Pigeon - For Local Listing
Hummingbird - Meaning behind the words
Payday Update - pornographic and other heavily spammed queries
Pirate - prevent sites with many copyright infringement reports

http://www.blastam.com/resources/Blast-Google-Analytics-Reference-Guide.pdf

Wednesday, February 18, 2015

AJAX Learning

AJAX
========
html, css -> Presentation
DOM -> Interaction with data
XML, JSON -> Data Transfer
XMLHttpRequest -> Asynchronous communication b/w browser & server

XMLHttpRequest
=============
It performs following operations:

Sends data from the client in the background
Receives the data from the server
Updates the webpage without reloading it.

XMLHttpRequest Objects
onReadyStateChange
readyState (range 0 to 4)
reponseText
responseXML

XMLHttpRequest Methods
void open(method, URL)
void open(method, URL, async)
void open(method, URL, async, username, password)
void send()
void send(string)
setRequestHeader(header,value)

Thursday, January 15, 2015

Get Familiar with Android UI Widgets

Toast
Is use to display information for short period of time
Object<-Toast
makeText, setMargin and show() functions mainly used here

CustomToast
We can create custom toast in Android to display image

ToggleButton
Android Toggle Button can be used to display checked/unchecked (On/Off) state on the button.
Object<-View<-TextView<-Button<-CompoundButton<-ToggleButton
getTextOff(), getTextOn() and setChecked(boolean checked) is used here

CheckBox
Android CheckBox is a type of two state button either checked or unchecked.
Object<-View<-TextView<-Button<-CompoundButton<-CheckBox
boolean isChecked(), setChecked(boolean status) is mainly used here

AlertDialog
Android AlertDialog can be used to display the dialog message with OK and Cancel buttons. It has 3 regions title, content area and action buttons
Object<-Dialog<-AlertDialog
setMessage, setCancelable, setPositiveButton mainly used here

Button
There are different types of buttons in android such as RadioButton, ToggleButton, CompoundButton etc.
Object<-View<-TextView<-Button<-CompoundButton

Spinner
Combo Box, e.g. Box to Select List of Countries
Object<-View<-ViewGroup<-AdapterView<-AbsSpinner<-Spinner

AutoCompleteTextView
Android AutoCompleteTextView completes the word based on the reserved words
Object<-View<-TextView<-EditText<-AutoCompleteTextView<-MultiAutoCompleteTextView

RatingBar
Android RatingBar displays the rating in stars
Object<-View<-ProgressBar<-AbsSeekBar<-RatingBar
getRating is the main fn of RatingBar

WebView
Android WebView is used to display web page in android
Object<-View<-ViewGroup<-AbsoluteLayout<-WebView
loadUrl() and loadData() are the main fn of WebView

SeekBar
Android SeekBar is a kind of ProgressBar with draggable thumb
Object<-View<-ProgressBar<-AbsSeekBar<-SeekBar
SeekBar.OnSeekBarChangeListener interface provides methods to perform event handling for seek bar.

DatePicker 
Android DatePicker is a widget to select date
Object<-View<-ViewGroup<-FrameLayout<-DatePicker

TimePicker
It allows you to select time by hour and minute.
Object<-View<-ViewGroup<-FrameLayout<-TimePicker

Analog clock and Digital clock
Android analog and digital clocks are used to show time in android application.

ProgressBar
Object<-Dialog<-AlertDialog<-ProgressDialog
setProgress(), setMessage(), setProgressStyle(), setMax(), show() etc. methods are use

Tuesday, January 13, 2015

Google Analytics Test Preparation

Google Analytics IQ study guide

Getting started with digital analytics

Understanding and using Google Analytics data

Collecting actionable data with Google Analytics

Navigating Google Analytics reports

Navigating Conversions reports

Platform Principles: Fundamentals

Platform Principles: Collection

Platform Principles: Processing and Configuration

Platform Principles: Reporting


Source:
https://support.google.com/analytics/topic/6083717
http://trafficmotion.com/72-questions-you-need-to-know-for-the-google-analytics-iq-exam/
http://www.onlinemarketingtips.in/google-analytics-certification/

Monday, January 12, 2015

Know About Google Analytics Cookies

There can be up to five different cookies that a website with Google Analytics tracking code sets on your computer. However, four of them are automatically set, while the fifth one is an optional cookie. Let’s take a look at each one.

__utma set for life time (2038)
This cookie keeps track of the number of times a visitor has been to the site pertaining to the cookie, when their first visit was, and when their last visit occurred. Google Analytics uses the information from this cookie to calculate things like Days and Visits to purchase.

__utmb expire when close browser
__utmc expires after 30 minute
working together to calculate how long a visit takes. __utmb takes a timestamp of the exact moment in time when a visitor enters a site, while __utmc takes a timestamp of the exact moment in time when a visitor leaves a site. __utmb expires at the end of the session. __utmc waits 30 minutes, and then it expires. You see, __utmc has no way of knowing when a user closes their browser or leaves a website, so it waits 30 minutes for another pageview to happen, and if it doesn’t, it expires.

__utmz expires in 15,768,000 seconds or 6 months
__utmz keeps track of where the visitor came from, what search engine you used, what link you clicked on, what keyword you used, and where they were in the world when you accessed a website.

__utmv as per the user requirement
If you are making use of the user-defined report in Google Analytics, and have coded something on your site for some custom segmentation, the __utmv cookie gets set on the person’s computer.