Prototipando: Codepen

PreviousGoogle AI Studio NextPrototipando: Visual Studio

Last updated 2 months ago

Prototipando: Codepen

Bienvenido al segundo capítulo de este módulo, donde trataré de guiarte en el uso de "Codepen". Esta herramienta nos ayudará a crear nuestros prototipos. Ya sabes, seré lo más breve posible cuando se trate de conceptos, por lo que, si deseas profundizar en alguno siempre puedes visitar mi blog donde tiendo a explayarme más en el análisis de estos. De manera sencilla...

CodePen es una plataforma online para probar y mostrar código HTML, CSS y JavaScript. Aquí se puede experimentar, crear pequeños proyectos llamados "pens" y compartirlos con otros. Es muy útil para aprender, hacer prototipos rápidos y mostrar tu trabajo.

Puedes optar por crear una cuenta directamente con tu cuenta de Google o creando una manualmente dando clic aquí.

Empecemos...

...lo primero que veremos es un menú con varias opciones. Yo me concentraré en explicarte las dos primeras: "Pen" y "Collection". Pero te sugiero que explores por tu cuenta qué hace cada una.

Empecemos dando clic en "Pen", el cual nos abrirá la siguiente interfaz:

A lado izquierdo encontraremos un rótulo que dice "Untitled" y un icono de lápiz, al igual que otras herramientas, al hacer clic podremos cambiar el nombre al que más nos convenga.

Debajo, encontraremos un lienzo en blanco. En él aparecerá traducido el código que ingresemos en las cajas que están al lado derecho.

¿Recuerdas los tres lenguajes que trabajamos en la guía de "programación básica"? Bueno, aquí tendremos un cajón para cada lenguaje: HTML, CSS y JS.

Arriba de los cajones tienes algunas opciones como "Save", que nos servirá para guardar el "pen" que estemos creando en nuestras colecciones. "Settings", donde podremos hacer algunas configuraciones sobre el uso de los cajones (aunque yo no lo he usado porque no soy programador). También encontraremos un "icono de cubos", este nos permite cambiar el tipo de vista del entorno. Y poco más...

Ahora...

...como soy fiel creyente que la práctica supera a la teoría, he preparado un ejemplo que se replicará cuando veamos las diferentes maneras que tenemos para "prototipar".

Haremos un reloj digital usando HTML, CSS y JS. Si no te has familiarizado con estos lenguajes te recomiendo que vayas a la guía de "programación básica".

Vamos a pedirle a la IA de Google que nos ayude creando un "reloj digital" y que para ello use los tres lenguajes: HTML, CSS y JS. Y así obtenemos los siguientes códigos:

<!DOCTYPE html>
<html>
<head>
  <title>Reloj Analógico</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="clock">
    <div class="hand hour" id="hour"></div>
    <div class="hand minute" id="minute"></div>
    <div class="hand second" id="second"></div>
    <div class="center-dot"></div>
  </div>
  <script src="script.js"></script>
</body>
</html>

El primer código que nos ha generado es un HTML. Vamos a ingresarlo en la caja que dice "HTML" y procederemos a ver el resultado:

Como verás, el código se ingresó, pero no ha aparecido nada, ¿por qué?. Bueno, si recuerdas, habíamos dicho que el lenguaje "HTML" es solo la estructura de lo que queremos construir, por lo que, nos faltaría la parte visual y la parte funcional. Entonces, ¿qué hace falta?...

...¡Exacto! Nos hace falta el CSS para la parte visual y el JS para la parte dinámica y funcional. Por lo que procederemos a copiar el código CSS que nos ha generado:

.clock {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: #f0f0f0;
  position: relative;
  border: 5px solid #333;
}

.hand {
  position: absolute;
  bottom: 50%;
  left: 50%;
  transform-origin: 50% 100%;
  background-color: #333;
  border-radius: 5px;
}

.hour {
  width: 6px;
  height: 60px;
  margin-left: -3px;
}

.minute {
  width: 4px;
  height: 80px;
  margin-left: -2px;
}

.second {
  width: 2px;
  height: 90px;
  margin-left: -1px;
  background-color: red;
}

.center-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #333;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Ahora, vamos a ingresarlo en la caja que dice "CSS" y veremos qué sucede en nuestro lienzo en blanco:

Como verás, el código se ingresó y ya apareció nuestro reloj. Sin embargo, si lo estás haciendo en tu propio "Codepen" (que espero que lo estés haciendo), verás que no se mueve. Esto pasa poque habíamos dicho que el JS nos aporta la parte dinámica y funcional. Copiaremos el código JS que nos generó la IA...

