Web Controler

Motivación

2010-08-03T07:03:00.000-07:00

La motivación es algo muy importante al momento de iniciar un proyecto web.

Muchos lo hacen por dinero, otros por obligación, pero hay proyectos Open Source, sin ánimo de lucro.

Dónde obtienen ellos su motivación?, por qué lo hacen?

Aquí la opinión de algunos webmasters: http://blog.webtorio.com/motivacion

Si eres webmaster, envia tu motivación como comentario!

Google y su genial propuesta de logo

2010-05-22T08:07:00.000-07:00

Muchos hemos visto cómo cambia el logo de Google dependiendo de alguna fecha importante, como las olimpiadas, el mundial, días de independencia o cumpleaños de algún personaje famoso.

Esta vez, Google celebra el aniversario número 30 del famoso juego Pacman.

Pero esta vez no es un simple logo, ya que puedes jugar, ganar puntos y todo igual al original juego de pacman!!! Y también cambió el botón de "Voy a tener suerte" por "Insertar moneda".

Ahora, tenemos que esperar a ver qué nuevas sorpresas nos trae Google.

Que te parece?

Hablando sobre el Software Libre :: Entrevista

2010-05-20T12:09:00.000-07:00

En bloggeandolo.blogspot.com le han realizado una entrevista a uno de los desarrolladores del nuevo software de foros LinKen sobre el Open Source.

Tal vez hayamos encontrado comentarios y puntos de vista provenientes de quienes usan o modifican el software libre.
Pero esta vez, hablaremos con quién lo desarrolla directamente ;)
La entrevista se realizó a Alan, alias "Kenichi" encargado del diseño y la programación de la interfaz gráfica en LinKen foros.

Enlace: http://bloggeandolo.blogspot.com/2010/05/platicando-sobre-software-libre.html

Saludos!!!

LinKen Foros v1.3

2010-05-17T17:32:00.000-07:00

