Cuestionario sobre Diseño Web y Accesibilidad

AI✦

¿Qué tipos de datos son propios de Sass y no vienen de CSS?. Mapas, booleanos y null. Colores y listas. Píxeles y porcentajes. Números y strings.

El principio Gestalt «Prägnanz» corresponde a... Simplicidad. Semejanza. Figura y fondo. Continuidad.

¿Qué porcentaje de carritos de compra online se abandonan, según los estudios citados?. 50%. 69 %. 25 %. 75%.

Con .error--serious { @extend .error; border-width: 3px; }, el CSS generado... Da un error de compilación. Copia los estilos de .error dentro de .error--serious. Agrupa los selectores: .error, .error--serious { ... }. Borra .error.

Una web cumple todos los criterios A y AA, pero le falta uno AAA. ¿Qué nivel de conformidad tiene?. AAA. Ninguno. A. AA.

Un selector placeholder (%nombre) en SASS... Solo aparece en el CSS si se extiende con @extend. Sirve para importar archivos. Siempre aparece en el CSS. Es una variable de color.

¿Qué texto de botón es más adecuado según «usa un lenguaje claro»?. Submit. Enviar. Enviar mensaje. OK.

Photopea imita a Photoshop para que sus usuarios no necesiten formación. ¿Qué cualidad ilustra?. Útil. Deseable. Comprensible. Atractiva.

¿Qué herramienta de pruebas de accesibilidad es una biblioteca de JavaScript que se integra en flujos de pruebas?. axe-core. TAW. Pa11y. WAVE.

¿Cómo se inserta el resultado de una expresión en un selector o un string (interpolación)?. {{ }}. %{ }. #{ }. ${ }.

¿Qué indica un guion bajo al principio del nombre de un archivo, como _code.scss?. Que es un archivo privado de Bootstrap. Que está obsoleto. Que es un mixin. Que es un partial: se importa y no se compila por sí solo.

En la tarea del dossier, ¿qué criterio de nivel A se comprueba navegando solo con Tab, Enter y las flechas?. 1.1.1 Contenido no textual. 2.1.1 Teclado. 3.1.1 Idioma. 1.4.1 Uso del color.

En un carrusel de Bootstrap, ¿qué hace data-bs-ride="carousel"?. Marca la imagen activa. Inicia el carrusel automáticamente. Oculta los controles. Hace las imágenes responsive.

Si la ventana mide 1200 px de ancho, ¿cuánto son 10vw?. 100 px. 120 px. 10 px. 1200 px.

En un bucle @for de Sass, ¿qué diferencia hay entre «to» y «through»?. «to» excluye el valor final; «through» lo incluye. Ninguna. «to» lo incluye; «through» lo excluye. «through» solo cuenta hacia atrás.

En Bootstrap, una columna con la clase col-4 ocupa... 4/12 (un tercio) del ancho de la fila. 4 filas. 4 píxeles. El 4% del ancho.

Con grid-template-columns: 1fr 2fr 1fr... Cada columna mide 1, 2 y 1 píxeles. La columna central mide el doble que cada lateral. Hay 4 columnas iguales. Se crean 3 filas.

¿Qué ventaja tiene @import en Sass frente a @import en CSS?. Obliga a usar rutas con \ en Windows. Solo se puede usar una vez por archivo. Solo importa imágenes. Se resuelve en compilación, sin una petición HTTP por cada archivo.

¿Qué pareja de directivas sirve para definir y usar estilos reutilizables (mixins)?. @extend / %. @import / @use. @function / @return. @mixin / @include.

¿Qué diferencia a CSS Grid de Flexbox?. Flexbox es bidimensional y Grid unidimensional. Grid es bidimensional (filas y columnas); Flexbox trabaja en un solo eje. Grid solo funciona en móviles. Grid necesita JavaScript.

¿Cuál de estos NO es un elemento conceptual del diseño?. Plano. Punto. Volumen. Textura.

¿Cuál es un inconveniente de usar 100vw?. Se acumula al anidar. Depende de la fuente del padre. Puede provocar scroll horizontal, porque incluye la barra de desplazamiento. No funciona en escritorio.

¿Cuál de estos ejemplos sí se considera aplicación web, según los apuntes?. Un folleto en PDF. Un prototipo en papel. Una página estática en HTML y CSS. WordPress o Drupal.

Gmail permite deshacer el borrado de un mensaje durante unos segundos. ¿Qué principio aplica?. Los usuarios cometen errores. Anticípate al usuario. Los usuarios pueden esperar. Los usuarios pueden aprender.

@media only screen and (max-width: 768px) aplica los estilos cuando... La altura es menor que 768 px. El ancho es igual o menor que 768 px, solo en pantallas. El ancho es mayor que 768 px. Se imprime la página.

