Edición de «Ejemplo de web adaptada a moviles»
De KumbiaPHP Framework Wiki
Advertencia: no has iniciado sesión. Tu dirección IP se hará pública si haces cualquier edición. Si inicias sesión o creas una cuenta, tus ediciones se atribuirán a tu nombre de usuario, además de otros beneficios.
Puedes deshacer la edición. Antes de deshacer la edición, comprueba la siguiente comparación para verificar que realmente es lo que quieres hacer, y entonces guarda los cambios para así efectuar la reversión.
Revisión actual | Tu texto | ||
Línea 1: | Línea 1: | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
== INTRODUCCION == | == INTRODUCCION == | ||
Línea 13: | Línea 7: | ||
* '''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 | + | Personalmente prefiero la primera pero como hay quien prefiere la segunda, he creado una librería que nos permita gastar 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 25: | Línea 19: | ||
<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 42: | Línea 34: | ||
</head> | </head> | ||
− | <body> | + | <body bgcolor="blue"> |
<h1>Contenido</h1> | <h1>Contenido</h1> | ||
<?php View::Content(); ?> | <?php View::Content(); ?> | ||
Línea 51: | Línea 43: | ||
'''/app/views/test/index.phtml''' | '''/app/views/test/index.phtml''' | ||
<source lang=php> | <source lang=php> | ||
− | < | + | <b>Mensaje:</b> <?php echo $mensaje; ?><br /> |
− | < | + | <b>Hora:</b> <?php echo $hora; ?> |
</source> | </source> | ||
Línea 58: | Línea 50: | ||
== 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. |
'''/app/views/templates/mobile.phtml''' | '''/app/views/templates/mobile.phtml''' | ||
Línea 64: | Línea 56: | ||
<html> | <html> | ||
<head> | <head> | ||
− | <title>Plantilla por defecto para | + | <title>Plantilla por defecto para movil</title> |
− | |||
</head> | </head> | ||
− | <body> | + | <body bgcolor="gray"> |
− | < | + | <b>Contenido</b> |
<?php View::Content(); ?> | <?php View::Content(); ?> | ||
</body> | </body> | ||
Línea 80: | Línea 71: | ||
'''/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 /> |
− | < | + | <b>Hora:</b> <?php echo $hora; ?> |
− | < | + | <i>Esta pagina esta optimizada para dispositivos moviles</i> |
</source> | </source> | ||
+ | |||
== LIBRERIA AUXILIAR == | == LIBRERIA AUXILIAR == | ||
Línea 93: | Línea 85: | ||
<?php | <?php | ||
class Mobile { | class Mobile { | ||
− | public | + | public 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 101: | Línea 93: | ||
} | } | ||
− | public | + | public function mobileBrowser() { |
$mobile_browser = '0'; | $mobile_browser = '0'; | ||
Línea 153: | Línea 145: | ||
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 | + | Para cambiar el template, lo que tenemos que hacer es cambiar el atributo ''template'' y decirle al controller que gaste 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 171: | Línea 163: | ||
$this->set_response("mobile"); | $this->set_response("mobile"); | ||
} | } | ||
− | |||
} | } | ||
</source> | </source> | ||
Línea 195: | Línea 186: | ||
$this->set_response("mobile"); | $this->set_response("mobile"); | ||
} | } | ||
− | |||
} | } | ||
− | |||
</source> | </source> | ||