Portrait Bastian Onken

Profil

23. September 2012

 

Berufserfahrung

Ausbildung

 

Diplom-Wirtschaftsinformatiker (FH)
Hochschule Bremerhaven
Abschluss 2005

Abitur
Kreisgymnasium Wesermünde, Bremerhaven
Abschluss 2000

Open Source Projekt: PEAR HTML_TagCloud

 

HTML_TagCloud is a PHP library to generate a "Tag Cloud" in HTML and visualize tags by their frequency. Additionally visualizes each tag's age.

A Tag Cloud is a visual representation of so-called "tags" or keywords, that do have a different font size depending on how often they occur on the page/blog. A less used synonym for a Tag Cloud that came up before Web 2.0 is the term "weightet list". Popular examples of Tag Clouds and their use can be found in action at pages like Flickr, Del.icio.us and Technorati. A nice overview on what a Tag Cloud can actually do can be found at WikiPedia: http://wikipedia.org/wiki/Tag_cloud.

This package does not only visualize frequency, but also timeline information. The newer the tag is, the deeper its color will be; older tags will have a lighter color.

The main goal of "HTML_TagCloud" is to provide an easy to implement and configureable Tag Cloud solution that is suitable for any PHP-based webapp.

Features:

  • set up each tag's name, URL, frequency, age
  • customizable colors
  • customizable font-sizes

See also: HTML_TagCloud, Download page / Install instructions

TagCloud_example1.php

* Generate a simple Tag Cloud

MySQL   PEAR   PHP   Perl   PostgreSQL   XML


<?php
// To get the date function working properly we have to set the time zone
date_default_timezone_set('UTC');

// Create an instance of HTML_TagCloud with default behaviour
$tags = new HTML_TagCloud();

// Add some elements
$tags->addElement('PHP''http://www.php.net'39strtotime('-1 day'));
$tags->addElement('XML''http://www.xml.org'21strtotime('-2 week'));
$tags->addElement('Perl''http://www.perl.org'15strtotime('-1 month'));
$tags->addElement('PEAR''http://pear.php.net'32time());
$tags->addElement('MySQL''http://www.mysql.com'10strtotime('-2 day'));
$tags->addElement('PostgreSQL''http://pgsql.com'6strtotime('-3 week'));

// Print out HTML and CSS
print $tags->buildALL();

?>


TagCloud_example2.php

* Generate a Tag Cloud with non-default font sizes embedded into HTML. Also use
* the array function "addElements" in conjunction with "addElement" to mass set
* up tags.

My first Tag Cloud

H   P   a   b   c   d   e   f   g   h   i   j   k   l   m   n   o   p


<?php
// To get the date function working properly we have to set the time zone
date_default_timezone_set('UTC');

// Set up new font sizes
$baseFontSize  36;
$fontSizeRange 24;

// Create an instance of HTML_TagCloud with non-default font sizes
$tags = new HTML_TagCloud($baseFontSize$fontSizeRange);

// Prepare some items, without specifying the timestamp (this way they will get
//  the actual timestamp)
$name 'a';
foreach (
range(015) as $i) {
    
$arr[$i]['name']  = $name;
    
$arr[$i]['url']   = '#';
    
$arr[$i]['count'] = $i;
    
$name++;
}

// Submit the prepared items to the TagCloud
$tags->addElements($arr);
$tags->addElement('H''#'16);
$tags->addElement('P''#'18);

// Get the CSS part only
$css $tags->buildCSS();

// Get the HTML part only
$taghtml $tags->buildHTML();

// Now return a HTML page and display the CSS-part and the HTML-part in
//  separated positions
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>My first Tag Cloud</title>
<style type="text/css">
<?php

// Print CSS-part of the TagCloud
print $css;

?>
</style>
</head>
<body>
<?php

// Print HTML-part of the TagCloud
print $taghtml;

?>


TagCloud_example3.php

* Generate a customized Tag Cloud by extending the class.
* In this example we visualize only the timeline information, not the number of
* occurrences. Because of this every item of the tag cloud will have the same
* font size, but different colors. The newer the tag is, the deeper its color
* will be; older tags will have a lighter color.

MySQL   PEAR   PHP   Perl   PostgreSQL   XML


<?php
// To get the date function working properly we have to set the time zone
date_default_timezone_set('UTC');

// {{{ class MyTags extends HTML_TagCloud{

/**
 * MyTags extends HTML_TagCloud
 *
 * Showing how to override the protected class vars
 *
 * @category  HTML
 * @package   HTML_TagCloud
 * @author    Shoma Suzuki <shoma@catbot.net>
 * @author    Bastian Onken <bastianonken@php.net>
 * @copyright 2010 Bastian Onken
 * @license   http://www.php.net/license/3_01.txt  PHP License 3.01
 * @version   Release: 0.2.4
 * @link      http://pear.php.net/package/HTML_TagCloud
 * @since     Class available since Release 0.1.0
 */
