Diseño de Interfaces Web

Repaso del libro de Diseño de Interfaces Web. No son preguntas que ya vienen escritas en el libro, sin nuevas. Recomiendo complementarlo con los otros test de esta asignatura que he creado, donde encontrarás todas las preguntas que han salido en las PACs del curso. Si buscas por autor, Estudiante Aplicado. Cualquier error que detectes, refléjalo en un comentario para poder solventarlo. Muchas gracias. .

Tema 1: Planificación de Interfaces Gráficas. Corresponde con la RA 1 de la asignatura (Tema 1 del libro).

Qué influye en la percepción visual de una interfaz?. El color y la tipografía. Solo el contenido textual. La cantidad de imágenes en la página. La velocidad de carga.

¿Qué es un mapa de navegación?. Un esquema que representa la estructura de un sitio web. Un menú desplegable en una página web. Un documento de texto con enlaces. Un código CSS para organizar el diseño.

¿Cuál de los siguientes no es un elemento clave en la planificación de interfaces gráficas?. Tipografía. Interacción persona-ordenador. Velocidad del servidor. Uso de colores.

¿Cuál es el objetivo principal de una guía de estilo?. Crear imágenes llamativas. Mantener coherencia en el diseño. Aumentar la velocidad del sitio web. Optimizar el rendimiento del servidor.

¿Qué componente NO forma parte de una interfaz web?. Formularios. Tablas. Servidores de bases de datos. Botones.

¿Qué lenguaje se usa comúnmente para crear la estructura de una página web?. JavaScript. HTML. SQL. Python.

¿Cuál es una ventaja de utilizar prototipos en diseño web?. Reducen el costo del hosting. Permiten probar la interfaz antes del desarrollo completo. Aumentan la velocidad del servidor. Mejoran la seguridad del sitio.

¿Qué aspecto no es fundamental en la percepción visual de una interfaz?. Color. Tipografía. Peso del código fuente. Iconografía.

¿Para qué se utilizan los wireframes en diseño de interfaces?. Para definir la estructura de una página web. Para mejorar el rendimiento del servidor. Para optimizar bases de datos. Para reducir el uso de memoria RAM.

¿Qué técnica ayuda a organizar los elementos en una interfaz de manera visualmente equilibrada?. Grid Layout. SQL Query. Protocolo HTTP. Algoritmos de búsqueda.

¿Cuál de los siguientes no es un factor de usabilidad en el diseño de interfaces?. Navegabilidad. Accesibilidad. Cantidad de código JavaScript. Coherencia visual.

¿Qué es la "jerarquía visual" en el diseño de interfaces?. La organización de elementos según su importancia. La cantidad de imágenes usadas en la web. La lista de tareas de un diseñador. Un tipo de animación web.

¿Cuál es la ventaja principal de usar iconos en una interfaz?. Reducen el consumo de datos. Facilitan la comprensión visual. Evitan el uso de imágenes. Aumentan la velocidad del servidor.

¿Cuál de las siguientes opciones representa un buen uso del color en interfaces?. Usar demasiados colores brillantes. Utilizar contrastes adecuados para mejorar la lectura. No usar colores, solo escala de grises. Cambiar los colores en cada página.

¿Qué importancia tiene la tipografía en una interfaz gráfica?. No influye en la experiencia del usuario. Es clave para la legibilidad y jerarquización del contenido. Solo es relevante para diseñadores gráficos. Se usa solo para títulos, no para el cuerpo de texto.

TEMA 2: USO DE ESTILOS (CSS). Corresponde con la RA2 de la asignatura (Tema 2 del libro).

¿Cuál es la función principal de CSS?. Dar estructura al contenido. Definir el aspecto visual de la web. Administrar bases de datos. Mejorar la seguridad del sitio.

¿Qué significa CSS?. Creative Style System. Cascading Style Sheets. Computer Styled Scripts. Code Structure System.

¿Cómo se aplica un estilo en línea en HTML?. Usando una hoja de estilos externa. Dentro de un archivo JavaScript. Con el atributo style dentro de una etiqueta HTML. Mediante una función en PHP.

¿Qué tipo de selectores existen en CSS?. Etiquetas, clases e identificadores. Variables y funciones. Bucle for y while. Estructuras condicionales.

¿Cómo se vincula una hoja de estilos externa en HTML?. <link rel="stylesheet" href="styles.css">. <css>styles.css</css>. <style>styles.css</style>. <script src="styles.css"></script>.

¿Cuál es la ventaja principal de usar clases en CSS?. Permiten aplicar estilos a múltiples elementos. Reducen el código JavaScript. Evitan el uso de imágenes en la web. Aumentan la velocidad de conexión.

