Instalar Handset Detection en local con WAMP y Windows

30 09 2008

Pues a raíz de un proyecto que hemos desarrollado en el estudio , hemos empleado el servicio para detección de dispositivos del que ya os hemos hablado en ocasiones, me refiero a Handset Detection.

Pongo aquí unos breves pasos de cómo poder ponerlo a andar en local, bajo una instalación WampServer y en Windows.

Con la mayoría de las instalaciones de WampServer, viene ya preparado todo para la instalación del framework PEAR, que es el que se requiere por defecto para hacer andar el ejemplo de Handset Detection, y que evidentemente facilita las cosas para ponerlo a funcionar.

El ejemplo con PHP del sistema es éste, y en el podéis observar que se usa un require, que busca el paquete HTTP_Request. Este paquete forma parte de un framework de clases denominado PEAR.

1) Instalando el paquete

Lo primero por tanto es lograr instalar dicho paquete PEAR en nuestro servidor local bajo Windows y WampServer. Si vamos a la carpeta donde hemos instalado el WampServer y miramos en la carpeta php, veremos que existe un fichero llamado go-pear.bat y otra carpeta llamada PEAR. Para una instalación local go-pear.bat es nuestro objetivo.

Al hacer doble clic sobre él se nos pregunta si la instalación es en un servidor o en local, escribirmos "local", y confirmamos escribiendo la palabra "yes".

Una vez que hemos hecho esto nos muestra una serie de rutas a configurar, que si tu instalación de WampServer ha sido típica (c:\wamp) no debes tocar nada.

Básicamente, pongo aquí lo que representa las 3 rutas más importantes de la instalación:

  • base $prefix (esta ruta es la instalación base de php en wamp, por lo que en una instalación típica como la que he comentado sería c:\wamp\php)
  • PHP Code $php_dir (esta ruta es el directorio donde se instalaran los paquetes PEAR, y que aconsejamos colocar en al carpeta PEAR de la carpeta php, que es donde viene preparado por defecto con la instalación de wampserver, por tanto sería: c:\wamp\php\pear)
  • Path to CLI php.exe (esta es la ruta donde se encuentra el ejecutable de php, en nuestro caso: c:\wamp\php)

Una vez que hemos continuado, procede a la instalación, es posible que nos arroje algunos WARNINGS relacionados con las últimas versiones de algunos paquetes de PEAR (pero que puede deberse a que nuestra instalación de wampserver no es la última o no está actualizada),

y finalmente nos consulta si queremos modificar el php.ini durante la instalación para proceder a incluir el path de los nuevos paquetes de clases.

Yo aquí he contestado que no, porque siempre prefiero modificar el php.ini a mano. Lo que hay que hacer es abrir el php.ini ( c:\wamp\Apache 2\bin\ ), localizar las lineas de Windows donde se trabaja el include_path, y añadir la siguiente línea (siguiendo con las rutas de nuestra instalación) a las que están comentadas con el ";"

include_path = ".;c:\wamp\php\pear"

Una vez hecho esto, guardamos php.ini, reiniciamos todos los servicios de Wamp y ya estamos listos para pasar a configurar el PEAR para poder usar Handset Detection.

2) Configuración y paquetes necesarios para usar Handset Detection.

Si la instalación ha ido bien, deberíamos poder acceder mediante la ventana de comandos MSDOS a la carpeta c:\wamp\php y alli ejecutar el comando "pear". Este comando nos mostrará una lista de las opciones que tiene. Eso quiere decir que la instalación ha sido correcta.

Para usar Handset Detection, se necesita usar la clase HTTP_Request, que a su vez emplea Net_Socket y Net_URL, con lo que primero pasamos a actualizar estas dos clases, y luego a descargar la clase HTTP_Request.

Para actualizar un paquete sería en la misma línea de comandos:

> pear upgrade Net_Socket

y posteriormente

> pear upgrade Net_URL

Finalmente una vez que tenemos esos paquetes actualizados pasamos a descargar el paquete HTTP_Request de la siguiente manera (también desde la línea de comandos)

> pear install HTTP_Request

