8. Frameworks CSS#

Como último tema del módulo, buscamos explorar qué frameworks CSS existen en la actualidad y escoger uno de referencia para probar (Bootstrap)

Conocer los frameworks que se usan con la tecnología CSS
Usar Bootstrap como ejemplo de implementación
Implementar un sitio web usando BS

Esfuerzo Necesario

El curso está organizado en 8 sesiones de clase. Cada clase (sesión) implica una dedicación de entre 2 y 4 horas.

La dedicación depende del conocimiento previo, motivación y capacidad de aprendizaje del estudiante para esa sesión en concreto.

Video Clase

8.1. Introducción#

Video Clase

Framework CSS: plantilla de trabajo (estilos y componentes predefinidos)
1. Genera consistencia en el diseño
2. Más fácil de actualizar y mantener
3. Desarrollo más rápido
Hay varios frameworks CSS , pero muchos
Su uso puede tener un coste:
1. Rendimiento de la aplicación: recursos más numerosos y pesados
2. Dependencia del framework (barrera de salida alta)
Incluyen diferentes tecnologías generalmente:
1. HTML5: para definir los componentes de la interfaz y su semántica
2. Uso avanzado de CSS y preprocesadores (Less -> SAAS )
3. Interactividad a través de extensiones JS
Preprocesado de los componentes
1. Directamente: Compresión y Minificado
2. Generándolo:
  1. Uso de preprocesadores (p.ej SAAS )
  2. Usando arquitectura Jamstack:
    1. Marcado específico
    2. Generación estática (SSG)
Puedes revisar un informe del año 2022 sobre el estado del mundo CSS.

T08-A01. Averiguar sobre Frameworks CSS

¿Cuántos frameworks CSS existen?
¿Podrías crear uno nuevo?
¿Cual es el más utilizado?

Escoge uno cualquiera, que no sea Bootstrap, y averigua:

¿Cual es su página oficial y donde encuentro la documentación?
¿Qué tecnologías usa?
¿Qué ventajas parece que aporta sobre el uso de otros frameworks?
¿Qué desventajas crees que tendría?
¿Cómo sería un ejemplo de código con ese framework?

8.2. El Framework Bootstrap#

Video Clase

Básicamente es una Biblioteca multiplataforma: Bootstrap
1. Basado en HTML5 (semántica) y CSS3 (interfaz)
2. Interactividad basada en JS
3. Con plantillas de diseño UI/UX
4. Quizá sea el más popular
Historia Breve:
1. Twitter (Blueprint)
2. Código Abierto (2012)
Buscaba resolver:
1. Inconsistencias en los desarrollos
2. Problemas en el mantenimiento
3. Lentitud de las actualizaciones y cambios
¿El coste?
1. Archivos CSS pesados (rendimiento)
2. Diseños no muy estándar y complejos
Características:
1. Adaptable y flexible (grid propia)
2. Web única (pensado desde el móvil)
3. Basado en componentes UI (tiene muchos)
4. Con extensiones JS (para desarrollo cliente)
5. Fácil arrancar (copiar plantillas)
Ejemplo de sitio web: bootstrap starter

T08-A02a. Investigar Bootstrap

¿Cual es la última versión?
¿Donde está la documentación?
¿Quienes fueron los autores?
¿Qué usuarios publicaron cambios en el último mes?
¿Dónde puedes ver algún ejemplo de sitios web que usen BS?
¿Cómo se carga el framework?
¿Qué tecnología crees que es la predominante?

T08-A02b. Revisión de código

Usa el ejemplo de un sitio web con un carrusel para hacerte una idea de:

Cual es la estructura
En qué archivos está BS
Donde podrías personalizar el contenido
Donde podrías personalizar el interfaz UI
Y tener una copia en local

Tienes que poder ver el sitio web en local, con una pequeña personalización

8.3. Añadiendo Contenido#

Video Clase

Tu primer sitio web con Bootstratp:
1. Creas el index
2. Añades CSS (y JS si lo necesitas), vía CDN Links
3. Comienzas a usar bootstrap:
  1. Usando contenedores (usar la semántica del documento)
  2. Añades estilos, a través de clases predefinidas en cada elemento html
Bootstrap crea unos estilos (y algunos elementos) predefinidos:
1. Actualiza y define un estándar en el estilo de varios elementos básicos (encabezados, párrafos, tablas, listas, enlaces, etc)
2. Quita margin-top y actualiza medidas relativas (para usar rem)
3. Define variables predefinidas usando SaaS (sólo para una personalización más extrema)
4. Añade algunos elementos html especiales (var, kbd, samp)
5. … Esto te permite, sin esfuerzo, crear un sitio web con un estilo moderno, adaptable y enfocado en una web única
Modificando estilos de texto (tipografía ). Define varias clases específicas. Algunos ejemplos útiles:
1. display-3 : por ejemplo para usar tamaño de texto (3, desde 1, el más grande, al 6)
2. lead : para destacar un párrafo (también ví HTML con blockquote)
3. elementos HTML como mark, del, u, small, strong, em : para diferentes tipos de resaltado de texto
4. con listas:
  1. list-unstyled: Quitar el estilo de lista
  2. list-inline: los elementos van en línea (no en líneas diferentes)
