Tecnología y Digitalización · 3° ESO · Creación de Contenidos y Diseño Web · 2o Trimestre

Estilos Visuales con CSS: Selectores y Propiedades

Los alumnos aplican estilos visuales a elementos HTML utilizando CSS, comprendiendo selectores y propiedades básicas.

• Competencias Clave LOMLOE
• LOMLOE: ESO - Creación de contenidos digitales
• LOMLOE: ESO - Comunicación y colaboración

Sobre este tema

Disenar bien no es hacer algo bonito: es hacer algo que funciona para las personas que lo van a usar. Este tema introduce a los alumnos de 3º de ESO en los principios del diseno centrado en el usuario, la experiencia de usuario y la interfaz de usuario, abordando como las decisiones de diseno afectan directamente a la inclusion o exclusion de personas con diferentes capacidades, contextos y niveles de experiencia tecnologica.

El marco de la LOMLOE trabaja aqui la empatia como competencia transversal. Los alumnos aprenden a ponerse en el lugar de usuarios con necesidades distintas a las suyas: personas mayores con menor familiaridad tecnologica, personas con discapacidad visual que usan lectores de pantalla, o usuarios en contextos de baja conectividad. Disenar con inclusion desde el principio es siempre mas eficiente que adaptar despues.

El diseno UX es un campo que se aprende mejor haciendo y observando. Las pruebas de usabilidad con usuarios reales, aunque sean companeros de clase, producen aprendizajes que ningun estudio teorico puede replicar. Ver a alguien bloquearse con un diseno propio es la correccion pedagogica mas efectiva que existe.

Preguntas clave

1. ¿Cómo influye el diseño responsivo en el acceso democrático a la información?
2. ¿Qué ventajas ofrece el uso de hojas de estilo externas frente a estilos en línea?
3. ¿Cómo resolveríais conflictos de estilos cuando se aplican múltiples reglas CSS?

Objetivos de Aprendizaje

• Clasificar selectores CSS (de etiqueta, de clase, de ID) según su especificidad y aplicabilidad a elementos HTML.
• Aplicar propiedades CSS comunes (color, font-size, background-color, margin, padding) para modificar la apariencia de elementos HTML específicos.
• Comparar la efectividad de los estilos en línea frente a las hojas de estilo externas para la organización y mantenimiento de un sitio web.
• Crear una hoja de estilos CSS que modifique la presentación de una página HTML simple, demostrando el uso de selectores y propiedades básicas.
• Analizar cómo la cascada y la especificidad de CSS resuelven conflictos cuando se aplican múltiples reglas a un mismo elemento.

Antes de Empezar

Estructura Básica de Documentos HTML

Por qué: Es fundamental que los alumnos comprendan la estructura de las etiquetas HTML (elementos, atributos, jerarquía) para poder aplicarles estilos CSS.

Introducción a la Web y sus Componentes

Por qué: Los alumnos deben tener una noción general de qué es una página web y cómo se compone para entender el propósito de CSS en el diseño.

Vocabulario Clave

Selector CSS	Patrón que selecciona los elementos HTML a los que se aplicarán los estilos. Puede ser el nombre de una etiqueta, una clase o un ID.
Propiedad CSS	Característica de un elemento HTML que se desea modificar, como el color del texto, el tamaño de la fuente o el color de fondo.
Valor CSS	La configuración específica que se asigna a una propiedad CSS. Por ejemplo, 'blue' es un valor para la propiedad 'color'.
Hoja de Estilos Externa	Un archivo .css separado que contiene todas las reglas de estilo para una página web, enlazado desde el HTML.
Especificidad CSS	Reglas que determinan qué declaración de estilo se aplicará a un elemento cuando hay múltiples declaraciones en conflicto.

Atención a estas ideas erróneas

Idea errónea común

Creer que una interfaz bonita es automaticamente usable.

Qué enseñar en su lugar

La estetica y la usabilidad son dimensiones distintas. Una interfaz puede ser visualmente atractiva pero confusa en su organizacion, con llamadas a la accion poco claras o flujos de navegacion contradictorios. Las pruebas de usabilidad con usuarios reales son la unica forma de verificar si una interfaz funciona bien para su publico objetivo.

Idea errónea común

Pensar que la accesibilidad web solo beneficia a personas con discapacidad.

Qué enseñar en su lugar

La accesibilidad beneficia a todos. El subtitulado mejora la comprension en entornos ruidosos. El alto contraste ayuda en pantallas bajo el sol. Los textos alternativos en imagenes son utiles cuando la conexion es lenta. Disenar con accesibilidad es disenar con calidad para el mayor numero posible de contextos de uso.

Idea errónea común

Asumir que los usuarios leen el contenido de una pagina web linealmente.

Qué enseñar en su lugar

