Clase 7 - Grids II

Esta clase va a ser
grabada
Clase 07. Desarrollo Web
GRIDS II
Temario
06 07 08
Grids Grids II Animaciones,

transformaciones
y transiciones.
✓ Grids ✓ Grids Mobile ✓ Gradientes

First
✓ Grids y Flexbox ✓ Transformaciones
✓ Media queries
✓ Grids por áreas ✓ Transiciones
✓ Grids+Flex+@Me
dia ✓ Animaciones
Objetivos de la clase
Conocer qué es un Diseño Responsive
Conocer qué es un Diseño Mobile First
Generar diseños utilizando Grids y Flexbox

CLASE N°#06
Glosario
CSS Grid: es el sistema de maquetación más Meta viewport: una etiqueta <meta> viewport da al
potente que hay disponible. Se trata de un navegador las instrucciones sobre cómo controlar las
sistema en 2D que permite definir filas y dimensiones, y el ajuste a escala de la página.
columnas (a diferencia de, por ejemplo, Flexbox,
el cual funciona en una única dimensión). Diseño responsive: se refiere a la idea de que un
sitio web debería mostrarse igual de bien en todo
Mobile First: significa crear el código primero tipo de dispositivo, desde monitores de pantalla
para los dispositivos más pequeños que los panorámica hasta teléfonos móviles.
usuarios probablemente tengan, como teléfonos El diseño responsive se logra a través de "Media
o tabletas. Implica trabajar en el dispositivo más Queries" de CSS. Pensemos en las Media Queries
pequeño, y luego acumular desde allí todo en el como una forma de aplicar condicionales a las reglas
mismo código y el mismo proyecto, en lugar de de CSS.
hacer uno nuevo para cada tamaño de pantalla.
MAPA DE CONCEPTOS
Diseño Responsive
Grids Mobile ¿Qué es Mobile

Media Queries
First First?
Meta viewport
Grids Mobile First
Mobile First
Mobile First
Antes de hablar de “Mobile-First” debemos Es un enfoque para el diseño y desarrollo web
hacer una referencia al llamado Diseño que elimina la distinción entre la versión
Responsive. Se refiere a la idea de que un sitio amigable para dispositivos móviles de un sitio
web debería mostrarse igual de bien en todo web y su contraparte de escritorio. Con un
tipo de dispositivo, desde monitores de diseño responsive ambos son lo mismo.
pantalla panorámica hasta teléfonos móviles.
Mobile First
"Mobile First" significa crear el código primero
para los dispositivos más pequeños que los
usuarios probablemente tengan, como
teléfonos o tabletas. Trabajar en el dispositivo
más pequeño y luego acumular desde allí
todo en el mismo código y el mismo
proyecto, en lugar de uno nuevo para cada
tamaño de pantalla.
PARA RECORDAR
Mobile First
Se recomienda:
👉 Primero trabajar el código para que se reproduzca
perfectamente en un teléfono.
👉 Segundo, ajustar para que se ejecute en una tableta.
👉 Por último, trabajar en un dispositivo de escritorio.
Mobile First
Cualquier estilo dentro del siguiente Media Querie se
ejecutará cuando el tamaño de la pantalla sea de al
menos 768px de ancho -tablet portrait iPad Mini-
pero no cuando el tamaño de la pantalla sea menor:
Estilos Mobile
@media screen and (min-width: 768px) {
.body {
background-color: #000000;
}
PARA RECORDAR
Media queries
👉 El diseño responsive se logra a través de "Media Queries" de CSS.
👉 Pensemos en las Media Queries como una forma de aplicar
condicionales a las reglas de CSS.
👉 Estas últimas le dicen al navegador qué reglas debe ignorar o
aplicar dependiendo del dispositivo del usuario.
Break points: categorías
Tamaño Dispositivo
320px Para dispositivos con pantallas pequeñas, como los teléfonos en modo vertical
480px Para dispositivos con pantallas pequeñas, como los teléfonos, en modo horizontal
600px Tabletas pequeñas, como el Amazon Kindle (600×800) y Barnes & Noble Nook
(600×1024), en modo vertical
768px y 1023px Tabletas de diez pulgadas como el iPad (768×1024), en modo vertical
1024px Tabletas como el iPad (1024×768), en modo horizontal, así como algunas pantallas de
ordenador portátil, netbook, y de escritorio
1200px Para pantallas panorámicas, principalmente portátiles y de escritorio

Grids Mobile First
Estructura HTML paso a paso
Lo primero es asignarle a nuestro contenedor la propiedad
de display: grid;
Luego, número de columnas y filas que tendrá nuestra

grilla, y un espacio de separación.
Definir el área que ocupará cada caja de nuestro contenedor,

primero le asignaremos un nombre y un color característico.
Definir cómo queremos que cada área sea acomodada en

nuestro layout
Tablet
Siguiendo el ejemplo de las Grillas por áreas
#grilla { display: grid; }
👉 Para la versión tablet lo primero que @media screen and (min-width: 768px) {
hacemos es cambiar la disposición de las
#grilla {
columnas de nuestro Grid.
grid-template-columns: repeat(4,
👉 Luego cambiar la disposición de los ítems, 1fr);
este vez usando el recurso de grid-row y }
grid-column, que es el método corto de .border {
grid-row-start/end grid-column-start/end.
border: 4px solid black;
background-color: blue;
}
}
Desktop
Siguiendo el ejemplo de las Grillas por áreas
👉 Cambiamos la disposición de la grilla. @media screen and (min-width: 1024px) {

#grilla {
👉 Y ahora una vez más cambiamos la grid-template-columns: repeat(3,
disposición de los ítems
1fr);
}
.border {
border: 4px solid black;
background-color: green;
}
}
Resultado
Meta Viewpoint
Las páginas optimizadas para diferentes ✓ Usa la etiqueta <meta> viewport para
dispositivos deben incluir la etiqueta <meta> controlar el ancho y el ajuste de la ventana de
viewport en el encabezado del documento visualización del navegador.
HTML. Una etiqueta <meta> viewport da al
navegador las instrucciones sobre cómo ✓ Incluye width=device-width para hacer
controlar las dimensiones y el ajuste a escala coincidir el ancho de la pantalla en píxeles
de la página. independientes del dispositivo.
✓ Usa initial-scale=1 para establecer una
relación de 1:1 entre los píxeles CSS y los
píxeles independientes del dispositivo.
Meta Viewpoint
El uso del valor de width=device-width indica a la página
que debe hacer coincidir el ancho de la pantalla en
píxeles independientes del dispositivo. Esto permite que
la página realice el reprocesamiento del contenido para
adaptarlo a diferentes tamaños de pantalla.
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

