Reduciendo el tamaño de tus páginas web

Más de una vez me ha sucedido tener que optimizar un sitio hecho por terceros (e incluso uno propio).

Gracias a mootools (aunque ya conocía packer de Dean Edwards) me enteré del concepto de "minimizar" (lo cual consiste en eliminar los espacios en blanco innecesarios, así como remover los comentarios dejados por el desarrollador) un archivo de javascript. Esto por sencillo que pueda sonar es realmente muy útil, ya que efectivamente se logra reducir el tamaño en bytes de nuestros archivos.

Las mentes siniestras como la mía :) comenzaron a hilvanar toda clase de formas en las cuales "exprimir" cada bit en los archivos (html, php, js, css).

La mejor forma que vengo manejando hasta el momento es trabajar con una carpeta en la cual tenemos todos nuestros archivos "fuente" prolijamente indentados y comentados, sin escatimar en los espacios en blanco que contribuyan a la legibilidad del código.
Esta es la carpeta que contiene (digamoslo así) los archivos "legibles por humanos".
A la hora de publicar nuestros archivos en internet, nos valdremos de aplicaciones que nos permitirán remover todo aquella información que le es innecesaria al servidor.

Sin duda que suena tedioso, ¿no? :)
Bueno, acá es donde viene la magia del SVN...usamos un "hook" el cual ejecutará nuestras aplicaciones sobre nuestros archivos "exprimiéndolos" y luego los publicará en el servidor. ¿Suena mejor, no?

De esta forma contamos con nuestra versión "human friendly" y la versión publicada "server friendly".

Lo que no he mencionado aún son las dichosas aplicaciones, así que aquí van:

• JsMin
  Esta aplicación minimiza archivos javascript


• YUI Compressor
  Esta aplicación minimiza archivos javascript


• HTMLTidy
  Esta aplicación no solo optimiza el código sino que además lo ordena y corrige código inválido.


• CSSTidy
  Esta aplicación optimiza el código de la css reescribiendo aquellas cosas redundantes y borrando espacios innecesarios.


• OptiPNG
  Esta aplicación recomprime imágenes a un tamaño menor.

CSSVista, aplicación para diseñar sitios para Internet Explorer y Firefox

Otra herramienta de esas que prometen mucho.

La gente de Litmus Labs, liberó una herramienta que puede ser de gran ayuda para los diseñadores web.

Se trata de CSSVista, la cual permite trabajar en forma simultánea editando la css de nuestro sitio siendo posible hacerlo "en vivo", y viendo simultáneamente como va quedando en Internet Explorer a la vez que en Firefox.

Por si alguno se pregunta "¿Para que quiero yo esto si con la firebug me alcanza y sobra?", van aquí una lista de argumentos:

• Esta aplicación permite a diferencia de firebug visualizar el sitio en dos vistas, una para Internet Explorer y la otra para Firefox, de modo que al ir creando los estilos para tu css puedes ver "en tiempo real". Firebug solo permite esto para Firefox.
  
• Es una aplicación que corre sola, de modo que solamente debes instalarla en tu equipo, y en principio solamente está disponible para windows y en una versión bastante preliminar lo cual puede traer acarreado algún problema de visualización (no es 100% fiable).
  
• Al igual que Firebug, es completamente gratuita.
  

Para aquellos más profesionales y con mayor poder adquisitivo, la empresa comercializa Litmus
que permite de manera sencilla y rápida visualizar tu sitio en 12 navegadores populares y detectar los bugs que hubieren en la css.

Para aquellos que no tienen windows como sistema operativo, pueden usar como alternativa la IE tab que es una extensión para Internet Explorer que permite ver dentro de Firefox una instancia de Internet Explorer con nuestra página.

Vector Magic

En esta oportunidad tengo para compartir otra aplicación "web 2.0", bien como para estar a la moda :-)

Se trata de "vectormagic" la cual puede conocer a través de la página:
http://vectormagic.stanford.edu/

Se trata de una aplicación que permite sencillamente convertir una imagen de mapa de bits (como ser una fotografía) en una archivo vectorial.

Lo curioso del caso, es que los resultados son realmente mejores que los que brindan aplicaciones comerciales como Corel Trace, o Adobe Streamline.

Lo que realmente me sorprendió (gratamente por cierto), es la calidad de la interfase gráfica de usuario (GUI = graphical user interface). Ciertamente del estilo inductivo y no del paleolítico deductivo (este es uno de los errores de UX web2.0).

Que la disfruten!

Photoshop web 2.0

La llamada "web 2.0" parece ser el término de moda hoy en día en el ambiente geek.

Ciertamente creo que era obvio que la gente demandaba una experiencia de usuario similar a las de las aplicaciones de escritorio en internet, ya que últimamente cada vez más se desarrollaban aplicaciones en ambientes web.

Lo cierto es que diversos factores adicionales han contribuido a esta "fiebre" por la web, en donde todo se puede arrastrar, grabar, mostrar su progreso de descarga, etc. Ya habrá tiempo para analizar esto en otro post(no puedo evitar hacer una crítica acerca de los errores de web 2.0 UX que comete), pero por el momento quisiera compartir este link a una reciente aplicación "web 2.0":

http://www.splashup.com/

La misma viene a ser la versión online de photoshop.
Por lo visto sus creadores han aprovechado las capacidades incorporadas por flash (la aplicación está hecha con Flex) para trabajar con mapas de bits y aplicar filtros.

Claro que estamos hablando de una herramienta que "emula" al photoshop y obviamente por diversos factores aún dista mucho de la original. Sin embargo, creo que puede llegar a ser de utilidad para varios usuarios.

NOTA: UX = User eXperience = experiencia de usuario