Por Raul Jimenez 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.
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.
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:
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:
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:
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:
-
<%@ taglib uri="/WEB-INF/tld/wall.tld" prefix="wall" %><wall:document><wall:xmlpidtd />
-
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %><wall:load_capabilities />
-
-
<wall:head>
-
<wall:title>Discriminacion Flash Lite con WURFL y WALL</wall:title>
-
</wall:head>
-
-
<wall:body>
-
<wall:b>Markup:</wall:b> ${capabilities.wall_markup}<wall:br/>
-
<wall:b>Flash Lite:</wall:b> ${capabilities.flash_lite_version}<wall:br/>
-
-
<c:choose>
-
<c:when test="${capabilities.flash_lite_version==''}">
-
<wall:img src="imgs/logo.jpg" alt="Maresme Digital TV"></wall:img>
-
</c:when>
-
-
<c:when test="${capabilities.flash_lite_version=='1_1'}">
-
<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">
-
<param name="movie" value="swfs/flash11.swf" />
-
<param name="quality" value="high" />
-
<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">
-
</embed>
-
</object>
-
</c:when>
-
-
<c:when test="${capabilities.flash_lite_version=='2_0'}">
-
<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">
-
<param name="movie" value="swfs/flash20.swf" />
-
<param name="quality" value="high" />
-
<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">
-
</embed>
-
</object>
-
</c:when>
-
</c:choose>
-
-
</wall:body>
-
</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!!
Comentarios recientes