Análisis y desarrollo

de software.
ID: 3063290
Instructor
Ing. Diego Fernando Calderon Silva
Correo: [email protected]
HTML
¿Qué es HTML?
HTML significa "HyperText Markup Language" (Lenguaje de
Marcado de Hipertexto). Es el lenguaje estándar utilizado
para crear y diseñar páginas web. HTML proporciona la
estructura básica de una página web, utilizando etiquetas
para definir diferentes tipos de contenido, como
encabezados, párrafos, enlaces, imágenes, formularios,
entre otros elementos. Las etiquetas HTML se utilizan para
marcar y estructurar el contenido, y los navegadores web
interpretan estas etiquetas para mostrar la página web
correctamente al usuario
¿Qué es CSS?
CSS, o Cascading Style Sheets (Hojas de Estilo en Cascada),
es un lenguaje utilizado para describir la presentación de
un documento escrito en HTML o XML. CSS se encarga de
cómo se deben mostrar los elementos en la pantalla, en
papel, en el habla u otros medios.
1.Estilización: CSS permite aplicar estilos como colores,
fuentes, espaciamiento, bordes, alineación, y más, a los
elementos de un documento web.
2.Separación de contenido y presentación: CSS facilita la
separación del contenido (HTML) de la presentación
(estilos), lo que mejora la mantenibilidad y la reutilización
del código.
¿Qué es CSS?
1.Selectores: CSS utiliza selectores para apuntar a
elementos específicos en el HTML y aplicarles estilos. Por
ejemplo, puedes seleccionar todos los párrafos (<p>) y
cambiar su color de texto.
2.Cascada: El término "en cascada" se refiere a cómo se
aplican múltiples reglas CSS a un mismo elemento. Las
reglas pueden provenir de diferentes fuentes (hojas de
estilo externas, internas, en línea), y la cascada determina
qué estilos se aplican en base a su especificidad y orden.
3.Responsividad: CSS permite crear diseños responsivos
que se adaptan a diferentes tamaños y tipos de pantallas,
utilizando técnicas como media queries.
Estructura básica de HTML
Empecemos por crear un proyecto nuevo con un index.html y configuraremos algunas
etiquetas como h1,h2,h3 p, hr, br, footer, entre otras de su antojo.
Conceptos básicos.
Si nos fijamos en el navegador, todo lo que acabamos de escribir, está en pantalla de
forma plana, así que podríamos dar un poco de estilos directamente desde el index así;

Si bien es funcional, no es la mejor práctica, es por esto que debemos re organizar

nuestro proyecto para poder trabajar.
Conceptos básicos.
Recordemos que para organizar de una forma coherente nuestro proyecto debemos
generar un sistema de carpetas como el siguiente.
Conceptos básicos.
Y dentro de mi directorio css, creare las hojas de estilos en general.

Ahora, debemos tener en cuenta que en la cabecera del index, atreves de un link,
podemos traer los datos de css así:

Ahora, quiero que mi título sea de color rojo o verde, así que para esto le indicare a la
hoja de css que incluí en index.html que todas las etiquetas h1 van a tener sus letras
del color que quiera:
Conceptos básicos.
Ahora, veamos cómo puedo especificar la etiqueta que quiero afectar, por ejemplo, si
tengo este html
Conceptos básicos.
Podría modificar el contenido de los contenedores indicándole a css la siguiente
Conceptos básicos.
Un punto importante a resaltar es que al
escribir la línea se afectan todos lo
h2 que se encuentren en un div, pero de igual
forma puede ser cualquiera, así que ¿cómo
puedo hacer que sea exclusivamente sobre el
div que quiero?

Para solucionar este problema existen las

clases, y se escriben asignado un nombre
directamente sobre la etiqueta que queremos
Conceptos básicos.
Sobre la etiqueta html cualquiera vamos a
escribir la palabra reservada class y dentro
como queramos nombrarlas asi:

Para luego, desde la hoja de estilo con un .

Antes del nombre, poder acceder a ellas:

Como dato curioso, las clases se pueden

seguir usando en cualquier etiqueta.

Nota:div.class_name ó .class_name en el html

Margin
Margin y Padding son propiedades de CSS que se utilizan para crear espacio alrededor de los elementos
HTML, pero tienen funciones y efectos diferentes:
Margin
El margen (margin) crea espacio fuera del borde de un elemento. Es decir, añade espacio entre el
elemento y sus vecinos externos.

