sábado, 4 de julio de 2015

Nube de etiquetas con enlaces



Esta vez vamos a terminar de mejorar la nube creando enlaces en los nombres de las etiquetas. 

Para ello vamos a necesitar las mismas tablas que utilizamos en elartículo anterior y fijándonos en que utilizaremos el nombre lógico para crear la url del enlace. 

Aquí vamos a tener que crear otro array asociativo con los datos que necesitamos para crear el enlace, es decir, el nombre de la etiqueta y el nombre lógico. Para ello tendremos que hacer otra nueva consulta a la base de datos con los datos de cada etiqueta. 


El código quedaría de la siguiente forma: 
$ssql_etiquetas="select nombre_etiqueta, etiqueta.id_etiqueta from etiqueta, articulo, articulo_etiqueta where etiqueta.id_etiqueta=articulo_etiqueta.id_etiqueta and articulo.id_articulo=articulo_etiqueta.id_articulo";
}

$rs_etiquetas=mysql_query($ssql_etiquetas);
//Creo un array para meter los datos de las etiquetas
$etiquetas = array();
//Para cada etiqueta averiguo cuantas veces aparece en los articulos
while($fila_etiquetas=mysql_fetch_object($rs_etiquetas)){
   $ssql_cuantos="select count(id_etiqueta) as cuantos from breve_etiqueta where id_etiqueta=".$fila_etiquetas->id_etiqueta." order by cuantos desc ";
   $rs_cuantos=mysql_query($ssql_cuantos);
   $fila_cuantos=mysql_fetch_object($rs_cuantos);
   //Voy creando el array asociativo
   $etiquetas[$fila_etiquetas->nombre_etiqueta]=$fila_cuantos->cuantos;
   //A su vez creamos otro array donde meteremos otro con los datos que necesitamos para crear lso enlaces
   $ssql_datos="select * from etiqueta where id_etiqueta=".$fila_etiquetas->id_etiqueta;

   $rs_datos=mysql_query($ssql_datos);
   $fila_datos=mysql_fetch_object($rs_datos);
   $ids[$fila_etiquetas->nombre_etiqueta]=$fila_datos->nombre_logico;
}


Con esto ya tendríamos los dos arrays que necesitamos creados, ahora tenemos que modifcar la función nube_etiquetas que tenemos en el articulo inicial de nubes de etiquetas (enlace al articulo código php de la nubes de etiquetas) 

La única modificación que tenemos que hacer es cambiar la línea que muestra la etiqueta. 

echo $nombreetiqueta;

por la siguiente línea: 

echo '<a href="http://www.dominio.com/etiquetas/'.$ids[$nombreetiqueta].'.html">'.$nombreetiqueta.'</a>';
Pero claro no se nos puede olvidar añadir como variable a la función en nuevo array que hemos creado. 

El código de la función seria el siguiente: 

function nube_etiquetas($etiquetas,$ids){
//saco los valores máximo y minimo de la apariciones de etiquetas
$valor_max = max($etiquetas);
$valor_min = min($etiquetas);
$diferencia = $valor_max - $valor_min;

//ordeno el array
ksort($etiquetas);

//creo la capa donde se van a mostrar las etiquetas
echo '<div class="nube">';
echo '<div class="etiquetas">';

foreach ($etiquetas as $nombreetiqueta=>$apariciones){
    
    //echo $nombreetiqueta;
//calculo un valor de 0 a 10 para cada etiqueta, porcentualmente según valores máximos y mínimos encontrados
$valor_relativo = round((($apariciones - $valor_min) / $diferencia) * 10);
//escribo las etiquetas con su estilo dependiendo del valor porcentual
echo "<span class='etiquetatam$valor_relativo'>";
echo '<a href="http://www.dominio.com/etiquetas/'.$ids[$nombreetiqueta].'.html">'.$nombreetiqueta.'</a>';

    echo "</span> ";
}
//meto una capa sin float para que tome todo el alto de las etiquetas
echo "<div style='clear:both'></div>";
//cierro la nube y las etiquetas
echo '</div>';
echo '</div>';
}


Y bueno solo nos quedaría recordar que cuando llames a la función tienes que pasarle los dos arrays. 

nube_etiquetas($etiquetas,$ids);

Con la llamada terminamos los pasos a seguir para crear una completa nube de etiquetas en PHP.