Como ya lo habrán notado, he estado ausente por mucho tiempo; pues he estado muy ocupado con mis otras obligaciones y algunos proyectos web más profesionales (http://www.fashiongall.com/, http://www.webtorio.co.cc/).

Pero hoy les traigo una nueva noticia.

Se trata de la nueva versión del sistema de foros LinKen. El número de esta versión es 1.3 y se han solucionado todos los bugs de las versiones anteriores.

Además de que hay muchas mejoras en comparación con la versión 0.5 RC1, cuenta con unos de los instaladores más fáciles de utilizar que se hayan creado. Nueva apariencia y un sistema de administración simple para que cualquiera pueda utilizarlo.

Recientemente se publicó la Guia de instalacion actualizada para su más reciente versión LinKen v1.3

Se encuentran preparando la versión 2.0; la cual planea añadir más opciones y mejorar las ya existentes; ver lista

Se espera mucho de este nuevo proyecto que poco a poco...se está abriendo camino.

Página oficial: http://linkenforos.com.ar/

Descargar: http://www.linkenforos.com.ar/descargar.php

Y a partir de esta publicación escribiré más seguido....saludos!!!

Webtorio :: Tu directorio de páginas web

2009-11-11T14:50:00.000-08:00

Hoy les presento un nuevo directorio de páginas web. Se trata de Webtorio, un pequeño proyecto con grandes metas.

Es un proyecto que está en crecimiento, y que necesita el apoyo para poder avanzar.

Tiene varias opciones interesantes, ideales para dar a conocer nuevas páginas web, votación semanal y control total de las páginas registradas.

Su agradable diseño, lo hace ideal para los que quieren encontrar nuevas páginas del internet, compartirlas en las redes sociales más famosas: Twitter, Facebook, Reddit, Digg, etc.

Además se adelanta la sección de códigos HTML, una sección en la que se econtrará códigos para colocar en tu web y conseguir más votos. También se espera un pequeño libro de visitas, para recibir los comentarios de los visitantes.

Podemos enviar nuestro comentarios, dudas y sugerencias a través del formulario de contacto:

http://www.webtorio.co.cc/contacto.php

También tiene un buscador, en el que podemos encontrar lo que buscamos.

Enlace: http://www.webtorio.co.cc/

Resetear estilos Css

2009-08-28T10:08:00.000-07:00

Mucho nos hemos topado con las diferencias entre los navegadores al momento de diseñar nuestras páginas web. Estos problemas se dan por los valores predeterminados de los navegadores, ya que no todos son iguales.

Podemos mejorar la compatibilidad de nuestras páginas usando métodos para resetar los estilos.

Hay varios método propuestos. Uno de ellos, el más básico es este:

* {

 padding: 0;
 margin: 0;

}

Otras más avanzadas, como las propuestas en este Post de Pinceladas Web.

O también, podríamos usar el método que propone Yahoo! en Developer Network: http://developer.yahoo.com/yui/reset/

Estos métodos nos pueden ayudar al momento de diseñar nuestras páginas.

ComoCrearTuWeb.com

2009-08-27T06:26:00.000-07:00

Cómo Crear Tu Web es una página perfecta para quienes desean iniciarse en el diseño web. Los tutoriales y cursos parten totalmente desde cero. Esta web tiene ya varios años de estar en línea.

Tiene varios cursos, uno de ellos, el que yo recomiendo es el Curso Completo Paso a Paso, en este curso se explica desde cero todo sobre el diseño web; trabaja con el editor HTML-Kit (el cual es gratuito) y mientras se aprende, se va construyendo una web, con el mismo diseño.

También cuenta con un Foro en que se podrá poner cualquier pregunta o duda que se tenga, tiene varios colaboradores que te responderán lo más rápido posible.

Recientemente no se han añadido nuevas lecciones; pero su creador, Jorgens, está trabajado en ellas.

Enlace a la web: http://www.comocreartuweb.com/

Enlace al foro: http://www.comocreartuweb.com/phpBB2/

Hasta la próxima!

Recomendaciones para encriptar con Php

2009-08-24T18:55:00.000-07:00

Php cuenta con varias funciones para encriptar cadenas de texto, estas funciones se usan para proteger datos, ya que la mayoría no tienen reversa, es decir, si encriptamos la cadena "Hola Mundo" obtenemos otra cadena; pero esta no se puede desencriptar.

La funcion md5 (abreviatura de Message-Digest Algorithm 5, Algoritmo de resumen del mensaje 5) era la más usada en php, devuelve un número de 128 bits de 32 dígitos hexadecimal. Luego se empezó a usar la familia de funciones SHA (abreviatura de Secure Hash Algorithm, Algoritmo de hash seguro). El primer miembro de esta función en Php es SHA-1, produce una salida resumen de 160 bits.

Más seguridad

Para aumentar la seguridad, podemos combinar varias de estas funciones; por ejemplo, podríamos poner:


<?php
$cadena = 'hola mundo';
$codigo = sha1(md5($cadena));
?>

Aquí encriptamos "hola mundo" com md5 y a esa cadena la volvemos a encriptar con sha1.

Podemos también a la cadena original aumentarle una palabra clave que sólo nosotros la sabremos:

<?php
$cadena = 'hola mundo';
$clave = 'mi clave';
$codigo = sha1(md5($cadena.$clave));
?>

Con esto, podemos hacer nuestra pequeña funcion de encriptamiento:


<?php
function encriptar($cadena){
 $clave = '@!#$%';
 $codigo = sha1(md5($cadena.$clave));
 return $codigo;
}
?>

Y hacemos uso de ella con un simple

encriptar('hola mundo');

Espero sus comentarios y sugerencias.

Twitter y Blogger

2009-08-11T06:20:00.000-07:00

Twitter es un servicio gratuito de microbloging, actua al mismo tiempo como red social y permite a los usuarios enviar microentradas de texto llamadas tweets, de un máximo de 140 caracteres.

Estas se usan para decir que se está haciendo en estos momentos, y se les envía a todos los seguidores.

Twitter en Blogger

Tal vez se nos haya ocurrido poner nuestras entradas de Twitter en un blog de blogger. Pues Twitter tiene un widget que permite hacerlo. Simplemente se necesita tener una cuenta en Twitter y una en Blogger e ir a la dirección http://twitter.com/badges/blogger y seguir las instrucciones.

Blogger en Twitter

Tambien es posible hacer lo contrario, que nuestras entradas del blog se vayan a twitter.

Para eso hay varios servicios extra. Como http://twitterfeed.com/, simplemente hay que registrarse, registrar el blog y adecuarlo a nuestro gusto: cada cuánto tiempo se va a actualizar, servicio para acortar urls, etc.

Puedes seguirnos en Twitter: http://twitter.com/webcontroler

Hasta la próxima!

Galería de imágenes con Css::Experimento

2009-08-10T09:37:00.000-07:00

Hoy quiero presentarles un experimento en el que estuve trabajando; se trata de una pequeña galería de imágenes utilizando únicamente css.

Pueden ver el ejemplo en este enlace: http://casinada.freetzi.com/galeria-css/

La verdad es que no está muy bien trabajada aún, se podría mejorar muchos aspectos, o tal vez trabajar con javascript para mejorar los efectos. Pero por eso lo posteo, para que me den sus opiniones y sugerencias.

El html de la galería es el siguiente:

<table id="galeria">
<tr><td>
<a class="imagen" href="#">Friends<span><img src="img/1.jpg" width="300" height="200"></span></a></td>
<td rowspan=6 style="background-color: #000;height:210px;width:310px;color:#fff;text-align:center">Galería</td>
</tr>
<tr><td>
<a class="imagen" href="#">Sapo<span><img src="img/2.jpg" width="300" height="200"></span></a></td></tr>
<tr><td>
<a class="imagen" href="#">Césped<span><img src="img/3.jpg" width="300" height="200"></span></a></td></tr>
<tr><td>
<a class="imagen" href="#">Cooperación<span><img src="img/4.jpg" width="300" height="200"></span></a></td></tr>
<tr><td>
<a class="imagen" href="#">Rojo<span><img src="img/5.jpg" width="300" height="200"></span></a></td></tr>
</table>

El Css:

* {text-indent:0px ; margin:0px ; padding:0px ; border:0px}

body {background-color: #093;font-family:'Trebuchet Ms'}
.imagen         {display: block ;color: black ; text-decoration:none ; width:150px;}
.imagen:link    {}
.imagen:visited {}
.imagen:hover   {color: #fff ; font-weight:bold ; background-color: #000}
.imagen:active  {}

.imagen span{
position: absolute;
left: -1000px;
}

.imagen span img{
border:none;
}

.imagen:hover span{
visibility: visible;
top:7;
left: 159px;
}

Y eso es todo, les vuelvo a dejar el enlace al ejemplo:http://casinada.freetzi.com/galeria-css/

Y les hice un comprimido con los archivos del experimento:http://casinada.freetzi.com/?d=galeria-css.rar

Espero sus comentarios :)

Personalizar CheckBox con FancyForm

2009-08-09T08:27:00.000-07:00

FancyForm es un script basado en Mootools que te permitirá darle estilo propio a los checkbox y radio buttons mediante css.

Puedes ver un ejemplo en http://casinada.freetzi.com/fancyform/ o también en la página oficial: http://lipidity.com/fancy-form/demo/

Para usarlo primero hay que descargar los archivos: http://pub.lipidity.com/fancy-form.zip.

Incluimos los js en nuestro html:

<script type="text/javascript" src="mootools.js"></script>
<script type="text/javascript" src="moocheck.js"></script>

Y ahora hay que hacer el css. Los checkbox deben tener dos estilos llamados ckecked y unchecked, y los radio buttons selected y unselected.

Pero, hay que hacer una pequeña corrección, puesto que el fondo se va a repetir y no se va a ver correctamente. El Css completo queda así:

.f_checkbox,.f_radio {
background-repeat:no-repeat;
background-position:3px center;
height:16px;
display:block;
cursor:pointer;
line-height:120%;
}

.f_radio {
padding:4px 24px;
}

.f_checkbox {
padding:0.5em 24px;
}

.unchecked {
background-image:url(chk_off.png);
}

.checked {
background-image:url(chk_on.png);
}

.unselected{
background-image:url(rdo_off.png);
}

.selected{
background-image:url(rdo_on.png);
}

Ahora únicamente hay que crear los input como de costrumbre, dentro de un label con la clase f_checkbox o f_radio respectivamente:

<label class='f_radio'><input type='radio' name='gender' value='male'> Masculino</label>
<label class='f_checkbox'><input type='checkbox' name='newsletter' checked='checked'> Deportes</label>

Para terminar les dejo un comprimido con los archivos de este tutorial (incluido los js): http://casinada.freetzi.com/?d=fancyform.rar

Hasta la próxima!!!

PclTemplate::Separar el diseño de la programación

2009-08-05T12:02:00.000-07:00

PclTemplate es una clase para manejar fácilmente plantillas. Puede leer plantillas por archivos de texto o por una cadena (string).

Vamos a hacer un ejemplo simple para ver cómo funcioma esta clase.

Primero descargamos los archivos de la página oficial http://www.phpconcept.net/pcltemplate/index.php

Descargamos la última versión que en estos momentos es 0.5

Empezemos:

Esta clase puede manejar varios tipos de "tokens"; estas son

Simples
De lista, tabla o arrays
Condicionales
Y de "includes"

Nuestro primer ejemplo será con las simples. Primero creamos la plantilla. Va a ser un simple html en la que necesitaremos el título y el usuario:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<title><!--(titulo)--></title></head>
<body>
Bienvenido <!--(usuario)-->!</body>
</html>

Vemos que las tokens se definen como comentarios.

Ahora, vamos a hacer el php que leerá la plantilla y nos dará los datos:

<?php
require_once('pcltemplate.class.php');

$plantilla = new PclTemplate();$plantilla->parseFile('plantilla1.html');
$datos = array();$datos['titulo'] = 'Probando la librería';$datos['usuario'] = 'Invitado';
$resultado = $plantilla->generate($datos, 'string');echo $resultado;?>

Primero, incluimos la clase, creamos un objeto de PclTemplate y con parseFile('plantilla1.html') le indicamos que leeremos la plantilla "plantilla1.html";

Los datos son almacenados en arrays, entonces creamos un array y definimos los datos en base a las tokens.

Ahora, el resultado, debemos guardarlo en una "string" para poder mostrarlo. Creamos una variable $resultado y generamos el string.

Por último, hacemos un echo a la variable $resultado y nos dará lo siguiente:

Bienvenido invitado!

Se pueden definir cuantas tokens como se desee.

Ahora, algo muy útil, vamos a usar las tokens de listas:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<title><!--(titulo)--></title></head>
<body>
<!--(list:usuarios)--><table border="1">
<tr>
<td>Nombre</td>
<td>Apellido</td>
</tr>
<!--(item)--><tr>
<td>      <!--(nombre)--></td><td><!--(apellido)--></td></tr>
<!--(enditem)-->
</table>
<!--(endlist)--></body>
</html>

Con  decimos que vamos a trabajar con la lista usuarios.

y  encierran a cada uno de los datos que representa cada lista, lo que está encerrado aquí se repetirá por cada item que tenga la lista.

Ahora el php:


<?php
require_once('pcltemplate.class.php');$plantilla = new PclTemplate();$plantilla->parseFile('plantilla1.html');
$datos = array();$datos['titulo'] = 'Probando la librería';
$datos['usuarios'][0]['nombre'] = 'Pedro';$datos['usuarios'][0]['apellido'] = 'Perez';
$datos['usuarios'][1]['nombre'] = 'María';$datos['usuarios'][1]['apellido'] = 'Martines';
$datos['usuarios'][2]['nombre'] = 'Luis';$datos['usuarios'][2]['apellido'] = 'Lozano';
$resultado = $plantilla->generate($datos, 'string');echo $resultado;?>

Lo que nos dará el siguiente resultado:

Nombre	Apellido
Pedro	Perez
María	Martines
Luis	Lozano

Esta clase es muy fácil de usar, y útil para separar la programación del diseño.

Para terminar les dejo un comprimido con los archivos del tutorial (incluye la librería): http://casinada.freetzi.com/?d=pclTemplate.rar

Les invito a http://www.phpconcept.net/pcltemplate/index.php, página oficial de la clase, ahí encontraran más ejemplos y un muy buen manual de uso.

Hasta la próxima!

Gráfico estadístico de lineas con php y pChart

2009-08-03T07:11:00.000-07:00

En los posts anteriores hemos hecho algunos ejemplos de cómo usar la clase en php pChart, la cuál permite hacer gráficos estadísticos de apariencia profesional.

En esta ocación vamos a realizar un gráfico lineal, lo vamos a llamar desde otro archivo y junto con javascript le pondremos un buen efecto al pasar el cursor. Para ver el ejemplo termindao haz clic aquí. http://shampoo.byethost32.com/pChart-js/

Bien, para empezar, he preparado un comprimido con material de apoyo, incluye las librerias, los javascripts y el ejemplo a realizar:http://casinada.freetzi.com/?d=pChart-lineas.rar

Abrimos el archivo lineas.php que es el que va a generar la imagen; vamos a explicar el código.


<?php

if ( isset($_GET["Action"]) ) { $Action = $_GET["Action"]; } else { $Action = "Draw"; }
if ( isset($_GET["MapID"]) )  { $MapID  = $_GET["MapID"]; }

// Incluimos las clases
include("pChart/pData.class");
include("pChart/pChart.class");

if ( $Action == "GetImageMap" )
{
$Test = new pChart(700,230);
$Test->getImageMap($MapID);
}

Las primeras lineas son para que trabaje correctamente con el javascript, en las siguientes incluimos las clases y en las que siguen le indicamos con que imagen va a trabajar el js, que es esta misma.

Para este ejmplo, haremos un gráfico que demuestre los libros vendidos en los primero 6 meses del año (lo siento, no se me ocurre nada más :P). Ahora definimos los datos:


// Definimos los datos
$Datos = new pData;
$Datos->AddPoint(array(10,20,30,25,25,40),"Libros Vendidos");
$Datos->AddPoint(array("Enero","Febrero","Marzo","Abril","Mayo","Junio"),"Meses");
$Datos->AddSerie("Libros Vendidos");
$Datos->SetAbsciseLabelSerie("Meses");
$Datos->SetYAxisName("Unidades vendidas");

Como vemos los datos se definen de igual forma que en los otros tipos de gráficos.


// Iniciamos el gráfico
$Test = new pChart(700,230);
$Test->setImageMap(TRUE,$MapID);
$Test->setFontProperties("Fonts/tahoma.ttf",8);
$Test->setGraphArea(65,30,650,200);
$Test->drawFilledRoundedRectangle(7,7,693,223,5,240,240,240);
$Test->drawRoundedRectangle(5,5,695,225,5,230,230,230);
$Test->drawGraphArea(255,255,255,TRUE);
$Test->drawScale($Datos->GetData(),$Datos->GetDataDescription(),SCALE_NORMAL,150,150,150,TRUE,0,2,TRUE);
$Test->drawGrid(4,TRUE,230,230,230,50);

Como vemos , el gráfico se inicia exactamente igual que en los otros ejemplos, pero le añadimos un nuevo método: $Test->setImageMap(TRUE,$MapID); , este le da los datos a js para que los ponga en el efecto.


// Dibujamos las lineas
$Test->drawLineGraph($Datos->GetData(),$Datos->GetDataDescription());
$Test->drawPlotGraph($Datos->GetData(),$Datos->GetDataDescription(),3,2,255,255,255);

// Dibujamos la leyenda
$Test->setFontProperties("Fonts/tahoma.ttf",8);
$Test->drawLegend(80,60,$Datos->GetDataDescription(),204,204,255);
$Test->Stroke();

Aquí hacemos lo mismo que en los otros ejemplos: dibujamos las lineas, dibujamos la "leyenda" y mostramos la imagen con Stroke();

Ahora vamos con el otro archivo, abrimos index.php, este no es necesario modificar ni una explicación muy detallada:

No voy aponer el código para no hacer muy largo el post, pero aquí va una explicación breve

Qué es lo hace todo este código?

Pues es muy simple, incluye los archivos js, con php genera un número aleatorio para el dódigo de la imagen y le especificamos que imagen leer.

Con esto hemos terminado los tutoriales sobre pChart. Les dejo otra vez el archivo ejemplo y el material de apoyo:

Ejemplo:http://shampoo.byethost32.com/pChart-js/

Material de apoyo: http://casinada.freetzi.com/?d=pChart-lineas.rar

Les invito a visitar http://pchart.sourceforge.net/, la página oficial de pChart, tiene otros ejemplos y una buena documentación.

Hasta la próxima!!!!

Gráfico de barras con php y pChart

2009-08-01T06:13:00.000-07:00

En el post anterior pChart::Gráficos estadísticos con php hicimos una pequeña introducción a pChart y un tutorial para crea un gráfico tipo pastel.

En esta ocación vamos a crear un gráfico de barras usando esta clase.

Usaremos los archivos de la clase que descargamos del post anteior, si no los tienes aquí está el enlace para descargarlos:http://pchart.sourceforge.net/download.php

Para este ejemplo crearemos una gráfico que muestre las notas de Carlos, Pedro y Juan en los 6 primeros meses del año.

Entonces empezamos incluyendo las clases en nuestro php:


<?php
// Incluimos las clases
include("pData.class");
include("pChart.class");

Ahora, definimos los datos que vamos a mostrar, vamos a crear 4 arrays, los primeros 3 son las notas, y el último es el que contendrá los meses:


// Definimos lo datos
$Datos = new pData;
$Datos->AddPoint(array(8,7,8,9,10,5),"Carlos");
$Datos->AddPoint(array(4,2,4,5,10,6),"Pedro");
$Datos->AddPoint(array(6,1,2,1,4,2),"Juan");
$Datos->AddPoint(array("Enero","Febrero","Marzo","Abril","Mayo","Junio"),"Meses");

Ahora, debemos indicarle qué tipo de datos son, pues los primeros tres son los datos para las estadísticas y el último es el eje x (horizontal).

$Datos->AddSerie("Carlos");
$Datos->AddSerie("Pedro");
$Datos->AddSerie("Juan");
$Datos->SetAbsciseLabelSerie("Meses");

Ahora, iniciamos el gráfico:


// Iniciamos el gráfico:
$Test = new pChart(620,230);
$Test->setFontProperties("Fonts/tahoma.ttf",8);
$Test->setGraphArea(50,30,600,200);
$Test->drawFilledRoundedRectangle(7,7,616,223,5,240,240,240);
$Test->drawRoundedRectangle(5,5,618,225,5,230,230,230);
$Test->drawGraphArea(255,255,255,TRUE);
$Test->drawScale($Datos->GetData(),$Datos->GetDataDescription(),SCALE_NORMAL,150,150,150,TRUE,0,2,TRUE);
$Test->drawGrid(4,TRUE,230,230,230,50);

Aquí creamos un gráfico de 620 x 230 px, definimos el tipo de letra a usar y dibujamos un fondo agradable, y dibujamos el área de gráfico también. Hasta aquí si mostraramos la imagen tendríamos el sigueinte resultado:

Colores en pChart

Los colores en pChart se pueden definir de 2 formas: por paleta de colores o individualmente.

Paleta de colores: se usa un grupo de colores definidos para las barras.

Individualmente: le declaramos el color a cada una de las barras.

Vamos a usar la segunda opción, entonces, declaramos los colores para las barras de Carlos, Pedro y Juan:


//Definimos colores  de las barras
$Test->setColorPalette(0,255,153,51);
$Test->setColorPalette(1,0,204,0);
$Test->setColorPalette(2,51,204,204);

setColorPalette se usa para declarar un color individualmente, tiene 4 valores, el primero es el nivel del array, osea si vamos a declarar el valor al primer array el nivel es 0; y los otros tres son el color el formato RGB.

Ahora solo falta dibujar las barras, la leyenda y el título:


 // Dibujamos las barras
$Test->drawBarGraph($Datos->GetData(),$Datos->GetDataDescription(),TRUE);

// Dibujamos la leyenda
$Test->setFontProperties("Fonts/tahoma.ttf",8);
$Test->drawLegend(545,25,$Datos->GetDataDescription(),192,192,192);

//Dibujamos el título
$Test->setFontProperties("Fonts/tahoma.ttf",10);
$Test->drawTitle(50,22,"Notas de Matemática",50,50,50,585);
$Test->Stroke();

Y listo tenemos nuestro gráfico de barras. Para terminar les dejo un comprimido con los archivos de este tutorial incluidas las clases y la fuente:

http://casinada.freetzi.com/?d=pChart-barras.rar

Para la siguiente entrega, haremos un gráfico lineal utilizando pChart, y veremos una nueva caracteristica de esta clase.

Te ha gustado este aporte? Deja un comentario, es lo único que me anima a seguir publicando :)

pChart :: Gráficos estadísticos con Php

2009-07-31T08:14:00.000-07:00

Les presento una clase en php muy útil.
Se trata de pChart, una clase que permite generar gráficos estadísticos totalmente profesionales como: lineas, barras, pastel y muchos y más.

En este tutorial veremos como hacer un gráfico de pastel.
Primero, debemos descargar los archivos de la clase: http://pchart.sourceforge.net/download.php

Descargamos la última versión, que en estos momentos es pChart 1.27
De todas las carpetas del comprimido usaremos estas:

pChart: es la que contiene las clases
Fonts: es la que contiene algunos tipos de letra que vamos a usar.

Empezamos incluyendo las clases en nuestro php:


<?php
//incluimos las clases:
include("pChart.class");
include("pData.class");

La clase pCache.class no la necesitamos para este ejemplo

Ahora, vamos a definir los datos que queremos que se muestren en nuestro gráfico:


// Defininos los datos
$Datos = new pData;
$Datos->AddPoint(array(10,2,3,5,3),"Serie1");
$Datos->AddPoint(array("Ene","Feb","Mar","Abr","May"),"Serie2");
$Datos->AddAllSeries();
$Datos->SetAbsciseLabelSerie("Serie2");

Aquí hemos creado un objeto pData, y empezamos añadiendo los datos en arrays, la serie uno es la que tendrá la cantidad con la que se rellenará el pastel, y la serie 2 indica a que se refiere cada cantidad.

Ahora, iniciamos el gráfico:

// Iniciamos el gráfico
$Pastel = new pChart(380,200);
$Pastel->drawFilledRoundedRectangle(7,7,373,193,5,240,240,240);
$Pastel->drawRoundedRectangle(5,5,375,195,5,230,230,230);

Aquí hemos creado un gráfico de 380 x 200 pixeles y le hemos puesto un fondo agradable.

Casi para terminar, vamos a poner los datos en el gráfico:

// Dibujamos los datos
$Pastel->setFontProperties("Fonts/tahoma.ttf",8);
$Pastel->drawPieGraph($Datos->GetData(),$Datos->GetDataDescription(),150,90,110,PIE_PERCENTAGE,TRUE,50,20,5);
$Pastel->drawPieLegend(310,15,$Datos->GetData(),$Datos->GetDataDescription(),250,250,250);

Aquí hemos definido el tipo de letra que se va a usar, que será tahoma.ttf y el tamaño, 8.

Luego dibujamos el pastel, le indicamos que datos va a usar, la posicion, el tamaño y el color.

Después, dibujamos la "leyenda", que es la Serie 2.

Y por último, podemos decidir si "guardar la imagen" o "mostrar la imagen".

Para guardarla ponemos:

$Pastel->Render("grafico.png");

En donde "grafico.png" es el nombre o direccion de la imagen a guardar.

Y si queremos mostrarla, simplemente ponemos:

$Pastel->Stroke();

Y listo, tenemos nuestro gráfico estadístico de pastel con php.

Para terminar con este Post les dejo un comprimido con los archivos de este ejemplo incluyendo las clases y la fuente:

http://casinada.freetzi.com/?d=pChart-pastel.rar

El diseño de la página de descargas aún no lo termino :P

Para la próxima entrega, veremos como hacer gráficos de barras usando esta clase.

Te gustó este aporte? Deja un comentario, es lo que me anima seguir publicando :)