Propiedades de Margin:

• margin-top: Espacio en la parte superior del elemento.

• margin-right: Espacio en la parte derecha del elemento.
• margin-bottom: Espacio en la parte inferior del elemento.
• margin-left: Espacio en la parte izquierda del elemento.
• margin: Puedes especificar los márgenes de todos los lados en una sola declaración (ej. margin: 10px
20px 30px 40px; para superior, derecha, inferior, izquierda).
Padding
Padding
El relleno (padding) crea espacio dentro del borde de un elemento, es decir, entre el contenido del
elemento y su borde.

Propiedades de Padding:
•padding-top: Espacio en la parte superior dentro del borde del elemento.
•padding-right: Espacio en la parte derecha dentro del borde del elemento.
•padding-bottom: Espacio en la parte inferior dentro del borde del elemento.
•padding-left: Espacio en la parte izquierda dentro del borde del elemento.
•padding: Puedes especificar el relleno de todos los lados en una sola declaración (ej. padding: 10px
20px 30px 40px; para superior, derecha, inferior, izquierda).
Margin vs Padding
•Recordemos que: Margin: Afecta el espacio fuera del borde del elemento. Padding: Afecta el espacio
dentro del borde del elemento.
Margin
Veamos en la práctica. Creemos una estructura html únicamente con un div y clase llamada padre
(.padre)
Margin
El resultado será lo siguiente
Margin
Ahora, ¿qué pasa si le doy un margen de 20px?
Tal como observamos, le hemos dado un espacio de 20px arriba, abajo , izquierda y derecha, ya que
podemos observar la separación. Configure una de 120 y observe.
Margin
Ahora, como puedo lograr que solo se separe de una de las esquinas, por ejemplo, ¿de la superior?
Margin
Y ese mismo proceso lo pueden ejecutar para left
right o cualquier borde, pero existe también otra
forma:
Pading
Ahora, para lograr trabajar y entender el pading en la práctica, crearemos un div con una clase hijo dentro
de padre.

Y le daremos lo siguientes estilos.

¿Qué pasa si le doy un margin al hijo?

Se afecta el padre.
Pading
Ahora miremos que pasa con el padding, iniciando desde el padre, ya que este lo que hace es que los hijos
vayan hacia adentro. Veamos.
Pading
Ahora miremos que pasa con el padding, iniciando desde el padre, ya que este lo que hace es que los hijos
vayan hacia adentro. Veamos.
Pading
Tal como pudimos observar en las imágenes anteriores, el padding, hace que el hijo se mueva con el
padre, teniendo un efecto de que se mueve hacia adentro. Recordemos que el padding es un relleno que
hace que el hijo vaya hacía adentro, ahora si aplico un padding al hijo directamente, lo que pasara es que
va a crecer
Pading Vs Margin
•Conclusion:

•Padding: Espacio interno, entre el contenido y el borde

del elemento.

•Margin: Espacio externo, entre el borde del elemento

y sus vecinos externos.
Pading Vs Margin
Formateo de página.
Si analizamos un poco, al poner un contenedor y empezar a darle estilos, nos aparecerá su forma en la web
la cual por defecto tiene un margin, observemos el ejemplo anterior, en donde solo existen padding y no
margin. Esto también se puede setear o formatear, para esto usemos lo siguiente:
Span
En HTML, la etiqueta <span> es un contenedor genérico en línea utilizado para agrupar elementos en línea
con el fin de aplicarles estilos o manipularlos con JavaScript. A diferencia de la etiqueta <div>, que es un
contenedor a nivel de bloque, <span> no introduce un salto de línea antes y después de su contenido.
Características del <span>:

•Elemento en línea: No interrumpe el flujo del texto, es decir, se utiliza dentro de párrafos, listas, enlaces,
etc.
•Contenedor genérico: No tiene un significado semántico especial, simplemente agrupa contenido para
fines de estilización o scripting.
•Estilización y Manipulación: Es común usar <span> para aplicar estilos CSS o para seleccionar partes del
contenido con JavaScript.
Span
a
Flexbox
Flexbox (Flexible Box Layout Module) es un modelo de diseño de CSS que proporciona una manera más
eficiente de distribuir espacio entre los elementos de un contenedor, incluso cuando su tamaño es
desconocido y/o dinámico. Flexbox está diseñado para mejorar la capacidad de alineación y distribución en
una dimensión (ya sea una fila o una columna).

