No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Simular una ventana móvil

11/22
Recursos

Aportes 31

Preguntas 1

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

Les comparto unos enlaces Screen Size y Device Metrics
Es interesante para llegar a una media de accesibilidad de su sitio web:

En maquetación para no batallar tanto con el responsive, siempre es bueno trabajar con medidas relativas y no absolutas, así ahorras muchas media queries!

El Device Mode es útil para saber de manera aproximada cuál será el aspecto y el rendimiento de tu página en un dispositivo móvil.

Device Mode es el nombre de un conjunto variado de funciones en Chrome DevTools que te ayudan a simular dispositivos móviles. Estas funciones incluyen:

  • Simulación del viewport de un dispositivo móvil
  • Limitación de la red
  • Limitación de la CPU
  • Simulación de la ubicación geográfica
  • Configuración de la orientación

A modo de anécdota, me di cuenta que hay tamaños inferiores a 320px:
Una vez, hice una página web y le hice el diseño responsivo para una pantalla de 320px, pero al momento de testearlo en mi MotoC, se veía con los elementos remontados y todo andaba roto.
Ahí mismo fui y revisé mi página en un Samsumg que tenía la misma dimensión de mi motoC y ahí se veía bien.
Entonces me puse a mirar la configuración de mi motoC y me di cuenta que tenia configurada la pantalla con elementos “Grandes”.
Luego de esa experiencia, diseño mis páginas web con resolución mínima de 250px (aunque toque remontar elementos, al menos intento dejarlos lo más funcional posible).

Hoy en si hay dispositivos más pequeños que 320px, un ejemplo los smart watch

Genial, la parte de simular dispositivos ya lo sabía, pero no me había dado cuenta de que tenía los breakpoints ahí jaja, apenas los acabo de ver, algo interesante de esta herramienta es que no solo cambia el tamaño de la pantalla (Tal como lo harías trabajando únicamente con el viewport), sino que también emula el navegador tal cual de ese dispositivo y lo escala a como se vería en ese dispositivo, por eso es que es mucho más profesional trabajar con esta herramienta

En Firefox, en la pestaña de Estilos
El panel de media queries se resaltan las media queries que estén activas según el tamaño del viewport

Trabajar con “show media queries” me parece bueno, porque nos muestra las media queries que estamos manejando nosotros en nuestro archivo CSS que no siempre seran las que tiene el Mode Device por defecto, capaz algunas coincidirán pero no todas. Me parece más personalizado y no cuesta nada.

Editando desde el filesystem el proyecto del curso practico de animaciones

Aqui es donde nos damos cuenta que el diseno mobile first nos ayuda mucho para hacer nuestra web responsive

Otra app que sirve mucho para trabajar con responsive link para descargar.

Al que le interese el tema le recomiendo que tome el curso de Responsive Desing. Además de ser muy interesante el profe es Diego De Granda (El profe de este mismo curso) y es realmente bueno. Se los super recomiendo!

<h3>11. Simular una ventana móvil</h3>

1:31 Alternando vista con Toggle device toolbar.

2:06 Break Points (media querys). Dimensiones más comunes.

3:39 Emulando dispositivos móviles.

8:01 Mostrar media querys del proyecto.

8:18 Agregando Tipo de dispositivo. Si se trata de un dispositivo móvil touch o no touch, o si se trata de un desktop touch o no touch.

9:04 Mostrar el frame del dispositivo móvil. No está disponible para todos los dispositivos.

9:56 Device pixel ratio. Es una forma de modificar los pixels del dispositivo que se está emulando.

12:36 Online. Para emular una conexión media o baja típica de un operador móvil.

Enlaces de la clase:
Curso de Responsive Design
Enlaces complementarios:
Simulación de dispositivos móviles con Device Mode en Chrome DevTools
Comenzar con la depuración remota de dispositivos Android
Depurar Progressive Web App
WebViews con depuración remota
Comentarios valiosos de la comunidad: 1, 2, 3

<h3>- Les dejo este tutorial que resume todo el contenido del curso con marcadores para acceder rapidamente a los puntos claves que deseamos recordar.</h3>

Cuéntame si parece útil este formato de resumen, y dale 💚 si quieres más de estos para la comunidad 😁🙌

Luego de haber pasado por tantos profes, facil diego de Granda entra en el top 3 de Platzi

Ojala suba más cursos

DevTools - Simulación
Podremos simular diferentes tipos de pantalla, para tener un proyecto más accesible a en distintas pantallas.
En la esquina superior derecha está un ícono 📱.
Cuando trabajamos con Resposive Design hay 2 estrategias para generar breakpoints:
  1. Trabajar por dispositivos
  2. Trabajar por MediaQuerys que nos dan las DevTools
Desde aquí podrémos trabajar con distintas densidades de pixeles y velocidades de conexión, hacer esto en nuestros proyectos es buena práctica.

Anécdota de un estudiante

A seguir aprendiendo. Móvil

El dpr parámetro agrega la capacidad de servir imágenes de tamaño correcto para dispositivos que exponen una proporción de píxeles de dispositivo . La proporción de píxeles del dispositivo es la proporción entre píxeles físicos y píxeles lógicos. Por ejemplo, el iPhone 5 reporta una proporción de píxeles del dispositivo de 2, porque la resolución lineal física es el doble de la resolución lógica.

Resolución física: 960 x 640
Resolución lógica: 480 x 320

Me gusto mucho la clase, estoy aprendiendo mucho. Gracias.

Muy buena clase!

Interesante funcionalidad de DevTools para hacer mas real la programación de dispositivos móviles

Siempre me ha gustado trabajado entre las resoluciones que ofrece Dev Tools así puedo saber como se está comportando cada elemento y no asumir que esa resolución podría ser la correcta, lo recomiendo.

Aqui les dejo las medidas disponibles de las pantallas:
https://www.mydevice.io/

Es chido, pero extresante, debes tratar de no ver todo todo, no solo este curso de corrido si no con calma y practicar aunque sea un poco, porque si no te extresas de ver y ver y ver y sentir que no avanzas, pero no hay peor paso que el que no se da.

Pro Tip: No recomiendo usar el dev tool de IOS en el navegador, ya que es engañoso, muchas veces te muestra que esta bien pero cuando lo pruebas en un dispositivo físico de IOS puede estar mal maquetado, en esos casos es mejor usar xcode para usar el simulador o apuntarse desde un celular al computador para simular el localhost

Otra de las ventajas de emular ventanas de móviles es que te permite ajustar los break points de tus media queries y que tu proyecto se vea fantástico, agregando un gran valor de UX

excelente clase

No me imagino estar haciendo Breakpoints por cada dispositivo D:
Esta clase estuvo super interesante y llena de valor.
Muchas Gracias 💚

Aca les comparto esta app que me servio de mucha ayuda para poder visualizar multiples dispositivos a la vez

responsively