¿Cuál es la diferencia entre id y class en CSS?. id se usa para elementos únicos y class para múltiples elementos. id y class son exactamente lo mismo. id es más rápido que class. class solo se usa en HTML y id solo en CSS.

¿Qué propiedad CSS controla el tamaño del texto?. text-size. font-size. text-style. font-weight.

¿Cuál es la propiedad CSS para cambiar el color de fondo de un elemento?. color. background-color. bg-color. background-style.

¿Cómo se especifica un margen de 10 píxeles en CSS?. margin: 10;. margin-size: 10px;. margin: 10px;. spacing: 10px;.

¿Cuál de las siguientes propiedades se usa para hacer que un elemento tenga una sombra?. box-shadow. shadow-effect. element-shadow. background-shadow.

¿Qué valor de position en CSS permite que un elemento quede fijo en la pantalla al hacer scroll?. absolute. static. fixed. relative.

¿Cuál de las siguientes opciones define correctamente un borde sólido de 2 píxeles de grosor en CSS?. border: solid 2px;. border: 2px solid;. border-style: 2px solid;. border-width: solid 2px;.

¿Qué unidad de medida en CSS se ajusta automáticamente según el tamaño de la pantalla?. px. em. rem. %.

¿Qué propiedad se usa para aplicar transparencia en CSS?. opacity. transparent. alpha. transparency.

TEMA 3: PREPARACIÓN E IMPLANTACIÓN DE CONTENIDO MULTIMEDIA. Corresponde con la RA 3 de la asignatura (Tema 3 del libro).

¿Cuál es el formato de imagen más recomendado para fotografías en la web?. PNG. JPG. GIF. BMP.

¿Qué tipo de imagen es más adecuado para gráficos con transparencia?. JPEG. BMP. PNG. SVG.

¿Qué formato de imagen utiliza gráficos vectoriales en la web?. SVG. PNG. GIF. JPG.

¿Cuál de los siguientes es un formato de audio utilizado en la web?. MP3. AVI. PNG. GIF.

¿Cuál de los siguientes formatos de vídeo es compatible con HTML5?. MP4. GIF. BMP. SVG.

¿Qué software es comúnmente usado para la edición de imágenes en la web?. Adobe Photoshop. Microsoft Word. MySQL. Visual Studio Code.

¿Qué significa optimizar una imagen para la web?. Reducir su tamaño sin perder demasiada calidad. Cambiarle el formato a BMP. Aumentar la resolución a 8K. Convertirla en un archivo de texto.

¿Qué herramienta se puede usar para comprimir imágenes sin perder calidad?. TinyPNG. Windows Paint. Notepad. VLC Media Player.

¿Qué factor se debe considerar al elegir un formato de imagen para la web?. Calidad y peso del archivo. Cantidad de texto en la imagen. La cantidad de colores en el monitor del usuario. La fecha de creación del archivo.

¿Qué es la propiedad intelectual en el uso de imágenes en la web?. Un conjunto de derechos sobre creaciones artísticas y digitales. Un software para editar imágenes. Un permiso para copiar cualquier imagen. Un tipo de formato de imagen.

¿Qué licencia permite el uso de imágenes sin restricciones comerciales?. Creative Commons CC0. Copyright. Patente de software. Derechos reservados.

¿Qué herramienta se usa para editar videos en la web?. Adobe Premiere Pro. Excel. WordPress. PowerPoint.

¿Cuál es un software de código abierto para manipular imágenes?. GIMP. Photoshop. Notepad++. After Effects.

¿Cómo se puede mejorar la carga de imágenes en una página web?. Usando formatos comprimidos como WebP. Subiendo imágenes de alta resolución sin compresión. Utilizando únicamente BMP. Eliminando las imágenes del sitio.

¿Qué es un sprite en diseño web?. Una imagen que contiene múltiples gráficos en una sola. Un software de edición de vídeo. Un formato de imagen sin compresión. Una técnica de optimización de CSS.

TEMA 4: INTEGRACIÓN DE CONTENIDO INTERACTIVO. Corresponde con la RA 4 de la asignatura (Tema 4 del libro).

¿Qué lenguaje de programación se usa comúnmente para agregar interactividad a una página web?. HTML. CSS. JavaScript. SQL.

¿Qué es una animación CSS?. Un código que optimiza el rendimiento del servidor. Una secuencia de imágenes en movimiento. Un efecto visual aplicado a elementos de una página web. Una base de datos que gestiona imágenes.

