Diferencia entre revisiones de «Ejemplo de web adaptada a moviles»

De KumbiaPHP Framework Wiki
m
(Agrego el viewport y edito varias palabras que dejan de tener sentido con los cambios que se le ha ido haciendo al archivo)
 
(No se muestran 18 ediciones intermedias de 4 usuarios)
Línea 1: Línea 1:
 +
{{cleanupbox
 +
|image=[[Archivo:Information_icon4.png|45px]]
 +
|texto ='''Este Artículo cumple con todos los quererimientos de los Kumbieros.'''<br />
 +
}}
 +
 +
 
== INTRODUCCION ==
 
== INTRODUCCION ==
  
Línea 7: Línea 13:
 
* '''usando la detección del navegador'''. En este caso, se detecta el navegador/sistema operativo del cliente y se le muestra la web adaptada.
 
* '''usando la detección del navegador'''. En este caso, se detecta el navegador/sistema operativo del cliente y se le muestra la web adaptada.
  
−
Personalmente prefiero la primera pero como hay quien prefiere la segunda, he creado una librería que nos permita gastar ambas.
+
Personalmente prefiero la primera pero como hay quien prefiere la segunda, he creado una librería que nos permita utilizar ambas.
  
 
'''IMPORTANTE:''' El siguiente código es para Spirit Beta1, que como sabeis es suficiente estable como para desarrollar aplicaciones con ella. En Spirit Beta2 este ejemplo NO SIRVE.
 
'''IMPORTANTE:''' El siguiente código es para Spirit Beta1, que como sabeis es suficiente estable como para desarrollar aplicaciones con ella. En Spirit Beta2 este ejemplo NO SIRVE.
Línea 19: Línea 25:
 
<source lang=php>
 
<source lang=php>
 
<?php
 
