UNIVERSIDAD DE LAS FUERZAS ARMADAS-ESPE SEDE SANTO

DOMINGO
DEPARTAMENTO DE CIENCIAS DE LA COMPUTACIÓN - DCCO-SS

CARRERA DE INGENIERÍA EN TECNOLOGÍAS DE LA INFORMACIÓN

PERIODO : octubre – febrero 2022

ASIGNATURA : Aplicación de Tecnologías Web

TEMA : Uso de CSS básico (GRID)

NOMBRES : Jordy Jose Llano Ibarra

NIVEL-PARALELO : 5to

DOCENTE : Ing. Luis Castillo

FECHA DE ENTREGA : 08/11/2022

SANTO DOMINGO - ECUADOR

2021 - 2021
1. Introducción

En el siguiente informe se detallará el laboratorio sobre Grid con ejercicios y con

una actividad donde se puso en práctica todo lo aprendido, CSS Grid proporciona

un sistema de diseño basado en cuadrículas con filas y columnas para diseñar

fácilmente páginas web sin utilizar flotadores ni posiciones.

Es por esta necesidad que se han agregado muchas mejoras y funciones a este

sistema de cuadrículas, lo que le permite crear rápidamente cuadrículas flexibles y

potentes utilizando la nueva familia de propiedades CSS casi al instante.

2. Sistemas de Objetivos
2.1. Objetivo General:

• Realizar la práctica del laboratorio.

• Analizar el uso de Grid y entender su concepto.

2.2. Objetivos Específicos:

• Identificar los diferentes estilos.

• Conocer y aplicar los elementos necesarios de Bosstrap.

3. Desarrollo

GRID

Haciendo uso de la documentación de bosststrap se usó los elementos como

(row) para la creación de filas y(col) para la creación de columnas con los

agregados de la herramienta nos ayuda a que estas sean de manera responsive.

Alinear verticalmente

El uso de los elementos como (row align-items-start) y ("col align-self-start). Nos

permite alinear los elemento de manera ordenada utilizando (start,center,end) esto de

usa depende que orden queremos dar ya sea a los ítems en conjuntos con (Items) o a su

vez de manera individual según la asignación que cada ítems con align.

Alinear horizontalmente

Utilizando el elemento (row justify-content-) nos permite dar posicionamiento y

adaptabilidad a los elementos que tenemos dentro de nuestro contenedor así mismo

haciendo uso de las posiciones existentes como (start, center, end, around, between) a

continuación podemos visualizar las posiciones puestas por cada una de estas

posiciones.
 Offseting (espaciado manual)

Usando el elemento (offset-1) nos permite dar una posición exacta dependiendo la

escala de offset que escojamos de manera de que existe (offset-1, offset-2, offset-3).

Reordenamiento de columnas

Usando el elemento (order-md-1) nos permite dar una posición exacta dependiendo la

escala de offset que escojamos de manera de que existe (order-md 2, order-md-3).

Columnas anidadas

El elemento (columna col-md-6) nos permite crear columnas dentro de una columna asi

mismo danto posición y a cada una de las columnas padre creadas.

ACTIVIDAD

Header: nombres completos Main: Biografía Aside: Foto Elementos celestes: Fortalezas,
debilidades, habilidades Footer: Aplicación de Tecnologías Web para el Desarrollo de
Sistemas NRC 6405.
4. Conclusiones

• Se concluye que se realizó las diferentes actividades sobre grid así mismo

se utilizó bosststrap para una mejor adaptación a la página web. Al final se

pudo realizar un ejemplo aplicando todo lo obtenido y aprendido en las

actividades propuestas del Laboratorio.

• Las herramientas de bosstrap nos permitió automatizar código en tanto a la

posición y adaptabilidad que requerimos para la creación de nuestras

páginas web.

5. Recomendaciones

• Se recomienda utilizar bosstrap, ya nos permite obtener un mejor resultado

en cuando rapidez y adaptabilidad.

• Grid permite tener un orden específico con nuestros contenedores donde es

necesario su utilización para distribución de elementos a nuestra página

web.
6. Bibliografía/ Referencias