GMTAZ.com

I’m moving to Tumblr [log.gmtaz.com]

Gustavo — Thu, 15 Jul 2010 19:29:30 +0000

Actually, I’m just going to be primarily using tumblr (not moving to it, per say). www.gmtaz.com will still be up and running on wordpress with a focus on technical documentation, while my personal blog will be at log.gmtaz.com

Just a quick FYI.

****EDIT****
Actually, now that I think of it – I might move www.gmtaz.com over to tech.gmtaz.com and log.gmtaz.com over to www.gmtaz.com. I feel as though tech.gmtaz.com is going to go by the way side as I don’t really have that much time to put into writing out longer posts. We will see…

iPhone 4 Retina Display Easter Egg

Gustavo — Sun, 27 Jun 2010 15:21:51 +0000

One hidden benefit to the retina display, that I haven’t seen posted anywhere, is that I can now view the screen using polarized sunglasses at any angle. This was not possible on the 3G or the 3GS. Give it a go, if you have polarized lenses…

I’ll see if I can figure out a way to post images.

Updated Bokeh wallpaper for iPhone4 [wallpapers]

Gustavo — Thu, 24 Jun 2010 14:05:54 +0000

Here you go 960×640:

Download My Attempt at a Bokeh Wallpaper [PSD]

Gustavo — Thu, 10 Jun 2010 15:33:40 +0000

I was messing around with Photoshop tutorials and came across the very famous abduzeedo.com. I wanted to create a bokeh style wallpaper and he has a fantastic tutorial on how to do it. Linky

I ran with it and came up with what you see below. I’m including the PSD in case you want to change the colors. All you have to do is change the gradient layer style and you’re set.

I’m including a 1920×1200 wallpaper png, an iPhone wallpaper png, and the original PSD in this post.
Let me know what you think and enjoy!

1920×1200
iPhone 3

Here’s an example of what you can do in 2 seconds with the PSD. HDR effects and all…

1920×1200
1440×900

Quick Tip: Undo Email moves in Apple Mail

Gustavo — Wed, 02 Jun 2010 15:46:55 +0000

Did you know you could undo deleting or moving emails within Apple Mail by pressing command+Z ?

Quick Fix: xFBML not rendering in IE [RESOLVED]!

Gustavo — Wed, 02 Jun 2010 15:43:02 +0000

I was having a problem where using xFBML and the facebook javascript API would not render elements in IE (but they worked in all other browsers).

This was resolved by fixing the DOCTYPE in the header.
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> xmlns:fb="http://www.facebook.com/2008/fbml">
Now everything renders fine within the site AND it also renders in an iFrame Facebook App!

jQuery 1.4 Cheat-sheet Wallpaper

Gustavo — Fri, 14 May 2010 20:26:48 +0000

Here’s a high-res version (1920×1200) of my new jQuery cheat sheet wallpaper.
This is for jQuery 1.4.2.
Resources for this wallpaper were acquired from: Impulse Studios
If you are downloading the 1920×1200 version, right-click “save target as”.

Auto-Size

1920×1200

Show Popular Stories Using Google Analytics and ASP.net C# and Sort the Results [How To]

Gustavo — Thu, 29 Apr 2010 19:23:43 +0000

Recently, I needed to be able to get a list of popular pages for a site that I manage and display that information. I figured, rather than building a database and code hit tracking and page views from scratch, I would just tap into my Google Analytics data.

Requirements:

Jacob Reimers Google Analytics Reader for .net
ASP.net LINQ
Database for caching results

All of the articles have the path format “/articles/[ category ]/[ article-title ]/” and all articles have unique titles. First stop, create the article class:

    class ArticleInfo
    {
        public string title { get; set; }
        public string path { get; set; }
        public string hits { get; set; }
    }

This is what I will use to sort by title after sorting by hits. Granted, this could probably be optimized a bit more but I’m really tired…
Basically, this creates a class of titles, paths, and hits which I will be pulling from later to create the HTML.

Here is the rest of the code-behind for the user control which will display the data. I will go through this piece by piece

