Prototipando: Visual Studio

PreviousPrototipando: Codepen NextPrototipando: Google Sites

Last updated 2 months ago

Prototipando: Visual Studio

Bienvenido al tercer capítulo de este módulo, donde trataré de guiarte en el uso de "Visual Studio Code o VS Code". Esta herramienta nos ayudará a crear nuestros prototipos de manera local. 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...

Visual Studio Code (VS Code) es un editor de código fuente gratuito y de código abierto desarrollado por Microsoft. Se ha convertido en una herramienta indispensable para muchos desarrolladores debido a su flexibilidad, extensibilidad y facilidad de uso.

Nosotros aquí no lo usaremos para programar a gran escala ya que no somos programadores. Sin embargo, es una herramienta que nos viene muy bien si queremos trabajar con prototipos más complejos y probarlos desde nuestra PC.

Puedes descargarlo gratuitamente desde aquí.

Empecemos...

...al abrirlo nos toparemos con una interfaz como cualquier otro software. Lo que a nosotros nos va a interesar es la pestaña de "File", ya que desde ahí podremos crear un nuevo proyecto dando clic en "New Text File" o guardar nuestro proyecto dando clic en "Save As..." si es la primera vez o en "Save" cada vez que modifiques algo en tu archivo.

Al crear un nuevo "Text File" nos aparecerá la siguiente pantalla sobre la que podremos clicar en tres diferentes opciones:

"Select a language" que nos permitirá escoger el lenguaje en el que queremos trabajar. Se nos abrirá una ventana y podremos escoger o tipear con el que vayamos a trabajar.

"Fill with template" que nos dejará escoger entre múltiples plantillas para no empezar desde cero a programar.

Y "Open a different editor", que nos permitirá elegir otro editor de código para programar.

Sin embargo, nosotros no haremos uso, por ahora, de ninguna de estas opciones ya que cuando generamos código con IA, esta nos da ya todo estructurado listo para copiar y pegar. Por lo que, nosotros nos vamos a concentrar en el tipo de lenguaje con el que estaremos trabajando.

Aquí tengo pegado un código HTML y le daré clic a "Save As..." Verás que automáticamente el VS Code reconoció que es un HTML. Así que solo tendremos que poner un nombre y guardarlo.

Ahora...

... al igual que como hicimos en el capítulo de "Prototipando: Codepen", trabajaremos en base al mismo ejemplo del reloj digital. Como ya tenemos los códigos generados anteriormente, solo los pegaré aquí para que se te haga más fácil acceder a ellos.

<!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 "copiar y pegar" el código en la página que creamos en el VS Code y nos debería quedar de la siguiente manera:

A continuación, lo guardaremos con el nombre "index", y veremos cómo aparece en nuestro escritorio:

Puedes ponerle cualquier nombre, pero para efectos prácticos "index" es el nombre por defecto que se le pone al HTML que se usará como página principal.

Si le damos doble click al archivo "index" este se abrirá en nuestro navegador predeterminado. En este caso, al abrirlo, veremos que...

...no hay nada. ¿Por qué sucedió? Recuerda que es porque el lenguaje "HTML" es solo la estructura de lo que queremos consturir, por lo que, nos faltaría el código CSS para la parte visual y el código JS para la parte dinámica y funcional. ¡Vamos a agregarlo!

Crearemos un nuevo archivo en el VS code y pegaremos el siguiente código:

.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%);
}

Al guardarlo lo llamaremos "Style.css" y lo guardaremos en el mismo lugar que pusimos el index.html. Como en mi caso lo hice en el escritorio, a mí me quedaría de la siguiente manera:

Los archivos CSS siempre llevarán el nombre "style.css".

Ahora, si abrimos el index.html en nuestro navegador nos daremos cuenta que ya aparece nuestro reloj, pero no funciona y eso pasa porque...

...¡Exacto! Nos hace falta el JS para la parte dinámica y funcional. Nuevamente, copiaremos y pegaremos el código JS en un nuevo archivo que crearemos en el VS Code:

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);

Al guardarlo lo llamaremos "Script.js" y lo guardaremos en el mismo lugar que pusimos el index.html y el style.css. Como en mi caso lo hice en el escritorio, a mí me quedaría de la siguiente manera:

Los archivos JavaScript siempre llevarán el nombre "script.js".

Ahora sí, al abrir tu archivo index.html, deberías de ver tu reloj funcionando.

Ahora, antes de concluir con este capítulo, me gustaría comentarte algunas de las razones por las que uso "VS Code" y que creo deberías tener en consideración:

Escalabilidad y mantenibilidad: Al dividir el código en archivos más pequeños y específicos, se vuelve más fácil de entender, modificar y mantener a medida que el proyecto crece.
Reutilización de código: Puedes reutilizar componentes CSS y funciones JavaScript en diferentes partes del proyecto o incluso en otros proyectos.
Colaboración: Es más fácil para varios desarrolladores trabajar en el mismo proyecto cuando el código está dividido en archivos independientes.
Organización: La separación del código HTML, CSS y JavaScript en archivos diferentes proporciona una estructura más organizada y clara.
Rendimiento en proyectos grandes: Cargar varios archivos pequeños en paralelo puede ser más rápido que cargar un único archivo grande.
Cache del navegador: El navegador puede almacenar en caché los archivos CSS y JavaScript por separado, lo que reduce la cantidad de datos que se deben descargar en visitas posteriores.
Especialización: Permite que diferentes desarrolladores se especialicen en un área específica (HTML, CSS o JavaScript).

Yo sé que parece tedioso, pero si quieres crear prototipos más robustos, con más funcionalidades, con muchas características, lo mejor será que te inclines por esta vía ya que te permitirá escalar tus ideas. Por ahora, eso es todo...

¡Nos vemos pronto!

PreviousPrototipando: Codepen NextPrototipando: Google Sites

Last updated 2 months ago