Fuente:enlace
Si quieres seguir aprendiendo con nosotros, puedes ingresar a nuestros 
Cursos y Diplomados de Tecnología Web visita www.uneweb.edu.ve  para más información

Código PHP de la nube de etiquetas

En este script he simplificado bastante la creación de la nube de etiquetas, para centrarnos en lo que realmente nos interesa en un principio, que cada etiqueta aparezca en la nube con un tamaño de texto relativo al número de apariciones que tiene. 


Array de etiquetas 

Las etiquetas de la nube las vamos a extraer de un array que tenemos que generar previamente. Utilizaremos un array asociativo, donde el índice de cada elemento tendrá el nombre de cada etiqueta. Como valor del array tendremos el número de apariciones de esa etiqueta. 

Por ahora vamos a escribir directamente el código literal para la creación del array. Para posteriores artículos dejamos la explicación sobre como generarlo a partir información extraída de una base de datos. 

$etiquetas = array(
   "HTML"=>10,
   "PHP"=>15,
   "ASP"=>6,
   "Promoción de webs"=>5,
   "Programación"=>8,
   "Javascript"=>12,
   "Ajax"=>5,
   ".NET"=>3,
   "FAQ"=>2,
   "SEO"=>9,
   "CSS"=>12,
   "XHTML"=>8,
   "Desarrollo Web"=>12,
   "Diseño"=>8,
   "Ganar dinero"=>6,
   "Freelance"=>2,
   "Cookies"=>3,
   "Software"=>10,
   "DHTML"=>7,
   "Cross-Browser"=>1
);


Función PHP para la creación de la nube de etiquetas 

Ahora vamos a ver la función que construye la nube de etiquetas. Se trata de recorrer el array y escribir, una a una, todas las etiquetas que contiene con los tamaños apropiados. 

function nube_etiquetas($etiquetas){
   //saco los valores máximo y minimo de la apariciones de etiquetas
   $valor_max = max($etiquetas);
   $valor_min = min($etiquetas);
   $diferencia = $valor_max - $valor_min;
   
   //ordeno el array
   ksort($etiquetas);
   
   //creo la capa donde se van a mostrar las etiquetas
   echo '<div class="nube">';
   echo '<div class="etiquetas">';
   
   foreach ($etiquetas as $nombreetiqueta=>$apariciones){
      //calculo un valor de 0 a 10 para cada etiqueta, porcentualmente según valores máximos y mínimos encontrados
      $valor_relativo = round((($apariciones - $valor_min) / $diferencia) * 10);
      //escribo las etiquetas con su estilo dependiendo del valor porcentual
      echo "<span class='etiquetatam$valor_relativo'>";
      echo $nombreetiqueta;
      echo "</span> ";
   }
   //meto una capa sin float para que tome todo el alto de las etiquetas
   echo "<div style='clear:both'></div>";
   //cierro la nube y las etiquetas
   echo '</div>';
   echo '</div>';
}


Primero sacamos el valor máximo y mínimo del array. Luego el valor diferencia, para saber el recorrido del intervalo de apariciones de todas las etiquetas. Luego ordenamos el array, por orden alfabético según los índices, que son el nombre de las etiquetas. A continuación abrimos las dos capas que contienen la nube y el conjunto de etiquetas. 

Seguimos realizando un recorrido, mediante un bucle foreach, de todas las etiquetas del array. Para cada etiqueta lo primero que hago es generar lo llamo valor relativo, que es un número entero entre 0 y 10 que indica la importancia de una etiqueta en relación a las otras. La etiqueta que menos apariciones tiene, adquiere el valor 0 y la que más aparece tiene valor 10, para el resto de los valores de apariciones se compara su importancia dentro del rango de valores definidos por el máximo y el mínimo. 

Luego escribimos las etiquetas, colocando la clase CSS que contiene el estilo dependiendo de su tamaño. Utilizamos $valor_relativo para asignar el tamaño de la fuente. El código HTML generado para cada etiqueta será algo como esto: 

<span class="etiquetatam10">PHP</span>

Para probar el ejemplo habría que llamar a la función pasándole como parámetro el array de etiquetas que habíamos creado antes. 

nube_etiquetas($etiquetas);

El código completo del script 

Veamos el código completo de la página para generar la nube de etiquetas: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
   <title>Nubes de etiquetas</title>