Con eso todo debería estar listo. Solo nos queda poder hacer una prueba para ver si nos funciona correctamente. En general para conocer el nombre de cualquier paquete que necesitemos, ya sea para este caso o para cualquier otro, podéis encontrar la lista aquí.

3) Probando la instalación y configuración

Para probarlo lo mejor es crear en la carpeta www de la instalación wamp una página PHP que contenga el ejemplo de Handset Detection, o si queréis este otro (siemrpe que hayáis obtenido de la web de Handset Detection vuestra API KEY una vez registrados de forma gratuita):

PHP:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>[Q] :: Test Detección de Móvil</title>
  6.  
  7. </head>
  8.  
  9. <?php
  10. include "HTTP/Request.php";
  11. define('APIKEY','XXXXXXXXXX');
  12. define('HD_SERVER','http://c1.handsetdetection.com');
  13.  
  14. function sendxml($data, $url) {
  15.    
  16.     $str = "<?xml version=\"1.0\"?><request>";
  17.     foreach($data as $key => $value) {
  18.             $str .= "<$key>$value</$key>";
  19.     }
  20.     $str .= "</request>";
  21.    
  22.     // echo("Peticion: ".$str."<br />");
  23.    
  24.     $req =& new HTTP_Request($url);+
  25.     $req->addHeader("Content-Type", "text/xml");
  26.     $req->setMethod(HTTP_REQUEST_METHOD_POST);
  27.     $req->addRawPostData($str);
  28.     $req->sendRequest();
  29.     $reply = $req->getResponseBody();
  30.    
  31.     // echo("RESPUESTA: ".$reply." <br />");
  32.     return simplexml_load_string($reply);
  33. }
  34.  
  35.  
  36. function doDetect() {
  37.     $options = array('display','flash_lite');
  38.    
  39.     $data = array();
  40.     $data['apikey'] = APIKEY;
  41.  
  42.     // Pick up user agent from headers passed to the server 
  43.     $data['User-Agent'] = $_SERVER['HTTP_USER_AGENT'];
  44.    
  45.     // Random ip address. (Yes - its designed to get it totally wrong sometimes)
  46.     $data['ipaddress'] = $_SERVER['REMOTE_ADDR'];
  47.  
  48.     $str = ""
  49.     // Load up the options array with some random data;
  50.     for($i=0; $i <count($options); $i++)
  51.     {   
  52.           $str .= $options[$i].",";
  53.     }
  54.     $data['options'] = substr($str, 0, sizeof($str)-2);;
  55.  
  56.     // Passing $_SERVER options in is optional.
  57.     $data = array_merge ($data, $_SERVER);
  58.    
  59.     // $result = sendjson($data, HD_SERVER."/devices/detect.json");
  60.     $result = sendxml($data, HD_SERVER."/devices/detect.xml");
  61.  
  62.     return $result;
  63. }
  64.  
  65.  
  66. ?>
  67.  
  68. <body>
  69.     <h1>Test detección de Móvil</h1>
  70.     <h2>Handset Detection System</h2>
  71.     <h3>Resultado del test:</h3>
  72.    
  73.     <?php
  74.         $resultado = doDetect();
  75.     ?>
  76.    
  77.     <dl>
  78.         <dt>MENSAJE:</dt>
  79.         <dd><?php echo($resultado->message); ?></dd>
  80.         <dt>DISPLAY WIDTH:</dt>
  81.         <dd><?php echo($resultado->display->resolution_width); ?></dd>
  82.         <dt>DISPLAY HEIGHT:</dt>
  83.         <dd><?php echo($resultado->display->resolution_height); ?></dd>
  84.         <dt>FLASH LITE SCREENSAVER:</dt>
  85.         <dd><?php echo($resultado->flash_lite->fl_screensaver); ?></dd>
  86.         <dt>FLASH LITE STANDALONE:</dt>
  87.         <dd><?php echo($resultado->flash_lite->fl_standalone); ?></dd>
  88.     </dl>
  89. </body>
  90. </html>

Donde XXX...XXX es la APIKEY que hemos logrado al registrarnos en el sistema.