protected void Page_Load(object sender, EventArgs e)
    {
        try
        {
            clsDBGet db = new clsDBGet();
            DataTable dt = db.GetDTfromProc("[STORED PROCEDURE - GET]", null);//Stored procedure to pull from the DB
            if (dt.Rows.Count > 0)
                ga.Text = dt.Rows[0]["DATA"].ToString();
            else
            {
                try
                {
                    ReportRequestor rr = new ReportRequestor("[gmail account email]", "[password]");
                    AnalyticsAccountInfo ainfo = new AnalyticsAccountInfo();
                    IEnumerable(AnalyticsAccountInfo) accounts = rr.GetAccounts();
                    string analyticsTitle = "V2 Live";//Title of Profile where I want to grab the data
                    AnalyticsAccountInfo account = accounts.First(a => a.Title == analyticsTitle);
                    DateTime from = DateTime.Now.AddDays(-2);//last 24 hours (data is always a day behind)
                    DateTime to = DateTime.Now;
                    IEnumerable(GenericEntry) report = rr.RequestReport(account, new Dimension[] { Dimension.pagePath, Dimension.pageTitle }, new Metric[] { Metric.pageviews }, from, to, 1000);
                    string myString = string.Empty;
                    int x = 0;
                    string[] articleTitles = new string[22]; //To only grab unique titles
                    ArticleInfo[] articleData = new ArticleInfo[22];
                    bool unique = true;
                    report = report.OrderByDescending(myReport => Convert.ToInt32(myReport.Metrics.First().Value));
                    foreach (GenericEntry myReport in report)
                    {

                        Regex isArticle = new Regex("/articles/.+/.+/");
                        string path = myReport.Dimensions.First().Value;
                        string title = myReport.Dimensions.Last().Value;
                        string hits = myReport.Metrics.First().Value;
                        if (x < 22 && isArticle.IsMatch(path))
                        {
                            if (!path.Contains("/page_") && !path.Contains("/search/") && title.Trim() != "(not set)")
                            {
                                //Add to array of article titles then check to see if it exists in the array
                                for (int y = 0; y < articleTitles.Length; y++)
                                {
                                    if (articleTitles[y] != null && title.Trim().ToLower() == articleTitles[y].ToLower())
                                    {
                                        unique = false;
                                        break;
                                    }
                                    else
                                        unique = true;
                                }
                                if (unique)
                                {
                                    articleData[x] = new ArticleInfo { path = Server.UrlDecode(path).Trim(), title = title.Trim(), hits = hits };
                                    x++;
                                }
                            }
                        }
                    }
                    IEnumerable(ArticleInfo) articles = articleData.OrderBy(article => article.title);
                    foreach (ArticleInfo article in articles)
                    {
                            myString += "";
                    }
                    if (x < 10)
                    {
                        panelGA.Visible = false;
                    }
                    else
                    {
                        clsDBPost dbp = new clsDBPost();
                        string proc = "[STORED PROCEDURE - INSERT]";
                        Hashtable ht = new Hashtable();
                        ht.Add("data", myString);
                        bool inserted = dbp.ExecuteProcedure(proc, ht);
                    }
                    ga.Text = myString;
                }
                catch (Exception EX)
                {
                    //Response.Write(EX.ToString());
                    panelGA.Visible = false;
                }
            }
        }
        catch (Exception ex2)
        {
            //Response.Write(ex2.ToString());
            panelGA.Visible = false;
        }
    }

Let's break this up into parts.

The first thing I want to do is query my database to see if I already have the latest Google Analytics data for today. If it's there, render the data outright. This allows me to only query Google Analytics once per day, instead of on every page load. This is important because Google limits the amount of requests you can make per day and because we are requesting data for the previous day, there's no need to pull up to the minute results.
```
clsDBGet db = new clsDBGet();
DataTable dt = db.GetDTfromProc("[STORED PROCEDURE - GET]", null);
if (dt.Rows.Count > 0)
     ga.Text = dt.Rows[0]["DATA"].ToString();
 
```

