Home Notes Web development
Pranshuarya.com

Sponsored Links


Development
How to set a cookie using PHP or JavaScript E-mail
Friday, 22 January 2010 10:27

In my jQuery Woopra plugin, I have added the feature to exclude visits by cookies.  Since Woopra does not yet have the ability to set cookies itself like Google Analytics, you must set it yourself.  Thankfully it's pretty easy to do.  Below I will show you how to set a cookie to use with the jQuery Woopra plugin to exclude visits based on that cookie.

Place the following within <?php and ?> tags in a PHP file.

 
$value = 'true';
setcookie('woopraExclude', $value, time()+(365*24*60*60))
 

The code above sets a cookie with:

  1. name = woopraExclude
  2. value $value = 'true'
  3. expiration = current time plus one year

This is the method I use on my sites.  I've placed the code below in a plain HTML file that loads as the start page on all my browsers, ensuring that all my visits to my own domains don't count as visits in analytics.

To set a cookie with JavaScript, I recommend using the webtoolkit.cookies.js script that comes bundled with the jQuery Woopra plugin.  To set a cookie using that script, place the following within <script type="text/javascript"> and </script> tags:

 
var Cookie = new CookieHandler();
var excludeCookie = Cookie.setCookie('woopraExclude','true',365*24*60*60);
 

The code above sets a cookie with:

  1. name = woopraExclude
  2. value $value = 'true'
  3. expiration = current time plus one year

To make use of this cookie in your Woopra analytics code, you would initialize your Woopra tracking function as:

 
$.trackWoopra({cookie: 'woopraExclude'});
 

 
Speeding up your WordPress site with plugins E-mail
Thursday, 14 January 2010 18:00

It's somewhat ironic that at one end we're collecting more and more data, we're clammoring for more and more bandwidth and storage space and ways to access it.  Yet on the other hand we obsess over the kilobytes and even bytes we can shave off our webpages in order to have them load fractionally faster.  We minify, we GZip, we cache, we do all sorts of things...anyway, it's just an observation I thought was interesting.

I wrote earlier about ways to speed up your website.  Those were mainly .htaccess fixes.  If you use WordPress, however, a lot of the hard work is taken care of for you by some excellent plugins out there.  Here are a few I've tried, and my experience with them on WordPress 2.8.6:

 Autoptimize

Autoptimize is advertised as a do-it-all plugin for your WordPress site, and it works pretty well although I haven't tried all its features.

Observations and conflicts

  1. Optimization of JavaScript code broke Hackadelic Slider Notes on one of my pages.  Enabling the "Add try-catch wrapping?" option, however, fixed that issue.
  2. "Optimize CSS Code" breaks WP-Cufon
  3. I have enabled "Rewrite Image URLs" and changed the "Image Base URL" to use CoralCDN's nyud.net URL appendage, but I haven't noticed it working on the images on my WordPress site.
  4. I enabled "Rewrite JavaScript URLs" and "Rewrite CSS URLs" and they work fine.  (I'm using CoralCDN's nyud.net for these as well.)


 Free CDN

Free CDN lets you use Coral CDN to reroute several types of assets on your website, including CSS, JavaScript, images, and external content.

Observations and conflicts

  1. This plugin worked unreliably in my experience.  I tried to figure out which other plugin(s) it was conflicting with but couldn't narrow it down because it's most likely more than one.  When it was working, it screwed up CSS rendering and some JavaScript functionality.  It should be noted that this might not be the plugin's fault at all.  It has been noted elsewhere that CoralCDN is better for bigger assets (pictures, movies, MP3s) than smaller ones (images, CSS, and JavaScript files).  Using CoralCDN with Autoptimize works fine, so most likely the problem is with the plugin.
  2. It seems to conflict with one of either the Star Rating for Reviews or WP Movie Ratings plugins, or maybe both.  The Movies page on my blog shows up blank when this plugin is activated, and both of those plugins are used on only that page.


 JavaScript to Footer

JavaScript to Footer is a no-frills plugin that does just what the title says: It moves all your JavaScript to the footer of the page for faster loading.

