How To Get Page Descriptions / Meta Tags in Google Sites Created in Apps

Happy Monday all!

Ok, do not fret you can get meta tags in google sites created in Apps, however you may not see the page descriptions box when you click on more > page settings.

If this is the case then you need to log into your apps account and make a simple chanage.

Go to google.com/apps and log into your apps account in 'domin management' mode.

Click on domain settings, the click the radar button readinig Rapid release.

All you are doing is giving google the green light to add features rapidly as they shoot along.


Now you have the box at your disposal enjoy labelling all those pesky pages won't you ...


B x
www.siteshelp.co.uk

Dictionary Definition - Meta Tags

Happy Friday all!

To add to Kyle's great and informative post about meta tags I thought I would share with you my theory about adding  page descriptions via the "Page Settings" dialog.

All you need to make note of the dictionary's description of a meta tag, otherwise you will just be dding mindless keywords which, quite frankly, will look and sound like a big fat spam sandwich.

met·a·tag

noun Computers . 

a tag in HTML that is inserted at the top of a Web page chiefly to describe its content and provide keywords for use by search engines.

So, take heed, take time and describe your pages content, but briefly. It really helps if the content of your page is original in the first place, then naturally your meta tag will be more meaningful and visible in searches.

Content is king in SEO and meta tags are often used in search snippets too (aka search results text).

This is a great feature and is something originally asked for by your guardian Google Sites Top Contributors. So, let me know how you go with this new mega exciting new feature!

B x 

New Page Descriptions Improve SEO for Google Sites

Introduction
So, I was in page settings (under MORE), doing my thing - hiding links to subpages, attachments, and comments - and I saw a page description field. This is brand new! Let's look deeper on this small, but important update!

Page Description - Believe it or not, that wasn't there before. I promise.

Effect
For most, this will have a positive impact on public facing websites SEO. Now you can specifically create the meta data for pages.

Let's map out an example. You are an attorney who focuses on three different areas of practice: family law, criminal law, and estate law. The Site Description creates a blanket description for your website, so you might describe that you are a lawyer in Anytown, USA. Now let's imagine you have a page under Services called Family Law. Page title is very important, but it's good to follow that up with a good description explain that you handle Divorce and Child Custody. This page information will be factored in to your page rank for search engines.

For the intranet user the effect is less profound. This page description, so far, doesn't influence the search tool. So really this may only be a nice place for editors to leave notes about the use of a particular page, though a bit too conspicuous.

When looking at the Page Source Code you'll see that this Page Description creates meta data important for SEO.

Conclusion
This update tells us that the Google Sites team cares about public facing websites. It's been clear that Google Sites is foremost an internal tool, but this update really goes to show that Google Sites is a viable public website platform with competitive SEO options. It's always been good, but now it's even better.

RSS Feed for Google Sites!

A Reliable Gadget for Embedding your Feeds
I was struggling just weeks ago trying to create a RSS feed that looked decent and accomplished what should be a simple task. This minor update caught me by surprise and I am happy to see it.

I was using FeedWind to accomplish a RSS feed through an iframe, that means my html was hosted with a third-party and embedded onto the webpage via Mori79's iframe gadget (search iframe under public gadgets and it is the first one).

The Slideshow Option. Not terribly useful, but nice.

Anyways, no more iframes, just a customizable, easy to use Google-endorsed gadget. We at Kirksville Web Design have already fully tested out this gadget including the interesting display feature, slideshow. The slideshow only shows the title as a link and a thumbnail. It's not the most useful or aesthetically pleasing, but I'm all for options here.

No Transparency Allowed on Hexcode for bg color.

Here's the original post below. Enjoy!

Better customization for your RSS Gadget in Sites
We’ve also added a new RSS gadget for Google Sites to our “Featured” gallery.


The new RSS gadget gives you complete control over the appearance of the gadget: You can customize any aspect of the feed, including font, color, size, number of items to display, and post length.

To set your gadget, go to Insert > More Gadgets > Featured, and look for RSS Feed.


Improved mobile rendering
After we released our initial version of Google Sites automatic mobile rendering, you enabled the option for over 50,000 sites, making it clear that you’re looking for a better way to easily publish content for mobile devices.

Based on what you’ve told us, we’re adding the additional behaviors to make automatic mobile rendering on Google Sites even better, including:

• Images and header logos automatically scale in mobile mode
• Gadgets and text boxes have widths that fit mobile devices
• Pages with multi-column layouts stack columns vertically on mobile

Before	After

Thanks for continuing to let us know what you think about our products -- these changes wouldn’t be possible without you.