This sis where we tap into Reimer's reader. Further explanation can be found in the link at the top of this article but for now let's focus on some key points. I'm pulling data from Google from 2 days ago, through today. I'm also pulling the pagePath, pageTitle and using the metric pageViews. This will translate into the URL of the post, the title of the post and the hits. The last thing to note is that I'm pulling the top 1000 results because not every page on the site is an article and I want to make sure I get at least 10 articles in the data I'm pulling back. This number is arbitrary but I think it defaults at 1000 anyway.

ReportRequestor rr = new ReportRequestor("[gmail account email]", "[password]");
AnalyticsAccountInfo ainfo = new AnalyticsAccountInfo();
IEnumerable(AnalyticsAccountInfo) accounts = rr.GetAccounts();
string analyticsTitle = "V2 Live";//Title of Profile where I want to grab the data
AnalyticsAccountInfo account = accounts.First(a => a.Title == analyticsTitle);
DateTime from = DateTime.Now.AddDays(-2);//last 24 hours (data is always a day behind)
DateTime to = DateTime.Now;
IEnumerable(GenericEntry) report = rr.RequestReport(account, new Dimension[] { Dimension.pagePath, Dimension.pageTitle }, new Metric[] { Metric.pageviews }, from, to, 1000);

In this next part I'm setting my variables that I will be using later in the loops to filter the rows.
```
string myString = string.Empty;
int x = 0;
string[] articleTitles = new string[22]; //To only grab unique titles
ArticleInfo[] articleData = new ArticleInfo[22];
bool unique = true;
report = report.OrderByDescending(myReport => Convert.ToInt32(myReport.Metrics.First().Value));
```
I'm also creating an array of ArticleInfo's called articleData which will hold 22 elements as I only want to display the top 22 articles. Lastly, I'm ordering the report data by hits (pageViews) because the report data comes from Google sorted by URL path. This is bad because I want to get the top articles, not a list ordered alphabetically by URL. Without this sort, I would be getting articles in a certain category only (because the URL lists the category before the title) and it would not be a true representation of site activity.

Here come the loops:

foreach (GenericEntry myReport in report)
   {

       Regex isArticle = new Regex("/articles/.+/.+/");
       string path = myReport.Dimensions.First().Value;
       string title = myReport.Dimensions.Last().Value;
       string hits = myReport.Metrics.First().Value;
       if (x < 22 && isArticle.IsMatch(path))
       {
           if (!path.Contains("/page_") && !path.Contains("/search/") && title.Trim() != "(not set)")
           {
               //Add to array of article titles then check to see if it exists in the array
               for (int y = 0; y < articleTitles.Length; y++)
               {
                   if (articleTitles[y] != null && title.Trim().ToLower() == articleTitles[y].ToLower())
                   {
                       unique = false;
                       break;
                   }
                   else
                       unique = true;
               }
               if (unique)
               {
                   articleTitles[x] = title.Trim();
                   articleData[x] = new ArticleInfo { path = Server.UrlDecode(path).Trim(), title = title.Trim(), hits = hits };
                   x++;
               }
           }
       }
   }

Lots of stuff is going on here. The first thing I'm doing is creating a filter to filter through the results and only pull back pages that are articles by doing "isArticle.IsMatch(path)". I also don't want to do this loop more than I need to, hence the "x < 22" part. The next "IF" statement is arbitrary and required for the site.

The next FOR LOOP is to make sure I'm only grabbing unique articles. This is important because sometimes users include capital letters in the URL and this will make Google Analytics display multiple rows for the same page and split up the numbers. There's a way to counter this in GA but for today's purposes, I'm assuming that your results might have the same page split across different URLS. I take the title of the article and check to see if it's in the articleTitles array. If it isn't already in there, I add it to the array and set the "unique" flag to true and move on. If it is, I skip that row altogether by setting the "unique" flag to false. (This method will probably produce some skewed results if you are splitting page views across URLs).

