MDBitz Development Resources

Google Analytics has powerful filtering functionality for users to easily segment their statistics to track views of sub-directories, sub-domains, traffic sources, as well as a multitude of other filtering options. These may seem confusing the first time you use them but once you understand how filters work you will find them a handy tool.

Filters are used to determine what data is included or excluded from a Profile. While a Profile is an analytics report that can have filters assigned to it. One very important item to understand is that if you apply a filter to a profile as long as that filter is applied any analytics data that doesn’t match your filter is not saved and once the filter is removed that data is still not going to show up for the period the filter was present. Therefore it is good practice to keep an original profile of a site available so that if you create a profile and accidentally filter out data you want you can always go to the original profile to search for that information not in your filtered profile.

That being said lets get on with the introduction to using filters. To begin with lets focus on how to create a profile. Once you have logged into analytics you view profiles by select an Account from the Accounts Overview page. Selecting an account takes you to the Account Detailed page where you can see all your profiles for that account. To create a new profile one would simply select the add new profile link. From the Create new profile page you are presented with the option of creating a profile for a new domain or for an exising domain. You would select new domain if you want to track a sub-domain and existing if you want to track filtered data such as views of a sub directory. Enter the requested information and you have created a new Profile.

To apply filters to a profile you select the edit link next to the profile followed by choosing new filter on the Profile Details page. In the Filters Administration page you can create a new filter or apply an existing filter to a profile. In our case lets assume we want to have our new filter track the sub directory /test/. To do this we would say new filter and give it a name. In the options we would choose predefined and select include > traffic to the sub-directories > that begin with and enter /test/ in the input field. Click save an you have created your first filter. Now when visitors come to your site their information will be saved in the original profile and if they visit the /test/ sub-directory of your site then their information will be stored in this profile as well.

That is all there is to it. You can of course create more advanced filters to exclude content or visitors from ip address, referral sites, etc. However the main items to know is that with filters any data that gets excluded from that profile is lost permanently and that it is best to keep a clean profile available in the case that you are adding new filters that you are unsure of and have the need to view excluded data.

It is very common to have an archive in your WordPress blog displaying a list of the months that you have created a post on your blog. This navigation is the result in most cases of the wp_get_archives function of WordPress. However you may not know that you can utilize this same function to display a list of your most recent posts or to display yearly archives, you can even display the number of posts in an archive if desired. These navigational links can be created by use of the type, limit, and show_post_count parameters that can be passed to the wp_get_archives function.

To get started lets look at each of these 3 parameters individually.

• type – the type parameter is used to tell wordpress what type of archive you would like returned. The most commonly used values are “monthly” (the default), “yearly”, and “postbypost” which returns a list of your posts.
• limit – the limit parameter is used to tell wordpress the max number of items you want returned in your archives.
• show_post_count – this parameter as the name implies will cause the number of posts in each archive item to be displayed. So if your archive was “monthly” and you did 12 posts in December 2009 then 12 would be displayed in the link. Please note that on “postbypost” archives this has no effect

Now that you are familiar with the options lets assume you would like to display a Recent Posts archive where you have links to the last 5 posts you did. To do this you would edit the appropriate template file that you would want the list to be displayed in and call the wp_get_archives function with limit=5 and type=”postbypost”. The exact code would look like the following.

<ul class="nav">
    <?php wp_get_archives('type=postbypost&limit=5'); ?>
</ul>

If you wanted to display the last 12 months in your monthly archive and the number of posts you would set a limit=12 and show_post_count =1. As type is defaulted to monthly you would not have to specify that value. The end template code would possible look like:

<ul class="nav">
    <?php wp_get_archives('limit=12&show_post_count=1'); ?>
</ul>

That is all there is to it. There are additional options that you can set to modify the output or to return the archive as a string rather then echoing out the value as well. For full documentation on the function go visit the WordPress Codex wp_get_archives page.

Resources

• WordPress – official site
• WordPress API – wp_get_archives codex page

