CONSULTA LIBRERÍA O FRAMEWORKS PARA CSS

(BOOTSTRAP)

TALLER MULTIMEDIA

DIEGO EDUARDO CRUZ RODRIGUEZ

COD.55218002
WALTER FABIÁN SILVA DÍAZ
COD. 55219014
DANIEL ESTEBAN REYES REYES
COD.55218003
BRAYAM ORLANDO ROJAS
Cod: 55218001

PROFESOR:
INGENIERO JOSÉ MAURICIO FONSECA MOLANO

UNIVERSIDAD DE BOYACÁ
FACULTAD DE CIENCIAS E INGENIERÍA
INGENIERÍA DE SISTEMAS
TUNJA
2022
 }Tabla de Introducción

Contenido
Tabla de Introducción 2
1. ¿Qué es HTML? 3
2. ¿Qué es CSS? 4
3. ¿Qué es JAVASCRIPT? 5
4. ¿Qué es un Sitio Web? 5
5. ¿Qué es un Aplicativo Web? 6
6. ¿Qué es Cliente Servidor? 8
7. ¿Qué es un dominio? 8
9.¿Qué es hosting? 10
13. ¿Qué es Wireframe? 13
14. ¿Qué es un User Flow? 14
16. ¿Qué es un sistema de control de versiones? 16
Referencias 18
Bibliografía 18
 1. ¿Qué es Boostrap?

Bootstrap es un entorno de trabajo especialmente diseñado para utilizar con los lenguajes de
programación web HTML, CSS y JavaScript. El objetivo de este framework es facilitar que los
programadores puedan crear interfaces limpias y adaptadas a dispositivos móviles de forma sencilla y
eficiente.

En los últimos años Bootstrap se ha convertido en una de las herramientas favoritas a la hora de diseñar
páginas web y apps móviles debido a su facilidad y funciones especiales que facilitan la adaptación de
estas a cualquier dispositivo.

Figura 1. ¿Qué es Boostrap?

¿Cómo funciona Bootstrap?

Bootstrap está constituido por una serie de archivos CSS y JavaScript responsables de asignar
características específicas a los elementos de la página.

Hay un archivo principal llamado bootstrap.css, que contiene una definición para todos los estilos
utilizados. Básicamente, la estructura del framework se compone de dos directorios:

css: Contiene los archivos necesarios para la estilización de los elementos y una alternativa al tema
original;
js: Contiene la parte posterior del archivo bootstrap.js (original y minificado), responsable de la
ejecución de aplicaciones de estilo que requieren manipulación interactiva.
Grilla o Grid System
Lo más importante de entender en un principio es el sistema de grillas que plantea la librería Bootstrap.
El esquema de página que nos propone Bootstrap está compuesto por filas y columnas. En cada fila se
puede definir de 1 hasta 12 columnas. Cada columna posee un ancho relativo a ese número 12.
Para esto, aparece el concepto de “colapsar”, éste hace referencia a lo que sucede cuando la pantalla del
dispositivo en el que estoy viendo la página se achica y el contenido ya no entra en la cantidad de
columnas que le asigné, entonces colapsa y las columnas que le asigné quedan sin efecto. Esto no se hace
automático, esto lo tenemos que asignar nosotros con el tipo de columnas lg md sm xs.

Para ver y entender cómo creamos las columnas en cada fila y cómo colapsan según el ancho del
dispositivo podemos analizar el siguiente caso:

Ejemplo con codepen:

Si abrimos esta página en un monitor con un ancho superior a 1200 px podemos ver que se muestran 3
columnas por fila:

Figura 2. Grid System.

Debemos utilizar la clase “row” para indicar el comienzo de una fila. Dentro de la fila dispondremos
tantos div como columnas tenga dicha fila. Para indicar el tipo de columna debemos utilizar la siguiente
sintaxis:

col-lg-*

El lugar donde aparece el asterisco deberá ser reemplazado por un valor entre 1 y 12 (en nuestro ejemplo
hemos dispuesto un 4, esto quiere decir que quedan 8 unidades de columna para repartir entre las otras
columnas).

