WAP, WML, todo se mueve

Introducción

Antes que nada y a modo de introducción unas breves líneas donde explico la razón de el porqué de la escritura de este artículo. Para mi es un honor el poder participar de este sitio donde tantos “gurus” exponen temas tan interesantes. Mi humilde aporte además de intentar brindar y volcar conocimientos adquiridos en base a la experiencia personal, es poder avanzar en mi carrera del programa de Desarrollador Cinco Estrellas. Dicho esto y sin mas preámbulos he aquí mi aporte.

Lo primero es lo primero

Actualmente vivimos en un mundo en continuo movimiento e interconectado. El no pertenecer o tomar ventajas de la tecnología y lo que hoy Internet ofrece nos colocaría en el lado opuesto y desfavorable de la llamada “Brecha Tecnológica”. Si bien hoy sigue siendo motivo de preocupación los índices de analfabetos en los países, es posible también realizar una medición de los analfabetos del nuevo siglo, es decir, todos aquellos que no saben que uso darle a una computadora.

Los avances del día a día nos sorprenden y todo lo relacionado a la movilidad esta tomando cada vez mas impulso. Ya no es algo limitado a aquellos aventureros que con sus Palm Tops o Pocket PCs o cualquier dispositivo para “colocar sobre la palma de la mano” o PDA, acceden a los diarios y noticias del día o consultan los valores de las acciones mientras van al trabajo, sino que ahora con la invasión de teléfonos móviles y la tecnología GSM a precios “accesibles” y la revolución de la tecnología Wi-Fi esto esta al alcance de todos. Hoy los teléfonos móviles son herramientas muy potentes y ofrecen muchas funcionalidades muy distantes de sus antecesores analógicos. Pues bien, quien tomara el control o la delantera, las PDAs o los teléfonos móviles, ya que es claro que van aproximándose a ser lo mismo, no es un debate de este artículo pero si algo a no perder de foco.

Ya hay una infinidad de aplicaciones que se apoyan en esta tecnología y con un simple teléfono móvil con acceso a Internet se pueden desarrollar actividades como registro de ventas en terreno, inventarios de stock in situ, historias clínicas para médicos que realizan visitas domiciliarias, consulta de resultados deportivos, acciones, cartelera de cines, horóscopos, etc.

No todo es rosas

Si bien parecería que estamos frente a un campo fértil aun no explotado, existen algunas características a contemplar a la hora de comenzar a sembrar:

- Las pantallas de los dispositivos móviles son relativamente chicas y los periféricos de entrada de datos a los mismos son un tanto tediosos al usarlos o lentos.

- El ancho de banda no es constante, debido por ejemplo al trafico existente, cambio de una base a otra en el caso de los celulares.

- Las baterías de estos dispositivos son de poca duración.

- Tienen una relativa baja velocidad de procesamiento.

Ahora pasando al terreno más técnico y práctico de este artículo hay algunas consideraciones y conceptos para comenzar a entender el tema y cual es la plataforma que soporta esta tecnología. Les tiro dos palabras:

- WAP

- WML

¿Qué es WAP? (Wireless Application Protocol)

Pues bien, podemos decir que es un protocolo que se base en los estándares de Internet. Su razón de ser es permitir a los teléfonos celulares o PDAs poder navegar en la Web. El protocolo WAP implica una serie de tecnologías como el WML (lenguaje de etiques), WMLScript (lenguaje script similar a un JavaScript) y el WTAI (Gíreles Telephony Application Interface).

En la práctica y para el desarrollador, una página creada para ser visualizada en un dispositivo WAP (un teléfono celular por ejemplo) tendrá la extensión wml, por ejemplo index.wml. Las mismas deberán estar hospedadas en un servidor como cualquier sitio web tradicional.  De hecho es posible utilizar el Internet Information Server aunque muy posiblemente se deberán realizar ciertos ajustes en relación a los tipos MIME, agregando los tipos que se detallan en la siguiente tabla.

MIME TYPE
Tipo de contenido	Mime Type	Extension
Fichero WML	text/vnd.wap.wml	wml
Bitmap	image/vnd.wap.wbmp	wbmp
WML Compilado	application/vnd.wap.wmlc	wmlc
Fichero WMLScript	text/vnd.wap.wmlscript	wmls
WMLScript compilado	application/vnd.wap.wmlscriptc	wmlsc

