Hace algún tiempo me tropecé con un programa llamado inkscape que no parecía en lo absoluto interesante. En ese entonces, no comprendía en qué podría ayudarme un programa para el diseño de vectores, el concepto de vectores no se me era familiar. Sin embargo, por alguna extraña razón, este programa, se me atravesaba, una y otra vez cuando intentaba instalar algún paquete relacionado con diseño gráfico.
Posteriormente, decidí comenzar a investigar al respecto, y poco a poco fui descubriendo una gran comunidad de desarrolladores y usuarios detrás de este software. Sin embargo, no me consideraba diseñador, si bien es cierto que me tope en más de una ocasión con la necesidad de maquetar formularios, esto es muy distinto a construir el diseño de portales enteros; algo ya común para personas que trabajan en pequeñas empresas o de forma freelance, en donde es mucho mejor hacerlo uno mismo.
En wikipedia confirme la gran importancia de los vectores, en donde saltaba a la vista un formato aprobado por la W3C y usado por inkscape de forma nativa para sus salvados, este formato, llamado SVG al parecer permite no solamente realizar imágenes vectoriales, sino también animaciones.
Pues la ventaja que comprendí que tienen los vectores frente a otros formatos de imágenes como .jpg es, principalmente, que una vez realizada una imagen de forma vectorial, esta puede ser exportada o visualizada en cualquier resolución posible, es decir, en teoría, una imagen de resolución infinita, que puede ser mostrada en la gran gama de Navegadores Webs disponibles actualmente en el mercado.
Olvidé lo más importante, es un formato abierto y libre.
21 de septiembre de 2008
20 de septiembre de 2008
Autocompletar y validar Fecha en Javascript
A continuación se muestra un ejemplo de una función que he realizado para el autocompletar de una fecha con formato dd/mm/yyyy, que no solo te agrega un '/', sino que también te valida que solamente puedan escribirse números:
var complet = function (e)
{
tecla = e.keyCode? e.keyCode : e.charCode;
if (!(tecla < 48 || tecla > 57))
{
if (((this.value.length+1)==3)||((this.value.length+1)==6))
this.value += '/';
}else
window.event.keyCode=0;
}
Por supuesto, hay que recordar incluir la función en el respectivo input en el código html
var complet = function (e)
{
tecla = e.keyCode? e.keyCode : e.charCode;
if (!(tecla < 48 || tecla > 57))
{
if (((this.value.length+1)==3)||((this.value.length+1)==6))
this.value += '/';
}else
window.event.keyCode=0;
}
Por supuesto, hay que recordar incluir la función en el respectivo input en el código html
Convertir Segundos a Dias,Horas,Minutos y Segundos
Hace algunos días haciendo un sistemita de publicación de noticias se me ocurrió agregarle una característica interesante para que dijera algo así parecido: Esta noticia fue publicada hace 5 días 4 horas 3 minutos 4 segundos.
Bueno pensando en ello nació el siguiente código, que lo consigue, pasando como parámetro únicamente el numero de segundos transcurridos entre la fecha de publicación de la noticia y la fecha actual, acá pego un ejemplo de como obtener eso en SQL:
SQL:
Y, por supuesto, la función que lo calcula a continuación:
Bueno pensando en ello nació el siguiente código, que lo consigue, pasando como parámetro únicamente el numero de segundos transcurridos entre la fecha de publicación de la noticia y la fecha actual, acá pego un ejemplo de como obtener eso en SQL:
SQL:
SELECT (UNIX_TIMESTAMP( NOW( ) )
- UNIX_TIMESTAMP( fecha )) AS input_seconds FROM noticiasY, por supuesto, la función que lo calcula a continuación:
function human_time($input_seconds) {
$days = "";$hours = "";$minutes = "";$seconds = "";
$days=floor($input_seconds / 86400);
$remainder=floor($input_seconds % 86400);
$hours=floor($remainder / 3600);
$remainder=floor($remainder % 3600);
$minutes=floor($remainder / 60);
$seconds=floor($remainder % 60);
if ($days>0) $days = "$days dias ";
if ($hours>0) $hours = "$hours hrs ";
if ($minutes>0) $minutes = "$minutes min ";
if ($seconds>0) $seconds = "$seconds seg ";
return $days.$hours.$minutes.$seconds;
}
Yahoo User Interface
Yahoo User Interface(YUI), una serie de librerías escritas en JavaScript, para la construcción de aplicaciones interactivas (RIA). Liberadas bajo licencia BSD por parte de la compañía Yahoo. Dichas librerías son utilizadas para el desarrollo web específicamente para ser usadas como la programación de aplicaciones de escritorio, con componentes vistosos y personalizables y con una amplia implementación con AJAX. A continuación se muestra un ejemplo de declaración con el uso del componente DataTable:
//Declaración del conector al DataTable
var myDataSource = new YAHOO.util.DataSource(myHugeDataSet);
//Tipo de respuesta del DataSource
myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
//Definiendo la estructura del DataSource
myDataSource.responseSchema = { fields : [ "id","nombre","edad" ] };
//Definición de cada columna del DataTable que debe ser igual a la del DataSource
var myColumnDefs = [ {key:"id"}, {key:"nombre"}, {key:"edad"} ];
//Cantidad de Registros en la variable de configuración del DataTable
var myTableConfig = { renderLoopSize : 20 };
/*
Creación del DataTable pasandole como parametros el nombre, la definición de las
columnas, el datasource o recurzo de donde se optienen los datos, y por último
la configuración general del DataTable
*/
var myDataTable = new YAHOO.widget.DataTable('tbl', myColumnDefs, myDataSource, myTableConfig);
Entre sus características tenemos:
* Capacidad de generar código ordenado para el programador
* Posibilidad de reutilizar controladores
* Manejo de AJAX
* Personalización de los componentes
* Soporte por parte de Yahoo Developers
Entre sus componentes/controles se encuentran:
* DataTable: Para mostrar datos de forma tabular.
* TreeView: Una especie de menú desplegable.
* Calendar: Control para seleccionar la fecha.
* Slider: Para seleccionar un valor numérico.
//Declaración del conector al DataTable
var myDataSource = new YAHOO.util.DataSource(myHugeDataSet);
//Tipo de respuesta del DataSource
myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
//Definiendo la estructura del DataSource
myDataSource.responseSchema = { fields : [ "id","nombre","edad" ] };
//Definición de cada columna del DataTable que debe ser igual a la del DataSource
var myColumnDefs = [ {key:"id"}, {key:"nombre"}, {key:"edad"} ];
//Cantidad de Registros en la variable de configuración del DataTable
var myTableConfig = { renderLoopSize : 20 };
/*
Creación del DataTable pasandole como parametros el nombre, la definición de las
columnas, el datasource o recurzo de donde se optienen los datos, y por último
la configuración general del DataTable
*/
var myDataTable = new YAHOO.widget.DataTable('tbl', myColumnDefs, myDataSource, myTableConfig);
Entre sus características tenemos:
* Capacidad de generar código ordenado para el programador
* Posibilidad de reutilizar controladores
* Manejo de AJAX
* Personalización de los componentes
* Soporte por parte de Yahoo Developers
Entre sus componentes/controles se encuentran:
* DataTable: Para mostrar datos de forma tabular.
* TreeView: Una especie de menú desplegable.
* Calendar: Control para seleccionar la fecha.
* Slider: Para seleccionar un valor numérico.
Suscribirse a:
Entradas (Atom)