Añadiendo Tablas
1. Añade estilos predefinidos de clases para tablas, filas y celdas ( primary, secondary, success, danger …)
2. O resaltar filas (table-striped) o columnas (table table-striped-columns) o marcarlas (table-active) hasta con ratón (table-hover)
3. Y puedes juntar los estilos (table-secondary table-striped-columns)
4. Y más personalización (Tablas)
Añadiendo Imágenes
1. Añadiendo img-fluid se adaptan al dispositivo o con img-thumnail un borde
2. Puedes personalizar el comportamiento usando utilidades:
  1. Para poner bordes
  2. Para alinearlas en el texto
3. Si usas el elemento picture es lo mismo (pero los estilos aplican al elemento img)
4. Si quieres añadir un título o alguna descripción a la imagen, mejor usar figure
Añadiendo Iconos
1. Ya integrado
2. Librería muy completa
3. Muy fácil de añadir

T08-A03. Tu primer sitio con BootStrap

Crea un sitio web con Bootstrap que contenga:

Al menos tres encabezados de texto
Con un encabezado con un nivel de resaltado especial (nivel 2 por ejemplo)
Con varios párrafos en todo el documento, que contengan:
1. Resaltado en negritas
2. Texto tachado
3. Resaltado especial (marcar un texto o un párrafo)
Que tenga enlaces (hipervínculos)
Que contenga al menos 3 listas (numeradas y no numeradas), de las que alguna
1. Tenga sus elementos en línea
2. No tenga estilo ninguno (sin viñetas o números)
3. En la lista en línea, añade un icono (cualquiera) a cada elemento
Al menos dos imágenes, una con img y otra con título y texto usando figure
Tres tablas, cada una con estilos diferentes

8.4. Maquetando con Bootstrap#

Video Clase

Tres conceptos a tener en cuenta, para maquetar el contenido:
1. Usa Contenedores. Todo el contenido (texto o nuevo contenedor) va en un contenedor
2. Usa un sistema Grid (filas y columnas). Distribuye y coloca el contenido en 12 columnas (y filas)
3. BreakPoints. Tiene 6 tipos de pantallas predefinidas a las que se adapta el diseño
Contenedores
1. Son el componente principal de la interfaz (container)
2. Ahí incluyes el texto (con sus márgenes, sus rellenos, y sus diferentes propiedades)
3. O un nuevo elemento del diseño (un componente dentro del componente padre)
4. Lo vas configurando añadiendo sufijos a la clase contenedor
5. Hay 3 tipos:
  1. El predeterminado. Ocupa el 100%
  2. El que se adapta al dispositivo hasta un punto (p.ej .container-md)
  3. El que ocupa todo (.container-fluid)
El sistema grid (de Bootstrap):
1. Basado en 12 columnas ( en cada una de las filas del contenedor) que …
2. … se adaptan usando 6 puntos de corte (breakpoints)
3. … usando css flexbox
Columnas
1. Cada fila tiene 12 columnas (si no están las 12, pasa a la siguiente fila)
2. Defines directamente cuantas columnas ocupa, añadiendo sufijos
3. Tienes mucho control sobre cada columna (espacios, posicionamiento, etc)
BreakPoints
1. Anchura predefinida para su uso en media queries (a su vez predefinidas)
2. Permiten un diseño totalmente adaptativo (podrías personalizar el ancho de cada tipo)
3. Hay 6: el más pequeño, sm, md, lg, xl, xxl
Jerarquía del contenido en la visualización
1. El contenedor
2. Que tiene filas
3. Cada fila tiene 12 columnas
4. Y en cada columna pones el contenido
5. Usas las clases predefinidas para personalizar la presentación (layout)

T08-A04a. Revisar ejemplo de código

Usando código fuente / versión web (un álbum) entender las siguientes líneas:

<div class="container">

<div class="col-sm-8 col-md-7 py-4">

<div class="col-sm-4 offset-md-1 py-4">

<ul class="list-unstyled">

<li><a href="#" class="text-white">Like on Facebook</a></li>

<a href="#" class="navbar-brand d-flex align-items-center">

<section class="py-5 text-center container">

<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>

<small class="text-body-secondary">9 mins</small>

<p class="float-end mb-1">

T08-A04b. Maquetando con Bootstrap

Modifica el sitio web de la clase anterior, o añádele algún texto, para que la maquetación tenga:

Dos filas. La primera con 4 columnas, la segunda con 6
Con un diseño diferente para pantallas con un ancho superior a 1300 pixels
Las dos imágenes las colocas en un contenedor con una fila y dos columnas, que ocupen todo el ancho de la pantalla

8.5. Formularios#

Video Clase

Bootstrap ya normaliza el comportamiento de formularios
1. Lo primero es usar las ventajas de html5 en formularios:
  1. Usar los tipos input adecuados
  2. Usar label y/o fieldset para agrupar los elementos
  3. Usar los botones de acción adecuados
2. Define unos estilos base ya predefinidos que sirven en la mayoría de los casos
Pero hay muchísimas clases para personalizar estilos (Forms )
1. De los elementos : tamaño, texto, activación
2. De los controles: select, checkbox , botones, rangos, etc
3. De la presentación: etiquetas, márgenes, separación, etc
Además normaliza la presentación de formularios en diferentes navegadores
Un ejemplo muy completo que agrupa campos

T08-A05. Formularios con Bootstrap

Usa Bootstrap para desarrollar el formulario del ejercicio 16 en el capítulo 9 del curso de Arkaitz:

Desarróllalo con estilos base (HTML5)
Personaliza el estilo para mejorar su apariencia
Si lo ves oportuno, mejora los controles y agrupa de forma diferentes los campos

Tendrá un botón enviar, que usando POST, enviará los datos al script «un_ejemplo.php»

8.6. Utilidades#

Video Clase

Bootstrap tiene un montón de utilidades disponibles:
1. Centralizan la personalización de algunos elementos
2. Es extensible (permite añadir nuevas utilidades)
3. Definen un estándar para el comportamiento de esa personalización
Algunos ejemplos:
1. Colores : para especificar diferentes colores y transparencia al texto
2. Bordes : para especificar bordes, su color y grosor
3. Tamaño : para definir el tamaño del bloque
4. Caracteres de Texto : para definir comportamiento de caracteres y texto
5. Espaciado : para definir márgenes y relleno

T08-A06. Modificando tu sitio web

Modifica tu sitio web usando las utilidades de Bootstrap. Algunas ideas sobre el texto de un párrafo:

Modifica el color y transparencia de algún bloque de texto.
Modifica los bordes de una de las tablas
Modifica el tamaño de texto en algún párrafo
Modifica el comportamiento de texto en algún párrafo
Añade relleno y/o márgenes a algunos bloques de texto

Si no se te ocurre algo para jugar y probar las utilidades, estos son 5 requisitos de diseño sobre un texto (puede ser en diferentes párrafos):

Ponlo en color rojo, y al 25% de opacidad (casi transparente)
En un párrafo que tenga un margen grande, con un borde un poco grueso y de color azul
Además, entre el borde y el texto del párrafo que haya espacio
Que tenga algún texto en negrita, otro en cursiva y otro tachada. En diferentes textos del mismo párrafo
Busca una utilidad (no es ninguna de las anteriores) que te sirva para por ejemplo ocultar un párrafo cuando la pantalla sea más ancha de 1200px

8.7. Componentes (5 ejemplos)#

Video Clase

Bootstrap tiene varios componentes predefinidos:
1. Definen el componente y su comportamiento
2. Estandarizan su uso (no depende de quien lo desarrolle)
3. Facilitan el desarrollo y su mantenimiento

Badges .

Para añadir una notificación en el contexto de un texto (inline)

Puedes personalizar el estilo y la colocación

<button type="button" class="btn btn-primary">
  Mensajes <span class="badge text-bg-secondary">4</span>
</button>

Botones
1. Defines botones sobre un estilo predefinido para elementos HTML button (aplica también a a e input)
2. Personalizas el estilo (colores, bordes, fondo, texto, tamaño, etc)
3. Si el botón genera una acción, lo usas de la forma tradicional (aunque Bootstrap te ofrece un plugin)
```
<button class="btn btn-primary" type="submit">Botón</button>
<input class="btn btn-outline-secondary btn-lg disabled" type="button" value="Ejemplo">
```

Alertas :

Sirven para para definir avisos especiales (párrafos sencillos con un resaltado especial)
Puedes personalizar el estilo.
Para hacerlo interactivo (p.ej. cerrar el aviso) necesitas JS

<div class="alert alert-primary d-flex align-items-center" role="alert">
   <svg class="bi flex-shrink-0 me-2" role="img" aria-label="Info:"><use xlink:href="#info-fill"/></svg>
   <div>
       Ejemplo de alerta con un icono (en SVG)
   </div>
</div>

Menús Desplegables (dropdown lists )

Permite contraer/expandir elementos de una lista
Necesita ejecución javascript (hay que incluirlo en el head)

