ENTRAR
UNIRSE AL CLUB

¿Qué es JSFiddle y cómo funciona? Aprende a usar JSFiddle paso a paso

Marçal Alarcón

-

4 noviembre 2021

-

5/5

Si eres un desarrollador de software quiero que conozcas jsFiddl, una herramienta que nos va a permitir probar código en los lenguajes de  JavaScript, HTML y CSS.

Quédate, y aprende a usar esta herramienta paso a paso.

1. ¿Qué es JSFiddle?

JsFiddle es un fantástica herramienta web donde poner a prueba nuestro código HTML, CSS y Javascript de forma fácil y cómoda sin necesidad de instala nada. 

TUTORIAL RECOMENDADO PARA Windows

Crear y configurar Servidor Virtual de Apache en Windows Server 2019

2. Entendiendo la interfaz de JsFiddle

La interfaz de JsFIddle es la siguiente:

A continuación, te voy a enseñar cada una de sus partes.

Menú superior

El menú superior tiene los siguientes botones:

– Run: Ejecuta el código que hemos programado y lo muestra en la sección “Result”.

– Save: Con este botón guardamos el proyecto, creándose un link personalizado para nuestro proyecto.

– Collaborate: Con esta opción, podemos compartir el código y añadir usuarios para editar el código conjuntamente.

Ajustes

En la parte de arriba de la derecha, nos encontramos con la sección de ajustes.

Si pulsamos en la sección de “Setings”, se nos abre este desplegable con miles de opciones de configuración diferentes.

Los aspectos más importantes son:

  • Editar el layout (con este ajuste podemos cambiar la distribución de los diferentes contenedores de código)
  • General (aspectos generales del documento).

Contenedores de código

En la parte central, nos encontramos con cuatro diferentes contenedores de código. Cada uno de ellos sirve para escribir un lenguaje de programación diferente (Rojo HTML, Verde CSS, Morado JavaScript y Azul el resultado de nuestro código).

Ejemplo

A continuación, voy a crear un pequeño HMTL con su CSS y podemos ver que lo muestra correctamente en el “Result” cuando pulsamos en el botón de “Run”.

TUTORIAL RECOMENDADO PARA Windows

Crear directorios y archivos en la carpeta pública de Apache Windows Server 2019

Espero que hayas aprendido a usar JsFiddle… Para cualquier  duda puedes escribirme en el formulario de contacto pulsando aquí.

Un saludo Mab55

Share on facebook
Facebook
Share on twitter
Twitter
Share on pinterest
Pinterest
Share on whatsapp
WhatsApp
Share on telegram
Telegram
Share on reddit
Reddit
Share on email
Email

Marçal Alarcón Brugal

Soy Técnico en Desarrollo de Aplicaciones Web con más de 5 años de experiencia en el sector informático. En los últimos años, me he centrado en enseñar mis conocimientos de informática a través de cursos, tutoriales… 

# ¿Te ha sido útil? Escribe una reseña

{{ reviewsTotal }} Review
{{ reviewsTotal }} Reviews
{{ options.labels.newReviewButton }}
{{ userData.canReview.message }}

📕 Tutoriales

📕 Tutoriales

🔸 Linux

🔹 Mac

🔸 Windows

También te puede interesar

Descargar e instalar OpenShift en Windows 11

0.0/5

Ficheros de configuración importantes de Apache Windows Server 2019

0.0/5
Descubre cuales son los ficheros de configuración más conocidos de Apache Haus 2.4.51 en Windows Server 2019. Estos ficheros…

Instalar y configurar Aplicación películas en OpenShift

0.0/5

Instalar y configurar WordPress 5.8.1 en Windows 11

0.0/5
Instala y configura la versión 5.8.1 de WordPress el CMS ideal para empezar…

TomCat 9 en Windows 10

0.0/5

Activar y desactivar módulos de Apache Windows Server 2019

5/5
Aprende a activar y desactivar módulos de Apache en Windows Server 2019. Aprende todo sobre los módulos…
Este contenido está restringido, SOLO está disponible para los miembros del club de Flota Digital.