<?php
−
class TestController extends ApplicationController {
+
class TestController extends ApplicationController
−
   public function index() {
+
{
 +
   public function index()
 +
  {
 
     $this->mensaje = "Este mensaje se recibe desde el metodo ".$this->action_name." del controller ".$this->controller_name;
 
     $this->mensaje = "Este mensaje se recibe desde el metodo ".$this->action_name." del controller ".$this->controller_name;
 
     $this->hora = date('Y-m-d');  
 
     $this->hora = date('Y-m-d');  
Línea 34: Línea 42:
 
   </head>
 
   </head>
  
−
   <body bgcolor="blue">
+
   <body>
 
     <h1>Contenido</h1>
 
     <h1>Contenido</h1>
 
     <?php View::Content(); ?>
 
     <?php View::Content(); ?>
Línea 43: Línea 51:
 
'''/app/views/test/index.phtml'''
 
'''/app/views/test/index.phtml'''
 
<source lang=php>
 
<source lang=php>
−
<b>Mensaje:</b> <?php echo $mensaje; ?><br />
+
<p>Mensaje: <?php echo $mensaje; ?></p>
−
<b>Hora:</b> <?php echo $hora; ?>  
+
<p>Hora: <?php echo $hora; ?></p>
 
</source>
 
</source>
  
Línea 50: Línea 58:
 
== PREPARANDO LOS CAMBIOS ==
 
== PREPARANDO LOS CAMBIOS ==
  
−
Bien, lo primero que necesitamos para nuestra "web reducida" es una plantilla distinta. En nuestro caso de ejemplo será simple: he cambiado el color de fondo, quitado el H1 y ajustado el viewport.
+
Bien, lo primero que necesitamos para nuestra "web reducida" es una plantilla distinta. En nuestro caso de ejemplo será simple: he cambiado el color de fondo, quitado el H1 y ajustado el viewport para que se vea mejor en estos dispositivos.
  
 
'''/app/views/templates/mobile.phtml'''
 
'''/app/views/templates/mobile.phtml'''
Línea 56: Línea 64:
 
<html>
 
<html>
 
   <head>
 
   <head>
−
     <title>Plantilla por defecto para movil</title>
+
     <title>Plantilla por defecto para móvil</title>
 +
    <meta name="viewport" content="initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
 
   </head>
 
   </head>
  
−
   <body bgcolor="gray">
+
   <body>
−
     <b>Contenido</b>
+
     <h1>Móvil</h1>
 
     <?php View::Content(); ?>
 
     <?php View::Content(); ?>
 
   </body>
 
   </body>
Línea 71: Línea 80:
 
'''/app/views/test/mobile/index.phtml'''
 
'''/app/views/test/mobile/index.phtml'''
 
<source lang=php>
 
<source lang=php>
−
<b>Mensaje:</b> <?php echo $mensaje; ?><br />
+
<p>Mensaje: <?php echo $mensaje; ?></p>
−
<b>Hora:</b> <?php echo $hora; ?>  
+
<p>Hora: <?php echo $hora; ?></p>
−
<i>Esta pagina esta optimizada para dispositivos moviles</i>
+
<p>Esta página esta optimizada para dispositivos móviles</p>
 
</source>
 
</source>
−
 
  
 
== LIBRERIA AUXILIAR ==
 
== LIBRERIA AUXILIAR ==
Línea 85: Línea 93:
 
<?php
 
<?php
 
class Mobile {
 
class Mobile {
−
public function mobileURL() {
+
public static function mobileURL() {
 
// Lista de URLs
 
// Lista de URLs
 
$mobile_urls = array( "m.example.com", "mobile.example.com" );
 
$mobile_urls = array( "m.example.com", "mobile.example.com" );
Línea 93: Línea 101:
 
}
 
}
  
−
public function mobileBrowser() {
+
public static function mobileBrowser() {
 
$mobile_browser = '0';
 
$mobile_browser = '0';
  
Línea 144: Línea 152:
  
 
Primero, vamos a hacer el ejemplo con detección por subdomínio, que es la más fácil de probar desde nuestro ordenador. Lo que haremos sera cargar la librería '''Mobile''' y preguntar al método ''mobileURL''. Si el resultado es positivo, cambiaremos el ''template'' y la ''vista'' usando los métodos de KumbiaPHP.
 
Primero, vamos a hacer el ejemplo con detección por subdomínio, que es la más fácil de probar desde nuestro ordenador. Lo que haremos sera cargar la librería '''Mobile''' y preguntar al método ''mobileURL''. Si el resultado es positivo, cambiaremos el ''template'' y la ''vista'' usando los métodos de KumbiaPHP.
 +
 +
Para cambiar el template, lo que tenemos que hacer es cambiar el atributo ''template'' y decirle al controller que utilice el conjunto de vistas ''mobile'', es decir, todas aquellas que estan dentro de la subcarpeta ''/app/views/test/mobile''.
  
 
Dejamos el controlador así:
 
Dejamos el controlador así:
Línea 161: Línea 171:
 
       $this->set_response("mobile");
 
       $this->set_response("mobile");
 
     }
 
     }
 +
  }
 
}
 
}
 
</source>
 
</source>
Línea 184: Línea 195:
 
       $this->set_response("mobile");
 
       $this->set_response("mobile");
 
     }
 
     }
 +
  }
 
}
 
}
 +
 
</source>
 
</source>
  
Línea 202: Línea 215:
 
Saludos,
 
Saludos,
 
Soukron
 
Soukron
 +
[[Categoría:Tutoriales KumbiaPHP]]

Revisión actual del 21:02 28 may 2010