<style type="text/css">
.nube{
   border: solid 1px #aaaacc;
   background-color: #ddddff;
   color: #666666;
   width: 335px;
   text-align: center;
}
.nube div.etiquetas{
   font-family: verdana,arial,helvetica;
   font-size:8pt;
   padding:5px;
}
.nube div.etiquetas span{
   float: left;
   margin: 0 3px 0 3px;
   height: 20pt;
   white-space: nowrap;
}
.nube div.etiquetas span.etiquetatam1{
   font-size: 110%;   
}
.nube div.etiquetas span.etiquetatam2{
   font-size: 120%;   
}
.nube div.etiquetas span.etiquetatam3{
   font-size: 130%;   
}
div.etiquetas span.etiquetatam4{
   font-size: 140%;   
}
.nube div.etiquetas span.etiquetatam5{
   font-size: 150%;   
}
.nube div.etiquetas span.etiquetatam6{
   font-size: 160%;   
}
.nube div.etiquetas span.etiquetatam7{
   font-size: 170%;   
}
.nube div.etiquetas span.etiquetatam8{
   font-size: 180%;   
}
.nube div.etiquetas span.etiquetatam9{
   font-size: 190%;   
}
.nube div.etiquetas span.etiquetatam10{
   font-size: 200%;   
}
</style>   
</head>

<body>
<?
//defino array con las etiquetas y las apariciones
//pongo un array lleno con datos de prueba, pero habría que generar este array desde base de datos$etiquetas = array(
   "HTML"=>10,
   "PHP"=>15,
   "ASP"=>6,
   "Promoción de webs"=>5,
   "Programación"=>8,
   "Javascript"=>12,
   "Ajax"=>5,
   ".NET"=>3,
   "FAQ"=>2,
   "SEO"=>9,
   "CSS"=>12,
   "XHTML"=>8,
   "Desarrollo Web"=>12,
   "Diseño"=>8,
   "Ganar dinero"=>6,
   "Freelance"=>2,
   "Cookies"=>3,
   "Software"=>10,
   "DHTML"=>7,
   "Cross-Browser"=>1
);

function nube_etiquetas($etiquetas){
   //saco los valores máximo y minimo de la apariciones de etiquetas
   $valor_max = max($etiquetas);
   $valor_min = min($etiquetas);
   $diferencia = $valor_max - $valor_min;
   
   //ordeno el array
   ksort($etiquetas);
   
   //creo la capa donde se van a mostrar las etiquetas
   echo '<div class="nube">';
   echo '<div class="etiquetas">';
   
   foreach ($etiquetas as $nombreetiqueta=>$apariciones){
      //calculo un valor de 0 a 10 para cada etiqueta, porcentualmente según valores máximos y mínimos encontrados      $valor_relativo = round((($apariciones - $valor_min) / $diferencia) * 10);
      //escribo las etiquetas con su estilo dependiendo del valor porcentual
      echo "<span class='etiquetatam$valor_relativo'>";
      echo $nombreetiqueta;
      echo "</span> ";
   }
   //meto una capa sin float para que tome todo el alto de las etiquetas
   echo "<div style='clear:both'></div>";
   //cierro la nube y las etiquetas
   echo '</div>';
   echo '</div>';
}
nube_etiquetas($etiquetas);

?>
</body>
</html>


Fuente:enlace
Si quieres seguir aprendiendo con nosotros, puedes ingresar a nuestros 
Cursos y Diplomados de Tecnología Web visita www.uneweb.edu.ve  para más información

viernes, 3 de julio de 2015

CSS para los estilos de las etiquetas



Utilizaremos CSS para definir los estilos de la nube y de las etiquetas que vamos a colocar dentro. Hemos realizado esta declaración de estilos intentando que sea lo más versátil posible, adaptable a todos los sitios y de modo que se puedan colocar varias nubes en la página con el mismo estilo. 

La declaración de estilos se compone por dos capas. Primero la capa donde vamos a colocar la nube, con estilos generales a la nube. Segundo la capa donde van las etiquetas y por último los distintos estilos de para cada uno de los tamaños posibles de las etiquetas. 