A continuación una figura de cómo quedarían establecidos en el Internet Information Server:

¿Qué es el WML?

Para empezar es un leguaje de etiquetas como su sigla lo indica, Wireless Markup Language. Es además un estándar de la industria para desplegar contenido WAP. Para mas información en especial la definición del mismo recomiendo visitar el sitio http://www.wapforum.org

Se asemeja en gran parte con el HTML, definiendo etiquetas, que luego cualquier navegador WAP puede interpretarlas y desplegar el contenido de la página.

Su definición esta basada en el estándar ampliamente difundido del lenguaje XML, utilizando para ella elementos y atributos. Mediante WML podremos:

- Manipular texto e imágenes. El texto puede tener atributos de formato. Las imágenes tienen la extensión .wbmp

- Manipular variables y formularios, permitiendo esto transmitir información entre el dispositivo móvil y el servidor

- Navegación entre “decks”  (las páginas en WML) de la misma forma en que se navega entre páginas Web. (Un documento WML está formado por un elemento “deck” que puede contener múltiples elementos “card”)

Ahora si, manos a la obra

Antes de adentrarnos en la programación utilizando Visual Studio 2003 veremos algunos ejemplos sencillos que perfectamente pueden ser creados utilizando el Notepad como editor de texto. Adicionalmente se toma como un supuesto que se tiene instalado el Internet Information Server. Para poder probar todos estos ejemplos se deberá crear un sitio web local al que llamaremos “Guapeando” (de forma tal que podamos acceder al mismo colocando la direccion URL: http://localhost/Guapeando)

Ejemplo 0 – Un Archivo WML:

Este ejemplo lo único que realizará será mostrar un texto en un emulador WAP. Utilizaremos para crearlo simplemente el Notepad y copiaremos el siguiente codigo:

<?xml version="1.0"?> 
<!DOCTYPE wml PUBLIC "-"//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml"> 
<wml> 
  <card id="mycard" title="My first card"> 
   <p>Hola Hemisferio Sur</p> 
  </card> 
</wml>

El archivo la grabaremos como 1.wml en la carpeta del sitio Guapeando y lo probaremos en un emulador WAP.

NOTA: Podemos utilizar un emulador como el de Openwave el Microsoft Mobile  Explorer 3.0. Ademas para que esto funcione tenemos que haber agregado los tipos MIME que mencioné anteriormente en este articulo en las propiedades del sitio desde el Internet Information Server.

Ejemplo 1 – Un Archivo ASP:

Creamos una pagina ASP con el Notepad donde copiamos el siguiente código. El resultado deberá mostrar la fecha  del día que tenga seteada el PC.

<% Response.ContentType = "text/vnd.wap.wml" %> 
<?xml version="1.0"?> 
<!DOCTYPE wml PUBLIC "-"//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml"> 
<wml> 
   <card id="Principal" title="Principal"> 
      <p>Hoy es: <%= day(Now()) & "/" & month(Now()) & year(Now()) %></p> 
   </card> 
</wml>

El archivo la grabaremos como 1.asp en la carpeta del sitio Guapeando y lo probaremos en un emulador WAP.

Ejemplo 2 – Una galletita?:

Este ejemplo es un poco mas elaborado ya que utiliza información almacenada en un “cookie”, pero de igual manera que el primer ejemplo puede ser realizado en el NotePad y grabado como una pagina ASP.

<% Response.ContentType = "text/vnd.wap.wml" %> 
<% Response.Cookies ("ELUsuario")="Mickey" %> 
<?xml version="1.0"?> 
<!DOCTYPE wml PUBLIC "-"//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml"> 
<wml> 
   <card id="Principal" title="Principal"> 
    <% DIM Name 
      Name=Request.Cookies ("ELUsuario") %> 
   <p> El usuario es: <%= Name %> </p> 
   </card> 
</wml>

El archivo la grabaremos como 2.asp en la carpeta del sitio Guapeando y lo probaremos en un emulador WAP.

Pues bien, hasta aquí los ejemplos han sido trabajando con WML y ASP pero pasaremos a utilizar ASP.NET pero aun no abandonando el NotePad como editor de texto.

Ahora si un ejemplo práctico en .NET

A partir de ahora describiré en unos pocos pasos un ejemplo práctico y sencillo de creación de una pagina WAP que provea información de la cartelera de cines de una localidad. Nos conectaremos a una base Access y tomaremos de la misma los datos con la información de las películas a emitirse.

Paso 1: Lo primero será crear un proyecto Visual Basic del tipo “ASP.NET Mobile Web Application” al que llamaremos “Guapeando”.

Paso 2 : Al archivo MobileWebForm1.aspx que se crea una vez generado el proyecto lo renombramos a Bienvenida.aspx. Este archivo contiene lo que se denomina una pagina móvil y básicamente consiste en un Form. En el agregaremos un texto “Películas WAP” y un enlace “Enviar” a otro Form al que llamaremos Resultado.aspx

La sección HTML de la pagina Bienvenida.aspx debe quedar como se ve a contiuación:

<%@ Register TagPrefix="mobile" Namespace="System.Web.UI.MobileControls" Assembly="System.Web.Mobile" %> 
<%@ Page Language="vb" AutoEventWireup="false" Codebehind="Bienvenida.aspx.vb" Inherits="Guapeando.MobileWebForm1" %> 
<HEAD> 
    <meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1"> 
    <meta name="CODE_LANGUAGE" content="Visual Basic .NET 7.1"> 
    <meta name="vs_targetSchema" content="http:"//schemas.microsoft.com/Mobile/Page"> 
</HEAD> 
<body Xmlns:mobile="http:"//schemas.microsoft.com/Mobile/WebForm"> 
<mobile:Form id="Form1" runat="server" Font-Name="Arial Black" Font-Size=" Normal " Alignment="Center"><BR><BR>Peliculas WAP <BR><BR> 
<mobile:Link id="Ingresar" Font-Size="Small" runat="server" NavigateUrl="Resultado.aspx">Entrar</mobile:Link><BR> 
</mobile:Form> 
</body>

La sección de código Visual Basic de dicha página debe quedar como se muestra a continuación:

Imports System.Data 
Imports System.Data.OleDb 
Imports System.Data.SqlClient 
  
Public Class MobileWebForm1 
  
   Inherits System.Web.UI.MobileControls.MobilePage 
  
#Region " Web Form Designer Generated Code " 
  
   'This call is required by the Web Form Designer. 
   <System.Diagnostics.DebuggerStepThrough()> Private Sub InitializeComponent() 
  
   End Sub 
   Protected WithEvents Ingresar As System.Web.UI.MobileControls.Link 
   Protected WithEvents List1 As System.Web.UI.MobileControls.List 
   Protected WithEvents Form1 As System.Web.UI.MobileControls.Form 
  
   Private Sub Page_Init(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase .Init 
      'CODEGEN: This method call is required by the Web Form Designer 
      'Do not modify it using the code editor. 
      InitializeComponent() 
   End Sub 
  
#End Region 
  
   Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase .Load 
      'Put user code to initialize the page here 
   End Sub 
End Class

Paso 3 :Agregamos un nuevo objeto al proyecto del tipo Mobile Web Form. A esta pagina la llamaremos Resultado.aspx. La pagina anterior del Paso 2, apuntará a esta como ya se dijo.

Paso 4: Dentro del Form colocaremos un control List tomado de la Toolbox de la zona Mobile Web Forms. En dicho control List mostraremos el resultado con la lista de películas tomadas de la base de datos.

La sección HTML de la pagina Resultado.aspx debe quedar como se ve a continuación:

<%@ Register TagPrefix="mobile" Namespace="System.Web.UI.MobileControls" Assembly="System.Web.Mobile" %> 
<%@ Page Language="vb" AutoEventWireup="false" Codebehind="Resultado.aspx.vb" Inherits="Guapeando.Resultado" %> 
<HEAD> 
    <meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1"> 
    <meta name="CODE_LANGUAGE" content="Visual Basic .NET 7.1"> 
    <meta name="vs_targetSchema" content="http:"//schemas.microsoft.com/Mobile/Page"> 
</HEAD> 
<body Xmlns:mobile="http:"//schemas.microsoft.com/Mobile/WebForm"> 
   <P> 
   <mobile:Form id="Form2" runat="server" Font-Size="Small">  
   <mobile:List id="List1" runat="server"></mobile:List></mobile:Form> 
   </P> 
</body>

La sección de código visual basic de dicha página debe quedar como se muestra a continuación:

Imports System.Data.OleDb 
  
Public Class Resultado 
   Inherits System.Web.UI.MobileControls.MobilePage 
  
#Region " Web Form Designer Generated Code " 
  
   'This call is required by the Web Form Designer. 
   <System.Diagnostics.DebuggerStepThrough()> Private Sub InitializeComponent() 
  
   End Sub 
   Protected WithEvents List1 As System.Web.UI.MobileControls.List 
   Protected WithEvents Form2 As System.Web.UI.MobileControls.Form 
  
   Private Sub Page_Init(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase .Init 
      'CODEGEN: This method call is required by the Web Form Designer 
      'Do not modify it using the code editor. 
      InitializeComponent() 
   End Sub 
  
#End Region 
  
   Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase .Load 
      'Put user code to initialize the page here 
      Dim cn As OleDbConnection 
      Dim ds As Data.DataSet 
      Dim da As OleDbDataAdapter 
      Dim strConexion As String 
      Dim Ssql As String 
  
      strConexion = "Provider=Microsoft.Jet.OLEDB.4.0; Data Source=c:\inetpub\wwwroot\guapeando\cines.mdb" 
  
      'Abrimos la conexión 
      cn = New OleDbConnection(strConexion) 
      cn.Open() 
  
      ds = New Data.DataSet 
      Ssql = "SELECT * FROM cartelera" 
      da = New OleDbDataAdapter(Ssql, cn) 
  
      Dim cmdBuilder As New OleDbCommandBuilder(da) 
      'Cargamos el DataSet 
      da.Fill(ds, "cartelera") 
  
      Dim fila As DataRow 
      List1.Items.Clear() 
      For Each fila In ds.Tables("cartelera").Rows 
         List1.Items.Add(fila("cine") & " - " & fila("film") & " - " & fila("hora")) 
      Next 
   End Sub 
End Class

Lo interesante a mencionar en esta porción de código es que puede verse en el evento Load como se establece la conexión a la base de datos Access, el llenado del DataSet y del control List.

Compilando y ejecutando la aplicación en el emulador WAP el resultado debería ser el siguiente (la pagina a invocar debe ser naturalmente http://localhost/guapeando/beinvenida.aspx):

¿Hacia donde vamos?

Creo que alguna idea de mi opinión al respecto la mencione en los párrafos que inician este articulo. El campo de desarrollo podría decirse que es ilimitado y quizás la pregunta mas adecuada es “¿Que no se puede hacer desde un dispositivo móvil desde el punto de vista del usuario? No se puede detener el tren del avance de la tecnología sino que hay que subirse a el puesto que el mismo es un tren bala y si nos quedamos en la estación esperando por otro, difícilmente aparezca.

Pueden haber quienes opinen que estar conectados en todo momento y en cualquier lugar nos vuelve máquinas o superdependientes, y puede que en parte estén en lo cierto, pero ¿cuantas oportunidades pueden perderse de no estarlo? El estar informado y localizable  tiene sus pro y sus contra, y el buen uso de este tipo de tecnología puede brindarnos una enorme cantidad de ventajas. El quid esta en saber encontrarlas y aprovecharlas, sino seguramente seremos un programa mas en “The Matrix” !!!

Referencias

Internet y la Web
http://www.desarrolloweb.com/articulos/1718.php?manual=54

http://www.oasis-open.org/cover/wap-wml.html

Explicación del lenguaje WSDL (Web Services Description Language)
http://www.microsoft.com/spanish/msdn/articulos/archivo/091101/voices/wsdlexplained.asp

Nicolás Tedeschi se desempeña como Analista de Sistemas recibido en la Facultad de Ingeniería del Uruguay, desarrollando tecnología .NET y SQL Server. Desde el 1995 trabaja con Tecnologías Microsoft de tres capas (HTML-ASP, COM+ y SQL Server). Desarrollador 3 Estrellas del Programa DCE.

Fichero con el código de ejemplo: elnatu_wap_codigo.zip - 20 KB