Category Archives: Web Content

CDN: Content Delivery Network Overview

Content Delivery Networks (CDN)

 

Hi Everybody, I think you all aware about the CDN (Content Delivery Networks).

 

If not, don’t worry I am going to explain you what is CDN and how it works and how to know whether you site need CDN or not.

 

In Short: A content delivery network (CDN) places files in different locations so that the person using your webpage can receive the nearest copy.

 

Let’s discuss more about CDN?
A CDN (content delivery network) is a system of distributed servers (network) located in different parts of the globe that stores files to be used by your website visitors, It deliver web pages and other Web content to a user based on the geographic locations of the user, the origin of the webpage and a content delivery server may differ.

 

The reason why it used is, there is a measurable amount of waiting time (webpage load) for a website user who is visiting a page that may be hosted thousands of miles away. There are also routing issues that can occur when a user is visiting such a webpage. If someone in Jaipur is using a webpage that is hosted in London they are seeing a slower version of that webpage because of the above mentioned routing issues and sheer distance the files have to travel.

 

By having your files on several servers across a geographical area you can make sure the user is loading files that are near them, not all the way across the country or ocean.

This service is effective in speeding the delivery of content of websites with high traffic and websites that have global reach. The closer the CDN server is to the user geographically, the faster the content will be delivered to the user. CDNs also provide protection from large surges in traffic.

 

How it works?
In a CDN, content exists as multiple copies on strategically dispersed servers. A large CDN can have thousands of servers around the globe, making it possible for the provider to send the same content to many requesting client computing devices efficiently and reliably even when bandwidth is limited or there are sudden spikes in demand.

 

Whenever a visitor request a webpage to open, the CDN will redirect the request from the originating site’s server to a server in the CDN that is closest to the user and deliver the cached content. The CDN will also communicate with the originating server to deliver any content that has not been previously cached.

 

CDN management software dynamically calculates which server is located nearest to the requesting visiter and delivers content based on those calculations. This not only eliminates the distance that content travels, but also reduces the number of hops a data packet must make. The result is less packet loss, optimized bandwidth and faster performance which minimizes time-outs, while improving overall user experience (UX) and site health. In the event of an Internet attack or malfunction at a junction of the Internet, content that’s hosted on a CDN server will remain available to at least some users.

 

The process of bouncing through a CDN is nearly transparent to the user. The only way a user would know if a CDN has been accessed is if the delivered URL is different than the URL that has been requested.

 

Why the CDN is so much popular now a days?
The real reason that so many businesses and webmasters are now using CDNs is because Google has started using page speed as a ranking factor. Content delivery networks however provide a faster experience for users, and that means happier users who buy more things and click more ads. An additional reason for CDN use is the explosion of tablet and mobile users who depend on speed more so than desktop users who have stable internet connections.

 

Does your site need a CDN?
Content delivery networks are used for B2B interactions and in serving content to consumers. CDN is well suited for delivering large streaming audio, video, and Internet television (IPTV) programming, although an Internet service provider (ISP) may also use one to deliver static or dynamic Web pages.

 

You can also host your site on CDN, below are some outstanding improvement if CDN used:

  1. Improvement the page speed
  2. Amazing site performance for your users
  3. Make your site mobile ready and available for some geographical user even server is going down or slow.

 

Some types of websites I not recommend for CDN:

  • Local business sites (DJ, restaurants, city hair salon, city shops etc.)
  • Websites that have their main visitors or traffic in only one geographic region.

 

How much it costs for you?
CDN is a paid service provided by many hosting providers and just like every web service offered, there are almost levels of cost for content delivery networks from free to thousands of dollars depends on the service they provides.

 

Below are the list of some CDN provided listed according to popularity (visit their website for more information, cost and configuration/setup along with customer service).

  1. Akamai
  2. Max CDN
  3. Amazon CloudFront
  4. CloudFlare CDN (this has free option as well)
  5. CDNetworks

 

How do you set a CDN up?

Whenever you buy a CDN it provide a complete guide and customer service for setting it up. However below are some steps that generally followed.

 

Sign up for a service

 

Know what files you are using :
In many cases you are using a CDN to serve things like your images, CSS, and JavaScript files. Such files cause many problems for your users visiting your website from far off places. Having these assets on servers closer to your users is the entire point of having a content delivery network. There are different offerings from different CDNS, but in most scenarios your HTML will come from your webhost and your assets will come from the CDN.

 

Getting your files to the CDN servers:
You will need to get the files you want to serve to the CDN web servers. Some places will have options to do it for you almost automatically, some won’t.

Many have automatic setups if you are using WordPress, Joomla, Drupal or other common CMSs (content management systems). The basic premise however is the same across all CDNs. You will need to have your files hosted by the network and this is usually a one step process of loading those files somewhere once and the content delivery network will then replicate those files across their network.

 