In this last part, I'm creating another enumerable list of articleInfo's and sorting it by title. This way the bar graph that I display won't just look like a linearly decreasing graph. I also create the HTML list item and append it to the full list of items in myString. This is what will be rendered out on the page and also what will be placed in the database using the stored procedure, "V2_INSERT_GOOGLE_DATA".
If there are less than 10 results, or if for some reason I cannot communicate with either Google or the database, I hide the panel altogether.
```
 IEnumerable(ArticleInfo) articles = articleData.OrderBy(article => article.title);
 foreach (ArticleInfo article in articles)
 {
           myString += "";
 }
 if (x < 10)
 {
     panelGA.Visible = false;
 }
 else
 {
     clsDBPost dbp = new clsDBPost();
     string proc = "[STORED PROCEDURE - INSERT]";
     Hashtable ht = new Hashtable();
     ht.Add("data", myString);
     bool inserted = dbp.ExecuteProcedure(proc, ht);
 }
 ga.Text = myString;
```

I hope this helps some of you who are trying to implement this method of pulling data from Google. I used jQuery to have the list animate as a bar graph with the article titles appearing on hover. This is the final result:

Protect Images Online using PHP and jQuery [How To]

Gustavo — Fri, 23 Apr 2010 18:46:53 +0000

Ever go to a website and think to yourself, “Wow, those are some nice photos. I wonder if I can download them and [insert personal use line here]“?

The issue of protecting images online is quite a challenge, and borderline impossible. Using Flash is a good way to do it, but now you’ve just limited your audience. Even with Flash, it’s not 100% secure. In safari, users can go to the activity window and see what resources are being downloaded and from where. Other more advanced users often use Firebug or something of the like to grab the actual URL of the image and subsequently access that file directly.

Ultimately, users can always just take a screen shot of the page, but this will also include any of the text that is above the image (unless they use Firebug to hide it). You can’t stop that without the user agreeing to download a 3rd party plugin, so might as well deal with that fact.

In lieu of all this, I still wanted to use Pablo Yanez’s images as wallpapers for my new site design. He wanted them protected. I completely agree… and out of that need, came this project.

Theory behind the process: (I’m not going to go into too much detail for, hopefully, obvious reasons)

First thing you need to do is create a directory that users will never see or know existed, and name it something funky like, “sdflkjnVFC3424″. Chances are, they won’t guess it. This is where you will keep hi-res versions of your images. Keep track of where this directory is located relative to the image generating PHP script.
The second thing is to create a PHP script that renders out the image dynamically, based on some parameters that are sent in via an AJAX request. Call it image.php or something.
Now you need something that generates that AJAX request URL. The reason for this is because you want that URL to be generated within an arbitrary amount of time before the image generating PHP script gets called. You can call this encoder.php or something like that.

Here’s the trick: The encoder.php file gets the initial “Build me the URL of where the image is” request. This URL has a time stamp generated and encoded in it. Make sure the time stamp that is being generated adds or subtracts a large number of time, in this example I will say 12304 seconds get added. This part is key because if users figure out that the encoded parameter is a base_64 encoded time stamp, they can write a script to generate one too, totally defeating the purpose of the time stamp. That’s the first part of the encoder. The second part is to read the directory where the images are and, in my case, put the entire list into an array and pick a random number that is no less than 0 and no larger than the length of the array -1. This is important because in image.php, we will be doing the same lookup in the directory, except this time, we are using that random number to select the file name of the file we want to display. Also, image.php also creates a time stamp (important) and adds 12304 seconds to it. If image.php’s time stamp is within, say, 5 seconds of the encoded.php timestamp, the script continues. Otherwise, the script dies and in my case, renders out “clear.gif” to confuse people.

*Important note at this point: Using the time stamp technique disables caching of the images, but because we don’t want users to retain a copy at all, that’s fine.

This is my encoder.php file (secure parts omitted):