¿Cuál de los siguientes es un framework de JavaScript para interactividad web?. jQuery. WordPress. Photoshop. MySQL.

¿Qué etiqueta HTML se usa para insertar contenido multimedia interactivo?. <embed>. <form>. <table>. <meta>.

¿Cuál de estos NO es un elemento interactivo en la web?. Botones. Formularios. Texto sin formato. Menús desplegables.

¿Qué atributo de HTML permite ejecutar código JavaScript cuando un usuario hace clic en un botón?. onclick. onmouseover. onchange. onsubmit.

¿Para qué se usa la etiqueta <canvas> en HTML5?. Para dibujar gráficos dinámicos en la web. Para insertar videos. Para definir tablas. Para cargar hojas de estilo.

¿Qué API de JavaScript permite capturar eventos del teclado en una web?. KeyboardEvent. Fetch API. WebGL. LocalStorage.

¿Cómo se puede incluir un video de YouTube en una página web?. Usando la etiqueta <iframe>. Subiendo el video directamente en el servidor. Insertando un archivo ZIP. Usando la etiqueta <form>.

¿Qué es una SPA (Single Page Application)?. Un sitio web que carga todo el contenido en una sola página sin recargar. Una web que contiene múltiples páginas HTML estáticas. Un blog sin contenido multimedia. Un sitio web sin CSS.

¿Qué propiedad CSS permite aplicar transiciones de animación?. transition. display. border-style. z-index.

¿Qué herramienta permite verificar si el JavaScript de una web tiene errores?. Consola de desarrollador del navegador. Administrador de archivos. Windows Media Player. Microsoft Excel.

¿Cuál es la función de los eventos en JavaScript?. Responder a acciones del usuario, como clics o teclas presionadas. Crear bases de datos. Enviar información a un servidor. Definir colores en CSS.

¿Cuál de los siguientes ejemplos representa un código válido en JavaScript para cambiar el texto de un botón?. document.getElementById("boton").innerHTML = "Nuevo Texto";. document.getElementById("boton").innerHTML = "Nuevo Texto";. setText(boton, "Nuevo Texto");. boton.contenido = "Nuevo Texto";.

¿Qué significa AJAX en desarrollo web?. Una técnica para cargar contenido sin recargar la página. Un tipo de animación CSS. Un software de edición de imágenes. Un sistema de bases de datos.

TEMA 5: DESARROLLO DE WEBS ACCESIBLES. Corresponde con la RA 5 de la asignatura (Tema 5 del libro).

¿Qué es la accesibilidad web?. La capacidad de una web de cargar más rápido. El diseño de sitios web utilizables por personas con discapacidades. La optimización SEO de una página. La adaptación de una web a todos los navegadores.

¿Cuál es el estándar internacional para accesibilidad web?. HTML5. WCAG (Web Content Accessibility Guidelines). CSS3. API REST.

¿Qué significa el principio "Perceptible" en accesibilidad web?. Que la información y los elementos de la web deben ser presentados de manera clara. Que la web debe ser atractiva visualmente. Que solo los colores deben ser accesibles. Que las animaciones deben estar presentes en la web.

¿Cuál de estos es un ejemplo de una buena práctica de accesibilidad web?. Usar texto alternativo (alt) en imágenes. Usar solo colores llamativos. Usar únicamente imágenes para transmitir información. No permitir la navegación con el teclado.

¿Qué herramienta puede evaluar la accesibilidad de una página web?. Google Lighthouse. Microsoft Word. Photoshop. Excel.

¿Cuál de estas características es clave para una web accesible?. Tener compatibilidad con lectores de pantalla. Usar solo contenido visual sin texto. No permitir ampliación del texto. Deshabilitar los atajos de teclado.

¿Qué significa que una web debe ser "Operable" según las WCAG?. Que los usuarios pueden navegar por la web sin restricciones. Que la web debe actualizarse constantemente. Que debe usarse solo en móviles. Que debe evitar imágenes.

¿Cuál de los siguientes aspectos mejora la accesibilidad web?. Uso de un buen contraste entre texto y fondo. Uso excesivo de animaciones sin opción de detenerlas. Desactivar el zoom de la web. No usar subtítulos en los videos.

¿Qué tecnología ayuda a los usuarios con discapacidad visual a navegar por una web?. Lectores de pantalla. Cámaras de alta resolución. Bases de datos SQL. Algoritmos de inteligencia artificial.

¿Cuál es un ejemplo de una mala práctica de accesibilidad web?. No etiquetar correctamente los formularios. Usar encabezados adecuados (<h1>, <h2>, <h3>). Incluir subtítulos en los videos. Permitir la navegación con teclado.