Observations and conflicts

  1. Works as advertised.  There is nothing to configure, just turn it on and go.
  2. It breaks WP-Cufon, which makes me wish it let you configure which files it moves and which ones it leaves alone.

 GZIP Output

Another simple plugin with nothing to configure, GZIP Output does just what it says: It Gzips the HTML content of your WordPress site before sending it out.

Observations and conflicts

  1. I didn't find this plugin conflicting with any other plugins.  However, I think going the .htaccess route is a more efficient way than using a plugin for Gzipping your HTML content.

 Parallel Load

Parallel Load loads all your JavaScript files in parallel, with the additional option to move them to the footer of your webpage.

Observations and conflicts

  1. jQuery fails to load with this plugin enabled, so it won't work for me.

 My CDN

By the author of Parallel Load, My CDN rewrites your URLs to use a CDN.  You can specify different URL for CSS, JavaScript, and theme files.

Observations and conflicts

  1. Rewriting the URLs to use CoralCDN's nyud.net breaks the loading of CSS files, similar to Free CDN.  Again, since CoralCDN works fine with Autoptimize, the problem is most likely with the URL rewriting method used in the plugin (I am just speculating because I haven't looked inside the plugin code).
  2. The good news is that this plugin does not break the site altogether like FreeCDN does.  It's a much smaller plugin with fewer features, which means fewer chances for conflicts with other plugins.

Please remember that these are just my experiences with these plugins.  Yours might be different, depending on the version of WordPress and other plugins you're running.

 
WordPress plugin: Flash Header Rotator E-mail
Sunday, 20 December 2009 15:36

Flash Header Rotator is an extension of the Header Image Rotator plugin by Matthew Hough that allows embedding of Flash SWF files along with the image files the original plugin allows.  Please see the original plugin's site for documentation on its features.  Below I will only be outlining the extended Flash features I have added to it.

Features

  • Ease of use: Simply upload your swf files to the wp-content/header-images folder and they will be rotated along with any image files in there
  • SWFObject: The plugin uses SWFObject to allow for a more robust embedding.  It detects if SWFObject is already loaded from another plugin.  If not, it loads it for you.
  • It automatically detects the dimensions of the Flash movie, but also allows you to override them manually.
  • You can specify from the WordPress Administration panel the minimum version of Flash you want your site's viewers to have for the Flash movies to display.

Usage

All you need to do is activate the plugin and upload your files for the plugin to work.

  • If you would like to override the default dimensions, rename the movie file as:

filename_width_height.swf

So if you have a file named kiki.swf and you want to show it at 700x200, rename it kiki_700_200.swf.

In the WordPress Administration panel, under Settings > Flash Header Rotator, you can set the following options:

  1. The minimum Flash version required for your Flash movies to display.
  2. The CSS you want to apply to the <div id="flash-_-header"></div> that wraps the Flash movie.
  3. The plugin uses the wmode: 'transparent' parameter to render the background of Flash movies transparent.  Since most headers contain navigation links, this setting is on by default.  This setting can be turned off on the plugin settings page.
  4. The plugin lets you specify whether you want SWFObject to publish your movie statically or dynamically.  The default setting is static.  See the official documentation here for more details.

Download

Download Flash Header Rotator WordPress plugin

 
jQuery Woopra plugin part 2: Usage E-mail
Monday, 14 December 2009 18:11

I will document here how I am using this plugin, through which you can determine how best to use it for yourself.

pthesis.com

I tested the jQuery Woopra plugin on my own portfolio website, p()thesis.  I'll present the index.html code in bits and explain as I go along.

<head>
<title>Web developer and designer in Boulder, Colorado</title>
<meta content="en-us" http-equiv="Content-Language" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<script src="http://www.google.com/jsapi?key={your key}" type="text/javascript"></script>
<script type="text/javascript">google.load("jquery","1.2");</script>
<script type="text/javascript" src="includes/jquery.livequery.js">script> 
<script type="text/javascript" src="includes/jquery.google-analytics.js"></script>
<script type="text/javascript" src="includes/jquery.woopra-analytics-min.js"></script>
<script type="text/javascript" src="includes/webtoolkit.cookies.js"></script>
<script type="text/javascript" src="functions.js" mce_src="functions.js"></script>
<script type="text/javascript">
$.trackWoopra({cookie : 'woopraExclude'});
$.trackPage('UA-xxxxxxx-xx');
</script></head>

