Notas del curso Interfaces web responsive con HTML5, Flexbox, CSS Grid y Bootstrap 5 del Clúster TIC de Galicia.

• Horas: 45
• Fecha Inicio: 15/02/2024
• Fecha Fin: 25/04/2024

En la actualidad es impensable crear un sitio o una aplicación web y que no esté adaptada para todo tipo de dispositivos: móviles, tabletas, escritorio, monitores gigantes… Las técnicas de Responsive Web Design te permiten conseguirlo, y debes dominarlas si diseñas páginas o aplicaciones web. Con este curso aprenderás todo lo que debes saber para maquetar páginas y aplicaciones usando técnicas modernas de HTML+CSS, y también utilizando el framework CSS más importante: Bootstrap en su última versión, la 5.

Estos son los principales temas que aprenderás en este completo curso:

• Fundamentos de RWD.
• Diseño mobile-first.
• Meta-configuración del viewport.
• Media-queries.
• Feature queries.
• Unidades de medida (em, rem, vh vw…), su importancia y sus usos.
• Distribución de contenidos flexible.
• Creación de cuadrículas flexibles propias.
• Uso de cuadrículas de frameworks CSS: Pure.css y Bootstrap 5.
• Maquetación con Flexbox.
• Maquetación con CSS Grid.
• Maquetación combinando Flexbox y Grid.
• Tipografía adaptable.
• Imágenes adaptables y fluidas.
• Estructuración de contenido con Bootstrap 5: paneles, tablas, desplegables…
• Diseño de elementos de navegación con Bootstrap 5: barras de navegación, pestañas, migas de pan…
• Diseño de formularios con Bootstrap 5.
• Clases de utilidad con Bootstrap 5: visibilidad, notificaciones, elementos flotantes, indicadores, barras de progreso, tooltips, sliders, paneles escamoteables…
• Bootstrap Icons.
• Desarrollo RWD eficiente.

• Módulo 1: Introducción a Responsive Web Design
• Módulo 2: Introducción a la metaconfiguración
• Módulo 3: Distribución de contenidos flexible
• Módulo 4: Maquetación con características modernas de HTML5
• Módulo 5: Tipografía adaptable
• Módulo 6: Imágenes adaptables
• Módulo 7: Otros servicios de Bootstrap
• Módulo 8: Desarrollo RWD eficiente
• Módulo 9: PRÁCTICA FINAL DEL CURSO

¿Bootstrap sigue el enfoque mobile first​​​​​​​?

• Verdadero (correcta)
• Falso

Completa la siguiente configuración con la rejilla de Bootstrap para obtener un contenedor que ocupe todo el ancho en pantallas pequeñas, dos tercios en pantallas de tamaño medio y la mitad en pantallas grandes.

• <div class="col-12 col-md-8 col-lg-6"...></div>

El tamaño del viewport del navegador en un dispositivo móvil tiene unas dimensiones que: (marca todas las correctas)

• Siempre son idénticas a las dimensiones físicas de la pantalla
• Pueden ser inferiores a las dimensiones físicas de la pantalla (correcto)
• Pueden ser superiores a las dimensiones físicas de la pantalla (correcto)
• Se ajustan al doble de las dimensiones físicas de la pantalla

Marca los elementos que se consideran pilares de un desarrollo RWD:(marca todas las correctas)

• Scripts responsive
• Distribución fluida (correcto)
• Uso de medidas relativas (correcto)
• Uso de media queries (correcto)
• Imágenes fluidas (correcto)
• Interacción táctil

El sistema de cuadrícula de Bootstrap es:

• De ancho fijo
• Fluida
• Las dos anteriores son correctas (correcto)

¿Para qué sirve el valor baseline de la propiedad align-items?

• Alinea las líneas de texto entre todos los elementos (correcto)
• Alinea los bordes inferiores de todos los elementos
• Alinea todos los elementos al borde inferior del contenedor
• Alinea las imágenes y el texto dentro de cada elemento

¿Cuál es el ajuste fundamental de Flexbox que permite adaptar la organización al tamaño del contenedor y crear diseños responsive?

• flex-wrap: wrap; (correcto)
• Usar media queries para cambiar el flujo de elementos
• flex-direction: column
• flex-shrink: 1

Considera la rejilla definida por las siguientes plantillas:

grid-template-rows: 1fr 1fr 1fr;
grid-template-columns: 1fr 2fr 3fr 2fr 1fr;

¿Con qué propiedad y valor ubicarías un elemento para que ocupase una celda en la columna central?

• grid-position: 3;
• grid-area: auto / 3;
• grid-column-end: 3
• grid-column: 3 / 4; (correcto)

