Está en la página 1de 10

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 : Noviembre 2020 - Abril 2021

ASIGNATURA : Aplicación Tecnologías Web

TEMA : Investigación CSS básico. Concepto, principios y


fundamentos. Grids, y tipografías, imágenes, alertas y botones, contenedores e interacciones.

NOMBRES : Carguacundo Adonnis

NIVEL-PARALELO : 5to “A”

DOCENTE : Ing. Luis Castillo. MSc.

FECHA DE ENTREGA : 04/12/20

SANTO DOMINGO - ECUADOR

2020
Contenido

2. Sistemas de Objetivos...................................................................................................3

2.1. Objetivo General:.....................................................................................................3

Conocer las funciones que contiene CSS conjunto con los grids, contenedores, imágenes y alertas

que se utilizan para desarrollar un sitio web..............................................................................3

2.2. Objetivos Específicos:...............................................................................................3

4. Conclusiones.................................................................................................................... 9

5. Recomendaciones............................................................................................................. 9

6. Bibliografía/ Referencias................................................................................................10
1. Introducción

Por medio del presente informe, daremos a conocer el concepto básico de CSS, y a su

vez el módulo de diseño de cuadrícula CSS junto con sus botones y contenedores en

CSS. Primero que nada, CSS un lenguaje de hoja de estilo que se creó para controlar

la apariencia o presentación de documentos electrónicos que se han definido mediante

HTML y XHTML. CSS es la mejor manera de separar el contenido y la presentación,

el cual es esencial para crear páginas web complejas. Asimismo, los Grids son un

método de diseño centrado en cuadrículas, formado por filas y columnas que nos

ayudarán con el diseño de la página web, mientras que los contenedores nos ayudan a

expandir los elementos para completar el espacio libre o los suprime para tratar de

eludir espacios vacíos en el área prevista.

2. Sistemas de Objetivos
2.1. Objetivo General:

Conocer las funciones que contiene CSS conjunto con los grids, contenedores,
imágenes y alertas que se utilizan para desarrollar un sitio web.

2.2. Objetivos Específicos:


2.2.1. Conocer el conecto de CSS

2.2.2. Comprender el uso de Grids en CSS

2.2.3. Identificar el comportamiento de los contenedores en CSS

2.2.4. Mostrar el uso de botones e imágenes en CSS

3. Desarrollo

¿Qué es CSS?

La institución W3C (World Wide Web Consortium), fue responsable de crear todos
los estándares relacionados con la web y surgió crear un lenguaje de estilo específico
para el lenguaje HTML. Se presentaron nueve propuestas, de las cuales solo dos se
tomaron en cuenta y fueron CHSS (Cascading HTML Style Sheets) y la SSP (Stream-
based Style Sheet Proposal). Con el paso del tiempo, W3C apostó por el progreso y la
normalización de CSS.

Como HTML, CSS (Cascading Style Sheets) o Cascading Style Sheets en español, no
es un lenguaje de programación ni un lenguaje de marcado. Es un lenguaje de hoja de
estilo que le permite aplicar estilos de manera selectiva a elementos en documentos
HTML. Por ejemplo, si desea seleccionar todos los elementos de párrafo en una
página HTML y colorear el texto dentro de ellos de rojo [ CITATION MDN20 \l 2058 ].
Como referencia tenemos lo siguiente:

Figure 1 Uso de CSS.

Uso de Grids en CSS

El módulo de diseño de cuadrícula CSS proporciona un sistema de diseño basado en


cuadrículas con filas y columnas que facilita el diseño de páginas web sin la necesidad
de posicionamiento y números de coma flotante[ CITATION WTo15 \l 2058 ]. A
continuación, vamos a mostrar un diseño de cuadrícula formada de un elemento
principal, con distintos elementos secundarios:

Figure 2 Elementos de cuadrícula.

Una vez definido los elementos de cuadrícula (sin tomar en cuenta el código del color
utilizado) vamos a obtener el siguiente resultado.
Figure 3 Desarrollo final de los elementos de cuadrícula.

Propiedad de Visualización

Cualquier elemento HTML se transforma en Grid cuando su display propiedad se


implementa en cuadrícula, ejemplo:

Figure 4 Uso de grind parte 1.

Figure 5 Uso de grind parte 2.

Filas de cuadrícula

Las líneas horizontales de los elementos de la cuadrícula se denominan filas.

Figure 6 Filas de cuadrícula.

Brechas de cuadrícula

