Envíanos tu consulta

Buscar cursos

Catálogo 2024-25

Cursos ¡Últimas plazas!Servicios FUNDAE Tutoriales Plataforma LMS

Solicitar información

Buscar cursos

Solicitar información

Formación

Modalidades

Próximas Convocatorias

Temario

FAQ

Solicitar información

Cursos de Desarrollo/Cursos de Desarrollo Web/Curso DaisyUI

Curso de DaisyUI

DISPONIBLE EN MODALIDAD:

Aula Virtual Personalizada

Aprende a usar DaisyUI con Tailwind CSS para crear interfaces modernas, estilizadas y personalizables en tiempo récord.

Este curso avanzado de DaisyUI te enseñará a integrar y personalizar componentes predefinidos con Tailwind CSS. Aprende a crear interfaces modulares y adaptables, aplicar temas personalizados y optimizar tu desarrollo frontend con un enfoque práctico y profesional.

Formación en DaisyUI bonificable para empresas

A quién va dirigido nuestro curso de DaisyUI

Desarrolladores frontend, diseñadores web y profesionales interesados en acelerar el desarrollo de interfaces atractivas y funcionales con **DaisyUI** y **Tailwind CSS**.

Objetivos de nuestro curso de DaisyUI

Comprender los fundamentos de DaisyUI y su integración con Tailwind CSS para crear interfaces modernas y estilizadas.
Aprender a configurar y personalizar componentes prediseñados con DaisyUI.
Crear interfaces de usuario modulares, rápidas y accesibles.
Implementar temas personalizados y aplicar responsive design de forma eficiente.
Optimizar el flujo de trabajo de desarrollo frontend mediante buenas prácticas con DaisyUI.

Qué vas a aprender en nuestro curso de DaisyUI

Requisitos de nuestro curso de DaisyUI

Conocimientos sólidos de HTML, CSS, JavaScript, además de experiencia previa con Node y Tailwind CSS.
Instalación y configuración previa de Node (LTS), NPM, GIT y Visual Studio Code.
Disponer de una cuenta de Github y Vercel que poder emlear durante el curso.
Tener un equipo con acceso a un usuario con permisos de instalación, conexión estable a Internet, mínimo 8GB de RAM y 10GB de espacio libre de memoria en disco.

Temario del curso de DaisyUI

tema 1

Introducción a DaisyUI y Tailwind CSS

¿Qué es DaisyUI y por qué es útil para el desarrollo frontend?
Diferencias entre DaisyUI y otras bibliotecas de componentes
Requisitos previos e instalación de DaisyUI
Configuración inicial de Tailwind CSS y DaisyUI en un proyecto
Integración de DaisyUI en frameworks como React, Vue o Angular
Entender el flujo de trabajo con DaisyUI
Exploración de la documentación oficial
Comparativa entre DaisyUI y frameworks como Bootstrap o Material UI
Ejercicio práctico: Instalación y configuración de DaisyUI
Ventajas de DaisyUI en el desarrollo moderno

tema 2

Configuración del entorno de desarrollo

Comprobando la instalación de Node y npm/Yarn
Creación de un proyecto con Tailwind CSS y DaisyUI
Configuración del archivo `tailwind.config.js`
Importación de DaisyUI en el proyecto
Estructura básica de archivos con DaisyUI
Uso del CLI de Tailwind para compilar estilos
Integración de DaisyUI con PostCSS
Configuración para proyectos con Vite y Webpack
Ejercicio práctico: Configuración completa del entorno DaisyUI
Solución a errores comunes en la configuración

tema 3

Componentes básicos de DaisyUI

Introducción a los componentes prediseñados de DaisyUI
Botones: variantes, tamaños y estilos
Formularios: campos de texto, checkboxes y radio buttons
Tarjetas y contenedores: diseño modular con DaisyUI
Menús de navegación y barras superiores
Implementación de modales y ventanas emergentes
Uso de componentes de alertas y notificaciones
Listas y tablas estilizadas
Ejercicio práctico: Creación de una interfaz usando componentes básicos
Buenas prácticas en el uso de componentes

tema 4

Personalización de temas en DaisyUI

Introducción al sistema de temas en DaisyUI
Uso de themes prediseñados
Creación de temas personalizados mediante Tailwind CSS
Configuración del archivo `tailwind.config.js` para temas
Implementación de modos claro y oscuro (Dark Mode)
Aplicación dinámica de temas con JavaScript
Ejercicio práctico: Creación de un tema personalizado
Uso de CSS variables para mayor flexibilidad
Pruebas de accesibilidad en temas personalizados
Ejemplo real: Implementación de un sitio multi-tema

