Diseño web para todos: Conceptos básicos de desarrollo y codificación web
Aprenda los fundamentos de la investigación y el diseño de la experiencia del usuario (UX). Sumérjase en el proceso de UX de identificar problemas e iterar y
Lo que serás capaz de hacer
Aprenda los fundamentos de la investigación y el diseño de la experiencia del usuario (UX). Sumérjase en el proceso de UX de identificar problemas e iterar y probar diseños para encontrar soluciones adecuadas. Aprenderá a empatizar con los usuarios a través de enfoques de investigación basados en las mejores prácticas y a crear artefactos de UX comunes como las personas usuarias. Y utilizará los conocimientos de UX para tomar las decisiones de diseño adecuadas. Utilizando el proceso de diseño de la interfaz de usuario (UI), será capaz de crear wireframes para características en Figma, y convertirlos en prototipos de estilo Producto Mínimo Viable (MVP) a partir de sus maquetas. También aprenderá los principios básicos del diseño, como la jerarquía y el uso de cuadrículas. Al finalizar este curso será capaz de: - Diseñar productos digitales que creen valor y resuelvan los problemas de un usuario de forma significativa. - Reconocer lo que constituye una UX UI de éxito y evaluar las interfaces existentes para comprobar la coherencia y la calidad del diseño. - Identificar los métodos de diseño de interacción de mejores prácticas y evaluar y mejorar sus propios diseños y los de otros. - Crear, compartir y probar sus diseños de UX UI siguiendo las directrices de mejores prácticas. Este es un curso para principiantes dirigido a alumnos que deseen prepararse para una carrera en el desarrollo de UX UI. Para tener éxito en este curso, no necesita experiencia previa en desarrollo, sólo conocimientos básicos de navegación por Internet y ganas de aprender.
- Describir los fundamentos del diseño y la investigación de la experiencia del usuario (UX)
- Describir las consideraciones de accesibilidad en el diseño
- Practicar el desarrollo de la empatía con el usuario a través de la investigación
- Cree wireframes y prototipos en Figma
Temario
UNIDAD 1 - Módulo uno: Aprender sobre la Web · 19 leccionesIntroducción a HTML5 - UNIDAD 1 - Módulo uno: Aprender sobre la Web
Introducción a HTML5 - UNIDAD 1 - Módulo uno: Aprender sobre la Web
- Programa del curso
- Introducción a HTML5
- Encuesta previa al curso
- Materiales necesarios para el curso
- Recursos opcionales del curso
- Recursos
- La evolución del HTML
- Cómo funciona: La "magia" de las solicitudes de páginas
- Navegadores
- Ver las opciones de su navegador
- Editores: Cómo utilizar un editor para crear un archivo HTML
- Editores: Cómo utilizar VS Code
- Editores: Cómo utilizar VS Code
- Introducción a los IDE y a los espacios de código de GitHub
- Primeros pasos con Github
- Uso de los espacios de código de GitHub
- Módulo Uno Comprobación de conocimientos
- Recursos adicionales
- Conceptos básicos de HTML/Web
UNIDAD 2 - Módulo dos: Estructura de una página web · 24 leccionesIntroducción a HTML5 - UNIDAD 2 - Módulo dos: Estructura de una página web
Introducción a HTML5 - UNIDAD 2 - Módulo dos: Estructura de una página web
- Recursos
- El modelo de objetos del documento (DOM)
- Etiquetas y sintaxis HTML5
- Etiquetas y sintaxis HTML5
- Hojas de trucos
- Etiquetas semánticas
- Etiquetas semánticas
- Colocación del código
- Descarga y carga de código con VSCode y Github
- Plantilla de página en Visual Studio Code
- Copiar código con GitHub Codespaces
- Página de plantillas en Github Codespaces
- Código de inicio para la página de plantillas
- Imágenes e iconos
- Imágenes
- Derechos de autor, uso justo e imágenes inclusivas
- Imágenes accesibles
- Texto alternativo
- Módulo Dos Comprobación de conocimientos
- Hiperenlaces
- Etiqueta Hiperenlace
- Etiquetas útiles
- Etiquetas
- Recursos adicionales
UNIDAD 3 - Tercera semana: Alojamiento y accesibilidad · 18 leccionesIntroducción a HTML5 - UNIDAD 3 - Tercera semana: Alojamiento y accesibilidad
Introducción a HTML5 - UNIDAD 3 - Tercera semana: Alojamiento y accesibilidad
- Recursos
- Web accesible
- ¿Su navegador es compatible con la accesibilidad?
- Validación de su sitio web
- Colocar su código en la Web
- Alojar su sitio web
- Subida a páginas de GitHub
- Revisión: Publicar su sitio
- Descripción del proyecto final
- Demostración del proyecto final
- Proyecto final
- Introducción a la Galería Gamut
- Compartir los proyectos finales con la comunidad del curso
- Prueba final del curso
- ¡Felicidades!
- Encuesta posterior al curso
- Cierre
- Esté atento a un enlace con más material
UNIDAD 4 - Primera semana: Introducción al estilo sencillo · 26 leccionesIntroducción a CSS3 - UNIDAD 4 - Primera semana: Introducción al estilo sencillo
Introducción a CSS3 - UNIDAD 4 - Primera semana: Introducción al estilo sencillo
- Programa del curso
- Introducción a CSS3
- Encuesta previa al curso
- Recursos
- Primeros pasos con Github
- Descarga y carga de código con VSCode y Github
- Copiar código con GitHub Codespaces
- Subida a páginas de GitHub
- Revisión: Publicar su sitio
- Construir su primera página web
- Hojas de estilos en cascada
- Repasando la "cascada" de CSS
- Colores
- Estilizar su texto
- Codificación temprana
- Codificar juntos: Aplicar el estilo
- Visualización y visibilidad - Parte 1
- Visualización y visibilidad - Parte 2
- Código Juntos: La propiedad Display
- Colocación del código
- Sintaxis y teoría del estilo
- Tarea Uno Descripción
- Tarea Uno Descripción
- Tarea uno: Estilizar su primera página
- Introducción a la Galería Gamut
- Tarea uno: Presentación opcional a la galería
UNIDAD 5 - Segunda semana: Selectores avanzados, visualización y diseño para la accesibilidad · 23 leccionesIntroducción a CSS3 - UNIDAD 5 - Segunda semana: Selectores avanzados, visualización y diseño para la accesibilidad
Introducción a CSS3 - UNIDAD 5 - Segunda semana: Selectores avanzados, visualización y diseño para la accesibilidad
- Recursos
- Visualización: Cuadrícula
- Visualización: Cuadrícula
- Pantalla: Flex
- Pantalla: Flex
- Enlaces y listas de estilo
- Revisión de la DOM
- Selectores avanzados
- Selectores de atributos
- Codificar juntos: Navegación
- Reglas taquigráficas
- Valores predeterminados del navegador
- Capacidades del navegador
- Navegadores
- Imágenes de fondo y opacidad
- Código Juntos: Imágenes de fondo y opacidad
- Diseñar para la accesibilidad
- Recursos adicionales
- Test de selectores avanzados
- Tarea Dos Descripción
- Tarea Dos Descripción
- Tarea dos: Selectores avanzados y visualización
- Segunda tarea: Presentación opcional a la galería
UNIDAD 6 - Tercera semana: El modelo de caja y el posicionamiento · 11 leccionesIntroducción a CSS3 - UNIDAD 6 - Tercera semana: El modelo de caja y el posicionamiento
Introducción a CSS3 - UNIDAD 6 - Tercera semana: El modelo de caja y el posicionamiento
- Recursos
- Bordes
- Margen y relleno
- Modelo de caja
- Código Juntos: Modelo de caja
- Código Juntos: Modelo de caja
- Posicionamiento
- Posicionamiento
- Recursos adicionales
- Cuestionario final
- ¿Por qué no una tarea entre iguales esta semana?
UNIDAD 7 - Semana cuatro: Pseudoclases, pseudoelementos y un proyecto final · 12 leccionesIntroducción a CSS3 - UNIDAD 7 - Semana cuatro: Pseudoclases, pseudoelementos y un proyecto final
Introducción a CSS3 - UNIDAD 7 - Semana cuatro: Pseudoclases, pseudoelementos y un proyecto final
- Recursos
- Pseudoclases y elementos
- Code Together: Estilizar imágenes con pseudoclases
- Transiciones
- Transformaciones
- Navegación accesible
- Recursos adicionales
- Descripción del proyecto final
- Descripción del proyecto final
- Proyecto final: ¡Cree su página web!
- Proyecto final: Presentación opcional a la galería
- Cierre
UNIDAD 8 - Quinta semana: ¿Qué hacer a partir de ahora? · 2 leccionesIntroducción a CSS3 - UNIDAD 8 - Quinta semana: ¿Qué hacer a partir de ahora?
Introducción a CSS3 - UNIDAD 8 - Quinta semana: ¿Qué hacer a partir de ahora?
- Opciones de Coursera
- Encuesta posterior al curso
UNIDAD 9 - Primera semana: Tipos de datos · 22 leccionesInteractividad con JavaScript - UNIDAD 9 - Primera semana: Tipos de datos
Interactividad con JavaScript - UNIDAD 9 - Primera semana: Tipos de datos
- Programa del curso
- Introducción a JavaScript
- Encuesta previa al curso
- Recursos del curso
- "¿Qué son estos plazos?"
- Recursos
- El modelo de objetos del documento (DOM)
- Revisión de DOM con programación orientada a objetos
- Acceso a los métodos DOM
- Métodos DOM más recientes
- Punto y coma
- Salida
- Intentar crear y depurar su propia salida
- Variables
- Tipos de datos
- Operadores y expresiones
- Cuestionario de la primera semana
- Primeros pasos con Github
- Descarga y carga de código con VSCode y Github
- Copiar código con GitHub Codespaces
- Subida a páginas de GitHub
- Revisión: Publicar su sitio
UNIDAD 10 - Segunda semana: Reaccionar ante su público · 17 leccionesInteractividad con JavaScript - UNIDAD 10 - Segunda semana: Reaccionar ante su público
Interactividad con JavaScript - UNIDAD 10 - Segunda semana: Reaccionar ante su público
- Recursos
- Funciones
- Funciones
- Colocación del código
- Organizar su código
- Estructura de carpetas / Cómo organizar su código
- Eventos
- Dominio de eventos y funciones
- Codifique conmigo Eventos
- Sólo una pequeña nota antes del siguiente vídeo
- "esto"
- Cuestionario de la segunda semana
- ¡¡¡Hora de hacer los deberes!!!
- Deberes: Galería de fotos interactiva en JavaScript
- Galería fotográfica interactiva en JavaScript
- Introducción a la Galería Gamut
- Deberes: Galería de envíos opcionales
UNIDAD 11 - Semana Tres: Matrices y bucles · 8 leccionesInteractividad con JavaScript - UNIDAD 11 - Semana Tres: Matrices y bucles
Interactividad con JavaScript - UNIDAD 11 - Semana Tres: Matrices y bucles
- Recursos
- Una hoja de trucos de JavaScript
- Tabindex y accesibilidad
- Uso de JavaScript con atributos
- Matrices
- Matrices en JavaScript
- Codifique Conmigo Matrices
- Examen de repaso de la tercera semana
UNIDAD 12 - Semana Cuatro: Uso de JS para imágenes interactivas · 13 leccionesInteractividad con JavaScript - UNIDAD 12 - Semana Cuatro: Uso de JS para imágenes interactivas
Interactividad con JavaScript - UNIDAD 12 - Semana Cuatro: Uso de JS para imágenes interactivas
- Recursos
- Escribir bucles en JavaScript
- Técnicas avanzadas de codificación
- Codifique Conmigo Aleatorizando sus imágenes usando matrices
- Codifique Conmigo Uso de Lightbox
- Codifique Conmigo Recorrer imágenes en bucle
- "Cool Stuff" - ¿Amigo o enemigo?
- Descripción del proyecto final
- Descripción del proyecto final
- Proyecto final: Su propia galería de fotos accesible
- Proyecto final: Galería de presentación opcional
- Conclusión
- Encuesta posterior al curso
UNIDAD 13 - Primera semana: Estilo con diseño receptivo · 21 leccionesEstilización avanzada con diseño adaptable - UNIDAD 13 - Primera semana: Estilo con diseño receptivo
Estilización avanzada con diseño adaptable - UNIDAD 13 - Primera semana: Estilo con diseño receptivo
- Programa del curso
- Introducción al diseño responsivo
- Encuesta previa al curso
- Recursos del curso
- Preguntas más frecuentes (FAQ)
- Primeros pasos con Github
- Descarga y carga de código con VSCode y Github
- Copiar código con GitHub Codespaces
- Subida a páginas de GitHub
- Revisión: Publicar su sitio
- Recursos de la semana 1
- ¿Qué es el diseño receptivo?
- Ejemplos de diseño responsivo deficiente
- Centros de pruebas
- Qué hacer cuando su herramienta queda obsoleta
- Ventajas del diseño receptivo
- Mediciones de fluidos Lecturas de fondo
- Medición de fluidos
- Codifique conmigo Medición de fluidos
- Conceptos básicos de los enfoques de diseño receptivo
- Herramientas y recursos adicionales
UNIDAD 14 - Segunda semana: Conceptos básicos · 15 leccionesEstilización avanzada con diseño adaptable - UNIDAD 14 - Segunda semana: Conceptos básicos
Estilización avanzada con diseño adaptable - UNIDAD 14 - Segunda semana: Conceptos básicos
- Recursos de la semana 2
- Consultas de medios
- Codifique Conmigo Medidas de fluidos y consultas de medios
- Cuestionario práctico -- Problema de desafío
- Marcos de alambre
- Puntos de interrupción
- Consultas de medios Segunda parte
- Codifica Conmigo Navegación responsiva
- Repaso de la segunda semana: Consultas de medios y puntos de interrupción
- Descripción de los deberes
- Revisión de los deberes: Consultas básicas de medios
- Crear una hoja de estilo responsiva
- Introducción a la Galería Gamut
- Deberes: Presentación opcional a la galería
- Recursos adicionales
UNIDAD 15 - Semana tres: Media Queries para la maquetación y la accesibilidad · 10 leccionesEstilización avanzada con diseño adaptable - UNIDAD 15 - Semana tres: Media Queries para la maquetación y la accesibilidad
Estilización avanzada con diseño adaptable - UNIDAD 15 - Semana tres: Media Queries para la maquetación y la accesibilidad
- Recursos de la semana 3
- Avance de la 3ª semana
- Codifique Conmigo Uso de Media Queries con Grid
- Codifique Conmigo Uso de Media Queries con Flex
- Consultas de medios para la accesibilidad
- Prefiere el movimiento reducido
- Combinación y contraste de colores
- Pruebas de accesibilidad
- Opciones de pruebas de accesibilidad
- Recursos adicionales
UNIDAD 16 - Semana cuatro: Marcos · 17 leccionesEstilización avanzada con diseño adaptable - UNIDAD 16 - Semana cuatro: Marcos
Estilización avanzada con diseño adaptable - UNIDAD 16 - Semana cuatro: Marcos
- Recursos de la semana 4
- Utilización de marcos
- Introducción a Bootstrap
- Primeros pasos con Bootstrap
- Sistema de cuadrícula Bootstrap
- Recursos y ejemplos de Bootstrap
- Opcional: Entrevista con M W
- Opcional: Entrevista con H W
- Opcional: Entrevista con H N
- Recursos adicionales
- Cuestionario final sobre diseño receptivo
- Descripción del proyecto final
- Revisión de los deberes: Proyecto final
- Proyecto final: Galería fotográfica
- Proyecto final: Presentación opcional a la galería
- Conclusión
- Encuesta posterior al curso
UNIDAD 17 - Primera semana: Introducción · 14 leccionesDiseño web para todos Capstone - UNIDAD 17 - Primera semana: Introducción
Diseño web para todos Capstone - UNIDAD 17 - Primera semana: Introducción
- Bienvenido
- Programa del curso
- Preguntas frecuentes importantes
- Encuesta previa al curso
- Objetivos de la cartera
- Opciones de cartera
- Requisitos de la cartera
- Rúbrica de calificación de la cartera
- Opción 1: Construir su sitio desde cero
- Opción 2: Construir su sitio a partir de una plantilla
- Opción 3: Construir su sitio utilizando un framework
- Preguntas y respuestas de la primera semana
- Recursos adicionales
- OPCIONAL - Preséntese
UNIDAD 18 - Segunda semana: Fase de diseño · 9 leccionesDiseño web para todos Capstone - UNIDAD 18 - Segunda semana: Fase de diseño
Diseño web para todos Capstone - UNIDAD 18 - Segunda semana: Fase de diseño
- Revisar wireframes y bocetos de diseño
- Preguntas y respuestas de la segunda semana
- Crear un wireframe
- Presentación y revisión de los bocetos de diseño
- Opción 1: Boceto de diseño de demostración para un sitio codificado desde cero
- Opción 2: Diseñar un boceto de demostración para un sitio codificado a partir de una plantilla
- Opción 3: Demostración de boceto de diseño para un sitio codificado utilizando un marco de trabajo
- Aviso para los alumnos auditores
- Envío opcional de tareas para los alumnos auditores
UNIDAD 19 - Tercera semana: Fase de revisión y preparación · 14 leccionesDiseño web para todos Capstone - UNIDAD 19 - Tercera semana: Fase de revisión y preparación
Diseño web para todos Capstone - UNIDAD 19 - Tercera semana: Fase de revisión y preparación
- Preparación de sus imágenes
- Recursos
- Uso del Validador W3
- Utilización de la herramienta WAVE
- Referencia rápida de WebAIM
- Utilización de herramientas para desarrolladores
- La guía del inspector web de Safari
- Herramientas para desarrolladores de Firefox
- Pies de página adhesivos
- Cómo incrustar un calendario de Google
- Uso de Bootstrap para añadir un carrusel
- Añadir un plugin Lightbox
- Font Awesome
- Preguntas y respuestas de la tercera semana
UNIDAD 20 - Cuarta semana: Fase de codificación · 1 leccionesDiseño web para todos Capstone - UNIDAD 20 - Cuarta semana: Fase de codificación
Diseño web para todos Capstone - UNIDAD 20 - Cuarta semana: Fase de codificación
- Preguntas y respuestas de la cuarta semana
UNIDAD 21 - Quinta semana: Fase de validación y revisión · 9 leccionesDiseño web para todos Capstone - UNIDAD 21 - Quinta semana: Fase de validación y revisión
Diseño web para todos Capstone - UNIDAD 21 - Quinta semana: Fase de validación y revisión
- ¿Por qué validar?
- Creación de un vídeo de captura de pantalla (Opcional)
- Preguntas y respuestas de la quinta semana
- Presentación y revisión de proyectos en curso
- Opción 1: Demostración de su cartera (codificada desde cero)
- Opción 2: Demostración de su portafolio (diseñado a partir de una plantilla)
- Opción 3: Demuestre su cartera (diseñada utilizando un marco)
- Aviso para los alumnos auditores
- Envío opcional de tareas para los alumnos auditores
UNIDAD 22 - Sexta semana: Fase de revisión y entrega · 9 leccionesDiseño web para todos Capstone - UNIDAD 22 - Sexta semana: Fase de revisión y entrega
Diseño web para todos Capstone - UNIDAD 22 - Sexta semana: Fase de revisión y entrega
- Preguntas y respuestas de la sexta semana
- Rúbrica de calificación de la cartera
- Opción 1: Demuestre su cartera (diseñada desde cero)
- Opción 2: Demostración de su portafolio (diseñado a partir de una plantilla)
- Opción 3: Demuestre su cartera (diseñada utilizando un marco)
- Aviso para los alumnos auditores
- Envío opcional de tareas para los alumnos auditores
- ¡Felicidades!
- Encuesta posterior al curso
Tu certificado lo emite la SEP, no solo una plataforma
Al demostrar la competencia recibes un certificado emitido por la Secretaría de Educación Pública a través del Gobierno del Estado de México: un documento oficial que puedes presentar con confianza ante cualquier empleador o institución.
Tu certificado con INEC
- Lo emite la Secretaría de Educación Pública (SEP), a través del Gobierno del Estado de México
- Documento oficial con folio verificable en línea
- Lo otorga la Universidad Tecnológica Fidel Velázquez
Otras plataformas en línea
- Constancia privada emitida por la misma plataforma
- Solo acredita horas cursadas o asistencia
- Sin respaldo de una autoridad educativa
Tu itinerario, de la inscripción al certificado
- 1
Inscripción con pago único
Pagas $4,990 MXN una sola vez y entras de inmediato al curso.
- 2
Estudias a tu ritmo
22 unidades con videos, lecturas y actividades, disponibles 24/7 durante 12 meses.
- 3
Cuestionarios por unidad
15 cuestionarios para comprobar lo aprendido.
- 4
Certificado
Emitido por la SEP a través del Gobierno del Estado de México, con folio verificable.
Un certificado oficial de la SEP
- Emitido por la Secretaría de Educación Pública (SEP), a través del Gobierno del Estado de México. No es una constancia privada: es un documento oficial, y ese respaldo marca la diferencia frente a otras plataformas en línea.
- Contenido impartido por University of Michigan.
- Folio y QR verificables para compartirlo con quien te contrate.
Empieza hoy, a tu ritmo
Un solo pago y acceso inmediato al curso completo durante 12 meses.
- 22 unidades · 314 lecciones · 144 h
- 12 meses de acceso
- 15 cuestionarios de evaluación
- Certificado emitido por la SEP (Gob. del Estado de México) con folio verificable
Sobre tu inscripción
¿Cómo es el pago?
Un solo pago de $4,990 MXN. No hay mensualidades ni cargos recurrentes.
¿Cuánto tiempo tengo acceso?
12 meses desde tu inscripción, 24/7, para avanzar a tu ritmo.
¿Quién imparte el contenido?
El curso es impartido por University of Michigan; INEC gestiona tu inscripción, evaluación y certificado.
¿Qué pasa cuando vence mi acceso?
Puedes renovar tu cuenta tú mismo desde la plataforma, sin trámites ni esperas.


