JSFiddle un editor para jugar con la codificación

La gran herramienta JSFiddle, es un entorno de desarrollo en línea, de máxima utilidad para los desarrolladores de tecnologías web. Es algo así como el patio de juegos para los desarrolladores y diseñadores, donde ponen a prueba y experimentar la codificación  HTML, CSS y Javascript. Como dato curioso, la palabra fiddle se traduciría como "trapicheo", o sea que sirve para trapichear con la codificación.

Es una herramienta web, que se utiliza dentro de tu navegador, sin necesidad de instalar nada, solo tienes que visitar la página oficial de la herramienta, la cual a propósito ni siquiera requiere que te registres y por supuesto es totalmente gratuita. Simplemente visitas la página y empiezas a trabajar en ella, sin más vueltas.

Lo que JSFiddle hace es extremadamente sencillo, pero altamente poderoso, en particular para los que programan estos frameworks con regularidad. Se trata de un editor para programar fácilmente en JavaScript usando librerías muy potentes de este lenguaje: jQuery, Mootools, Prototype, ExtJS, etc. JSFiddle te ofrece un ambiente de varias ventanas dentro de tu navegador web.

Este entorno se divide en cuatro secciones: un editor de HTML, CSS, JavaScript, y una sección que muestra el resultado final de todo ese código.

JSFiddle, editor en línea

El tabajo habitual de los programadores es crear una nueva página, la inicializamos con código, incluímos las librerías que vamos a utilizar, después escribimos el código, y después accedemos a los resultados por medio de nuestro propio servidor web o un servidor remoto (en cuyo caso, hay que también que subir el código primero antes de probarlo). Con JSFiddle, todo eso desaparece y puedes ir directo al grano: eliges la versión de la librería que deseas, copias un pedazo de HTML (o utilizas el que te ofrecen por defecto), lo modificas, y escribes tu Javascript para ver si hace lo que esperas que hagas, y listo. Varios minutos se reducen a segundos.

De paso, esta es una excelente herramienta para aprender no solo Javascript, sino que JQuery y otros frameworks, pues en esencia lo que  hace es proveerte de el equivalente a un linea de comando directa al corazón de Javascript.

Si quieren ver un pequeño ejemplo, pulsa en este enlace que te presentará un trozo de código de HTML, el estilo CSS de un botón Web con efecto animación en 3D diseñado enteramente con CSS3, y en la zona "Result" puedes ver su efecto inmediato al pulsar el botón.

Tenemos también la posibilidad de guardar y compartir el código con una simple URL. Por supuesto, también ofrece directamente código para incrustarlo en cualquier sitio.

Espero que esto te sea tan útil como a mi.

Otras herramienta similares sonLiveweave, Tinkerbin, codepad<, Google Code Playground, ideone, PractiCode, jsdo.it, cssdesk y JS Bin.

Artículos relacionados