En nuestro ejemplo cada una de las columnas tiene un valor 4 (siempre la suma de dichos valores de una
fila debe sumar 12 o quedarán columnas vacías en dicho caso).

Como asignamos 4 unidades a cada columna las 3 columnas tienen el mismo ancho:

<div class="row">
<div class="col-lg-4" style="background-color:#aaa">
<h1>Columna 1</h1>
<p>Esto es una prueba de bootstrap.</p>
</div>
<div class="col-lg-4" style="background-color:#bbb">
<h1>Columna 2</h1>
<p>Esto es una prueba de bootstrap.</p>
</div>
<div class="col-lg-4" style="background-color:#ccc">
<h1>Columna 3</h1>
<p>Esto es una prueba de bootstrap.</p>
</div>
</div>
Figura 3.Ejemplo.

Opciones del Grid.

 Figura 4.Opciones del Grid.

¿Cómo Instalar Bootstrap?

Hasta la fecha de este Post Bootstrap se encuentra en la versión 5.0.2 y para usarlo en un sitio web,
debemos ir a la página oficial de Bootstrap, luego debemos hacer clic en el botón que dice Download.

Figura 4. Bootstrap 5.https://blog.nubecolectiva.com/como-crear-una-pagina-web-con-bootstrap-5-

parte-1/

Ahora nos aparecerá la página para Descargar Bootstrap 5, en ella podemos encontrar diferentes maneras

de usar este Framework, podemos descargar los archivos de Bootstrap 5, podemos usar un CDN o si

estamos en Node JS podemos usar un comando npm para instalarlo, lo mismo con yarn. Adicionalmente

hay opciones para instalarlo como una gema de Ruby, también con Composer y NuGet.

Yo voy a descargar los archivos compilados de Bootstrap 5, es decir los archivos CSS y JavaScript, de
los cuales solo usaré una sola versión, de preferencia la versión mínima para que no la carga de la web

no sea tan pesada. Hago clic en el botón Download.

Figura 5. Bootstrap 5.https://blog.nubecolectiva.com/como-crear-una-pagina-web-con-bootstrap-5-

parte-1/

Luego de hacer clic en el botón Download, se me descargará un archivo llamado bootstrap-5.0.2-dist.zip

(El nombre puede cambiar en futuras versiones de Bootstrap). Abro el archivo y dentro de él hay 2

directorios uno llamado css y otro llamado js. Estos directorios los colocó en el directorio principal en

donde crearé las vistas HTML de mi proyecto.

Tanto el directorio css como el directorio js, traen varios archivos, yo usaré el archivo CSS

bootstrap.min.css y el archivo JavaScript bootstrap.bundle.min.js para el sitio web.

 Figura 6. Bootstrap 5.https://blog.nubecolectiva.com/como-crear-una-pagina-web-con-bootstrap-5-

parte-1/

El archivo CSS bootstrap.min.css lo debe colocarse antes de cerrar la etiqueta </head> y el archivo

JavaScript bootstrap.bundle.min.js lo debe colocar antes de la etiqueta de cierre </body>, para tener

una idea, veamos el código.

 Figura 7. Bootstrap 5.https://blog.nubecolectiva.com/como-crear-una-pagina-web-con-bootstrap-5-

parte-1/

Hasta aquí ya tenemos integrado Bootstrap 5 en nuestra página web.

 1. Características

La versión de Bootstrap 5, que es la última, no es compatible con JQuery, esto ya que facilita el trabajo

con JavaScript, garantizando proyectos más ligeros, además de garantizar una mejor experiencia de

usuario.

Figura 1. Bootstrap 5, Logo. https://cdn.worldvectorlogo.com/logos/bootstrap-5-1.svg

Se usan variables CSS, esta técnica se conoce como Sass y Less, las variables en CSS facilitan el diseño

con CSS y permiten crear diseños de páginas más modernos.

Grid CSS, desde la versión 4 de Bootstrap se tiene el uso de Grids o Cuadrículas en CSS, esto brinda