function getRan()
{
	$dir_array = array();
	if ($handle = opendir('Secure images directory, relative to site root')) {
	    while (false !== ($file = readdir($handle))) {
	        if($file!="." && $file!=".."){
	            $dir_array[] = $file;
	        }
	    }
	    closedir($handle);
	}
	return rand(0,count($dir_array)-1);
}
function getRanAJAX()
{
	$dir_array = array();
	if ($handle = opendir('Secure images directory, relative this')) {
	    while (false !== ($file = readdir($handle))) {
	        if($file!="." && $file!=".."){
	            $dir_array[] = $file;
	        }
	    }
	    closedir($handle);
	}
	return rand(0,count($dir_array)-1);
}
function getBGParams()
{
	$r = getRan();
	$t = time();//use math to change time - add or subtract in seconds
	$tenc = base64_encode($t);
	$tdir = bloginfo('template_directory'); //wordpress
	$style= $tdir."/image.php?u=".$tenc."&p=".$r;
	echo $style;
}
function getU()
{
	$ref = $_SERVER['HTTP_REFERER'];
	//make sure requests are coming from me
	$pattern = '/^(http:\/\/www.gmtaz.com)|(http:\/\/gmtaz.com)/';
	if(preg_match($pattern,$ref)){
	$r = getRanAJAX();
	$t = time();//use math to change time - add or subtract in seconds
	$tenc = base64_encode($t);
	echo '{"u":"'.$tenc.'", "d" : "' . $tdir . '/image.php", "r" : "'.$r.'", "ref" : "'.$ref.'"}';
	}
}
function getR()
{
	$r = rand(0, 1);
	echo '{"r":"'.$r.'"}';
}
$op = $_GET['o'];
if($op=='u')
	getU();
if($op == 'r')
{
	getR();
}

Hopefully that all makes sense. The first AJAX request using jQuery looks like this:

< ?php include 'encoder.php' ?>
$(function(){
  		gmtaz.setBG('< ?php getBGParams() ?>');
  		setInterval(function(){
   		var u = '';
   		var url = '';
   		var r = '';
   		var dt = new Date();
   		var time = dt.getTime();
   		//for wordpress
   		var td = "< ?php bloginfo('template_directory'); ?>/encoder.php";
   		$.getJSON(td,
   		 {o:'u', t: time},
   		 function(d){
   		 	u = d.u;
   		 	url = d.d;
   		 	r = d.r;
   		 	var dd = '' + url + '?u='+ u +'&p=' + r;
   		 	//alert(dd +''+ '');
   		 	gmtaz.setBG(dd);
   		 });
  		 }, 12000);
  	});

setBG(dd) is actually this function:

setBG : function(url){
		var url = url + gmtaz.getResolution();
		$('< img />')
		.attr('src', url)
		.load(function(){
		    var src = $(this).attr('src');
		    $('#bg').css({
		    	'backgroundImage':'url('+src+')',
		    	'backgroundRepeat':'no-repeat',
		    	'backgroundAttachment':'fixed'})
		    	.fadeIn('slow',function(){
			    	$('body').css({
			    		'backgroundImage':'url('+src+')',
			    		'backgroundRepeat':'no-repeat',
			    		'backgroundAttachment':'fixed'
			    		});
		    		$(this).fadeOut('fast');
		    	});
		});
	},
getResolution : function(){
		return '&w='+screen.width+"&h="+screen.height;
	},

All this is doing is using some jQuery to grab that image URL which is being passed in and set it as the background. I actually have two bg layers to allow for the fade effect.

Here’s image.php:


< ?php

$dir_array = array();
if ($handle = opendir('Secure Images Directory')) {
    while (false !== ($file = readdir($handle))) {
        if($file!="." && $file!=".."){
            $dir_array[] = $file;
        }
    }
    closedir($handle);
}
$images = $dir_array;
$t = time();//same mathematical algorithm as in encoder.php
$tdec = base64_decode($_GET['u']);
$diffT = $t-$tdec;
if($diffT > 5 || $diffT < 0)//if older than 5 seconds - die
	{
		die('clear.gif');
	}
//Disable caching
header("Expires: Tue, 03 Jul 2001 06:00:00 GMT");
header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
header("Cache-Control: no-store, no-cache, must-revalidate, max-age=0");
header("Cache-Control: post-check=0, pre-check=0", false);
header("Pragma: no-cache");
header("Content-type: image/jpeg");

