Crear gráficos de tortas y barras con Javascript y el API de Google

Este es un servicio no tan nuevo de Google que nos permite utilizar un API publico para generar gráficos como barras, mapas, tortas con porcentajes, planos cartesianos, etc. Cosas que por lo general son de los mas complicado para un programador, ya que la salida deberá ser una imagen u objeto gráfico y no cadenas de datos como es tradicional. [Read more...]

El boton del panico, ideal para capturar visitantes ociosos

Si eres bloguero o creas sitios de entretenimiento o contenido que podría ser considerado superfluo, debes considerar que un gran porcentaje de tus visitas vendrán de trabajadores que se encuentran en su oficina, puesto o cubículo de explotación (digo trabajo).

El botón del pánico

El botón del pánico

Esto ya lo demostró facebook con el popular juego Farmville donde el 60% de los usuarios eran, o son trabajores promedio que acceden desde sus oficinas mientras el jefe no esta viendo.

Bueno si eres uno de estos generadores de contenidos podrías considerar la utilización del botón del pánico, así tus usuarios se sentiran ligeramente mas tranquilos mientras navegan tu sitio web.

Pero ¿Que es el botón del pánico?: es una iniciativa de hace mucho tiempo que por razones que desconozco dejo de aplicarse, pero consiste simplemente en la colocación de un enlace o botón que siempre este al alcance de usuario dentro del sitio, que apunte a un sitio que apruebe la empresa, algo así como una salida rápida para casos de emergencia.

De echo ya había olvidado este botón hasta que lo encontré nuevamente en un sitio web en el cual me encontraba perdiendo el tiempo en la oficina el día de hoy.

www.diarionocturno.com/…nt-38481

La etiqueta de audio <audio> en HTML5

Actualmente me encuentro desarrollando un experimento en HTML5, basado en un charla del Campus Party, pero de eso no voy a hablar ahora sino de la etiqueta <audio, una de las novedades de HTML5 que permite reproducir archivos de sonido en diferentes formatos sin necesidad de un plugin como adobe flashplayer  o quik time player. [Read more...]

Tweet board una herramienta util para tu web

Esta fue una herramienta que encontré por ay navegando que me pareció muy interesante, sirve principalmente para mostrar los tweets de una cuenta (de twitter obviamente) y también permitir un cierto grado de feed back muy interesante.

Una de las cosas interesantes es que no tienes que instalarlo en tu servidor, solo agregar un código que te da el servicio y lo configuras cambiando una linea de código. [Read more...]

Función para re-dimensionar imágenes a un espacio ideal

Generalmente cuando hacemos un sistema propio de galería o de upload de imágenes o queremos listar imágenes en una cuadricula sin perder la proporción de las imágenes pero aprovechando al máximo el espacio del que disponemos usamos simplemente un ancho fijo y un alto variable. Sin embargo el problema con este método es cuando las imágenes que llamamos están en posición vertical, es decir que el alto de la imagen supera el ancho, esto puede provocar que se salga de la cuadricula en la cual estamos organizando o listando las imágenes.

Bueno aquí les dejo una simple función PHP que hice para solucionar este problema y poder listar mis imágenes en rejillas sin ningún problema.

<?PHP
function rd_kalvinman($rd_imagen,$rd_ancho,$rd_alto)
{
$rd_size = GetImageSize("$rd_imagen");
$miva_anchura=$rd_size[0];
$miva_altura=$rd_size[1];
if ($miva_anchura > $miva_altura) {
echo ‘<img src="’.$rd_imagen.’" width="’.$rd_ancho.’" height="" border="0" />’;
}
if ($miva_anchura < $miva_altura){
echo ‘<img src="’.$rd_imagen.’" width="" height="’.$rd_alto.’" border="0" />’;
}
}
?>

La estructura es simple rd_kalvinman([imagen], [ancho-max], [alto-max]) de esta manera le indico a la función cual es el ancho máximo [ancho-max] y el alto máximo [alto-max] que puede tener la imagen de salida, y aun si la imagen es muy grande se imprimirá dentro de las medidas que le asignes en la función sin perder la proporción.

Ejemplo: <?PHP
$imagen = “mi-imagen.php”;
rd_kalvinman($imagen, 300, 200);
?>

Es solo un pequeño tip que resulta muy útil a la hora de escalar imágenes, aunque recuerden que si pueden hacer crop mejor, ya que no se recomienda escalar imágenes en HTML.

Ventana de confirmacion al salir de una pagina en javascript

Este tip lo publico simplemente porque pase horas en la busqueda de algo asi y no lo encontre finalmente, con las uñas y sin mucho entendiemiento de Javascript logre esto que me ha funcionado de maravilla en muchisimos navegadoras.

Para comenzar lo que queremos exactamente es crear un alert al cerrar o abandonar una pagina, este alert debe confirmar si el usuario desea realmente salir o quedarse en la pagina actual, igual que lo hace wordpress cuando estas editando un post y te vas sin guardar. xD

Este es el ejemplo de la ventana alert creada con estejavascript.

Confirmacion de javascript

Confirmacion de javascript

El codigo javascript  es muy sensillo, simplemente tienes que usar la funcion onbeforeunload y ejecutar algun tipo de funcion de confirmacion.

Codigo javascript ventana de confirmacion al cerrar pagina:

<script type=”text/javascript”>

window.onbeforeunload = function exitAlert()
{
var textillo = “Los datos que no se han guardado se perderan.”;
return textillo;
}
</script>

<script type=”text/javascript”>        window.onbeforeunload = function exitAlert()    { var textillo = “Los datos que no se han guardado se perderan.”;      return textillo;}
</script>

El objetivo de hacer este javascript es para un script mucho mas grande en el que estoy trabajando que publicare mas adelante.