Características de Flexbox

•Alineación y distribución de espacio: Flexbox facilita la alineación de elementos y la distribución del

espacio dentro de un contenedor, tanto horizontal como verticalmente.
•Dirección del diseño: Permite cambiar la dirección en la que se distribuyen los elementos (fila o columna).
•Orden de los elementos: Flexbox permite cambiar el orden de los elementos sin alterar el HTML.
•Crecimiento y encogimiento: Los elementos pueden crecer para llenar el espacio disponible o encogerse
para evitar el desbordamiento.
Flexbox
Conceptos Clave
1. Contenedor Flex (flex container): El elemento padre al que se le aplica display: flex; o display: inline-
flex;.

2. Ítems Flex (flex items): Los elementos hijos directos del contenedor flex.

Propiedades del Contenedor Flex

•flex-direction: Define la dirección de los ítems flex (fila, columna, fila inversa, columna inversa).
Flexbox
• justify-content: Alinea los ítems a lo largo del eje principal (start, end, center, space-between, space-
around, space-evenly)

• align-items: Alinea los ítems a lo largo del eje transversal (stretch, center, start, end, baseline).

• flex-wrap: Controla si los ítems se envuelven o no dentro del contenedor (nowrap, wrap, wrap-reverse).
Flexbox
Propiedades de los Ítems Flex

• order: Cambia el orden de un ítem flex dentro del contenedor.

• flex-grow: Define la capacidad de un ítem para crecer si es necesario.

• flex-shrink: Define la capacidad de un ítem para encogerse si es necesario.

Flexbox
• flex-basis: Define el tamaño inicial del ítem antes de que el espacio restante sea distribuido.

• align-self: Permite alinear un ítem en particular de manera diferente a los otros ítems flex.
Display flex
Este modulo hace que nuestra pagina sea adaptable a celulares o como se conoce habitualmente,
responsive.

Como ya vimos en la teoría, flexbox nos permite determinar cómo se van a comportar nuestros
contenedores dentro de nuestra web
Display flex
Basado en lo que enseña: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ debemos tener en cuenta
que primero: Un padre que contiene hijos es a quien debemos aplicar la propiedad de flex, es decir hacerlo
flexible.

Osea que en nuestro caso, tenemos al padre de color gris y 3 hijos de diferentes colores. Entonces yo quiero
aplicar a mi padre la propiedad de flexbox así:
Display flex
Perfecto, pero ahora tenemos los hijos en una sola columna con 3 filas

Y según la documentación, esto puede cambiar así:

Display flex
De otra forma se vería asi:
Flex wrap
Existe una teoría inversa que nos dice que podemos usar el método reverse para invertir la columna asi:
sin reverse con reverse
Flex wrap
Centrémonos ahora antes de llegar al wrap en centrar los
contenidos
Flex wrap
También existe la forma de alinear ítems, esto es una forma
de alinear pero directamente a los hijos, si no a los padres
como lo veníamos haciendo.
Muestra de ello es que los padres cuando se mandan con
flex-start, se van de derecha a izquierda, mientras que los
hijos de arriba abajo. Ahora, como logro centrar el
contenedor ya que actualmente lo veo en la parte alta del
navegador.

Con vh, le estamos diciendo que la altura se adapte a tu

Flex wrap
Flex wrap nos enseña que de forma predeterminada, todos los elementos flexibles intentaran encajar en
una línea. Puede cambiar eso y permitir que los elementos se ajusten según sea necesario con esta
propiedad
Flex wrap
Flex wrap nos enseña que de forma predeterminada, todos los elementos flexibles intentaran encajar en
una línea. Puede cambiar eso y permitir que los elementos se ajusten según sea necesario con esta
propiedad
GAP
La propiedad gap controla explícitamente el espacio entre
los elementos flexibles. Se aplica ese espaciado solo entre
los elementos que no están en los bordes exteriores.
Flexbox
• Caso de uso 1.
Flexbox
• Resultado Caso de uso 1.
Flexbox
• Es hora de trabajar: Recree la siguiente imagen

Normal Responsive
Centrar un Div
• El día a día está cargado de desinformación y siempre satanizan el hecho de centrar un div, así que
dediquemos un momento a aprender cómo hacerlo.

