3erparcial - DISEÑO WEB ADAPTATIVO

DISEÑO WEB ADAPTATIVO
O
RESPONSIVO
(Responsive Web Design).
TERCER PARCIAL 2022
CONSTRUYE PAGINAS WEB
CONSTRUYE PAGINAS WEB - ALDAMA URIBE ANA PAULA

Descripción del Diseño Web Adaptativo
Se describe como una técnica de diseño y
desarrollo web que, mediante el uso de
estructuras e imágenes fluidas, así como de
media-query en la hoja de estilo CSS, consigue
adaptar el sitio.
En otras palabras el diseño responsivo es un enfoque del

diseño web que hace que el contenido de la web se adapte a
los diferentes tamaños de pantalla y ventana de una variedad
de dispositivos.

Elementos del diseño web responsivo:
Los elementos centrales de un diseño adaptable o “sensible” son al menos cuatro:
1. Esquema tipográfico flexible.
2. Maquetación adaptable usando Media Queries (Media Query).
Modificando la cantidad de columnas del diseño, con grillas flexibles, adaptando los
anchos dentro de cada rango.
3. Imágenes, objetos, videos o medios similares flexibles.
Cambiando el tamaño de las imágenes y otros elementos vinculados, incluyendo la
adaptación de videos, animaciones, y contenidos complejos como mapas, tablas, slides,
etc.
4. Navegación adaptable, optimizada para touch en pantallas pequeñas.

1.Esquema tipográfico flexible.
La técnica del diseño web adaptativo permite ajustar el contenido de los sitios web al ancho del
área de despliegue de cada dispositivo a través de las siguientes soluciones:
1. El tamaño de las fuentes tipográficas se establece en em en vez de píxeles; por lo tanto, su
valor no es absoluto sino relativo y depende directamente del elemento padre que lo contiene.
Si éste último cambia, la fuente con tamaño en em también lo hará.
Por ejemplo:
h1 {
font-size: 1.5em;
text-align: left;
color: #000099;
}

Uso de unidades de medida flexibles
Las unidades em y rem son unidades flexibles y escalables que el navegador,
traduce en valores de píxeles, según la configuración del tamaño de fuente en el
diseño.
La unidad em tiene como referencia de medida el font-size del elemento
actual.
La unidad rem tiene como referencia de medida el font-size del elemento
root, la etiqueta <html> (en inglés sería como "root em").
https://www.w3.org/TR/css3-values/#font-relative-lengths

Unidad rem
Las unidades rem dependen directamente del elemento raíz de la página, o sea del
tamaño de fuente del elemento <html>
Por ejemplo, si la etiqueta html tiene un tamaño de fuente 16px (tamaño por defecto),
10rem equivaldrían a 10*16px=160px. Así que, si se utiliza 1rem siempre será
equivalente al tamaño definido en la etiqueta.
html {
font-size: 16px; 2rem equivale a 16px * 2 = 32px
}
Es decir, el doble del tamaño de font-size configurado
.heading { para el elemento <html>
font-size: 32px;
background-color: #ddd;
padding: 2rem;
}

Unidad em
Las unidades rem depende del último font-size definido dentro del árbol de elementos
en el que se encuentra.
Las em dependen del tamaño de fuente del selector o elemento al que se le aplica el
atributo o, en el caso de que no se haya definido, el del elemento padre.
html {
font-size: 100%; 2em equivale a 32px * 2 = 64px
}
Es decir, 4 veces el tamaño de font-size configurado para
.heading { el elemento <html>
font-size: 32px;
background-color: #ddd;
padding: 2em;
}

Unidades
UNIDADES ABSOLUTAS O FIJAS UNIDADES RELATIVAS
Una medida indicada mediante Las unidades relativas, a diferencia
unidades absolutas está de las absolutas, no están completamente
completamente definida, ya que su definidas, ya que su valor siempre está
valor no depende de otro valor de referenciado respecto a otro valor.
referencia (cm/centímetros,
in/pulgadas, mm/milímetros, pt/puntos, Son las más utilizadas en el diseño
pc/picas, px/Píxeles). Son un tipo de web por la flexibilidad con la que se adaptan
medida fija que no cambia. a los diferentes medios (em/Altura de la
fuente, rem/Root-em, %/porcentaje,
Unidad de medida Pt: vw/Viewport width, vh/Viewport Height).
El punto (pt) podría ser una
medida ideal para documentos CSS en
los que se fija el tamaño de las fuentes
en medios impresos.
12pt =16px=1em=100%