After learning the basics of XSLT one often wonders how to filter the XML data to returns data that contains a search string or has a value greater then or less than another value. To do this in XSL Stylesheets you can use take advantage of XPath in your xsl:foreach elements. Lets assume we have the following xml data as I used in my previous XSLT sorting article modified so that the year and publisher values are now attributes and not sub elements.

<?xml version="1.0"?>
<?xml-stylesheet type="text/xsl" href="sorted_books.xsl"?>
<books>
   <book year="2007" publisher="DAW">  
	<author>Patrick Rothfuss</author>
	<title>The Name of the Wind</title>
   </book>
   <book year="2004" publisher="EOS">  
	<author>Trudi Canavan</author>
	<title>The Magicain's Guild</title>
   </book>
   <book year="2009" publisher="Orbit">  
	<author>Trudi Canavan</author>
	<title>The Magicain's Apprentice</title>
   </book>
   <book year="2009" publisher="ACE">  
	<author>Jim Butcher</author>
	<title>First Lord's Fury</title>
   </book>
   <book year="2010" publisher="ROC">  
	<author>Jim Butcher</author>
	<title>Changes</title>
   </book>
   <book year="2009" publisher="TOR">  
	<author>Brandon Sanderson</author>
	<title>Warbreaker</title>
   </book>
</books>

Next we’ll create a basic XSL Stylesheet that will simply display our data in a table.

<?xml version="1.0"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" encoding="UTF-8"/>
<xsl:template match="/">
<html>
<head><title>My Books</title>
</head>
<body>
<table width="100%" border="1">
  <THEAD>
   <TR>
       <TD width="50%"><B>Title</B></TD>
       <TD width="50%"><B>Author</B></TD>
       <TD width="50%"><B>Publisher</B></TD>
       <TD width="50%"><B>Year</B></TD>
   </TR>
  </THEAD> 
  <TBODY>
   <xsl:for-each select="books/book">
    <xsl:sort select="author" />
    <xsl:sort select="title" />
    <TR>	  
       <TD width="25%"><xsl:value-of select="title" /></TD>
       <TD width="25%"><xsl:value-of select="author" /></TD>
       <TD width="25%"><xsl:value-of select="@publisher" /></TD>
       <TD width="25%"><xsl:value-of select="@year" /></TD>
    </TR>
   </xsl:for-each>
  </TBODY>
</table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>

This stylesheet will give us the following output:

Now for applying our filters, you will notice that in the xsl:for-each we use the select attribute to define the XML nodes to iterate over. This value books/book is an XPath value saying all elements of path books > book. To filter we simply modify the XPath. For example lets say we want all books published after 2008. To do this we would use the following XPath books/book[(number(@year) > 2008)]. This string says select all book elements that have an attribute of year greater then 2008. The xsl:for-each statement would look like the following.

<xsl:for-each select="books/book[(number(@year) > 2007)]">
    <xsl:sort select="author" />
    <xsl:sort select="title" />
    <TR>	  
       <TD width="25%"><xsl:value-of select="title" /></TD>
       <TD width="25%"><xsl:value-of select="author" /></TD>
       <TD width="25%"><xsl:value-of select="@publisher" /></TD>
       <TD width="25%"><xsl:value-of select="@year" /></TD>
    </TR>
</xsl:for-each>

This would render the following output:

If we wanted our filter to be even more complicated we could use multiple attributes or child elements in are select statement for example we could only want books published after 2008 and only display authors that contain the letter i. Doing this we would make use of the XSL function contains to compare strings as well as the and keyword to join are statements. The finished XPath would be books/book[(number(@year) > 2007) and contains(author, 'i')] with the output being the following XHTML.

That is pretty much all there is to it. There are many functions available to utilize in your XPath query strings and can be referenced here. For further details also visit the w3schools website’s XPath tutorial

XSLT  (EXtensible Sytlesheet Language Transformations) is a tool that can be used to transform XML documents into other formats most commonly of which is XHTML. XSLT is a stylesheet that defines how to display or output the data from the XML. Using XSLT you can sort, filter, and manipulate the data as needed iterating of data elements and their child elements. Below is a short example of how to sort an XML data file based on 2 elements.

To start things off we need an xml data file. In our example we are going to use books. You will notice that in addition to the xml data we specify the xml-stylesheet to utilize which we will create next.

