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!
lunes, 13 de diciembre de 2010
Usando Bing Maps en SharePoint
Al igual que Google tiene su propio framework para mostrar información geográfica a través de mapas (Google Maps), Microsoft también tiene el suyo propio. Primero Microsoft lanzó Bing, buscador diseñado para competir con Google.
Y como no también se lanzo una plataforma para competir con Google Maps, llamada Virtual Earth que ahora se llama Bing Maps. Practicamente con las mismas caracterisitcas al de Googole, nos ofrece también vista 3D, vista de carreteras, posibilidad de hacer rutas, vistas aereas y mucho más. Con una ventaja importante: el rendimiento de la plataforma de microsoft es mucho mejor que la de google.
Una vez introducido, vamos a integrar in visor para Bing Maps en la plataforma Sharepoint 2007. Para ello vamos a hacer uso del webpart editor de contenido que nos permite insertar contenido web en cualquier parte de nuestro sitio SharePoint.
Esto lo que hará es mostrarnos un mapa, centrado en Valladolid y con un apuntador rojo, también centrado en la ciudad. Si queremos cambiar la ubicación lo único que tendremos que hacer en este script es lo siguiente:
Y como no también se lanzo una plataforma para competir con Google Maps, llamada Virtual Earth que ahora se llama Bing Maps. Practicamente con las mismas caracterisitcas al de Googole, nos ofrece también vista 3D, vista de carreteras, posibilidad de hacer rutas, vistas aereas y mucho más. Con una ventaja importante: el rendimiento de la plataforma de microsoft es mucho mejor que la de google.
Una vez introducido, vamos a integrar in visor para Bing Maps en la plataforma Sharepoint 2007. Para ello vamos a hacer uso del webpart editor de contenido que nos permite insertar contenido web en cualquier parte de nuestro sitio SharePoint.
Una vez añadido el elemento web editor de contenido lo editamos en el panel de control ( mediante editar -> modificar elemento web compartido) y abrimos el editor del codigo fuente. Una vez abierto introducimos el siguiente código:<script src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=5"></script> <script type="text/javascript">
var map = null; function GetMap()
{
map = new VEMap('myMap');
map.LoadMap(new VELatLong(41.633333, -4.716667), 10,'r' ,false);
AddPin(41.633333, -4.716667, 'ValladolidMap', '<strong>Nombre:</strong> Valladolid (España).');
} function AddPin(lat, lon, iconurl, title, desc)
{
var shape = new VEShape(VEShapeType.Pushpin,new VELatLong(lat,lon));
shape.SetTitle(title);
shape.SetDescription(desc);
map.AddShape(shape);
} function addLoadEvent(func)
{
if(typeof window.onload != 'function')
{
window.onload = func;
}
else
{
window.onload = function()
{
func();
}
}
} addLoadEvent(GetMap);
</script><div id='myMap' style="position:relative; width:640px; height:480px;"></div> Esto lo que hará es mostrarnos un mapa, centrado en Valladolid y con un apuntador rojo, también centrado en la ciudad. Si queremos cambiar la ubicación lo único que tendremos que hacer en este script es lo siguiente:
- Función VElatLong(latitud,longitud): cordenadas del sitio en donde queramos apuntar el mapa inicialmente. Deben estar en decimal. por ejemplo, para sacar la de valladodolid yo he usado la siguiente página, donde se puede consultar la geolocalización de muchos puntos del mundo.
- Función AddPin(latitud,longitud,nombre,descripcion): Permite añadir el pin rojo apuntador en el punto del mapa donde queramos.
domingo, 12 de diciembre de 2010
Proteger directorios con contraseña en servidor Apache
Es muy útil a veces, proteger ciertos directorios de nuestro servidor web mediante una contraseña, para evitar accesos indeseados. Sobre todo es muy recomendable hacerlo en los directorios de administración de las aplicaciones.
Una de las maneras más fáciles es quitar el acceso de lectura sobre el directorio, al publico y listo. Pero vamos a ir más allá. ¿Que pasa si solo yo quiero acceder al directorio, mediante un navegador web?. La forma más fácil es usar el archivo .htaccess de Apache.
Para limitar el acceso a un directorio, debemos crear un archivo .htaccess en el directorio a proteger y seguidamente introducir lo siguiente:
AuthName "Texto al gusto"
AuthUserFile /ruta/al/fichero/.htpasswd
AuthType basic
Require valid-userAhora hay que generar el fichero .htpasswd que es el fichero que contendrá la contraseña. Este fichero se puede generar mediante el comando htpasswd o mediante un generador online como éste. Seguro que hay muchos más.
Una vez generado, lo subimos al servidor en la ruta que hemos especificado en la directiva
AuthUserFile del archivo htaccess.viernes, 10 de diciembre de 2010
Mantener las sesiones al crear enlaces en Oscommerce
Como programador novel con OSCommerce, todos hemos sido noveles alguna vez en cualquier tema, creo que me está ocurriendo lo que comenta José Criado en su blog.
El problema es que cuando un usuario se loguea en el sistema, oscommerce no mantiene su sesión, y por tanto tampoco el carrito de compra. Llevo una semana ya con el tema y no consigo dar con lo que ocurre, pero creo que los tiros van, por lo que comenta el autor de este blog:
El problema es que cuando un usuario se loguea en el sistema, oscommerce no mantiene su sesión, y por tanto tampoco el carrito de compra. Llevo una semana ya con el tema y no consigo dar con lo que ocurre, pero creo que los tiros van, por lo que comenta el autor de este blog:
martes, 30 de noviembre de 2010
Bug "Project Creation Failed" en Visual Studio 2008
Hace un tiempo que me tocó trastear con la nueva versión de Visual Studio 2008, el popular entorno de desarrollo de Microsoft y lo dejé instalado en mi equipo, un poco olvidado.
Ahora he vuelto a retomarlo y me encuentro con que cuando creo un nuevo proyecto en el entorno, en la barra de estado aparece el mensaje "Project Creation Failed", y Visual Studio no me deja crear el proyecto. En concreto me ocurria con con proyectos de tipo Sitio web, lo que no se es si ocurrirá con otros tipos.La solución es sencilla y os la comento a continuación.
Ahora he vuelto a retomarlo y me encuentro con que cuando creo un nuevo proyecto en el entorno, en la barra de estado aparece el mensaje "Project Creation Failed", y Visual Studio no me deja crear el proyecto. En concreto me ocurria con con proyectos de tipo Sitio web, lo que no se es si ocurrirá con otros tipos.La solución es sencilla y os la comento a continuación.
Suscribirse a:
Entradas (Atom)