> For the complete documentation index, see [llms.txt](https://tomas-dulanto.gitbook.io/tomas-dulanto/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://tomas-dulanto.gitbook.io/tomas-dulanto/guia-de-ias-y-herramientas/prototipando-codepen.md).
# 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í.](https://codepen.io/)
Interfaz de inicio de Codepen
***
### 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"**](/tomas-dulanto/basicos/programacion-basica.md)**?** 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".](/tomas-dulanto/basicos/programacion-basica.md)
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:
```html
Reloj Analógico
```
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:
```css
.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...
```javascript
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:
{% embed url="" %}
**¿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".](/tomas-dulanto/casos-de-uso/herramienta-de-gestion-de-proyectos.md)
***
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!**
***