<?xml version="1.0"?>
<?xml-stylesheet type="text/xsl" href="sorted_books.xsl"?>
<books>
   <book>  
	<author>Patrick Rothfuss</author>
	<title>The Name of the Wind</title>		
	<publisher>DAW</publisher>
	<year>2007</year>
   </book>
   <book>  
	<author>Trudi Canavan</author>
	<title>The Magicain's Guild</title>		
	<publisher>EOS</publisher>
	<year>2004</year>
   </book>
   <book>  
	<author>Trudi Canavan</author>
	<title>The Magicain's Apprentice</title>		
	<publisher>Orbit</publisher>
	<year>2009</year>
   </book>
   <book>  
	<author>Jim Butcher</author>
	<title>First Lord's Fury</title>		
	<publisher>ACE</publisher>
	<year>2090</year>
   </book>
   <book>  
	<author>Jim Butcher</author>
	<title>Changes</title>		
	<publisher>ROC</publisher>
	<year>2010</year>
   </book>
   <book>  
	<author>Brandon Sanderson</author>
	<title>Warbreaker</title>		
	<publisher>TOR</publisher>
	<year>2009</year>
   </book>
</books>

Next we will create an XSL Stylesheet that will be used to transform the XML Data into a XHTML page that displays the information in a table sorted by author followed by the title.

<?xml version="1.0"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" encoding="UTF-8"/>
<xsl:template match="/">
<html>
<head><title>My Books</title>
</head>
<body>
<table width="100%" border="1">
  <THEAD>
   <TR>
       <TD width="50%"><B>Title</B></TD>
       <TD width="50%"><B>Author</B></TD>
       <TD width="50%"><B>Publisher</B></TD>
       <TD width="50%"><B>Year</B></TD>
   </TR>
  </THEAD> 
  <TBODY>
   <xsl:for-each select="books/book">
    <xsl:sort select="author" />
    <xsl:sort select="title" />
    <TR>	  
       <TD width="25%"><xsl:value-of select="title" /></TD>
       <TD width="25%"><xsl:value-of select="author" /></TD>
       <TD width="25%"><xsl:value-of select="publisher" /></TD>
       <TD width="25%"><xsl:value-of select="year" /></TD>
    </TR>
   </xsl:for-each>
  </TBODY>
</table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>

In the above example we define the style sheet to iterate over each book element in the xml using the xsl:for-each tag. Then we immediately tell it to sort on the author field and secondly by the title field by use of the xsl:sort tag.

<xsl:sort select="author" />
<xsl:sort select="title" />

The end result is an html table as shown below:

You can sort on as many elements as you want simply adding addtional xsl:sort tags. Full information on the available properties like order can be found at w3schools

The Flint Particle System is an open source flash project with the goal of creating a base framework that is easily extensible by developers to create their own particle behaviors and effects. One of the many features it has is the ability to have your particle emitters move with your mouse. Below you can see a demonstration of this behavior as well as a quick code break down of how to do this in your own projects.

How To

The main steps to utilizing the Flint Particle system are:

1. Create your emitters
2. Create your renderer and attach your emitters
3. Attach your renderer to your Stage or Display Object
4. Add activites to the emitter
5. Start your emitters

Step 1: Create your emitters

Of course these can get a little more complicated but for starters lets look at the creation of an emitter. To do that I tend to extend the Basic 2D Emitter with my own class setting its properties.

package com.mdbitz
{
 
	import flash.geom.Point;
	import org.flintparticles.common.actions.*;
	import org.flintparticles.common.counters.*;
	import org.flintparticles.common.displayObjects.Dot;
	import org.flintparticles.common.initializers.*;
	import org.flintparticles.twoD.actions.*;
	import org.flintparticles.twoD.emitters.Emitter2D;
	import org.flintparticles.twoD.initializers.*;
	import org.flintparticles.twoD.zones.*;
 
	public class BlueSparkler extends Emitter2D
	{
 
		public function BlueSparkler()
		{
			// init counter
			this.counter = new Pulse( 1.5, 10 );
 
			// set up initializers
			this.addInitializer( new ImageClass( Dot, 1, 0x91C3FC ) );
			this.addInitializer( new ScaleImageInit( 0.75, 1.5 ) );
			this.addInitializer( new Lifetime( 1.2, 3.6 ) );
			this.addInitializer( new Velocity( new DiscSectorZone( new Point( 0, 0 ), 75, 15, -10 * Math.PI/9 , 6 * Math.PI/9 ) ) );
 
			// set up actions
			this.addAction( new Age() );
			this.addAction( new Move() );
			this.addAction( new Fade() );
			this.addAction( new Accelerate( 0, 18 ) );
			this.addAction( new RandomDrift( 22, 22 ) );
 
		}
 
	}
}

