Category Archives: Web Graphics & design

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.

 

AJAX Loading Icon Generators Tools

In the field of web development, generally you need to show indicator image until the code/response will ready to display.

 

You can also call the indicator image as an “AJAX loading” icon or a “preloader image”. It is commonly used on AJAX-base sites and applications, informing the user that the site is still processing the request and fetching some data.

 

You all know how important the UI is, so you always want the very good indicator image, If I am not wrong designer is not always ready to do these type of small stuff for you 🙂

 

No worries, we have very good live solutions for that and it is totally free and customizable to fulfilling your need.

 

AJAX preloader images/gifs

Create your AJAX preloader images online dynamically without any head-ache

 

The main customizations you can do are

1) Select the AJAX image indicator according to your wish
2) Set background image color or can make transparent
3) Set foreground color
4) Set size of the indicator GIF
5) Update animation speed
6) Size of the image and many more

 

AJAX Loading Icon Generators Tools

http://preloaders.net/

http://www.ajaxload.info/

http://www.loadinfo.net/

http://heartcode.robertpataki.com/canvasloader/

http://xeosoft.com/ajaxloader

http://spiffygif.com/

http://cssload.net/

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.

 

Just 3 simple steps to go with jQuery FancyBox

Download the latest jQuery FancyBox package by jQuery FancyBox Website

 

1. Set the headers
The first thing to do is include the required files in the header of your page.
For the FancyBox, first the jQuery library, then the plugin script, and an additional style sheet files.

 

/* Include jQuery - try to use latest version */
<script type="text/javascript" src="your_path_to/jquery.js"></script>

/* jQuery fancybox plugin */
<script type="text/javascript" src="your_path_to/jquery-fancybox.js"></script>

/* Additional Style for fancybox */
<link href="your_path_to/fancybox.css" rel="stylesheet" type="text/css" />

 

2. Next step is to declare how and when the FancyBox will be displayed on your page.The below code tells that every link that has a class fancy box will have its content opened in a fancy box.

It can be added in the page header (as below) or in a separate (.js) file.

 


<script type="text/javascript">

$(document).ready(function(){
$(".fancybox").fancybox();
});

</script>

 

3. Finally, you just need to create a link whose class will have to be fancy box (as you have declared in fancybox function) and whose href attribute will need to contain the path of the page/element you wish to open within the fancy box.


<a href="page_target_path" class="fancybox">How's it!!</a>

jQuery FancyBox Plugin & fancyBox default options

FancyBox is so easy to use and renders page really nice, specially with images, html content and multi-media (video embedding). It’s a Mac like zooming tool that you can customize very well and really looks amazing 🙂

 

Below are the default options of jQuery fancybox function, user can easily set the options value according to his need.

 

 fancyBox default options

 

 

$(".fancybox").fancybox({

padding : 10,
margin : 40,
opacity : false,
modal : false,
cyclic : false,
scrolling : 'auto', // 'auto', 'yes' or 'no'

width : 560,
height : 340,

autoScale : true,
autoDimensions : true,
centerOnScroll : false,

ajax : {},
swf : { wmode: 'transparent' },

hideOnOverlayClick : true,
hideOnContentClick : false,

overlayShow : true,
overlayOpacity : 0.7,
overlayColor : '#777',

titleShow : true,
titlePosition : 'float', // 'float', 'outside', 'inside' or 'over'
titleFormat : null,
titleFromAlt : false,

transitionIn : 'fade', // 'elastic', 'fade' or 'none'
transitionOut : 'fade', // 'elastic', 'fade' or 'none'

speedIn : 300,
speedOut : 300,

changeSpeed : 300,
changeFade : 'fast',

easingIn : 'swing',
easingOut : 'swing',

showCloseButton : true,
showNavArrows : true,
enableEscapeButton : true,
enableKeyboardNav : true,

onStart : function(){},
onCancel : function(){},
onComplete : function(){},
onCleanup : function(){},
onClosed : function(){},
onError : function(){}

});

Cross Browser Web Fonts Using @font-face support

Best way to use custom fonts on your site

cross browser web fonts

 

If you use custom font in your website using @font-face,then it may possible that it will not display fine in some browsers.

 

This is due to the font-face browser dependency (every browser supports @font-face slightly differently).

 

for resolving the cross browser web fonts we have to use different font file for different browser.

 

Here is the link from where we can get a complete kit of a font files.

font-face Kit Generator
http://www.fontsquirrel.com/fontface/generator

 

It is very simple to use.
Upload your font file (generally with .ttf extension) with [+Add Fonts] button.
Select your option and check agreement check box.
Click on [Download your kit] button.

 

Here you will get a prepared zip file for the same.
Download that and use according to your need.

 

Put font file in a folder, give the path of the same in css file.
Use the css and you will found the same result,you want to get.

 

You also found a specimen/example to use the font-face in the kit.

 

Basic web fonts syntax

The @font-face rule

 

First you insert a block in your CSS, describing a web font you want to embed into your page. This information is all wrapped inside a @font-face block

@font-face {
  font-family: 'Abril Fatface Regular';
  src: url("AbrilFatface-Regular.otf");
}

 

Standard font-family declaration

 

h1 {
font-size: 8em;
font-family: 'Abril Fatface Regular', sans-serif;
}

 

Other @font-face options

 


@font-face {
font-family: 'Abril Fatface';
src: url("AbrilFatface.otf");
font-weight: bold;
font-stretch: condensed;
unicode-range: U+0026;
}

 

If you want to know why all this works as above, follow Paul Irish’s Bulletproof @font-face syntax.