thought snippets http://blog.u-blue.com a little bit of everything Sun, 18 Jul 2010 08:06:58 +0000 en hourly 1 http://wordpress.org/?v=3.0 Visual Sitemap with HTML+CSS3 http://blog.u-blue.com/en/2010/03/11/create-visual-sitemap-with-html-css3/ http://blog.u-blue.com/en/2010/03/11/create-visual-sitemap-with-html-css3/#comments Thu, 11 Mar 2010 12:52:17 +0000 nice http://blog.u-blue.com/en/?p=259 For those who create and using website must be familiar with sitemap page. Usually sitemap gather all links in the site and display them structurally for ease of use. For me, sitemap is always the last to create because it’s a boring task and sometimes not even in user requirement. And when I actually get around to do it, I always use unordered list because it makes most sense but the result isn’t always pretty.

So here I am with free times in my hands, creating css3 based visual sitemap. I’m using css3 because to make tree structure in sitemap I have to use css3 pseudo-class selector. But again with new web technology, we have a problem with our beloved browser, ie, so I’ll use a little js hack for ie only. Here’s the result.

usitemap

I try to use as few images as possible but one thing I hate most is javascript hack. But you don’t have to use the hack if you’re ok with slightly distort in ie. Now let’s look at the code.

Download the code here -> download usitemap

We’ll be using unordered list in HTML, it can be nested all you like.

<ul>
  <li>Home
    <ul>
      <li>Product
          <ul>
            <li>Computer</li>
            <li>Printer</li>
            <li>Scanner</li>
          </ul>
      </li>
      <li>Client</li>
      <li>About</li>
      <li>Contact</li>
    </ul>
  </li>
</ul>

And in css we’ll use css3 and 4 images:

/*change color*/
#usitemap a, #usitemap a:visited{color:#4D6180;background: #B5C7E3;border: 1px solid #4D6180;}
#usitemap a:hover, #usitemap a:active{background: #90ABD5;}

/*sitemap core*/
#usitemap *{margin: 0;padding: 0;}
#usitemap ul li{list-style: none;position: relative;top: 0px;width: 120px;padding: 10px 40px 0 0;background-image: url(fork_mid.gif);background-position: top left;background-repeat: no-repeat;}
#usitemap ul li:last-child{ background-image: url(fork_last.gif); }
#usitemap ul li:first-child{ background-image: url(fork.gif); }
#usitemap ul li:only-child{ background-image: url(dotted.gif); background-repeat: repeat-x;}
#usitemap ul li ul li{left: 172px;top: 0px;font-size: .9em;}
#usitemap ul li ul{margin-top: -42px}
#usitemap ul li a{text-align: center;display: block;line-height: 28px;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;margin: 0 0px 0 50px;width: 120px;text-decoration: none;}

Last but not least, javascript hack for ie using ie-css3 with jquery:

<script type="text/javascript" src="js/jquery-1.3.1.min.js"></script>
<!--[if (gte IE 5.5)&(lte IE 8)]>
<script type="text/javascript" src="ie-css3.js"></script>
<![endif]-->

that’s it, easy visual sitemap with css3 and html!

Download the code here -> download usitemap

]]> http://blog.u-blue.com/en/2010/03/11/create-visual-sitemap-with-html-css3/feed/ 0 Visible stat from Google Analytics http://blog.u-blue.com/en/2010/02/10/visible-stat-with-google-analytics/ http://blog.u-blue.com/en/2010/02/10/visible-stat-with-google-analytics/#comments Wed, 10 Feb 2010 11:15:48 +0000 nice http://blog.u-blue.com/en/?p=213 From my old blog Extract data from google analytic with PHP makes me wanna write another script to show number of pageviews on the web for all the world to see. It’s actually an old school “web counter” as we know it and since normally you can’t just extract pageviews data from google analytics to display on your website I have to make use of my old GAAPI class to extract data to create the counter, see example below.

GA Visible Stat

How to use?

  1. Load GAAPI from my old blog though we’ll use only gaapi.class.php here.
  2. Construct gaapi class and call method All Time Page Views (total number of page views) 
    