La propiedad flex-basis en un elemento contenido en una organización con Flexbox describe:

• El tamaño fijo del elemento en el eje principal
• El tamaño máximo del elemento en el eje transversal
• Un tamaño variable según contenido y espacio disponible, en el eje principal (correcto)
• Un tamaño variable según contenido y espacio disponible, en el eje transversal

En una plantilla de pistas (filas o columnas), ¿cómo se indica un número de pistas que se calcule de acuerdo al tamaño del contenedor?

• auto-fit(1fr)
• repeat(auto-fit, 1fr) (correcto)
• repeat(1fr, auto-fit)
• Sólo se puede conseguir con media queries

Para crear con Bootstrap un conjunto de pestañas, ¿qué dos clases debo aplicarle como mínimo el elemento contenedor?:

• tab
• nav (correcto)
• nav-tabs (correcto)
• tab-nav

¿Qué clase o clases de Bootstrap deberías utilizar para que un elemento no se muestre a partir de tamaños grandes?

• class="d-block d-lg-none" (correcto)
• class="d-lg-block"
• class="d-lg-hidden"

Rellena los huecos con las palabras que creas correctas:

• La unidad de medida em es relativa al inmediato contenedor del elemento actual, mientras que rem es relativa al elemento raíz del documento.

¿Con qué clase de Bootstrap asignarías el mayor relleno (padding) posible por la izquierda, en idiomas occidentales (de izquierda a derecha) para el contenido de un elemento?

• .padmax
• .ps-max
• .ps-5 (correcto)
• .padding-m

Para mostrar un cierto contenido en todos los tipos de pantalla a excepción de las más pequeñas se usaría la siguiente clase o combinación de clases de Bootstrap:

• d-none d-sm-block (correcto)
• visible-xs
• hidden-xs
• visible-sm-lg

Rellena los huecos con las palabras que creas correctas:

• La unidad de medida em es relativa al inmediato contenedor del elemento actual, mientras que rem es relativa al elemento raíz del documento.

¿Cómo indicarías que una barra de navegación de Bootstrap debe ocultarse automáticamente para anchos de pantalla inferiores a los medianos?:

• navbar-expand-md (correcto)
• navbar-expand-sm
• navbar-md
• navbar-sm

Empareja los siguientes atributos que pueden aparecer en una media query con las características consultadas en el dispositivo (mueve en vertical los elementos de la izquierda hasta que queden alineados con los correspondientes de la columna de la derecha):

Si una cuadrícula en Grid tiene 8 filas…

• …entonces tiene 7 líneas horizontales
• …entonces tiene 8 líneas horizontales
• …entonces tiene 9 líneas horizontales (correcto)
• …tiene el número de líneas que se defina en la plantilla de filas

Considera el siguiente marcado:

<main>
    <span>1</span>
    <span>2</span>
    <span>3</span>
</main>

y supón que se combina con el siguiente estilo CSS:

main {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

En este caso, ¿cómo se distribuye el espacio libre del contenedor?

• Los elementos absorben todo el espacio libre del contenedor, ocupando tamaños iguales
• El espacio libre horizontal queda entre los elementos, y el espacio libre vertical queda arriba (correcto)
• El espacio libre horizontal queda a los lados de los elementos, y el espacio libre vertical queda arriba
• El espacio libre horizontal está repartido a los lados y entre los elementos, y el vertical queda abajo

El sistema de cuadrícula flexible de Bootstrap se divide en el siguiente número de columnas:

• 24
• 16
• 12 (correcto)
• 18

Ordena las siguientes clases para obtener la estructura correcta de un panel o tarjeta de Bootstrap:

1. card
2. card-header
3. card-body
4. card-footer

¿Qué clase o clases de Bootstrap deberías utilizar para que un elemento solo se mostrase en tamaños de pantalla medianos y grandes, pero no en tamaños menores ni mayores a estos?

• class="d-none d-md-block d-xl-none" (correcto)
• class="d-md-block d-lg-block"
• class="d-none d-md-block d-lg-block"

Siguiendo un enfoque de desarrollo mobile first, los estilos CSS no asociados a media queries se dirigen a:

• Dispositivos móviles
• Dispositivos de escritorio
• Todos los dispositivos
• Todos los dispositivos cuyas características no coincidan con ninguna media query (correcto)

El tamaño del viewport del navegador en un dispositivo móvil tiene unas dimensiones que: (marca todas las correctas)

• Siempre son idénticas a las dimensiones físicas de la pantalla
• Pueden ser inferiores a las dimensiones físicas de la pantalla (correcto)
• Pueden ser superiores a las dimensiones físicas de la pantalla (correcto)
• Se ajustan al doble de las dimensiones físicas de la pantalla