{"id":38467,"date":"2017-07-07T09:24:49","date_gmt":"2017-07-07T14:24:49","guid":{"rendered":"http:\/\/webirix.com\/?p=38467"},"modified":"2017-07-07T09:39:18","modified_gmt":"2017-07-07T14:39:18","slug":"deployed-sitios-web-celular","status":"publish","type":"post","link":"https:\/\/webirix.com\/en\/deployed-sitios-web-celular\/","title":{"rendered":"Deployed websites on your cell phone"},"content":{"rendered":"<div class=\"article-featured\"><img loading=\"lazy\" decoding=\"async\" class=\"attachment-blog size-blog wp-post-image\" src=\"http:\/\/develop.ibox.mx\/wp-content\/uploads\/2016\/03\/embrace-responsive-web-design.jpg\" sizes=\"auto, (max-width: 7874px) 100vw, 7874px\" srcset=\"http:\/\/develop.ibox.mx\/wp-content\/uploads\/2016\/03\/embrace-responsive-web-design.jpg 7874w, http:\/\/develop.ibox.mx\/wp-content\/uploads\/2016\/03\/embrace-responsive-web-design-300x180.jpg 300w, http:\/\/develop.ibox.mx\/wp-content\/uploads\/2016\/03\/embrace-responsive-web-design-768x461.jpg 768w, http:\/\/develop.ibox.mx\/wp-content\/uploads\/2016\/03\/embrace-responsive-web-design-1024x614.jpg 1024w\" alt=\"embrace-responsive-web-design\" width=\"7874\" height=\"4724\" \/><\/div>\n<div class=\"entry-content clearfix\">\n<p>Google Chorme has incorporated a very useful tool for web developers who are specialized in responsive design or repetitive design, which we can see by just right clicking on the page, inspecting the element and then changing to device mode.<\/p>\n<p><span id=\"more-261\"><\/span><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-303\" src=\"http:\/\/develop.ibox.mx\/wp-content\/uploads\/2016\/03\/dispositivo-1024x530.png\" sizes=\"auto, (max-width: 840px) 100vw, 840px\" srcset=\"http:\/\/develop.ibox.mx\/wp-content\/uploads\/2016\/03\/dispositivo-1024x530.png 1024w, http:\/\/develop.ibox.mx\/wp-content\/uploads\/2016\/03\/dispositivo-300x155.png 300w, http:\/\/develop.ibox.mx\/wp-content\/uploads\/2016\/03\/dispositivo-768x397.png 768w, http:\/\/develop.ibox.mx\/wp-content\/uploads\/2016\/03\/dispositivo.png 1366w\" alt=\"dispositiv\" width=\"840\" height=\"435\" \/><\/p>\n<p>Ciertamente es una herramienta muy util , pero la desventaja es que el uso no es muy real ya que en algunas ocacciones lo ves bien en un celular , pero en una tablet sobro o se salio del margen , bueno y que pasaia si te dijera que puedes depurar tu pagina de manera real con tu celular Android y google Chorme al mismo tiempo.<\/p>\n<p>Para poder hacer esto requieres lo siguiente:<\/p>\n<ul>\n<li>Conexion a internet Inalambrica<\/li>\n<li>Cable USB<\/li>\n<li>Google Chorme en celular y en computador<\/li>\n<\/ul>\n<p>Ok primeramete deberemos buscar en google el driver que reconosca nuestro telefono celular , para lo cual deberemos ir a la pagina de android developers o en google buscar \u201cUSB driver android\u201d en mi caso ire a la pagina sigueinte:<\/p>\n<p><a href=\"http:\/\/developer.android.com\/intl\/es\/sdk\/win-usb.html\">http:\/\/developer.android.com\/intl\/es\/sdk\/win-usb.html<\/a><\/p>\n<p>Al estar en dicha pagina deberemos dar clic en el siguiente boton y la pagina nos descargara un archivo en formato rar el cual contiene los drivers para que nuestro android trabaje en windows<\/p>\n<div id=\"attachment_305\" class=\"wp-caption aligncenter\">\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-large wp-image-305\" src=\"http:\/\/develop.ibox.mx\/wp-content\/uploads\/2016\/03\/Captura-1024x346.png\" sizes=\"auto, (max-width: 840px) 100vw, 840px\" srcset=\"http:\/\/develop.ibox.mx\/wp-content\/uploads\/2016\/03\/Captura-1024x346.png 1024w, http:\/\/develop.ibox.mx\/wp-content\/uploads\/2016\/03\/Captura-300x101.png 300w, http:\/\/develop.ibox.mx\/wp-content\/uploads\/2016\/03\/Captura-768x260.png 768w, http:\/\/develop.ibox.mx\/wp-content\/uploads\/2016\/03\/Captura.png 1337w\" alt=\"Driver usb\" width=\"840\" height=\"284\" \/><\/p>\n<p class=\"wp-caption-text\">Driver usb<\/p>\n<\/div>\n<p>Ahora deberemos dar en panel de control y seleccionar administrador de dispositivos<\/p>\n<div id=\"attachment_307\" class=\"wp-caption aligncenter\">\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-307\" src=\"http:\/\/develop.ibox.mx\/wp-content\/uploads\/2016\/03\/Capturad.png\" sizes=\"auto, (max-width: 910px) 100vw, 910px\" srcset=\"http:\/\/develop.ibox.mx\/wp-content\/uploads\/2016\/03\/Capturad.png 910w, http:\/\/develop.ibox.mx\/wp-content\/uploads\/2016\/03\/Capturad-300x166.png 300w, http:\/\/develop.ibox.mx\/wp-content\/uploads\/2016\/03\/Capturad-768x425.png 768w\" alt=\"Administrador de dispositovos\" width=\"910\" height=\"503\" \/><\/p>\n<p class=\"wp-caption-text\">Administrador de dispositovos<\/p>\n<\/div>\n<p>Ahora conectarmos nuestro telefono a la computadora activando el modo de desarrollador y en almacenamiento USB y al momento que conectemos nuestro dispositivo la computadora lo mostrara como un dispositivo desconocido , esto debido a que windows no tiene ningun driver instalado como se nuestra acontinuaci\u00f3n<\/p>\n<div id=\"attachment_309\" class=\"wp-caption aligncenter\">\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-309\" src=\"http:\/\/develop.ibox.mx\/wp-content\/uploads\/2016\/03\/Captura-no-encontrad.png\" sizes=\"auto, (max-width: 765px) 100vw, 765px\" srcset=\"http:\/\/develop.ibox.mx\/wp-content\/uploads\/2016\/03\/Captura-no-encontrad.png 765w, http:\/\/develop.ibox.mx\/wp-content\/uploads\/2016\/03\/Captura-no-encontrad-300x106.png 300w\" alt=\"Tel\u00e9fono no reconocido\" width=\"765\" height=\"271\" \/><\/p>\n<p class=\"wp-caption-text\">Tel\u00e9fono no reconocido<\/p>\n<\/div>\n<p>Ahora lo que tenemos que hacer es colocar los driver que hemos descargado, primero descomprimimos el archivo rar y nos quedara una carpeta como la siguiente<\/p>\n<div id=\"attachment_310\" class=\"wp-caption aligncenter\">\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-310\" src=\"http:\/\/develop.ibox.mx\/wp-content\/uploads\/2016\/03\/Captura-carpeta.png\" sizes=\"auto, (max-width: 866px) 100vw, 866px\" srcset=\"http:\/\/develop.ibox.mx\/wp-content\/uploads\/2016\/03\/Captura-carpeta.png 866w, http:\/\/develop.ibox.mx\/wp-content\/uploads\/2016\/03\/Captura-carpeta-300x99.png 300w, http:\/\/develop.ibox.mx\/wp-content\/uploads\/2016\/03\/Captura-carpeta-768x255.png 768w\" alt=\"Carpeta driver USB android\" width=\"866\" height=\"287\" \/><\/p>\n<p class=\"wp-caption-text\">Carpeta driver USB android<\/p>\n<\/div>\n<p>Ahora regresaremos al administrador de dispositivos ,daremos clic derecho \u00a0y en la opcion de actualizar software controlador. Seguidamente nos mostrara una ventana como la siguiente en la cual daremos clic en la opcion marcada acontinuaci\u00f3n:<\/p>\n<div id=\"attachment_311\" class=\"wp-caption aligncenter\">\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-311\" src=\"http:\/\/develop.ibox.mx\/wp-content\/uploads\/2016\/03\/Captura-buscar.png\" sizes=\"auto, (max-width: 642px) 100vw, 642px\" srcset=\"http:\/\/develop.ibox.mx\/wp-content\/uploads\/2016\/03\/Captura-buscar.png 642w, http:\/\/develop.ibox.mx\/wp-content\/uploads\/2016\/03\/Captura-buscar-300x223.png 300w\" alt=\"Buscar controlador en el equipo\" width=\"642\" height=\"477\" \/><\/p>\n<p class=\"wp-caption-text\">Buscar controlador en el equipo<\/p>\n<\/div>\n<p>A continuaci\u00f3n deberemos seleccionar la siguiente opcion<\/p>\n<div id=\"attachment_314\" class=\"wp-caption aligncenter\">\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-314\" src=\"http:\/\/develop.ibox.mx\/wp-content\/uploads\/2016\/03\/Captura2.png\" sizes=\"auto, (max-width: 671px) 100vw, 671px\" srcset=\"http:\/\/develop.ibox.mx\/wp-content\/uploads\/2016\/03\/Captura2.png 671w, http:\/\/develop.ibox.mx\/wp-content\/uploads\/2016\/03\/Captura2-300x223.png 300w\" alt=\"Opci\u00f3n de lista\" width=\"671\" height=\"499\" \/><\/p>\n<p class=\"wp-caption-text\">Opci\u00f3n de lista<\/p>\n<\/div>\n<p>Ahora daremos siguiente y con la opcion marcada de \u201cMostrar todos los dispositivos \u201c<\/p>\n<p>Seguidamente veremos la siguiente ventana<\/p>\n<div id=\"attachment_315\" class=\"wp-caption aligncenter\">\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-315\" src=\"http:\/\/develop.ibox.mx\/wp-content\/uploads\/2016\/03\/Captura-disco.png\" sizes=\"auto, (max-width: 656px) 100vw, 656px\" srcset=\"http:\/\/develop.ibox.mx\/wp-content\/uploads\/2016\/03\/Captura-disco.png 656w, http:\/\/develop.ibox.mx\/wp-content\/uploads\/2016\/03\/Captura-disco-300x227.png 300w\" alt=\"Usar disco\" width=\"656\" height=\"497\" \/><\/p>\n<p class=\"wp-caption-text\">Usar disco<\/p>\n<\/div>\n<p>Y daremos clic en usar disco nos mostrara una ventana para agregar los drivers desde un disco utilizaremos los que acabamos de descargar de google USB<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-316\" src=\"http:\/\/develop.ibox.mx\/wp-content\/uploads\/2016\/03\/Captura-paso--1024x678.png\" sizes=\"auto, (max-width: 840px) 100vw, 840px\" srcset=\"http:\/\/develop.ibox.mx\/wp-content\/uploads\/2016\/03\/Captura-paso--1024x678.png 1024w, http:\/\/develop.ibox.mx\/wp-content\/uploads\/2016\/03\/Captura-paso--300x200.png 300w, http:\/\/develop.ibox.mx\/wp-content\/uploads\/2016\/03\/Captura-paso--768x508.png 768w, http:\/\/develop.ibox.mx\/wp-content\/uploads\/2016\/03\/Captura-paso--90x60.png 90w, http:\/\/develop.ibox.mx\/wp-content\/uploads\/2016\/03\/Captura-paso-.png 1029w\" alt=\"Captura paso\" width=\"840\" height=\"556\" \/><\/p>\n<p>Y daremos en abrir y aceptar para que al retornar a la primera ventana salga lo siguiente<\/p>\n<div id=\"attachment_317\" class=\"wp-caption aligncenter\">\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-317\" src=\"http:\/\/develop.ibox.mx\/wp-content\/uploads\/2016\/03\/Captura-drivers.png\" sizes=\"auto, (max-width: 649px) 100vw, 649px\" srcset=\"http:\/\/develop.ibox.mx\/wp-content\/uploads\/2016\/03\/Captura-drivers.png 649w, http:\/\/develop.ibox.mx\/wp-content\/uploads\/2016\/03\/Captura-drivers-300x274.png 300w\" alt=\"Drivers android\" width=\"649\" height=\"593\" \/><\/p>\n<p class=\"wp-caption-text\">Drivers android<\/p>\n<\/div>\n<p>Ahora daremos en siguiente y si sale una ventana de advertencia daremos continuar y al final nos mostrara que los drivers fueron instalados correctamente , de ser asi el dispositivo saldra en la lista de la siugiente manera<\/p>\n<div id=\"attachment_318\" class=\"wp-caption aligncenter\">\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-318\" src=\"http:\/\/develop.ibox.mx\/wp-content\/uploads\/2016\/03\/Captura-divice.png\" sizes=\"auto, (max-width: 361px) 100vw, 361px\" srcset=\"http:\/\/develop.ibox.mx\/wp-content\/uploads\/2016\/03\/Captura-divice.png 361w, http:\/\/develop.ibox.mx\/wp-content\/uploads\/2016\/03\/Captura-divice-300x77.png 300w\" alt=\"Android reconocido\" width=\"361\" height=\"93\" \/><\/p>\n<p class=\"wp-caption-text\">Android reconocido<\/p>\n<\/div>\n<p>Ahora que tenemos nuestro dispositivo reconocido deberemos ir a google chorme y escribir la siguiente ruta en el navegador<\/p>\n<p><a href=\"http:\/\/chrome\/\/inspect\">http:\/\/chrome:\/\/inspect<\/a><\/p>\n<p>Y nos mostrara la ventana de inspeccionador de dispositivos y podremos ver nuestro telefono en la lista como se muestra acontinuaci\u00f3n:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-large wp-image-320 wp-caption aligncenter\" src=\"http:\/\/develop.ibox.mx\/wp-content\/uploads\/2016\/03\/Captura-inspect-1024x430.png\" sizes=\"auto, (max-width: 840px) 100vw, 840px\" srcset=\"http:\/\/develop.ibox.mx\/wp-content\/uploads\/2016\/03\/Captura-inspect-1024x430.png 1024w, http:\/\/develop.ibox.mx\/wp-content\/uploads\/2016\/03\/Captura-inspect-300x126.png 300w, http:\/\/develop.ibox.mx\/wp-content\/uploads\/2016\/03\/Captura-inspect-768x323.png 768w, http:\/\/develop.ibox.mx\/wp-content\/uploads\/2016\/03\/Captura-inspect.png 1264w\" alt=\"Inspeccionar dispositivos \" width=\"840\" height=\"353\" \/><\/p>\n<p>Y al mismo tiempo nuestro telefono nos solicitara autorizacion, por medio de una huella digital deberemos dar clic en si y que siempre lo recuerde ,ahora podemos abrir una pagina desde nuestro telefono unicamente deberemos escribir la url de nuestro proyecto y dar clic en open , automaticamente lo abrira en el celular como se nuestra acontinuaci\u00f3n<\/p>\n<div id=\"attachment_321\" class=\"wp-caption aligncenter\">\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-321\" src=\"http:\/\/develop.ibox.mx\/wp-content\/uploads\/2016\/03\/Captura-depuracion.png\" sizes=\"auto, (max-width: 650px) 100vw, 650px\" srcset=\"http:\/\/develop.ibox.mx\/wp-content\/uploads\/2016\/03\/Captura-depuracion.png 650w, http:\/\/develop.ibox.mx\/wp-content\/uploads\/2016\/03\/Captura-depuracion-300x42.png 300w\" alt=\"Depuracion\" width=\"650\" height=\"90\" \/><\/p>\n<p class=\"wp-caption-text\">Depuracion<\/p>\n<\/div>\n<p>Y en nuestro telefono aparecera la pagina depurandose o tambien podemos dar clic en inspect y gogle abrira en una ventana nueva la pagina con la resolucion de nuestro telefono<\/p>\n<div id=\"attachment_322\" class=\"wp-caption aligncenter\">\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-large wp-image-322\" src=\"http:\/\/develop.ibox.mx\/wp-content\/uploads\/2016\/03\/Captura-inspeccion-final-1024x526.png\" sizes=\"auto, (max-width: 840px) 100vw, 840px\" srcset=\"http:\/\/develop.ibox.mx\/wp-content\/uploads\/2016\/03\/Captura-inspeccion-final-1024x526.png 1024w, http:\/\/develop.ibox.mx\/wp-content\/uploads\/2016\/03\/Captura-inspeccion-final-300x154.png 300w, http:\/\/develop.ibox.mx\/wp-content\/uploads\/2016\/03\/Captura-inspeccion-final-768x394.png 768w, http:\/\/develop.ibox.mx\/wp-content\/uploads\/2016\/03\/Captura-inspeccion-final.png 1126w\" alt=\"Prueba inspecci\u00f3n usb \" width=\"840\" height=\"431\" \/><\/p>\n<p class=\"wp-caption-text\">Prueba inspecci\u00f3n usb<\/p>\n<\/div>\n<p>Y si hacemos algun cambio o movimiento el celular lo reconocera y listo ya podemos depurar o deployar con google y el telefono celular nuestros sitios web.<\/p>\n<p>Buen d\u00eda<\/p>\n<\/div>\n<p>Google chorme ha incorporado una herramienta muy util para los desarolladores web que estan especializados en el responsive design o dise\u00f1o repsositivo , la cual podemos ver con tan solo dar en la pagina clic derecho inspeccionar el elemento ydespues cambiar a modo de dispositivo. \u00a0 Ciertamente es una herramienta muy util , pero la desventaja es que el uso no es muy real ya que en algunas ocacciones lo ves bien en un celular , pero en una tablet sobro o se salio del margen , bueno y que pasaia si te dijera que puedes depurar tu pagina de manera real con tu celular Android y google Chorme al mismo tiempo. Para poder hacer esto requieres lo siguiente: Conexion a internet Inalambrica Cable USB Google Chorme en celular y en computador Ok primeramete deberemos buscar en google el driver que reconosca nuestro telefono celular , para lo cual deberemos ir a la pagina de android developers o en google buscar \u201cUSB driver android\u201d en mi caso ire a la pagina sigueinte: http:\/\/developer.android.com\/intl\/es\/sdk\/win-usb.html Al estar en dicha pagina deberemos dar clic en el siguiente boton y la pagina nos descargara un archivo en formato rar el cual contiene los drivers para que nuestro android trabaje en windows Driver usb Ahora deberemos dar en panel de control y seleccionar administrador de dispositivos Administrador de dispositovos Ahora conectarmos nuestro telefono a la computadora activando el modo de desarrollador y en almacenamiento USB y al momento que conectemos nuestro dispositivo la computadora lo mostrara como un dispositivo desconocido , esto debido a que windows no tiene ningun driver instalado como se nuestra acontinuaci\u00f3n Tel\u00e9fono no reconocido Ahora lo que tenemos que hacer es colocar los driver que hemos descargado, primero descomprimimos el archivo rar y nos quedara una carpeta como la siguiente Carpeta driver USB android Ahora regresaremos al administrador de dispositivos ,daremos clic derecho \u00a0y en la opcion de actualizar software controlador. Seguidamente nos mostrara una ventana como la siguiente en la cual daremos clic en la opcion marcada acontinuaci\u00f3n: Buscar controlador en el equipo A continuaci\u00f3n deberemos seleccionar la siguiente opcion Opci\u00f3n de lista Ahora daremos siguiente y con la opcion marcada de \u201cMostrar todos los dispositivos \u201c Seguidamente veremos la siguiente ventana Usar disco Y daremos clic en usar disco nos mostrara una ventana para agregar los drivers desde un disco utilizaremos los que acabamos de descargar de google USB Y daremos en abrir y aceptar para que al retornar a la primera ventana salga lo siguiente Drivers android Ahora daremos en siguiente y si sale una ventana de advertencia daremos continuar y al final nos mostrara que los drivers fueron instalados correctamente , de ser asi el dispositivo saldra en la lista de la siugiente manera Android reconocido Ahora que tenemos nuestro dispositivo reconocido deberemos ir a google chorme y escribir la siguiente ruta en el navegador http:\/\/chrome:\/\/inspect Y nos mostrara la ventana de inspeccionador de dispositivos y podremos ver nuestro telefono en la lista como se muestra acontinuaci\u00f3n: Y al mismo tiempo nuestro telefono nos solicitara autorizacion, por medio de una huella digital deberemos dar clic en si y que siempre lo recuerde ,ahora podemos abrir una pagina desde nuestro telefono unicamente deberemos escribir la url de nuestro proyecto y dar clic en open , automaticamente lo abrira en el celular como se nuestra acontinuaci\u00f3n Depuracion Y en nuestro telefono aparecera la pagina depurandose o tambien podemos dar clic en inspect y gogle abrira en una ventana nueva la pagina con la resolucion de nuestro telefono Prueba inspecci\u00f3n usb Y si hacemos algun cambio o movimiento el celular lo reconocera y listo ya podemos depurar o deployar con google y el telefono celular nuestros sitios web. Buen d\u00eda<\/p>","protected":false},"excerpt":{"rendered":"<p>Google Chorme has incorporated a very useful tool for web developers who are specialized in responsive design or repetitive design, which we can see by just right clicking on the page, inspect the element and then switch to device mode. It is certainly a very useful tool, but the downside ...<\/p>","protected":false},"author":24,"featured_media":38483,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2039],"tags":[],"class_list":["post-38467","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-curiosidades"],"jetpack_featured_media_url":"https:\/\/webirix.com\/wp-content\/uploads\/2017\/07\/embrace-responsive-web-design.jpg","_links":{"self":[{"href":"https:\/\/webirix.com\/en\/wp-json\/wp\/v2\/posts\/38467","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webirix.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webirix.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webirix.com\/en\/wp-json\/wp\/v2\/users\/24"}],"replies":[{"embeddable":true,"href":"https:\/\/webirix.com\/en\/wp-json\/wp\/v2\/comments?post=38467"}],"version-history":[{"count":2,"href":"https:\/\/webirix.com\/en\/wp-json\/wp\/v2\/posts\/38467\/revisions"}],"predecessor-version":[{"id":38484,"href":"https:\/\/webirix.com\/en\/wp-json\/wp\/v2\/posts\/38467\/revisions\/38484"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webirix.com\/en\/wp-json\/wp\/v2\/media\/38483"}],"wp:attachment":[{"href":"https:\/\/webirix.com\/en\/wp-json\/wp\/v2\/media?parent=38467"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webirix.com\/en\/wp-json\/wp\/v2\/categories?post=38467"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webirix.com\/en\/wp-json\/wp\/v2\/tags?post=38467"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}