<style type="text/css">
.nube{
   border: solid 1px #aaaacc;
   background-color: #ddddff;
   color: #666666;
   width: 335px;
   text-align: center;
}
.nube div.etiquetas{
   font-family: verdana,arial,helvetica;
   font-size:8pt;
   padding:5px;
}
.nube div.etiquetas span{
   float: left;
   margin: 0 3px 0 3px;
   height: 20pt;
   white-space: nowrap;
}
.nube div.etiquetas span.etiquetatam1{
   font-size: 110%;   
}
.nube div.etiquetas span.etiquetatam2{
   font-size: 120%;   
}
.nube div.etiquetas span.etiquetatam3{
   font-size: 130%;   
}
div.etiquetas span.etiquetatam4{
   font-size: 140%;   
}
.nube div.etiquetas span.etiquetatam5{
   font-size: 150%;   
}
.nube div.etiquetas span.etiquetatam6{
   font-size: 160%;   
}
.nube div.etiquetas span.etiquetatam7{
   font-size: 170%;   
}
.nube div.etiquetas span.etiquetatam8{
   font-size: 180%;   
}
.nube div.etiquetas span.etiquetatam9{
   font-size: 190%;   
}
.nube div.etiquetas span.etiquetatam10{
   font-size: 200%;   
}
</style>


Esto lo vamos a colocar en la cabecera de la página o en la declaración de estilos global de nuestro sitio. 

Si nos fijamos, hemos utilizado 10 diferentes estilos para definir los distintos tamaños de las etiquetas de la nube. Cada una con un porcentaje superior del tamaño del texto.



Fuente:enlace
Si quieres seguir aprendiendo con nosotros, puedes ingresar a nuestros 
Cursos y Diplomados de Tecnología Web visita www.uneweb.edu.ve  para más información

Nubes de etiquetas en PHP

En el siguiente tutorial hablaremos de las nuebes de etiquetas, por expresarlo de alguna manera, cabe decir que las nubes de etiquetas son como un espacio donde se muestran una serie de enlaces a etiquetas o temas que se tratan en una página web. Dichos temas, cada uno con un nombre, aparecen escritos con un tamaño de letra diferente, donde a más apariciones del tema en la página, más grande es el tamaño de la fuente. 


Con las Nubes de etiquetas, se pueden crear herramientas para orientación de los usuarios, que pueden conocer rápidamente qué temas se están tratando actualmente en un sitio web y a cuáles están apareciendo con más asiduidad. Es una herramienta muy visual, porque muestran los temas más importantes aparecen resaltados, porque se muestran con un tipo de letra mayor. 

Seguro que habrás visto en muchas páginas web estas nubes de etiquetas, sobretodo presentes en proyectos de web 2.0. Si alguna vez has tenido ganas de colocar una nube de etiquetas en tu página, este manual te mostrará como hacerlo con PHP de una manera extremadamente simple, pero con una presencia atractiva. 

Os dejo aquí el enlace al ejemplo que vamos a realizar en los primeros capítulos del manual: 

Luego complicaremos un poco el script, para obtener nubes de etiquetas más complejas y lo pondremos en producción en diversos ejemplos. 


Nota: Hay que decir que este manual da por sabidas tecnologías como PHP o CSS, y por supuesto, HTML. Pero en DesarrolloWeb.com tenemos diversos manuales que nos van a ayudar en lo que necesitemos.
Fuente:enlace
Si quieres seguir aprendiendo con nosotros, puedes ingresar a nuestros 
Cursos y Diplomados de Tecnología Web visita www.uneweb.edu.ve  para más información



jueves, 2 de julio de 2015

Cómo instalar Phyton





Fuente:enlace

Si quieres seguir aprendiendo con nosotros, puedes ingresar a nuestros 
Cursos y Diplomados de Tecnología Web visita www.uneweb.edu.ve  para más información

Carrito de la compra en PHP

Vamos a ver una manera sencilla de realizar un carrito de la compra en PHP, utilizando una variable de sesión para guardar los datos del carrito, como los nombres de los productos, sus precios y otros datos de interés. En estos ejemplos nos vamos a centrar exclusivamente en la funcionalidad del carrito, es decir, la memorización de los productos comprados a lo largo de toda la sesión, dejando de lado todo lo relativo a presentación o la extracción de los productos de una base de datos. 


Para entender este manual son necesarios unos conocimientos previos sobre PHP, que se pueden obtener de la lectura de nuestro manual de PHP http://www.desarrolloweb.com/php/ o los talleres prácticos de la tecnología http://www.desarrolloweb.com/manuales/6/. Debemos prestar especial atención al manejo de sesiones en PHP y, dado que esta implementación del carrito está realizada utilizando programación orientada a objetos, será necesario que conozcamos un poco ese tipo de programación, particularmente en PHP 4. 