tema 5

Diseño Responsive con DaisyUI

Principios básicos de diseño responsive con Tailwind y DaisyUI
Uso de breakpoints para adaptar componentes a dispositivos
Ajuste de tamaños, márgenes y paddings en DaisyUI
Configuración de columnas y grids
Ejercicio práctico: Creación de un diseño responsivo de una landing page
Adaptación de formularios y tablas a pantallas pequeñas
Mejores prácticas para mejorar la usabilidad en móviles
Uso de componentes específicos para mobile-first
Testeo de responsividad con herramientas de desarrollo
Evitar errores comunes en diseño responsive

tema 6

Creación de formularios avanzados

Introducción a formularios dinámicos y personalizados
Uso de inputs avanzados: rangos, fechas y más
Validación de formularios con DaisyUI y Tailwind
Uso de etiquetas y estilos de error
Creación de formularios multi-paso
Ejercicio práctico: Desarrollo de un formulario completo
Integración de formularios con JavaScript o frameworks (React/Vue)
Uso de placeholders y campos dinámicos
Mejora de la accesibilidad en formularios
Optimización de formularios para UX

tema 7

Componentes avanzados en DaisyUI

Introducción a componentes complejos: tabs, breadcrumbs y tooltips
Creación de accordions y componentes colapsables
Personalización de sliders y carousels
Implementación de dropdowns y menús contextuales
Ejercicio práctico: Desarrollo de un dashboard interactivo
Combinación de componentes avanzados en una interfaz
Mejores prácticas en la reutilización de componentes
Uso de grids avanzados para un diseño modular
Implementación de animaciones con DaisyUI y Tailwind
Optimización del rendimiento al usar componentes avanzados

tema 8

Integración de DaisyUI en aplicaciones React

Configuración de DaisyUI en un proyecto React
Uso de componentes DaisyUI dentro de componentes funcionales
Ejercicio práctico: Desarrollo de un dashboard con React y DaisyUI
Estado y manejo dinámico de temas
Uso de Hooks de React para integrar funcionalidad
Optimización del rendimiento en aplicaciones React
Implementación de formularios interactivos
Reutilización de componentes personalizados en React
Integración con bibliotecas externas (e.g., Axios, React Router)
Creación de componentes reutilizables con DaisyUI

tema 9

Integración con Vue y Angular

Instalación de DaisyUI en Vue.js
Configuración inicial y uso de Vue CLI
Ejercicio práctico: Creación de un sistema de tareas en Vue
Integración en Angular mediante Angular CLI
Uso de DaisyUI con Angular components
Personalización de temas dinámicos en Vue y Angular
Ejemplo de integración en SPA (Single Page Applications)
Optimización de la experiencia del usuario
Solución a errores frecuentes en la integración
Mejores prácticas para desarrollo con frameworks modernos

tema 10

Implementación de accesibilidad (A11y)

Introducción a la accesibilidad web (A11y)
Uso de roles y atributos ARIA en DaisyUI
Validación de formularios accesibles
Optimización de componentes para lectores de pantalla
Mejora del contraste y uso de colores accesibles
Ejercicio práctico: Creación de una página con A11y compliant
Pruebas de accesibilidad con Lighthouse
Uso de focus states y accesibilidad interactiva
Evitar errores comunes de diseño no accesible
Mejores prácticas para crear experiencias inclusivas

tema 11

Optimización del rendimiento

Introducción al rendimiento en proyectos Tailwind/DaisyUI
Reducción del CSS generado mediante PurgeCSS
Implementación de Lazy Loading para componentes
Uso de herramientas de análisis de rendimiento
Ejercicio práctico: Optimización de un proyecto DaisyUI
Reducción de dependencias no utilizadas
Pruebas de carga y tiempos de respuesta
Integración de DaisyUI en aplicaciones ligeras
Optimización del uso de Tailwind Directives
Comparación de rendimiento con otros frameworks

tema 12

Proyecto Final: Creación de una Aplicación Completa con DaisyUI

Definición de los requisitos del proyecto
Creación de un layout responsivo
Implementación de componentes interactivos
Desarrollo de formularios avanzados
Integración con frameworks (React/Vue)
Personalización de temas dinámicos
Optimización de la accesibilidad (A11y)
Pruebas de rendimiento y depuración
Despliegue de la aplicación en producción
Presentación final del proyecto