Deployed sitios web en tu celular


embrace-responsive-web-design

Google chorme ha incorporado una herramienta muy util para los desarolladores web que estan especializados en el responsive design o diseño repsositivo , la cual podemos ver con tan solo dar en la pagina clic derecho inspeccionar el elemento ydespues cambiar a modo de dispositivo.

dispositiv

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 “USB driver android” 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

Driver usb

Ahora deberemos dar en panel de control y seleccionar administrador de dispositivos

Administrador de dispositovos

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ón

Teléfono no reconocido

Teléfono 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

Carpeta driver USB android

Ahora regresaremos al administrador de dispositivos ,daremos clic derecho  y 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ón:

Buscar controlador en el equipo

Buscar controlador en el equipo

A continuación deberemos seleccionar la siguiente opcion

Opción de lista

Opción de lista

Ahora daremos siguiente y con la opcion marcada de “Mostrar todos los dispositivos “

Seguidamente veremos la siguiente ventana

Usar disco

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

Captura paso

Y daremos en abrir y aceptar para que al retornar a la primera ventana salga lo siguiente

Drivers android

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

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ón:

Inspeccionar dispositivos

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ón

Depuracion

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ón usb

Prueba inspección 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ía

Google chorme ha incorporado una herramienta muy util para los desarolladores web que estan especializados en el responsive design o diseño repsositivo , la cual podemos ver con tan solo dar en la pagina clic derecho inspeccionar el elemento ydespues cambiar a modo de dispositivo.   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 “USB driver android” 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ón Teléfono 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  y 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ón: Buscar controlador en el equipo A continuación deberemos seleccionar la siguiente opcion Opción de lista Ahora daremos siguiente y con la opcion marcada de “Mostrar todos los dispositivos “ 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ón: 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ón 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ón 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ía

Anterior Posts Tagged: jQueryPOSTS TAGGED: JQUERY
próximo Eventos personalizados en jQuery Eventos personalizados en jQuery

Sin comentarios

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *