Patrones de Diseño Responsive: Mobile First a Desktop
Contenido del curso
En el minuto 5.50 de esta clase , el profesor dice_ pixeles_, pero en el código coloca %(porcentaje) logrando el resultado que se espera. Nunca paren de aprender.
Judit Castedo Valero
En el minuto 5:51 se refiere a un width:100% y no 100px
Roger Flores
Por eso no me se veía igual la pantalla, gracias! buena anotacion
Joel Dominguez Merino
Eso es correcto, Gracias por la aclaración :)
Joel Dominguez Merino
Anthony Ismael Manotoa Moreno
Muchas gracias, no sabía que se podía poner clases ni lo del "$". Fuera genial que haya un curso de emmed :)
Andrés Corral
Gracias
Yair Lira
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
Jesús Romero Rivera
Gracias por tu aporte!
Kevin Andres Curruchich Xocop
Gracias por el aporte, no los conocia, investigaré cada uno de los patrones 👍
Pedro Moreno
Técnicas Responsive: Mostly Fluid:
Jimmy Buriticá Londoño
Muy buenos ejemplos.
Rolando Mamani Salas
gran aporte gracias
Royer Alfonso Hernandez Morales
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.
Cesar Hernández Ramírez
Thank you
Rafael Martínez Rodríguez
Muchas gracias.
Alex Leonardo Rodriguez Carvajal
por si quieren ver algunos otros patrones : /
Iván Arcos
veo que en el min 5:50, Diego mencionó pixeles, pero en realidad es porcentaje para que tengan cuidado en su código :)
Victor Andres Castillo Zambrano
gracias
Rafael Martínez Rodríguez
Gracias
Carlos Alberto Basilio Torres
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
ANDRES FELIPE CHAVEZ MONSALVE
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
Rafael Amed Valenzuela Gonzalez
Buenisimo aporte, muchas gracias :)
Joel Dominguez Merino
Con que de esa pagina saco Leonidas las imágenes para el curso de Responsive Design jajaj Gracias por el aporte !!! Saludos :)
Xhunik Miguel
Arelys Viloria
Luis Alberto Ramirez Salas
Gracias por la Info esta muy buena !
Eric López
Gracias por tus aportes viajante del futuro...
Fabian Flores
Rafael Martínez Rodríguez
Muchas gracias por el aporte.
Porfirio González López
Ya mejoraste tus apuntes?
Irving Juárez
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.
Jose Luis Grande Acevedo
Para generar el main y los 5 contenedores usar Emmet
main.container>div.item$*5
Axel Yaguana
Team Platzi¿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?
CRISTIAN BARBERO PÉREZ
Así es compañero, por varios motivos:
Te recomiendo el curso Responsive Design: Mobile First 😀
Axel Yaguana
Team PlatziGracias, @ceporro. Seguro tomaré el curso que me recomiedas. 👍
Pablo Aquino
Mobile First - Mostly Fluid
Ulises Astrada
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.
Michael Steven Cruz Torres
Recomiendo esta página. https://mediaqueri.es/ Muestra como utilizar mediaqueri por medio de ejemplos que estan allí. :3
Raul Guillermo Ruiz Altamiranda
EXCELENTE !!!!!
Alejandro Picado Brenes
@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?
Juan Pablo Celiz
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. 😥
Si alguien quiere el atajo para la estructura del main y de los 5 divs aquí la tiene.
main.container>div.c$*5
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. .
