Patrones de Diseño Responsive: Mobile First a Desktop
Contenido del curso
Judit Castedo Valero
Roger Flores
Joel Dominguez Merino
Joel Dominguez Merino
Anthony Ismael Manotoa Moreno
Andrés Corral
Yair Lira
Jesús Romero Rivera
Kevin Andres Curruchich Xocop
Carlos Eduardo Gomez García
Jhoan Sebastián Lopera Gallego
Pedro Moreno
Jimmy Buriticá Londoño
Rolando Mamani Salas
Royer Alfonso Hernandez Morales
Cesar Hernández Ramírez
Rafael Martínez Rodríguez
Alex Leonardo Rodriguez Carvajal
Iván Arcos
Victor Andres Castillo Zambrano
Rafael Martínez Rodríguez
Carlos Alberto Basilio Torres
ANDRES FELIPE CHAVEZ MONSALVE
Rafael Amed Valenzuela Gonzalez
Joel Dominguez Merino
Xhunik Miguel
Arelys Viloria
Luis Alberto Ramirez Salas
Eric López
Fabian Flores
Rafael Martínez Rodríguez
Porfirio González López
Irving Juárez
Jose Luis Grande Acevedo
Axel Yaguana
Team Platzi
CRISTIAN BARBERO PÉREZ
Axel Yaguana
Team Platzi
Pablo Aquino
Ulises Astrada
Michael Steven Cruz Torres
Raul Guillermo Ruiz Altamiranda
Alejandro Picado Brenes
Juan Pablo Celiz
En el minuto 5:51 se refiere a un width:100% y no 100px
Por eso no me se veía igual la pantalla, gracias! buena anotacion
Eso es correcto, Gracias por la aclaración :)
Si alguien quiere el atajo para la estructura del main y de los 5 divs aquí la tiene.
main.container>div.c$*5
Muchas gracias, no sabía que se podía poner clases ni lo del "$". Fuera genial que haya un curso de emmed :)
Gracias
Responsive Design significa adaptar tu diseño al tamaño de pantalla del dispositivo. Puedes hacerlo como tu quieras, pero existen 5 patrones ya definidos que te ayudarán en tu diseño. Sus nombre son: Tiny Tweaks Mostly Fluid Column Drop Layout Shifter Off Canvas
Gracias por tu aporte!
Gracias por el aporte, no los conocia, investigaré cada uno de los patrones 👍
Por si no quedó claro y solo para reafirmar, cuando necesitas aplicarle exactamente los mismos estilos a un elemento es cuando se usa la coma, de esa manera puedes seleccionar varios elementos a la vez para que se les apliquen los estilos que escribas ahí, y la especificidad trabajará para cada uno de manera independiente
Gracias por el aporte profe
Técnicas Responsive: Mostly Fluid:
Muy buenos ejemplos.
gran aporte gracias
Mostly Fluid consiste principalmente en una rejilla fluida. En pantallas grandes o medianas, generalmente permanece del mismo tamaño, simplemente ajustando los márgenes en pantallas más anchas. En pantallas más pequeñas, la cuadrícula fluida hace que el contenido principal se reajuste, mientras que las columnas se apilan verticalmente. Una de las principales ventajas de este patrón es que normalmente solo requiere un punto de interrupción entre las pantallas pequeñas y las pantallas grandes.
Thank you
Muchas gracias.
por si quieren ver algunos otros patrones : /
veo que en el min 5:50, Diego mencionó pixeles, pero en realidad es porcentaje para que tengan cuidado en su código :)
gracias
Gracias
Por default visual studio code y algunos otros id's de desarrollo tienen un plugin que se conoce como emmet, este magnifico plugin permite crear estructuras mucho mas rapido.
por ejemplo:
si escribes
div.c$*5
y presionas tab obtienes la estructura de las 5 cajas contenidas en el container de una sola vez
Comparto un artículo sobre los patrones de diseño web adaptables con algunos ejemplos: https://developers.google.com/web/fundamentals/design-and-ux/responsive/patterns?hl=es
Buenisimo aporte, muchas gracias :)
Con que de esa pagina saco Leonidas las imágenes para el curso de Responsive Design jajaj Gracias por el aporte !!! Saludos :)
Hola gente vengo del futuro y vine a traerte mis apuntes para que entiendas bien las siguientes clases, creeme, es dificil encontrar esta info. . Patrones de maquetación de Responsive Desing:
En resumen son los estilos que están estandarizados en la industria para ordenar nuestras páginas, o más concretamente nuestros contenedores. .
Mostly Fluid: El patrón Mostly fluid consiste, principalmente, contenedores posicionados en secciones verticales para el formato mobile, cuando trabajamos este formato en Tablets, laptos y pc’s comenzamos a reacomodar los contenedores en un diseño multicolumna. Por lo que he visto en los dispositivos más pequeños como tables y laptos pequeñas el diseño contiene con una columna principal que se mantiene siendo una sola columna (abarcando el ancho de toda la pantalla), ahí se posiciona el contenedor principal, mientras los contenedores secundarios pasa a encontrarse en un diseño multi-columnas (dos o tres contenedores en una sola columna), en el tercer escalón es posible que haya otro contenedor que ocupe una sola comuna. Mientras más ancha es la pantalla (escritorio y laptos más grandes), todos los contenedores pueden pasar a estar un también un diseño multi-columnas. .
Layaut Shifter: En las pantallas más pequeñas, el contenido se apila verticalmente, pero cambia considerablemente a medida que se agranda la pantalla, con un div a la izquierda y dos div apilados a la derecha, eso será cuando estemos en laptos pequeñas o tablets. si hablamos de pantallas más grandes entonces es posible que el diseño cambie y pasen a ser tres columnas, donde hay una columna grande vertical a la izquierda, una columna con dos contenedores, y una última columna grande vertical a la derecha. Este es uno de los diseños más complejo de mantener, y es posible que se deban realizar cambios dentro de los elementos, no solo en el diseño de contenido general. .
Column Drop: en este diseño siempre le daremos importancia al contenedor principal. Como ves en las imágenes, para móviles usaremos un formato donde el contenedor principal ocupa toda la pantalla, y si el usuario baja encontrará los demás contenedores uno debajo de otro, ocupando todos el ancho de la pantalla. En tables y en laptos pequeñas solo se estirarán los contenedores. En laptos con una pantalla mediana ya usaremos un formato multicolumnas, donde una de los contenedores secundarios pasará a estar complementando al contenedor principal, el contenedor secundario estará a la izquierda, ocupando un 30% o 25% de la pantalla, el resto lo ocupará en contenedor principal, abajo de estos dos contenedores estará el tercer contenedor. Y ya pantallas grandes al formato le agregaremos una tercera columna a la derecha donde estará otro contenedor secundario pero nuestro contenedor principal no perderá relevancia, seguirá ocupando un porcentaje importante de nuestra pantalla, 2 cuartas partes aproximadamente. .
Gracias por la Info esta muy buena !
Gracias por tus aportes viajante del futuro...
Muchas gracias por el aporte.
Ya mejoraste tus apuntes?
Cuando yo empecé a hacer mi primera pagina web, primero empecé por la pc y después ya por el móvil. Realmente el hacer ese proyecto fue una pesadilla, cualquier cosita que movía rompía otra. Al final pude acabar el proyecto y ahora que estoy aprendiendo sobre esto, se que me será de mucha ayuda.
Para generar el main y los 5 contenedores usar Emmet
main.container>div.item$*5
¿Lo ideal sería siempre comenzar a diseñar desde pantallas pequeñas hasta pantallas grandes (primero celular y luego laptop)? ¿Sería una buena práctica?
Así es compañero, por varios motivos:
Te recomiendo el curso Responsive Design: Mobile First 😀
Gracias, @ceporro. Seguro tomaré el curso que me recomiedas. 👍
Mobile First - Mostly Fluid
Si quieren evitar copiar y pegar el div para tener 5 lo que pueden hacer en Visual Studio Code es poner div*5 y apretar tab.
Recomiendo esta página. https://mediaqueri.es/ Muestra como utilizar mediaqueri por medio de ejemplos que estan allí. :3
EXCELENTE !!!!!
@degranda por qué no utiliza medidas en rem para los box y si de pixeles o solo fue para los efectos del ejemplo de los patrones?
Hola otra vez, es para darle cierta estabilidad al diseño, hay veces donde nos conviene mucho más utilizar unidades absolutas, como los px, en vez de unidades relativas, en este caso rem.
Al usar medidas relativas puedes terminar rompiendo todo el diseño, me ha pasado varias veces y no está para nada bueno porque debes trabajar el doble para corregir todo lo que armaste. 😥
