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)
Genera consistencia en el diseño
Más fácil de actualizar y mantener
Desarrollo más rápido
Hay varios frameworks CSS , pero muchos
Su uso puede tener un coste:
Rendimiento de la aplicación: recursos más numerosos y pesados
Dependencia del framework (barrera de salida alta)
Incluyen diferentes tecnologías generalmente:
HTML5: para definir los componentes de la interfaz y su semántica
Uso avanzado de CSS y preprocesadores (Less -> SAAS )
Interactividad a través de extensiones JS
Preprocesado de los componentes
Directamente: Compresión y Minificado
Generándolo:
Uso de preprocesadores (p.ej SAAS )
Usando arquitectura Jamstack:
Marcado específico
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
Basado en HTML5 (semántica) y CSS3 (interfaz)
Interactividad basada en JS
Con plantillas de diseño UI/UX
Quizá sea el más popular
Historia Breve:
Twitter (Blueprint)
Código Abierto (2012)
Buscaba resolver:
Inconsistencias en los desarrollos
Problemas en el mantenimiento
Lentitud de las actualizaciones y cambios
¿El coste?
Archivos CSS pesados (rendimiento)
Diseños no muy estándar y complejos
Características:
Adaptable y flexible (grid propia)
Web única (pensado desde el móvil)
Basado en componentes UI (tiene muchos)
Con extensiones JS (para desarrollo cliente)
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:
Creas el index
Añades CSS (y JS si lo necesitas), vía CDN Links
Comienzas a usar bootstrap:
Usando contenedores (usar la semántica del documento)
Añades estilos, a través de clases predefinidas en cada elemento html
Bootstrap crea unos estilos (y algunos elementos) predefinidos:
Actualiza y define un estándar en el estilo de varios elementos básicos (encabezados, párrafos, tablas, listas, enlaces, etc)
Quita margin-top y actualiza medidas relativas (para usar rem)
Define variables predefinidas usando SaaS (sólo para una personalización más extrema)
Añade algunos elementos html especiales (var, kbd, samp)
… 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:
display-3 : por ejemplo para usar tamaño de texto (3, desde 1, el más grande, al 6)
lead : para destacar un párrafo (también ví HTML con blockquote)
elementos HTML como mark, del, u, small, strong, em : para diferentes tipos de resaltado de texto
con listas:
list-unstyled: Quitar el estilo de lista
list-inline: los elementos van en línea (no en líneas diferentes)
Añadiendo Tablas
Añade estilos predefinidos de clases para tablas, filas y celdas ( primary, secondary, success, danger …)
O resaltar filas (table-striped) o columnas (table table-striped-columns) o marcarlas (table-active) hasta con ratón (table-hover)
Y puedes juntar los estilos (table-secondary table-striped-columns)
Y más personalización (Tablas)
Añadiendo Imágenes
Añadiendo img-fluid se adaptan al dispositivo o con img-thumnail un borde
Puedes personalizar el comportamiento usando utilidades:
Para poner bordes
Si usas el elemento picture es lo mismo (pero los estilos aplican al elemento img)
Si quieres añadir un título o alguna descripción a la imagen, mejor usar figure
Añadiendo Iconos
Ya integrado
Librería muy completa
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:
Resaltado en negritas
Texto tachado
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
Tenga sus elementos en línea
No tenga estilo ninguno (sin viñetas o números)
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:
Usa Contenedores. Todo el contenido (texto o nuevo contenedor) va en un contenedor
Usa un sistema Grid (filas y columnas). Distribuye y coloca el contenido en 12 columnas (y filas)
BreakPoints. Tiene 6 tipos de pantallas predefinidas a las que se adapta el diseño
-
Son el componente principal de la interfaz (container)
Ahí incluyes el texto (con sus márgenes, sus rellenos, y sus diferentes propiedades)
O un nuevo elemento del diseño (un componente dentro del componente padre)
Lo vas configurando añadiendo sufijos a la clase contenedor
Hay 3 tipos:
El predeterminado. Ocupa el 100%
El que se adapta al dispositivo hasta un punto (p.ej .container-md)
El que ocupa todo (.container-fluid)
El sistema grid (de Bootstrap):
Basado en 12 columnas ( en cada una de las filas del contenedor) que …
… se adaptan usando 6 puntos de corte (breakpoints)
… usando css flexbox
-
Cada fila tiene 12 columnas (si no están las 12, pasa a la siguiente fila)
Defines directamente cuantas columnas ocupa, añadiendo sufijos
Tienes mucho control sobre cada columna (espacios, posicionamiento, etc)
-
Anchura predefinida para su uso en media queries (a su vez predefinidas)
Permiten un diseño totalmente adaptativo (podrías personalizar el ancho de cada tipo)
Hay 6: el más pequeño, sm, md, lg, xl, xxl
Jerarquía del contenido en la visualización
El contenedor
Que tiene filas
Cada fila tiene 12 columnas
Y en cada columna pones el contenido
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
Lo primero es usar las ventajas de html5 en formularios:
Usar los tipos input adecuados
Usar label y/o fieldset para agrupar los elementos
Usar los botones de acción adecuados
Define unos estilos base ya predefinidos que sirven en la mayoría de los casos
Pero hay muchísimas clases para personalizar estilos (Forms )
De los elementos : tamaño, texto, activación
De los controles: select, checkbox , botones, rangos, etc
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:
Centralizan la personalización de algunos elementos
Es extensible (permite añadir nuevas utilidades)
Definen un estándar para el comportamiento de esa personalización
Algunos ejemplos:
Colores : para especificar diferentes colores y transparencia al texto
Bordes : para especificar bordes, su color y grosor
Tamaño : para definir el tamaño del bloque
Caracteres de Texto : para definir comportamiento de caracteres y texto
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:
Definen el componente y su comportamiento
Estandarizan su uso (no depende de quien lo desarrolle)
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>
-
Defines botones sobre un estilo predefinido para elementos HTML button (aplica también a a e input)
Personalizas el estilo (colores, bordes, fondo, texto, tamaño, etc)
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>
-
Listas que se contraen y expanden según la acción del usuario
Necesita ejecución javascript (hay que incluirlo en el head)
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
-
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>
-
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>
-
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):
Uno que tenga un título, subtítulo, texto y un enlace
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:
Una diapositivas de texto (título, subtítulo, descripción, etc)
Otra diapositiva con una imagen y un título
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).