{"id":37811,"date":"2016-03-17T10:37:01","date_gmt":"2016-03-17T16:37:01","guid":{"rendered":"http:\/\/develop.ibox.mx\/?p=261"},"modified":"2016-08-02T08:38:00","modified_gmt":"2016-08-02T13:38:00","slug":"deployed-sitios-web-en-tu-cellular","status":"publish","type":"post","link":"https:\/\/webirix.com\/en\/deployed-sitios-web-en-tu-cellular\/","title":{"rendered":"Deployed websites on your cell phone"},"content":{"rendered":"<p style=\"text-align: justify;\">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 style=\"text-align: justify;\">\u00a0<!--more--><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\" alt=\"dispositiv\" width=\"840\" height=\"435\" \/><\/p>\n<p style=\"text-align: justify;\">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 style=\"text-align: justify;\">Para poder hacer esto requieres lo siguiente:<\/p>\n<ul>\n<li style=\"text-align: justify;\">Conexion a internet Inalambrica<\/li>\n<li style=\"text-align: justify;\">Cable USB<\/li>\n<li style=\"text-align: justify;\">Google Chorme en celular y en computador<\/li>\n<\/ul>\n<p style=\"text-align: justify;\">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 &#8220;USB driver android&#8221; en mi caso ire a la pagina sigueinte:<\/p>\n<p style=\"text-align: justify;\"><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 style=\"text-align: justify;\">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<figure id=\"attachment_305\" aria-describedby=\"caption-attachment-305\" style=\"width: 830px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-large wp-image-305\" src=\"http:\/\/develop.ibox.mx\/wp-content\/uploads\/2016\/03\/Captura-1024x346.png\" alt=\"Driver usb\" width=\"840\" height=\"284\" \/><figcaption id=\"caption-attachment-305\" class=\"wp-caption-text\">Driver usb<\/figcaption><\/figure>\n<p style=\"text-align: justify;\">Ahora deberemos dar en panel de control y seleccionar administrador de dispositivos<\/p>\n<figure id=\"attachment_307\" aria-describedby=\"caption-attachment-307\" style=\"width: 900px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-307\" src=\"http:\/\/develop.ibox.mx\/wp-content\/uploads\/2016\/03\/Capturad.png\" alt=\"Administrador de dispositovos\" width=\"910\" height=\"503\" \/><figcaption id=\"caption-attachment-307\" class=\"wp-caption-text\">Administrador de dispositovos<\/figcaption><\/figure>\n<p style=\"text-align: justify;\">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<figure id=\"attachment_309\" aria-describedby=\"caption-attachment-309\" style=\"width: 755px\" class=\"wp-caption aligncenter\"><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\" alt=\"Tel\u00e9fono no reconocido\" width=\"765\" height=\"271\" \/><figcaption id=\"caption-attachment-309\" class=\"wp-caption-text\">Tel\u00e9fono no reconocido<\/figcaption><\/figure>\n<p style=\"text-align: justify;\">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<figure id=\"attachment_310\" aria-describedby=\"caption-attachment-310\" style=\"width: 856px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-310\" src=\"http:\/\/develop.ibox.mx\/wp-content\/uploads\/2016\/03\/Captura-carpeta.png\" alt=\"Carpeta driver USB android\" width=\"866\" height=\"287\" \/><figcaption id=\"caption-attachment-310\" class=\"wp-caption-text\">Carpeta driver USB android<\/figcaption><\/figure>\n<p style=\"text-align: justify;\">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<figure id=\"attachment_311\" aria-describedby=\"caption-attachment-311\" style=\"width: 632px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-311\" src=\"http:\/\/develop.ibox.mx\/wp-content\/uploads\/2016\/03\/Captura-buscar.png\" alt=\"Buscar controlador en el equipo\" width=\"642\" height=\"477\" \/><figcaption id=\"caption-attachment-311\" class=\"wp-caption-text\">Buscar controlador en el equipo<\/figcaption><\/figure>\n<p style=\"text-align: justify;\">A continuaci\u00f3n deberemos seleccionar la siguiente opcion<\/p>\n<figure id=\"attachment_314\" aria-describedby=\"caption-attachment-314\" style=\"width: 661px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-314\" src=\"http:\/\/develop.ibox.mx\/wp-content\/uploads\/2016\/03\/Captura2.png\" alt=\"Opci\u00f3n de lista\" width=\"671\" height=\"499\" \/><figcaption id=\"caption-attachment-314\" class=\"wp-caption-text\">Opci\u00f3n de lista<\/figcaption><\/figure>\n<p style=\"text-align: justify;\">Ahora daremos siguiente y con la opcion marcada de &#8220;Mostrar todos los dispositivos &#8220;<\/p>\n<p style=\"text-align: justify;\">Seguidamente veremos la siguiente ventana<\/p>\n<figure id=\"attachment_315\" aria-describedby=\"caption-attachment-315\" style=\"width: 646px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-315\" src=\"http:\/\/develop.ibox.mx\/wp-content\/uploads\/2016\/03\/Captura-disco.png\" alt=\"Usar disco\" width=\"656\" height=\"497\" \/><figcaption id=\"caption-attachment-315\" class=\"wp-caption-text\">Usar disco<\/figcaption><\/figure>\n<p style=\"text-align: justify;\">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 style=\"text-align: justify;\"><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\" alt=\"Captura paso\" width=\"840\" height=\"556\" \/><\/p>\n<p style=\"text-align: justify;\">Y daremos en abrir y aceptar para que al retornar a la primera ventana salga lo siguiente<\/p>\n<figure id=\"attachment_317\" aria-describedby=\"caption-attachment-317\" style=\"width: 639px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-317\" src=\"http:\/\/develop.ibox.mx\/wp-content\/uploads\/2016\/03\/Captura-drivers.png\" alt=\"Drivers android\" width=\"649\" height=\"593\" \/><figcaption id=\"caption-attachment-317\" class=\"wp-caption-text\">Drivers android<\/figcaption><\/figure>\n<p style=\"text-align: justify;\">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<figure id=\"attachment_318\" aria-describedby=\"caption-attachment-318\" style=\"width: 351px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-318\" src=\"http:\/\/develop.ibox.mx\/wp-content\/uploads\/2016\/03\/Captura-divice.png\" alt=\"Android reconocido\" width=\"361\" height=\"93\" \/><figcaption id=\"caption-attachment-318\" class=\"wp-caption-text\">Android reconocido<\/figcaption><\/figure>\n<p style=\"text-align: justify;\">Ahora que tenemos nuestro dispositivo reconocido deberemos ir a google chorme y escribir la siguiente ruta en el navegador<\/p>\n<p style=\"text-align: justify;\"><a href=\"http:\/\/chrome:\/\/inspect\">http:\/\/chrome:\/\/inspect<\/a><\/p>\n<p style=\"text-align: justify;\">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 style=\"text-align: justify;\"><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\" alt=\"Inspeccionar dispositivos \" width=\"840\" height=\"353\" \/><\/p>\n<p style=\"text-align: justify;\">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<figure id=\"attachment_321\" aria-describedby=\"caption-attachment-321\" style=\"width: 640px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-321\" src=\"http:\/\/develop.ibox.mx\/wp-content\/uploads\/2016\/03\/Captura-depuracion.png\" alt=\"Depuracion\" width=\"650\" height=\"90\" \/><figcaption id=\"caption-attachment-321\" class=\"wp-caption-text\">Depuracion<\/figcaption><\/figure>\n<p style=\"text-align: justify;\">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<figure id=\"attachment_322\" aria-describedby=\"caption-attachment-322\" style=\"width: 830px\" class=\"wp-caption aligncenter\"><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\" alt=\"Prueba inspecci\u00f3n usb \" width=\"840\" height=\"431\" \/><figcaption id=\"caption-attachment-322\" class=\"wp-caption-text\">Prueba inspecci\u00f3n usb<\/figcaption><\/figure>\n<p style=\"text-align: justify;\">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 style=\"text-align: justify;\">Buen d\u00eda<\/p>\n<p style=\"text-align: justify;\">","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, inspecting the element and then changing to device mode. \u00a0<\/p>","protected":false},"author":21,"featured_media":37823,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2020,2164,2172,2176,2175],"tags":[],"class_list":["post-37811","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-android","category-css","category-html","category-movil","category-programacion"],"jetpack_featured_media_url":"https:\/\/webirix.com\/wp-content\/uploads\/2016\/03\/pcntl_fork.png","_links":{"self":[{"href":"https:\/\/webirix.com\/en\/wp-json\/wp\/v2\/posts\/37811","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\/21"}],"replies":[{"embeddable":true,"href":"https:\/\/webirix.com\/en\/wp-json\/wp\/v2\/comments?post=37811"}],"version-history":[{"count":1,"href":"https:\/\/webirix.com\/en\/wp-json\/wp\/v2\/posts\/37811\/revisions"}],"predecessor-version":[{"id":37824,"href":"https:\/\/webirix.com\/en\/wp-json\/wp\/v2\/posts\/37811\/revisions\/37824"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webirix.com\/en\/wp-json\/wp\/v2\/media\/37823"}],"wp:attachment":[{"href":"https:\/\/webirix.com\/en\/wp-json\/wp\/v2\/media?parent=37811"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webirix.com\/en\/wp-json\/wp\/v2\/categories?post=37811"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webirix.com\/en\/wp-json\/wp\/v2\/tags?post=37811"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}