Pretty standard stuff:

  1. Declare meta content
  2. Load jQuery - I load it via GoogleAJAX APIs
  3. Load jQuery Livequery plugin, which I will be using for this plugin
  4. Load functions.js which contains the JavaScript functions used in the site
  5. Load jQuery Woopra plugin, either the standard or the minified version (I've also left in the jQuery Google Analytics plugin for demonstration purposes)
  6. Load the Webtoolkit Cookies script - this is only necessary if you want to exclude visits by cookies (See here for how to set a cookie using either PHP or this simple script)
  7. Initialize jQuery Woopra plugin with the cookie parameter to exclude visits from all visitors who have the cookie woopraExclude set:

<script type="text/javascript">
$.trackWoopra({cookie : 'woopraExclude'});
</script>

The next step is to load the page HTML content as usual.  At the bottom of the document is where all my JavaScript is:

<script type="text/javascript">
$(document).ready(function(){
...
   $('#pfolio').click(function(){
        $('#portfolio').show('slow')
...
   })
// location for analytics code
})
</script>

Here are the few lines that enable Woopra analytics on my site via the jQuery Woopra plugin.  I've left in the jQuery Google Analytics plugin code so you can see the similarities and differences in syntax between the two.

$('#refine_by').livequery(function(){$('#refine_by').track({
category : 'refine_by',
action : 'click'})})
    $('#refine_by').livequery(function(){$('#refine_by').trackEvent({
title : 'refine_by'})
})
    $('#sites ul li').livequery(function(){$('#sites ul li').not('#reset_sites').track({
category : 'site',
action : 'click',
label : function(element) {return element.text()}}
    )})
    $('#sites ul li').livequery(function(){$('#sites ul li').not('#reset_sites').trackEvent({
title : 'site',
label  : function(element) {return element.text()}
})})
    $('#categories ul li').livequery(function(){$('#categories ul li').track({
category : 'category',
action : 'click',
label : function(element) {return element.text()}
})})
    $('#categories ul li').livequery(function(){$('#categories ul li').trackEvent({
title : 'category',
label : function(element) {return element.text()}
})})

 


Let's go over a couple of these lines.

$('#refine_by').livequery(function(){$('#refine_by').trackEvent({
title : 'refine_by'})
})

refine_by

  1. $('#refine_by') - the element being tracked
  2. .livequery(function()($('#refine_by') - because the element is not created when the DOM is ready, I am using the livequery plugin to actively apply the tracking rule each time the #refine_by element gets created via AJAX.  If you're using jQuery 1.3 you can use the built-in live method to achieve the same purpose.
  3.  .trackEvent({title : 'refine_by'}) - the only parameter I'm passing through in this example is the title of the event

Now let's look at one of the more complex examples, where I'll be tracking the sites in the list in #sites ul li:

sites_ul_li

$('#sites ul li').livequery(function(){$('#sites ul li').not('#reset_sites').trackEvent({
title : 'site',
label  : function(element) {return element.text()}})
})

The main difference here is that I'm passing a function to the label property.  This particular function evaluates the text of the li element that is clicked on and stores it in Woopra.  This lets me track which site in the list the visitor has clicked on.

To track an a element I might use something like this:

$('div#site_details a').trackEvent({
title : 'site_details',
label : function(element) {return element.attr('href')}
})

I didn't use livequery in this statement because of where it was placed in my code.  I placed it where the a elements are created, so there's no need to apply the code to any elements that haven't yet been created.  The label property is now storing the URL of the a element being tracked.

Note that all a elements are being tracked, and whichever particular one is clicked, that one's URL will be returned.  So for example, in the example below, there are three a elements (in red).

site_details_a

 
jQuery Woopra plugin part 1: Introduction E-mail
Monday, 14 December 2009 14:04

Taking inspiration from Christian Hellsten's jQuery Google Analytics plugin, and using it as a starting point, I have developed a jQuery plugin to implement Woopra analytics in your application (download).  Right now, in version 1.1.5:

It adds the following methods to jQuery:

  • $.trackWoopra(options) - Adds Woopra tracking on the page from which it's called.  This is the only required method to enable Woopra tracking.
  • $.woopraEvent(options) - Tracks an event using the given parameters
  • $('a').trackEvent(options) - Adds event tracking to element(s)

This method is required, and can be used simply as:

<script type="text/javascript">
$.trackWoopra();
</script>

or:

<script type="text/javascript">
$.trackWoopra({
domain : 'http://www.mydomain.com',
url : 'http://www.myurl.com',
title : 'My page',
cookie: 'someCookie'});
</script>

All parameters in example above are optional:

  • domain - use it to specify root domain (to enable tracking of sub-domains)
  • url and title parameters must be passed in together as a pair; use them to give pages custom names in Woopra
  • cookie allows you to exclude visitors who have the cookie set (someCookie in this case)

See here for more information on using these optional parameters.  (The cookie feature is not yet built into Woopra, so you won't see any information on that on the Woopra site.  Once they implement it into the core, I will remove this add-on feature and incorporate their implementation.  You can learn more about how to use my current implementation here.)

Used like:

<script type="text/javascript">
$.woopraEvent({
title : 'category_click',
label : 'Category1',
url : 'url1'
event_name : 'click'});
</script>

This method is best called from the next one, $.trackEvent(options).

Takes the following parameters:

  • title - required.  Name for the event being tracked.
  • event_name - optional.  Name of event you want to bind to.  Default is 'click'.
  • as many (key,value) pairs as you want your event to have

Example usage:

<script type="text/javascript">
$('#content #links a').trackEvent({
title : 'Links_hover',
label : function(element) {return element.text()},
url : function(element) {return element.attr('href')},
event_name : 'mouseover'});
</script>

Similar to the jQuery Google Analytics plugin, you can enter functions as property values, and they will be evaluated for the element that is the target of the event triggered.  However, whereas Google Analytics takes a specified number of parameters in its event tracking object, Woopra lets you specify custom properties and values, so this plugin was modified to accomodate for that.

In this example, everytime a visitor hovers over a link (<a> element) inside #content #links, a 'mouseover' event will be registered in Woopra, with the following properties:

  1. title: Links_hover
  2. label: the text between the <a> and </a> tags
  3. url: the url in the href attribute of the link clicked

Version 1.1.5 - added ability to exclude visits with cookies, similar to Google Analytics.

Version 1.1 - removed setTracker property which is no longer supported by Woopra.  To download older releases, visit the official jQuery plugin page.


View jQuery Woopra plugin part 2: Usage

Download

Download jQuery Woopra plugin


 
How to: Check Google Analytics event tracking E-mail
Wednesday, 25 November 2009 15:52

Google Analytics offers Event Tracking, which is useful for tracking JavaScript and Flash events.  But there's at least a day's delay before you can get analytics to show up, so if you're testing your own or a client's site, it could take a while to get things right.

There is, however, a way to check if your event-tracking code is working on your pages.  This way you don't have to wait to log in to Analytics the next day and see if your events registered.

Required ingredients

  1. Implementation of Google Analytics tracking code in the website you want to track
  2. Mozilla Firefox
  3. Firebug extension for Firefox

What to do

It's really quite simple:

  1. Load up your website and start up Firebug.  If you have screenspace you would want to pop Firefox out of the browser window into its own window.
  2. Enable the Net panel in Firebug.
  3. Once you've got the website up, click around or do whatever to trigger the events are you want to track.
  4. If event tracking is working, you should see an entry like the following upon triggering your event:
  5.  

    Firebug Net panel

     

  6. Go ahead and click the "+" button to the left and select "Params", which will show you something like:
  7.  

    Firebug Net panel

     

  8. What you're looking for is the highlighted entry, because this shows you the parameters you entered in your event-tracking code.  In my case, the code was:
  9. page_Tracker._trackEvent('site' , 'click' , 'Pkstore');

  10. So now you know that event-tracking is working for this event.  You can check other events in the same way.
 
Speeding up your websites E-mail
Thursday, 29 October 2009 15:31

I've run YSlow on several websites, including my own, and it gives some good suggestions for speeding up your website.  So here are a few tips I've found from around the web for generally speeding up a website:

ETags and Expires Headers

Update

I have changed the code below to the following, from this page:

<IfModule mod_headers.c>
Header unset ETag
FileETag None
<FilesMatch "(?i)^.*\.(ico|flv|jpg|jpeg|png|gif|js|css)$">
Header unset Last-Modified
Header set Expires "Fri, 21 Dec 2012 00:00:00 GMT"
Header set Cache-Control "public, no-transform"
</FilesMatch>
</IfModule>


These can be added by adding the following to your .htaccess file (from here):

<IfModule mod_headers.c>
Header unset ETag
Header unset Last-Modified
</IfModule>
FileETag None

<FilesMatch "\.(ico|gz|JPG|jpg|jpeg|png|gif|js|css|swf)$">
Header unset Cache-control
Header set Expires "Wed, 28 Apr 2010 20:00:00 GMT"
</FilesMatch>

The first of these requires mod_headers, and the latter mod_expires to be enabled on your Apache server.

Gzip


Update

If your site runs on cPanel and you have access to it, you can also turn on compression - either only for certain extension or for all files - by going into Optimize Website from the main cPanel screen.  You'll see the following:

cPanel

If you don't have access to cPanel, you can use the following in your .htaccess file (instead of what's posted below).  This will compress all content except for file extension types you specify:

SetOutputFilter DEFLATE
SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png)$ \
    no-gzip dont-vary
SetEnvIfNoCase Request_URI \
    \.(?:exe|t?gz|zip|bz2|sit|rar)$ \
    no-gzip dont-vary
SetEnvIfNoCase Request_URI \.pdf$ no-gzip dont-vary
In this example the following extensions are excluded: exe, tar.gz, zip, bz2, sit, rar, and pdf

This requires that mod_gzip or mod_deflate be enabled on your server.  I found several solutions to add this to your site, so I'll list them all:

To compress all text and HTML:

AddOutputFilterByType DEFLATE text/html text/plain text/xml

To compress certain file types by extension:

<Files *.html>
SetOutputFilter DEFLATE
</Files>

Here's the other route:

AddOutputFilterByType DEFLATE text/html text/css text/plain text/xml application/x-javascript
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html

There's also the PHP route, which is to add the following to the top of each of the files you want to compress:

if (substr_count($_SERVER['HTTP_ACCEPT_ENCODING'], 'gzip'))
ob_start("ob_gzhandler");
else ob_start();

It seems there are plugins available for both WordPress and Joomla to help with compression and mini-fication:

Finally, this seems to be the most popular place to test whether your site is being transmitted compressed.  (Here's another site.)These are the most effective site-wide changes you can make.  Other than that, you can individually compress JavaScript and CSS files, and optimize your site's images.

 
AEI Dish Network E-mail
Monday, 05 October 2009 17:18

AEI Dish Inc. is a Dish Network regional installer for satellite TV and satellite Internet.  AEI Dish Network has been in business since 1997.

The website was developed on WordPress with Thesis, with heavy JavaScript (with jQuery) and PHP customizations.

 

The three feature boxes and sidebar on the right are instituted via the Improved Include Page plugin.

 

Other features include:

  • Custom font for headers is implemented via Cufon, and incorporated using the WP-Cufon plugin
  • Header image is specified via a custom field, so each page can have its own unique header
  • Dynamic drop-down menus are CSS-only based, with a small jQuery solution for potential IE problems
  • Yoast Breadcrumbs plugin modifed to display slugs instead of page titles

AEI Dish Network


Carousel

The carousel is uses the jCarousel Lite jQuery plugn, and I hand-coded the entire functionality.  All code and content are stored in the WordPress page and not in any back-end file, so upgrading is not an issue.

 

Carousel


Accordion

The accordion uses the Hackadelic Sliding Notes plugin for WordPress.

 

Accordion


Feature boxes

The sidebar on the left is also implemented via Improved Include Page, so each page can have its own unique sidebar.

 

Support

 
«StartPrev12345NextEnd»

Page 1 of 5