Desarrollo de
Software
Universidad Tecnológica Nacional
Facultad Regional Córdoba
Cátedra: Desarrollo de Software
Introducción a Frameworks CSS
Los Frameworks CSS son bibliotecas pre-preparadas que contienen
estilos y componentes comunes para facilitar y acelerar el desarrollo
web. Estos frameworks ofrecen una base sólida y coherente,
permitiendo a los desarrolladores centrarse en la creación de
características únicas en lugar de reinventar elementos básicos.
¿Por qué son útiles?
● Consistencia: Proporcionan un diseño coherente y
estandarizado.
● Eficiencia: Reducen el tiempo de desarrollo.
● Responsividad: Diseñados para ser móviles primero.
● Comunidad: Soporte, actualizaciones y mejoras constantes.
DESARROLLO DE SOFTWARE
2
Tailwind CSS: Enfoque “Utility-First”
Tailwind CSS es un framework CSS altamente personalizable y de bajo nivel que da a los
desarrolladores la libertad de construir diseños únicos sin salir del HTML.
¿Qué es “Utility-First”?
El enfoque “utility-first” significa que, en lugar de empezar con un conjunto
predeterminado de componentes, empiezas con clases utilitarias de bajo nivel que te
permiten construir cualquier diseño sin escribir CSS personalizado.
Ventajas:
• Rapidez: Construye rápidamente con clases predefinidas directamente en tu HTML.
• Personalizable: Aunque es “utility-first”, Tailwind permite personalizaciones
detalladas mediante su archivo de configuración.
• Eficiente: Reduce la necesidad de escribir CSS repetitivo, ya que puedes reutilizar
clases utilitarias en todo tu proyecto.
• Responsivo: Diseña para diferentes dispositivos fácilmente con clases específicas
para cada breakpoint.
Nota: A pesar de su curva de aprendizaje inicial, muchos desarrolladores encuentran que el
enfoque “utility-first” acelera el desarrollo y reduce la complejidad a largo plazo.
DESARROLLO DE SOFTWARE
3
Material UI: Un Framework Inspirado en Material Design
Material UI es una biblioteca de componentes para React basada en el Material
Design de Google. Ayuda a crear interfaces de usuario atractivas y consistentes.
Material Design
● Profundidad y Realismo: Ilusión de profundidad con sombras y
movimientos.
● Componentes Ricos: Botones, tarjetas, barras y más.
● Feedback Animado: Animaciones para interacciones del usuario.
● Principios de Diseño: “El contenido es primordial”, “Refuerzo visual”,
“Movimiento significativo”.
Templates Material UI:
[Link]
DESARROLLO DE SOFTWARE
4
Bootstrap: Historia y Popularidad
Bootstrap es uno de los frameworks CSS más populares y ampliamente utilizados en el mundo del
desarrollo web.
Historia:
● 2011: Bootstrap fue creado por Mark Otto y Jacob Thornton en Twitter como un marco para
fomentar la consistencia en las herramientas internas.
● Agosto de 2011: Se lanza la primera versión de código abierto de Bootstrap.
● A lo largo de los años, Bootstrap ha pasado por varias versiones, con mejoras significativas en
cada iteración, adaptándose a las cambiantes tendencias y necesidades del diseño web.
Popularidad:
● Ampliamente Adoptado: Bootstrap es utilizado por millones de sitios web en todo el mundo.
● Comunidad Activa: Gracias a ser de código abierto, ha cultivado una comunidad activa que
contribuye constantemente con extensiones, temas y soluciones a problemas comunes.
● Documentación Exhaustiva: Una de las razones de su popularidad es su documentación
detallada y ejemplos prácticos que facilitan el aprendizaje y la implementación.
● Versatilidad: Bootstrap puede ser utilizado tanto por principiantes como por desarrolladores
experimentados, y es compatible con todos los navegadores modernos.
Nota:
La combinación de facilidad de uso, diseño adaptable y una comunidad activa ha solidificado la posición
de Bootstrap como uno de los principales frameworks CSS en la industria del desarrollo web.
DESARROLLO DE SOFTWARE
5
Necesidad de Bootstrap
● No en todos los proyectos web tenemos un diseñador web
○ Y a pesar de las buenas intenciones no siempre sale todo bien:
[Link]
● Podemos aprender de los cientos de sitios web bien diseñados
○ Hay ciertos elementos que se repiten en la mayor parte de ellos
■ Navegación
■ Contenido
■ Pie de página
■ etc
DESARROLLO DE SOFTWARE
Diseño web responsive y mobile-first
• Responsive web design: diseño web capaz de adaptarse a un amplio
rango de dispositivos:
• Computadora
• Tablet
• Smartphone
• etc
Más información en: [Link]
• Mobile-first: Bootstrap 5.x adopta un abordaje que permite que los
diseños se visualicen correctamente en dispositivos móviles desde su
concepción
DESARROLLO DE SOFTWARE
Sistema de grilla
Bootstrap utiliza un sistema de grilla fluida que escala hasta 12 columnas
en la medida en que el el tamaño del dispositivo o viewport aumenta.
DESARROLLO DE SOFTWARE
Sistema de grilla
DESARROLLO DE SOFTWARE
Sistema de grilla
Bootstrap trabaja con un sistema de 12 columnas
Elementos principales
● Contenedores son elementos div con clases css (.container o
.container-fluid) son el elemento principal que envuelve el contenido del
sitio
● Las filas se deben colocar dentro de una clase css .container (ancho fijo)
o .container-fluid (ancho completo).
○ Las filas .row se utilizan para crear grupos horizontales de columnas
.col
● Columnas: Las columnas (.col) son el elemento básico de la cuadrícula y
se utilizan para contener el contenido
○ Se debe colocar el contenido entre columnas y solamente estas
pueden ser los hijos inmediatos de las filas.
DESARROLLO DE SOFTWARE
Sistema de grilla
DESARROLLO DE SOFTWARE
Contenedores
Los contenedores son el elemento básico de la distribución del espacio en
Bootstrap y son necesarios cuando trabajamos con el sistema de grillas.
Tenemos dos tipos de contenedores disponibles:
• De ancho fijo
<div class="container">
<!-- contenido -->
</div>
• Ancho total
<div class="container-fluid">
<!-- contenido -->
</div>
DESARROLLO DE SOFTWARE
Sistema de grilla: viewports
El sistema de grilla de bootstrap tiene seis clases
.col Teléfonos móviles modo vertical < 576 px
.col-sm Teléfonos móviles modo landscape >= 576 px
.col-md Dispositivos medianos (tablets) >= 768 px
.col-lg Desktops >= 992 px
.col-xl Desktops grandes >= 1200 px
.col-xxl Desktops extra grandes >= 1400 px
DESARROLLO DE SOFTWARE
Celdas de igual ancho
<div class="row">
<div class="col">celda 1 de 2</div>
<div class="col">celda 2 de 2</div>
</div>
<br />
<div class="row">
<div class="col">celda 1 de 3</div>
<div class="col">celda 2 de 3</div>
<div class="col">celda 3 de 3</div>
</div>
<br />
<div class="row">
<div class="col">celda 1 de 4</div>
<div class="col">celda 2 de 4</div>
<div class="col">celda 3 de 4</div>
<div class="col">celda 4 de 4</div>
</div>
DESARROLLO DE SOFTWARE
Celdas de ancho determinado
<div class="row">
<div class="col-4">celda de 4 unidades</div>
<div class="col-8">celda de 8 unidades</div>
</div>
<br />
<div class="row">
<div class="col-3">celda de 3 unidades</div>
<div class="col-3">celda de 3 unidades</div>
<div class="col-6">celda de 6 unidades</div>
</div>
DESARROLLO DE SOFTWARE
Sistema de grilla y los viewports
.col-sm-8
Teléfonos móviles modo vertical < 576 px
.col
Teléfonos móviles modo landscape >= 576 px
.col-sm
Dispositivos medianos (tablets) >= 768 px
.col-md
Desktops >= 992 px
.col-lg
Desktops grandes >= 1200 px
.col-xl
Desktops extra grandes >= 1400 px
.col-xxl
DESARROLLO DE SOFTWARE
Sistema de grilla y los viewports
.col-4
Teléfonos móviles modo vertical < 576 px
.col
Teléfonos móviles modo landscape >= 576 px
.col-sm
Dispositivos medianos (tablets) >= 768 px
.col-md
Desktops >= 992 px
.col-lg
Desktops grandes >= 1200 px
.col-xl
Desktops extra grandes >= 1400 px
.col-xxl
DESARROLLO DE SOFTWARE
Sistema de grilla y los viewports
.col-sm-4 .col-lg-2
Teléfonos móviles modo vertical < 576 px
.col
Teléfonos móviles modo landscape >= 576 px
.col-sm
Dispositivos medianos (tablets) >= 768 px
.col-md
Desktops >= 992 px
.col-lg
Desktops grandes >= 1200 px
.col-xl
Desktops extra grandes >= 1400 px
.col-xxl
DESARROLLO DE SOFTWARE
Desplazamiento de celdas
.offset-sm-4
DESARROLLO DE SOFTWARE
Alineación vertical
<div class="row align-items-start">
<div class="row align-items-center">
<div class="row align-items-end">
DESARROLLO DE SOFTWARE
Alineación horizontal
<div class="row justify-content-start">
<div class="row justify-content-center">
<div class="row justify-content-end">
<div class="row justify-content-around">
<div class="row justify-content-between">
DESARROLLO DE SOFTWARE
Ocultar y visibilizar celdas
.d-none // oculta la celda
.d-lg-none // oculta la celda en lg
.d-xl-block // muestra la celda en xl como block
.d-md-inline // muestra la celda en md como inline
<div class="col-6 d-none d-md-block">
<!-- Contenido de la columna -->
</div>
DESARROLLO DE SOFTWARE
Alinear contenido en una celda
.float-left
.float-right
.float-none
.mx-auto
también se pueden combinar con el tamaño de viewport
.float-md-left
DESARROLLO DE SOFTWARE
Tipografía
● Encabezados <h1> - <h6>
● Clases .h1 - .h6
● Encabezados .display-1 .display-4
● Texto destacado .lead
● <small> crea un elemento secundario en un encabezado
● <mark> resalta un texto
● <del> texto eliminado
● <blockquote> define una cita
● <code> permite especificar código fuente
● <kbd> permite definir elementos del teclado
DESARROLLO DE SOFTWARE
Tipografía
.text-muted .text-primary .text-success .text-info .text-warning .text-danger
Este texto está silenciado.
Este texto es importante.
Este texto indica éxito.
Este texto representa información.
Este texto representa una advertencia.
Este texto representa peligro.
.text-center .text-right
.bg-primary .bg-success .bg-info .bg-warning .bg-danger
Este texto es importante.
Este texto indica éxito.
Este texto representa información.
Este texto representa una advertencia.
Este texto representa peligro.
DESARROLLO DE SOFTWARE
Navegación
.navbar
.navbar-default
.navbar-toggler
.navbar-brand
DESARROLLO DE SOFTWARE
Imágenes
.img-fluid
.img-thumbnail
Imagen responsive
class="img-fluid" style="width: 100%;height: auto;"
DESARROLLO DE SOFTWARE
Botones
Las clases de botón se pueden aplicar a los siguientes elementos: <a>, <button>, <input>
.btn-default
.btn-primary
.btn-success
.btn-info
.btn-warning
.btn-danger
.btn-link
DESARROLLO DE SOFTWARE
Botones
Tamaño
.btn-lg
.btn-md
.btn-sm
.btn-xs
Activo / Deshabilitado
.active
.disabled
DESARROLLO DE SOFTWARE
Tablas
.table
.table-dark
.thead-dark .thead-light
.table-striped /* para hacer que las filas alternen color */
.table-bordered .table-borderless
.table-hover /* fondo de color gris sobre fila posicionada */
.table-sm /*elimina espacios entre filas */
DESARROLLO DE SOFTWARE
Formularios
.form-group .form-inline
.form-control placeholder=""
DESARROLLO DE SOFTWARE
Bootstrap y React - Problemas
Bootstrap no es compatible al utilizarlo directamente con React ya que:
• Bootstrap manipula a veces el dom: React y bootstrap pueden entrar
en conflicto al manipular el DOM directamente, lo que puede causar
errores inesperados
• Estilos globales: Bootstrap aplica estilos globales que pueden
interferir con el diseño y los estilos de los componentes de React
• Modificación del DOM: React utiliza un DOM virtual, mientras que
Bootstrap modifica el DOM real, lo que puede generar
incompatibilidades
DESARROLLO DE SOFTWARE
Bootstrap y React - Soluciones
• React-Bootstrap: Una biblioteca que combina la funcionalidad de
Bootstrap con la arquitectura de React, eliminando la dependencia
de jQuery
DESARROLLO DE SOFTWARE
SPA - Desarrollo web con (Single Page Application)
● SPA permite una experiencia fluida y rápida al usuario, cargando solo el contenido
necesario.
● Facilita la interacción con el sitio sin necesidad de recargar la página completa.
● Se basa en tecnologías como HTML, CSS, JavaScript y frameworks populares (React,
Angular, [Link]).
● Ventajas: menor tiempo de carga, mejor rendimiento, fácil escalabilidad y
adaptabilidad a dispositivos móviles.
● Desafíos: SEO, accesibilidad y complejidad en la gestión del estado de la aplicación.
DESARROLLO DE SOFTWARE