class MyTags extends HTML_TagCloud
{
    
/**
     * Defines colors of the different levels that tags will be assigned to
     * (based on tag's age)
     *
     * @var    array
     * @access protected
     */
    
protected $epocLevel = array(
        array(
            
'earliest' => array(
                
'link'    => 'ffdfdf',
                
'visited' => 'ffdfdf',
                
'hover'   => 'ffdfdf',
                
'active'  => 'ffdfdf',
            ),
        ),
        array(
            
'earlier' => array(
                
'link'    => 'ff7f7f',
                
'visited' => 'ff7f7f',
                
'hover'   => 'ff7f7f',
                
'active'  => 'ff7f7f',
            ),
        ),
        array(
            
'previous' => array(
                
'link'    => 'ff7f7f',
                
'visited' => 'ff7f7f',
                
'hover'   => 'ff7f7f',
                
'active'  => 'ff7f7f',
            ),
        ),
        array(
            
'recent' => array(
                
'link'    => 'ff4f4f',
                
'visited' => 'ff4f4f',
                
'hover'   => 'ff4f4f',
                
'active'  => 'ff4f4f',
            ),
        ),
        array(
            
'later' => array(
                
'link'    => 'ff1f1f',
                
'visited' => 'ff1f1f',
                
'hover'   => 'ff1f1f',
                
'active'  => 'ff1f1f',
            ),
        ),
        array(
            
'latest' => array(
                
'link'    => 'ff0000',
                
'visited' => 'ff0000',
                
'hover'   => 'ff0000',
                
'active'  => 'ff0000',
            ),
        ),
    );

    
/**
     * Stores the font-size unit, potentional values are: mm,cm,in,pt,pc,px,em
     *
     * @var    string
     * @access protected
     */
    
protected $sizeSuffix 'pt';

    
/**
     * Limits the range of generated font-sizes
     *
     * @var    int
     * @access protected
     */
    
protected $fontSizeRange 0;

    
/**
     * Defines the base font size
     *
     * @var    int
     * @access protected
     */
    
protected $baseFontSize 12;
}

// }}}

// Create an instance of our extended HTML_TagCloud we prepared above
$tags = new MyTags();

// Add Elements (same as TagCloud_example1.php)
$tags->addElement('PHP''http://www.php.net'39strtotime('-1 day'));
$tags->addElement('XML''http://www.xml.org'21strtotime('-2 week'));
$tags->addElement('Perl''http://www.perl.org'15strtotime('-1 month'));
$tags->addElement('PEAR''http://pear.php.net'32time());
$tags->addElement('MySQL''http://www.mysql.com'10strtotime('-2 day'));
$tags->addElement('PostgreSQL''http://pgsql.com'6strtotime('-3 week'));

// Print out HTML and CSS
print $tags->buildALL();

?>


TagCloud_example4.php

* Generate a more customized Tag Cloud.
* This example shows how the timeline information and number of occurrences of
* tag are visualized. Additionally it shows how to set up own css styles.
* The second part of this example shows how to disable timeline processing.

My customized Tag Cloud

First box shows how the timeline information is expressed in detail. There is a static tag cloud of which tags have been named according to their time value:

Second box shows a randomized tag cloud, hit reload to mix them up. Note: At this tag cloud there is no timeline information displayed (allthough there is timeline information set up). Here's how you deactivate it: Set the number of epocLevels at your own extended class to one or set the threshold of the to-be-generated epocLevel to '1' at constructor time:


<?php
date_default_timezone_set
('UTC');

/**
 * MyTagsCustomCss extends HTML_TagCloud
 *
 * Showing how to override the protected class vars
 *
 * @category  HTML
 * @package   HTML_TagCloud
 * @author    Bastian Onken <bastianonken@php.net>
 * @copyright 2010 Bastian Onken
 * @license   http://www.php.net/license/3_01.txt  PHP License 3.01
 * @version   Release: 0.2.4
 * @link      http://pear.php.net/package/HTML_TagCloud
 * @since     Class available since Release 0.1.3
 */
class MyTagsCustomCss extends HTML_TagCloud
{
    protected 
$sizeSuffix '%';
}

// Set up new font sizes, now we use percentual values
$baseFontSize  140;
$fontSizeRange 50;

// Create an instance of our customized HTML_TagCloud we defined above with
//  non-default font sizes and non-default font colors, also increase the number
//  of colors used
$tags = new MyTagsCustomCss($baseFontSize$fontSizeRange'000090''FFFFFF'6);