una facilidad a la hora del desarrollo Web, además con Bootstrap 5 se hacen uso de extensiones, lo que

introduce un tamaño adicional y más clases para el espacio vertical.

Compatibilidad y uso de Hugo en Bootstrap 5, el cual es una herramienta generadora de sitios

estáticos escrito en el lenguaje de programación Go, esta no requiere de ningún software y garantiza gran

velocidad en Webs.

Figura 2. Hugo, Logo.

https://desarrolloweb.com/storage/tag_images/actual/8CcDKcmWpejM1pRQjubgWCu0w9yp9tkL50Zul

CBX.png

Posee una documentación técnica clara, ideal tanto para usuarios nuevos como experimentados.

Escritura de derecha a izquierda (RTL), los idiomas que se escriben de derecha a izquierda tendrán

mejor compatibilidad en el futuro.

Menús fuera de lienzo, con los menús fuera de lienzo, aumentarán las posibilidades de diseño de los

menús.
SVG en HTML, actualmente, los archivos SVG se incrustan a través de CSS. Próximamente, podrá

usarse el código HTML en su lugar.

Diseño responsive, Bootstrap permite la adaptación de página según el tipo de dispositivo empleado. El

framework funciona con la estilización de elementos div y uso de class container.

Posee gran cantidad de componentes a usar, esto con el objetivo de brindar una mejor interacción y

comunicación con el usuario.

2. Ventajas y Desventajas

Ventajas

● Cuenta con un mantenimiento y actualización realizados por Twitter: Esto no quiere decir que
esta herramienta sea perfecta, pero gran parte del trabajo interno ya está llevado a cabo por sus
creadores.
● Ofrece un paquete de elementos web customizables: Con Bootstrap puedes diseñar una web
jugando con sus elementos compuestos por diferentes combinaciones de HTML, CSS y
Javascript, de manera que las piezas siempre encajan.
● Utiliza componentes vitales para los desarrolladores: Como HTML5, CSS3, jQuery o GitHub,
entre otros.
● Sus plantillas son de sencilla adaptación responsive: Se desarrolló con la idea de facilitar el
proceso de adaptación web a todo tipo de dispositivos.
● Incluye Grid system: Muy útil para maquetar por columnas.
● Se integra con librerías JavaScript.
● Usa Less: Un lenguaje de las hojas de estilo CSS preparado para enriquecer los estilos de la web.
● Es una herramienta de uso ágil y sencillo: Facilita enormemente el diseño de interfaces y además
incluye por defecto una plantilla bastante optimizada.
● Contiene tutoriales: Este framework facilita mucha documentación para resolver dudas, tanto a
principiantes como a desarrolladores expertos.
● Cada vez incluye más características gracias a la aparición de nuevos plugins de terceros.

Figura 5. Ventajas https://www.google.com/url?sa=i&url=https%3A%2F%2Fterapiayemociones.com

%2F2016%2F05%2F19%2Fventajas-de-ser-altamente-sensible
%2F&psig=AOvVaw0uNMU1Ch6DNgIBz3xvvNPW&ust=1646594824455000&source=images&cd=vf

e&ved=0CAsQjRxqFwoTCMjLlO_Zr_YCFQAAAAAdAAAAABAD.

Desventajas

