punypng: Compresor de PNGs

Esta es una herramienta realmente muy eficiente en cuanto a la compresión de archivos PNG.

Anteriormente usaba smush.it, pero he probado recientemente punypng y la verdad es que los resultados son superiores.

Encuentra y destaca elementos HTML de tu documento con FireFinder

Todos los que trabajamos con algún framework de Javascript o bien aquellos que utilizamos CSS muchas veces hemos necesitado visualizar como se ven los elementos que estamos seleccionando del docuemento.

Por ejemplo, que tal si quisieramos ver todos aquellos links que contengan una imagen en nuestro documento?

La forma más sencilla es utilizar FireFinder una extensión para firefox (requiere previamente instalar Firebug).

FireFinder no solo permite seleccionar elementos usando selectores CSS, sino que además soporta expresiones XPath.

Simplemente introducimos la expresión y FireFinder destacará esos elementos de la expresión en nuestro documento.

Por mayor información puedes ver el blog de Robert Nyman.

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.

Iconos para tu escritorio o páginas web

Bueno una vez más aquí varios iconos gratuitos para ser usados en tu escritorio o en tus páginas web.

La calidad es realmente buena, no se apresuren a prejuzgar (por el hecho de que sean gratuitos no significa que sean malos)

Múltiples versiones de Internet Explorer a la vez

Recientemente me he topado con la necesidad de tener varias versiones de Internet Explorer corriendo a la vez.

Sucede que no era tan sencillo lograr esto como lo es ahora gracias a Multiple IE

Este software permite de forma más que sencilla correr un instalador que nos permitirá instalar aquellas versiones de Internet Explorer que nos interesen en particular para testear. La lista comprende:

• IE 3.0
• IE 4.0
• IE 5.0
• IE 5.5
• IE 6.0

NOTA: El instalador está hecho para Windows XP.

Cómo diría el amigo "Kike" Echevarría:

"Sencillamente notable"

Aquí les dejo el enlace para descargar Multiple IE.

Saludos y que lo disfruten!

Iconos de banderas del mundo

Bueno, acá va otro link que sin dudas en algún momento alguien va a tener necesidad de usar.

Se trata de la página de la página de iconos de famfamfam en la cual hay disponible para ser utilizado en forma gratuita un zip con todas las banderas del mundo creadas como iconos

Saludos y que les sean útiles!

HTML Validator: extensión para validar (x)html

Salud gente!

Aquí les dejo una verdadera joyita, una extensión que entre otras cosas permite:

• Validar nuestro documento (x)html
• Permite validar documentos locales en nuestro equipo o bien documentos publicados en un servidor
  
• Permite establecer el validador contra el cual validar nuestro docuemento
  
  
• Permite ver los errores y brinda feedback al respecto
• Entre las maravillas que posee está la de usar como base Tidy y OpenSp, con lo cual podemos emprolijar y hasta corregir nuestro código directamente con la extensión.
• Automáticamente puede corregir errores y aquellos que no entiende o no puede corregir los comunica como avisos.

Pueden descargar html validator para firefox o ver la página de Marc Gueury

Ahora si, después de esto no hay más excusas para no tener un docuemento valido!
Que la disfruten!

JSSpec

Recientemente me topé con JSSpec... es un framework Javascript del tipo BDD(Behavior Driven Development o Desarrollo Orientado a Comportamiento) que soporta IE6/7, FF2, Safari3.

Funciona en forma similar a RSpec (un framework BDD para Ruby) pero provee mensajes de fallo más útiles. Por ejemplo, muestra diferencias entre dos strings o arrays.

Realmente interesante y algo a profundizar...que lo disfruten!

View Source Chart: Extesión de firefox para ver el código fuente de las páginas en forma mejorada

Excelente extensión para Firefox, la cual permite de forma práctica visualizar el código de una página web en forma gráfica.

No solo destaca los bloques de código indentándolos, sino que además los separa por colores y permitiendo colapsarlos.

https://addons.mozilla.org/es-ES/firefox/addon/655

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!