📊 SEMANA N° 14

Desarrollo Frontend con Tailwind CSS y Vue.js

🎯Introducción

Este informe documenta la experiencia práctica del Laboratorio N° 14, centrado en el desarrollo frontend moderno utilizando Tailwind CSS y Vue.js. Se abordó la creación de interfaces responsivas, componentes reutilizables y la integración de estilos utilitarios.

El objetivo principal fue comprender cómo los frameworks y librerías modernas permiten construir aplicaciones web atractivas, escalables y fáciles de mantener.

📚Temas Aprendidos - Definiciones y Procedimientos

Tailwind CSS

Definición: Framework CSS de utilidad que permite crear interfaces modernas y responsivas mediante clases predefinidas. Facilita la personalización y el diseño rápido sin escribir CSS tradicional.

Instalación: Se realiza mediante npm y configuración de archivos tailwind.config.js y postcss.config.js.

npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p

Vue.js

Definición: Framework progresivo de JavaScript para construir interfaces de usuario interactivas y componentes reutilizables. Utiliza una sintaxis declarativa y reactiva.

Instalación: Se puede instalar mediante CDN, npm o Vue CLI.

npm install vue@next

Integración Tailwind + Vue

La integración de Tailwind CSS con Vue.js permite crear componentes estilizados y responsivos, aprovechando la reactividad y modularidad de Vue junto con la flexibilidad de Tailwind.

🛠️Ejercicio de Laboratorio

Objetivo del Ejercicio

Desarrollar una aplicación SPA para gestión de tareas con las siguientes características:

  • Interfaz moderna y responsiva con Tailwind CSS
  • Componentes Vue.js para tareas y formularios
  • Persistencia de datos en memoria
  • Validación de formularios y feedback visual

Procedimiento Implementado

  1. Inicialización del Proyecto:
    npm create vite@latest tareas-app -- --template vue
    Se creó el proyecto base con Vite y Vue 3.
  2. Instalación de Tailwind CSS:
    npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p
    Configuración de Tailwind en el proyecto.
  3. Creación de Componentes:
    • TaskList.vue: Lista de tareas
    • TaskForm.vue: Formulario de nueva tarea
  4. Estilización y Responsividad:
    <button class="bg-indigo-600 hover:bg-indigo-800 text-white font-bold py-2 px-4 rounded">Agregar</button>
    Uso de clases utilitarias de Tailwind para botones y cuadros.
  5. Validación y Feedback:
    • Validación de campos obligatorios
    • Mensajes de error estilizados

📈Resultados Obtenidos

Funcionalidades Implementadas

La aplicación desarrollada logró integrar exitosamente los siguientes componentes:

✅

SPA Funcional

Gestión de tareas en tiempo real

🎨

Interfaz Moderna

Diseño responsive con Tailwind

🧩

Componentes Vue

Reutilizables y reactivos

⚡

Feedback Visual

Validaciones y mensajes estilizados

Aspectos Técnicos Destacados

  • Tailwind CSS: Permite estilizar rápidamente sin escribir CSS tradicional
  • Vue.js: Facilita la creación de componentes y la gestión reactiva de datos
  • Vite: Proporciona entorno de desarrollo rápido y moderno
  • SPA: Experiencia fluida sin recarga de página

🤔Reflexión Final - Aprendizaje y Metodología

¿Qué Aprendí?

Durante este laboratorio, aprendí a integrar Tailwind CSS y Vue.js para crear aplicaciones frontend modernas y eficientes. Comprendí la importancia de los frameworks utilitarios y la modularidad en el desarrollo web actual.

¿Cómo Lo Hice?

Mi metodología se basó en:

  1. Estudio Teórico: Revisé documentación oficial y ejemplos
  2. Implementación Práctica: Construí la aplicación paso a paso
  3. Experimentación: Probé diferentes configuraciones y estilos
  4. Validación: Verifiqué la funcionalidad y responsividad en distintos dispositivos

Reflexión Metacognitiva

La experiencia me permitió reflexionar sobre la importancia de la modularidad y la rapidez de desarrollo que ofrecen herramientas como Tailwind y Vue. Aprendí que el diseño visual y la experiencia de usuario son tan importantes como la lógica de negocio.

📖Bibliografía

Libros Especializados

  • Holmes, A. (2021). Tailwind CSS: From Zero to Production. Leanpub.
  • Rubio, A. (2022). Vue.js 3 By Example. Packt Publishing.

Recursos Web Oficiales

Volver a Cuadernos