5 editores de código en línea para editar y experimentar con la codificación

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

Son aplicaciones web que funcionan directamente en el navegador y nos permiten, generar código sin la necesidad de crear y guardar archivos ni tener que subirlos a un servidor, además de 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.

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.

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

Aquí tienes el enlace a las cinco herramientas: 

  • Tinkerbin. Nos permite 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.
  • CSS Desk. Nos ofrece 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.
  • 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.
  • 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.
  • 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.

Artículos relacionados