Buenos días, aquí te dejo mi solución al ejercicio. Como comentan más abajo VS Code te marca como un método en desuso a .addListener y leyendo la documentación que pasaste de MDN lo sustituí por breakpoint.addEventListener("change", responsive) con lo que conseguí el mismo resultado. Un saludo, muchas gracias
Muchas gracias! Al ver que Visual Studio me lo marcaba en desuso vine corriendo a los comentarios a ver si alguien había comentado algo al respecto jajaja
Me encanta cuando un docente comparte libros ya leídos, para que sus alumnos afiancen sus conocimientos. Denota la calidad, entrega y compromiso que tiene con su formación y con la de los demás. Un fuerte abrazo desde Colombia Jon.
Es realmente impresionante el conocimiento que tiene, unas de las deciciones por la que elegi estudiar con usted antes que los miles de cursos que hay en internet, es el enfoque hacia las buenas practicas y la optimizacion al programar.
Me puse a hacer cuentas y este curso tiene una duración aproximada de 68 hrs. y al llegar a este video tan solo van 33 hrs. aproximadamente. Eso quiere decir que lo bueno apenas está por venir 😎 y eso que ya he aprendido muchisimo. Gracias por el curso profe Jon!
Es demasiado conocimiento y cada dia que veo un curso del profe Jon, se aprende y se da cuento que uno esta lejos de llegar a tener todo ese conocimiento. Excelente video como siempre Jon!
Ejemplo genial para aligerar la carga de datos del usuario. Aunque yo vengo del futuro, sigo disfrutando mucho de sus enseñanzas Sr. Mircha. Muchas gracias
Muchisimas gracias! he logrado aprender mucho resolviendo estos ejercicios. Me funciona mucho lo que aprendo aqui, con lo que me enseña la documentacion. Gracias a eso he logrado solucionar la mayoria de los ejercicios antes de ver el video, y despues de ver el video mis conocimientos se refuerzan aun mas y he logrado que mi codigo sea mas simple y siga funcionando.
Donde dice network en el navegador por igual pueden ver todo lo que se le podria descargar al usuario al tratar de ingresar a tu web y pueden tomar referencia de ahi para optimizar el sitio
No maestro su "choro" es lo que más me gusta de como nos enseña porque nos refresca la memoria, un grande ❤️ aprenderé como funciona Paypal solo para apoyarlo 🔥 usted es un gran maestro, lo admiro mucho ✨💞
Buenas noches , Jon . estoy muy agradecido por esos cursos, gracias a ti eh comprendido mucho de JavaScript y todas esas clases han sido de mucho aporte … Excelente forma de explicar y hacer entender lo justo para aprender todo 🤗🤗🤗
Otro fantástico tutorial Jon, realmente agradecido, no solamente por la excelencia con la que impartes cada curso, sino más aún, por tu sencillez al contar aspectos de tu vida que nos animan, pues nos recuerdan que los comienzos no siempre son fáciles, pero que el esfuerzo y la disciplina, traen su recompensa.
jon, se que ya te lo han dicho pero, quiero recordarte que eres una gran persona, lo puedo notar aun que estemos entre pantallas y simulacion social; y por ende un super buen profesor y programador, graciassss infinita veces....ojala que algun dia publiques tu tesis para poder leer ese gran contenido
Increíble este tema me bolo la cabeza, osea el hecho de ahorrar recursos del usuario y cosas que pasan siempre y no notamos 🧐🍷 esta clase jaja admito que no me llamaba la atención porque pensé que se refería más a adaptar cajas, pero quitar y poner elementos que locooo, Gran clase maestro 💞✨
que buen video profe, muchas gracias en estos momentos estoy creando mi propio negocio y haciendo mi propia pagina web y este video fue perfecto para darle el mapa de la ubicación y un video de bienvenida a mis posibles cliente muchas gracias profe
Dios mio cuanta informacion y de calidad. Profe se ha tomado la tarea de mirar cuanto dura este curso?. No he visto otro curso tan completo nisiquiera en el idioma ingles. ❤
Hola Jon ... Primero que nada quiero agradecerte por todo tu esfuerzo y todo el contenido que nos estás compartiendo de manera gratuita... Simplemente eres un crack explicando y el contenido de tu curso es simplemente el mejor, acabando este tomaré el de node y posteriormente php ... Pero quisiera saber si no está en tus planes hacer uno sobre git yo soy nuevo en la programación se para que sirve git y me se algunos comandos pero no logro entenderlo del todo bien ya que jamás lo he usado en práctica y simplemente no se cómo hacerlo o almenos no me doy una idea de como lo pondría en práctica ya que jamás e trabajado en equipo ... Ya que eres una persona muy explícita en tus cursos me gustaría que contemplaras dar un curso git para nosotros tus fieles seguidores debido a que es una herramienta básica y es necesario entenderla ... De ante mano gracias 🙏
event.matches es una propiedad de MediaQueryList,que es distinto al element.matches donde se verifica si coincide con un selector css, cierto??? y addListener es un método de MediaQueryList, creo que te faltó explicar eso
Muy buenas noches profesor!, quisiera saber si hay otros metodos que puedan usarse para el responsive ya que lo que usted uso esta en desuso, en un comentario vi sobre el evento change pero creo que según lei (corrijame si me equivocó) era solo para inputs. ¿Que otras opciones de eventos tengo para hacer responsive?
@jonmircha básicamente con eso y solo eso se aplica el Responsive a una pagina web en general? es decir, con el simple uso de un matchMedia, un listener y un condicional, ya podemos aplicarle ese "ajuste de formato" a cualquier elemento del HTML cambiando su contenido o sus estilos haciendo totalmente adaptable nuestra pag a diversos dispositivos???
@@jonmircha wooooow, en verdad creí que era mas complejo XD, bueno, entonces voy a reestructurar toda la pagina para que los botones estén en el margen inferior solo si el formato es de un movil, si es de una pc estarán arriba en el header como cualquier pag web :3
Hola Jon y compañeros, agradezco infinitamente tu hermosa labor de enseñarnos tus conocimientos y más aún, compartirlos con nosotros, después de agradecer tu notable labor, quiero pedir ayuda sobre este ejercicio. Cuando pongo en el archivo de objeto_responsivo.js la comparación lógica de e.matches no me da ningún valor (ni false, ni true) y como comentan abajo el addListener me marca como si estuviese en desuso, espero puedan ayudarme. Les envío un cordial saludo
14:44 qué tiene que ver el e.matches con el w.matchMedia? no entiendo por que devolveria booleano el primero, contra qué compara? No entiendo cómo están relacionados
Para yo hacer el responsive hice lo siguiente: cuando el usuario esté en móvil remuevo los y de estos saco sus "src", creo etiquetas "a" dinamicamente y las inserto en el DOM, y de los hago un "importNode()" y si el usuario cambia de tamaño de pantalla o ingresa en PC pues los que cloné los inserto en el DOM asi evito que los consuman ancho de banda, ya que estos solo lo harán cuando sean insertados al DOM, que opina de mi solución? jejeje
Hola, antes de arrancar a ver el video, una pregunta para Jon, en algun capitulo mas adelante se ve como mover un boton con el mouse? o se puede hacer con una variante del ejercicio del teclado y todavia no averigue como?
En el protocolo "file:///" no funcionan los módulos por una restricción CORS de requisitos de seguridad. Como el evento "DOMContentLoaded" del tema oscuro se está ejecutando aparte del evento de los elementos "a" de la versión de móvil que coloco, no he podido hacer que interactúen con el tema, no sé cómo resolver ese problema, estaría bien que me ayudara. Excelente explicación.
saludos Jon. Una pregunta. Que tan buena practica o que tan optimo es resolver esta prueba creando los elementos desde Js?? Lo pregunto por el tema de la descarga de los recurso, y el ahorrar el tema de los datos de navegación en caso de móviles??
Depende el contenido, por ejemplo si quisiera trabajar con puro texto, pues no tendría sentido, simplemente usar css para ocultarlos o no, pero cuando hablamos de elementos multimedia como videos, audios, widgets de redes, es muy eficiente y optimo
@@jonmircha Me parece que para darle el broche de oro a esta metodología, habria que acompañarlo con un humilde boton de "Ahorro de datos". En plan de que si el usuario quiere, que pueda ver todo tranquilo como corresponde en el celular pero si tiene pocos datos, que active esta opcion.
Buenas siguiendo el ejemplo del video en el momento que utilizo addListener() me da error de @deprecated. No encuentro otra forma de solucionarlo, si puedes ayudarme.
Una pregunta amigo, en tu función de responsive minuto 14:53 la (e) que le pasas como parámetro se supone que es del evento del mediaQuery, pero tengo una duda, ¿Cómo es que sabe que es un evento de tipo mediaQuery?, lo único que se me ocurre es que busca dentro de los parámetros de tu función y el que sea un evento, pues se lo trae, la verdad esa parte no me queda muy claro.
Hola amigo, es un evento ya que la función recibe el evento que se desencadena cuando se agrega el addlistener a la variable que almacena el mq, ves que en lugar de recibir un evento manda a llamar a la función responsive, entonces dicho evento que esperaba el addlistener lo tiene como parámetro la función responsive
el vsCode me da la advertencia que addListener esta en desuso, pero busque la referencia en W3 y MDN y aparentemente aun esta vigente, ¿error del vsCode, la van a eliminar pronto, no es recomendable su uso o ya esta en desuso pero los navegadores aun le dan soporte?
Disculpen: Tenía el mismo problema. Cambié por breakpoint.addEventListener("change", responsive)ya que vi los comentarios. Mi ejercicio es más sencillo, solo trato de insertar el video. Pero siguen los problemas... Ayuda por favor.
Hola Jon, como siempre gracias! puede ser que en el server de github no me funcione debido a un error de carga de recursos? me da un error ERR_ABORTED 404, te mando un saludo, disculpa las molestias!
export default function responsiveMedia(id, mq, mobileContent, desktopContent) { if (window.matchMedia(mq).matches) { const divContenedor = document.getElementById(id); divContenedor.innerHTML = mobileContent; } else { const divContenedor = document.getElementById(id); divContenedor.innerHTML = desktopContent; } } esta es otra forma de hacerlo y mas sencillo por si les interesa, Saludos :')
@@jonmircha Muchísimas gracias, lo agradezco en verdad porque todos los tutoriales que he visto usan JQuery, SliderJS u otras librerías y prefiero aprender a hacerlo usando JS puro para no preocuparme de si luego sacan actualizaciones que lo hagan inservible y todo eso. Muchas gracias.
23:08 como hacen para que no se salga del viewport el codigo que estamos escribiendo en visual studio? a mi me queda supero largo y no se pasa a una nueva línea
Muy bueno, yo lo hice con recize, el unico "inconveniente" es que me tira unos warnings en la consola que no se que significan... a alguien le ha pasado?. Es algo que dice [Violation] 'unload' handler took 362ms
No se si es consciente Jon de todos los conocimientos que transmite en esos momentos de "charla liviana", las cosas que cuenta basadas en su experiencia, son algo que no podriamos adquirir hasta dentro de mucho tiempo de estar programando
Me sale el siguiente error al intentar embeber el video pero sin embargo me lo permite visualizar en la página cuando está en contenido Desktop con normalidad: www-embed-player.js:561 GET googleads.g.doubleclick.net/pagead/id net::ERR_BLOCKED_BY_CLIENT
En el menu, cuando le doy en el menu hamburguesa solo me deja tener hasta la seccion 7, ya la otras se salen del contenedor y me aparecen en la cabecera. Ayuda porfa!!!
@@81joselito cualquier cosa me avisas si te funciono, yo estoy activo con el curso de javascript, despues hago el de node, aprende react con jonmircha, yo aprendi angular pero mas he visto ofertas laborales de react en linkedin
