Ayuda con tus Tareas

En forma fácil

 

Como hacer una Nube de Etiquetas con Php

Publicado en php

Gracias por tu visita

¿Necesitas un fotógrafo?
Para contrataciones:
Cel: (953) 107 4141
FotoPex.com

Algunos de nuestros lectores nos han enviado sus emails preguntado de cómo hacer una nube de etiquetas. Pues para todos los que la pidieron aquí les traemos un ejemplo muy simple de cómo hacer una de esas famosas nubes con un array.

Recuerda que si tienes ejemplos que quieras compartir con la comunidad de empresario, puedes enviarlos por mail.

Una nube de etiquetas (tag cloud en inglés) es una representación visual de las «etiquetas» usadas en un sitio Web. Generalmente este listado de palabras se ordena alfabéticamente; las etiquetas más utilizadas se representaran con un tipo de letra de tamaño mayor que el resto. Wikipedia

Pues vamos a hacer una nube de etiquetas partiendo de un array.

Lo primero que necesitamos es crear un archivo de nombre nube.php y en dentro vamos a colocar el código CSS para el estilo que aplicaremos a las palabras de nuestra nube. Fíjate que en a.etiqueta5 estoy aplicando un formato distinto a los demás.

css
< view plain text >
  1. <style type="text/css">
  2. <!--
  3. a:link {
  4.     color: #990000;
  5.     text-decoration:none;
  6. }
  7. a:visited {
  8.     color: #990000;
  9. }
  10. a:hover {
  11.     color: #999999;
  12. }
  13. a:active {
  14.     color: #990000;
  15. }
  16.  
  17. .etiqueta0 {
  18. color:#CCCCCC;
  19. font-size: 10px;
  20. }
  21.  
  22. a.etiqueta1 {
  23.     font-size: 12px;
  24.     }
  25. a.etiqueta2 {
  26.     font-size: 14px;
  27.     }
  28. a.etiqueta3 {
  29.     font-size: 18px;
  30.     }
  31. a.etiqueta4 {
  32.     font-size: 22px;
  33.     }
  34.  
  35. a.etiqueta5:link {
  36.     font-size: 26px;
  37.     color:#000099;
  38.     text-decoration:none;
  39. }
  40. a.etiqueta5:visited {color: #000099;}
  41. a.etiqueta5:hover {color: #999999;}
  42. a.etiqueta5:active {color: #000099;}
  43.  
  44. a.etiqueta6 {
  45.     font-size: 36px;
  46.     }
  47.  
  48.  
  49. -->
  50. </style>

Ahora hacemos la conexión a nuestro servidor y seleccionamos la base de datos que utilizaremos.

php
< view plain text >
  1. <?php // indicamos que es c&oacute;digo php
  2. /*
  3. tag cloud
  4. Nube de etiquetas formada por un array
  5. Autor: Doroteo Catal&aacute;n L.
  6. Web:    www.empresario.mx
  7. */
  8.  
  9. function conecta_db() {
  10. //esta funci&oacute;n la puedes ingresar en un archivo externo y despu&eacute;s llamarla con include("");
  11.     @mysql_connect('localhost','root','password')or die ('Ha fallado la conexi&oacute;n: '.mysql_error());
  12.     @mysql_select_db('mi_base')or die ('Error al seleccionar la BD: '.mysql_error());
  13. }
  14.  
  15.  
  16. conecta_db();

Seleccionamos el campo que tiene las etiquetas separadas por comas “,”. Y Agregamos el contenido a una variable, también separándola con comas.
En este mismo query debes indicar un rango de fechas con Where.

php
< view plain text >
  1. <?php
  2. function nube_etiquetas(){
  3.     global $urlSitio ; // vamos a utilizar la direccion del sitio
  4.     $result = mysql_query('SELECT etiquetas FROM preguntas LIMIT 10'); 
  5.  
  6.     while($row = mysql_fetch_array($result)) {
  7.         $var1 .= $row['etiquetas'].',';
  8.     }
  9.     $var1=substr($var1,0,strlen($var1)-1); 
  10.     $array_sustitucion = array(',,','.','/',':'); // por si acaso tengas alguno de estos caracteres
  11.     $etiquetas=str_replace($array_sustitucion, ",", $var1);
  12.     $etiquetas=explode(",",$etiquetas); // creamos y llenamos un array
  13.    
  14.     array_walk($etiquetas,'quitaEspacio');
  15.     $total=count($etiquetas);
  16.     $etiquetasOk = array_count_values($etiquetas); // devuelve array("prueba"=>2, "chicos"=>2, "chicas"=>1)
  17.  
  18.     echo 'Total de etiquetas'.$total.'<br />';     
  19.      foreach($etiquetasOk as $palabra=>$valor) {
  20.           $porcentaje = round($valor*100/$total);
  21.             if($porcentaje >= 70){
  22.                 $estilo = 6;
  23.             }elseif($porcentaje >= 35){
  24.                 $estilo = 5;
  25.             }elseif($porcentaje >= 30){
  26.                 $estilo = 4;
  27.             }elseif($porcentaje >= 22){
  28.                 $estilo = 3;
  29.             }elseif($porcentaje >= 10){
  30.                 $estilo = 2;
  31.             }else{
  32.                 $estilo = 1;
  33.             }
  34.       echo '<a href="'.$urlSitio.'" class="etiqueta'.$estilo.'">'.$palabra.'<span  class="etiqueta0">'.'('.$valor.')</span> </a>';         
  35.         }
  36. }
  37.  
  38. function quitaEspacio($elemento=' '){
  39.     $elemento = trim($elemento);
  40. }
  41. ?>

Para llamar la nube solo llamamos la función con :

php
< view plain text >
  1. <?php
  2. nube_etiquetas();
  3. ?>

Tal Vez Te Interese También





Copyright © 2013 Ayuda con tus Tareas | Powered by FotoPex.com