// Add some elements
$dummyURL 'http://example.org';
// Following elements have a high count
$tags->addElement('oneYearOld(38)'$dummyURL38strtotime('-1 year'));
$tags->addElement('halfAYearOld(34)'$dummyURL34strtotime('-6 month'));
$tags->addElement('threeMonthOld(33)'$dummyURL33strtotime('-3 month'));
$tags->addElement('oneMonthOld(36)'$dummyURL36strtotime('-1 month'));
$tags->addElement('oneWeekOld(37)'$dummyURL37strtotime('-1 week'));
$tags->addElement('now(35)'$dummyURL35strtotime('now'));
// Following elements are the same as above, but they have a medium count
$tags->addElement('oneYearOld(18)'$dummyURL18strtotime('-1 year'));
$tags->addElement('halfAYearOld(14)'$dummyURL14strtotime('-6 month'));
$tags->addElement('threeMonthOld(13)'$dummyURL13strtotime('-3 month'));
$tags->addElement('oneMonthOld(16)'$dummyURL16strtotime('-1 month'));
$tags->addElement('oneWeekOld(17)'$dummyURL17strtotime('-1 week'));
$tags->addElement('now(15)'$dummyURL15strtotime('now'));
// Following elements are tje same as above, but they have a low count
$tags->addElement('oneYearOld(6)'$dummyURL6strtotime('-1 year'));
$tags->addElement('halfAYearOld(2)'$dummyURL2strtotime('-6 month'));
$tags->addElement('threeMonthOld(1)'$dummyURL1strtotime('-3 month'));
$tags->addElement('oneMonthOld(4)'$dummyURL4strtotime('-1 month'));
$tags->addElement('oneWeekOld(5)'$dummyURL5strtotime('-1 week'));
$tags->addElement('now(3)'$dummyURL3strtotime('now'));

// Create an instance of our customized TagCloud we defined above and disable
//  the mumber of used colors by setting the 5th parameter to 1
$tags2 = new MyTagsCustomCss($baseFontSize$fontSizeRange'FF0000''FFFB00'1);

// Set up some tags
$tagFixtures = array(
    
'blogs',
    
'folksonomy',
    
'wikis',
    
'rss',
    
'widgets',
    
'ajax',
    
'podcasting',
    
'semantic',
    
'xhtml',
    
'design',
    
'mobility'
);

// Set up some time occurrences
$timeFixtures = array(
    
'-1 year',
    
'-6 month',
    
'-3 month',
    
'-1 month',
    
'-1 week',
    
'-1 day'
);

// Build and add randomized tags to the TagCloud
foreach ($tagFixtures as $tag) {
    
// Set up how many occurrences this tag has
    
$numberOfOccurrences rand(150);
    
// Randomize through the time fixtures and set up the age of this tag
    
$time $timeFixtures[rand(0count($timeFixtures)-1)];
    
// Finally add it to the cloud, to see how the time and count values are
    //  interpreted we add them to the tagname to see their current value
    //$tag = $tag.'('.$numberOfOccurrences.','.str_replace(' ', '', $time).')';
    
$tags2->addElement($tag$dummyURL$numberOfOccurrencesstrtotime($time));
}

// Now return a HTML page that contains additional TagCloud style definitions
//  and display both TagClouds we created above
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>My customized Tag Cloud</title>
<style type="text/css">
.<?php echo $tags->getUid();?>
.<?php echo $tags2->getUid();?> {
    font-family: 'lucida grande',trebuchet,'trebuchet ms',verdana,arial,
                  helvetica,sans-serif;
    line-height: 1.8em;
    word-spacing: 0ex;
    letter-spacing: normal;
    text-decoration: none;
    text-transform: none;
    text-align: justify;
    text-indent: 0ex;
    margin: 1em 0em 0em 0em;
    border: 2px dotted #ddd;
    padding: 1em;
}
.<?php echo $tags->getUid();?> a:link,
.<?php echo $tags2->getUid();?> a:link {
    border-width: 0;
}
.<?php echo $tags->getUid();?> a:visited,
.<?php echo $tags2->getUid();?> a:visited {
    border-width: 0;
}
.<?php echo $tags->getUid();?> a:hover,
.<?php echo $tags2->getUid();?> a:hover {
    border-width: 1px;
    color:white !important;
    background-color: #000097;
}
.<?php echo $tags->getUid();?> a:active,
.<?php echo $tags2->getUid();?> a:active {
    border-width: 1px;
    color:white !important;
    background-color: #C2D7E7;
}
.<?php echo $tags->getUid();?> .tagcloudElement,
.<?php echo $tags2->getUid();?> .tagcloudElement {
    padding: 2px 5px;
    position: relative;
    vertical-align: middle;
}
<?php

// Print out CSS
print $tags->buildCSS();
print 
$tags2->buildCSS();

?>
</style>
</head>
<body>
<p>First box shows how the timeline information is expressed in detail. There is
a static tag cloud of which tags have been named according to their time value:
</p>
<?php