Para esta práctica empecemos por crear un div dentro de un div

Centrar un Div
• El día a día está cargado de desinformación y siempre satanizan el hecho de centrar un div, así que
dediquemos un momento a aprender cómo hacerlo.

Para esta práctica empecemos por crear un div dentro de un div

Centrar un Div
Ahora busquemos como centrar el div hijo (.uno)

Primero en container que es el padre ponemos un flex box

Padre(.container) Primer hijo(.boxcontainer)

Posición fixed
En HTML y CSS, la propiedad position define el método de posicionamiento de un elemento en un
documento. Uno de los valores que puedes asignar a esta propiedad es fixed.

position: fixed

Un elemento con position: fixed se posiciona de manera relativa a la ventana del navegador, y no se mueve
cuando se desplaza la página. Es decir, permanece fijo en una posición específica, independientemente del
desplazamiento del contenido de la página.
Características:

1.Posicionamiento Relativo a la Ventana del Navegador: El elemento se posiciona en función de la ventana

del navegador, no del contenedor padre.
2.No se Desplaza con el Contenido: Permanece fijo en la misma posición incluso cuando el usuario hace
scroll en la página.
3.Uso de Propiedades de Posicionamiento: Puedes usar propiedades como top, right, bottom y left para
definir la posición del elemento.
Posición fixed
Veamos un posicionamiento fijo, en practica:
Posición relativa y absoluta.
En CSS, las propiedades position: relative y position: absolute son dos métodos diferentes para posicionar
elementos en una página web. Cada uno tiene sus propias características y se utiliza en diferentes contextos
según las necesidades de diseño.

position: relative

Un elemento con position: relative se posiciona en función de su posición original en el flujo del
documento. Esto significa que el elemento se desplaza desde su posición original en el contenedor, sin
afectar la posición de otros elementos.

Características:

1.Posicionamiento Basado en su Posición Original: El elemento se mueve desde su posición original según
las propiedades top, right, bottom y left.
2.Reserva Espacio en el Flujo del Documento: El espacio originalmente ocupado por el elemento se
mantiene reservado en el flujo del documento, aunque el elemento se haya desplazado.
Posición relativa y absoluta.
position: absolute

Un elemento con position: absolute se posiciona en relación con su contenedor más cercano que tenga una
posición que no sea static (puede ser relative, absolute, fixed o sticky). Si no hay ningún contenedor
posicionado, el elemento se posiciona en relación con la ventana del navegador.
Características:

1.Posicionamiento Fuera del Flujo del Documento: El elemento se saca del flujo del documento y no afecta
la posición de otros elementos.

2.Posicionamiento en Relación a un Contenedor: Se posiciona en relación con el contenedor posicionado

más cercano, usando las propiedades top, right, bottom y left.
Posición relativa y absoluta.
Veamos en la práctica.
Creemos dos divs, padre e hijo, que NO estén uno dentro del otro.

Ahora veamos qué pasa si intento darle estilos al padre y correrlo hacia la izquierda 200px:
Sin position: relative Con position:relative

¿Qué paso en la web?

Posición relativa y absoluta.
Tendriamos un resultado similar a este
Posición relativa y absoluta.
Ahora, ¿cómo logro posicionar el hijo dentro del padre en cualquier esquina?

Pero es un trabajo bastante tedioso ya que nos toca ir probando hasta lograr encontrar la medida de
centrado. En las diapositivas se encuentran los valores exactos, pero en un caso real, deberían probar hasta
encontrar el valor. Así que para ello, podríamos usar la posición absoluta, ya que esta nos dice que necesita
un padre para posicionarse
Posición relativa y absoluta.
Al usarla nos encontramos con lo siguiente:
Posición relativa y absoluta.
Si nos fijamos en el index, nos encontramos con que la clase hijo, tiene como padre a body ya que es el que
la contiene, asi que su posición absoluta, se hace con respecto a este.

Asi que agregaremos el hijo dentro del padre.

Posición relativa y absoluta.
¿Qué pasa si el padre no está posicionado?

No va a funcionar el absolute ya que está buscando a su padre, el cual no tiene una posición relativa, por lo
que en última instancia tomaría el body.

Conclusión, el padre debe tener siempre la posición relativa para que el hijo pueda usar la posición relativa.