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

-

0.0/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

Configurar error 404 Apache 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

Ficheros de configuración importantes 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

Instalar Apache Haus 2.4.49 en Windows Server 2019

0.0/5
Descarga y instala Apache Haus 2.4.49 en Windows Server 2019. Empieza a usar el servidor de Apache para subir tus…

Comprobaciones de Apache, PHP y MySQL en WAMP Server Windows 11

0.0/5

Configurar error 404 Apache Windows Server 2019

0.0/5
Configura la redirección 404 en Apache de Windows Server 2019. Si quieres aprender…

Instalar Sublime Text en Windows 11

0.0/5
Descargar e instala Sublime Text, el mejor editor de código para el desarrollo web. Este editor nos permite de una forma …

Crear y configurar Servidor Virtual de Apache en Windows Server 2019

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…
Este contenido está restringido, SOLO está disponible para los miembros del club de Flota Digital.