texto:   A-   A+
eliax

JSFiddle, potente herramienta para Javascript y frameworks como JQuery y Prototype.js
eliax id: 8312 josé elías en dic 1, 2010 a las 01:57 PM (13:57 horas)
Si programas páginas web es muy posible que tengas que tocar a Javascript, y si trabajas con Javascript es muy posible que también utilices uno o más de sus populares frameworks (librerías de marcos de trabajo) como JQuery, Prototype.js, Processing.js, etc, así como quizás te mojes las manos un poco con técnicas de AJAX y HTML5.

Si caes en esa definición de programador, esta herramienta de hoy te caerá no solo como anillo al dedo, sino que será una de tus favoritas...

La herramienta se llama JSFiddle y es una herramienta 100% web, por lo que la utilizas dentro de tu navegador web sin instalar nada con solo visitar la página oficial de la herramienta, la cual a propósito ni siquiera requiere que te registres y es totalmente gratis. Simplemente visitas la página y empiezas a trabajar.

Lo que JSFiddle hace es extremadamente simple, pero altamente poderoso, en particular para los que programan estos frameworks con regularidad: JSFiddle te ofrece un ambiente de varias ventanas dentro de tu navegador web, en donde en una de ellas puedes escribir HTML, y en otra sentencias de Javascript (como por ejemplo, selectores de JQuery), y después en otra ventana ves el resultado.

Esto es algo que todos hacemos, pero con páginas de pruebas: Creamos 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 super-excelentísima herramienta para aprender no solo Javascript, sino que JQuery (mi librería favorita) y otros frameworks, pues en esencia lo que JSFiddle hace es proveerte de el equivalente a un linea de comando directa al corazón de Javascript.

Si quieren ver un ejemplo, hagan clic en este enlace que les presentará un trozo de código de HTML arriba, con un selector de JQuery abajo, y después hagan clic en el botón de arriba que dice "Run" y verán el resultado a la derecha (y en el panel de la izquierda notarán que pueden elegir entre otros frameworks y sus varias opciones.

Espero esto les sea tan útil como a mi :)

Página oficial de JSFiddle

Actualización: Otra excelente herramienta y que funciona muy similar a esta, pero para crear código CSS, es CSSDesk (gracias al lector angelbotto por recomendarla en los comentarios)

autor: josé elías

Comentarios

  • Gracias José! me gusta mucho jquery y lo uso para crear scripts en greasemonkey lo mas de potentes y muy livianos. Espero esta herramienta me sirva cuando estoy varado :P

  • Madre mia k inventazo, se acabo el volverse loko cambiando entre las ventanas css, funciones, pagina de pruebas...

    Felicidades por la pagina tio, por cierto no conoceras algun ide especifico para jquery??

  • es una magnifica herramienta al igual que http://www.cssdesk.com/ ;)

    • Gracias angelbotto, esta es otra excelente herramienta y acabo de actualizar la noticia (al final) para el conocimiento de todos :)

  • Se ve excelente !!! la probaré en mi empresa.

  • Genial.... Gracias por el dato

  • Offtopic: Pues yo también espero que Eliax haga un artículo con lo referente a Wikileaks, no sé bien de qué vaya la cosa, seguro Eliax nos lo cuenta con lujo de detalle.

  • no esta mal...aunque se hecha de menos que el editor al menos cierre los tags, como cualquier editor de texto de la actualidad hace...esta bien para toquetear y arreglar algunos codigos de manera casual...la tendre en cuenta...por cierto...la recomendacion del cssdsk tambien esta bastant bien...

  • muy util, gracias!

  • José, la palabra registración suena feísimo, es mejor "Registro" :)

  • Excelentes herramientas! Simplicidad y potencia combinadas en un solo entorno. :-)

  • Qué ventajas tiene este framework en comparación con otras librerías de JS mas completas, versátiles y robustas como ExtJS?

    http://www.sencha.com/products/js/

    ExtJS no solo maneja ventanas, sino se puede crear tablas dinámicas, hojas de calculo, graficas, pestañas... todo con tecnología AJAX y SOA, permitiendo la creación de un sistema operativo incrustado en el navegador.

    • Estás confundido, JSFiddle no es un framework, sino que una herramienta para experimentar con código dinámico dentro del mismo navegador web.

      Nota demás que ExtJS es un producto comercial que no puedes utilizar gratuitamente de forma legal (hasta donde tengo entendido). He aquí los precios: http://www.sencha.com/store/js/

      Y a propósito, vale el precio, pues es uno de los mejores frameworks comerciales que he visto.

Añadir Comentario

tu nombre
tu email
(opcional)
web personal
(opcional)
en respuesta a...
comentario de caracteres máximo
1 + 3 = requerido (control anti-SPAM)
 

"Gracias Elias por hacernos grandes los pequeños momentos que invertimos en leerte, por todos estos años que has ayudado y enseñado a tantas personas, la labor de este blog tiene mucho mérito... espero que no lo abandones al 100% y que podamos leerte en alguna ocasión.

un abrazo muy fuerte y gracias de corazón.
"

por "Rain" en feb 3, 2014


en camino a la singularidad...

©2005-2014 josé c. elías
todos los derechos reservados
como compartir los artículos de eliax