while (@ob_end_clean());

$PATH = urldecode($_GET['p']);
$File = 'secret directoy'.$images[$PATH];

if (($FileInfos= stat($File)) or die("File not found!"));

$FileExt= substr($File, -3);

$FileTypeMIME= array("jpg" => "image/jpeg",
                         "png" => "image/png",
                         "gif" => "image/gif",
                         "ico" => "image/x-icon");

$ContentType= $FileTypeMIME[$FileExt];
if (empty($ContentType)) die("You are not allowed to access this file!");

$h = $_GET['h'];
$w = $_GET['w'];
$im = @imagecreatefromjpeg($File);
$width = 1920;
$height = 1200;
$NewThumb= ImageCreateTrueColor($w,$h);
// check if ratios match
$_ratio=array($width/$height,$w/$h);
if ($_ratio[0] != $_ratio[1]) { // crop image

    // find the right scale to use
    $_scale=min((float)($width/$w),(float)($height/$h));

    // coords to crop
    $cropX=(float)($width-($_scale*$w));
    $cropY=(float)($height-($_scale*$h));   

    // cropped image size
    $cropW=(float)($width-$cropX);
    $cropH=(float)($height-$cropY);

    $crop = ImageCreateTrueColor($cropW,$cropH);
    // crop the middle part of the image to fit proportions
    ImageCopy(
        $crop,
        $im,
        0,
        0,
        (int)($cropX/2),
        (int)($cropY/2),
        $cropW,
        $cropH
    );
}

// do the thumbnail

if (isset($crop)) { // been cropped
    ImageCopyResampled(
        $NewThumb,
        $crop,
        0,
        0,
        0,
        0,
        $w,
        $h,
        $cropW,
        $cropH
    );
    ImageDestroy($crop);
} else { // ratio match, regular resize
    ImageCopyResampled(
        $NewThumb,
        $im,
        0,
        0,
        0,
        0,
        $w,
        $h,
        $width,
        $height
    );
}
$q=60;//final output quality
ImageJpeg($NewThumb,null,$q);
ImageDestroy($NewThumb);
ImageDestroy($im);
?>

You may notice that I’m doing some cropping here. Actually what I’m doing is sizing the image to the full resolution of the visitor. I crop it to fit the dimension ratio first, then I resize it. This should make the image always look the same no matter what computer you’re on. Handy for dynamically creating wallpapers as well.. I might expand on this and include that function in my wallpaper gallery.

Let me know if anyone knows a way around this. I’m interested in tightening this up!

jQuery + IE = Friends!

Gustavo — Fri, 26 Feb 2010 20:24:29 +0000

Problem: fade text in or out in IE and the text loses it’s anti-aliased look and ends up rendering like crap.

Guess what?? IE and jQuery are friends now! Yeah, not really… but I did find this awesome post on: http://www.joelanman.com/archives/15

Basically, it’s a jQuery plugin to remove the Filter CSS property from any element that get called by the fadeTo, fadeOut or fadeIn methods.

Really slick and really useful if you want to anti-alias the text you fade.

Here’s the snippet:

(function ($) {
 $.fn.fadeIn = function (speed, callback) {
 return this.animate({
 opacity: 'show'
 }, speed, function () {
 if ($.browser.msie) {
 this.style.removeAttribute('filter');
 }
 if ($.isFunction(callback)) {
 callback.call(this);
 }
 });
 };
 $.fn.fadeOut = function (speed, callback) {
 return this.animate({
 opacity: 'hide'
 }, speed, function () {
 if ($.browser.msie) {
 this.style.removeAttribute('filter');
 }
 if ($.isFunction(callback)) {
 callback.call(this);
 }
 });
 };
 $.fn.fadeTo = function (speed, to, callback) {
 return this.animate({
 opacity: to
 }, speed, function () {
 if (to == 1 && $.browser.msie) {
 this.style.removeAttribute('filter');
 }
 if ($.isFunction(callback)) {
 callback.call(this);
 }
 });
 };
})(jQuery);