El carrito lo hemos creado con la versión PHP 4. Para que este ejemplo funcione en PHP 5 (que básicamente cambia con respecto a su antecesor en el trabajo con objetos) habría que realizar algunas modificaciones. 


Referencia: Disponemos de algunos artículos sobre la programación orientada a objetos en PHP 4.



Librería lib_carrito.php 

Vamos a atacar al problema creando una librería con la declaración de una clase, que luego utilizaremos para crear un objeto carrito. Con dicho objeto implementaremos el trabajo típico del carro de la compra, es decir, introducir productos, extraerlos, contabilizar precios, etc. Esta librería la guardaremos en un archivo llamado lib_carrito.php y contendrá el código de la clase carrito, con todos sus métodos y propiedades. 

El carrito se debe poder acceder en cualquier momento, siempre y cuando el visitante permanezca en la página. Además, cada visitante debe disponer de un carrito propio. Aunque podríamos pensar en otras soluciones, estas necesidades descritas inicialmente, hacen muy recomendable el uso de variables de sesión, puesto que ofrecen la mejor forma de tratar con datos específicos de cada usuario, que deben perdurar entre las distintas páginas que visite. 

Vamos a mantener una variable de sesión con una instancia de la clase carrito, que contendrá el carro de la compra del visitante. Esta variable de sesión se guardará en $_SESSION["ocarrito"] y se debe crear al acceder a la página, siempre y cuando no se haya creado previamente. Por ello, en cada página se ha de comprobar si hay un carrito creado y, si no es así, se debe instanciar el objeto. 

if (!isset($_SESSION["ocarrito"])){ 
    $_SESSION["ocarrito"] = new carrito(); 
}


Este código lo hemos situado dentro del archivo librería del carrito, después de la declaración de la clase.


Fuente:enlace

Si quieres seguir aprendiendo con nosotros, puedes ingresar a nuestros 
Cursos y Diplomados de Tecnología Web visita www.uneweb.edu.ve  para más información

miércoles, 1 de julio de 2015

Leer un archivo traído por FTP con PHP


La gestión de archivos por PHP incluye la conexión por FTP o HTTP para abrir un archivo. Esto significa que se puede indicar una URL, en vez de la ruta del archivo en el sistema de archivos del servidor local. Con ello podremos abrir un archivo remoto, que se encuentra en otro servidor.


Para abrir un archivo debemos utilizar la función del sistema de archivos (Filesystem function) fopen. Esta función la describimos con detalle en el manual sobre gestión de archivos por PHP. En este caso vamos a realizar un uso especial para conectar con ese archivo por FTP. 

Antes que nada hay que decir que para que esto funcione, es decir, para poder conectar por FTP o por HTTP con un archivo remoto, tenemos que tener habilitada la directiva allow_url_fopen en el PHP.ini (allow_url_fopen = on). 

La diferencia fundamental a la hora de conectar un archivo que se encuentra en un servidor remoto está en la línea del fopen: 

$archivo = fopen ("ftp://usuario:clave@ftp.servidor.com/html/archivo.txt", "r");

Simplemente indicamos la ruta del archivo con una URL por el protocolo FTP. En dicha URL se indican los siguientes datos.

  • ftp:// es el protocolo.
  • usuario:clave es el usuario y la clave del acceso FTP que estemos utilizando. Si fuera un ftp anónimo podríamos omitir estos datos.
  • @ para separar lo que es el usuario y la clave del nombre del servidor. También se debería omitir en el caso de un servidor anónimo.
  • ftp.servidor.com es el nombre del servidor FTP al que estamos conectando
  • /html/archivo.txt es la ruta desde el directorio raíz del FTP hacia el archivo que se desea abrir.

Luego trataríamos el archivo de manera similar a como hemos visto en otros casos en el manual sobre gestión de archivos por PHP

Veamos un ejemplo completo de conexión por FTP para abrir, leer y mostrar un fichero de texto remoto: 

<?php
$archivo = fopen ("ftp://user:password@ftp.server.com/html/probando.txt", "r");
if (!$archivo) {
echo "<p>No puedo abrir el archivo para lectura</p>";
exit;
}
$texto="";
while ($linea = fgets($archivo,1024)) {
   if ($linea) $texto .= $linea;
}
echo $texto;
fclose ($archivo);
?>


Fuente:enlace
Si quieres seguir aprendiendo con nosotros, puedes ingresar a nuestros 
Cursos y Diplomados de Tecnología Web visita www.uneweb.edu.ve  para más información

Entradas populares