UT5 - Usabilidad y Diseño Web Adaptativo
![]() |
![]() |
![]() |
Título del Test:![]() UT5 - Usabilidad y Diseño Web Adaptativo Descripción: Test ut5 usabilidad y diseño web adaptativo |




Comentarios |
---|
NO HAY REGISTROS |
Rellena los espacios en blanco para completar una estructura HTML que utiliza Bootstrap. <!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Mi página Bootstrap</title> <link rel="stylesheet" href="_____1____"> <!-- Enlace a Bootstrap --> </head> <body> <div class="container"> <div class="row"> <div class="____2____"> <!-- Clase Bootstrap para dividir en 6 columnas --> <h2>Columna 1</h2> <p>Contenido de la primera columna</p> </div> <div class="____3____"> <!-- Clase Bootstrap para dividir en 6 columnas --> <h2>Columna 2</h2> <p>Contenido de la segunda columna</p> </div> </div> </div> <script src="_____4____"></script> <!-- Enlace al JavaScript de Bootstrap --> </body> </html>. 1. 2. 3. 4. Completa el siguiente código CSS para que un div tenga un fondo azul en pantallas grandes (> 992px) y rojo en pantallas pequeñas (< 576px), por defecto el fondo sera blanco. .mi-clase { background-color: ___1____; } @media (max-width: 576px) { .mi-clase { background-color: ___2____; } } @media (min-width: 992px) { .mi-clase { background-color: ___3____; } }. 1. 2. 3. Completa el siguiente código para que se genere un botón verde de Bootstrap que al hacer clic muestre un mensaje en consola. <button class="________ ________" onclick="miFuncion()">Presiona aquí</button> <script> function miFuncion() { console.log("¡Botón presionado!"); } </script>. Completa el siguiente código para que una tabla sea completamente responsiva usando Bootstrap. <div class="________"> <table class="table"> <thead> <tr> <th>Nombre</th> <th>Edad</th> <th>Correo</th> </tr> </thead> <tbody> <tr> <td>Juan Pérez</td> <td>25</td> <td>juan@example.com</td> </tr> <tr> <td>María López</td> <td>30</td> <td>maria@example.com</td> </tr> </tbody> </table> </div>. Relaciona los espacios en blanco para completar un menú desplegable con Bootstrap. <div class="dropdown"> <button class="btn btn-primary ________" type="button" data-bs-toggle="dropdown"> Menú </button> <ul class="________"> <li><a class="dropdown-item" href="#">Opción 1</a></li> <li><a class="dropdown-item" href="#">Opción 2</a></li> <li><a class="dropdown-item" href="#">Opción 3</a></li> </ul> </div>. 1. 2. ¿Qué es la usabilidad en el diseño web?. La velocidad de carga de un sitio web. La facilidad con la que los usuarios pueden interactuar con un sitio web. El uso de imágenes atractivas en una web. La cantidad de contenido que tiene una web. ¿Cuál de los siguientes es un estándar relacionado con la usabilidad?. ISO/IEC 9126. IEEE 802.11. CSS3. HTTP/2. Según la norma ISO, la usabilidad se puede medir a través de dos tipos de parámetros: ¿Cuáles son?. Estéticos y técnicos. Objetivos y subjetivos. Físicos y virtuales. Simples y compuestos. ¿Cuál de los siguientes NO es un framework para el diseño web adaptativo?. Bootstrap. Foundation. HTML5 Boilerplate. PHP. En Bootstrap, ¿cuántas columnas tiene el sistema de rejilla?. 6. 8. 12. 16. ¿Qué clase de Bootstrap se usa para ocultar un elemento en todas las pantallas?. .d-none. .d-hide. .hidden-xs. .hide-all. ¿Qué versión de Bootstrap es la más reciente (en Febrero de 2025)?. Bootstrap 3.3. Bootstrap 4.1.2. Bootstrap 5.3.3. Bootstrap 6. ¿Cuál de las siguientes opciones es una media query válida en CSS?. @responsive (max-width: 600px) {}. @media (max-width: 600px) {}. @screen-size (600px max) {}. @adapt (max-width: 600px) {}. ¿Qué etiqueta se usa en Bootstrap para crear un contenedor que ocupe todo el ancho de la pantalla?. <div class="container">. <div class="container-fluid">. <div class="content">. <div class="fluid-container">. ¿Qué clase de Bootstrap se usa para ocultar un elemento en pantallas pequeñas y mostrarlo en pantallas grandes?. .d-none d-lg-block. .hidden-xs. .hide-all. .d-hide. ¿Cuál es la principal diferencia entre la evaluación heurística y el test con usuarios?. La evaluación heurística la realizan expertos y el test con usuarios lo hacen personas reales. Solo la evaluación heurística detecta errores en el diseño web. El test con usuarios es un proceso teórico sin pruebas prácticas. Ambos métodos siempre se aplican después del lanzamiento del sitio web. ¿Cuál de las siguientes afirmaciones sobre los estándares de usabilidad es incorrecta?. ISO 13407 se enfoca en el Diseño Centrado en el Usuario. ISO/IEC 9126 mide la calidad del software. La norma UNE 139803 se relaciona con accesibilidad web. Bootstrap es una norma internacional de usabilidad. Una empresa necesita crear un sitio web accesible para personas con discapacidades visuales y motoras. ¿Qué principios de usabilidad aplicarías y qué herramientas recomendarías para mejorar la accesibilidad?. Usar colores brillantes y efectos de animación avanzados para captar la atención de los usuarios. Aplicar WCAG, usar contraste alto, navegación por teclado y herramientas como ARIA y lectores de pantalla. Eliminar textos largos y solo usar imágenes sin descripciones para simplificar la navegación. Diseñar el sitio exclusivamente para usuarios con visión normal y sin discapacidades motoras, priorizando la estética. ¿Qué es jQuery UI?. Un lenguaje de programación para desarrollo web. Una librería de JavaScript que añade componentes de interfaz de usuario a jQuery. Un framework CSS para diseño responsivo. Un gestor de bases de datos para páginas web. ¿Cuál de las siguientes opciones NO es un componente de interacción de jQuery UI?. Draggable. Sortable. Toggle. Resizable. ¿Qué método se recomienda para incluir jQuery UI en un proyecto web?. Descargar la librería manualmente y alojarla localmente. Utilizar un CDN externo. Ambas opciones son válidas. Solo se puede usar mediante descarga local. ¿Qué herramienta de jQuery UI permite personalizar los temas visuales de los componentes?. Bootstrap Theme Builder. ThemeRoller. CSS Customizer. UI Designer Pro. ¿Qué código en jQuery UI se utilizaría para hacer que un elemento sea "arrastrable"?. $("#miElemento").draggable();. $("#miElemento").sortable();. $("#miElemento").drop();. $("#miElemento").moveable();. ¿Qué fragmento de código en jQuery UI permite implementar un menú desplegable (menu)? <script> $(document).ready(function() { $("#miMenu").________(); }); </script>. dropdown. menu. select. accordion. ¿Cómo hacer que un div sea redimensionable con jQuery UI? <script> $(document).ready(function() { $("#miCaja").________(); }); </script>. draggable. resizable. scalable. stretchable. Completa el código para que el elemento con ID caja pueda moverse libremente por la pantalla con jQuery UI. <script> $(document).ready(function() { $("#caja").________(); }); </script>. moveable. draggable. sortable. droppable. ¿Cuánto ocupa la descarga completa de la librería de JQuery-UI?. Aproximadamente 1 MB. Aproximadamente 5 MB. Aproximadamente 10 MB. Menos de 500 KB. Relaciona cada norma o estándar con su descripción correspondiente. ISO/IEC 9126. ISO/DIS 9241-11. ISO 13407. ISO 9241/151. UNE 139803:2004. UNE 139803:2012. Relaciona cada tipo de pantalla con su prefijo de clase correspondiente y el ancho del contenedor en el sistema de rejilla de Bootstrap. Tamaño extra pequeño. Tamaño pequeño. Tamaño medio. Tamaño grande. Tamaño extra grande. Relaciona el tamaño de pantalla con las clases correspondientes para mostrar y ocultar elementos en Bootstrap. Solo para tamaños extra pequeños. Solo para tamaños pequeños (sm). Solo para tamaños medianos (md). Solo para tamaños grandes (lg). Solo para tamaños extra grandes (xl). |