Programa Profesional en Diseño y Desarrollo Web

Entenderás qué es una web, cómo funciona y qué papel cumple dentro del ecosistema digital de una marca, negocio o proyecto profesional.

• Tipos de sitios web: corporativa, landing page, blog, portfolio, tienda online y aplicación web.
• Diferencia entre diseño web, UX, UI, front-end, back-end y CMS.
• Cliente, servidor, navegador, dominio, hosting, DNS, SSL y rutas.
• Flujo profesional: briefing, estructura, diseño, desarrollo, pruebas, publicación y mantenimiento.

Resultado: briefing inicial de un proyecto web y comprensión del proceso completo de trabajo.

Aprenderás a definir qué problema debe resolver una web antes de pensar en colores, secciones o tecnología.

• Objetivos del negocio, objetivos del usuario y objetivos de comunicación.
• Entrevistas, cuestionarios, benchmarking y revisión de preguntas frecuentes.
• User persona, buyer persona, grupos de interés y escenarios de uso.
• Requisitos funcionales y no funcionales: rendimiento, seguridad, accesibilidad, SEO y mantenimiento.
• Uso de IA para ordenar información de investigación, sintetizar necesidades y formular hipótesis de requisitos, siempre contrastadas con datos reales.

Resultado: documento de requisitos con públicos, objetivos, funcionalidades y criterios de calidad.

Ordenarás la información y definirás cómo se moverá el usuario por la web antes de diseñar la interfaz visual.

• Inventario de contenidos, auditoría de contenidos y jerarquía de información.
• Mapa del sitio, árbol de contenidos y navegación principal, secundaria y contextual.
• User journey, flujos de interacción, puntos de fricción y puntos de conversión.
• Bocetos, wireframes de baja fidelidad y patrones habituales de navegación.
• Uso de IA como apoyo para explorar estructuras de contenido, detectar puntos de fricción y generar alternativas de arquitectura o flujos de navegación.

Resultado: mapa del sitio, flujos principales y wireframes de baja fidelidad.

Convertirás la estructura de la web en una interfaz clara, coherente y preparada para desarrollarse.

• Principios visuales: jerarquía, contraste, ritmo, espaciado, alineación y proximidad.
• Sistemas reticulares, diseño con columnas, breakpoints y diseño responsive.
• Botones, formularios, tarjetas, iconos, menús, cabeceras, footers, hero y CTAs.
• Figma, prototipos navegables, guía de estilo web y handoff diseño-desarrollo.
• Uso de IA para explorar referencias, microcopy, criterios de interfaz y variantes de componentes, sin sustituir el trabajo de diseño ni la revisión profesional.

Resultado: prototipo navegable de una web y guía visual básica para desarrollo.

Revisarás la web desde la perspectiva de las personas que deben usarla, no solo desde quien la diseña.

• Principios de accesibilidad web: perceptible, operable, comprensible y robusto.
• Contraste, tamaño de texto, texto alternativo, estructura semántica y navegación con teclado.
• Formularios accesibles, mensajes de error, estados focus y uso responsable de ARIA.
• Evaluación heurística, checklist UX/UI y pruebas básicas de usabilidad.
• Uso de IA como apoyo para revisar textos alternativos, detectar posibles problemas de usabilidad y preparar checklists de accesibilidad, siempre con validación humana.

Resultado: auditoría básica de accesibilidad y usabilidad sobre el prototipo del proyecto.

Empezarás a construir páginas reales con una base sólida de HTML y CSS, sin depender de plantillas cerradas.

• Estructura de un documento HTML: head, body, metadatos, enlaces, imágenes y formularios.
• HTML semántico: header, nav, main, section, article, aside y footer.
• CSS: selectores, propiedades, valores, cascada, herencia, especificidad y modelo de caja.
• Tipografía, colores, espaciado, bordes, formularios y organización básica de estilos.
• Uso de IA para comprender errores de HTML y CSS, pedir explicaciones, comparar soluciones y mejorar el aprendizaje sin copiar código sin entenderlo.

Resultado: página semántica con estilos básicos, estructura correcta y formulario maquetado.

Desarrollarás layouts adaptables a móvil, tablet y escritorio, con imágenes optimizadas y componentes reutilizables.

