Codeline

Exceso de Trabajo

Tue, 26 May 2009 19:52:50 +0000

Bueno mis queridos lectores, les pido escusas por mi larga ausencia, mi idea es tratar de independizar codeline y comprar un dominio propio pero igual por exceso de trabajo y falta de recurso no lo he podido hacer y tampoco he sacado tiempo para postear nuevas cosas, pero espero en estos dias poder sacar el tiempo para hacer otro post sobre mootools que me han solicitado bastante.

bueno espero publicar el post en estos dias, y tambien espero pronto poder anunciar el nuevo sitio definitivo para codeline.. que por cierto no se si se siga llamando codeline ya que este dominio ya esta ocupado jeje.

saludos,

Diego.

Ajax con Mootools

Sat, 20 Dec 2008 17:50:44 +0000

He publicado un nuevo artículo en http://codeline.ritbox.com

El tema es el uso de Ajax con Mootools, usando los métodos Request, Request.HTML y Request.JSON

les recomiendo que sigan el link y lo lean en la nueva url de Codeline.

link

Nuevo URL para Codeline

Mon, 20 Oct 2008 19:04:01 +0000

ya era hora, Codeline ahora tendrá su propio servidor de webhosting en la dirección http://codeline.ritbox.com

Desde ya estan invitados a actualizar sus feed readers e ingresar al nuevo sitio.

por ahora seguiré publicando en el nuevo sitio y en este publicaré el link al articulo esto con el fin de no perder la información de búsquedas y estadísticas de wordpress y google.

Los cambios se deben a que ahora vamos a ser 2 personas las que escribiremos en el blog, y quizas siga creciendo.

Bienvenidos a Codeline en su nueva dirección.

codeline
nueva
url
ritbox
direccion

Google Chrome

Tue, 02 Sep 2008 19:49:56 +0000

Google acaba de lanzar la primer beta de su nuevo navegador Google Chrome.

Yo acabo de descargarlo y hasta ahora empiezo a probarlo, vamos a ver como nos va con este nuevo navegador que entra a competir con el recien publicafo firefox 3 y con el proximo IE 8.

Por ahora seguiré ensayandolo, cosas que le he encontrado es una ventana de depuración para Javascript muy parecida a la extención Firebug de Firefox. También una forma de navegar en modo “anonimo” que le permite no dejar rastro en el navegador de las paginas visitadas.

Aun faltan muchas cosas por probar e igual creería que aun le faltan algunas cuantas mejoras, pero es una iniciativa muy buena, igual estamos hablando del gigante de internet Google. bueno hay que tener en cuenta que Google y Mozilla trabajan en conjunto entonces no se si puedan quizas compartir algo de tecnologia en sus navegadores. no se … el tiempo lo dirá. por ahora los invito a probarlo.

Tool Tips con Mootools 1.2

Mon, 25 Aug 2008 19:36:32 +0000

Actualizado… ahora con ejemplos aqui.

Hola a todos hoy vamos a tratar el tema de los ToolTips que han tenido algunos cambios en mootools 1.2

Básicamente un tooltip es una pequeña ayuda que le presentamos al usuario en la que le informamos de alguna acción o información adicional en un objeto.

Para usar ToolTips necesitamos la librería Core de mootools 1.2 y la librería more con el plugin TIPS. que podemos descargar aqui.

Ahora incluiremos estas librerías en nuestra página dentro de la etiqueta . Recuerde que el orden es importante ya more depende de core.

Ahora dentro del evento domready debemos inicializar el objeto Tips de mootools.

window.addEvent(‘domready’,function()
{
var Tips1 = new Tips(‘.Tips1′,{
showDelay: 400,
hideDelay: 400,
fixed:true
});
Tips1.addEvent(‘onShow’, function(tip){
tip.fade(‘in’);
});
Tips1.addEvent(‘onHide’, function(tip){
tip.fade(‘out’);
});

$(‘lnk’).store(‘tip:title’, ‘Titulo del ToolTip’);
$(‘lnk’).store(‘tip:text’, ‘Texto del ToolTip’);

});

La definición se compone básicamente en:

var Tips1 = new Tips(‘’,{});

En el caso del ejemplo he puesto como clase css ‘.Tips1’ y como opciones:

showDelay:400 <- muestra el tooltip despues de 400ms de que el mouse este sobre el.

hideDelay:400 <- oculta el tooltipo 400ms despues de que el mouse no este sobte el.

