Editores de código online: 6 entornos de trabajo para editar y experimentar con HTML, CSS y JavaScript

Tanto si nos pasamos el día diseñando y desarrollando en HTML, CSS y Javascript como si estamos aprendiendo a utilizar estos lenguajes, hay un tipo de herramienta que nos vendrá muy bien conocer: los entornos de trabajo online.

Se trata de aplicaciones web que funcionan directamente en el navegador y que nos permiten, por una parte, generar código sin la necesidad de crear y guardar archivos ni tener que subirlos a un servidor, y por otra, compartir estos códigos y colaborar fácilmente con otras personas.

Aunque no sustituyen a los editores de código tradicionales (Coda, Expresso, Notepad++, TextMate, Sublime Text, Dreamweaver, etc.), estas herramientas son cada vez más indispensables porque facilitan enormemente algunas tareas. Por ejemplo:

• Probar cierta funcionalidad en las diferentes versiones de una librería de JavaScript sin tener que cargar todas las versiones ni enlazar con librerías externas
• Enseñar a alguien cómo conseguir hacer algo sin tener que enviarle los archivos
• Divertirnos probando cosas nuevas sin miedo a romper nada
• Utilizarlo como herramienta educativa en cursos y clases presenciales
• Experimentar y ver el resultado inmediatamente mientras vamos escribiendo
• Buscar errores de código de manera colaborativa
• Pedir a alguien que nos ayude con algún problema concreto que no sabemos resolver
• Escribir CSS directamente en Less o Sass

Son muy fáciles de usar. De hecho, sólo hay que visitar la web de la herramienta que más nos convenza y ponerse a escribir. No tienen publicidad ni nada que distraiga. Además, como normalmente incluyen coloreado de código y autotabulación, es fácil mantener el código organizado.

Como puntos negativos se me ocurren dos:

• No autocompletan el código mientras escribimos, con lo que es más lento que utilizar un editor tradicional
• No se guarda automáticamente una copia por si algo falla (al estilo de WordPress, por ejemplo), por lo que si trabajamos con grandes fragmentos de código puede ser algo a tener en cuenta

Básicamente no ofrecen nada que no se pudiera hacer antes, aunque sí reducen considerablemente el tiempo necesario para conseguirlo, y facilitan mucho la tarea.

Vamos a ver seis de estas herramientas: Tinkerbin, CodePen, jsFiddle, CSS Desk, JS Bin y Dabblet.

Tinkerbin

Con Tinkerbin podemos trabajar y combinar HTML, JavaScript y CSS cómodamente en pestañas. Es el editor que más opciones ofrece a nivel de preprocesamiento de código. Permite utilizar tanto HTML como HAML, Sass (con Compass), Less y CofeeScript. Cuenta incluso con bastantes atajos de teclado para, por ejemplo, cambiar de pestaña y de lenguaje, ver el código, etc.

Enlace: http://tinkerbin.com/

CodePen

CodePen, además de un editor HTML, CSS y JS, es un almacén de código para aprender, inspirar y compartir, ideal para montar demostraciones, pruebas y para mostrar las posibilidades del desarrollo frontend. Incluye multitud de ejemplos (“pens”) con posibilidad de edición. Incluye una versión “CodePen Pro” que cuenta con actualización en tiempo real, subida de archivos, posibilidad de edición en privado, modo de colaboración y una vista especial pensada para trabajar en entornos relacionados con la enseñanza.

Enlace: http://codepen.io/

CSSDesk

CSS Desk se centra en ofrecernos un entorno online para HTML y CSS (no incluye Javascript ni librerías externas). Tiene una interfaz muy cuidada con la que podemos incluso cambiar el fondo de la herramienta y añadir retículas en columnas. CSS Desk es ideal para probar código CSS y ver el resultado en tiempo real.

Enlace: http://cssdesk.com/

JSFiddle

jsFiddle es el editor más completo en varios niveles: la documentación que ofrece y la cantidad de librerías externas disponibles (Mootols, jQuery, Prototype, YUI, Dojo, Raphael…). Además de guardar y ofrecernos un enlace corto, jsFiddle incluye formateo y revisión del código con JSLint y TidyUp, cambio de DTD (xHTML, HTML4, HTML5…), inclusión de recursos externos (hojas de estilo guardadas en nuestro servidor, por ejemplo) e incluso algunos ejemplos prácticos para ver la herramienta en acción.

Enlace: http://jsfiddle.net/

JSBin

Creado por Remy Sharp y de código libre, JS Bin permite incrustar librerías jQuery (en diferentes versiones) e incluso jQuery UI o jQuery Mobile. JS Bin es una aplicación web diseñada para ayudarnos a editar JavaScript y CSS probando fragmentos de código en un contexto determinado y revisarlo después de manera colaborativa. Incluye amplia documentación a través de tutoriales en vídeo creados por el autor.

Enlace: http://jsbin.com/

Dabblet

Dabblet es un nuevo editor online interactivo creado por Lea Verou y enfocado a la escritura de CSS y HTML. Muy útil para hacer pruebas y experimentos en CSS3, por ejemplo. Cuenta con actualización automática del código y muy buenos indicadores visuales para las reglas que estamos aplicando: color, ancho, degradados…(recomiendo ver el vídeo del enlace anterior). Además, con Dabblet es posible guardar las muestras directamente en una cuenta de GitHub.

Enlace: http://dabblet.com/