¿Qué etiqueta HTML mejora la accesibilidad de los formularios?. <label>. <br>. <div>. <meta>.

¿Cuál de las siguientes opciones facilita la navegación a personas con movilidad reducida?. Permitir el uso de atajos de teclado. Usar botones muy pequeños. No incluir navegación por teclado. Usar solo elementos flotantes.

¿Por qué es importante que una web tenga subtítulos en los videos?. Para que personas con discapacidad auditiva puedan entender el contenido. Para que los motores de búsqueda indexen mejor el sitio. Para decorar la web. Para evitar el uso de imágenes.

¿Cuál de estos principios NO pertenece a las WCAG?. Perceptible. Operable. Inteligente. Robusto.

¿Qué debe evitarse en una web accesible?. Uso excesivo de colores sin contraste. Uso de descripciones textuales en imágenes. Permitir la navegación mediante teclado. Incluir subtítulos en videos.

TEMA 6: ADAPTACIÓN DE LA WEB PARA DISPOSITIVOS MÓVILES. Corresponde con la RA 6 de la asignatura (Tema 6 del libro).

¿Qué significa el término "responsive design" en diseño web?. Una web que se adapta a diferentes dispositivos y tamaños de pantalla. Un tipo de servidor web. Una técnica para mejorar la velocidad de carga de imágenes. Un lenguaje de programación específico para móviles.

¿Qué unidad de medida en CSS es más recomendable para diseños responsivos?. px. em. cm. mm.

¿Cuál de los siguientes elementos se usa para aplicar estilos específicos según el tamaño de la pantalla?. Media queries. Variables CSS. Funciones en JavaScript. Formularios HTML.

¿Cuál es la metaetiqueta utilizada para definir la escala en dispositivos móviles?. <meta name="viewport" content="width=device-width, initial-scale=1">. <meta charset="UTF-8">. <meta http-equiv="X-UA-Compatible" content="IE=edge">. <meta name="robots" content="index, follow">.

¿Qué significa "Mobile First" en diseño web?. Diseñar primero para dispositivos móviles y luego para pantallas más grandes. Crear una web solo para dispositivos móviles. Hacer que la web funcione solo en navegadores de escritorio. Optimizar la velocidad de carga en servidores móviles.

¿Cuál de las siguientes herramientas permite probar la adaptabilidad de una web en diferentes dispositivos?. DevTools de Google Chrome. Excel. WordPress. Windows Paint.

¿Qué técnica se usa para cargar imágenes adaptadas al tamaño de pantalla del usuario?. srcset en la etiqueta <img>. Usar solo imágenes en formato PNG. Convertir todas las imágenes a GIF. Aumentar el tamaño de las imágenes al máximo.

¿Qué formato de imagen es más eficiente para la web móvil en términos de compresión y calidad?. WebP. BMP. TIFF. PSD.

¿Cuál es una de las ventajas de utilizar iconos en lugar de texto en dispositivos móviles?. Reducen el espacio utilizado en pantalla. Hacen que la web sea más pesada. No afectan la experiencia del usuario. Son incompatibles con la mayoría de navegadores.

¿Cuál de las siguientes opciones mejora la usabilidad en móviles?. Botones grandes y fáciles de presionar. Uso excesivo de imágenes de alta resolución sin optimización. Formularios con campos muy pequeños. Deshabilitar la navegación táctil.

¿Cuál de las siguientes es una técnica recomendada para optimizar el rendimiento de una web móvil?. Usar fuentes de gran tamaño sin optimización. Evitar el uso de hojas de estilo CSS. Incluir todas las imágenes en una sola página. Usar carga diferida (lazy loading) para imágenes.

¿Qué propiedad de CSS permite ajustar el tamaño máximo de un elemento en la pantalla?. border. margin. height. max-width.

¿Qué característica de los navegadores móviles puede afectar la usabilidad de una web?. La compatibilidad con Flash. La navegación táctil. La falta de imágenes en los dispositivos. El uso obligatorio de Internet Explorer.

¿Cuál es una desventaja del uso excesivo de animaciones en dispositivos móviles?. Mejora la accesibilidad y la navegación. Reduce el uso de batería del dispositivo. Puede afectar el rendimiento y la velocidad de carga. No tiene ningún impacto en la experiencia del usuario.

¿Qué problema resuelve el uso de fuentes flexibles (rem, em, vw)?. Evita que el texto se muestre en negrita. Hace que todas las fuentes sean de un solo tamaño. Impide que se pueda cambiar el tamaño del texto. Permite que el texto se adapte al tamaño de la pantalla.