En la página official de Mozzilla Developer Network desaconsejan el uso de Navigator.userAgent porque es posible modificarlo y porque efectivamente muestra más navegadores aparte del que se está usando porque los navegadores nuevos empezaron a usar un agente de usuario similar. Me pasó que muestra varios navegadores como Chrome, Safari y Ópera, por ejemplo, desde Ópera, y con Edge desde Edge. Estaría bien que esta serie la pudiera actualizar, Ing. Jon. Es muy buena.
gracias ...demaciado bueno ...me molesta un poco no haberlo visto en el 2020 durante la pandemia que no estaba haciendo nada ....pero para mi nunca es tarde ...solo debo aprender ....gracias profesor jonmircha.....usted es el mejor
Con estas explicaciones no importa si es extenso el video, el profe te explica los casos de uso reales en el que se puede aplicar el conocimiento, no es como aprendiamos algo en la escuela sin saber ni para que ni como nos serviría el conocimiento.
Este video creo que es especialmente válido, ya que creo este tema MUY usable a la hora de desarrollar una web actualmente. Como siempre, mil gracias por este contenido tan sumamente valioso.
Como en el vídeo anterior he tenido un problema en el momento de usar el location.href ya que una vez el navegador ha pasado a la dirección web especificada ya no vuelve atrás ni me permite el cambio a nuestra web aunque cambie el modo de vista del inspector. es como que se protege y no vuelve. Aun así muchas gracias Sr. Mircha por compartir con nosotros esta fantástica forma de usar el userAgent
jooooooooooooooooder cada video es mejor que el anterior xD me hubiera servido hace 3 años, pero es bueno por fin saberlo gracias Jon!!!!!!!!!!!!!!!!!!!!!!!!!
8:50 También como por 2011 para ver ciertos videos de werevertumorro tenias que usar explorer porque estaba patrocinado por el o algo así, siempre me pregunté cómo se hacía eso jaja gracias profe😎
Genial este vídeo. No veía cómo podía encaja el usar objetos dentro de este ejercicio, pero usarlos para agrupar funciones me parece interesante. Gracias.
Muy interesante, siempre tenia esa curiosidad de como hacían las versiones M , lo que si es que tuve que cambiar algunas validaciones como la del edge que me lo reconocía como chrome y además que ahora aparece como Edg en el userAgent. Me encantan tus videos, no paro de aprender contigo.
Buenos dias maestro, en la parte de isBrowser, las llaves {} del return que envuelven los this he tenido que quitarlas porque me daban error sintáctico, sin llaves también funciona perfectamente.
muy buen video profe, solo una pregunta , porque en el microsoft edge , tambien menciona chrome?? eso significa que la expresion detectaria a chrome en edge?? , y otra pregunta en la linea 19 , es el operador ternario?? o es una compuerta logica or , espero me respondas profe muchas gracias!!
Como apoyo al video: te falto mencionar que dependiendo de la version del navegador, va a cambiar el prefijo que esta dentro del user agent por ejemplo: en el caso de IE - el prefijo cambia en IE 11, en este caso tuve qu anexar un prefijo extra para abarcar la verion 11 del navegador y quedo así ie: () => ua.match(/msie|rv|iemobile/i)
Gente para los que no les funcione el scroll-behavior en css o js si están en Chrome, Brave o Edge accedan a "chrome://flags" y activen el smooth-scrolling que es una propiedad experimental, si usas brave pues ve a "brave://flags" para edge, "edge://flags" espero haberlos ayudado con la info ;)
Pues sí me ayudo pero he notado que en algunas páginas web el efecto de smooth funcionaba sin activar el smooth-scrolling que dices, cosa que no pasaba en la página de ejercicios que hacemos con el profesor. Quisiera saber como lo hacen, si alguien lee esto y tiene respuesta a mi duda comente pls.
@jonmircha una pregunta la validación de navegador para safari en el userAgent en chrome aparece la palabra safari y lo valida como safari como seria evitar eso
Profe cual es mejor usar ahora: userAgent o userAgentData. o son diferentes ? por cierto otra vez gracias a ust ... increible la cantidad de herramientas que estoy aprendiendo.
Se me presento un error "Uncaught TypeError: Cannot set property 'innerHTML' of null".. Tuve que colocar la etiqueta al principio del documento HTML, y si funcionó.. Como se podría evitar esto?.. Si coloco la etiqueta script antes de cerrar la etiqueta body.
Eres un crack hermano, mil respetos, muchas gracias por el contenido, me es de mucha utilidad, en verdad. ¿Habrá la posibilidad de que hicieras un pequeño video aplicando esto a un contenedor en html donde muestre toda esa informacion del userAgent y que permita cerrar las sesiones de esos dispositivos? obviamente mostrando el navegador, sistema operativo, la ip y el icono dependendo que sistema sea?
@@jonmircha Oh vaya, desconocia eso, es que tengo un pequeño inconveniente con un codigo referente al video, no se si pudieras apoyarme, no importa si involucra un costo de por medio, te dejo mi correo amigo: rodri2006991111@gmail.com
Me preguntaba porque se utilizo el metodo match y no el metodo test, crei que eran iguales pero no. Si hay diferencia entre string.match(rE) y rE.test(string) ya que, con rE.test(string) si hay 1 o mas coincidencias solo se devuelve un true, pero, con string.match(rE), si hay 1 coincidencia se devuelve un array que contiene el substring encontrado, la posicion en el string en el cual fue encontrado, el substring y el string. Si hay 1 o mas coincidencias (esas coincidencias se obtienen con la flag g) solo devuelve un array con el substring. Por eso no utilizaremos la flag g. Si no se encuentra ninguna coincidencia con el metodo string.match(rE), este devuelve un null.
excelente, toda la explicación. me puede hacer el favor de enviarme la dirección de tu tutorial de css, enccontre uno que dice flex-css de 13 vídeos, es ese?
Jon pensé que íbamos a ver las redirecciones 307 como cuando uno pone www y te manda al sitio pero sin www, pero buscando en internet se usa htaccess, vas a hacer un video sobre ésto? gracias por todo!
@@jonmircha Ok, es que se me mezclan las ideas. Estoy desarrollando un sitio institucional ahora basado en boostrap... y tengo la duda si conviene dejar ese framework y hacerlo todo directamente en javascript. Como que se me confundieron las ideas
Noooo, para nada bootstrap es un excelente framework CSS, lo que si puedes hacer es inplementarle buenas prácticas como las del video con JS, pero nunca hacer que tu responsive dependa de JS por que para eso esta CSS
@@jonmircha Jon... muchas gracias!!! Excelente lo que hacés... te sigo desde hace rato, pero la verdad que con el último laburo de Javascript que venís haciendo te pasaste. La verdad que no solo son un ejemplo en la enseñanza sino también en la constancia!!! Felicitaciones
Hola, Jon. Una consulta: el curso sobre Responsive Design que aconsejas ver en este video ya no está disponible y fue reemplazado por el video largo de Responsive y arquitectura CSS más reciente?. Te pregunto porque ya hice ese curso 5/5 de HTML y CSS y me gustaría saber si necesito ver algo más sobre Responsive. Gracias.
será necesario el uso de las arrow functions en los objetos? yo lo hice sin ellas y me funcionó igual jaja pe. : linux: ua.match(/linux/i), saludos Jon muy buen video como siempre :)
No entiendo porque cuando llama al método any devuelve el navegador o la plataforma si lo que contiene es un .match que esto lo único que devuelve es false o true, no? entonces la llamada a any debería devolver false o true y no el navegador o plataforma.
HOla JON.. Como se puede ver la grafica del celular en el inspectos de google.? EN mi computadora no se ve. solo el cuadrado del responsive.. GRacias desde VEnezuela (08/09/2020)
Aca en argentina hasta hace muy pocos años cualquier cosas que quiesieras hacer en elguna pagina del gobierno el sistema te abligaba a usar internet explorer, era como ir en carreta con un caballo viejo en medio de una avenida rodeada de altos ultimo modelo. Jamas supe el motivo de porque se hacia eso, por suerte ie murio.
Hola Jon, una consulta como haces para que salga el modelo del celular en físico cuando cambias los tamaños de pantalla, es algún plugin o se configura algo?
Cuando pones la vista mobile justo en la esquina superior derecha hay que darle click a los 3 puntitos de las opciones, luego a show device frame, seleccionas iphone 5 por ejemplo y te figura el diseño
Cordial saludo jonmircha, quería hacerte una consulta hace un tiempo comencé haber el curso de diseño y programación web, pero me estanque en la parte del direccionamiento, te pregunto ¿mejor suspenso ese curso y comienzo con este, pues me doy apenas cuenta que al parecer ya esta algo desactualizado, que me recomiendas?, posdata, excelente contenido, muchas gracias
no me dejo mostrar el contenido innerHTML del id, me dice que tengo problemas de acceso con el userAgent :( edit: investigué un poco y al parecer le dieron unos cambios al userAgent
Me dio pequeño problema la validación para safari, y es que en el texto userAgent siempre aparece la palabra "safari", lo cual crea conflictos. Lo solucioné con un "and" en la validación: if(isBrowser.safari() && !(isBrowser.chrome())) $id.innerHTML += `Sólo visible en Safari`
20:19 - Jon me hiciste buscar si Android es una distribución de GNU/Linux, jaja y no lo es. Lo que utiliza es un núcleo de Linux modificado. Un dato menor por si acaso.
Alguien sabe como se le autocompleta el código HTML dentro del archivo JavaScript ? Tengo autocompletado en archivos HTML pero no autocompleta código de HTML en archivos JS :c No se si me falta alguna extensión o si es otro tipo de configuración
Disculpa, que tan probable es, que en el futuro el codigo que hiciste siga siendo funcional, osea mi pregunta es que ¿Si lo hago de la forma que lo hiciste tu, en un futuro no estaria obsoleto.?
Me funciona todo pero arriba de todo en el archivo deteccion_dispositivos.js me dice "Complexity is 29 Bloody hell... y me asusta :S edit: me funcionaba todo pero ahora de la nada donde dice plataforma solo me funciona en mobile. En desktop me sale null
Me gusto la clase, aprendí mucho. Pero creo que las validaciones para esta fecha no funcionan bien. Por ejemplo en mi caso estoy utilizando linux mint 21.1 y el método isDesktop me detecta mi escritorio tanto como escritorio (validación correcta) pero también la función isMobile me lo detecta como dispositivo móvil los cual no es correcto, claro esto se debe a que los dispositivos móviles basados en android también incluyen la palabra linux en su User Agent, imagino que no mismo ha de suceder para otros casos particulares...
La validación del navegador web también falla, con microsoft edge por que este tabien contiene la palabra chrome en su contenido para la fecha actual futuro, edge esta basado en chrome. Pero que manera de enseñar tienes JohnMircha, te felicito hermano y te agradezco un chorro desde acá de Venezuela.
Estuve mas de una hora tratando solucionar algo que no era :c olvide poner el guion medio, puse user_device a la id del div en html y en js puse user-device :c
@@Holulosamo No debería ser por eso, según he visto Edge también utiliza el mismo motor de renderizado pero en el ejercicio lo que estamos analizando es una cadena de texto que recibimos en la cual debería haber una referencia al token del navegador en cuestión, encontré esto: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.77 Safari/537.36 OPR/76.0.4017.123 Aunque personalmente no me ha funcionado :S
![Felix "Unfair" | [Stray Kids : SKZ-PLAYER]](http://i.ytimg.com/vi/Oswujxm2Ag0/mqdefault.jpg)
En la página official de Mozzilla Developer Network desaconsejan el uso de Navigator.userAgent porque es posible modificarlo y porque efectivamente muestra más navegadores aparte del que se está usando porque los navegadores nuevos empezaron a usar un agente de usuario similar.
Me pasó que muestra varios navegadores como Chrome, Safari y Ópera, por ejemplo, desde Ópera, y con Edge desde Edge.
Estaría bien que esta serie la pudiera actualizar, Ing. Jon. Es muy buena.
gracias ...demaciado bueno ...me molesta un poco no haberlo visto en el 2020 durante la pandemia que no estaba haciendo nada ....pero para mi nunca es tarde ...solo debo aprender ....gracias profesor jonmircha.....usted es el mejor
👋🏻😉 suerte
el mejor #curso de #javascript de youtube. gracias
Gracias. Saludos
Con estas explicaciones no importa si es extenso el video, el profe te explica los casos de uso reales en el que se puede aplicar el conocimiento, no es como aprendiamos algo en la escuela sin saber ni para que ni como nos serviría el conocimiento.
😉👋🏻
Excelente explicación ✅
Gracias. Saludos👋🏻😉
¡Dos años después de sacar este gran curso y yo recién lo estoy viendo, que desperdicio de tiempo el mío!! :( Gracias por tu gran aporte Jon :D
👋🏻😉
espectacular clase!saludos desde el futuro
Hola, muchas gracias😉👋🏻
🧙♂Muchas gracias, buenisimo el curso!!!
😉👋🏻
Este video creo que es especialmente válido, ya que creo este tema MUY usable a la hora de desarrollar una web actualmente. Como siempre, mil gracias por este contenido tan sumamente valioso.
😉👋🏻
Muy bueno, gracias
Gracias por comentar
Tremenda clase, Jon! Gracias por tu generosidad al compartir tus objetos personalizados!
Con mucho gusto
Como en el vídeo anterior he tenido un problema en el momento de usar el location.href ya que una vez el navegador ha pasado a la dirección web especificada ya no vuelve atrás ni me permite el cambio a nuestra web aunque cambie el modo de vista del inspector. es como que se protege y no vuelve.
Aun así muchas gracias Sr. Mircha por compartir con nosotros esta fantástica forma de usar el userAgent
👋🏻😉
Minuto 5:12...aparece Pipa Benedetto llevando su equipo a la victoria 💙💛💙...love you too much Jon, gracias por todo!
¬¬' le vas a las güilas ????
A ti te gusta el fútbol? de qué cuadro sos hincha?
que clase tan buena siempre me pregunte como era que detectaba la pagina en que dispositivo estaba !brujeria jajajaja
😅
Completísima clase. Arriba, maestro!
😃👋🏻
geniales videos
👋🏻😉
Me sigue impresionando la cantidad de conocimiento que usted aporta profe :D
😉👋🏻
Otro video 🔝🔝🔝 del maestro.
🤙
Largo pero muy bueno!!
👋🏻😉
jooooooooooooooooder cada video es mejor que el anterior xD me hubiera servido hace 3 años, pero es bueno por fin saberlo gracias Jon!!!!!!!!!!!!!!!!!!!!!!!!!
😎👍🏻
gracias!
Gracias por comentar
Muy buen curso , Jon el windows NT es la version del kernell que utiliza windows después que dejo de utilizar a MS-Dos y NT significa New Tecnology.
El triple ha sido igualmente sublime jajajajaja
buen video maestro
👋🏻😉
8:50 También como por 2011 para ver ciertos videos de werevertumorro tenias que usar explorer porque estaba patrocinado por el o algo así, siempre me pregunté cómo se hacía eso jaja gracias profe😎
WOW que buen curso de javaScript
Muchas gracias!
Gracias profe!
De nada!
muy buen video excelente explicación
Gracias! 😊
Genial este vídeo. No veía cómo podía encaja el usar objetos dentro de este ejercicio, pero usarlos para agrupar funciones me parece interesante. Gracias.
Recuerda que en JS TODO es un OBJETO
SIMPLEMENTE GRANDIOSO;)
:)
hola jon gracias por el curso te quiero
Hola, muchas gracias👋🏻😉
Muy interesante, siempre tenia esa curiosidad de como hacían las versiones M , lo que si es que tuve que cambiar algunas validaciones como la del edge que me lo reconocía como chrome y además que ahora aparece como Edg en el userAgent. Me encantan tus videos, no paro de aprender contigo.
:)
gracias
👋🏻😉
gracias tio jhon por el tremendo curso!
👋🏻😉
Esto se utilizan mucho a la hora de descargar drivers. Gracias por el curso Jon
De nada!
parcero grande , muy buena la explicación, sobre todo muy bien explicado.
Gracias :)
Este video fue largo pero valió la pena saber todo el tema del diseño móvil antiguo y el userAgent con los navegadores y los sistemas operativos
;)
Gracias Jon, aunque desaconsejan su uso, no hay una alternativa clara al user agent y aún sigue en pie.
saludos.
👋🏻😉
Gran video, muy profunda la explicación!
Gracias!
Jon Jon Jon!!!
🙌🏻🙌🏻🙌🏻
Buena introducción, bien explicado
Gracias. Saludos
Hermosísimo tema, muchas gracias!
A la orden
Buenos dias maestro, en la parte de isBrowser, las llaves {} del return que envuelven los this he tenido que quitarlas porque me daban error sintáctico, sin llaves también funciona perfectamente.
👋🏻😉
Súper bueno profe tienes un nuevo seguidor
Gracias por tu apoyo
23:30 por que se pone denrtro del objeto en arrow functions si poner solamente 'chrome: userAgent.match(/chrome/i) es el mismo resultado?
Recu3rda que en la programación no hay verdades absolutas, siempre habrá más de una forma de hacer las cosas
@@jonmircha gracias sensei, me causó algo de confusión eso de ponerla como arrow fuctions, pero ya lo entendí
Winrar en su página, en la sección de descargar te mostraba primero la versión de winrar compatible para tu sistema operativo
muy buen video profe, solo una pregunta , porque en el microsoft edge , tambien menciona chrome?? eso significa que la expresion detectaria a chrome en edge?? , y otra pregunta en la linea 19 , es el operador ternario?? o es una compuerta logica or , espero me respondas profe muchas gracias!!
Como apoyo al video: te falto mencionar que dependiendo de la version del navegador, va a cambiar el prefijo que esta dentro del user agent por ejemplo: en el caso de IE - el prefijo cambia en IE 11, en este caso tuve qu anexar un prefijo extra para abarcar la verion 11 del navegador y quedo así
ie: () => ua.match(/msie|rv|iemobile/i)
Gracias
eres grande bro!!!
Gente para los que no les funcione el scroll-behavior en css o js si están en Chrome, Brave o Edge accedan a "chrome://flags" y activen el smooth-scrolling que es una propiedad experimental, si usas brave pues ve a "brave://flags" para edge, "edge://flags" espero haberlos ayudado con la info ;)
Gracias
Pues sí me ayudo pero he notado que en algunas páginas web el efecto de smooth funcionaba sin activar el smooth-scrolling que dices, cosa que no pasaba en la página de ejercicios que hacemos con el profesor.
Quisiera saber como lo hacen, si alguien lee esto y tiene respuesta a mi duda comente pls.
@jonmircha una pregunta la validación de navegador para safari en el userAgent en chrome aparece la palabra safari y lo valida como safari como seria evitar eso
Profe cual es mejor usar ahora: userAgent o userAgentData. o son diferentes ? por cierto otra vez gracias a ust ... increible la cantidad de herramientas que estoy aprendiendo.
Se me presento un error "Uncaught TypeError: Cannot set property 'innerHTML' of null".. Tuve que colocar la etiqueta al principio del documento HTML, y si funcionó.. Como se podría evitar esto?.. Si coloco la etiqueta script antes de cerrar la etiqueta body.
Eres un crack hermano, mil respetos, muchas gracias por el contenido, me es de mucha utilidad, en verdad.
¿Habrá la posibilidad de que hicieras un pequeño video aplicando esto a un contenedor en html donde muestre toda esa informacion del userAgent y que permita cerrar las sesiones de esos dispositivos? obviamente mostrando el navegador, sistema operativo, la ip y el icono dependendo que sistema sea?
No, para hacer eso necesitas código backend
@@jonmircha Oh vaya, desconocia eso, es que tengo un pequeño inconveniente con un codigo referente al video, no se si pudieras apoyarme, no importa si involucra un costo de por medio, te dejo mi correo amigo: rodri2006991111@gmail.com
Me preguntaba porque se utilizo el metodo match y no el metodo test, crei que eran iguales pero no.
Si hay diferencia entre string.match(rE) y rE.test(string) ya que, con rE.test(string) si hay 1 o mas coincidencias solo se devuelve un true, pero, con string.match(rE), si hay 1 coincidencia se devuelve un array que contiene el substring encontrado, la posicion en el string en el cual fue encontrado, el substring y el string. Si hay 1 o mas coincidencias (esas coincidencias se obtienen con la flag g) solo devuelve un array con el substring. Por eso no utilizaremos la flag g. Si no se encuentra ninguna coincidencia con el metodo string.match(rE), este devuelve un null.
🤓👍🏻
Buenas noches profesor Mircha un saludo, hoy en dia aun se recomienda usar navigator.userAgent o es mejor usar navigator.userAgentData?
👏👏👏 🙏🙏🙏
👋🏻😉
excelente, toda la explicación.
me puede hacer el favor de enviarme la dirección de tu tutorial de css, enccontre uno que dice flex-css de 13 vídeos, es ese?
Sí es ese,aquí todos mis cursos jonmircha.com/cursos
Teoría de la buena, 🧐🍷 clase God UserAgent
😎👋🏻
👏🏻👏🏻👏🏻 🙏🏻🙏🏻🙏🏻
😉👋🏻
Jon pensé que íbamos a ver las redirecciones 307 como cuando uno pone www y te manda al sitio pero sin www, pero buscando en internet se usa htaccess, vas a hacer un video sobre ésto? gracias por todo!
Pues htacces es más backend eso lo tengo en mi curso de POO con PHP
@@jonmircha ahh perfecto, anoto PHP en mi lista! gracias crack!
Pregunta Jon... que relación hay entre la programación responsive con JavaScript y el uso de bootstrap??
Nada que ver :P Bootstrap es un framework frontend mobile first pero su responsive es más con CSS
@@jonmircha Ok, es que se me mezclan las ideas. Estoy desarrollando un sitio institucional ahora basado en boostrap... y tengo la duda si conviene dejar ese framework y hacerlo todo directamente en javascript.
Como que se me confundieron las ideas
Noooo, para nada bootstrap es un excelente framework CSS, lo que si puedes hacer es inplementarle buenas prácticas como las del video con JS, pero nunca hacer que tu responsive dependa de JS por que para eso esta CSS
@@jonmircha Jon... muchas gracias!!! Excelente lo que hacés... te sigo desde hace rato, pero la verdad que con el último laburo de Javascript que venís haciendo te pasaste. La verdad que no solo son un ejemplo en la enseñanza sino también en la constancia!!! Felicitaciones
Profesor q extensión usa para ver el responsive en chrome, como si fuera un celular ??
Ninguna, eso ya lo trae el Chrome
Profesor@@jonmircha muchas gracias, recién me percato!
Hola, Jon. Una consulta: el curso sobre Responsive Design que aconsejas ver en este video ya no está disponible y fue reemplazado por el video largo de Responsive y arquitectura CSS más reciente?. Te pregunto porque ya hice ese curso 5/5 de HTML y CSS y me gustaría saber si necesito ver algo más sobre Responsive. Gracias.
Sí, es ese
@@jonmircha Perfecto, gracias Jon!
🧙♂️🧙♂️🧙♂️
😉👍🏻
será necesario el uso de las arrow functions en los objetos? yo lo hice sin ellas y me funcionó igual jaja pe. : linux: ua.match(/linux/i),
saludos Jon muy buen video como siempre :)
No entiendo porque cuando llama al método any devuelve el navegador o la plataforma si lo que contiene es un .match que esto lo único que devuelve es false o true, no? entonces la llamada a any debería devolver false o true y no el navegador o plataforma.
HOla JON.. Como se puede ver la grafica del celular en el inspectos de google.? EN mi computadora no se ve. solo el cuadrado del responsive.. GRacias desde VEnezuela (08/09/2020)
Revisa en consola que se puedan ver todas las opciones
@@jonmircha Ahhhh ok Jon. Gracias. VEnezuela (08/09/2020)
Aca en argentina hasta hace muy pocos años cualquier cosas que quiesieras hacer en elguna pagina del gobierno el sistema te abligaba a usar internet explorer, era como ir en carreta con un caballo viejo en medio de una avenida rodeada de altos ultimo modelo. Jamas supe el motivo de porque se hacia eso, por suerte ie murio.
😮
Hola Jon, una consulta como haces para que salga el modelo del celular en físico cuando cambias los tamaños de pantalla, es algún plugin o se configura algo?
Lo hace Chrome
Cuando pones la vista mobile justo en la esquina superior derecha hay que darle click a los 3 puntitos de las opciones, luego a show device frame, seleccionas iphone 5 por ejemplo y te figura el diseño
Cordial saludo jonmircha, quería hacerte una consulta hace un tiempo comencé haber el curso de diseño y programación web, pero me estanque en la parte del direccionamiento, te pregunto ¿mejor suspenso ese curso y comienzo con este, pues me doy apenas cuenta que al parecer ya esta algo desactualizado, que me recomiendas?, posdata, excelente contenido, muchas gracias
Sí, comienza con este ;)
Para que son los : en las funciones?
Eso lo explico en la clase 14
no me dejo mostrar el contenido innerHTML del id, me dice que tengo problemas de acceso con el userAgent :(
edit: investigué un poco y al parecer le dieron unos cambios al userAgent
😮
me sale error cuando ocupo el innerHTML alguien sabe porque?
me sale el error en la pagina pero no en el codigo es algo bien extraño
🤔
Me dio pequeño problema la validación para safari, y es que en el texto userAgent siempre aparece la palabra "safari", lo cual crea conflictos. Lo solucioné con un "and" en la validación:
if(isBrowser.safari() && !(isBrowser.chrome())) $id.innerHTML += `Sólo visible en Safari`
😉👋🏻
facebook también usa la técnica de la m
😉👍
Está genial
Danos un enlace donde se encuentren los script.
No pain... No gain, no hay enlaces, escribe el código 💻💪🤓
@@jonmircha Ok Profe.
👨
👋🏻😉
20:19 - Jon me hiciste buscar si Android es una distribución de GNU/Linux, jaja y no lo es. Lo que utiliza es un núcleo de Linux modificado. Un dato menor por si acaso.
:P
6:36 Todavía existían los tiburones :"(
🦈🤭
Alguien sabe como se le autocompleta el código HTML dentro del archivo JavaScript ? Tengo autocompletado en archivos HTML pero no autocompleta código de HTML en archivos JS :c No se si me falta alguna extensión o si es otro tipo de configuración
Aquí esta mi configuración jonmircha.com/vscode
Disculpa, que tan probable es, que en el futuro el codigo que hiciste siga siendo funcional, osea mi pregunta es que ¿Si lo hago de la forma que lo hiciste tu, en un futuro no estaria obsoleto.?
No, por que es código estándar, es JS, malo que fuera hecho con alguna librería que después caiga en desuso
Algo curioso es que facebook como uan de las empresas mas grandes a día de hoy implementa la técnica del m.com
;)
Me funciona todo pero arriba de todo en el archivo deteccion_dispositivos.js me dice "Complexity is 29 Bloody hell... y me asusta :S
edit: me funcionaba todo pero ahora de la nada donde dice plataforma solo me funciona en mobile. En desktop me sale null
Puedes abrir los archivos scs con este programa?
no conozco ese tipo de extensión, si es una extensión de código, seguramente lo puedes abrir
Me gusto la clase, aprendí mucho. Pero creo que las validaciones para esta fecha no funcionan bien. Por ejemplo en mi caso estoy utilizando linux mint 21.1 y el método isDesktop me detecta mi escritorio tanto como escritorio (validación correcta) pero también la función isMobile me lo detecta como dispositivo móvil los cual no es correcto, claro esto se debe a que los dispositivos móviles basados en android también incluyen la palabra linux en su User Agent, imagino que no mismo ha de suceder para otros casos particulares...
La validación del navegador web también falla, con microsoft edge por que este tabien contiene la palabra chrome en su contenido para la fecha actual futuro, edge esta basado en chrome. Pero que manera de enseñar tienes JohnMircha, te felicito hermano y te agradezco un chorro desde acá de Venezuela.
40:00 se le olvidó Java profe jaja, ahí si te descarga el instalador de acuerdo a tu sistema operativo
:P
Estuve mas de una hora tratando solucionar algo que no era :c olvide poner el guion medio, puse user_device a la id del div en html y en js puse user-device :c
😅 suele pasar
Por alguna razón en Opera solo detecta que es Chrome :(
Igual y cambio el user agent, revisa
@@jonmircha revise en MDN y creo que es porque Google y Opera usan blink engine
😮
Los ultimos reportes de user agent de opera parece ser OPR
@@Holulosamo No debería ser por eso, según he visto Edge también utiliza el mismo motor de renderizado pero en el ejercicio lo que estamos analizando es una cadena de texto que recibimos en la cual debería haber una referencia al token del navegador en cuestión, encontré esto:
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.77 Safari/537.36 OPR/76.0.4017.123
Aunque personalmente no me ha funcionado :S
Al final lo resolví de forma un poco rara probablemente no la mejor, no se si será correcta, probablemente el tiempo y la experiencia me den formas mejores pero funciona.
(Probado en Chrome, Edge, Firefox, Opera y Safari) los reconoció todos al tiro.
const d = document,
n = navigator,
ua = n.userAgent;
let navegador;
export default function userDeviceInfo(id) {
const $id = d.getElementById(id),
isMobile = {
android: () => ua.match(/android/i),
ios: () => ua.match(/iphone|ipad|ipod/i),
windows: () => ua.match(/windows phone/i),
any: function() {
return this.android() || this.ios() || this.windows();
},
},
isDesktop = {
linux: () => ua.match(/linux/i),
mac: () => ua.match(/macintosh/i),
windows: () => ua.match(/windows nt/i),
any: function() {
return this.linux() || this.mac() || this.windows();
},
},
isBrowser = {
chrome: () => ua.match(/chrome/i),
safari: () => ua.match(/safari/i),
firefox: () => ua.match(/firefox/i),
opera: () => ua.match(/opr|opera|opera mini/i),
ie: () => ua.match(/msie|iemobile/i),
edge: () => ua.match(/edg/i),
any: function() {
return (
this.ie() ||
this.edge() ||
this.opera() ||
this.chrome() ||
this.safari() ||
this.firefox()
);
},
};
// console.log(ua);
// console.log(isMobile.any());
// console.log(isDesktop.any());
console.log(isBrowser.any());
$id.innerHTML = `
User Agent: ${ua}
Plataforma:
${isMobile.any() ? isMobile.any() : isDesktop.any()}
`;
// Contenido Exclusivo
let lista = d.getElementById("ua");
if(isBrowser.ie()) {
navegador = "Internet Explorer";
lista.innerHTML += `Navegador: ${navegador}`;
lista.innerHTML += `Contenido Explorer`;
}
else if(isBrowser.edge()) {
navegador = "Edge";
lista.innerHTML += `Navegador: ${navegador}`;
lista.innerHTML += `Contenido Edge`;
}
else if(isBrowser.opera()) {
navegador = "Opera";
lista.innerHTML += `Navegador: ${navegador}`;
lista.innerHTML += `Contenido Opera`;
}
else if(isBrowser.chrome()) {
navegador = "Google Chrome";
lista.innerHTML += `Navegador: ${navegador}`;
lista.innerHTML += `Contenido Chrome`;
}
else if(isBrowser.safari()) {
navegador = "Safari";
lista.innerHTML += `Navegador: ${navegador}`;
lista.innerHTML += `Contenido Safari`;
}
else if(isBrowser.firefox()) {
navegador = "Firefox";
lista.innerHTML += `Navegador: ${navegador}`;
lista.innerHTML += `Contenido Firefox`;
}
}
🤓👍🏻