Aplicaciones web para desarrolladores

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

Tinkerbin: editor de código online

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: editor HTML, CSS y JS online

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

CSSDesk: editor de css online

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: editor Javascript, HTML y CSS

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

JSBin: editor online de código libre

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: editor CSS y HTML, por Lea Verou

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/

Comentarios

  1. Samuil

    Son buenas hierramientas, pero el Tinkerbin es genial por ser gratuito,- la desventaja es que es online. Yo uso Dreamwever, al que no se le puede negar la medalla de oro, pero costoso, como todos los productos de Adobe.
    Ahora tengo un Mac al cual no tengo el Dreamweaver y la alternativa que encontré es Komodo. La inconveniencia – no muestra la relacion entere las páginas HTML, sus CSS y los de Javascript para editarlos rápido, pero un editor bueno de verdad y sobre todo Opensource

  2. Daniel

    En realidad, ninguna de las herramientas de las que se habla en este artículo están pensadas para sustituir a un programa de edición y desarrollo web tradicional. Son solo pequeños editores online para hacer pruebas y compartir muestras de código.

    Personalmente para desarrollar webs en Mac utilizo Coda: http://panic.com/coda/

  3. Alfred

    Hola Daniel. Estoy rediseñando y maquetando el blog y he venido a parar -después de muchas vueltas- varias veces al tuyo vía google en algunas dudas que he tenido… Y la verdad, me has resuelto bastantes =)

    Gracias, salut!

    PD: El complemento Xinha here para Firefox, muy útil también (por ejemplo, tengo un cms con editor “a palo seco” de html, y edito con Xhina los posts). Probando también el Brackets.

    Una duda… Un editor para subir a tu propio servidor, y editar (y guardar) online via navegador el html de cualquier página?

Y tú qué opinas?

Las URLs se convertirán en enlaces automáticamente. Tu dirección de email no se publicará ni se utilizará para enviar ningún tipo de información. Los mensajes que no aporten nada al tema que se trata en esta entrada se borrarán. Las imágenes que aparecen al lado de cada autor utilizan el servicio de Gravatar. Recuerda que puedes usar etiquetas HTML como <a href>, <code>, <em> o <strong> en los comentarios.

(necesario)

(opcional)