Descubre jsFiddle: la herramienta perfecta para probar y compartir código HTML

Cada desarrollador ha estado en la situación en la que necesitas probar rápidamente un código o un diseño y posiblemente compartirlo con otros. jsFiddle es la solución perfecta; proporciona un entorno personalizado (basado en las selecciones del usuario) para probar (o jugar con) tu código JavaScript, HTML y CSS directamente en tu navegador. Un rápido recorrido por jsFiddle te dará una mejor comprensión de lo que ofrece y por qué deberías usarlo.

Índice de Contenido

El entorno de jsFiddle
Trabajando con la interfaz de jsFiddle
Un patio de juegos en la Web

El entorno de jsFiddle

Empezar a utilizar jsFiddle es tan rápido como escribir su dirección en tu navegador. Una vez que el sitio se carga, se te presenta una página dividida en varias secciones. La parte izquierda de la página es el área de menú donde configuras el entorno de jsFiddle. La sección principal del sitio (a la derecha) se divide en cuatro áreas:

CSS: Ingresa el CSS que se aplicará al HTML utilizado en tus pruebas. Se coloca entre elementos <style> en la parte de la cabecera de la página.
HTML: Esta área te permite ingresar HTML que se utilizará en tus pruebas. Por defecto, aparecerá entre elementos <body> en la página a menos que se anule por opciones en el panel izquierdo. Funciona directamente con el CSS y JavaScript ingresados en sus respectivas áreas. También se puede ingresar JavaScript dentro de elementos <script> aquí.
JavaScript: Aquí se ingresa el código fuente de JavaScript. Aparece entre etiquetas <script type=”JavaScript”> en la parte de la cabecera de la página. Las opciones en la izquierda te permiten elegir qué bibliotecas/frameworks se utilizan, por lo que el código de esta sección no tiene que incluirlos.
Output: Los resultados de ejecutar el CSS, HTML y JavaScript ingresados en las secciones de la página.

Figura A muestra jsFiddle cargado en Internet Explorer 9 con paneles de código vacíos.
Figura A

La interfaz predeterminada del sitio jsFiddle (Haz clic en la imagen para ampliarla.)

Trabajando con la interfaz de jsFiddle

Utilizar jsFiddle es tan simple como cargar el sitio e ingresar código en las áreas correspondientes de la página. La interfaz de jsFiddle ofrece muchas características para ayudarte en tu desarrollo. En la parte superior de la página hay una línea de botones para utilizar algunas de estas características. Estos botones incluyen:

Run: Ejecuta el código ingresado en las áreas de la página y muestra los resultados en el área de salida.
Fork: Crea un nuevo ejemplo utilizando el código actual como base.
Reset: Limpia todas las áreas de la interfaz de jsFiddle.
TidyUp: Ordena tu código JavaScript indentando los bloques de código.
JSLint: Utiliza la herramienta JSLint para realizar análisis estático del código en el área de JavaScript de la página.
Share: Te permite compartir código desde la página de jsFiddle con otros usuarios. Las opciones incluyen Facebook y Twitter, y proporciona un enlace y el código para incrustarlo en un sitio web (por ejemplo, en un blog).

El panel izquierdo de la interfaz de jsFiddle te permite configurar el entorno de desarrollo. La siguiente lista muestra algunas de las características disponibles:

Ubicación de JavaScript: El primer menú desplegable define dónde se coloca y se ejecuta el código JavaScript. El valor predeterminado es onLoad, lo que significa que se ejecuta a través del evento onLoad de la página web. Otras opciones incluyen colocarlo en la cabecera o el cuerpo de la página.
Biblioteca de JavaScript: El segundo menú desplegable te permite utilizar uno de varios frameworks de JavaScript, que incluyen MooTools, jQuery, Prototype, YUI, y muchos más. Además, también es compatible con las diferentes versiones de estas herramientas, por lo que las opciones de pruebas son infinitas. Esta es una gran característica porque puedes experimentar con estas bibliotecas sin necesidad de descargar e instalar tu propio entorno.
Paneles: La interfaz de jsFiddle incluye las tres áreas de código, pero hay opciones adicionales para las áreas de CSS y JavaScript. Puedes elegir utilizar SCSS en lugar de CSS y utilizar CoffeeScript en lugar de JavaScript.
Información: Ingresa un título y una descripción que son importantes al guardar o compartir. Además, puedes especificar la etiqueta del body y el DTD utilizado.
Ejemplos: Esta selección te facilita comenzar a utilizar la herramienta para que puedas familiarizarte con sus características y cómo se puede utilizar.

Las numerosas características que ofrece la interfaz de jsFiddle la hacen relevante para casi todos los desarrolladores de aplicaciones web. Figura B muestra uno de los ejemplos - Seguimiento de Ratón con Retraso - que utiliza la biblioteca Processing.js. También se ha añadido HTML y CSS adicional.
Figura B

Cuánto dinero gana un desarrollador de aplicaciones móviles

Utilizando uno de los ejemplos disponibles en jsFiddle (Haz clic en la imagen para ampliarla.)

Un patio de juegos en la Web

El sitio jsFiddle se promociona como un patio de juegos web, y no puedo pensar en un mejor eslogan porque:

permite a los desarrolladores jugar con los tres elementos principales del desarrollo web (CSS, JavaScript y HTML);
aborda el elemento social de la Web al facilitar compartir;
parece ser el lugar perfecto para responder esas fastidiosas preguntas de desarrollo y compartir rápidamente los resultados - no es necesario crear proyectos o archivos desechables.

Esta es una aplicación alojada, por lo que el rendimiento puede degradarse durante el uso en momentos de alta demanda. Esto no me ha causado problemas, pero esperemos que haya más recursos de backend (es decir, servidores) disponibles a medida que aumenta el uso de jsFiddle. El blog de jsFiddle te permite estar al tanto de estos problemas.

Visita jsFiddle hoy mismo y verás rápidamente su poder para la creación rápida de prototipos y pruebas.

Mantén tus habilidades de ingeniería actualizadas suscribiéndote al boletín gratuito de Newsmatic para Ingenieros de Software, que se entrega cada martes.

Los 10 elementos esenciales para tu kit de presentación

En Newsmatic nos especializamos en tecnología de vanguardia, contamos con los artículos mas novedosos sobre Desarrollo, allí encontraras muchos artículos similares a Descubre jsFiddle: la herramienta perfecta para probar y compartir código HTML , tenemos lo ultimo en tecnología 2023.