web 2.0

Wednesday, June 9, 2010

1stwebdesigner

Posted by Damass at 5:11 PM

1stwebdesigner

Add Motion To Website: jQuery Animation Plugins From 2010

Posted: 09 Jun 2010 02:00 PM PDT

In our niche it’s very important to be up to date with latest technologies and features available to impress new clients, show of in portfolio and add functionality more easily – using some advanced code snippets, plugins or hacks.

jQuery possibilities are growing rapidly and there are many people who play with code and discover some amazing combinations achieving effects you have never seen before!

You will find here many plugins which will help to add motion, 3d effects and animation to your website! This list will blow your mind away with possibilities – ready?!!!

1. AJAX-ZOOM – Image Zoom – Pan Gallery plugin

AJAX-ZOOM is a sophisticated image zoom & pan gallery plugin based on jQuery and PHP. With over 250 options it is very flexible and can be integrated into any website.

Download Now | View Examples

2. Image Rotator

Simply rotates an image by a certain degree or allows the user to rotate an image by dragging around a central axis.

Download Now | View Example

3. Cloud Zoom

The Cloud Zoom plugin is comparable to commercial image zoom products such as Magic Zoom. Compared to the popular jQZoom plugin, Cloud Zoom is smaller, has more features and more robust compatability across browsers.

Download Now | View Example

4. jQuery Before/After Plugin

Download Now | View Example

5. jQDock

Transform a set of images into a Mac-like Dock menu, horizontal or vertical, with icons that expand on rollover, and optional labels.

Download Now | View Example

6. Visual Lightbox – Create fantastic lightbox-style galleries and slideshows. jQuery LightBox Plugin.

Download Now | View Examples

7. Image Bubbles

Image Bubbles is a cool Flash-like effect that causes an image to bubble up and expand whenever the mouse rolls over it from within a series of images.

Download Now | View Example

8. jQuery Panel Magic

jQuery Panel Magic is a new take on website navigation. Using a matrix or grid style layout for your website, you can easily implement this plugin for small websites and web applications. It gives you more room for your design and provides a cool new approach to a sitemap.

Download Now | View Example

9. iCheckbox

Convert a checkbox or multiple checkboxes into iphone style switches.

Download Now | View Example

10. jqFancyTransitions

jqFancyTransitions is plugin for displaying your photos as slideshow with fancy transition effects.

Download Now | View Example

11. Images In All Size jQuery Plugin

Download Now | View Example

12. Text Effects

Download Now | View Examples

13. jCoverflip

jCoverflip is a jQuery cover flow widget that allows website administrators to present featured website content in a visually appealing manner. The widget is quick setup and is highly configurable, and can run as a Drupal Module or standalone.

Download Now | View Example

14. BxSlider

bxSlider is a jQuery content slider plugin that is light weight and easy to use.

Download Now | View Example

15. jScratchcard plugin

Download Now | View Example

16. jQuery Menu Style 1 – Drop Down Menu with Visual Effects

View Examples

17. Frame Animation Plugin for jQuery

Download Now | View Example

18. Cusor Hover Buttons

This plugin lets you create a two-layer button with one layer that follows the mouse. This method allows you to create some very professional effects on your site.

Download Now | View Example

19. jQuery carrousel

The core allows to create your own controls or effects. This plugin transform an “ul li” into an animated carrousel.

Download Now | View Example

20. 2D Transform

This plug-in utilizes the matrix filter in IE and the new CSS3 transform properties to 2d transform any DOMElement.

Download Now | View Example

21. jPhotoGrid

This plugin displays a list of image thumbnails in a grid and allows them to be zoomed open. It’s a cool and simple effect.

Download Now | View Example

22. jMagnify

jQuery jMagnify, plugin attach a ola effect to some text following the mouse position.

Download Now | View Examples

23. animaDrag: Animating Drag and Drop Plugin

Download Now | View Example

24. jOla

Download Now | View Example

25. Flight Board

This plugin sets a division to flip between text messages like a flight board at an airport. It alternates between two or more messages by flipping individual characters.

Download Now | View Example

26. 3D Cloud Carousel

This is a fast and cross-browser implementation of a 3d carousel – looks very nice, more like a Flash implementation. It can create dynamic reflections underneath the carousel items, is accessible and degrades nicely without JavaScript.

Download Now | View Example

27. 3D Feature Image Carousel

This plugin rotates images in a three dimensional (simulated) carousel. Optionally, all images can have a description element attached to them that pops up on an overlay whenever that image rotates to the center.

Download Now | View Example

28. Smooth Anchors jQuery Plugin

This plugin creates a simple animation for anchor links by quickly scrolling the page to the area where the anchor is at rather than just jumping right to the anchor like normal.

Download Now | View Example

29. HoverAttribute

HoverAttribute is a jQuery plugin that allows you to make (link-)elements more dynamic by making an attribute of that element show up on hovering.

Download Now | View Example

