Nirajan Ghimirey's Workshop

Monday, March 30, 2015

Badges in Bootstrap

Badges are similar to labels in Bootstrap,badges are mostly used to focus unread objects. They can also be used in links, navs and more other by adding span class: badge. Please test the example for more clearance in it .

Example:

 <!DOCTYPE html>  
 <html>  
 <head lang="en">  
   <meta charset="UTF-8"/>  
   <title>joeandy's workshop</title>  
   <meta name="viewport" content="width=device-width, initial-scale=1"/>  
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>  
 </head>  
 <body>  
 <div class="container">  
 <h4>Badges in active state pills </h4>  
 <ul class="nav nav-pills">  
   <li class="active"><a href="#">Home <span class="badge">42</span></a></li>  
   <li><a href="#">Profile</a></li>  
   <li><a href="#">Message <span class="badge">3</span></a></li>  
 </ul>  
 <br>  
 </div>  
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>  
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>  
 </body>  
 </html>

Sunday, March 29, 2015

Using the affix plugin in Bootstrap and its detailed example

Bootstrap Affix Plugin

Bootstrap affix plugin allows a <div> to become affixed to the location on a particular page in a particular section. It can be included with the help of affix.js or bootstrap.js while working in bootstrap. It is helpful working for toggle pin off and pin on using this plugin and it is mostly used to make <div> affixed to a particular section or location of a page.

Below here is a sample example I wrote it so you could check on the usage and implementation structure, I hope it's not a hard nut to crack. If you have any queries please leave a comment in the comment box.

 <!DOCTYPE html>  
 <html>  
 <head lang="en">  
   <meta charset="UTF-8"/>  
   <title>Nirajan Ghimirey's Workshop</title>  
   <meta name="viewport" content="width=device-width, initial-scale=1" />  
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />  
 </head>  
 <body>  
 <div class="container">  
 <header class="well text-center">  
 <h1>Welcome to My Blog.</h1>  
 <p class="text-success">This is the example of Affix Plug-in</p>  
 </header>  
 <div id="myNav" data-spy="affix" data-offset-top="60"  
    data-offset-bottom="200">  
    <div class="col-md-3">  
      <ul class="nav nav-tabs nav-stacked affix" data-spy="affix"  
       data-offset-top="190">  
       <li class="active"><a href="#one">Home</a></li>  
       <li><a href="#two">Labels</a></li>  
       <li><a href="#three">Directory</a></li>  
        <li><a href="#four">Articles</a></li>  
      </ul>  
    </div>  
    <div class="col-sm-9">  
      <h2 id="one">Home</h2>  
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.  
      Nam eu sem tempor, varius quam at, luctus dui. Mauris magna  
      metus, dapibus nec turpis vel, semper malesuada ante.  
      </p>  
      <p>Vestibulum quis quam ut magna consequat faucibus.  
      Pellentesque eget nisi a mi suscipit tincidunt. Ut tempus  
      dictum risus. Pellentesque viverra sagittis quam at mattis.  
      Suspendisse potenti. Aliquam sit amet gravida nibh,  
      facilisis gravida odio. </p>  
      <hr>  
      <h2 id="two">Lables</h2>  
      <p> Nullam hendrerit justo non leo aliquet imperdiet. Etiam  
      in sagittis lectus. Suspendisse ultrices placerat accumsan.  
      Mauris quis dapibus orci. In dapibus velit blandit pharetra  
      tincidunt. </p>  
      <p>Vestibulum consectetur scelerisque lacus, ac fermentum  
      lorem convallis sed. Nam odio tortor, dictum quis malesuada at,  
      pellentesque vitae orci. </p>  
      <hr>  
      <h2 id="three">Directory</h2>  
      <p>Integer pulvinar leo id risus pellentesque vestibulum.  
      Sed diam libero, sodales eget sapien vel, porttitor bibendum  
      enim. Donec sed nibh vitae lorem porttitor blandit in nec ante.  
      Pellentesque vitae metus ipsum. Phasellus sed nunc ac sem  
      malesuada condimentum. Etiam in</p>  
      <p>Phasellus vitae suscipit justo. Mauris pharetra feugiat  
      ante id lacinia. Etiam faucibus mauris id tempor egestas. Duis  
      luctus turpis at accumsan tincidunt.</p>  
      <hr>  
      <h2 id="four">Articles</h2>  
      <p> Nullam hendrerit justo non leo aliquet imperdiet. Etiam  
      in sagittis lectus. Suspendisse ultrices placerat accumsan.  
      Mauris quis dapibus orci. In dapibus velit blandit pharetra  
      tincidunt. </p>  
      <p>Vestibulum consectetur scelerisque lacus, ac fermentum  
      lorem convallis sed. Nam odio tortor, dictum quis malesuada at,  
      pellentesque vitae orci. </p>  
    </div>  
   </div>  
 </div>  
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>  
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>  
 </body>  
 </html>

Deserialization in JSON