fixed:true <- indica si el tooltip se mueve con el puntero del mouse o es estatico en donde aparece. Por defecto el valor es False.

Los dos metodos siguentes adicionan eventos al objeto ToolTip. estos eventos son:

onShow : Hace un fade in cuando se inicia el tooltip.

onHide : hace un fade out cuando se cierra el tooltip

.Luego las lineas

$(‘lnk’).store(‘tip:title’, ‘Titulo del ToolTip’);
$(‘lnk’).store(‘tip:text’, ‘Texto del ToolTip’);

definen lo que debe mostrarse en el tooltip, es decir el Titulo y el Texto. el Objeto al que le asignamos la propiedad es el objeto en el que debe aparecer el tooltip. En este caso he creado un link

mostrar

El link debe tener como clase css la que definimos al momento de crear el objeto Tips de mootools.

Otra forma de mostrar contenido en el tooltipo es usando el atributo title del link. en este caso sobraría la definición que hacemos arriba con el metodo store(). y quedaria algo asi:

mostrar

Definición de Estilos para el ToolTip

La estructura que crea mootools para pintar el tooltip es la siguente:

//the className you pass in options will be assigned here.

//useful for styling

//useful for styling

Entonces de aqui nos basamos para crear la hoja de estilos que definirá el estilo del tooltip.

en definitiva las clases css importantes son:

tip-top
tip
tip-title
tip-text
tip-bottom

Aqui un ejemplo usando unicamente tip, tip-title y tip-text

.tip {
Z-INDEX: 13000; WIDTH: 130px; COLOR: #000
}
.tip-title {
PADDING-RIGHT: 8px; PADDING-LEFT: 8px; FONT-WEIGHT: bold; FONT-SIZE: 11px; BACKGROUND: #c3df7d; PADDING-BOTTOM: 4px; MARGIN: 0px; COLOR: #3e4f14; PADDING-TOP: 8px; BORDER-BOTTOM: #b5cf74 1px solid
}
.tip-text {
PADDING-RIGHT: 8px; PADDING-LEFT: 8px; FONT-SIZE: 11px; BACKGROUND: #cfdfa7; PADDING-BOTTOM: 8px; PADDING-TOP: 4px
}

Listo, ahora nuestro tooltip funciona. puedes ensayar con nuevos efectos de transición y con hojas de estilo mas elaboradas y obtendrás excelentes resultados.

Actualizado… ahora con ejemplos aqui.

Publicado mi sitio en Google Sites

Fri, 25 Jul 2008 14:47:31 +0000

Bueno, este es un post rapido y solo con el propósito de informarles que ya he publicado mi sitio en Google Sites, y desde allí publicarpe algunas de las librerías y utilidades que yo he hecho o completado para que todos las podamos usar…

Espero contar con el apoyo de todos ustedes y si tienen alguna contribución para hacer con gusto la publicaré.

El URL es http://sites.google.com/site/codeline2/

Eso es todo por ahora… estaré publicando pronto..

Cambiar Extenciones de Forma Recursiva

Fri, 18 Jul 2008 19:16:24 +0000

Hace algún tiempo, necesité cambiar las extenciones de todos los archivos mp3 que tenia en mi computadora de la oficina, y reemplazarlos por otra extención por ejemplo mpz que no fuera identificada por algun script de eliminación automática de archivos.

Entonces creé un batch al que llamé hidemsk. Este archivo hecho para Windows, debe configurarse cual es la ruta de los archivos, la extención inicial y la extención final, y eso es todo .. solo resta esperar que el proceso termine.

Básicamente la configuración es muy sencilla, editamos el archivo con cualquer editor de texto como notepad y en la seccion de configuración ponemos la ruta a procesar.

::::::::::::::::::::::::::::: CONFIGURACION :::::::::::::::::::::::::::::

:: Ruta ej: C:\archivos
set ruta=C:\compartida

:: Nombre Directorio Principal
set dirp=musica

:: Extencion Inicial
set ext1=mp3

:: Extencion Final
set ext2=mpx

::::::::::::::::::::::::::: FIN CONFIGURACION ::::::::::::::::::::::::::::

Hay que tener en cuenta que la ruta no puede finalizar con un "\ " y es el directorio principal en el cual se encuentra la carpeta a procesar.

dirp : es la carpeta a procesar

es decir:

si la ruta es: C:\Compartida\musica\archivos.mp3

C:\
++ Compartida\
++ ++ musica\
++ ++ ++ archivos.mp3