30. Expanding Grid

Creates grid system out of divs. On hover the active grid expands to ratio set by the config, fades out the background.

Download Now | View Example

How to Build a Live Visitor Tracking System for your Website

Posted: 09 Jun 2010 03:00 AM PDT

If you have a website, you are probably interested in knowing who visits you site. You might want to know the number of visitors, where are they from, how did they get to your site, etc. There are some online tracking options available, like google analytics or if you are using a hosting service they might offer you some statistics. But what if you want a personalized tracker that shows you only what you need? In this tutorial I will show you how to build one!

What are we going to build today?

I'll show you how to build a small tracker php script that saves the following information about your visitors in a database: their ip address, their location (country and city) based on their ip, the date and time of their visit, some information about the browser they used and their operating system, the referer (if they clicked on a link on another site to get to yours, you will know which site referred them) and the query string they searched for in case they were referred by a search engine. I will also show you how to check if the visitor was a bot (these are software applications that run automated tasks over the Internet). I'll show you how to write this small script and also a page with some statistics from the database.

You can download the source code here. You can also see a live demonstration here.

First, we need a table in the database to hold the information about the visitors. We'll call it “tracker”.

We'll need the following columns in the table: id, date, time, ip, country, city, query_string, http_referer, http_user_agent, isbot (this will hold the value 1 is the user is a bot and 0 otherwise).

Here's the sql command needed to create the table:

  CREATE TABLE IF NOT EXISTS `tracker` ( `id` int(11) NOT NULL auto_increment, `date` date NOT NULL, `time` time NOT NULL, `ip` text NOT NULL, `country` text NOT NULL, `city` text NOT NULL, `query_string` text NOT NULL, `http_referer` text NOT NULL, `http_user_agent` text NOT NULL, `isbot` int(11) NOT NULL, PRIMARY KEY  (`id`) );

Next, we’ll need a small php script that finds out all the needed info and inserts it into the database.

Here are the things we will need to do:

  • Get the necessary info from the server
  • Find the location based on the ip address
  • Check if the visitor is a bot
  • Insert everything into the database

Here's the code to retrieve the information from the server:

  $ip = $_SERVER['REMOTE_ADDR']; $query_string = $_SERVER['QUERY_STRING']; $http_referer = $_SERVER['HTTP_REFERER']; $http_user_agent = $_SERVER['HTTP_USER_AGENT'];

$_SERVER is an array containing information such as headers, paths, and script locations. The entries in this array are created by the web server. We will save the ip of the visitor ($_SERVER['REMOTE_ADDR']), the referrer ($_SERVER['HTTP_REFERER']), the query string user to search ($_SERVER['QUERY_STRING']) and the data about the visitors browser and operating system (SERVER['HTTP_USER_AGENT']).

The function to check if a visitor is a bot looks like this:

  function is_bot() { $botlist = array("Teoma", "alexa", "froogle", "Gigabot", "inktomi", "looksmart", "URL_Spider_SQL", "Firefly", "NationalDirectory", "Ask Jeeves", "TECNOSEEK", "InfoSeek", "WebFindBot", "girafabot", "crawler", "www.galaxy.com", "Googlebot", "Scooter", "Slurp", "msnbot", "appie", "FAST", "WebBug", "Spade", "ZyBorg", "rabaz", "Baiduspider", "Feedfetcher-Google", "TechnoratiSnoop", "Rankivabot", "Mediapartners-Google", "Sogou web spider", "WebAlta Crawler","TweetmemeBot", "Butterfly","Twitturls","Me.dium","Twiceler"); foreach($botlist as $bot) { if(strpos($_SERVER['HTTP_USER_AGENT'], $bot) !== false) return true; } return false; }

I have found a list of bots. To check is a visitor is a bot, we need to check the $_SERVER['HTTP_USER_AGENT'] variable.

Finding out the location details using the ip address is a bit more difficult. We will need to make a request to a server that finds this sort of information, get the result from the server (it sends an xml file), parse the result and get the country and city names.

The php code looks like this:

 $url = 'http://ipinfodb.com/ip_query.php?ip='.$ip; $init = curl_init($url); curl_setopt($init, CURLOPT_RETURNTRANSFER, true); curl_setopt($init, CURLOPT_TIMEOUT, 10); $exec = curl_exec($init); $info = curl_getinfo($init); curl_close($init); if($info['http_code'] === 200) { // parse the xml and get country and city from exec $objDOM = new DOMDocument(); $objDOM->loadXML($exec);  $country1 = $objDOM->getElementsByTagName("CountryName"); $country  = $country1->item(0)->nodeValue; $city1 = $objDOM->getElementsByTagName("City"); $city  = $city1->item(0)->nodeValue; }

We first define the url of the server (http://ipinfodb.com/ip_query.php) and send a request to it with the visitors ip address. We're going to use curl to send the request to the server and retrieve the result. curl is a tool for transferring data using various protocols. We first initialize the session, set a few parameters and then send the request. The result will be saved in the $exec variable. The result from the server is an xml file. We need to parse it and get two values, country and city. There values are found in the "CountryName" and "City" tags. We're going to use the DOMDocument class to parse the xml file.

We set the $isbot variable to 1 if the visitor is a bot and 0 otherwise. We will save this variable in the database.

  if (is_bot()) $isbot = 1; else $isbot = 0;

We'll get the system date and time

  $date = date("Y-m-d"); $time = date("H:i:s");

We’ve retrieved all the information we wanted! Next, we will have to add all the information into the database.

We need to set the database server, database name, user name and password, then connect to the database server and the database.

  $server = "SERVER NAME"; $username = "USER NAME"; $password = "PASSWORD"; $database = "DATABASE NAME"; $connId = mysql_connect($server,$username,$password) or die("Cannot connect to server"); $selectDb = mysql_select_db($database,$connId) or die("Cannot connect to database");

Then, we run the query to insert the information into the tracker table.

  $query = "insert into `tracker` (`country`,`city`,`date`, `time`, `ip`, `query_string`, `http_referer`, `http_user_agent`, `isbot`) values ('$country','$city','$date', '$time', '$ip', '$query_string', '$http_referer' ,'$http_user_agent' , $isbot)"; $result = mysql_query($query);

All the information we wanted is now saved in the database!

All we need to do now is include this script in the main page of the site and we can track the visitors! We could also add this script to the other pages of the site, add another variable to hold the page name and insert this in the database as well. This way, we will know exactly what pages did the user browse on the site.

I'll also show you how to create a page to view some statistics. There are loads of statistics that you may want to view using the information from the database. I'll show you a small example, which will do the following:

  • show the number of unique visitors
  • show a table with all the visitors

The code for this is shown below.

  <html> <head> <title>Statistics</title> </head>  <body>  <h1>Statistics</h1>  <br/><br/>  The number of unique visitors is: <?php // connect to the database  // fill in your databasa data here! $server = "SERVER NAME"; $username = "USER NAME"; $password = "PASSWORD"; $database = "DATABASE NAME";  $connId = mysql_connect($server,$username,$password) or die("Cannot connect to server"); $selectDb = mysql_select_db($database,$connId) or die("Cannot connect to database");  // get the number of unique visitors $query = "select distinct ip from tracker"; $result = mysql_query($query); $number = mysql_num_rows($result);  // show the number echo $number; ?>  <br/><br/>  Site's visitors: <br/><br/> <table border="1"> <tr> <th>Id</th> <th>IP</th> <th>Country</th> <th>City</th> <th>Referer</th> <th>Is a bot?</th> </tr> <?php // get the list of visitors $query = "select * from tracker"; $result = mysql_query($query); while ($row = mysql_fetch_array($result)) { ?> <tr> <td><?php echo $row['id'];?></td> <td><?php echo $row['ip'];?></td> <td><?php echo $row['country'];?></td> <td><?php echo $row['city'];?></td> <td><?php echo $row['http_referer'];?></td> <td><?php if ($row['isbot']==1) echo "yes"; else echo "no";?></td> </tr> <?php } ?> </table>  </body>  </html>

What we've done was to retrieve the information from the database using the appropriate sql queries and print the information on the screen.

And that's about it! We now have a visitor tracker!

If you have questions, comments or need further details on something, please let me know. I'd be happy to help!

<html>

<head>
<title>Statistics</title>
</head>

<body>

<h1>Statistics</h1>

<br/><br/>

The number of unique visitors is:
<?php
// connect to the database

// fill in your databasa data here!
$server = “SERVER NAME”;
$username = “USER NAME”;
$password = “PASSWORD”;
$database = “DATABASE NAME”;

$connId = mysql_connect($server,$username,$password) or die(“Cannot connect to server”);
$selectDb = mysql_select_db($database,$connId) or die(“Cannot connect to database”);

// get the number of unique visitors
$query = “select distinct ip from tracker”;
$result = mysql_query($query);
$number = mysql_num_rows($result);

// show the number
echo $number;
?>

<br/><br/>

Site’s visitors:
<br/><br/>
<table border=”1″>
<tr>
<th>Id</th>
<th>IP</th>
<th>Country</th>
<th>City</th>
<th>Referer</th>
<th>Is a bot?</th>
</tr>
<?php
// get the list of visitors
$query = “select * from tracker”;
$result = mysql_query($query);
while ($row = mysql_fetch_array($result))
{
?>
<tr>
<td><?php echo $row['id'];?></td>
<td><?php echo $row['ip'];?></td>
<td><?php echo $row['country'];?></td>
<td><?php echo $row['city'];?></td>
<td><?php echo $row['http_referer'];?></td>
<td><?php if ($row['isbot']==1) echo “yes”; else echo “no”;?></td>
</tr>
<?php
}
?>
</table>

</body>

</html>

0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)

Apture