0️⃣1️⃣➖✴️ Formulario Web - Capitulo 1 - Claude AI ✴️
Education
Introduction
En este capítulo, exploraremos un nuevo proyecto en el desarrollo web. Si estás interesado en aprender junto a mí, te invito a unirte a este canal y seguir este proyecto. He creado un pequeño formulario que consta de tres cajas de texto y dos botones, utilizando una inteligencia artificial llamada Claude. Este recurso nos ayuda a programar y generar código según nuestras indicaciones.
Para comenzar, necesitamos descargar Visual Studio Code. Si tienes Windows, selecciona esa opción; si no, puedes elegir la correspondiente a tu sistema operativo. La instalación es muy sencilla. Descarga el archivo, ejecútalo y sigue los pasos. Yo ya lo tengo instalado, así que simplemente haré clic en "Next" y "Install".
Visual Studio Code es un editor de código que utilizaremos para desarrollar la aplicación web que deseamos. Al abrirlo, no tengo ninguna extensión instalada, pero más adelante veremos cuáles podemos añadir. Al lado izquierdo, hay varios íconos que nos permiten abrir carpetas. He creado una carpeta en el escritorio llamada "Proyecto Web". Selecciono esa carpeta y elimino un archivo que había hecho antes para crear uno nuevo: lo llamaré "index.html", el cual contendrá nuestro formulario web.
Para generar el código HTML del formulario, ingresamos a Claude, donde debemos iniciar sesión con nuestra cuenta de Google. Una vez dentro, solicitamos que genere un código para un formulario de registro en HTML con el diseño aplicado en CSS (CSS se utiliza para aplicar estilos a los elementos de la página). Transcribimos las instrucciones en inglés y comenzamos la generación de código.
Cuando el código está listo, regreso a Visual Studio Code, creo un nuevo archivo llamado "index.html", donde pegaré el código generado. Al escribir "ht" en el editor, aparece una estructura básica del HTML. Esta estructura incluye varias etiquetas, las cuales explicaremos en capítulos posteriores.
A continuación, copiaré todo el código generado para el formulario y lo pegaré en el cuerpo de nuestro archivo "index.html". Visual Studio Code nos permite auto guardar los cambios, lo que facilitará el proceso de desarrollo. Para ver lo que hemos creado hasta ahora, hago clic derecho en el archivo y selecciono "Open with Live Server". Esto abrirá el formulario en una pestaña de nuestro navegador.
Al revisar el formulario, vemos que incluye los campos requeridos y un botón de registro. Regresamos al código HTML y pegamos la sección de estilo (CSS) debajo de la etiqueta <title>. Normalmente, el código HTML y CSS se divide en diferentes archivos, pero por simplicidad, lo dejaremos en el mismo. Al hacerlo, el formulario adquiere una apariencia más elegante.
Ahora, investigaremos el código y observaremos qué hace cada línea. La etiqueta <div> que crea el contenedor para nuestro formulario y su etiqueta h1 que muestra el título. Cada campo de entrada del formulario también tiene propiedades asignadas que debemos entender. Por ejemplo, el tipo de cada campo (text, email, password) permite validación.
Nos detenemos un momento para explorar cada estilo en la etiqueta CSS. Podemos modificar los colores y otras propiedades de diseño, y observar cómo los cambios se reflejan en el navegador. También se utiliza el hover para asignar un color distinto a un botón al pasar el cursor sobre él.
Este formulario fue creado en segundos gracias a Claude, pero lo principal es que entendamos el funcionamiento detrás de cada línea de código. Este es el inicio del desarrollo web, y espero que lo hayan encontrado útil. Continuaremos con este proyecto, y más adelante veremos cómo seguir desarrollando este formulario en los siguientes capítulos.
Keywords
Desarrollo web, Formulario, Visual Studio Code, HTML, CSS, Inteligencia Artificial, Claude, Código, Editor de código, Validación.
FAQ
¿Qué es Visual Studio Code?
Visual Studio Code es un editor de código que permite desarrollar aplicaciones web de manera eficiente, ofreciendo herramientas útiles y soporte para diversos lenguajes de programación.
¿Qué es Claude?
Claude es una inteligencia artificial que ayuda a programar generando código y proporcionando asistencia a los desarrolladores según las instrucciones que se le proporcionen.
¿Qué contiene un formulario HTML básico?
Un formulario HTML básico suele incluir etiquetas de entrada como campos de texto, áreas de texto y botones que permiten a los usuarios enviar datos a un servidor.
¿Qué es CSS?
CSS (Cascading Style Sheets) se utiliza para aplicar estilos y diseño a los elementos HTML, permitiendo controlar la apariencia visual de las páginas web.
¿Cómo se valida un formulario?
Los formularios se validan mediante el uso de atributos de tipo en las etiquetas de entrada (como "email" o "password"), que aseguran que los datos ingresados cumplan con ciertos criterios.
