Ajax con Mootools
diciembre 20, 2008
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.
Google Chrome
septiembre 2, 2008
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
agosto 25, 2008
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 <HEAD>. Recuerde que el orden es importante ya more depende de core.
<!– mootools 1.2 –>
<script type=»text/javascript» src=»js/mootools12core.js»></script><script type=»text/javascript» src=»js/mootools12more.js»></script>
<!– Fin mootools 1.2 –>
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(‘<nombre de la clase css>’,{<opciones separadas por comas>});
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
<a href=»#» id=»lnk» class=»Tips1″>mostrar</a>
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:
<a href=»#» id=»lnk» title=”link de prueba” class=»Tips1″>mostrar</a>
Definición de Estilos para el ToolTip
La estructura que crea mootools para pintar el tooltip es la siguente:
<div class=»options.className»> //the className you pass in options will be assigned here.
<div class=»tip-top»></div> //useful for styling
<div class=»tip»>
<div class=»tip-title»></div>
<div class=»tip-text»></div>
</div>
<div class=»tip-bottom»></div> //useful for styling
</div>
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.
Cambiar Extenciones de Forma Recursiva
julio 18, 2008
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
julio 15, 2008
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:
<form name="form1" action="cargarservlet" method="post"
enctype="multipart/form-data">
<input type="file" name="archivo"/>
<input type="submit" name="enviar" value="enviar"/>
</form>
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
julio 3, 2008
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.
<!– Framework CSS –>
<link rel=»stylesheet» href=»../blueprint/screen.css» type=»text/css» media=»screen, projection»>
<link rel=»stylesheet» href=»../blueprint/print.css» type=»text/css» media=»print»>
<!–[if IE]><link rel=»stylesheet» href=»../../blueprint/ie.css» type=»text/css» media=»screen, projection»><![endif]–>
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.
<div class=»container»>
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.
<div class=»span-24″>
<h1>Este es el header</h1>
</div>
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.
<div class=»column span-12 colborder first «>
<h2>Contenido Principal</h2>
<p>Vestibulum ante ipsum primis in faucibus orci luctus et</p>
</div>
Ahora agrego dos columnas mas que por el span-7 y el span-3 son mas pequeñas en ancho que la de contenido.
<div class=»column span-7 «>
<h3>Segunda Columna</h3>
<p>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</p></div>
<div class=»column span-3 last»>
<h3>Tercera Columna</h3>
<p>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</p>
</div>
y por ultimo adiciono el Pie de Página, lo separo con un HR para hacer una línea.
<hr>
<div class=»span-24″>
<h4>Este es el Footer</h4>
</div>
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:
Listos para el Firefox 3.0
junio 17, 2008
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…
Roar Notifications con Mootools 1.2
junio 13, 2008
Para seguir con el cuento de Mootools, buscando en la red encontré este plugin excelente para mostrar notificaciones y que usa la última versión de Mootools. Es desarrollado por uno de los programadores de Mootools 1.2 Harald Kirschner.
Les recomiendo le den una mirada, está muy bueno.
Mootools – Parte II – addEvent
junio 13, 2008
Continuamos con la serie de informes sobre Mootools, vale la pena aclarar que para los ejemplos y las explicaciones, usamos la versión 1.11 de Mootools, ya ha sido liberada la versión 1.2 y trae consigo muchos cambios y nuevas formas de hacer las cosas. Probablemente vamos a tener que reescribir algo del código que hagamos con la versión 1.11. Pero por lo menos vamos a poder tener una introducción al tema con este mini manual.
Sabemos que una página al ser invocada por el navegador va solicitando los objetos a medida que se van necesitando, o van siendo leídos. Es decir que el servidor envía la página y el navegador lo primero que ve es la etiqueta <HTML> luego la etiqueta <HEAD> y carga cada una de las etiquetas que están dentro del HEAD de forma secuencial, y así sucesivamente con cada línea de nuestra página.
El problema se presenta cuando intentamos ejecutar un método Mootools y la librería aun no se ha cargado, o cuando necesitamos asignar un evento a un objeto y el objeto aun no ha sido cargado. En estos casos vamos a tener una Excepción de javascript.
Para evitar esto, debemos asegurarnos ejecutar los métodos y funciones cuando ya estemos seguros que no van a fallar por que el objeto aun no existe. Mootools nos facilita esta tarea, al ayudarnos a detectar la carga de la página. Estos eventos son:
Doomready: Ocurre cuando se ha cargado todo el contenido de la página excepto imágenes.
Load: Ocurre cuando todos los objetos de la página han sido cargados.
Estos eventos son los que nos permiten informar al usuario de que la carga de la página está en proceso o ya finalizó al estilo de aplicaciones como GMAIL.
Para utilizar estos eventos vamos a usar el método AddEvent de Mootools, y lo vamos a asignar al objeto Window.
Ejemplo:
window.addEvent(‘domready’,function(){
// CODIGO …
});
El método addEvent permite asignar a cualquier objeto un evento, y ejecutar una función específica al momento de disparar el evento.
La sintaxis es:
miObjeto.addEvent( ‘click’ , mifuncion )
Un ejemplo para adicionar un evento click a un link podría ser así:
window.addEvent(‘domready’,function(){
$(‘elLinkID’). addEvent(‘click’,function(){
Alert(«Esta es una prueba…»);
});
});
En donde la definición del link dentro del HTML sería:
<a href=»#» id=»elLinkID»>click aquí</a>
Listo, ahora ya tenemos un evento capturado con Mootools. Básicamente los eventos se llaman igual que en HTML pero sin el prefijo «on» es decir el «onClick» ahora es «click».
Y así con los demás eventos como blur, mouseover, etc.
Esto funciona igual con la versión 1.2 ya que es algo estándar y básico del framework.
otra vez publicando de afan, espero que pueda hacer cada vez mejores mis publicaciones…
Mootools 1.2 ya esta Disponible
junio 12, 2008
La página oficial de Mootools informa ahora que se ha liberado la versión 1.2 de la librería Mootools, han cambiado el diseño de la página y por ahora solo está disponible la descarga y la documentación, aun faltan cosas como los demos.
Bueno entraremos a analizar esta nueva versión para ver que cosas nuevas trae y como va a estar la compatibilidad con plugins de la versión 1.1.
Ahora me tocó modificar la entrega 2 de los post sobre mootools que estaba haciendo, aun no se que va a pasar con la versión 1.1 y si va a tener mas soporte, yo creería que no pero vamos a ver que pasa y como se porta esta nueva versión.
Por ahora resta esperar que la página esté completamente lista y que más información van a plublicar… ya me descargue la version 1.1 que pesa apx 60k. empesaré a usarla…
Codeline 