include_once('gaapi.class.php');
$ga=new gaApi('google username','password','ga:site id');
$allTimeSummery=$ga->getAllTimeSummery();
  3. Show the counter using HTML with CSS
    CSS:

    #vGA{
	width: 100px;
	position: relative;
	font-size: 9px;
	font-family: Verdana, Verdana, Geneva, sans-serif;
	padding-bottom: 15px;
	background: url(poweredBy.gif) no-repeat bottom left;
}
#vGA div{
	text-align: right;
	border: 2px solid #4f6db0;
	color: #555;
	line-height: 15px;
}
#vGA #vGALabel{
	background: #4f6db0;
	text-align: center;
	color: white;
	float: right;
	padding: 0 0 0 2px;
	margin: 0 0 0 2px;
}

    HTML:

    

    <?= $allTimeSummery['ga:pageviews'] ?>
       Views
  4. Save this Powered By Google image into the same folder as others files

    Powered By

And now we’ve got easy Visible Stat from Google Analytic. If you wish to show other data such as Unique Visits you can do so by follow instruction from my old blog Extract data from google analytic with PHP

Put it all together

<html>
<head>
<style type="text/css">
#vGA{
	width: 100px;
	position: relative;
	font-size: 9px;
	font-family: Verdana, Verdana, Geneva, sans-serif;
	padding-bottom: 15px;
	background: url(poweredBy.gif) no-repeat bottom left;
}
#vGA div{
	text-align: right;
	border: 2px solid #4f6db0;
	color: #555;
	line-height: 15px;
}
#vGA #vGALabel{
	background: #4f6db0;
	text-align: center;
	color: white;
	float: right;
	padding: 0 0 0 2px;
	margin: 0 0 0 2px;
}
</style>
</head>
<body>
<?
include_once('gaapi.class.php');
$ga=new gaApi('google username','password','ga:site id');
$allTimeSummery=$ga->getAllTimeSummery();
?>



<?= $allTimeSummery['ga:pageviews'] ?>
       Views




</body>
</html>
]]> http://blog.u-blue.com/en/2010/02/10/visible-stat-with-google-analytics/feed/ 8 Extract data from google analytic with PHP http://blog.u-blue.com/en/2010/02/09/google-analytic-api-extract-data-php/ http://blog.u-blue.com/en/2010/02/09/google-analytic-api-extract-data-php/#comments Mon, 08 Feb 2010 20:30:41 +0000 nice http://blog.u-blue.com/en/?p=189 My PHP class to extract data from Google Analytics API to show on your own website.
Using:

  • PHP
  • cURL to connect to Google Analytics Data Extract API
  • PHP DOMDocument to parse XML
  • Google Graph API to show analytic data

Screenshot:

Google Analytic Data Export API with PHP

How to use?

Download full source code here -> GAAPI

Construct and use the class
Include class file and call to construct with params username, password and site id(from url in google analytic account “id=xxxxxxxx”)

include_once('gaapi.class.php');
$ga=new gaApi('google username','google password','ga:site id');
//e.g. ('myname@gmail.com','myPassword','ga:1234567');

Site ID in Google Analytic URL

Analytic ID

Generate Report
This require knowledge of Dimension and Metric from Google Analytic Data Extract API. Basically it is to combine between Dimensions and Metrics to generate reports through method genReport(array). For examples.

$params = array ('metrics' 		=> 'ga:visits',
				'dimensions'	=> 'ga:source',
				'start-date' 	=> '2010-01-01',
				'end-date' 		=> '2010-02-09',
				'max-results' 	=> '5',
				'filter'		=> 'ga:source != (direct)',
				'sort'			=> '-ga:visits');
$result=$ga->genReport($params);
print_r($result);

The result will be collection of array like this.

Array
(
    [0] => Array
        (
            [ga:source] => google
            [ga:visits] => 5029
        )
    [1] => Array
        (
            [ga:source] => xxxxxxx.com
            [ga:visits] => 162
        )
    [2] => Array
        (
            [ga:source] => search
            [ga:visits] => 49
        )
)

Also there’s some pre-made method of frequency use statistic in my class such as:

$now=date("Y-m-d");
$lastmonth=date('Y-m-d', strtotime('-30 days'));

//Summery: visitors, unique visit, pageview, time on site, new visits, bounce rates
$summery=$ga->getSummery($lastmonth,$now);

//All time summery: visitors, page views
$allTimeSummery=$ga->getAllTimeSummery();

//Last 10 days visitors (for graph)
$visits=$ga->getVisits($lastmonth,$now,10);

//Top 10 search engine keywords
$topKeywords=$ga->getTopKeyword($lastmonth,$now,10);

//Top 10 visitor countries
$topCountries=$ga->getTopCountry($lastmonth,$now,10);

//Top 10 page views
$topPages=$ga->getTopPage($lastmonth,$now,10);

//Top 10 referrer websites
$topReferrer=$ga->getTopReferrer($lastmonth,$now,10);

//Top 10 visitor browsers
$topBrowsers=$ga->getTopBrowser($lastmonth,$now,10);

//Top 10 visitor operating systems
$topOs=$ga->getTopOs($lastmonth,$now,10);

Each method generate collection of array with dimension and metric name as key

Download the code here -> GAAPI

Please let me know if you find any bugs!

]]> http://blog.u-blue.com/en/2010/02/09/google-analytic-api-extract-data-php/feed/ 28 from table to div http://blog.u-blue.com/en/2009/05/11/from-table-to-div/ http://blog.u-blue.com/en/2009/05/11/from-table-to-div/#comments Mon, 11 May 2009 07:34:40 +0000 nice http://blog.u-blue.com/en/?p=96 An easy way to change your html layout from table to css/div for those who still using “old school html table layout”

First, let’s look at the table:

Table Layout


HTML code






This is Header






Main Menu
-Menu1


Content goes here!
This is content!

Looks simple and familiar enough, but is it the best? How about we change it into css/div layout.


The result:

Css Div Layout


It looks the same as table, now let’s see the code.

HTML:





Content goes here!
This is content!

CSS:

div#container{
	width:350px;
	margin:0 auto;
	background:#cccccc;
}
div#header{
	text-align:center;
	background: #eeeeee;
}
div#menu{
	width:100px;
	float:left;
	background: #999999;
}
div#content{
	width:250px;
	float:left;
	background: #cccccc;
}

Not as painful as you think? Now we combine them together.

  1. Put css code under style tag in HTML head
  2. Separate css code into .css file and create a like to it using tag

That’s it!

]]> http://blog.u-blue.com/en/2009/05/11/from-table-to-div/feed/ 0 ie6.png ! http://blog.u-blue.com/en/2008/12/08/ie6-png/ http://blog.u-blue.com/en/2008/12/08/ie6-png/#comments Mon, 08 Dec 2008 16:16:15 +0000 nice http://u-blue.com/blog/?p=74 .png files format is essential in today’s website builder mainly because its give us a real transparency which is far better than .gif

Arise our problem. IE 6. Same old pal who loves to give us headache developing website but we can’t just forget it because number of ie6 users is still significant, at least for my sites.

The problem with ie6 this time is that it cannot display .png transparency properly. For those who don’t know about this problem please see example below.

Original PNG File

IE7

IE6 !!!

As we can see, ie6 image transparency is not really transplant.

IE PNG FIX

The code we’ll use to fix this problem is iepngfix from Twin Helix: IE PNG Fix.

Here’s how we use it:

  1. Download iepngfix.zip at original website above.
  2. Extract then put iepngfix.htc and blank.gif into any folder you want.
  3. Add style into your html or css file 
    <!--[if lte IE 6]>

<style type="text/css">
img, div, input { behavior: url("iepngfix.htc") }
</style><![endif]-->

Save you files and refresh the browser ie6

IE6 Works!

Note: If iepngfix.htc and blank.gif is not in the same location(folder) you have to open file iepngfix.htc using notepad and change path of “IEPNGFix.blankImg = thisFolder + ‘blank.gif’; <–to absolute path e.g. IEPNGFix.blankImg =’/images/blank.gif’;

]]> http://blog.u-blue.com/en/2008/12/08/ie6-png/feed/ 1