Tipografía y Syntax Highlighting

Categoría: Desarrollo Web, Tips | August 24, 2008

Al momento de programar o escribir stylesheets o etc (ustedes entienden), la comodidad que debemos tener los desarrolladores web en nuestro ambiente de trabajo es MUY IMPORTANTE. Mencionaré 2 puntos para empezar referentes al editor de texto.

Tipografía


El tipo de letra de un editor de texto (tal vez parte de un IDE) es muy relevante y hace una gran diferencia a la hora de programar, así como la vida y la muerte, ya que un error como “l=” en lugar de “!=” puede causar muchas horas de debugging sin razón (creo que estoy siendo algo exagerado acá).

Por ejemplo un código que tenga de tipografía a “Comic Sans MS” no es muy legible, ie.

img

El código debe ser legible y la tipografía no debe crear dudas, un ejemplo es colocar los caracteres ‘“1ilL!|/\0O y ver que no sean iguales ni parecidos.

Yo recomiendo el uso de la tipografía Lucida Console que está por defecto en los sistemas operativos Windows y para Linux esta fuente viene al instalar Java.

img
Existen varios sitios donde se discute que tipo de letra se debe utilizar para un editor de texto o para el IDE en general, por ejemplo en este post del blog the hamstu hace una muy buena discusión acerca del tipo de letra a utilizar cuando se programa.

Syntax HighLighthing

El Syntax HighLighting es una característica de algunos editores de texto que muestra el código fuente en diferentes colores de acuerdo a su significado en el lenguaje de programación que está siendo usado.

Es muy útil tener esta característica en el editor que se está utilizando para la creación de código ya que nos puede advertir de errores clásicos como los de comillas simples y dobles ie.

imGeneralmente los IDEs basados en Eclipse(Aptana, Zend Studio, el mismo Eclipse, etc.) tienen esta característica en los lenguajes de programación y markup language o cualquier otra cosa que soportan.

Esta característica como ya mencionamos ayuda demasiado a la legibilidad del código, y en mi opinión indispensable.

Para mostrarlos en páginas web existen 2 maneras ya que al colocar código dentro de no colorea nada:

  • Cliente. Con cliente me refiero al coloreo del código en el browser hecho por Javascript. En el lado de cliente tenemos a “Syntax HighLighter” que es una solución liviana para el highlighting de código (El mismo utilizado en este blog).
  • Servidor. En el lado del servidor se puede hacer que el código fuente sea tratado y coloreado de acuerdo a la sintaxis del lenguaje.

Para ambos casos tenemos ciertas alternativas discutidas acá.

Deja un comentario