Posted by: Rajiv Bammi, Software Engineer

iGoogle's Retiring - How it affects Gadgets for Sites

Summary

Since iGoogle is retiring fully in 2013, the Google Gadget editor will be effected. Referred to as the Google Gadget Gallery in Google Sites, this gallery of published gadgets will go away. The functionality of xml gadgets will be constant though, so prepare your websites.

Quoted from Google:

As we announced on the Official Google Blog, on November 1, 2013, we will be retiring iGoogle. To ensure a smooth transition for your users, you may want to update your gadgets and direct users to your site or offer the ability to export user data. You may also consider launching your application on one of our other platforms.
Similarly, we will stop accepting new gadgets after July 31, 2012 - but you will be able to update and maintain existing gadgets, as before.

What to do

Take the initiative to host your gadgets (look for the .xml file) on your own Google Site. You can upload them anywhere on your site and use the "Add Gadget by URL" feature.

Updates

I'll let you know if I hear anything important on this topic. 

Conclusion

The functionality of the .XML gadgets is solid and won't change, just make sure that your gadgets are hosted elsewhere than the Google Gadget Gallery. I'm not exactly sure is the Gadget Gallery will go away completely, but better safe than sorry. It certainly is a nice tool when your looking for those oddball gadgets like the Frogger game, news from Tahiti, and a non-functioning clock. 

How do you feel about this update?

HTML FORM tutorial with CSS based Example

FORMS are used to pass data to a server and contain input elements like
text, check box, radio, button, submit, reset, password.
A form is incomplete with out input box . Data sent to server through forms using input elements  and executed on the server.





Lets have a example of a form

<form action="name.php" method="post">
<input type="text" name="name" />
<input type="submit" name="submit" value="Go"/>
</form>
Output

Explanation:
action- pointed to page where programming codes will be there.
type- we have to define type of input box whether it is text, password,submit or so on..
method- we have to define which method we are using GET or POST , remember POST is secure compare to GET.

Lets have Complete example -
In this example used PHP as Programming language, CSS for making the form look good and html5.

Complete Script -

 <!DOCTYPE html>

<html lang="en">

<head>

<title>Form Tutorial</title>

<meta charset="utf-8" />

<style type="text/css">

.input{

background:#fff;

border: 1px solid #999;

box-shadow:inset 0 0 2px #000000; 

color: #222; 

}

.input:hover{

background:#f6f6f6;

border: 1px solid #999;

color: #222;

}

</style>

</head><body>

<?php