Si entramos con el navegador, y nos arroja resultados, ya sea un mensaje de Not Found o un mensaje con unos valores, quiere decir que la instalación de pear y la comunicación con Handset Detection está realizada de forma correcta!

Si accedemos a esta página desde un terminal móvil (se puede acceder a un servidor local desde un móvil habilitando una serie de parámetros en la instalación del equipo local, y accediendo con la IP local, por ejemplo: http://192.168.1.34/testmovil/index.php), debería detectarnos nuestro terminal y sacar el ancho de pantalla, el alto y las capacidades flash lite que se indican.

Finalmente esperamos poder poneros la segunda parte de este tutorial que será la que explique como instalarlo en un hosting compartido, sin acceso como administrador del mismo (que según PEAR, es posible mediante un go-pear.php).



Kuneri: aplicación chat mediante bluetooth

26 08 2008

Desde Kuneri tenemos nuevas noticias, por un lado como ya os comentamos, el 5 de Agosto sacaron la versión 0.9.7 de KuneriLite con interesantes mejoras y características.

Entre ellas destacamos la inclusión del Ring Tone plugin, que permite lanzar una animación cuando se recibe una llamada en el terminal, algo similar a los ChakuFlash que están soportados en Japón. Os habíamos contado algo sobre ésto con anterioridad, pero no a través de Kuneri, sino directamente soportado por los dispositivos nokia.

Por otro lado se están empezando a ver bastante aplicaciones que demuestran lo interesante que es flash lite cuando se le añaden funcionalidades, pudiendo ser perfectamente la cara de aplicaciones muy potentes y divertidas.

En esta ocasión tenemos un tutorial de cómo realizar un chat bluetooth con flash lite y kunerilite. El autor ha sido Felipe Sampaio y lo ha sacado a la luz en Forum Nokia, que se está convirtiendo en un lugar indispensable para cualquier interesado en el mundo de Flash Lite.

El tutorial es un paso a paso y es bastante sencillo de seguir, lo dicho Flash Lite + capacidades extendidas, es una gozada... A ver si ponemos a funcionar definitivamente twitty con el plugin GPS, y forma parte de las aplicaciones con kunerilite que dan vida más allá de lo básico a flash lite.



Sony Ericsson Developer Site actualizado

10 08 2008

Via Biskero nos enteramos de que el Sony Ericsson Developer Site se ha actualizado recientemente con bastante movimiento en el área de Flash Lite, añadiendo documentación técnica para Flash Lite 2.0 y un tutorial sobre cómo hacer un salvapantallas bastante atractivo.

API High Street

Bien por Sony Ericsson, que se preocupa por la comunidad de desarrolladores Flash.

Un saludo!



Flash Lite 3 y Flash Media Server Video

7 05 2008

Vía Nick Hippe, encontramos este buen tutorial sobre el uso de Flash Lite 3 para trabajar con video generado desde Flash Media Server.

El tutorial abarca el caso más simple que es tomar el video desde Flash Media Server, y otro caso más complejo en el que se detecta la velocidad de la conexión para servir el video optimizado para dicha petición mediante la llamda a un script intermedio.

El tutorial está en inglés pero es bastante sencillo de seguir, ya que está explicado muy al detalle, desde la instalación de las aplicaciones necesarias para probarlo, como el código a emplear.



Sonido bajo Flash Lite en Nokia Series 60 y 40

12 04 2008

Vía Biskero,

Nos enteramos que desde Forum Nokia han sacado un nuevo recurso en forma de documento PDF, con una información que yo calificaría de súper útil. El sonido en flash lite es uno de los temas más delicados, y el documento entra en detalle en un montón de aspectos que son clave para poder llevar el sonido a nuestras aplicaciones flash lite para Nokia.

En la página 7 se hace alusión a las capacidades de las dos plataformas y sus diferencias, quedando claro que las series 40 solamente soportan MIDI localmente o a través de la red (o también 3GP mediante la técnica "bundled"), no como las series 60 que soportan MIDI, AAC, MP3, and 3GP.

Además de explicar detalles de los diferentes tipos de formatos, y de las características, es una magnífica referencia para el uso de la API de sonido de la que dispone Flash aplicada a los dispositivos móviles.

Tutorial Sonido en Flash Lite Nokia Series 60 y 40 [en]



Instalación de WURFL y WALL

8 03 2008

Introducción

Vamos a ver cómo podemos instalar en nuestro ordenador WURFL y WALL. WURFL es un sistema de detección de terminales para discriminar contenido según las capacidades del dispositivo. Básicamente WURFL consta de un XML con la información de prácticamente todos los terminales que hay en el mercado y una serie de APIs para diversos lenguajes de programación.

En este tutorial utilizaremos WURFL para Java aunque puedes encontrar APIs para PHP, Perl, Ruby, Python, dotNet, XSLT Tools y C++ Tools, así que como puedes ver la comunidad es bastante activa. Como mucha gente sabe, la comunidad Java es una de las más activas en el mercado de los móviles y por eso han creado WALL, que es una definición de XML especial que nos permite crear un documento y que este sea formateado a WAP, CHTML o XHTML-MP automáticamente al detectar el terminal, algo realmente útil cuando estamos creando contenido.

Para llevar a cabo este tutorial vamos a necesitar una serie de aplicaciones, así que recomendaría descargar todo e instalar en el siguiente orden. Todas las pruebas que he realizado han sido llevadas a cabo en Windows XP SP2 y Firefox 2.0, recuerda que si necesitas soporte puedes encontrarlo en nuestro Google Group.

Configurar Firefox

Primero instalamos la extensión para Firefox Modify Headers. Con esta extensión podemos cambiar la cabecera de nuestro navegador y cambiar de un móvil a otro con un simple click. Una vez instalado, ves a Herramientas -> Modify Headers y se te abrirá en una nueva ventana.

Añade tantos móviles como quieras, para ello simplemente selecciona arriba en el desplegable Modify y en las cajas escribe "user-agent" y el modelo de móvil.

En las siguientes imágenes puedes ver como yo he añadido el Nokia N95 y el Ericsson R320 que soportan XHTML-MP y WAP respectivamente, lo que va bastante bien para hacer pruebas.

Modify Headers
Modify Headers

Para comprobar que está funcionando correctamente Modify Headers, activa por ejemplo el Nokia N95 y sin cerrar Modify Headers ves a Google, debería redireccionarte a la web móvil de Google. Recuerda tener solo un móvil activado al mismo tiempo.

Sin embargo en Firefox no podemos ver WML, con lo que debemos instalar la extensión WMLBrowser para poder visualizar correctamente nuestras aplicaciones web. Una vez instalado WMLBrowser, selecciona en Modify Headers el Ericsson R320 y verás las notables diferencias entre XHTML-MP y WML cuando entres de nuevo en Google.

WMLBrowser

Instalar Java JDK

El siguiente paso es instalar el Java JDK para que funcione correctamente Tomcat. Actualmente encontrarás el JDK 6 Update 5 que para Windows pesa unas 71MBs. Asumo que estais acostumbrados al "Next-Next-Next", así que no debería presentar mucha batalla el instalador.

Instalar XAMPP y Tomcat

Para utilizar WURFL con WALL necesitamos Java y para ello lo más rápido es XAMPP. Descarga e instala primero el servidor y luego el AddOn para Tomcat. La instalación es muy sencilla deja los parámetros estándar que vienen y funcionará todo perfectamente.

Ahora probemos que funciona todo. Ejecuta los programas desde el menu Inicio de Windows.

Inicio - Programas - Apache Friends - XAMPP - Tomcat start
Inicio - Programas - Apache Friends - XAMPP - XAMPP Control Panel

En el panel de control de XAMPP inicia el servidor HTTP Apache. Debería quedar como sigue:

XAMPP

Si todo ha ido como tiene que ir al entrar en LocalHost verías una pantalla de selección de idioma de XAMPP, clica en Español para entrar al panel de control. En panel de control clica en ESTADO en el menu de la izquierda, debería estar todo como sigue:

Estado de XAMPP

En la sección Demos clica en Java, y luego en http://localhost:8080/. Eso debería abrir Tomcat. Una vez estemos en el panel de control del servidor web Tomcat, clicamos en Tomcat Manager y ponemos de usuario y contraseña "xampp".

Ahí podremos ver una serie de aplicaciones Java, pero falta la nuestra: WURFL. Vamos a instalar WURFL y a hacer la primera prueba.

Descargamos WURFL para Tomcat 5 y descomprimimos el archivo. El contenido es una carpeta llamada "wurfl", que pegaremos en "C:\xampp\tomcat\webapps". Debería quedar algo similar a esto:

WURFL en Tomcat

Una vez hecho esto podemos acceder a WURFL y empezar a hacer pruebas.

Actualizando WURFL

Con Modify Headers abierto y un dispositivo cualquiera activado accedemos a las demos de WURFL. En estas demos podemos ver como se formatean automáticamente las páginas según las necesidades del terminal, aunque no todos los terminales estan soportados en las demos, con lo que debemos actualizar el archivo XML de WURFL, para ello colocaremos en "C:\xampp\tomcat\webapps\wurfl\WEB-INF" el último archivo XML disponible en la web de Sourceforge.

Cuando hayáis hecho esto cerrar Tomcat y XAMPP y volver a abrirlo para refrescar el archivo XML.

Discriminando contenido Flash Lite

La última versión de WURFL permite hacer discriminación de contenido Flash Lite, algo que nos puede ir muy bien para mostrar contenido Flash o HTML según el terminal. Descarga este ejemplo para ver como discriminar contenido con WALL.

Descomprime los archivos con WinRar, los guardaremos en una carpeta llamada "blocketpc" (por ejemplo) que crearemos dentro de la carpeta WURFL en "C:\xampp\tomcat\webapps\wurfl\". Con Dreamweaver o cualquier otro editor de texto abre "index.jsp" y verás el siguiente código:

Actionscript:
  1. <%@ taglib uri="/WEB-INF/tld/wall.tld" prefix="wall" %><wall:document><wall:xmlpidtd />
  2. <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %><wall:load_capabilities />
  3.  
  4. <wall:head>
  5.     <wall:title>Discriminacion Flash Lite con WURFL y WALL</wall:title>
  6. </wall:head>
  7.  
  8. <wall:body>
  9.     <wall:b>Markup:</wall:b> ${capabilities.wall_markup}<wall:br/>
  10.     <wall:b>Flash Lite:</wall:b> ${capabilities.flash_lite_version}<wall:br/>
  11.    
  12.     <c:choose>
  13.         <c:when test="${capabilities.flash_lite_version==''}">
  14.             <wall:img src="imgs/logo.jpg" alt="Maresme Digital TV"></wall:img>
  15.         </c:when>
  16.    
  17.         <c:when test="${capabilities.flash_lite_version=='1_1'}">
  18.             <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="230" height="55">
  19.                 <param name="movie" value="swfs/flash11.swf" />
  20.                 <param name="quality" value="high" />
  21.                 <embed src="swfs/flash11.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="230" height="55">
  22.                 </embed>
  23.             </object>
  24.         </c:when>
  25.        
  26.         <c:when test="${capabilities.flash_lite_version=='2_0'}">
  27.             <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="230" height="55">
  28.                 <param name="movie" value="swfs/flash20.swf" />
  29.                 <param name="quality" value="high" />
  30.                 <embed src="swfs/flash20.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="230" height="55">
  31.                 </embed>
  32.             </object>
  33.         </c:when>
  34.     </c:choose>
  35.    
  36. </wall:body>
  37. </wall:document>

Este es un archivo formateado para WALL que lo que hace es comprobar que versión de Flash Lite tiene y mostrar un contenido para Flash Lite 1.1, Flash Lite 2.0 o mostrar una imagen en caso de que no tenga el player. Lo mejor de todo es que si esto lo probáis con Modify Headers veréis como vuestro contenido se formatea automáticamente mostrando la página discriminada de manera automática.

Como podéis ver WALL es un lenguaje de tags tipo XML y podéis encontrar una guía de referencia y un tutorial que son de bastante ayuda. También es recomendable darle un vistazo a las demos que vienen dentro de WURFL.

Un saludo!!