Decide on how to name your URLs (CNAME):
Once your files are on the CDN servers they will have a different URL than they once did. Let’s take an CSS fill as an example. Your old CSS file was at “examplesite.com/css/style.css”, well now that you are using a CDN your CSS file is located at a URL that may look as ugly as this “dfg23345678449dhhty74/style.css” ūüôĀ

 

Instead that name you can choose to use a name of our own choosing (the most common being “cdn.examplesite.com”) and then use something called CNAME to make sure it looks correct and nice to our users. This is a simple step that will result in our CSS file coming from “cdn.examplesite.com/style.css”.

 

Ensuring your web pages are calling (using) the files you sent to the CDN:
You can basically just tell your CMS to swap out the files automatically using common caching systems. An example for WordPress would be to use W3 TOTAL CACHE. Any blog should be using a caching system already and if your isn’t then your blog is probably slow. Using caching properly is an important step in improving page speed and will offer massive benefits to your users.

 

Testing after setup:

Most CDNs will have a page or dashboard where you can see the usage of your files. Other ways of testing would be to use webpagetest.org.

 

Whether it affect my website SEO (Search Engine Optimization)?

Yes, in some extent as the file name changes it is going to scare you :-). However the reputable CDNs have good solutions for any common SEO problems.

 

I think above article will help you to understand the CDN and host your site on CDN and some common configuration settings.

 

Search Engine Spider and User Agent Identification with “Ultimate User Agent Blacklist”

Search Engine Spider and User Agent Identification with “Ultimate User Agent Blacklist”

 

A user-agent is software (a software agent) that is acting on behalf of a user.
In many cases, a user-agent acts as a client in a network protocol used in communications within a client‚Äďserver distributed computing system.

 

For more information view wiki
http://en.wikipedia.org/wiki/User_agent

 

Automated Agents is called as Bots.
http://user-agents.org has a complete list of all latest spiders/bots/user agents.
There are some more and those are anonymous (not known and have very different names).

 

If you develop a website and want to make the site accessible by some specific user agent or bots of a country, then you can update the information in your root .htaccess file.

 

As, Bot blocking blacklists are useless in some way as some rogue spiders just generate random user-agent strings so we will never have them in our list to start with, but We have tried list out as much as we can in the below zip file.

 

Ultimate User Agent Blacklist

 

What you have to done is, unzip the file and paste the code in your root .htaccess file, it will protect your website from unwanted crawling/indexing by anonymous bots.

 

If your website uses WordPress open-source, then can also use “Better WP Security” plug-in.
Just need to download and install the plug-in and go to “Better WP Security – Ban Users” Tab and enable “Enable Default Banned List”, you can also update the list according to your needs.

 

But please be careful before doing same, as it may affect your website’s core files and plug-in, So before doing this backup your website‚Äôs files and database.

 

Marquee tag in HTML and its attributes

The HTML marquee tag provides a way for browsers to creates a scrolling effect (can be tailored to include any HTML content) vertically or horizontally without having to resort to JavaScript techniques.

 

 

The marquee is non-standard HTML tag but you can enjoy (or possibly suffers from) good browser support.

 

You can change the marquee attributes on MARQUEE tag by following ways.

 

Attributes:

 

BGCOLOR=”#CCCCCC” – Set background color.

LOOP – Determines how many times the text will scroll. -1 is indefinite and will continuously scroll. You can set this to whatever you’d like.

SCROLLAMOUNT – Determines the speed your text will scroll.

WIDTH – Determines the width of your marquee.

HEIGHT – Determines the height of your marquee.

Direction – Determines the direction in which the text should scroll – up or down.

BEHAVIOR=”slide” – Defines the type of scrolling.

SCROLLDELAY=”500″ – Defines how long to delay between each jump.

HSPACE – Specifies horizontal space around the marquee.

VSPACE – Specifies vertical space around the marquee.

 

<marquee
bgcolor="color name or hex value"
loop="value (number of loops)"
align="{ top | middle | bottom }"
direction="{ left | right }"
behavior="{ scroll | slide | alternate }"
height="integer (pixels or %)"
width="number (pixels or %)"
hspace="integer (pixels or %)"
vspace="number (pixels or %)"
scrollamount="number"
scrolldelay="number">
</marquee>

 

Event Attributes:

onclick
Script runs when a mouse click

ondblclick
Script runs when a mouse double-click

onmousedown
Script runs when mouse button is pressed

onmouseup
Script runs when mouse button is released

onmouseover
Script runs when mouse pointer moves over an element

onmousemove
Script runs when mouse pointer moves

onmouseout
Script runs when mouse pointer moves out of an element

onkeypress
Script runs when key is pressed and released

onkeydown
Script runs when key is pressed

onkeyup
Script runs when key is released

 

Search Engine Optimization & SEO rich Web Content Development

Search Engine Optimization (SEO) is the process of improving the ranking in the search engine it involves editing its content, HTML, Images.

Content is always king and it should be very relative to its specific keywords. Content portion itself of the web development process is vital to the overall success of the website and Google raking and PR.

 