• Normal flow, Flexbox, CSS Grid, position, z-index, overflow y estructura de layout.
• Media queries, mobile first, breakpoints, unidades fluidas y funciones como clamp(), min(), max() y calc().
• Formatos JPG, PNG, SVG, WebP y AVIF; srcset, sizes, picture y lazy loading.
• Menús responsive, tarjetas, formularios, tablas adaptables, transiciones y animaciones con criterio.
• Uso de IA como apoyo para resolver problemas de layout responsive, revisar alternativas de CSS y optimizar criterios de imágenes para web.

Resultado: home responsive con Grid/Flexbox, imágenes optimizadas y adaptación real a varios dispositivos.

Ordenarás tu flujo de trabajo para desarrollar, versionar y publicar proyectos con una estructura profesional.

• Visual Studio Code, extensiones útiles, terminal y comandos básicos.
• Estructura de carpetas, rutas relativas, assets, organización de proyectos y documentación.
• Git, GitHub, repositorios, commits, branches, pull, push y README.
• Node.js, NPM, scripts, Vite y publicación básica en hosting, GitHub Pages, Netlify o Vercel.
• Uso de IA para documentar proyectos, mejorar archivos README, entender errores de terminal y revisar flujos de trabajo con Git, NPM y publicación.

Resultado: proyecto web organizado, versionado en GitHub y preparado para publicación.

Aprenderás fundamentos de programación usando JavaScript desde el inicio, con ejercicios prácticos y progresivos.

• Variables, constantes, tipos de datos, operadores, expresiones y estructuras condicionales.
• Bucles, funciones, parámetros, retorno, scope, arrays, objetos y métodos.
• JSON, fechas, Math, errores, try/catch y depuración con consola.
• Pensamiento algorítmico aplicado a problemas sencillos de una web.
• Uso de IA para reforzar el aprendizaje de lógica, explicar errores, generar ejercicios guiados y revisar pequeños scripts de JavaScript.

Resultado: ejercicios de lógica y pequeños scripts en JavaScript aplicados a casos reales.

Harás que las páginas respondan a la interacción del usuario mediante componentes habituales de una web profesional.

• DOM, selección de elementos, modificación de contenido, clases y atributos.
• Eventos, event listeners, delegación de eventos y organización del código.
• Menús móviles, acordeones, tabs, modales, carruseles, filtros y buscadores sencillos.
• Validación de formularios, mensajes de error, localStorage, módulos ES y accesibilidad en componentes interactivos.
• Uso de IA para analizar errores en componentes interactivos, revisar validaciones de formularios y mejorar la organización del código JavaScript.

Resultado: componentes interactivos para una web: menú móvil, acordeón, tabs y formulario validado.

Trabajarás la parte gestionable de los sitios web y aprenderás a preparar webs más rápidas, mantenibles y visibles.

• Qué es un CMS, cuándo usar WordPress y cuándo conviene una web estática o un desarrollo a medida.
• WordPress: páginas, entradas, medios, menús, usuarios, temas, plugins, bloques y mantenimiento básico.
• Rendimiento: imágenes, fuentes, caché, Lighthouse, PageSpeed Insights y Core Web Vitals.
• SEO técnico básico: title, meta description, headings, URLs, sitemap, robots.txt, canonical y Open Graph.
• Uso de IA como apoyo para revisar títulos, metadescripciones, estructura de headings, documentación técnica, rendimiento y criterios básicos de SEO.

Resultado: web corporativa básica en WordPress y auditoría de rendimiento/SEO técnico de una página.

Integrarás todo lo aprendido en un proyecto completo para un negocio, marca personal, comercio, restaurante, hotel, centro profesional o proyecto propio.

• Briefing, investigación, user personas, requisitos y mapa del sitio.
• Wireframes, prototipo de alta fidelidad, guía de estilo web y revisión de accesibilidad.
• HTML semántico, CSS responsive, JavaScript interactivo y optimización de imágenes.
• Publicación, documentación de entrega y presentación profesional del proyecto.
• Uso de IA para preparar documentación de entrega, revisar el proyecto final, estructurar presentaciones y crear checklists de calidad antes de publicar.

Resultado: una web completa, publicada o preparada para publicar, con documentación profesional.