Puedes personalizar el estilo (muy útil para los menús)

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
       Botón desplegable
  </button>
  <ul class="dropdown-menu">
       <li><a class="dropdown-item" href="url1">Para el url1</a></li>
       <li><a class="dropdown-item" href="url2">Para el url2</a></li>
       <li><a class="dropdown-item" href="#marca">Para el marcador de la página</a></li>
  </ul>
</div>

Acordeón
1. Listas que se contraen y expanden según la acción del usuario
2. Necesita ejecución javascript (hay que incluirlo en el head)
3. Muy útil para por ejemplo, preguntas y respuestas

T08-A07. Usando estos 5 componentes Bootstrap

Crea una página web que incluya estos 5 componentes:

Un botón que diga «Mensajes» y luego un 5 como «badge» (simulando un sistema de notificación)
Un parrafo, que se resalta como un aviso especial
3 botones, cada uno con un estilo diferente
Un menú desplegable de frutas (naranjas, peras, melocotones)
Una lista de 3 preguntas más frecuentes sobre el ciclo de DAW, que sea interactiva (desplegar y contraer)

8.8. Componentes (y otros 5)#

Video Clase

Hay muchos más componentes Bootstrap (podrías crear los tuyos propios también). 5 ejemplos más orientados a la estructura de la interfaz

BreadCrumb

Uso importante en la arquitectura de información del sitio

Se puede personalizar el caracter separador (mejor carácter que icono)

<nav style="--bs-breadcrumb-divider: '/'" aria-label="breadcrumb">
       <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="#">Home</a></li>
        <li class="breadcrumb-item active" aria-current="page">Library</li>
       </ol>
</nav>

Card

Ofrece un contenedor (card) muy flexible. P.ej con encabezado (card-header), contenido (card-body / card-text) y pie de página (card-footer)
Permite, con poco código, definir componentes del interfaz de forma muy sencilla

Puedes incluir texto, imágenes, enlaces o listas dentro de una estructura muy estándar (tarjeta)

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
  <div class="card-body">
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

Carousel

Permite moverte entre diferentes elementos (como un carrusel) viendo sólo uno de ellos
Puedes incluir texto, imágenes o lo que se te ocurra

Interactivo (necesita JS) y muy utilizado también (poco esfuerzo y mucho beneficio gráfico). Ojo a no abusar

<div id="carouselExampleCaptions" class="carousel slide">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
  </div>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block">
        <h5>Primera Diapositiva</h5>
        <p>Texto para incluir en esta diapositiva</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block">
        <h5>Segunda Diapositiva</h5>
        <p>Texto (o imágenes o enlaces o componente) </p>
      </div>
    </div>

  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="Anterior">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Anterior</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="Siguiente">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Siguiente</span>
  </button>
</div>

Barra de Navegación (Navbar )

Especializado para crear la barra de navegación (mejor usar dentro de elemento html nav)

Puedes definirlo sin usar listas, y también incluir menús desplegables como elementos

`  <nav class="navbar navbar-expand-lg bg-body-tertiary">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">Navbar</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNavDropdown">
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Features</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Pricing</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
              Dropdown link
            </a>
            <ul class="dropdown-menu">
              <li><a class="dropdown-item" href="#">Action</a></li>
              <li><a class="dropdown-item" href="#">Another action</a></li>
              <li><a class="dropdown-item" href="#">Something else here</a></li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
  </nav>

Elementos de navegación (Navs & Tabs )

Para especificar elementos de navegación (más allá de la barra de navegación, o incluso sustituyéndola)
Ideal para usar como listas (o con nav y el componente navbar)

Permite definir tipos de navegación basada en pestañas (tabs) o botones (pills)

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Another action</a></li>
      <li><a class="dropdown-item" href="#">Something else here</a></li>
      <li><hr class="dropdown-divider"></li>
      <li><a class="dropdown-item" href="#">Separated link</a></li>
    </ul>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Disabled</a>
  </li>
</ul>

T08-A08. Usando otros 5 componentes Bootstrap

Crea una página web que incluya estos 5 componentes:

Publica unas «miguitas de pan» inventada, cuyo caracter separador sea el -
Crea dos componentes tipo tarjeta (card):
1. Uno que tenga un título, subtítulo, texto y un enlace
2. Otro que tenga una imagen en la parte superior, un texto de descripción y un enlace con un estilo diferente al anterior
Incluirá también un carrusel con tres elementos:
1. Una diapositivas de texto (título, subtítulo, descripción, etc)
2. Otra diapositiva con una imagen y un título
3. Y una diapositiva con un componente de tipo tarjeta
Añádele una barra de navegación que contenga al menos 4 elementos
Añade un componnete de navegación interna en la página, que imite el uso de pestañas, con tres tipos de bloques diferentes (en cada pestaña un bloque de texto).