entonces:

:: Ruta ej: C:\archivos set ruta=C:\compartida

:: Nombre Directorio Principal set dirp=musica

y asi serán procesados todos los archivos que esten en la carpeta Musica y sus subcarpetas.

Este es un pequeño script que me ha servido mucho y a algunos conocidos mios tambien les ha sido muy util esta pequeña herramienta, asi que vale la pena publicarlo para que alguien mas lo pueda usar.

por eso creé un proyecto en Google code para mantenerlo.

la ruta es: http://code.google.com/p/hidemsk/

Esos es todo por ahora, espero que les sirva.

Commons File Upload

Tue, 15 Jul 2008 20:55:22 +0000

Por cuestiones de trabajo, he tenido hacer una pequeña aplicación Web que carga un archivo plano separado por comas y carga sus registros en una base de datos.

Pues he utilizado una librería de Apache Commons llamada File Upload, la cual nos provee de de un framework mas avanzado para el manejo de archivos.

Bueno hasta ahora la he comenzado a utilizar entonces pondré en este post los pasos que he hecho para que me funcione.

Primero descargué la librería de File Upload de aqui, y luego descargue la librería Commos.io de Apache la cual es necesaria para FileUpload.

Luego las pongo dentro de la carpeta WEB-INF/lib.

Basicamente he creado una página con un formulario, un File Input y un boton de Submit. y un Servlet que será el encargado de procesar el archivo.

La Página:

              enctype="multipart/form-data">

Es muy importante que tengamos encuenta que el formulario debe tener como metodo a usar POST y el tipo de encripción debe ser “multipart/form-data” esto es necesario para poder hacer el upload de archivos.

Ahora el Servlet

incluimos las librerias necesarias para File Upload

import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.FileUploadException;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;

y en el el metodo doPost ponemos el codigo necesario para procesar el archivo.

Gracias a FileUpload podemos hacer una verificación para saber si en el contenido enviado vienen datos multipar o y así saber como tratar el request.

boolean isMultipart = ServletFileUpload.isMultipartContent(request);

Ahora creamos los objetos para procesar el archivo

FileItemFactory factory = new DiskFileItemFactory();

ServletFileUpload upload = new ServletFileUpload(factory);

List items = upload.parseRequest(request);

En donde items es un arreglo de objetos FileItem.

ahora nos resta recorrer el arreglo item para procesar cada uno de los archivos cargados.

