Maquetación

Cuadrículas
Cajas Flexibles
Posicionamiento tradicional
Diseño “Responsive”
Cuadrículas.
GRID
Concepto de Grid
Concepto de Grid

Estilo Cuerpo

.caja { <div class= "contenedor">

background-color: #444; <div class="caja a">A</div>

color: #fff; <div class="caja b">B</div>

border-radius: 5px; <div class="caja c">C</div>

padding: 20px; <div class="caja d">D</div>

font-size: 150%; <div class="caja e">E</div>

<div class="caja f">F</div>

</div>
Concepto de Grid
Concepto de Grid

Código CSS Código HTML

.contenedor { <div class="contenedor">

display: grid; <div class="caja a">A</div>

grid-template-columns: 100px 100px100px; <div class="caja b">B</div>

grid-gap: 10px; <div class="caja c">C</div>

background-color: #fff; color: #444;} <div class="caja d">D</div>

.caja { <div class="caja e">E</div>

background-color: #444; color: #fff; <div class="caja f">F</div>

border-radius: 5px; padding: 20px;

</div>
font-size: 150%; }
 Concepto de Grid

display: grid;
grid-template-columns: 100px 100px 100px;

100 px 100 px 100 px

grid-gap: 10px;
Concepto de Grid

El contenedor de cuadrícula es el elemento que se ha definido con display:

grid. Tiene líneas de cuadrícula, creadas por las pistas de columna y fila que
se han especificado al usar grid-template-columns y grid-template-rows. La
unidad más pequeña en la cuadrícula (entre cuatro líneas de intersección) se
conoce como celda de cuadrícula, y una colección de celdas de cuadrícula
que forman un rectángulo completo se llama área de cuadrícula.
Declarar y definir un GRID

Para definir una cuadrícula utilizamos el valor grid de la propiedad display.

Todos los elementos que son hijos directos del contenedor se convierten en
elementos de una cuadrícula. Atención, el resto no!

.contenedor { display: grid; }

C
o
l
u
m
n
a

Fila
Declarar y definir un GRID

GRID Track (pista). Nombre genérico para una fila GRID o columna
GRID. Es el espacio vertical u horizontal entre dos líneas
GRID consecutivas .

Celdas La intersección de una fila GRID y una columna GRID es una

celda, es decir, el espacio entre 4 líneas GRID. Es la unidad más
pequeña a nuestra disposición para colocar un elemento GRID.

Área. Cualquier porción del GRID contenida entre 4 líneas GRID.

Puede contener N número de celdas GRID.
Declarar y definir un GRID

Track
Celda
Declarar y definir un GRID

Especificar pistas GRID como filas y columnas

grid-template-rows y column define las filas y columnas de la rejilla con
una lista de valores separados por espacios. Los valores representan el
tamaño de la fila o la columna.

.contenedor {
display: grid;
grid-template-rows: 100px 100 px;
grid-template-columns: 33% 33% 100px; }

33% 33% 100 px

100 px
px
100
Declarar y definir un GRID

grid-template-columns Los valores son una lista separada por espacios,

donde cada valor especifica el tamaño de la columna respectiva.

Valor Descripción
none Valor por defecto. Se crean columnas de forma automática

auto El tamaño se determina por el tamaño del contenedor y el tamaño

del contenido de los item en la columna

max-content El item más largo de la columna

min-content El item más pequeño de la columna

length Se especifica un tamaño, por ejemplo en pixels, %, fr….

Declarar y definir un GRID

.contenedor {
grid-template-columns: 40px 50px auto 50px 40px;

grid-template-rows: 25% 100px auto; }

Declarar y definir un GRID

https://www.w3schools.com/cssref/pr_grid-template-columns.asp
Declarar y definir un GRID
Declarar y definir un GRID

El espacio entre las filas o entre las columnas define líneas de

cuadrícula, líneas horizontales y líneas verticales. Podemos
hacer referencia a una línea de cuadrícula por número o por
nombre.

Línea 1
Declarar y definir un GRID

.contenedor {
grid-template-columns:
[first] 40px [line2] 50px
[line3] auto [col4-start] 50px
[five] 40px [end];
grid-template-rows: [row1-
start] 25% [row1-end] 100px
[third-line] auto [last-line]; }
Declarar y definir un GRID

.contenedor {

grid-template-columns: 100px 50px 100px;

grid-template-rows: 80px auto 80px;

grid-column-gap: 10px;

grid-row-gap: 15px; }
Declarar y definir un GRID

Unidad fr

Representa una fracción del espacio disponible en un

contenedor GRID . Utilizar esta medida permite que
GRID se adapte a cambios

.contenedor { grid-template-columns: 2fr 1fr 1fr; }

Se puede utilizar en combinación con otras unidades

para crear pistas GRID flexibles junto con pistas
GRID fijas.

.contenedor { grid-template-columns: 2fr 1fr

300px; }
Declarar y definir un GRID
Declarar y definir un GRID

Tan pronto como se crea una cuadrícula, los hijos directos de la cuadrícula
comienzan a colocarse, uno en cada celda de la cuadrícula. Lo hacen de
acuerdo con las reglas de colocación automática de la cuadrícula. Estas
reglas aseguran que cada elemento se coloque en una celda vacía evitando
elementos superpuestos.

Podemos indicar de forma explicita este posicionamiento:

 Posicionamiento basado en líneas

 Posicionamiento basado en áreas

Posición basada en líneas

Determinan la ubicación de un elemento de cuadrícula dentro de la

cuadrícula haciendo referencia a líneas de cuadrícula específicas.

 grid-column-start línea de columna donde comienza el elemento

 grid-column-end línea la columna donde termina el elemento

 grid-row-stard línea de fila donde comienza el elemento

 grid-row-end línea de la fila donde termina el elemento

Posición basada en líneas
La forma más simple de posicionar elementos en la cuadrícula es con un
posicionamiento basado en líneas, le indica al elemento las reglas para
colocarse de una línea de la cuadrícula a otra. Por ejemplo, si tengo una
cuadrícula con tres pistas de columna y dos pistas de filas, puedo colocar un
elemento desde la línea de columna 1 a la línea de columna 3, y la línea de fila 1
a la línea de fila 3.

.item {
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 3;
}
Posición basada en líneas

.item-a {
grid-column-start: 2;
grid-column-end: five;
grid-row-start: row1-start;
grid-row-end: 3; }
Posición basada en líneas

.b { grid-column-start: 1;
grid-column-end: span 3 ;
grid-row-start: 2;
grid-row-end: span 2; }
Posición basada en líneas

.a{ grid-column: 1/4; .contenedor {

grid-row: 1; } display: grid;

.b { grid-column: 2; grid-template-rows: 100px 300px 200px;

grid-template-columns: 2fr 1fr 1fr;
grid-row: 2; }
grid-gap: 10px;
.c { grid-column: 1;
background-color: #fff;
grid-row: 2;}
color: #444;
.d{ grid-column: 1/4;
}
grid-row: 3; }
Posición basada en líneas
Posición basada en líneas

 línea puede ser un número para referirse a una línea de cuadrícula

numerada o un nombre para referirse a una línea de cuadrícula con
nombre

 span número : el elemento abarcará el número proporcionado de

pistas de cuadrícula

 span nombre : el elemento se extenderá hasta que llegue a la línea

con el nombre proporcionado

 auto : indica la colocación automática

Posición basada en áreas
También se pueden colocar elementos en la cuadrícula utilizando Áreas con nombre. Para
usar este método se debe asignar un nombre con la propiedad grid-area a cada elemento y
luego describir el diseño en el valor de la propiedad grid-template-áreas.

.item1 { grid-area: a;}

.item2 { grid-area: b;}
.item3 {grid-area: c;}
b
.container {
a
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
c
grid-template-areas: "a a b b"
"a a c c";}
Posición basada en áreas

La propiedad para asignar nombre a un área es grid-área. Si se desea que un

elemento abarque varias celdas, se debe repetir el nombre. Si se quiere dejar un
espacio en blanco, se utiliza un . (punto)
header {

grid-area: cab; } .contenedor {

sidebar { grid-gap: 10px;

display: grid;
grid-area: lateral; }
grid-template-columns: 200px 200px 200px 200px;
main {
grid-template-rows: auto;
grid-area: principal; }
grid-template-areas: "cab cab cab cab" "principal
footer { principal . lateral " "pie pie pie pie"; }
grid-area: pie; }
 Posición basada en áreas

https://cssgridgarden.com/#es
Posición basada en áreas

sidebar { .contenedor {
grid-area: sidebar;} display: grid;
} grid-gap: 10px;
content {{ grid-template-columns: 120px 120px 120px;
grid-area: content; ;} grid-template-areas:
". header header"
header {{ "sidebar content content";
grid-area: header; ;} background-color: #fff;
color: #444; }
Posición basada en áreas

.contenedor {

display: grid;

grid-gap: 10px;

grid-template-columns: 120px 120px 120px;

grid-template-areas:

". header header"

El contenido ahora es
"sidebar content content";
más grande, ocupa
"footer footer footer"; más espacio a lo alto

background-color: #fff;

color: #444; }
Justificado y alineamiento

La propiedad justify-content se utiliza para alinear horizontalmente toda la

cuadrícula dentro del contenedor. El ancho total de la cuadrícula debe ser menor
que el ancho del contenedor para que la propiedad tenga algún efecto.

.grid-container { display: grid; height: 400px;

align-content: space-evenly; }

space-evenly space-between

center end
Justificado y alineamiento

align-content se utiliza para alinear verticalmente toda la cuadrícula dentro del

contenedor.

space-around start
Justificado y alineamiento

 start : alinea la cuadrícula para que quede alineada con el borde inicial del
contenedor de cuadrícula

 end : alinea la cuadrícula para que quede alineada con el borde final del
contenedor de cuadrícula

 center : alinea la cuadrícula en el centro del contenedor de cuadrícula

 stretch : cambia el tamaño de los elementos de la cuadrícula para permitir que la

cuadrícula llene todo el ancho del contenedor de cuadrícula

 space-around coloca una cantidad uniforme de espacio entre cada elemento de la

cuadrícula, con espacios de tamaño medio en los extremos lejanos

 space-between coloca una cantidad uniforme de espacio entre cada elemento de

la cuadrícula, sin espacio en los extremos

 space-evenly coloca una cantidad uniforme de espacio entre cada elemento de la

cuadrícula, incluidos los extremos lejanos
Justificado y alineamiento

justify-items Alinea todos los elementos de la cuadrícula a lo largo del eje en línea (fila).
Este valor se aplica a todos los elementos de la cuadrícula dentro del contenedor.

contenedor { justify-items: start | end | center | stretch; }

Stard end

center stretch
Justificado y alineamiento

align-items: Alinea los elementos de la cuadrícula a lo largo del eje del bloque
(columna) Este valor se aplica a todos los elementos de la cuadrícula dentro del
contenedor.

contenedor {align-items: start | end | center | stretch; }

Justificado y alineamiento

justify-self: Alinea un sólo elemento de cuadrícula dentro de una celda a lo largo del eje en
línea (fila)

align-self: Alinea un solo elemento de cuadrícula dentro de una celda a lo largo del eje del
bloque (columna)

.item-a { justify-self: end; }

.item-a { align-self: end; }

Alineación dentro de una celda

.item-a { justify-self: end; }

.item-a { align-self: end; }

Rejillas anidadas

.contenedor {
.caja {
display: grid; background-color: #99ccff;
grid-gap: 30px; color: #fff;

grid-template-columns: 150px 150px 150px 150px; border-radius: 5px;

padding: 20px;
grid-template-rows: auto auto;
font-size: 150%;
background-color: #fff;

color: #444;

}
Rejillas anidadas

.a {grid-column: 1/2; grid-row: 1; } .e {

grid-column: 1/3;
.b { grid-column: 2/5; grid-row: 1;} grid-row: 1;
}
.c {grid-column: 1/2;grid-row: 2;}
.f {
.d{
grid-column: 1;
grid-column: 2/5; grid-row: 2;
}
grid-row: 2;
.g {
display: grid;
grid-column: 2;
grid-gap: 10px; grid-row: 2;
}
grid-template-columns: 1fr 1fr; }
Rejillas anidadas
Cajas Flexibles
Flexbox
Contenedor Flexible
Flexbox es un modelo de maquetación que se basa en la existencia de una caja
padre llamada contenedor flexible o caja flex. Los elementos hijos situados
dentro del contenedor flexible son elementos o ítems flex (flexibles).

Los elementos flex tienen la capacidad de redimensionarse y recolocarse dentro

de la caja flex . También tienen la capacidad de alinearse tanto horizontalmente
como verticalmente. Está especialmente diseñado para crear, estructuras de una
dimensión.
Contenedor Flexible

Un contenedor flexible se establece con la propiedad:

contenedor { display: flex; }

Características de un contenedor flexible:

Dirección flexible

Envoltura flexible

Justificar-contenido

Alinear elementos

Alinear contenido
Contenedor Flexible
La propiedad flex-direction define en qué dirección el contenedor debe apilar los
elementos flexibles.

.contenedor {
display: flex;
flex-direction: column; }
Contenedor Flexible
La propiedad flex-wrap especifica si los elementos flexibles deben ajustarse o no
al ancho.
Cuando el espacio disponible dentro del contenedor flexible ya no puede
albergar los elementos en sus anchos predeterminados se divide en varias
líneas.
Contenedor Flexible

La propiedad justify-content se usa para alinear los elementos a lo largo de

su eje principal (ya la conocemos):

.contenedor { display: flex; justify-content: center; }

Contenedor Flexible

La propiedad align-ítems se utiliza para alinear los elementos flexibles

verticalmente, también la conocemos.

.contenedor { display: flex; height: 200px; align-items: flex-start; }

Contenedor Flexible

No se usa Flexbox para el diseño de una página completa. Flexbox es más

potente para diseñar la estructura de algunos componentes. Para diseñar la

estructura de la página, suele ser mejor usar el sistema de cuadrícula y luego

podríamos usar una Caja Flexible en elementos secundarios.

No deberíamos usarlo en exceso si se pudiera hacer de una manera más simple.

Guías sobre Flexbox

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

http://w3.unpocodetodo.info/css3/ejemplos/flexbox-playground.html
Contenedor Flexible
/* Estilo de la barra de navegación */
/* Contenedor de Columnas */
nav {
.rejilla {
display: flex;
display: grid;
justify-content: center; grid-template-columns: 1fr 2fr;
background-color: #000066;} grid-template-areas:
/* Estilo de los elementos de navegación */ "lateral principal";

nav a { grid-gap: 10px; }

color: white;

padding: 14px 20px;

text-decoration: none;

text-align: center; }
Contenedor Flexible
Contenedor Flexible

nav { flex-direction: column;}

.rejilla {

grid-template-areas:

"lateral lateral"

"principal principal";

grid-gap: 10px;} }
Maquetación tradicional
Posicionamiento
Posicionamiento

 Elposicionamiento es el lugar donde el navegador coloca un

elemento HTML para visualizarlo.

 Por defecto, los elementos se posicionan uno a continuación de otro.

Si se trata de elementos de bloque, como, párrafos, listas, etc.., se
irán colocando uno debajo del otro. A este posicionamiento se le
denomina estático, y se considera un “no posicionamiento”

 Utilizando
CSS, con la propiedad position podemos cambiar el tipo
de posicionamiento de los elementos.
Posicionamiento
Existen cuatro tipos de posicionamiento:
 Static: Por defecto, no se considera posicionamiento
 Relative: Coloca el elemento en relación a su posición normal. A
partir de ahí, podemos desplazar el elemento, permaneciendo el
hueco de su posición original. Desplaza el elemento respecto de
su posición original

 Para deslazarlo horizontalmente: left, right.

 Para desplazarlo verticalmente: top, bottom
Posicionamiento

img.desplazada { position: relative; top: 8em; }

Posicionamiento

Absolute: Al utilizar el posicionamiento absoluto indicamos de forma precisa la

posición del elemento,(en teoría). Determinar la referencia del posicionamiento
puede resultar complicado. Cuando una caja se posiciona de forma absoluta, el
resto de elementos de la página se pueden ver afectados y modifican su posición.
Posicionamiento

img { position: absolute; top: 50px; left: 50px; }

En el ejemplo la referencia no es la caja que lo contiene, es la ventana del

navegador
Posicionamiento

Fixed: Se establece la posición del elemento de forma parecida al absoluto, es

un caso particular de este, pero el elemento queda fijo en la pantalla, aunque
utilicemos barras de desplazamiento. Ejemlo: https://ctxt.es/
Posicionamiento

Posicionamiento flotante
 El
posicionamiento es un poco distinto al resto. No se define con la
propiedad position, si no con la propiedad float. Puede tomar estos
valores:
 left : flotante a la izquierda (float: left;).
 right : flotante a la derecha (float: right;).
 none : sin flotante.
 Desplaza el elemento todo lo que pueda hacia la dirección indicada,
hasta encontrar el límite del elemento contenedor, u otro elemento
también flotante. Además hace que todos los elementos fluyan
alrededor de él.
 Hasido muy utilizarlo en imágenes, para que el texto fluya alrededor
de ellas
Posicionamiento

Float: una caja que se posiciona con el modelo de posicionamiento flotante,

automáticamente se convierte en una caja flotante, lo que significa que se desplaza
hasta la zona más a la izquierda o más a la derecha de la posición en la que
originalmente se encontraba.
Visualización

TAMAÑO
Dos atributos pueden definir el tamaño de un elemento: ancho (width)
y alto (height)

DESBORDAMIENTO
Al definir un tamaño fijo nos puede surgir un problema: ¿qué pasa si
el contenido del elemento (texto, imágenes, etc...) no cabe?
se produce un desbordamiento, que podemos controlar desde el
estilo con la propiedad overflow:
overflow: hidden
Visualización
Overflow

Visible: Es la opción por omisión. El

contenido sale de elemento, y
puede que se solape con los
elementos que haya a continuación.

Hidden: Lo que no quepa en el

elemento, queda oculto.

Auto: Muestra las barras de

desplazamiento en el elemento
cuando sea necesario.

Scroll: Siempre muestra las barras

de desplazamiento
Visualización

Visibility

Permite hacer visibles o invisibles a los elementos de la página.

Inicialmente todas las cajas que componen la página son visibles. Empleando el
valor hidden es posible convertir una caja en invisible para que no muestre sus
contenidos. El resto de elementos de la página se muestran como si la caja
todavía fuera visible, por lo que en el lugar donde originalmente se mostraba la
caja invisible, ahora se muestra un hueco vacío.
Diseño adaptativo “responsive”
Media Queries
Diseño adaptativo
Diseño adaptativo o “Responsive”

Responsive Web Design (RWD) es una técnica de diseño y desarrollo de sitios y

aplicaciones web que permite que las páginas se adapten al tamaño, la
resolución y orientación de la pantalla, y por tanto al dispositivo del usuario. Y
todo ello con un código único, una única página, una única URL.
No se debe confundir con tener una versión de la página para cada dispositivo,
El código HTML será exactamente el mismo, y muchos estilos también (el
diseño debe ser consistente) varía ligeramente la maquetación en función del
dispositivo.
CSS tiene la capacidad de aplicar diferentes estilos basados ​en el tipo de
dispositivo de salida, ya sea una pantalla de PC, un dispositivo portátil o una
impresora. ¿Cómo? Mediante “Media Queries”
Media Queries, permite cargar de forma automática las diferentes reglas CSS
que hemos definido en función del tamaño de pantalla, su resolución o su
orientación.
Diseño adaptativo
Diseño adaptativo o “Responsive”
Diseño adaptativo o “Responsive”
Diseño adaptativo

“Media Queries” (consultas de medios) permiten al navegador determinar

el tipo de soporte y así aplicar el conjunto de reglas CSS más apropiado. Nos
sirven para definir estilos que solo se aplicarán en caso que esa consulta sea
“Verdad”. Son estructuras condicionales, dan como resultado verdadero o
falso.

 Si la pantalla del usuario tiene estas características, entonces aplica estos

estilos

 Si se imprime el documento en la impresora, aplica estos estilos.

 Si la pantalla del dispositivo tiene estas dimensiones y además está situado

en posición horizontal (landscape), entonces aplica estas reglas CSS.
Aplicación de media queries mediante @media

@media (min-width: 500px) {

body {background: green ; }
}

“Si el dispositivo tiene un ancho mínimo de 500 pixeles aplica el estilo”

Aplicación de media queries mediante @media

@media (min-width: 500px) { body {background: green; }

}

Tipo de Reglas de
@media medio Característica
estilos
Aplicación de media queries mediante @media

Tipos de medios

Valor Descripción

all Todos los tipos de dispositivo

print Material impreso y visualización de documentos en

una pantalla en el modo de vista previa de impresión.
screen Pantallas, tablets, smart-phones etc.

El tipo de medio no es obligatorio, por defecto son todos

Aplicación de mediaqueries mediante @media

Expresiones a utilizar en las media queries:

Las más utilizadas son:
 orientation: valores landscape o portrait, significa que la orientación sea
horizontal o vertical, o sea, landscape si la ventana es más ancha que alta
y portrait si es más alta que ancha.

 resolution: valores min-resolution y max-resolution. El valor que toma es la

densidad de la pantalla en valor de puntos por pulgada (dpi) o en puntos por pixel
(dppx).

 width: El ancho del dispositivo. Se permiten las variantes min-width y max-

width. Es la principal expresión para el diseño adaptativo.

• Lista completa: documentación para desarrolladores de mozilla.

Aplicación de media queries mediante @media

@media screen and (min-width: 680px) {

main {margin-left: 216px ; }
nav {width: 200px; float: left;} }

!Utilizaremos diseño con GRID aunque en este ejemplo no se ha usado!

Aplicación de media queries mediante @media

Las media queries más utilizadas:

/* Dispositivos muy pequeño (teléfonos , 600px y menos) */
@media screen and (max-width: 600px) {...}

/* Dispositivos pequeños (tabletas y teléfonos grandes, 600px and up) */

@media screen and (min-width: 600px) {...}

/* Dispositivos medios (apaisado y tabletas, 768px and up) */

@media screen and (min-width: 768px) {...}

/* Dispositivos grandes(portátiles y escritorio, 992px and up) */

@media screen and (min-width: 992px) {...}

/* Dispositivos muy grandes (portátiles y escritorio, 1200px and up) */

@media screen and (min-width: 1200px) {...}
Aplicación de media queries mediante @media

Operadores Lógicos: Se pueden redactar “queries” utilizando operadores

lógicos: not, and, y only.
Además se puede combinar múltiples queries en una lista separada por comas
múltiples; si cualquiera de las queries en la lista es verdadera, la hoja de estilo
asociada es aplicada. Esto es equivalente a una operación lógica "or".

@media (min-width: 700px) and (orientation: landscape) { ... }

@media screen and (min-width: 400px) and (max-width: 700px) { }

Ejemplo con GRID
body { width: 90%; margin: 0 5%; font-family: "Komika Hand", sans-serif;
display: grid;
grid-template-columns: 1fr, 1fr, 1fr;
grid-template-rows: 1fr,1fr,1fr; }
section, article, aside, figure, header, footer { margin: 1em; padding: 1em;
outline: 4px dashed black; }
header { grid-column: 1/4; }
aside.b { grid-column: 1; grid-row: 2; }
article { grid-column: 2; grid-row: 2; }
aside.d { grid-column: 3; grid-row: 2; }
footer { grid-column: 1/4; }
Ejemplo con GRID
Ejemplo con GRID
Tamaño de fuente adaptable

El tamaño del texto se puede establecer con la unidad vw, que significa el "ancho
de la ventana gráfica".

De esa forma, el tamaño del texto seguirá el tamaño de la ventana del navegador:

font-size:1vw;

Vw se refiere a Viewport que es el tamaño de la ventana del navegador. 1vw= 1%

del ancho de la ventana gráfica. Si la ventana gráfica tiene 50 cm de ancho, 1vw
mide 0.5 cm.

h1 {font-size:10vw; }

p {font-size:5vw;}
Tamaño de fuente adaptable
Tamaño de fuente adaptable

También se pueden utilizar “media queries”

@media screen and (min-width: 601px) {

.example {
font-size: 80px;
}
}

@media screen and (max-width: 600px) {

.example {
font-size: 30px;
}
}
Tamaño de fuente adaptable

• Unidades em, unidades rem

• Cuando se usan unidades rem, el tamaño del pixel al que traducen depende
del tamaño de la fuente del elemento raíz de la página. Ese tamaño de fuente
raíz es multiplicado por el numero que está usando la unidad rem. El tamaño
por defecto normalmente es 16px.

• Cuando se usan unidades em, el valor del pixel con el que terminas es una
multiplicación del tamaño de fuente en el elemento al que se le está aplicando
estilo.
Tamaño de imagen adaptable

El principal cambio de conceptualización que ha traído el diseño web responsive

ha sido la sustitución del pixel por unidades relativas, antes ligábamos todos los
elementos del diseño (tamaño de tipografía, contenedores, imágenes,
márgenes…) a una unidad fija. Normalmente El pixel. Pero con el responsive esto
ha cambiado. Trabajamos con unidades relativas: porcentajes (%), ems, rems…y
las imágenes son uno de los elementos más afectados.

Colocamos una imagen de 1280px de ancho * 960px de alto en el artículo

del ejemplo maqueta1

Recordemos que en este ejemplo se habían definido tres columnas iguales

Tamaño de imagen adaptable
Tamaño de imagen adaptable

Vamos a indicar que la imagen ocupe el 100% del contenedor.

En los estilos:

.responsive { width: 100%};

En el cuerpo, dentro del artículo:

<article>
<img class="responsive" src="img1.jpg" >
<p> ljfpewrfperjg </p>
</article>

Ahora la imagen siempre se ajustará a su contenedor. Si está dentro de

un artículo, ocupará el 100% del ancho de dicho artículo, o en cualquier
otro elemento.
Tamaño de imagen adaptable

Recordemos que en este ejemplo se habían definido tres columnas iguales

Tamaño de imagen adaptable
Hemos incluido imágenes de 100, 200, y 50px al 100%, en ese orden. Las
cajas son flexibles y las imágenes se adaptan.
Tamaño de imagen adaptable

Pero…..
Tamaño de imagen adaptable
¿Que pasa cuando nuestro contenedor supera el tamaño en píxeles de la
imagen?. Supongamos un contenedor de 1200 píxeles. ¿Que hace nuestra
imagen fluida? Llenar el 100% del espacio. Por lo tanto, nuestra imagen de
400px pasa a convertirse en una imagen de 1200px. Adaptable, pero pixelada,
también.

Con la regla CSS max-width. Mediante dicha regla vamos a indicar el ancho
máximo, (400px en este caso, su ancho en píxeles) Si la propiedad max-width
se establece, la imagen se reducirá si es necesario, pero nunca se ampliará
para ser más grande que su tamaño original.

img {
max-width: 400px;
height: auto;
}
Tamaño de imagen adaptable
En el ejemplo:

.responsive {
max-width: 100px;
height: auto;
}
Tamaño de imagen adaptable

• Se dispone de varios elementos más en html para adaptar imágenes, pero

implican tener disponibles distintas imágenes, o la misma en distintas
resoluciones.

• Atributo srcset= lista de imágenes con su tamaño real

• Atributo size = puede llevar preguntas a medios, y a continuación el ancho

que la imagen ocupará, expresado en porcentajes o en una medida fija

• Elemento picture Un nuevo elemento que permite elegir entre varias

imágenes
Tamaño de imagen adaptable

Lista de variables fundamentales de imagen receptiva, esta vez pensando

en cuándo varían y quién sabe qué .

¿Conocida por la autora ¿Conocido por el

Variable cuando está escribiendo navegador cuando carga
el código? la página?
dimensiones de la
No si
ventana gráfica
tamaño de imagen
relativo a la ventana si No
gráfica
densidad de pantalla No si
dimensiones de los
si No
archivos fuente
Tamaño de imagen adaptable

¿Conocida por la autora ¿Conocido por el

Variable cuando está escribiendo navegador cuando carga
el código? la página?
dimensiones de la
No si
ventana gráfica
tamaño de imagen
relativo a la ventana si no si! vía sizes!
gráfica
densidad de pantalla No si
dimensiones de los
si no si! vía srcset!
archivos fuente
Tamaño de imagen adaptable

<img
src="small.png“
srcset="large.png 1280w, medium.png 640w, small.png 320w"
sizes="(max-width: 500px) 250px, 500px"
alt=“ejemplo"> Se No se
cumple cumple

Aquí estamos diciendo (con el atributo sizes), si la ventana gráfica es de 500 px o

menos, tenemos la intención de mostrar la imagen a 250 px de ancho.
Si la ventana gráfica es más ancha que eso, muestre la imagen a 500 píxeles de
ancho.
Tamaño de imagen adaptable

El formato del atributo es:

sizes="[media query] [length], [media query] [length] ... Etc”

El navegador revisa cada consulta de medios hasta que encuentra una que
coincida y utiliza la longitud emparejada de esa consulta

Esta solución les da a los navegadores algo de margen de maniobra. Una

consulta de medios adjunta a una fuente es verdadera o falsa; si es verdadero, el
navegador debe cargar la fuente asociada.
Tamaño de imagen adaptable

<img src= "movil.jpg"

srcset= "pc.jpg 1024w, tablet.jpg 640w, movil.jpg 320w"

sizes= "(min-width: 576px) 33.3vw, 100vw“ >

En el atributo srcset se indica la colección de imágenes disponibles separadas

por comas, y después de cada nombre de archivo se indica el ancho (el número
de pixels) de la imagen seguido de la letra w (width).

El atributo sizes indica en que tamaños se va a usar la imagen, en este caso,

indicamos que vamos a usar la imagen en dos posibles tamaños, ocupando todo
el ancho (100vw), o ocupando una tercera parte (33.3vw), y además cuando se
produce dicho cambio (min-width: 576px)
Tamaño de imagen adaptable

<img src="small.png"

srcset="large.png 1280w, medium.png 640w, small.png 320w"

sizes ="(min-width: 500px) 50%, 100%"

alt=“ejemplo">

Las imágenes tendrán aproximadamente la mitad del tamaño de la ventana del

navegador en pantallas grandes

El tamaño completo de la ventana del navegador en pantallas pequeñas

El navegador hace los cálculos y elige la imagen

Tamaño de imagen adaptable

Una longitud sin una consulta de medios emparejada es una "longitud

predeterminada". Si no hay consultas de medios que coincidan, se usará. Esto
significa que, por ejemplo, para una imagen de banner gigante de ancho
completo, su marcado puede ser tan simple como

<img src="small.jpg"

srcset="large.jpg 1024w, medium.jpg 640w, small.jpg 320w"

sizes="100vw"

alt=“Ejemplo" />

Generador de imágenes:
https://www.responsivebreakpoints.com/
Tamaño de imagen adaptable
Tamaño de imagen adaptable
Tamaño de imagen adaptable

El nuevo elemento <picture> de HTML

<picture>

<source media= "(min-width: 900px)" srcset="img/pc.png">

<source media= "(min-width: 600px)" srcset="img/tablet.png">

<img src= "img/movil.jpg" alt= "Ejemplo">

</picture>

El elemento picture, se suele utilizar para cargar diferentes imágenes, no

distintas resoluciones
Tamaño de imagen adaptable

• Los elementos <source> incluyen un atributo de medios que contiene una

condición de medios, estas condiciones son pruebas que deciden qué imagen
se muestra, se mostrará la primera que devuelve verdadero.

En el ejemplo:

• Si el ancho de la ventana gráfica es de 900 px de ancho o más, se mostrará la

primera imagen

• Si el ancho de la ventana gráfica es mínimo de 600 px o más, se mostrará el

segundo.

• Si ninguna de estas condiciones se cumplen se muestra la última

Tamaño de imagen adaptable

• Los atributos srcset contienen la ruta de la imagen a mostrar.

• Siempre debe estar el elemento <img>,de lo contrario no aparecerán

imágenes. Es el caso predeterminado que se aplicará cuando ninguna de las
condiciones de los medios devuelva verdadero

• En las transparencias siguientes vemos los cambios de imagen según se

reduce la pantalla
Tamaño de imagen adaptable
Tamaño de imagen adaptable
Tamaño de imagen adaptable

.responsive { width: 100%};

<picture>

<source media= "(min-width: 900px)" srcset="img/pc.png">

<source media= "(min-width: 600px)" srcset="img/tablet.png">

<img class = resposive src= "img/movil.jpg" alt= "Ejemplo">

</picture>

Podemos añadir que ocupen el 100% o el 80%, o colocarlas en el centro…

Tamaño de imagen adaptable
Material

• https://www.w3schools.com/css/css_grid.asp

• https://www.w3schools.com/cssref/pr_grid-template-columns.asp

• https://css-tricks.com/snippets/css/complete-guide-grid/

• https://gridbyexample.com/examples/

• https://cssgridgarden.com/#es

• https://desarrolloweb.com/articulos/diseno-web-adaptativo.html