Los espacios entre cada columna y fila se denominan espacios.


Figure 7 Brechas de cuadrícula.

Para adaptar el tamaño del espacio vamos a utilizar uno de los siguientes atributos:

 Grid-column-gap
 Grid-row-gap
 Grid-gap

Líneas de cuadrícula

Las líneas entre columnas se llaman líneas de columna, mientras que las líneas entre
filas se llaman líneas de fila.

Figure 8 Líneas de cuadrícula.

Por ejemplo, para colocar un elemento de la cuadrícula en la línea de cualquier


columna, en este caso la 1, vamos a dejar que termine en la línea de la columna 3,
obteniendo lo siguiente.
Figure 9 Uso de línea entre columna.

Ahora vamos a proceder a colocar un elemento de la cuadrícula en la fila 1 y vamos a


dejar que termine en la fila 3.

Figure 10 Uso de línea entre fila.

Para lograr insertar una imagen vamos a utilizar el atributo “src” (source) en donde
contiene el “path” (ruta o ubicación) de nuestro archivo de imagen. También
abarcamos el atributo “alt” (alternative), en donde contiene un texto que debería
especificar lo que contiene la imagen [ CITATION MDN20 \l 2058 ].

Uso de imágenes en CSS

Para insertar imágenes en CSS vamos a escribir la siguiente línea de código.

Figure 11 Comando para insertar imagen.

Uso de botones en CSS

Para implementar un botón básico en CSS vamos a escribir las siguientes líneas de
código.
Figure 12 Código para un botón básico.

Para lograr insertar una imagen vamos a utilizar el atributo “src” (source) en donde
contiene el “path” (ruta o ubicación) de nuestro archivo de imagen. También
abarcamos el atributo “alt” (alternative), en donde contiene un texto que debería
especificar lo que contiene la imagen [ CITATION MDN20 \l 2058 ].

Posición y comportamiento de contenedores en CSS

En esta sección, revisaremos el comportamiento de los contenedores en CSS. Vamos


a desarrollar una tabla en donde especificaremos los contenedores que se utilizan en
CSS [ CITATION ACa10 \l 2058 ].

Propiedad Descripción Valores

display Comportamiento del inline | block | inline-


contenedor block | none

position Esquema de static | relative | absolute |


posicionamiento fixed

top, right, bottom, left Desplazamiento de la caja longitud | porcentaje |


respecto al borde superior, auto
derecho, inferior o
izquierdo

float Posicionamiento flotante left | right | none


clear Control de cajas none | left | right | both
adyacentes a las float

z-index Nivel de la capa auto | número entero

box-sizing Control de bordes y content-box | border-box


relleno en el
comportamiento del
contenedor

Tabla 1 Posición y comportamiento de las cajas o contenedores.

Aquí se realiza el desarrollo del laboratorio con capturas de pantallas del proceso paso
a paso. Cada captura debe tener un pie de imagen con la descripción de la misma, y
debajo de la captura un párrafo de descripción de lo que se hizo para llegar a este
paso.

4. Conclusiones

En resumen, CSS es una técnica de creación que tiene como objetivo separar la
estructura de la presentación y mejorar la usabilidad y la experiencia del usuario del
sitio web, lo que permite un desarrollo web receptivo y reduce el tiempo de
procesamiento y carga. Estos factores se pueden utilizar en intentos exitosos o
intentos fallidos. Marca la diferencia entre el tiempo.
Por otro lado, el uso de imágenes, grids, alertas y botones es muy importante para el
desarrollo de una página web, pues en este tiempo es importante para que un sitio web
sea intuitivo y fácil para el usuario que accede a cualquier página.

5. Recomendaciones

Se recomienda tener conocimientos básicos con respecto a CSS, pues es necesario


para poder comprender el funcionamiento de un sitio web.

6. Bibliografía/ Referencias
[1] MDN, «Documentación web de MDN,» 10 11 2020. [En línea]. Available:
https://developer.mozilla.org/es/docs/Learn/Getting_started_with_the_web/CSS_basics#:~:te
xt=CSS%20(Hojas%20de%20Estilo%20en,tal%20lugar%20de%20la%20pantalla%3F.
[2] W. Tompson, «w3schools,» 18 02 2015. [En línea]. Available:
https://www.w3schools.com/css/css_grid.asp.
[3] A. Castillo, «Eniun,» 08 11 2010. [En línea]. Available:
https://www.eniun.com/posicion-comportamiento-contenedores-css/.

También podría gustarte