In the above Emitter class you will note that i initialize my emitter with a counter for when it should emit particles then set initializers on how the particles behave such as lifetime, velocity, and scale. The last thing i do is set some basic actions to have the particles age, move, fade, and etc. All Emitters can be created in a similar fashion with full details on the different flint base classes being found in the AS Docs

We use this emitter class by creating a new instance of it in our main flash document class. Which at this point will simply define the imports, constructor and a setUpEmitter function that we will be adding to.

package com.mdbitz{
 
	import flash.display.MovieClip;
 
	import flash.geom.Rectangle;
	import flash.geom.Point;
 
	import org.flintparticles.common.counters.*;
	import org.flintparticles.twoD.renderers.*;
	import org.flintparticles.twoD.initializers.*;
	import org.flintparticles.twoD.activities.*;
	import org.flintparticles.twoD.zones.*;
 
	public class Main extends MovieClip
	{
 
		public function Main()
		{
			this.setUpEmitter();
		}//main
 
		public function setUpEmitter():void
		{
			// initilize emitters
			var whiteEmitter:WhiteSparkler = new WhiteSparkler();
			var blueEmitter:BlueSparkler = new BlueSparkler();
		}
 
	}//class
 
}//package

Step 2: Create your Renderer

The renderer is the object that is responsible for displaying the particles emitted by the various emitters added to it. For this example we are going to utilize a basic BitMapRenderer and attach our blue and white emitters.

// create renderer
var renderer:BitmapRenderer = new BitmapRenderer( new Rectangle( 0, 0, 500, 500 ) );
 
// add emitters to renderer
renderer.addEmitter( whiteEmitter );
renderer.addEmitter( blueEmitter );

Step 3: Add your renderer to your Stage or Display Object

Not to much to this step simply add your renderer as a child to where it should be displayed and if needed change its x y positions.

// add renderer to screen
this.addChild( renderer );

Step 4: Add Activities to the Emitter

Now that our renderer is all set to go we want to add activities to our Emitters. Activities are behaviors that the Emitters follow, in our case we want are Emitters to follow the Mouse that is done by the FollowMouse Class as shown below:

// set up emitters to follow mouse
whiteEmitter.addActivity( new FollowMouse( renderer ) );
blueEmitter.addActivity( new FollowMouse( renderer ) );

Step 5: Start your Emitters

Last but not least is to start your emitters so that they generate particles.

// start emitters
whiteEmitter.start();
blueEmitter.start();

That is all there is to it., you know have a particle generator that follows your mouse around. The full setUpEmitters function is displayed below and the source code for this example including the swf can be found in the Downloads section.

public function setUpEmitter():void {
 
// initilize emitters
var whiteEmitter:WhiteSparkler = new WhiteSparkler();
var blueEmitter:BlueSparkler = new BlueSparkler();
 
// create renderer
var renderer:BitmapRenderer = new BitmapRenderer( new Rectangle( 0, 0, 500, 500 ) );
 
// add emitters to renderer
renderer.addEmitter( whiteEmitter );
renderer.addEmitter( blueEmitter );
 
// add renderer to screen
this.addChild( renderer );
 
// set up emitters to follow mouse
whiteEmitter.addActivity( new FollowMouse( renderer ) );
blueEmitter.addActivity( new FollowMouse( renderer ) );
 
// start emitters
whiteEmitter.start();
blueEmitter.start();
}

Downloads

• Flint Follow Mouse Example Project