Iterator iter = items.iterator();
while (iter.hasNext())
{
FileItem item = (FileItem) iter.next();

if (item.isFormField())
{
// aqui va el codigo si el objeto no es un archivo
// sino un campo del formulario

}
else
{

// Empezamos a leer las propiedades del archivo

String fieldName = item.getFieldName();
String fileName = item.getName();
String contentType = item.getContentType();
boolean isInMemory = item.isInMemory();
long sizeInBytes = item.getSize();

InputStream data = item.getInputStream();

DataInputStream in = new DataInputStream(data);

BufferedReader br = new BufferedReader(new InputStreamReader(in));

// Leemos linea a linea el archivo.

while ((line = br.readLine()) != null)
{
st = new StringTokenizer(line, ";");
System.out.println("ARCHIVO *** :" + line);
}
br.close();

}

Esta funcionalidad nos permite leer el archivo y tenerlo en memoria mientras lo guardamos en una base de datos.

Aqui lo que hacemos es procesar la linea y separar sus columnas, segun nuestra definición y luego guardarlas en las tablas de base de datos correspondientes.

Pero igual si nuestro objetivo no es solo leer el archivo sino guardar el archivo fisico en el filesystem del servidor entonces lo que hay que hacer es volcar el contenido utilizando:

item.write(new File(“ruta del archivo”));

Bueno esta era solo una pequeña introducción al tema, si les interesa utilizarlo y llegar mas al fonde de esta librería pueden consultar la dirección oficial y su guía de uso.

http://commons.apache.org/fileupload/using.html

Gracias por la atención, si tienes comentarios no dudes en hacerlos, igual estamos para ayudarnos.

Blueprintcss un Framework CSS

Thu, 03 Jul 2008 15:37:22 +0000

Hoy voy a hablar sobre 2 cosas en este post, primero y es el tema principal es sobre el framework css llamado Blueprint y el segundo tema es Windows Live Writer.

Bueno y porque Windows Live Writer? pues porque acabo de instalarlo y voy a escribir este post usándolo para hacer una prueba de sus funciones, luego escribiré mas a fondo sobre el tema del windows live writer.

Blueprint es un set de archivos CSS que trae ya definidos muchos formatos útiles y que nos facilitan la creación de nuestros sitios. Es 100% web 2.0, trabaja con DIV y permite definir desde una página con una sola columna, hasta páginas con diseños complejos casi tan fácil como usar una grilla gráfica para ubicar nuestros objetos.

Hay que reconocer que de primera mano no es tan rápido el desarrollo usando este framework ya que tenemos primero que aprender como usarlo y cual es la mejor forma de poner los objetos, pero estoy seguro que después de coger el paso ya será muy fácil crear rápidamente un sitio con una distribución compleja y sin tanta preocupación por el css y los tipos de letra entre otros.

aquí hay un ejemplo de lo que puede hacerse con solo Blueprint

http://files.bjorkoy.com/blueprint/tests/parts/sample.html

Actualmente está en la versión 0.7, la cual podemos descargar desde Google Code BluePrintCss.

El archivo descarga varias cosas incluido el código fuente pero básicamente solo necesitaremos incluir 3 archivos css:

print.css Este archivo tiene los estilos necesarios para usarlos al momento de imprimir contenido

screen.css : Este es el archivo principal con todos los estilos necesarios.

ie.css : Un archivo para suplir algunas de las cosas diferentes que tiene Internet Explorer.

Ahora incluimos los css dentro de nuestra pagina con las etiquetas link.

Y comenzamos a utilizarlo.

Como vemos en las etiquetas definimos cada uno de los usos que se le dará a los archivos, por ejemplo para el archivo screen.css definimos que se usara para proyecciones y pantalla, luego definimos el que se usará para impresión y adicionalmente con una etiqueta condicional definimos que si es un Internet Explorer entonces usamos el archivo ie.css.

Lo primero es incluir un DIV que servirá de contenedor para todo el sitio, este div contendrá los demás elementos de la página y se encargará de dar el tamaño y centrar el contenido.

En donde el estilo que usamos es “container” el cual define el tamaño a 960px centrado.

Ahora voy a crear el encabezado de la página en donde pondré el titulo del sitio. utilizo un estilo “span-24” que llenará de lado a lado de la pantalla.

Este es el header

Defino una columna de contenido principal, con “column span-12 colborder first “ que básicamente le decimos que es una columna que es la primera y que tiene un borde al lado derecho.

Contenido Principal

Vestibulum ante ipsum primis in faucibus orci luctus et

Ahora agrego dos columnas mas que por el span-7 y el span-3 son mas pequeñas en ancho que la de contenido.

Segunda Columna

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras ornare mattis nunc. Mauris venenatis, pede sed aliquet vehicula, lectus tellus pulvinar neque, non cursus sem nisi vel augue

Tercera Columna

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras ornare mattis nunc. Mauris venenatis, pede sed aliquet vehicula, lectus tellus pulvinar neque, non cursus sem nisi vel augue

y por ultimo adiciono el Pie de Página, lo separo con un HR para hacer una línea.

Este es el Footer

y ya tengo el esqueleto de mi sitio, solo me restaría terminar de adicionar las imágenes y el contenido que defina mi diseño pero el esqueleto esta listo.

Bueno, esta muy básico, pero solo quería contarles lo sencillo que es, ya igual trae muchas otras cosas que quizás trataremos después o puedes leer en los tutoriales, ejemplos o con la experiencia propia, es mas si quieres publicar un tutorial mas avanzado te invito a que me lo envíes y yo lo publico aquí como un post a tu nombre.

yo recomiendo este tutorial de Leonardo Donofrio el cual explica las cosas básicas y en español, aunque hay que tener en cuenta que este tutorial usa una versión anterior de blueprint así que no van a coincidir las medidas de los elementos.

yo lo que hice fue usar el tutorial para entender como usarlo pero luego abrí el archivo screen.css y comencé a ver cuales son las medidas de cada uno de los atributos para saber cual usar.

más tutoriales y artículos sobre el tema en:

http://code.google.com/p/blueprintcss/wiki/Links

Listos para el Firefox 3.0

Tue, 17 Jun 2008 14:44:40 +0000

Ya esta todo preparado, los puntos de descargas estan listos… y a las 10 horas hora del pacifico, es decir a las 12 horas de colombia estará disponible para descargar y para contar las descargas para vencer el record.

vamos a ver que pasa… pero ya estoy listo… unanse…