Código fuente Ya.

Puede ejecutar la o las páginas para probar el concepto inmediatamente.

 

Concepto:Nube de etiquetas (tag cloud)

El concepto trata sobre:php
Autor:

Retornar

Nombre del archivo:pagina1.php

Comentarios
Para ver como rescatamos los datos de una tabla, primero la creamos y la poblamos
con una lista de registros, luego los rescatamos y los almacenamos en un vector
asociativo que tiene como subíndice el nombre de la tag y almacenamos como valor
el campo cantidad de la tabla:
while ($reg=mysql_fetch_array($registros))
{
  $marcas[$reg['tag']]=$reg['cantidad'];
}

Luego procedemos a crear un ojbeto de la clase NubeDeTags y llamamos al constructor
pasándole como parámetros el vector y cual serán los tamaños de la fuente más
pequeña y la más grande:
$nube1=new NubeDeTags($marcas,12,34);
$nube1->graficar(250);

Debemos importar la clase mediante la función require:
require("rutinas.php");

Luego procedemos a crear un ojbeto de la clase NubeDeTags y llamamos al constructor
pasándole como parámetros el vector y cual serán los tamaños de la fuente más
pequeña y la más grande:
$nube1=new NubeDeTags($marcas,12,34);

Finalmente llamamos al método graficar indicando que el div que contiene la nube
de tags debe ser de 250 píxeles.
$nube1->graficar(250);

Nombre del archivo:rutinas.php

Comentarios
Los atributos de la clase son:
  private $marcas; 
almacena el vector con las tag como subíndice y la cantidad en el valor de la componente.

  private $men,$may;
almacenamos los valores de las tag con mayor y menor valor.

  private $tamfuente;
almacena un vector con la tag como subíndice y el valor de la fuente para dicha tag.

  private $fuentemayor;
almacena la fuente mayor que puede mostrar la nube (la recibe en el constructor)

  private $fuenteminima;
almacena la fuente mas pequeña que puede mostrar la nube (la recibe en el constructor)


public function __construct($mar,$minf=5,$maxf=20)
El constructor recibe obligatoriamente el vector con las tag y sus valores.
Si solo se pasa un parámetro al constructor los atributos $fuentemayor y $fuenteminima
se inicializan con los valores 5 y 20 respectivamente.

Luego de obtener el menor y mayor valor del vector procedemos a calcular que fuente le
corresponde a cada tad según el valor que almacena:
    $dif=$this->may-$this->men; 
    foreach($this->marcas as $clave => $valor)
    {
      $this->tamfuente[$clave]=floor((($valor-$this->men)/$dif) * 
                              ($this->fuentemayor-$this->fuenteminima))+$this->fuenteminima;
    }

Luego el método que grafica la nube de tags es:
  public function graficar($ancho=200)
  {
    echo '<div style="width:'.$ancho.
         'px;background:#eee;border-color:#000;border-width:1px;border-style:solid;text-align:center">';
    foreach($this->tamfuente as $clave => $valor)
    {
      echo "<span style=\"padding:5px;font-size:".
           $valor."px\"><a href=\"http://www.google.com.ar/search?q=$clave\">$clave</a></span>\n";
    }
    echo '</div>';
  }

puede llegar como parámetro el ancho del div donde se muestra la nube de tag, en caso negativo el
ancho es de 200 píxeles.
Mediante la estructura foreach procedemos a generar todos los elementos span definiendo la propiedad
font-size con el valor calculado en el constructor.
Como ejemplo definimos un hipervínculo al buscador google pasándole como parámetro el nombre de la
tag respectiva.

Retornar



Código Fuente Ya - 2015