|     Inicio    |   |         |  |   FOROS      |  |      |      
   Elastix - VoIP B4A (Basic4Android) App inventor 2 PHP - MySQL
  Estación meteorológica B4J (Basic4Java) ADB Shell - Android Arduino
   AutoIt (Programación) Visual Basic Script (VBS) FireBase (BD autoactualizable) NodeMCU como Arduino
  Teleco - Emisora de A.M. Visual Basic Cosas de Windows Webs interesantes
Translate:
Búsqueda en este sitio:


Nuevo concurso para España, Argentina, Brasil, Chile, Colombia, Ecuador, México, Perú y Portugal.

B4A en español - Juan Antonio Villalpando
(BASIC4Android)

-- Tutorial de B4A --

Volver al índice del tutorial

____________________________

90.- Redireccionar entre web para móvil y para ordenador.

Supongamos que tenemos alojado nuestro sitio en un servidor web. Desde cualquier ordenador o móvil cualquier persona puede entrar en nuestro sitio web.

Pero nos interesa que según esa persona esté utilizando el ordenador o el móvil, se cargue un página web diferente. Ya que las páginas web para ordenador tienen una estructura y para el móvil tienen otra.

Para ello se puede hacer de varias maneras:

- Que la página de inicio del sitio en vez de ser, index.htm sea index.php y dentro contenga un código .PHP que distinga si ha entrado con ordenador o con móvil y direccione convenientemente a la página de entrada apropiada.

- Insertar al principio de nuestra página index.htm un código JavaScript que detecte si el navegador proviene de un ordenador o de un móvil, y desviarlo a otra página si viene del móvil.

Vamos a ver ésta última opción.

Buscando en Internet puedes encontrar varios códigos de redireccionamento de página, en nuestro caso vamos a utilizar uno sencillo que únicamente detecta el tamaño de la pantalla del dispositivo de llamada, si el tamaño es menor de 699, se supone que es un móvil y desvía hacia otro archivo de inicio.

Supongamos que tenemos nuestro sitio web y que la página de inicio es index.htm.

En la misma carpeta donde tenemos index.htm, creamos una subcarpeta llamada movil y dentro de ella un archivo llamado index.htm.
En este último archivo creamos la pantalla de inicio de nuestra web para móvil.

Las páginas web para móviles suelen tener un aspecto parecido a los ListView, busca en Internet imágenes de Plantillas para móviles, "Template mobile web site".

Ver una web con plantillas.
Ejemplo de plantilla vista en ordenador: http://www.iesromerovargas.com/movil/interior/interior/ (pruébala desde el móvil).

Como ejemplo voy a construir una página de inicio para móvil sencilla, la llamaré index.htm y la copiaré en la carpeta movil.
Esta es la sencilla página realizada para el móvil index.htm

- Ahora debemos ir a la página "normal" de entrada index.htm y poner el siguiente código JavaScript debajo de la marca <HEAD>

<script type="text/javascript">
<!--
if (screen.width <= 699) {
document.location = "http://kio4.com/movil/";
}
//-->
</script>

De esta manera cuando alguien entre en nuestra web y el dispositivo del navegador tiene un tamaño menor o igual a 699, se desviará la navegación hacia la página http://kio4.com/movil/ que es donde se encuentra el archivo index,htm. la portada de la web destinada al móvil.

En el dibujo superior he puesto cómo se vería la página de inicio vista desde un navegador de ordenador y otro de móvil.

__________________________________

Con el código JavaScript anterior podemos notar un problema, y es que sería conveniente que desde el móvil el usuario pudiera elegir ver la página adaptada al móvil o la página adaptada al ordenador, tendríamos que cambiar el código.
Una solución sería copiar la página de portada a otra igual llamada por ejemplo index-normal.htm (esta página será igual al index.htm, pero no contendrá el JavaScript de redireccionamiento).
Luego en la página index.htm de la carpeta móvil añadiremos una entrada que llevaria a la página como normalmente se ve en el ordenador.

En Internet puedes encontrar muchos código de este tipo...

En esta web observamos un código que distingue los distintos tipos de sistemas operativos para móviles y ordenador. (Sin embargo el código indicado no funciona eficientemente, hay que arreglarlo un poco.

En esta otra web, encontramos código tanto en JavaScript como en PHP.

Por tipo de sistema operativo. Otro parecido. Hay que tener en cuenta que algunos no funcionan en el emulador.

________________________________

- Mi correo:
juana1991@yahoo.com
- KIO4.COM - Política de cookies. Textos e imágenes propiedad del autor:
© Juan A. Villalpando
No se permite la copia de información ni imágenes.
Usamos cookies propias y de terceros que entre otras cosas recogen datos sobre sus hábitos de navegación y realizan análisis de uso de nuestro sitio.
Si continúa navegando consideramos que acepta su uso. Acepto    Más información