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 36

Preguntas 1

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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 鈥淕randes鈥.
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

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

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

Editando desde el filesystem el proyecto del curso practico de animaciones

Trabajar con 鈥渟how 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.

<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 馃榿馃檶

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!

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

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

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

Ojala suba m谩s cursos

Los dispositivos que aparecen sin marco es porque literalmente no tienen en su versi贸n real o por lo menos son muy delgados a diferencia de los iphone 7 para abajo.

una pagina muy buena que te proporciona el ancho de tu pantalla a dem谩s la comparaciones y medidas mas usadas de pantallas.
https://www.mydevice.io/

Esta herramienta es mas especializada https://polypane.app/ para manejar responsive

Est谩 bien las cosas, hab铆a algunas que las olvid茅.

Es increible la forma de usar 鈥淒evTools鈥 en la parte a aplicaciones mobiles. Me quede impresionado, ni sabia de este procedimiento. Me quedo claro con este ejemplo que hizo el profe. A seguir.

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