Recurso educativo digital interactivo para aprender CSS mediante la transformación visual del currículum HTML desarrollado en la fase anterior. El estudiante comprende la relación entre HTML y CSS, reglas, selectores, conexión de hojas de estilo, color y contraste, tipografía, modelo de caja, diseño adaptable y organización de CSS mantenible. Incluye laboratorios visuales, un CSS Playground, referencia rápida de propiedades, proyecto aplicado, evidencia en PDF y reflexión metacognitiva.
Licencia de uso
Reconocimiento-No Comercial-Compartir Igual (CC BY-NC-SA)
Título:
CSS aplicado: diseño visual y accesible de un currículum web
Idioma:
Español
Descripción:
Español
Recurso educativo digital interactivo para aprender CSS mediante la transformación visual del currículum HTML desarrollado en la fase anterior. El estudiante comprende la relación entre HTML y CSS, reglas, selectores, conexión de hojas de estilo, color y contraste, tipografía, modelo de caja, diseño adaptable y organización de CSS mantenible. Incluye laboratorios visuales, un CSS Playground, referencia rápida de propiedades, proyecto aplicado, evidencia en PDF y reflexión metacognitiva.
Palabras clave:
Español
CSS, hojas de estilo, selectores CSS, color, contraste, tipografía web, modelo de caja, responsive design, CSS mantenible, currículum web, accesibilidad web
El estudiante debe iniciar con el currículum construido en la Fase 1. Recorre los pasos en orden para comprender la función de CSS, sintaxis, selectores, color, contraste, tipografía, cajas, layout responsive y organización mantenible. Posteriormente personaliza el currículum y utiliza el CSS Playground para experimentar. Al final genera una evidencia PDF con sus decisiones de diseño, resultados, autoevaluación y reflexión metacognitiva.
Densidad semántica:
Media
Rango típico de edad:
Adolescentes de 12-21 años
Jóvenes de 22-35 años
Adultos de los 36 años en adelante
Tipo de interacción:
Mixta
Nivel de interacción:
Alto
Rol del usuario final previsto:
Estudiante
Público en general
Docente
Tiempo típico de aprendizaje:
90–120 minutos
Tiene costo:
No
Tiene Copyright u otras restricciones:
No
Descripción:
Reconocimiento-No Comercial-Compartir Igual (CC BY-NC-SA)
Referencias consultadas:
1. Mozilla Developer Network. (2026). *Getting started with CSS*. https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Getting_started
2. Mozilla Developer Network. (2026). *CSS: Styling the content*. https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Styling_the_content
3. Mozilla Developer Network. (2026). *The box model*. https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Box_model
4. Mozilla Developer Network. (2026). *Media query fundamentals*. https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/CSS_layout/Media_queries
5. World Wide Web Consortium. (2023). *Web Content Accessibility Guidelines (WCAG) 2.2*. https://www.w3.org/TR/WCAG22/
6. World Wide Web Consortium, Web Accessibility Initiative. (2026). *Dialog (Modal) Pattern*. https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/
7. Nielsen, J. (1994/2024). *10 usability heuristics for user interface design*. Nielsen Norman Group. https://www.nngroup.com/articles/ten-usability-heuristics/
8. Universidad de Colima. (2024). *Acuerdo No. 23 de 2024: Lineamientos para el uso de Inteligencia Artificial Generativa*.
Tipo: Requiere de Recurso: Requiere de Identificadores:
Facultad de Telemática, Universidad de Colima —
21/09/2026 00:00
Clasificación (Taxón):
Descripción:
Recurso de educación superior enfocado en el uso aplicado de CSS para transformar la presentación de una página HTML. Aborda selectores, propiedades, color, contraste, tipografía, modelo de caja, diseño adaptable, accesibilidad y organización mantenible.
Palabras clave:
CSS, desarrollo web, hojas de estilo, selectores, color, contraste, tipografía, box model, responsive design, accesibilidad, currículum web