{{#if:Information icon4.png |}}

{{#if:

|}}
Information icon4.pngEste Artículo cumple con todos los quererimientos de los Kumbieros.
 {{{imageright}}}



INTRODUCCION[editar]

A continuacion voy a poner un ejemplo de como adaptar nuestra web (o parte de ella) a smartphones como iPhone o basados en Android, gracias al MVC de KumbiaPHP.

Veremos dos formas distintas de hacer el acceso a nuestra web movil:

  • usando un subdominio. Ejemplo: Si se quiere acceder a la web adaptada, se accede a http://m.example.com
  • usando la detección del navegador. En este caso, se detecta el navegador/sistema operativo del cliente y se le muestra la web adaptada.

Personalmente prefiero la primera pero como hay quien prefiere la segunda, he creado una librería que nos permita utilizar ambas.

IMPORTANTE: El siguiente código es para Spirit Beta1, que como sabeis es suficiente estable como para desarrollar aplicaciones con ella. En Spirit Beta2 este ejemplo NO SIRVE.


PUNTO DE PARTIDA[editar]

Partimos de una aplicacion muy simple en la que se muestra un mensaje junto con la fecha y hora. Espero no haber pecado de simpleza.

/app/controllers/test_controller.php 

<?php
class TestController extends ApplicationController
{
  public function index()
  {
    $this->mensaje = "Este mensaje se recibe desde el metodo ".$this->action_name." del controller ".$this->controller_name;
    $this->hora = date('Y-m-d'); 
  }
}

/app/views/templates/default.phtml 

<html>
  <head>
    <title>Plantilla por defecto</title>
  </head>

  <body>
    <h1>Contenido</h1>
    <?php View::Content(); ?>
  </body>
</html>

/app/views/test/index.phtml 

<p>Mensaje: <?php echo $mensaje; ?></p>
<p>Hora: <?php echo $hora; ?></p>


PREPARANDO LOS CAMBIOS[editar]

Bien, lo primero que necesitamos para nuestra "web reducida" es una plantilla distinta. En nuestro caso de ejemplo será simple: he cambiado el color de fondo, quitado el H1 y ajustado el viewport para que se vea mejor en estos dispositivos.

/app/views/templates/mobile.phtml 

<html>
  <head>
    <title>Plantilla por defecto para móvil</title>
    <meta name="viewport" content="initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
  </head>

  <body>
    <h1>Móvil</h1>
    <?php View::Content(); ?>
  </body>
</html>


Ahora, hay que crear una vista distinta para el método index. Esta vista será la que se muestre junto con la plantilla adecuada. Para esto, vamos a crear una subcarpeta llamada mobile dentro de la carpeta de vistas del controller. En esta carpeta se deben ir metiendo las vistas de cada método igual que hacemos siempre, pero sólo de las versiones reducidas.

/app/views/test/mobile/index.phtml 

<p>Mensaje: <?php echo $mensaje; ?></p>
<p>Hora: <?php echo $hora; ?></p>
<p>Esta página esta optimizada para dispositivos móviles</p>

LIBRERIA AUXILIAR[editar]

He creado una librería auxiliar, que nos ayudará con la detección del dispositivo de dos formas distintas: en base a la URL o en base a la detección del navegador.

/app/libs/mobile.php 

<?php
class Mobile {
	public static function mobileURL() {
		// Lista de URLs
		$mobile_urls = array( "m.example.com", "mobile.example.com" );

		// Se busca el dominio en el array
	    	return in_array(strtolower($_SERVER['HTTP_HOST']), $mobile_urls);	
	}

	public static function mobileBrowser() {
		$mobile_browser = '0';

		//$_SERVER['HTTP_USER_AGENT'] -> el agente de usuario que está accediendo a la página.
		if(preg_match('/(up.browser|up.link|mmp|symbian|smartphone|midp|wap|phone)/i',strtolower($_SERVER['HTTP_USER_AGENT']))) {
		    $mobile_browser++;
		}

		//$_SERVER['HTTP_ACCEPT'] -> Indica los tipos MIME que el cliente puede recibir. 
		if((strpos(strtolower($_SERVER['HTTP_ACCEPT']),'application/vnd.wap.xhtml+xml')>0) or
		    ((isset($_SERVER['HTTP_X_WAP_PROFILE']) or isset($_SERVER['HTTP_PROFILE'])))) {
		    $mobile_browser++;
		}

		$mobile_ua = strtolower(substr($_SERVER['HTTP_USER_AGENT'],0,4));
		$mobile_agents = array(
		    'w3c ','acs-','alav','alca','amoi','audi','avan','benq','bird','blac',
		    'blaz','brew','cell','cldc','cmd-','dang','doco','eric','hipt','inno',
		    'ipaq','java','jigs','kddi','keji','leno','lg-c','lg-d','lg-g','lge-',
		    'maui','maxo','midp','mits','mmef','mobi','mot-','moto','mwbp','nec-',
		    'newt','noki','oper','palm','pana','pant','phil','play','port','prox',
		    'qwap','sage','sams','sany','sch-','sec-','send','seri','sgh-','shar',
		    'sie-','siem','smal','smar','sony','sph-','symb','t-mo','teli','tim-',
		    'tosh','tsm-','upg1','upsi','vk-v','voda','wap-','wapa','wapi','wapp',
		    'wapr','webc','winw','winw','xda','xda-');

		//buscar agentes en el array de agentes
		if(in_array($mobile_ua, $mobile_agents)) {
		    $mobile_browser++;
		}

		//$_SERVER['ALL_HTTP'] -> Todas las cabeceras HTTP
		if(strpos(strtolower($_SERVER['ALL_HTTP']),'OperaMini')>0) {
		    $mobile_browser++;
		}
		if(strpos(strtolower($_SERVER['HTTP_USER_AGENT']),'windows')>0) {
		    $mobile_browser=0;
		}

		return $mobile_browser;
	}
}
?>


CAMBIANDO EL CONTROLLER[editar]

Ya tenemos nuestra aplicacion, nuestra plantilla y vista adaptadas, y la librería que nos permite detectar el navegador y/o la URL de acceso. Solo nos queda juntar las piezas.

Primero, vamos a hacer el ejemplo con detección por subdomínio, que es la más fácil de probar desde nuestro ordenador. Lo que haremos sera cargar la librería Mobile y preguntar al método mobileURL. Si el resultado es positivo, cambiaremos el template y la vista usando los métodos de KumbiaPHP.

Para cambiar el template, lo que tenemos que hacer es cambiar el atributo template y decirle al controller que utilice el conjunto de vistas mobile, es decir, todas aquellas que estan dentro de la subcarpeta /app/views/test/mobile.

Dejamos el controlador así:

/app/controllers/test_controller.php 

<?php
class TestController extends ApplicationController {
  public function index() {
    $this->mensaje = "Este mensaje se recibe desde el metodo ".$this->action_name." del controller ".$this->controller_name;
    $this->hora = date('Y-m-d'); 
  
    // Si la URL de acceso es "mobile", cargamos la plantilla/vista adecuada
    Load::lib("mobile");
    if (Mobile::mobileURL()) {
      $this->template="mobile";
      $this->set_response("mobile");
    }
  }
}

Ahora, podemos visitar nuestra app, en su URL normal http://example.com, así como en la web reducida http://m.example.com para ver las diferencias. Recomiendo hacer la visita desde un smartphone para ver la diferencia en poner el <meta> del viewport y sin él.

Si somos de los que preferimos hacer la detección del navegador y obligar al usuario a que vea ese tipo de web, solo tenemos que cambiar el método al que preguntamos de la librería Mobile:

Dejamos el controlador así:

/app/controllers/test_controller.php 

<?php
class TestController extends ApplicationController {
  public function index() {
    $this->mensaje = "Este mensaje se recibe desde el metodo ".$this->action_name." del controller ".$this->controller_name;
    $this->hora = date('Y-m-d'); 
  
    // Si la URL de acceso es "mobile", cargamos la plantilla/vista adecuada
    Load::lib("mobile");
    if (Mobile::mobileBrowser()) {
      $this->template="mobile";
      $this->set_response("mobile");
    }
  }
}


CONCLUSIONES[editar]

Como se ha visto, hemos creado una plantilla y una vista alternativas para un método bien simple, las cuales son usadas para ofrecer una vista distinta de nuestra aplicacion web. Nos hemos apoyado en una librería externa para hacer la detección, con lo que también hemos visto la forma de incluir nuestras propias librerías y extender funcionalidades.

A modo de resumen de lo visto:

  • Crear y usar librerías externas a nuestra aplicacion web.
  • Trabajar con los métodos set_response() y el atributo template para cambiar nuestra vista


Espero que el ejemplo haya servido de base para hacer algo más grance.


Saludos, Soukron

Obtenido de «https://wiki.kumbiaphp.com/index.php?title=Ejemplo_de_web_adaptada_a_moviles&oldid=2665»