● Se recomienda trabajar con Bootstrap desde el inicio de un proyecto, ya que si se quiere incluir el
framework en un trabajo ya iniciado algunos estilos podrían “romperse” y se tendría que ajustar a
como se tenía en un principio, y eso puede ser un poco tedioso y molesto.
● Es complicado cambiar de versión si se han realizado modificaciones profundas.
● No es ligero, y además, para algunas funcionalidades, será necesario tener que usar Javascript y
jQuery.
● Debe adaptar el diseño a un grid de 12 columnas, que se modifican según el dispositivo. Aquí
empiezan los problemas, Bootstrap por defecto trae anchos, márgenes y altos de línea, y realizar
cambios específicos.
● Optimización. Bootstrap contiene mucho código para componentes, iconos, rejillas, etc. Si solo
vamos a usar una pequeña parte del framework no tiene sentido cargar todas sus utilidades.
● Código HTML complejo. Nuestro código HTML tendrá que ser modificado para crear los
contenedores tal como Bootstrap necesita para cargar en ellos ciertos componentes. A veces las
soluciones HTML no son las más sencillas y nos obliga a generar un código mayor del que sería
necesario si lo hiciéramos a mano.
● Diseños muy similares entre sí. Si no personalizamos el diseño de nuestro sitio y no
personalizamos el tema gráfico de Bootstrap, obtendremos un diseño bastante aparente, pero
infelizmente parecido a otros millares de sitios de Internet.
Figura 7. Ventajas,https://www.novatrans.es/wp-content/uploads/ventajas-del-transporte-por-carretera-

desventajas.png

3. Sitios web o apps donde se aplique

Ya como se ha planteado anteriormente podemos definir a bootstrap como un

framework de código abierto haciendo que su uso sea libre, pero en algunos casos
podemos pensar que solo paginas pequeñas lo usan pero las ventajas que este le ofrece
a desarrolladores web son tales que las siguientes páginas o aplicaciones conocidas que
usan esta herramienta:
- Spotify:

Figura 1:Logo de Spotify.

Creada en 2007 por Daniel Ek en sociedad con Martin Lorentzon lanzaron a l
mercado un aplicativo web que estuviera en contra de la pirateria pero al
comienzo fue complicado por el tema de las licencias por lo que solo se
limitaron a algunos países de Europa, este fue su primer diseño.

Figura 2: Primera versión 2007.

En esta versión observamos algo básico más por ser su primera versión pero
también es por que en Bootstrap fue lanzado hasta 4 años después dándole este
aspecto.

Figura 3: Segunda versión 2008

Con esta versión se pulen más detalles y mejora en el apartado visual.
 Figura 4: Tercer diseño 2012.
En esta versión se incluyó Bootstrap mejorando el apartado visual.

Figura 4: versión actual.

Esta versión es más simple pero presenta un aspecto más cuidado y pulido.
- Twitter:

Figura 5: Logo de Twitter

Esta página y aplicación es obligación incluirla puesto que Bootstrap surgió
como una medida para mejorar el apartado visual de este aplicativo pero poco
después este se transformó en una herramienta de código abierto donde cualquier
página o empresa podía usarse este apartado de forma libre e implementarlo en
frontend de sus páginas o aplicaciones.

Figura 6: Primeros diseños de twitter.

Este diseño estaba por el año 2010 donde momentos después se cambió su
diseño pero en esta parte comenzamos a ver cómo ha evolucionado el desarrollo
web donde más que tener apartados visuales elaborados, en la actualidad se
busca simplicidad a la hora de mostrar la información al usuario donde es mejor
un producto simple pero bien diseñado a un producto saturado y que canse al
usuario.

Figura 6: Diseño actual de twitter.

En esta parte podemos ver el diseño actual, más simple pero cumple su función
de lo que es su página.
 Cuadro Comparativo
