Actualmente JQuery Mobile ya proporciona soporte para los principales sistemas operativos móviles del mercado como IOS, Android, Windows Phone, Symbian o MeeGo.
lunes, 7 de marzo de 2011
Tutoriales de JQuery Mobile framework
Recientemente se ha liberado la versión 1.0 Alpha2 de JQuery Mobile. JQuery Mobile es la versión para móviles del popular framework JQuery para desarrollar la parte visual de sitios web en JavaScript.
Uno de los objetivos principales del proyecto es llegar a ser un framework multiplataforma y multibrowser, que sea capaz de proporcionar a los desarrolladores un entorno independiente del dispositivo móvil en el que se vaya a visualizar una aplicación web.
Actualmente JQuery Mobile ya proporciona soporte para los principales sistemas operativos móviles del mercado como IOS, Android, Windows Phone, Symbian o MeeGo.
Actualmente JQuery Mobile ya proporciona soporte para los principales sistemas operativos móviles del mercado como IOS, Android, Windows Phone, Symbian o MeeGo.
Como detectar navegador móvil con WURFL en un sitio web
Introducción a WURFL
Cumplir con las normas no siempre es fácil, pero es muy importante que los navegadores muestren el contenido como su creador ha previsto y que los motores de búsqueda puedan interpretar las páginas de manera correcta.
El W3C inició la iniciativa Web Móvil en el año 2005. La iniciativa pretende, entre otras cosas, proporcionar un conjunto de buenas prácticas para asegurarse de que los desarrolladores web puedan crear sitios amigables para el entorno móvil.
Podéis leer las recomendaciones de la W3C y la guía “Switch On”, que serán de utilidad en caso de que quieras usar un dominio. mobi. El uso de un dominio. mobi es una manera fácil de asegurarse de que los visitantes sepan que el sitio web está adaptado para dispositivos móviles. Por supuesto, no se necesita un dominio. mobi para desarrollar un sitio web móvil, pero su uso que hace que quede claro para cualquiera que lo visite, que se trata de un sitio móvil amigable.
Primeros pasos con WURFL y PHP
Lo primero que debemos hacer es estar preparado para detectar el navegador y el dispositivo (o computadora) que está de visita en nuestro sitio. Para ello existen dos bases de datos de dispositivos a las que podemos consultar. Estas bases de datos sobre dispositivos, como DeviceAtlas o WURFL, registran información sobre los tipos de dispositivos móviles.
DeviceAtlas posee un API para acceder a la información en numerosos lenguajes de programación y es de pago si necesitamos actualización constante de los dispositivos. No es necesario bajarse ningún archivo a nuestro sitio web, simplemente hacer uso de la API para acceder a los datos de los dispositivos. Para más información podéis visitar el sitio oficial de DeviceAtlas.
WURFL (Wireless Universal Resource File) es un archivo de configuración XML que contiene información sobre las capacidades y características de muchos dispositivos móviles. Gracias a WURFL podremos reconocer los navegadores y los dispositivos cuando accedan a nuestro sitio web y lo más importante: es open source.
En este artículo se cubre el uso de WURFL para realizar las comprobaciones con PHP. Podremos saber la capacidad del dispositivo que visita el sitio, no solo de apoyar ciertas características y estándares tales como formatos de imagen, los márgenes, sino también el tamaño de la pantalla, los colores de la pantalla y así sucesivamente.
Como he comentado antes WURFL es un proyecto de código abierto y que no están obligados a pagar nada. Además, el proyecto proporciona bibliotecas para los lenguajes de programación más comunes, tales como Java, Python, Ruby, Perl. En este artículo vamos a ver cómo funciona con PHP.
Antes de empezar debemos descargarnos los archivos necesarios.
wurfl_config.php es el archivo que debe modificar y estos son los parámetros más importantes:
// Single define to be checked when starting the parser and/or the class
define("WURFL_CONFIG", true);
// Where all data is stored (wurfl.xml, cache file, logs, etc)
define("DATADIR", 'my/path/to/data/');
// Path and filename of wurfl_parser.php
define("WURFL_PARSER_FILE", '/my/path/to/wurfl_parser.php');
// Path and filename of wurfl_class.php
define("WURFL_CLASS_FILE", '/my/path/to/wurfl_class.php');
// Path and name of the wurfl
define ("WURFL_FILE", DATADIR."wurfl.xml");
// Path and name of the log file
define ("WURFL_LOG_FILE", DATADIR."wurfl.log");
define ("LOG_LEVEL", LOG_INFO);
// Set this true if you want to use cache.
define ("WURFL_USE_CACHE", false);
// Autoload set to false, I will load it when needed
define ("WURFL_AUTOLOAD", true);
// Configure a patch file
//define("WURFL_PATCH_FILE", DATADIR.'wurfl_patch.xml');
// Enable patch debug, NOT SUGGESTED for production environments
//define("WURFL_PATCH_DEBUG", false);
Creamos una página de inicio en el directorio principal del servidor. Podemos llamarla index.php
Nota: Vamos a usar el servidor Apache para este ejemplo. El directorio raíz de apache normalmente se llama httdocs y se encuentra en el directorio de instalación de apache. Nbo obstante puedes revisar el manual del servidor.
Pon las siguientes líneas en el archivo index.php:
<?php
require_once('/my/path/to/wurfl_config.php');
require_once(WURFL_CLASS_FILE);
$wurflObj = new wurfl_class();
$wurflObj->GetDeviceCapabilitiesFromAgent("MOT-c350");
echo "<pre>";
var_export($wurflObj->capabilities);
echo "</pre>";
?>
Esto imprimirá toda la información acerca del dispositivo Motorola C350. No es necesario conocer todas las capacidades de WURFL, nos limitaremos a utilizar un número limitado de ellas en este artículo y voy a tratar de explicarlas cuando sea necesario. En caso de que necesites saber más, puedes visitar el sitio de WURFL, donde hay una sección acerca de todas las capacidades que se exponen en la base de datos.
Este ejemplo es útil para comprobar que todo está bien y que hemos configurado de manera correcta WURFL.
La base de dato WURFL normalmente todo tipo de dispositivos y terminales móviles. En nuestro caso, queremos ser capaces de distinguir un dispositivo móvil de un navegador de escritorio. Por esta razón también es conveniente descargar el "parche web", disponible en el sitio WURFL. El "parche web" es una extensión de WURFL que enumera todos móviles más comunes así como los navegadores web para estos dispositivos, y especifica las características que nos permitirá saber que no es un teléfono móvil.
Guardaremos el archivo descargado, en el mismo directorio donde tenemos el wurfl.xml inicial y cambiaremos la configuración de la siguiente manera:
define ("WURFL_PATCH_FILE", DATADIR 'web_browsers_patch.xml.);
La próxima vez que se cargue el index.php , se cargará y la información que contiene 'web_browsers_patch.xml ‘.
Eso es suficiente para descargar y configurar WURFL.
Detectando el navegador
Cada navegador, cuando se solicita una página Web, envía su "user-agent" como una variable. En PHP podemos obtener el valor de esta variable, como una variable global, $ _SERVER ['HTTP_USER_AGENT'].
WURFL nos proporciona una característica que nos dirá si el navegador es de un equipo de escritorio o un dispositivo inalámbrico. Toda la gama de ordenadores de sobremesa y portátiles son considerados como equipos de escritorio, dado que ejecutan sistemas operativos de escritorio Windows ó OS X. Los dispositivos PDA son considerados como dispositivos inalámbricos, porque podemos llevarlos en el bolsillo y salir con ellos a la calle.
Ahora vamos a modificar el ejemplo anterior.
Vamos a necesitar un nuevo método de la wurflObj que devuelve el valor de la característica solicitada: getDeviceCapability. El método espera un nombre de la característica como parámetro y devuelve el valor de la característica. Fácil, ¿no?
<? php
require_once ('/ mi / ruta / a / wurfl_config.php');
require_once (WURFL_CLASS_FILE);
$ WurflObj = wurfl_class nuevo ();
$ WurflObj-> GetDeviceCapabilitiesFromAgent ($ _SERVER ["HTTP_USER_AGENT"]);
if ($ wurflObj-> getDeviceCapability ('is_wireless_device')) {
header ("Location: http://desktop.example.mobi/");
Else {}
header ("Location: http://mobile.example.mobi/");
}
?>
Como podéis ver hemos usado la variable global de PHP “HTTP_USER_AGENT” para obtener el agente de usuario.
Para probar el ejemplo desde un equipo de sobremesa podemos usar un addon en Firefox llamado “User Agent Switcher” que nos permitirá emular una petición desde distintos dispositivos, como por ejemplo un móvi.
Si cargas la página con tu navegador favorito te redirigirá a www.example.com. Utilice el agente de usuario que usamos en el ejemplo anterior para simular un dispositivo móvil. Echa un vistazo a la extensión de Firefox llamada "User Agent Switcher" que le permitirá editar manualmente el agente de usuario.
Esto le permitirá desarrollar un sitio dedicado, para equipos de con recursos multimedia, animaciones, soporte de banda ancha, y además proporcionar acceso a otra parte del sitio web, adaptado para dispositivos móviles.
En menos de 10 líneas de código, pero salvará tu vida en el próximo año!
Cumplir con las normas no siempre es fácil, pero es muy importante que los navegadores muestren el contenido como su creador ha previsto y que los motores de búsqueda puedan interpretar las páginas de manera correcta.
El W3C inició la iniciativa Web Móvil en el año 2005. La iniciativa pretende, entre otras cosas, proporcionar un conjunto de buenas prácticas para asegurarse de que los desarrolladores web puedan crear sitios amigables para el entorno móvil.
Podéis leer las recomendaciones de la W3C y la guía “Switch On”, que serán de utilidad en caso de que quieras usar un dominio. mobi. El uso de un dominio. mobi es una manera fácil de asegurarse de que los visitantes sepan que el sitio web está adaptado para dispositivos móviles. Por supuesto, no se necesita un dominio. mobi para desarrollar un sitio web móvil, pero su uso que hace que quede claro para cualquiera que lo visite, que se trata de un sitio móvil amigable.
Primeros pasos con WURFL y PHP
Lo primero que debemos hacer es estar preparado para detectar el navegador y el dispositivo (o computadora) que está de visita en nuestro sitio. Para ello existen dos bases de datos de dispositivos a las que podemos consultar. Estas bases de datos sobre dispositivos, como DeviceAtlas o WURFL, registran información sobre los tipos de dispositivos móviles.
DeviceAtlas posee un API para acceder a la información en numerosos lenguajes de programación y es de pago si necesitamos actualización constante de los dispositivos. No es necesario bajarse ningún archivo a nuestro sitio web, simplemente hacer uso de la API para acceder a los datos de los dispositivos. Para más información podéis visitar el sitio oficial de DeviceAtlas.
WURFL (Wireless Universal Resource File) es un archivo de configuración XML que contiene información sobre las capacidades y características de muchos dispositivos móviles. Gracias a WURFL podremos reconocer los navegadores y los dispositivos cuando accedan a nuestro sitio web y lo más importante: es open source.
En este artículo se cubre el uso de WURFL para realizar las comprobaciones con PHP. Podremos saber la capacidad del dispositivo que visita el sitio, no solo de apoyar ciertas características y estándares tales como formatos de imagen, los márgenes, sino también el tamaño de la pantalla, los colores de la pantalla y así sucesivamente.
Como he comentado antes WURFL es un proyecto de código abierto y que no están obligados a pagar nada. Además, el proyecto proporciona bibliotecas para los lenguajes de programación más comunes, tales como Java, Python, Ruby, Perl. En este artículo vamos a ver cómo funciona con PHP.
Antes de empezar debemos descargarnos los archivos necesarios.
- Primero, obtener la última versión de WURFL en formato zip y descomprimirlo en el directorio que queras.
- Segundo, descargar y configurar la librería PHP que podemos obtener de la propia página de WURFL.
wurfl_config.php es el archivo que debe modificar y estos son los parámetros más importantes:
// Single define to be checked when starting the parser and/or the class
define("WURFL_CONFIG", true);
// Where all data is stored (wurfl.xml, cache file, logs, etc)
define("DATADIR", 'my/path/to/data/');
// Path and filename of wurfl_parser.php
define("WURFL_PARSER_FILE", '/my/path/to/wurfl_parser.php');
// Path and filename of wurfl_class.php
define("WURFL_CLASS_FILE", '/my/path/to/wurfl_class.php');
// Path and name of the wurfl
define ("WURFL_FILE", DATADIR."wurfl.xml");
// Path and name of the log file
define ("WURFL_LOG_FILE", DATADIR."wurfl.log");
define ("LOG_LEVEL", LOG_INFO);
// Set this true if you want to use cache.
define ("WURFL_USE_CACHE", false);
// Autoload set to false, I will load it when needed
define ("WURFL_AUTOLOAD", true);
// Configure a patch file
//define("WURFL_PATCH_FILE", DATADIR.'wurfl_patch.xml');
// Enable patch debug, NOT SUGGESTED for production environments
//define("WURFL_PATCH_DEBUG", false);
Creamos una página de inicio en el directorio principal del servidor. Podemos llamarla index.php
Nota: Vamos a usar el servidor Apache para este ejemplo. El directorio raíz de apache normalmente se llama httdocs y se encuentra en el directorio de instalación de apache. Nbo obstante puedes revisar el manual del servidor.
Pon las siguientes líneas en el archivo index.php:
<?php
require_once('/my/path/to/wurfl_config.php');
require_once(WURFL_CLASS_FILE);
$wurflObj = new wurfl_class();
$wurflObj->GetDeviceCapabilitiesFromAgent("MOT-c350");
echo "<pre>";
var_export($wurflObj->capabilities);
echo "</pre>";
?>
Esto imprimirá toda la información acerca del dispositivo Motorola C350. No es necesario conocer todas las capacidades de WURFL, nos limitaremos a utilizar un número limitado de ellas en este artículo y voy a tratar de explicarlas cuando sea necesario. En caso de que necesites saber más, puedes visitar el sitio de WURFL, donde hay una sección acerca de todas las capacidades que se exponen en la base de datos.
Este ejemplo es útil para comprobar que todo está bien y que hemos configurado de manera correcta WURFL.
La base de dato WURFL normalmente todo tipo de dispositivos y terminales móviles. En nuestro caso, queremos ser capaces de distinguir un dispositivo móvil de un navegador de escritorio. Por esta razón también es conveniente descargar el "parche web", disponible en el sitio WURFL. El "parche web" es una extensión de WURFL que enumera todos móviles más comunes así como los navegadores web para estos dispositivos, y especifica las características que nos permitirá saber que no es un teléfono móvil.
Guardaremos el archivo descargado, en el mismo directorio donde tenemos el wurfl.xml inicial y cambiaremos la configuración de la siguiente manera:
define ("WURFL_PATCH_FILE", DATADIR 'web_browsers_patch.xml.);
La próxima vez que se cargue el index.php , se cargará y la información que contiene 'web_browsers_patch.xml ‘.
Eso es suficiente para descargar y configurar WURFL.
Detectando el navegador
Cada navegador, cuando se solicita una página Web, envía su "user-agent" como una variable. En PHP podemos obtener el valor de esta variable, como una variable global, $ _SERVER ['HTTP_USER_AGENT'].
WURFL nos proporciona una característica que nos dirá si el navegador es de un equipo de escritorio o un dispositivo inalámbrico. Toda la gama de ordenadores de sobremesa y portátiles son considerados como equipos de escritorio, dado que ejecutan sistemas operativos de escritorio Windows ó OS X. Los dispositivos PDA son considerados como dispositivos inalámbricos, porque podemos llevarlos en el bolsillo y salir con ellos a la calle.
Ahora vamos a modificar el ejemplo anterior.
Vamos a necesitar un nuevo método de la wurflObj que devuelve el valor de la característica solicitada: getDeviceCapability. El método espera un nombre de la característica como parámetro y devuelve el valor de la característica. Fácil, ¿no?
<? php
require_once ('/ mi / ruta / a / wurfl_config.php');
require_once (WURFL_CLASS_FILE);
$ WurflObj = wurfl_class nuevo ();
$ WurflObj-> GetDeviceCapabilitiesFromAgent ($ _SERVER ["HTTP_USER_AGENT"]);
if ($ wurflObj-> getDeviceCapability ('is_wireless_device')) {
header ("Location: http://desktop.example.mobi/");
Else {}
header ("Location: http://mobile.example.mobi/");
}
?>
Como podéis ver hemos usado la variable global de PHP “HTTP_USER_AGENT” para obtener el agente de usuario.
Para probar el ejemplo desde un equipo de sobremesa podemos usar un addon en Firefox llamado “User Agent Switcher” que nos permitirá emular una petición desde distintos dispositivos, como por ejemplo un móvi.
Si cargas la página con tu navegador favorito te redirigirá a www.example.com. Utilice el agente de usuario que usamos en el ejemplo anterior para simular un dispositivo móvil. Echa un vistazo a la extensión de Firefox llamada "User Agent Switcher" que le permitirá editar manualmente el agente de usuario.
Esto le permitirá desarrollar un sitio dedicado, para equipos de con recursos multimedia, animaciones, soporte de banda ancha, y además proporcionar acceso a otra parte del sitio web, adaptado para dispositivos móviles.
En menos de 10 líneas de código, pero salvará tu vida en el próximo año!
Suscribirse a:
Entradas (Atom)