LinKen Foros

2009-07-30T12:59:00.000-07:00

Hoy les presento un nuevo proyecto.

Se trata de LinKen foros, una aplicación de foro como SMF, phpBB o vBulletin; totalmente de código abierto.

Como lo dice en su página oficial (www.linkenforos.com.ar) es un sistema gratuito de grado profesional que te permitirá crear tu propia comunidad en tan solo unos minutos.

LinKen está programado con el lenguaje más famoso del momento, php y utiliza base de datos mySQL para guardar los mensajes, usuarios, etc. Está programado en php estructurado, lo que hace que cualquier persona con conociemientos básicos en php pueda adaptarlo y modificarlo sin ningún problema.

La versión más reciente es LinKen v0.4 Beta, es muy buena y estable.

Como está en estado beta, aún tiene fallas, pero sus creadores trabajan lo más rápido posible para solucionarlos. Puedes contactarlos y te responderan lo más rápido posible.

Los requisitos que necesitas para utilizar LinKen son:

PHP 4 o superior
Una base de datos MySQl
La función getimagesize() -> creo que este requisito se suprimirá en la versión que sigue.
Tener activada la subida de archivos en el php.ini
Y obviamente, los datos para la conexion a la base de datos.

LinKen es un proyecto que recién salió a la luz, así que necesita su apoyo!

Página oficial: http://www.linkenforos.com.ar

Descargas: http://linkenforos.com.ar/descargar.php

El principio

2009-07-29T05:58:00.000-07:00

Hola a todos!

Les doy la bienvenida a Web Controler, un portal en el que publicaré algunos recursos sobre el diseño y programación de páginas web.

Se tratará con los lenguajes más útiles y conocidos como HTML, Css, JavaScript, Php y MySQL, Flash (ActionScript) y otros mas...

También se daran algunos consejitos para que la experiencia en el internet mejore, se hablará de sitios como Google, YouTube, Yahoo!, etc. Para sacar el mayor provecho de estos.

También publicaré lo que encuentre en Internet y me parezca útil.

Y sin nada más que decir, te invito a seguir este blog, y a comentar en cada entrada, incluida esta, pues es lo que me anima a seguir.

Hoy Web Controler empieza una gran trayectoria!!!