METODOLOGÍA BEM
Añade especificidad: Usa un selector único
para cada regla, lo que permite reducirla y hacer elementos compuestos por diferentes
menos repeticiones.
Aumenta la independencia: Los bloques se
pueden mover a cualquier parte del documento,
sin afectar los estilos.
Mejora la herencia múltiple: Se puede
cambiar cualquiera de las tres partidas sin
afectar a las demás.
Permite la reutilización: Es posible reciclar
ciertas áreas de código desde un proyecto hacia
otro, esto debido a la no existencia de
dependencias mayores en cuanto a la
implementación de cada uno de los bloques
estructurados.
Entrega simplicidad: Permite un fácil
entendimiento una vez conocido el proceso
lógico sobre el cual se basa. A su vez, las
convenciones a la hora de nombrar las clases
permiten tener un control absoluto al saber a
qué, quién y hacia dónde hacemos referencia
dentro de una estructura.
Las convenciones pueden ser muy largas.
A algunas personas les puede tomar tiempo
aprender la metodología.
BOOTSTRAP
Puedes diseñar una web jugando con sus
combinaciones de HTML, CSS y Javascript.
Incluye Grid system: muy útil para maquetar
por columnas.
El theme que ofrece por defecto está bastante
optimizado; además podemos modificarlo o
crear nuestro propio theme sin problema
alguno.
Bootstrap nos ofrece distintas herramientas
para extender nuestro framework, así como
adaptarlo a nuestras necesidades y
características.
Entrega simplicidad: Permite un fácil
entendimiento una vez conocido el proceso
lógico sobre el cual se basa. A su vez, las
convenciones a la hora de nombrar las clases
permiten tener un control absoluto.
Las etiquetas o clases de Bootstrap son
nombradas lo más simples posible con tal de
ahorrar espacio y entregar un mejor
rendimiento en la página.
Se trata de una herramienta muy sencilla de
utilizar, adaptada a cualquier programador y
que permite crear grandes sitios web en poco
 tiempo.

El sistema de organización puede ser difícil de Facilita enormemente el diseño de interfaces y

implementar en proyectos pequeños. además incluye por defecto una plantilla
bastante optimizada.

Usa SASS o LESS Usa Less: un lenguaje de las hojas de estilo

CSS preparado para enriquecer los estilos de la
web.

En cuestiones de tiempo consume bastante a la A la hora de Implementarla no consume mucho

hora de implementarla. tiempo gracias a su facilidad.
Bibliografía

Zúñiga, F. G. (2022, 14 enero). ¿Qué ventajas ofrece Bootstrap en el diseño responsive? Blog de

arsys.es. https://www.arsys.es/blog/programacion/bootstrap-responsive

Fernández, J. J. (2020, 5 agosto). 8 razones por las que debes utilizar Bootstrap para tu web. tooltyp.

https://www.tooltyp.com/8-razones-por-las-que-debes-utilizar-bootstrap-para-tu-web/

S. (2020, 18 agosto). Ventajas y desventajas de usar Bootstrap. Agencia Creativa | HORIZONTE.

https://soyhorizonte.com/blog/ventajas-y-desventajas-de-usar-bootstrap/

Sánchez, V. (2021, 23 septiembre). ¿Cuáles son las novedades de Bootstrap 5? Blog SEO, Diseño Web

& Gráfico | Caronte Web Studio Vitoria-Gasteiz. https://carontestudio.com/blog/novedades-de-

bootstrap-5/

Web, D. (2020, 2 octubre). Bootstrap 5: novedades en el framework CSS. IONOS Digitalguide.

https://www.ionos.es/digitalguide/paginas-web/desarrollo-web/bootstrap-5/

Author, G. (2021, 12 febrero). Bootstrap: guía para principiantes de qué es, por qué y cómo usarlo.

Rock Content - ES. https://rockcontent.com/es/blog/bootstrap/

Hugo. (s. f.). Desarrollo Web. https://desarrolloweb.com/home/hugo

Pastor, J. (2018, 7 octubre). Así ha cambiado Spotify tras 10 años revolucionando la forma en la que

disfrutamos de la música. Xataka. https://www.xataka.com/musica/asi-ha-cambiado-spotify-10-anos-

revolucionando-forma-que-disfrutamos-musica

De ser rechazado por Google a crear Spotify. Infografia Historia Spotify. (s. f.). Histografias.

https://histografias.com/infografia-historia-spotify-daniel-ek.html

Sanz, E. (2015, 20 abril). Twitter cambia su página de inicio. MuyInteresante.es.

https://www.muyinteresante.es/tecnologia/articulo/twitter-cambia-su-pagina-de-inicio

López, M. A. (2020, 4 agosto). Conoce Bootstrap: ¡programar jamás fue tan fácil!

https://www.crehana.com. https://www.crehana.com/cl/blog/desarrollo-web/que-es-bootstrap/