HTML5 Tag Cloud

HTML5Die bereits mehrfach verwendete 3D Tag Cloud soll nun mit HTML Hilfsmitteln realisiert werden.

Während wp-cumulus und SVG Tag cloud  Flash-Objekt und SVG zur Animation nutzen, verwendet HTML5 Tag Cloud das canvas Objekt. Leider unterstützen auch hier nicht alle Browser den HTML5-Standard. Der IE9 hat wieder ein grundsätzliches Problem mit der Anzeige.  Firefox 7 und Google Chrome V15 zeigen sehr gute Ergebnisse.

Die aktuelle Version der HTML Tag Cloud wird unter  http://code.google.com/p/html5tagcloud/ zum Download bereit gestellt.

Auch hier noch das Beispiel in Aktion (wenn der Browser die Anzeige erlaubt):

HTML5 Tag Cloud

Veröffentlicht unter Allgemein, Tag Cloud, Webdesign | Verschlagwortet mit , , , | Kommentare deaktiviert für HTML5 Tag Cloud

SVG Tag Cloud

Die 3D Tag Cloud ausschließlich mit SVG Hilfsmitteln zu realisieren, d.h. ohne Flashprogrammierung,  ist Inhalt dieses Beitrags.

Während bei wp-cumulus ein Flash-Objekt zur Animation benötigt wird, kann bei der SVG Tag Cloud dieses mit SVG Hilfsmitteln und SVG-Web realisiert werden. Leider unterstützen noch nicht alle Browser den SVG-Standard. Der IE9 hat ein grundsätzliches Problem mit der SVG Tag Cloud und bringt keine Anzeige.  Firefox 7 liefert eine dynamische Anzeige, stürzt nur leider zeitweise ab. Die besten und stabilsten Ergebnisse zeigt der Google Chrome V15. Vermutlich ist hier die SVG-Web Bibliothek optimal umgesetzt.

SVG Tag Cloud wurde auf Basis folgender Quellen realisiert:

Die aktuelle Version der SVG Tag Cloud wird unter  http://code.google.com/p/svgtagcloud/ zum Download bereit gestellt. Hier werden auch Aufbau und Variablenversorgung beschrieben.

Aber nun noch das Beispiel in Aktion (wenn der Browser die Anzeige erlaubt):

SVG Tag Cloud

Veröffentlicht unter Tag Cloud, Webdesign | Verschlagwortet mit , , , | 3 Kommentare

WP-cumulus

Die tag cloud von Roy Tanck ist eine wunderbare Übersicht zur Darstellung von Schlagwörter. So auch unten rechts auf dieser Seite.

Gleichfalls gibt es von Roy Tanck zum Download eine Variante die ausserhalb von WordPress frei in Webseiten integriert werden kann.

Anbei ein Beispiel für Facebook zur Darstellung der Freunde in einer „tag cloud“ unter Nutzung von php. Die integrierte Anwendung findet man in Facebook als App unter friends cloud.

Zuerst die Initialisierung und der Abruf der Freundeliste über das Facebook fql API:

<?php
    include_once "fbmain.php";
    try{
        // Fenster-Breite -Höhe und Schriftgröße
        $w=300;
        $h=300;
        $s=10;
        // fql Aufruf
        $fql = "select name, first_name, uid from user where uid IN
            (SELECT uid FROM friendlist_member WHERE flid IN
            (SELECT flid FROM friendlist WHERE owner=" . $user . "))";
        $param  =   array(
            'method'    => 'fql.query',
            'query'     => $fql,
            'callback'  => ''
        );
        $f = $facebook->api($param);
        // Aufbau der tag liste
        $tags = "<tags>";
        if (sizeof($f) > 60) {
                $w=900;
                $h=900;
                $s=6;
        } elseif (sizeof($f) > 30) {
                $w=600;
                $h=600;
                $s=8;
        }
        for($i = 0; $i < sizeof($f); ++$i) {
              $name = $f[$i]['first_name'];
              $tags .= "<a href=%27http://www.facebook.com/profile.php?
                       id=".$f[$i]['uid']."%27 target=%27_blank%27
                       style=%27".$s."%27 color=%270x3B5989%27
                       hicolor=%270xff0000%27>".$name."</a>";
        }
        $tags .= "</tags>";
        $mode = "mode=tags&";
    }
    catch(Exception $o){
    }
?>

Dann im Hauptteil der Aufruf des tag cloud flash movie über das code.google.com Flashplayer Objekt in der Version  2.2:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <head>
        <title>friends cloud</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script type="text/javascript" src="swfobject.js"></script>
        <script type="text/javascript">
                swfobject.registerObject("myId", "9.0.0");
        </script>
    </head>
    <body>
        <div>    
            <object id="myId"
                    classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
                    width="<?php echo $w; ?>" height="<?php echo $h; ?>">
                <param name="wmode" value="opaque">
                <param name="movie" value="tagcloud.swf" />
                <param name="flashvars" value="<?php echo $mode; ?>
                     distr=true&tagcloud=<?php echo $tags; ?>" />
                <!--[if !IE]>-->
                <object type="application/x-shockwave-flash"
                        data="tagcloud.swf" width="<?php echo $w; ?>"
                        height="<?php echo $h; ?>">
                <param name="wmode" value="opaque">
                <param name="flashvars" value="<?php echo $mode; ?>
                        distr=true&tagcloud=<?php echo $tags; ?>" />
                <!--<![endif]-->
                <div>
                    <h1>alternative content</h1>
                    <p><a href="http://www.adobe.com/go/getflashplayer">
                    <img src="http://www.adobe.com/images/shared/
                       download_buttons/get_flash_player.gif"
                       alt="Get Adobe Flash player" /></a></p>
                </div>
                <!--[if !IE]>-->
                </object>
                <!--<![endif]-->
            </object>
        </div>
    </body>
</html>
Veröffentlicht unter Facebook, PHP, Tag Cloud, Webdesign | Verschlagwortet mit , , , | 2 Kommentare