JSON being a data exchange and interchange format, this was designed for running in JavaScript on websites. Serialization of JSON can be done in many of modern web programming and developing languages like PHP, ASP.NET, PERL, Python etc. JSONpickle is a python library for serialization and deserialization of complex python objects to and from JSON. Similarly ASP.NET, PHP etc. has their own libraries and methods for deserialization of data/objects in JSON.

Below is a basic example that is simple enough to explain about deserialization of JSON using PHP as a root language.

PHP Script (deserialization.php)

 <?PHP  
 $json='{"Andy":1,"Joe":2,"James":3,"Niraj":4,"Kumar":5,"Katrina":6}';  
 echo "<pre>";  
 var_dump(json_decode($json));  
 var_dump(json_decode($json,true));  
 echo "</pre>";  
 ?>

JSON in PERL explained with example

Using JSON with PERL :

Dealing with JSON in Perl is more complex comparing to other as Perl being a type less language. However, JSON can be either encoded or decoded using PERL for this operation, JSON module must be installed first.JSON-2.53.tar.gz searching it would let you get a module for PERL of JSON. You will find JSON functions to operate with JSON data using PERL.

JSON Function:

Encode_json : It converts PERL structure which is given in to a UTF-8 encoded, binary string.
syntax:

$json_text = encode_json ($perl_scalar );

$json_text = JSON->new->utf8->encode($perl_scalar);

Example for encoding JSON in PERL:

Perl File (encode.pl)

#!/perl/bin/perl  
 print "Example of encode\n";  
 use JSON;  
 my %rec_hash = ('PHP' => 1, 'SEO' => 2, 'JS' => 3, 'JSON' => 4, 'Project' => 5);  
 my $json = encode_json \%rec_hash;  
 print "$json\n";  
 Decode_json : It decodes the JSON string.  
 syntax:  
 $perl_scalar=decode_json $json_text  
 or  
 $perl_scalar= JSON->new->utf8->decode($json_text)

Example for decoding JSON in PERL:

Perl File (decode.pl)

 #!/perl/bin/perl  
 print "Example of decode\n";  
 use JSON;  
 use Data::Dumper;  
 $json = '{"JSON":1,"JavaScript":2,"SEO":3,"HTML":4,"CSS":5}';  
 $content = decode_json($json);  
 print Dumper($content);

Saturday, March 28, 2015

Google webmaster and analytic for seo

Google Web Master For SEO

Google is one of the the leading company in internet and its search engine is used most widely around world. Google provides webmaster tools for generating site report and maintaining you site.

Google webmaster facilities you with following feature:

Site Dashboard: This provides the summery of your site or page.
Search Appearance: This helps by providing the summary about your website or web page search appearance. It also provides you the details of site links and the HTML improvement you should make on your site.
Search Traffic: It provides you the traffic that visits you site in regular and the traffic that are searching relevant keywords.
Google Index: It shows your links and pages and where they are ranked in Google index.
Crawl: This provides you the information about crawling and how deep Google has dug your site and took the summary of links and documents.
Security Issue: It provides you with issues that you might have or you are having with security features.

Using these listed features you can very well keep an eye in your website. Particularly this tool in Search Engine Optimization has revolutionized the Search Engine Optimization trends. Beside thee there are also various tools and tabs that you can find in webmaster tool provided by Google that helps you maintain and smooth function your web sites.

This tools helps you be informed about Site health , from this section you can keep an eye on your website and its health, how well optimized is your site and what are the errors that are not being seen by you but crawlers are finding, etc. can be very well optimized
This Optimization of Anchors can be made easy by checking all your hyperlinks and anchor tags using webmaster tool. The more optimized your anchors are the more friendly and genuine your website it.
Sitemap Submission is a vital thing while you come in ground for Search Engine Optimization, if a site map is not submitted in Google Web Master tool you wont be provided by many information like queries that are made and redirected to your page/ websites, users organic searches and etc.
Google Webmaster keeps you alert about errors you have in your site with details and probably thee errors are URL Structure , Site Navigation etc.

Now, as we all have known how precise and important and handy is Google Webmaster tool and its potentials that helps us optimizing our site and making them healthy . I would like to move forward to next section

Google Analytic

For the purpose of ease and proficient Search Engine Optimization there are lots of tools that can be found over internet, among them Google Analytic is outrageous and outstanding. Being easy to use and user friendly any one who hung with this tool for about an hour can understand 67% of the functionality and methods to use them.

Google analytic provides you with following features:

It provides you with Demographics
It provides you with Audience Overview
You can do Cohort Analysis
It provides you the Real-Time from where you can view real time traffic to the site.

Beside them you are also facilitated with other tools that will certainly help you watch over your users visits, ages of the users, gender, traffic source, etc.

If you are into this optimization job and want to track and make it easy for yourself I personally along with almost 80% web masters would recommend you into these tools by Google that are so friendly and handy for even a starter to them. Not only its recommended but Google is one of the the leading company in internet and its search engine is used most widely around world, so why follow others when you have Google.

nirajanghimireyworkshop