Web Content is the main reason that people come to your Web pages but if your designs, architectures, and interactivity don’t provide that content they will leave.

 

Keep in mind that content is still king.

Basically, there are two types of Web Content:

=>Text
=>Multimedia

 

Text Web Content
It’s the written content that’s on the page, both inside images and in text blocks. The best textual Web Content is that text that has been written for the Web, rather than simply copy-and-pasted from a print source. Textual Web Content will also have good internal links to help readers get more information and aid in scanning the text. Finally, Web text will be written for a global audience as even local pages can be read by anyone around the world.

 

Multimedia Web Content
The other type of Web Content is multimedia. To put it simply, multimedia is any content that isn’t text, but it includes the following.

 

Images

 

Animation/Flash

 

Sound

 

Video

 

Images are the most common way to add multimedia to websites. Images on Web pages should be optimized, so that they download fast as it affect the site load speed.

 

Animation can be created using GIF images or using Flash, JavaScript, Ajax or other animation tools.

 

Sound is embedded in a Web page so that readers hear it when they enter the site or when they click a link to turn it on. Always keep in mind that sounds on Web pages can create frustration, especially if you turn it on automatically and don’t provide any way to turn it off easily.

 

Video is getting more and more popular on Web pages. But it can be challenging to add a video so that it works reliably and well across different browsers.

 

What should be there in your Web Content?

 

1)  It should be very simple, lucid and easy to read and understand.

 

2)  It should be original content (no copy-paste).

 

3)  Search Engine prefers the grammatically correct content first.

 

4)  Use optimum keywords and LSI (Latent Semantic Indexing) keywords after proper keyword analysis.

 

5)  Web Content should be written after proper SEO analysis.

 

Hope the above article will help you to write the content more SEO friendly & rich.

 

jQuery datepicker to show month and year only

jquery datepicker to show month year only

 

jQuery has very nice Date Picker library, but it can’t be customized to remove the date part, i.e. to show month and year only.
In some cases, you only need that the user selects the month and year mm/yyyy (month/year) as input without the day (like in credit card expiry date).Below is the code to show only the header of date picker with month and year selects(date will not show any more).

 

If you use this one, you have partially done but it create some confusion to user as it shows date as well and user have to select a date whereas it use only month and date.

 

$("#datepicker").datepicker({dateFormat: "mm/yy" });

For removing this confusion and hiding the date section completely, you can use the below code.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.js"></script>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>

<link rel="stylesheet" type="text/css" media="screen" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css">

<script type="text/javascript">
$(function() {
$('#expiryDate').datepicker( {
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'mm/yy',
minDate:'m', // restrict to show month greater than current month
onClose: function(dateText, inst) {
// set the date accordingly
var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
$(this).datepicker('setDate', new Date(year, month, 1));
},
beforeShow : function(input, inst) {
if ((datestr = $(this).val()).length > 0) {
year = datestr.substring(datestr.length-4, datestr.length);
month = jQuery.inArray(datestr.substring(0, datestr.length-5), $(this).datepicker('option', 'monthNames'));
$(this).datepicker('option', 'defaultDate', new Date(year, month, 1));
$(this).datepicker('setDate', new Date(year, month, 1));
}
}
});
});
</script>

<style type="text/css">.ui-datepicker-calendar { display: none; }</style>

<label for="expiryDate">Expiry Date:</label>
<input name="cc_expiryDate" id="expiryDate" class="date-picker" /> (mm/yyyy)

It will show calendar likes this.

jQuery datepicker show month and year only

jQuery datepicker show month and year only

Basic difference between GET and POST method in PHP

What are the basic difference between get and post method in php?

 

In form submission with GET method, browser constructs a URL by taking the value of the action attribute appending a? to it, then appending the form data set (encoded using the application/x-www-form-urlencoded). The browser then processes this URL as if following a link (or as if the user had typed the URL directly).

 

Submission of a form with POST method causes a POST request to be sent, using the value of the action attribute and data will treated according to the content type specified by the enctype attribute.

 

Here are the list of some differences between GET and POST methods.

 

1) GET allows only ASCII characters whereas no restrictions in POST, binary data (images and other files) is also allowed.

 

2) History of last data sent remain in browser history using GET but POST method never remain history.

 

3) GET data can be cached but POST never cached.

 

4) It is easier to hack data in GET method with respect to POST.

 

5) In GET a complete URL string with data can be bookmarked, but it can’t happen in POST.

 

6) In GET application/x-www-form-urlencoded encoding is possible but POST can opt multipart/form-data as well.

 

7) GET requests are re-executed. The browser usually alerts the user that data will need to be re-submitted using POST data.

 

8) In GET 2000 character maximum size (depends on browser).8 MB max size for the POST method.

 

9) GET method is visible to everyone (it will be displayed in the browser’s address bar) and has limits on the amount of information to send.
POST method variables are not displayed in the URL.

 

10) GET is less secure compared to POST.

 

11) GET method should not be used when sending passwords or other sensitive information.

 

12) There are restrictions on form data length in GET.