if(isset($_POST['submit')){

$name=$_POST['name'];

echo "Hello ". $name. " its Working naa";

}

?>

<form action="" method="post">

<input type="text" name="name"  class="input"/>

<input type="submit" name="submit" value="Go" class="input"/>

</form>

</body>

</html>

If you have any question then please comment .

Simple Link Hover Effect using CSS Tutorial

Are you bored with custom link colors and want to give a  new look to your links with new colors and effect then you come to right place, in this tutorial I am going to share how to make a link hover effect.






Structure :
you have to place this simple Code in you HTML <head> tag. just like

<head>
<style type="text/css">
a:link{color: #370;}
 a:visited {color:#369;}
a:hover   {color:#f90;}
a:active  {color:#444;} </style>
</head>

A complete Example :

<!DOCTYPE html>
<html lang="en">
<head>
<title>Link Hover Effect by HTML5Planet</title>
<meta charset="utf-8" />
<style type="text/css">
a:link{color: #370;font-family:arial;text-decoration:none}
a:visited {color:#369;}
a:hover   {color:#f90;font-family:Times New Roman;font-weight:bold;text-decoration:underline}
a:active  {color:#444;} </style></head>
<body>
<a href="http://html5planet.blogspot.in/" title="">HTML5Planet</a>
|<a href="http://www.openplus.in/" title="">OpenPlanet</a>
</body>
</html>

How To find out Visitors IP ADDRESS using PHP

I f you a PHP programmer then you will find it very easy to track your visitors IP Address, if someone spaming on your site you can also block him. PHP is alway easy and powerful than other scripting language lets check the whole code .



Codding:

<!DOCTYPE html>
<html lang="en">
<head>
<title>IP Address</title>
<meta charset="utf-8" />
</head>
<body>
<?php
$ip=$_SERVER['REMOTE_ADDR'];
echo "<br/>Your IP Address is ".$ip;
// suppose IP 127.0.0.1 for localhost and it redirects to prevent spam
if($ip=='127.0.0.1')
{
echo "You are blocked for Spaming";
header("refresh:5; http://www.openplus.in");
}
?>
</body>
</html>

Creating Stunning Pure CSS Navigation Menu with Simple Coding

I am not going to teach you each step as you see the code , you will be able to understand it with out any problem. If you have any problem then please comment I will help you.

Screenshot:

Coding:

 <!DOCTYPE html>
<html lang="en">
<head>
<title>Sanjay' HTML5 World</title>
<meta charset="utf-8" />
<style>
ul
{
list-style-type:none;
margin:0;
padding:0;
background:#FFD700;
border: 1px solid #f80;
padding:5px 5px 5px 15px;
}
li
{
display:inline;
}
li a:link{
color:#222;
text-decoration:none;
}
li a:active{
color:#222;
text-decoration:none;
}
li a:visited{
color:#222;
text-decoration:none;
}
li a:hover{
color:#f30;
text-decoration:underline;
}
</style>
</head>
<body>
<ul>
<li><a href="home.htm">Home</a></li>
<li><a href="service.htm">Services</a></li>
<li><a href="contact.htm">Contact</a></li>
<li><a href="about.htm">About</a></li>
</ul>
</body>
</html>

PHP Constant tutorial with practicle example

Constant: Constant refers to fixed value that does not change the value during the execution of program. Constant are defined using PHP’s define () function which accept two arguments. The $ prefixed is not required for constant.



A simple Example :

<?php
//define constant
define('PI',3.14);
$r=5;
//use constant
$area=PI*$r*$r;
echo "Area of circle=".$area;
?>

Result - 78.5

Practical example:
This script is used for data base connection.

<?php
   define('MYSQL_HOST','localhost');
   define('MYSQL_USER','root');
   define('MYSQL_PASS','');
?>

HTML5 Video Tag

HTML 5 natively support Video tag , so no more lengthy coding  or dependence on .flv format for streaming Video. Now your HTML 5 enable browser supports .ogv, .ogg , .mp4  format.

Browser Compatibility :
IE 9, Firefox, Opera, Chrome, and Safari support the <video> element.




Coding Structure

<video width="480" height="320" controls="controls">
  <source src="intro.mp4" type="video/mp4" />
  <source src="intro.ogv" type="video/ogv" />
  Your browser does not support the video tag.
</video> 

Its very simple to implement on your web page.

HTML5 <video> - Methods, Properties, and Events

The table below lists the video methods, properties, and events supported by most browsers:

Methods	Properties	Events
play()	currentSrc	play
pause()	currentTime	pause
load()	videoWidth	progress
canPlayType	videoHeight	error
	duration	timeupdate
	ended	ended
	error	abort
	paused	empty
	muted	emptied
	seeking	waiting
	volume	loadedmetadata
	height
	width

To Know more  visit W3SCHOOLs

HTML 5 introduction

According to Wikipedia
HTML5 is a markup language for structuring and presenting content for the World Wide Web, and is a core technology of the Internet originally proposed by Opera Software. It is the fifth revision of the HTML standard (created in 1990 and standardized as HTML4 as of 1997) and, as of July 2012, is still under development. Its core aims have been to improve the language with support for the latest multimedia while keeping it easily readable by humans and consistently understood by computers and devices .

Why HTML5?
It is future's technology, already adopted by Adobe,Google.... . HTML5 enable to write less for web designers , has built in support for audio, video, Drag-and-drop and others uncountable features. It combines with CSS3 to give a stunning web experience that you can't imagine.

Coding Structure of HTML 5 :

<!DOCTYPE html>
<html lang="en">
<head>
<title>Sanjay' HTML5 World</title>
<meta charset="utf-8" />

</head>

<body>

<h2>Join me on Google+</h2>

</body>

</html>

Do You not think its great for web designers who work harder than a programmer when comes to differentbrowser compatibility.

Install XAMPP on 32/64 bit Linux Distro

Today Linux has become number one choice in Open Source world whether it is Desktop experience, programming, server or Web Development Linux has no match. Its Secure , fast and comes in many flavor.

In this tutorial we will focus how to install Xampp on linux 64 bit OS. Earlier day the Linux version of XAMPP called as LAMPP. But it comes as XAMPP with more improvements.

For Installing and running XAMPP on 64 bit linux distro install wine  through package manager , it will install 32 bit packages so you can run  32 bit application also. Please note that  XAMPP is till now a 32 bit application.

After installing Wine Download XAMPP  latest version from

http://www.apachefriends.org/en/xampp-linux.html

After downloding Xampp copy it to home folder, and rename it to xampp.tar.gz

Note : Some distro allows root login such as PCLinuxOS, OpenSUSE so if your distro allows root login then logged as root. Some distro doesnot allow root login like Ubuntu, Kubuntu ... don't worry login as default.

Go to a Linux shell and login as the system administrator root

su tar xvfz xampp.tar.gz -C /opt

or if fail try

sudo tar xvfz xampp.tar.gz -C /opt

it will ask password , use your root password and hit enter.

To start XAMPP simply call this command:

sudo /opt/lampp/lampp start

or

su  /opt/lampp/lampp start

You should now see something like this on your screen:

Starting XAMPP 1.7.7...
LAMPP: Starting Apache...
LAMPP: Starting MySQL...
LAMPP started.

Ready. Apache and MySQL are running.

Just type in the following URL at your favourite web browser:

http://localhost

Now you should see the start page of XAMPP containing some links to check the status of the installed software and some small programming examples.

Xampp on Kubuntu 12.04 64 bit

Some Usedful commands to remeber while playing with xampp.

start	Starts XAMPP.
stop	Stops XAMPP.
restart	Stops and starts XAMPP. This tutorial tested on Ubuntu, Linux Mint ,OpenSUSE and Fedora

HTML 5 TEXTAREA TUTORIAL WITH WORKING EXAMPLE

If you want to use unlimited number of characters in your form then <textarea> is going to easy your life. According to w3school The <textarea> tag defines a multi-line text input control and hold unlimited number of characters.



A simple example :

<textarea  rows="14" cols="30" ></textarea> 

How to use in language like PHP?
Its simple just check out the example below...

<?php
$msg=(isset($_POST['msg']))?trim($_POST['msg']):'';

if(isset($_POST['submit'])){
    echo $msg;
    }
?>
<form action="" method="post">
Message<br/>
<textarea name="msg" rows="14" cols="30" ></textarea>
<br/>
<input type="submit" name="submit" value="Go"  />

Whats new in HTML 5
autofocus - Specifies that a text area should automatically get focus when the page loads.
placeholder-Specifies a short hint that describes the expected value of a text area.
required-Specifies that a text area is required/must be filled out.

If you have any suggestion or something to add please comment  so I can implement in my blog.

Validate an E-Mail Address with PHP, complete script

This tutorial will teach you how to validate a e-mail id using regular expression to control email Spam. In this tutorial I used ternary operator to filter the values coming from the input box and avoid errors.

Complete Coding is here

<?php
$email=(isset($_POST['email']))?trim($_POST['email']):'';
function verify($email){
    if(!preg_match('/^[_A-z0-9-]+((\.|\+)[_A-z0-9-]+)*@[A-z0-9-]+(\.[A-z0-9-]+)*(\.[A-z]{2,4})$/',$email)){
        return false;
    } else {
        return $email;
    }
}
if(isset($_POST['submit'])){
        if(verify($email)){
            echo $email." is a valid E-mail ID";
        } else {
            echo $email." is an invalid E-mail ID";
        }       
    }
?>

<form action="" method="post">
<input type="text" name="email" value="<?php echo $email;?>"/><br/>
<input type="submit" name="submit" value="validate" />
</form>

Favorite Free Font - Ashbury Light

A beautiful serif font free on MyFonts.com, but get it for free! It's always great to have a classy font in your arsenal. Just gives you the feeling that a classic font can convey modernity in the right setting.

Click here to visit and download.

My way learn MySQLI and PHP by examples

MySQL is world most used database and when its works PHP then they have no match. Learning MySQL is very is one can found thousand of tutorial on net but these are now old as MySQLI(or MySQL Advanced) next version are now on demand as implementation is easy, secure and little bit faster. In this tutorial I am going to share Uses of MySQli in your next project.

For Connecting to database, create a PHP file name dbsettings.php with following code :

$sanjay=new mysqli('localhost','root','','mysqlifirst');
if($sanjay->connect_errno){
     echo $sanjay->connect_error;
 }

I think above line is quite easy to understand, mysqlifirst is the name of your database.

Data query :
Suppose you have a table name billings which has coloumn trans_id, amount and so on.
Create a another file name dataquery.php with following code:

require('dbsettings.php');
$query="select * from billings where trans_id='2013' ";
$sendq=$sanjay->query($query);
$rows=$sendq->fetch_assoc();
echo "Transaction ID. 2013 amount is Rs.".$rows['amount'];

This is I think a very simple example of using MySqli. If you have any doubt then comment below , I will try to explain it later.
+Sanjay Prasad