Meta Viewpoint
☕
Break
¡10 minutos y volvemos!
Grids + Flex + @Media
Vamos a combinar todo...
La idea es generar un diseño responsive
haciendo uso de grids para el layout + flexbox
para los componentes.
Para eso, vamos a tener como referencia los
siguientes diseños para vista mobile y
desktop.
Wireframes
¿Preguntas?
#CoderTip: Ingresa al siguiente link y revisa el material
interactivo que preparamos sobre Preguntas Frecuentes,
estamos seguros de que allí encontrarás algunas
respuestas.
Ejemplo en vivo
¡Vamos a practicar lo visto!

¿Preguntas?
Encuesta
Por encuestas de Zoom
¡Terminamos el módulo 3: Responsive!
Cuéntanos qué temas te resultaron más complejos de

entender. Puedes elegir más de uno. Vamos a retomar
aquellos temas que resultaron de mayor dificultad en el
próximo AfterClass.
Resumen
de la clase hoy
✓ Grids + Flexbox + @media.
✓ Nuevas formas de modelar Grids
Opina y valora
esta clase
Muchas gracias.

Clase 7 - Grids II

Cargado por

Copyright:

Formatos disponibles

Clase 7 - Grids II

Cargado por

Información del documento

Descripción 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

Clase 7 - Grids II

Cargado por

Copyright:

Formatos disponibles

Esta clase va a ser

Grids Grids II Animaciones,

✓ Grids ✓ Grids Mobile ✓ Gradientes

Conocer qué es un Diseño Responsive

Conocer qué es un Diseño Mobile First

Generar diseños utilizando Grids y Flexbox

Grids Mobile ¿Qué es Mobile

1200px Para pantallas panorámicas, principalmente portátiles y de escritorio

Luego, número de columnas y ﬁlas que tendrá nuestra

Deﬁnir el área que ocupará cada caja de nuestro contenedor,

Deﬁnir cómo queremos que cada área sea acomodada en

👉 Cambiamos la disposición de la grilla. @media screen and (min-width: 1024px) {

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

¡Vamos a practicar lo visto!

¡Terminamos el módulo 3: Responsive!

Cuéntanos qué temas te resultaron más complejos de

También podría gustarte