Algunos elementos
<SPAN> <DIV>
Es un elemento de tipo Es un elemento que define una

contenedor en línea que se utiliza para división o una sección en un documento
marcar parte de un texto o parte de un HTML. Se utiliza como contenedor de
documento. elementos HTML y se puede aplicar estilo
fácilmente utilizando el atributo class o id.
<span> es un elemento a nivel línea y <div> Elemento a nivel bloque.

2.1 El uso de un diseño fluido
2.1 El uso de un diseño fluido mediante cuadriculas flexibles o fluid grid , el cual se basa en
proporciones y no en píxeles. Esto hace posible que el sitio web se visualice en distintas
modalidades, según el dispositivo del que se trate.
Por ejemplo:
#contenedor { #contenedor {
max-width: 1024px; max-width: 90%;
} }
/* En píxeles */ /* En proporciones */

Algunas propiedades
max-width: Establece el ancho máximo de un
elemento.
Elemento
min-width: Establece el ancho mínimo de un
min-height
max-height
elemento.
max-height: Establece la altura máxima de un

elemento. min-width
max-width
min-height: Establece la altura mínima de un
elemento.

Propiedad: font-weight
Establece el peso (o negrita) de la fuente.
Valores:
◦ Normal,
◦ Bold (Define caracteres gruesos),
◦ Bolder (Define caracteres mas gruesos),
◦ Lighter (Define caracteres mas ligeros),
◦ 100-900
(Define desde caracteres finos a gruesos. 400 es lo
mismo que normal, y 700 es lo mismo que negrita),
◦ initial y
◦ inherit.

Overflow
Establece el comportamiento
deseado para el desbordamiento de un
elemento, es decir, cuando el contenido de Valores:
un elemento es demasiado grande para • Visible.
caber en su contexto de formato de • Hidden
bloque, en ambas direcciones. • Scroll
• Auto

Overflow
Valores:
1. Visible. El contenido no se recorta y se puede

representar fuera del cuadro de relleno.
2. Hidden. El contenido se recorta si es
necesario para que ajuste en la caja de
relleno. No se proporcionan barras de
desplazamiento y no se permite el soporte
para que el usuario se desplace.

Overflow
Valores:
3. Scroll. El contenido se recorta si es necesario para que

se ajuste en la caja de relleno.
Los navegadores siempre muestran barras de
desplazamiento independientemente de que el
contenido esté recortado o no, lo que evita que las
barras de desplazamiento aparezcan o
desaparezcan a medida que cambia el contenido.
4. Auto. Depende del agente de usuario. Si el contenido
cabe dentro del cuadro de relleno, tiene el mismo
aspecto que visible, pero aún establece un nuevo
contexto de formato de bloque.
Los navegadores de escritorio proporcionan
barras de desplazamiento si el contenido se desborda.

Módulo Flexible o flexbox
Tiene como objetivo proporcionar una
forma más eficiente de diseñar, alinear y distribuir
el espacio entre los elementos en un contenedor,
incluso cuando su tamaño es desconocido y / o
dinámico.
Para activar el uso de flexbox en un ítem,
es necesario asignarle la propiedad display: flex.
Este será el contenedor en el cual centraremos o
distribuiremos elementos.

flex-wrap
La propiedad flex-wrap ajusta el
contenedor según sea necesario:
Valores:
nowrap:
• nowrap: en una línea,
• wrap: varias líneas, de arriba a abajo.
• wrap-reverse: varias líneas de abajo

wrap: wrap-reverse:
hacia arriba

flex-direction
La propiedad flex-direction especifica la
dirección de los elementos flexibles.
Valores:
• row: muestra los contenedores en fila,
• row-reverse: muestra la fila en reversa,
• column: muestra los contenedores en columna,
• column-reverse: muestra los contenedores en

columna y de forma reversa,

Ejemplo utilizando flexbox

Grid
CSS Grid Layout, es un sistema de diseño bidimensional basado en
cuadrículas que tiene como objetivo cambiar completamente la forma en que
diseñamos las interfaces de usuario basadas en cuadrículas.
fr (fracción): unidad de longitud.
❑ grid - genera una cuadrícula a nivel de bloque.