¿Qué clase de posicionamiento del navbar requiere añadir padding-top al body?. .fixed-top. .fixed-bottom. .sticky-top. .ms-auto.

Si una imagen es un enlace, su texto alternativo debe... Repetir el nombre del archivo. Decir «imagen». Describir el destino del enlace. Estar vacío.

Con `<div class="col order-2 order-md-1">A</div><div class="col order-1 order-md-2">B</div>`, en pantallas pequeñas... Aparecen superpuestas. A aparece antes que B. B aparece antes que A. Ambas se ocultan.

El objetivo principal de una landing page es... Mostrar el mapa del sitio. Identificar al propietario del sitio. Alojar el blog de la empresa. Convertir a los visitantes en leads.

Sobre la cabecera (header), es correcto que... Puede no aparecer en todas las páginas, pero siempre debe estar en la de inicio. Es obligatoria en todas las páginas. Contiene los créditos y la licencia. Solo aparece en las páginas secundarias.

El ratio de conversión de una web se calcula como... Tiempo medio de sesión × 100. Visitas totales / páginas × 100. Compras / productos. Usuarios que realizan la acción / usuarios únicos × 100.

En el diseño centrado en el usuario (HCD), ¿qué técnica se usa en el paso 03, la generación de ideas?. Nota de prensa. Digital persona. Wireframe. Brainstorming anónimo.

¿Cómo se resuelve normalmente el «elemento de regreso a la portada»?. Con un enlace en el footer. Con el botón «atrás» del navegador. Con el mapa del sitio. Con un enlace en el logotipo, arriba a la izquierda.

En el orden de prioridad de operadores en Sass, ¿qué se evalúa antes?. + antes que *. or antes que and. == antes que *. and antes que or.

¿Qué meta etiqueta es imprescindible para que Bootstrap y el responsive funcionen bien en móviles?. <meta http-equiv="refresh">. <meta charset="UTF-8">. <meta name="viewport" content="width=device-width, initial-scale=1">. <meta name="description">.

En la regla 60-30-10, el 10% de la superficie corresponde al color... Dominante. Neutro. De acento. Secundario.

Según los apuntes, la experiencia de usuario es... El código HTML semántico. La alegría, satisfacción o frustración que siente el usuario tras usar el producto. El aspecto visual de la web. La velocidad del servidor.

¿Cuál NO es una característica de una buena nota de prensa?. Sencilla. Técnica y detallada. Concisa. Convincente.

¿Qué elemento de interacción es excluyente (solo se puede marcar una opción del grupo)?. Botón. Casillas de verificación. Áreas de texto. Botones de opción.

Que el usuario entienda como completo un icono minimalista de trazos incompletos se explica por el principio de... Semejanza. Figura y fondo. Cierre. Proximidad.

¿Qué hace la clase navbar-expand-lg?. Colapsa el menú en pantallas menores que «large». Fija el menú arriba. Pone el menú en oscuro. Hace el menú más grande.

¿Qué fue lo primero que se subió a Internet como fotografía (1992)?. El logo del CERN. Un grupo de música llamado Les Horribles Cernettes. Una foto de Tim Berners-Lee. El primer servidor web.

Los elementos prácticos del diseño son: Punto, línea y plano. Representación, significado y función. Dirección, posición y espacio. Forma, medida y color.

El mapa de navegación de un sitio se compara con... Una guía de estilo. Un prototipo. La portada de un libro. El índice de contenidos de un libro.

¿Qué atributo alt debe llevar una imagen puramente decorativa?. alt="" (vacío). alt="imagen". El destino del enlace. Una descripción detallada.

¿Cuál es la estructura de mapa web más común?. Lineal. Jerárquica. Lineal jerárquica. Reticular.

Según la psicología del color, ¿qué color estimula el apetito y lo usan las cadenas de comida rápida?. Verde. Morado. Azul. Rojo.

La propiedad del color que define su intensidad y varía según su nivel de gris es... El matiz. La saturación. El brillo. El tono.

La «gravedad», una sensación psicológica y no visual, pertenece a los elementos... Visuales. Prácticos. De relación. Conceptuales.

Entre los encabezados .display-1 a .display-6 de Bootstrap, el más grande es... display-3. Todos son iguales. .display-6. .display-1.

En las instituciones públicas, ¿cada cuánto como máximo debe hacerse una auditoría de accesibilidad?. Cada 5 años. Cada 3 años. Cada 2 años. Cada año.

Con el enfoque Mobile First, las media queries para pantallas más grandes usan... orientation: landscape. min-width, de menor a mayor. max-width, de mayor a menor. max-height.

Los mapas de Sass son inmutables. Esto significa que map-merge()... Modifica el mapa original. Borra el mapa. Solo funciona con listas. Devuelve un mapa nuevo sin cambiar el original.