Programación Básica

Last updated 2 months ago

Programación Básica

Bienvenido al cuarto capítulo de este módulo, donde trataré de explicarte de manera sencilla los conceptos que yo manejo, de manera muy básica, sobre programación, y que me ayudan a trabajar en el diseño de herramientas para mi gestión personal y el prototipado de ideas de negocio que requieren de alguna aplicación web o similar.

Este apartado está diseñado específicamente para personas sin conocimientos de programación que, aunque no aspiren a ser programadores, les interesa o necesitan comprender el comportamiento básico de la programación para aprovechar la IA Generativa en este campo.

¡Espera! Debo advertirte que no soy programador y mi conocimiento al respecto es bastante básico, pero bajo mi experiencia, este, en conjunto con la IA, me ha ayudado a desarrollar diversos prototipos de herramientas e ideas para negocios digitales. Por lo que, si tienes un conocimiento en programación quizás este capítulo no sea para ti y por el contrario, prefieras revisar mejor los casos de uso. Ahora sí...

¿Qué es un lenguaje de programación?

Yo lo veo como un idioma especial que se usa para "hablar" con las computadoras. Cada lenguaje de programación tiene su propia "gramática" y "vocabulario", pero todos comparten el objetivo de comunicarse con la máquina y hacer que realice determinada acción que tú previamente has planificado. Por ejemplo: diseñar una aplicación web que te ayude a gestionar tus proyectos.

Con un lenguaje de programación puedes: crear programas, aplicaciones, páginas web y muchas otras cosas.

En este "repositorio" lo usaremos para crear aplicaciones web y prototipos de negocios, pero aprendiendo los conceptos y la lógica, estoy seguro que podrás dirigirlo hacia cualquier evento. Y...

¿Cuáles son los lenguajes más usados?

Esto dependerá de qué especialidad manejes como programador. Sin embargo, como no se trata de un curso de programación, yo me centraré en los 3 lenguajes que me ayudan a construir mis prototipos: HTML, CSS y JavaScript (en adelante JS).

Para explicarte cada uno de manera sencilla recurriré a una analogía: imagina que quieres construir una casa, ¿cómo actuarían los lenguajes de programación en esta idea? Algo así...

El HTML es la estructura: Paredes, techo, ventanas, puertas. Define los elementos básicos de una página o aplicación web (texto, imágenes, enlaces, etc.).
El CSS es la decoración: Color de las paredes, tipo de muebles, estilo de las ventanas. Da estilo y formato a la página o aplicación web (colores, fuentes, diseño, etc.).
El JS es el funcionamiento: Sistema eléctrico, sistema de agua, sistema de seguridad, etc. Añade interactividad y dinamismo a la página o aplicación web (animaciones, efectos, formularios, etc.).

¿Fácil de entender? Bueno, veamos cómo funcionan a través de ejemplos prácticos que es donde, considero, puedes familiarizarte más rápido con los lenguajes.

Aplicando...

No me voy a enrollar mucho con la lógica de cada prompt ya que este apartado es puramente práctico. Ahora sí...

Comencemos creando un simple botón. Vamos a pedirle a nuestra IA, en este caso Google AI Studio, que nos ayude creando un "botón simple que diga: Haz clic aquí" en HTML. Recuerda que usamos HTML porque es la estructura base. El código que nos dio es el siguiente:

<button id="miBoton">Haz clic aquí</button>

Ahora, ingresaremos ese código en un Codepen para ver el resultado. Puedes copiarlo e ingresarlo en tu propio Codepen. Si no estás familiarizado con el uso de Codepen te recomiendo revisar la siguiente guía. O...

Como verás es un botón bastante básico, pero que cumple con lo especificado. Ahora, digamos que queremos que tenga un estilo particular.

Vamos a pedirle a la misma IA de Google que nos ayude agregando un estilo CSS a nuestro botón. Especificaremos que el botón sea "un poco más grande, de color azul y con letras blancas". Recuerda que CSS es el lenguaje que nos ayuda a dar todos los estilos que imaginemos. El código que nos dio es el siguiente:

#miBoton {
  background-color: blue; /* Color de fondo azul */
  color: white; /* Texto blanco */
  border: none; /* Sin borde */
  padding: 10px 20px; /* Espacio interno */
  font-size: 16px; /* Tamaño de la fuente */
  cursor: pointer; /* Cursor en forma de mano */
}

Ahora, ingresaremos ese código en un Codepen para ver el resultado. Puedes copiarlo e ingresarlo en tu propio Codepen. O...

¿Qué tal? Sí, puede que el azul esté feo, pero no le especificamos qué tipo de azul, ya que no desarrollamos una lógica para esta práctica. Pero por lo demás va bien, ¿no? Aunque siempre puede ir mejor...

¡Y una mejora puede ser que haya una interacción! Así que vamos a pedirle a la IA de Google que nos ayude creando dicha interacción. Especificaremos que "cuando den clic en el botón salga un anuncio que diga: !Hola! Has hecho click en el botón." Recuerda que JavaScript (JS) es el lenguaje que nos ayuda a dar todas las interacciones que imaginemos. El código que nos dio es el siguiente:

document.getElementById("miBoton").onclick = function() {
  alert("¡Hola! Has hecho clic en el botón.");
};

Ahora, ingresaremos ese código en un Codepen para ver el resultado. Puedes copiarlo e ingresarlo en tu propio Codepen. O...

¡Vaya! Creo que ahora sí estamos por un buen camino, ¿no lo crees así?. Espero que hayas podido comprender cómo funciona y qué aporta cada uno de los lenguajes de programación vistos aquí. Seguro que hay más, pero por ahora es lo mínimo que necesitas para comprender los casos de uso. Aunque, quizás sí falte algo más...

¿Y si solo queremos trabajar con un solo código?

Verás, algunos de los "casos de uso" trabajan con un solo código HTML en el que está incluido nuestro CSS y JS al mismo tiempo. ¿Se puede? Sí, pero solo es recomendable en ciertos escenarios. Antes de decirte cuáles son estos escenarios, probemos trabajar el mismo botón del ejemplo anterior, pero generando un solo código.

Para lograrlo debemos enfatizarle a la IA que nos dé el código con un único lenguaje. También es muy importante tener desarrollada la lógica de nuestro pedido. De lo contrario, podríamos incurrir en muchos errores que nos lleven a frustrarnos y creer que no hay una solución. Nuestra petición quedaría de la siguiente manera:

-> Crea, en formato HTML, un botón que diga "Haz click aquí". Cuando haga click en el botón debe aparecer un mensaje en la parte superior que diga "¡Hola! Has hecho clic en el botón." El botón debe ser de color azul y letras blancas.

Ahora, la IA de Google nos acaba de dar el siguiente código:

<!DOCTYPE html>
<html>
<head>
<style>
#miBoton {
  background-color: blue;
  color: white;
  border: none;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
}
</style>
</head>
<body>

<button id="miBoton">Haz clic aquí</button>

<script>
document.getElementById("miBoton").onclick = function() {
  alert("¡Hola! Has hecho clic en el botón.");
};
</script>

</body>
</html>

Bastante diferente a lo anterior, ¿no?. Ahora, ingresaremos ese código en un Codepen para ver el resultado. Puedes copiarlo e ingresarlo en tu propio Codepen. O...

¿Qué te parece? ¿Crees que es mejor trabajar con un solo código o prefieres trabajarlos por separado? ¿Dónde crees que está la diferencia? Pues bien, consideremos lo siguiente

Es recomendable

...trabajar todo el código en un solo archivo cuando son proyectos bastante pequeños donde poner HTML, CSS y JS, no interferirá en que puedas leer y encontrar errores dentro del código. Ya que, puede haber momentos donde lo que estás diseñando presente un error y, si el proyecto es mediano o grande, no sepas si es por el HTML, CSS o JS. También es recomendable cuando prototipas herramientas básicas y pequeñas que deseas que funcionen en tu misma PC y solo para ti.

Con este capítulo culmina el módulo de "básicos". Para familiarizarte más con la programación te recomiendo que revises los "casos de uso" que he preparado.

No olvides que, para comprender mejor cómo manejar los códigos, puedes visitar la "Guía de IA's y Herramientas", con las que aprenderás cómo y dónde prototipar tus herramientas.

¡Nos vemos pronto!

Last updated 2 months ago