❑ inline-grid - genera una cuadrícula de nivel en línea.
❑ Para dejar una celda de la cuadrícula vacía se usa el carácter de punto final, '.'

Propiedades de los elementos
secundarios (elementos de cuadrícula)
Da un nombre a un elemento para que pueda ser referenciado por una plantilla
creada con la propiedad grid-template-areas.
Ejemplo:
footer {
grid-area: piepag;
}

Propiedades del padre
(contenedor de cuadrícula):
.bloque {
display: grid;
/*Define las columnas y filas de la cuadrícula con una lista de valores separados por espacios. */
grid-template-rows: 1fr 10fr 1fr; /*opcion2: 5em auto 1fr; */
grid-template-columns: repeat(4, 25%); /* opcion2: 1fr 1fr 1fr 1fr; opcion3: auto auto auto auto; */
grid-template-areas: "titulo titulo titulo titulo"
". nav prin ."
"piepag piepag piepag piepag";

2.2.1 La utilización de Media Queries
Orientadas a configurar el ancho,
alto y resolución dependiendo de las
características del dispositivo donde se
consulte el sitio. Es importante tomar en cuenta
que en general todos los
Por ejemplo, una consulta que navegadores modernos soportan el
responde con un ancho máximo de 450 uso de Media Queries. Sin embargo,
Internet Explorer 6, 7 y 8 no lo
píxeles estaría dirigida a los navegadores soportan. En esos casos se pueden
móviles solamente, por lo que el CSS haría utilizar soluciones basadas en
referencia a la siguiente condición. librerías de Javascript, como
respond.js o modernizr.
@media only screen and (max-width: 450px) {...}

Media Queries
¿Qué es Media Query?
Es una regla o conjunto de reglas que se introducen en una
hoja de estilo CSS con el objetivo de definir propiedades
específicas para distintos tipos de medios. Las Media Queries son la
base del diseño responsivo o adaptable esto significa que, con
una misma maquetación HTML, nuestro diseño se adaptará a
diferentes dispositivos y tipos de pantalla.
Estructura: Operador
@media Tipo-Medio and (Expresión-medios-regla){

/* Reglas CSS*/
}

Tipos de medio
all: Coincide con todos los dispositivos. Se utiliza para todos los
tipos de medios o dispositivos.
@media all {
body{
font-size: 100%;
}

Tipos de medio
print: Coincide con los documentos que se ven en una vista
previa de impresión o cualquier medio que divida el contenido
en páginas destinadas a imprimir. Se utiliza para impresoras.
@media print{
body{
Font-size:12pt;
}
}

Tipos de medio
screen: Hace coincidir los dispositivos con una pantalla. Se utiliza
para pantallas de ordenador, tablets, teléfonos móviles, etc.
Ancho mínimo de 600px o más de la pantalla Ancho máximo de 599px o menos de la

del Dispositivo: pantalla del Dispositivo:
@media screen and (min-width: 600px){ @media screen and (max-width: 599px){
.bloque1{ .bloque1{
background: blue; background: red;
color: #ffffff; color: #ffffff;
} }
} }

Orientación
portrait: Ventana gráfica orientación vertical, es decir, la altura es
mayor o igual que el ancho.
landscape: Ventana gráfica orientación horizontal, es decir, el
ancho es mayor que la altura.
@media screen and (orientation:
landscape) {
body {
background-color: #F6CEC3;
}
}
Operadores lógicos para las Media Queries:
Operador and:
@media (max-width: 600px) and (orientation: landscape) {
Las dos condiciones h1{
deben cumplirse para color: red;
que se evalúe como }
verdadera. }

Operador not:
@media not screen and (orientation: landscape) {
Es una negación de una body {
condición. Cuando esa color: pink;
condición no se cumpla }
se aplicarán la media }
queries.

Operador only:
@media only screen and (orientation: portrait) {
Se aplican las reglas solo body {
en el caso que se color: purple;
cumpla cierta }
circunstancia. }
En navegadores antiguos el
operador only no aplica las medias
queries, ya que no pueden
soportarlas.

Función de desplazamiento y puntero:
Puntero (pointer):
Un mouse o un lápiz de dibujo es muy preciso por lo cual el puntero se
define con el valor de "fine".
Un dedo tiene una precisión limitada y toma el valor del puntero como "coarse"
(grueso).
Desplazamiento(hover):
Un dispositivo de pantalla táctil, donde el sistema de puntero principal es
el dedo y no puede desplazarse, tomará el valor de "none".
Un dispositivo en el que la entrada principal es un mouse y puede desplazarse

fácilmente sobre partes de la página toma el valor de "hover".

Función de desplazamiento y puntero:
Ejemplo:
@media (hover: none) and (pointer: @media (hover: hover) and (pointer:
coarse){ fine){
.bloque1{ .bloque1{
background-color: yellow; background-color: #36F207;
color: #000000; color: #000000;
} }
} }

Maquetación adaptable usando Media Queries
(Media Query).
2.2.2. Navegación adaptable:
.menu {
display :none;
}
/* Hacemos visibles el menú para anchos de pantalla mayores a 1024px */

@media screen and (min-width:1024px) {
menu {
display:block;
}
}
/*Cambia el color de fondo del elemento <body> a "azul claro" cuando la
ventana del navegador tenga 600 px de ancho o menos:*/
@media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}

Características
2.3.1 maquetación adaptable y grilla flexible.
Aprovechando que cada zona de la hoja de estilos que envolvamos entre media queries permite
que ciertos estilos se apliquen solo en un rango de tamaños de pantalla, en cada zona
acomodaremos los contenidos en columnas de una manera optimizada para el tamaño del
dispositivo.
El espacio de pantalla en un celular no es el suficiente para flotar dos o más columnas una al lado
de la otra, por lo que el layout deberá ser extremadamente simple. Por ejemplo: Dejar que los
bloques se apilen uno debajo del otro por orden de aparición en el código HTML.

Características
2.3.2 Grillas flexibles. La grilla flexible consiste en definir anchos de contenedor y de columnas en
porcentajes, para que los bloques de un diseño mantengan una proporción entre sí dentro del
rango de ancho mínimo y máximo definido en cada media query del punto anterior.
La fórmula para calcular los porcentajes a partir de un boceto en pixeles es la de dividir el ancho
del elemento por el del que lo envuelve:
Tamaño elemento/Tamaño contexto.
Ejemplo caso 1: 600px/960px=0.625*100 =62.5%
Es decir, ese bloque que medía 600px dentro de un contenedor de 960px ahora deberá medir 62.5% (ese valor surge
del 0.625 de la cuenta que acabamos de realizar)
Tamaño elemento/Tamaño contexto.
Ejemplo caso 2: 150px/480px=0.3125*100 =31.25%
Es decir, deberemos definir un 31.25% de ancho a cada una de las 3 columnas.

Características
2.3.3 Márgenes y paddings flexibles. En este contexto, también debemos volver flexibles los
márgenes y paddings, para que no arruinen con pixeles la proporcionalidad de los espacios
conseguida.
1. Margin: El contexto es el ancho del elemento padre (contenedor):

➢Ejemplo : 24px/900px=0.02666*100 =2.66%
2. Padding: el contexto es el ancho del elemento mismo al que se aplico:
➢Ejemplo : 24px/200px=0.12*100 =12%

Características
3. El ancho de las imágenes, objetos, video o medios similares, es flexible y su tamaño se
modifica por medio de porcentajes. Por ello, es aconsejable que se guarden en el tamaño más
grande en que se mostrarán y su ancho máximo equivaldrá al 100 por ciento de su dimensión,
considerando que el tiempo de carga de las mismas puede ser lento en dispositivos móviles.
Ejemplo:
img {
max-width: 100%;
}
video {
max-width: 85%;
}

Beneficios del Diseño Web Responsivo
1. Reducción de costos: Se logra gracias a que el código es menor y no se requieren versiones
distintas para su despliegue en cada uno de los dispositivos conocidos.
2. Eficiencia en la actualización: Se utiliza una sola plantilla para la producción de la página, por
lo que resulta eficiente la modificación.
3. Mejora en la usabilidad: La legibilidad y características de uso del sitio se ajustan
automáticamente en cada dispositivo.
4. Capacidad de adaptación de la interfaz: Al ser un sitio con fluidez, la información es
jerarquizada para presentar lo esencial de los contenidos para la consulta del usuario.

3erparcial - DISEÑO WEB ADAPTATIVO

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

3erparcial - DISEÑO WEB ADAPTATIVO

Cargado por

Copyright:

Formatos disponibles

DISEÑO WEB ADAPTATIVO

CONSTRUYE PAGINAS WEB - ALDAMA URIBE ANA PAULA

En otras palabras el diseño responsivo es un enfoque del

CONSTRUYE PAGINAS WEB - ALDAMA URIBE ANA PAULA

CONSTRUYE PAGINAS WEB - ALDAMA URIBE ANA PAULA

CONSTRUYE PAGINAS WEB - ALDAMA URIBE ANA PAULA

CONSTRUYE PAGINAS WEB - ALDAMA URIBE ANA PAULA

CONSTRUYE PAGINAS WEB - ALDAMA URIBE ANA PAULA

CONSTRUYE PAGINAS WEB - ALDAMA URIBE ANA PAULA

CONSTRUYE PAGINAS WEB - ALDAMA URIBE ANA PAULA

Es un elemento de tipo Es un elemento que define una

<span> es un elemento a nivel línea y <div> Elemento a nivel bloque.

CONSTRUYE PAGINAS WEB - ALDAMA URIBE ANA PAULA

CONSTRUYE PAGINAS WEB - ALDAMA URIBE ANA PAULA

max-height: Establece la altura máxima de un

CONSTRUYE PAGINAS WEB - ALDAMA URIBE ANA PAULA

CONSTRUYE PAGINAS WEB - ALDAMA URIBE ANA PAULA

CONSTRUYE PAGINAS WEB - ALDAMA URIBE ANA PAULA

1. Visible. El contenido no se recorta y se puede

CONSTRUYE PAGINAS WEB - ALDAMA URIBE ANA PAULA

3. Scroll. El contenido se recorta si es necesario para que

CONSTRUYE PAGINAS WEB - ALDAMA URIBE ANA PAULA

CONSTRUYE PAGINAS WEB - ALDAMA URIBE ANA PAULA

• wrap: varias líneas, de arriba a abajo.

• wrap-reverse: varias líneas de abajo

CONSTRUYE PAGINAS WEB - ALDAMA URIBE ANA PAULA

• row: muestra los contenedores en fila,

• row-reverse: muestra la fila en reversa,

• column: muestra los contenedores en columna,

• column-reverse: muestra los contenedores en

CONSTRUYE PAGINAS WEB - ALDAMA URIBE ANA PAULA

CONSTRUYE PAGINAS WEB - ALDAMA URIBE ANA PAULA

fr (fracción): unidad de longitud.

❑ grid - genera una cuadrícula a nivel de bloque.

CONSTRUYE PAGINAS WEB - ALDAMA URIBE ANA PAULA

CONSTRUYE PAGINAS WEB - ALDAMA URIBE ANA PAULA

". nav prin ."

"piepag piepag piepag piepag";

CONSTRUYE PAGINAS WEB - ALDAMA URIBE ANA PAULA

@media only screen and (max-width: 450px) {...}

CONSTRUYE PAGINAS WEB - ALDAMA URIBE ANA PAULA

@media Tipo-Medio and (Expresión-medios-regla){

CONSTRUYE PAGINAS WEB - ALDAMA URIBE ANA PAULA

CONSTRUYE PAGINAS WEB - ALDAMA URIBE ANA PAULA

CONSTRUYE PAGINAS WEB - ALDAMA URIBE ANA PAULA

Ancho mínimo de 600px o más de la pantalla Ancho máximo de 599px o menos de la

CONSTRUYE PAGINAS WEB - ALDAMA URIBE ANA PAULA

Las dos condiciones h1{

deben cumplirse para color: red;

que se evalúe como }

CONSTRUYE PAGINAS WEB - ALDAMA URIBE ANA PAULA

Es una negación de una body {

condición. Cuando esa color: pink;

CONSTRUYE PAGINAS WEB - ALDAMA URIBE ANA PAULA

Se aplican las reglas solo body {

en el caso que se color: purple;

CONSTRUYE PAGINAS WEB - ALDAMA URIBE ANA PAULA

Un dispositivo en el que la entrada principal es un mouse y puede desplazarse

CONSTRUYE PAGINAS WEB - ALDAMA URIBE ANA PAULA

CONSTRUYE PAGINAS WEB - ALDAMA URIBE ANA PAULA

/* Hacemos visibles el menú para anchos de pantalla mayores a 1024px */

CONSTRUYE PAGINAS WEB - ALDAMA URIBE ANA PAULA

CONSTRUYE PAGINAS WEB - ALDAMA URIBE ANA PAULA