Los estudios de seguimiento ocular muestran que los usuarios escanean las paginas en patrones en F o Z, buscando titulos, palabras clave y elementos visuales. Disenar para el escaneo, con una jerarquia visual clara y contenido importante al principio, es mas efectivo que asumir una lectura lineal completa.

Ideas de aprendizaje activo

Prueba de usabilidad: Observa sin intervenir

Los alumnos disenan una tarea corta para una interfaz que han creado o analizado. Un companero intenta completarla mientras piensa en voz alta. El disenador solo observa, sin ayudar ni explicar. Las grabaciones o notas de los bloqueos se analizan despues para identificar problemas de usabilidad.

50 min·Parejas

Prototipado rapido: Del boceto al wireframe

Con papel y lapiz, los grupos disenan en 15 minutos la pantalla principal de una app educativa. Luego intercambian bocetos y evaluan la claridad de la jerarquia visual, la ubicacion de los elementos principales y la accesibilidad del flujo de navegacion.

45 min·Grupos pequeños

Simulacion de accesibilidad: Navega sin ver

Usando solo el teclado y el lector de pantalla del sistema operativo, los alumnos intentan completar una tarea en una pagina web real. La experiencia directa de las barreras de accesibilidad es mucho mas persuasiva que cualquier definicion de WCAG.

40 min·Parejas

Estudio de caso: ¿Por que fracasan estas interfaces?

Se presentan capturas de pantalla de interfaces con problemas documentados de usabilidad. Los grupos identifican los principios de diseno violados, proponen mejoras concretas y las justifican aplicando heuristicas de usabilidad como las de Nielsen.

50 min·Grupos pequeños

Conexiones con el Mundo Real

• Los diseñadores web de agencias como 'The Creative Company' utilizan selectores y propiedades CSS para dar vida a las marcas de sus clientes, asegurando que los sitios web sean visualmente atractivos y funcionales en diferentes dispositivos.
• Los desarrolladores front-end en plataformas de comercio electrónico como Amazon o Zara aplican CSS para organizar el diseño de los productos, gestionar la tipografía y asegurar una experiencia de usuario coherente y fácil de navegar.
• Los creadores de contenido en plataformas de blogs como WordPress o Medium emplean CSS para personalizar la apariencia de sus artículos, ajustando fuentes, espaciados y colores para mejorar la legibilidad y el atractivo visual para sus lectores.

Ideas de Evaluación

Boleto de Salida

Entrega a cada alumno una pequeña página HTML con algunos elementos (títulos, párrafos, listas). Pide que escriban una regla CSS en una hoja aparte que cambie el color de fondo de todos los párrafos a verde y el tamaño de fuente de todos los títulos a 24px.

Verificación Rápida

Muestra en pantalla un fragmento de código HTML y CSS con un conflicto de estilos (por ejemplo, dos colores diferentes aplicados al mismo elemento). Pregunta a los alumnos: '¿Qué color se mostrará finalmente y por qué, basándote en la especificidad o el orden?'

Evaluación entre Iguales

Los alumnos trabajan en parejas. Un alumno crea una hoja de estilos simple para una página HTML dada. El otro alumno revisa el código CSS, verificando si los selectores son apropiados y si las propiedades aplicadas logran el efecto deseado. Luego, intercambian roles.

Preguntas frecuentes

¿Que diferencia hay entre UX y UI?

La UI, o interfaz de usuario, es todo lo que el usuario ve y con lo que interactua directamente: botones, menus, formularios, colores y tipografia. La UX, o experiencia de usuario, es la percepcion global que tiene el usuario durante y despues de esa interaccion: si le resulto facil, agradable, rapida y satisfactoria. Una buena UI contribuye a una buena UX, pero no la garantiza.

¿Que son las heuristicas de usabilidad de Nielsen?

Son diez principios generales del diseno de interfaces identificados por Jakob Nielsen, como la visibilidad del estado del sistema, el control del usuario, la consistencia y los estandares, la prevencion de errores y la flexibilidad de uso. Sirven como lista de comprobacion practica para evaluar la calidad de una interfaz sin necesitar usuarios de prueba.

¿Como se testea si un diseno es realmente facil de usar?

El metodo mas fiable es la prueba de usabilidad con usuarios reales. Se define una tarea concreta, se observa como el usuario la completa sin ayuda y se registran los puntos de confusion o error. Con cinco usuarios se detectan mas del 85 por ciento de los problemas graves de usabilidad, segun la investigacion de Nielsen.

¿Como mejora el aprendizaje activo el diseno de interfaces?

El diseno no se puede aprender solo leyendo principios. Cuando los alumnos prototipan, observan a companeros usando sus creaciones y reciben retroalimentacion directa sobre los problemas, desarrollan la empatia de diseno y la capacidad critica que ninguna lectura puede generar. Las misiones de diseno activo convierten la frustracion del usuario en el mejor maestro.