Archive for the ‘javascript’ Category

HTML y AMF

miércoles, octubre 24th, 2012

Desde hace un tiempo que se viene concretando la caída en el apoyo a la tecnología Adobe Flex, por otras emergentes a la mano de HTML 5, al punto que Adobe traspaso el dominio del codigo a la fundación Apache para que esta se encargara de la gestión de este código.

No deja ser interesante eso si, que muchas compañías invirtieron en Flex en algunos casos más de lo necesario para contar con esta tecnología de la mano de Adobe, y hoy estan pensando en mudarse a HTML 5, entre otros.

Las problematicas de aplicaciones que optaron por Webservices o JSON para la transmisión de información, no tendrán que reinventar la rueda para poder conectar sus aplicaciones HTML 5 a los ‘end points’ que utilizaron para Flex, los que si estan complicados son los que utilizaron BlazeDS para transmitir la información de retorno, esto porque el retorno de BlazeDS es en formato AMF, que optimiza la comunicación seriabilizando ésta en paquetes muchos mas pequeños que un Webservices o un JSON. La barrera de entrada para generar estas transformaciones entonces radicaban en reutilizar los ‘end points’ de AMF, lo que se logra a través de un Javascript que fue liberado hace bastante tiempo ya.

Puedes ver el javascript aqui y la página de su creador.

Closure Compiler de Google para minimizar Javascript

miércoles, octubre 10th, 2012

Dentro de las herramientas utiles para webmasters o optimizadores de sitios web ed Closure Compiler de Goole, que tiene por onjetivo minimizar el Javascript, a parte de correjirlo orientadolo a las buenas prácticas de desarrollo. Es util como herramienta, y aun que ya había mostrado el YUI Compresor, que comprime tanto JS como CSS, Closure Compiler tiene un funcionalidad adicional interesante, la de fusionar dos archivos Javascript evitando la redundancia de codigo, lo que no deja de ser útil.

Luego de descargarlo, y asumiendo que tienes java 1.6 instalado al menos, debes ejecutarlo

c:\opt\java6\bin\java -jar C:\opt\googleClousureCompiler\compiler.jar --js=file.js --js_output_file=file_min.js

Entiendase aqui que tengo una forma de instalar todos los programas que ejecutaré a linea de mando, por eso ambos estan en c:\opt\…algo, además aquí establesco las rutas completas debido a que esta llamada al programa esta hecha en el mismo directorio en donde se encuentra el archivo origen.

Basicamente con esto obtienes un javascript minimizado. Un batch simple para realizar esta tarea sería

c:\opt\java6\bin\java -jar C:\opt\googleClousureCompiler\compiler.jar --js=%1.js --js_output_file=%1_min.js
ren %1.js %1.js.old
ren %1_min.js %1.js7

Y estando todo bien configurado en el PATH se debiese obtener un resultado optimo. Esta linea de comando, aparte de correr el script central, además corre el re nombramiento de archivos de forma que ademas queda todo respaldado con la opcion de vuelta atras.

Comprimir CSS o JS con YUI compressor

martes, octubre 2nd, 2012

YUI Compressor es una herramienta que se utiliza para minimizar los archivos CSS o javascript. Esto porque cuando se escriben estos archivos se utilizan muchos caracteres para que estos archivos visualmente para el desarrollador se vean bien, pero adicionandelos un montos de bytes que no cumplen n inguna función más que la de ocupar espacio.

Para esto (minimizar el tamaño de estos archivos sin restarle la funcionalidad), existen un para de herramientas, la que nos convoca es YUI Compressor, escrita en Java, minimiza cualquiera de estas extensiones (CSS o JS).

Puedes descargarlo aqui o utilizarla Online a través de esta página.

Así por ejemplo, comprimes algo asi

Y lo dejas asi, sin perder la consistencia del CSS

Ejemplo de datepicker de jQuery UI

sábado, noviembre 19th, 2011

En el desarrollo de sistemas uno de los costos más importantes es trabajar con las fechas, en todo sentido, desde la interfaz hasta la base de datos. En el caso de la interfaz uno debe necesariamente proveerle al usuario un ordenamiento adecuado para que él no se equivoque en el ingreso de datos.

Es aquí donde una herramienta útil es jQuery UI, que dentro de uno de sus componentes tiene el datepicker, si descargas lo ejemplos encontrarás que son bastante útiles, pero en algunos casos, cuando tu quieres comenzar a hacer modificaciones es donde los problemas pasan. A mi personalmente me sucedieron dos cosas, la primera tiene que ver con los nombre, en las pantallas de los sistemas que trabajo existe siempre más de una fecha, por lo que debo crear más de una función pero ya el ejemplo original de datepicker no funciona ya que debo cambiar el nombre y asignarle otro id. De esta forma puedes tener dentro de una página la cantidad de datepicker que necesites.

Que nombre debes cambiar, esta imagen tiene realtado del nombre que debes cambiar:

ejemplo de datepicker

datepicker

Puedes descargar el codigo del ejemplo blog_jQuery_datepicker_20111119

Lo segundo que es útil mencionar es el CSS, cada una de las fuentes y medidas estan hechas con la unidad «em» dentro del CSS de jQuery esto significa que las medidas estan tomadas desde la última medida establecida de tamaño de la fuente, por lo que si tienes un tamaño 12, las fuentes utilizadas en el calendario se veran sólo un poco más pequeñas.