// Print out HTML
print $tags->buildHTML();

?>
<p>Second box shows a randomized tag cloud, hit reload to mix them up. Note: At
this tag cloud there is no timeline information displayed (allthough there is
timeline information set up). Here's how you deactivate it: Set the number of
epocLevels at your own extended class to one or set the threshold of the
to-be-generated epocLevel to '1' at constructor time:</p>
<?php

// Print out HTML
print $tags2->buildHTML();

?>


TagCloud_example5.php

* Generate a Tag Cloud and specify a special tag separators yourself.

My customized Tag Cloud

This box shows a randomized tag cloud, hit reload to mix them up:


<?php
date_default_timezone_set
('UTC');

// Set up font sizes, colors and a non-default tag separator
$baseFontSize  150;
$fontSizeRange 75;
$sizeSuffix    '%';
$latestColor   'FF0000';
$earliestColor 'FFFB00';
$thresholds    6;
$tagSeparator  '<span style="color:#DDDDDD;"> / </span>';

// Create an instance of HTML_TagCloud with settings we defined above
$tagCloud = new HTML_TagCloud(
    
$baseFontSize$fontSizeRange$latestColor$earliestColor$thresholds,
    
$sizeSuffix$tagSeparator
);

// Set up some tags
$tagFixtures = array(
    
'blogs',
    
'folksonomy',
    
'wikis',
    
'rss',
    
'widgets',
    
'ajax',
    
'podcasting',
    
'semantic',
    
'xhtml',
    
'design',
    
'mobility'
);

// Set up some time occurrences
$timeFixtures = array(
    
'-1 year',
    
'-6 month',
    
'-3 month',
    
'-1 month',
    
'-1 week',
    
'-1 day'
);

// Build and add randomized tags to the TagCloud
foreach ($tagFixtures as $tag) {
    
// Set up how many occurrences this tag has
    
$numberOfOccurrences rand(150);
    
// Randomize through the time fixtures and set up the age of this tag
    
$time $timeFixtures[rand(0count($timeFixtures)-1)];
    
// Finally add it to the cloud, to see how the time and count values are
    //  interpreted we add them to the tagname to see their current value
    
$tagCloud->addElement($tag$dummyURL$numberOfOccurrencesstrtotime($time));
}

// Now return a HTML page that contains additional TagCloud style definitions
//  and display both TagClouds we created above
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>My customized Tag Cloud</title>
<style type="text/css">
.<?php echo $tags->getUid();?> {
    font-family: 'lucida grande',trebuchet,'trebuchet ms',verdana,arial,
                  helvetica,sans-serif;
    line-height: 1.8em;
    word-spacing: 0ex;
    letter-spacing: normal;
    text-decoration: none;
    text-transform: none;
    text-align: justify;
    text-indent: 0ex;
    margin: 1em 0em 0em 0em;
    border: 2px dotted #ddd;
    padding: 1em;
}
.<?php echo $tags->getUid();?> a:link {
    border-width: 0;
}
.<?php echo $tags->getUid();?> a:visited {
    border-width: 0;
}
.<?php echo $tags->getUid();?> a:hover {
    border-width: 1px;
    color:white !important;
    background-color: #FF0000;
}
.<?php echo $tags->getUid();?> a:active {
    border-width: 1px;
    color:white !important;
    background-color: #FFFB00;
}
.<?php echo $tags->getUid();?> .tagcloudElement {
    padding: 2px 5px;
    position: relative;
    vertical-align: middle;
}
<?php

// Print out CSS
print $tagCloud->buildCSS();

?>
</style>
</head>
<body>
<p>This box shows a randomized tag cloud, hit reload to mix them up:</p>
<?php

// Print out HTML
print $tagCloud->buildHTML();

?>


Open Source Projekt: Rainmeter Skins

 

Folgende Skins lassen sich in das Open Source-Tool "Rainmeter" einbinden. Das Programm kann beliebige Systemeingenschaften auslesen und in verschiedenster Weise auf dem Desktop ausgeben. Der Entwickler stellt dieses Programm kostenfrei auf seiner Webseite zur Verfügung.

Die folgenden Skins sind von mir erstellt worden. Sie können sie frei herunterladen.

mySystemSkin


Original size. Text switched to english. Text switched to german. Transparent mode. →mySystemSkin-0.14-SF.zip - v0.14 (2008-11-23)

Mit diesem Skin lassen sich die wichtigsten Systemvariablen anzeigen. Um ihn an das individuelle System anzupassen ist allerdings etwas Handarbeit erforderlich. Besonderes Feature ist die Wetteranzeige, die durchgehend das aktuelle Wetter aus der Region anzeigt.

Projektseite auf sourceforge.net: http://sourceforge.net/projects/mysystemskin