const hourHand = document.getElementById("hour");
const minuteHand = document.getElementById("minute");
const secondHand = document.getElementById("second");

function updateClock() {
  const now = new Date();
  const hours = now.getHours() % 12;
  const minutes = now.getMinutes();
  const seconds = now.getSeconds();

  const hourDeg = (hours * 30) + (0.5 * minutes); // 360/12 = 30 grados por hora + 0.5 grados por minuto
  const minuteDeg = (minutes * 6) + (0.1 * seconds); // 360/60 = 6 grados por minuto + 0.1 grados por segundo
  const secondDeg = seconds * 6; // 360/60 = 6 grados por segundo

  hourHand.style.transform = `rotate(${hourDeg}deg)`;
  minuteHand.style.transform = `rotate(${minuteDeg}deg)`;
  secondHand.style.transform = `rotate(${secondDeg}deg)`;
}

setInterval(updateClock, 1000);

Lo ingresaremos en nuestro cajón que dice "JS" y debería quedarnos algo como la imagen de abajo:

Ahora usaré un "Codepen" para mostrarte que está 100% funcional. Recuerda que puedes darle clic donde dice "Run Pen" y esperar que cargue para ver el resultado:

¿Qué te pareció? ¿Fácil? Bueno, así es como esta herramienta nos ayuda a prototipar nuestras ideas. Lo bueno es que, como te habrás dado cuenta, nos ayuda a incrustrar nuestros prototipos en cualquier sitio o aplicación web que permita incrustar código, como lo he hecho yo en todas las guías.

Existen varias maneras de compartir tu "Pen", pero yo mostraré dos. La primera es dando clic en el botón "Embed" que está debajo de todos los cajones:

Esta opción abrirá una ventana, como la mostrada debajo, en la que podremos elegir cómo incrustrar el código según el tipo de página o aplicación, además de dejarnos elegir si queremos mostrar solo los código, solo el resultado o ambos. Si te parece complicado lo aprenderás mejor cuando revises los "casos de uso".

La siguiente forma de compartir el "Pen", es a través del link que está arriba, en la barra de tu web. Este link te aparecerá automáticamente después de que hayas dado "Save".

Ahora, me gustaría comentarte algunas de las razones por las que uso "Codepen" y que creo deberías tener en consideración:

Facilidad de uso: CodePen es muy fácil de usar, incluso para principiantes. La interfaz es intuitiva y puedes empezar a codificar en segundos.
Prototipado rápido: Es ideal para crear prototipos rápidos de ideas o experimentar con nuevas tecnologías sin tener que configurar un entorno de desarrollo local.
Colaboración: Puedes colaborar con otros desarrolladores en tiempo real, lo que facilita el trabajo en equipo y la enseñanza.
Comunidad: CodePen tiene una gran comunidad activa de desarrolladores que comparten sus creaciones, ofrecen feedback y ayudan a resolver problemas.
Inspiración: Puedes explorar miles de "Pens" (proyectos) creados por otros usuarios, lo que te puede inspirar para tus propios proyectos.
Aprendizaje: Es una excelente herramienta para aprender HTML, CSS y JavaScript, ya que puedes ver cómo otros desarrolladores utilizan estas tecnologías y experimentar con el código.
Integración: Puedes incrustar tus "Pens" en otras páginas web o blogs fácilmente.
Gratuito: CodePen ofrece un plan gratuito que es suficiente para la mayoría de los usuarios y que te permite crear "Pens" ilimitados.

Y esto sería todo. Espera...

Al inicio te dije que te iba a explicar las dos primera opciones y solo te he explicado una. Así que hablemos de la segunda opción: "Collection"

Si estás en un proyecto puedes ingresar a tu "Collection" dando clic en el icono que se encuentra al lado del nombre de tu "Pen".

O si ingresas por la página principal dando clic donde dice "Collection". Ambas te llevarán a la siguiente pantalla:

Aquí podrás encontrar todos los "Pens" que hayas creado, ordenarlos según creas conveniente, filtrarlos, eliminarlos, etc. Me gusta "Codepen" por la facilidad de uso y la inmediatez que me ofrece al mostrarme el resultado. Ahora sí, hemos completado este capítulo, por ahora.

¡Nos vemos pronto!

PreviousGoogle AI Studio NextPrototipando: Visual Studio

Last updated 2 months ago