WML

por Pablo Cesar Mojica

Qué es WML?


WML son las siglas de Wireless Markup Language y es el lenguaje que se utiliza para realizar páginas para cualquier elemento que utilice la tecnología WAP (Wireless Application Protocol), como algunos teléfonos móviles.

WAP es un protocolo basado en los estándares de Internet que ha sido desarrollado para permitir a teléfonos celulares navegar a través de Internet. Con la tecnología WAP se pretende que desde cualquier teléfono celular WAP se pueda acceder a la información de que hay en Internet así como realizar operaciones de comercio electrónico.

WAP es una serie de tecnologías que consisten en: WML, que es el lenguaje de etiquetas, WMLScript es un lenguaje de script, lo que vendría a ser JavaScript y el Wireless Telephony Application Interface (WTAI)

Las caracteristicas mas importantes de WML son:

  • Soporte para imágenes y texto, con posibilidad de texto con formato.

  •  
  • Tarjetas agrupadas en barajas. Una pagina WML es como una página HTML en la que hay una serie de cartas, al conjunto de estas cartas se les suele llamar baraja.

  •  
  • Todos los elementos de WML son sensibles a mayúsculas/minúsculas, esto incluye las etiquetas, los atributos, los identificadores, las variables...

  •  
  • Posibilidad de navegar entre cartas y barajas de la misma forma que se navega entre paginas Web.

  •  
  • Manejo de variables y formularios para el intercambio de información entre el teléfono celular y el servidor.

Sintaxis de WML

WML hereda la mayoría de las contrucciones sintácticas de XML 1.0, asi como su mapa de caracteres.

Etiquetas

Todas las etiquetas en WML se escriben en minúsculas. Hay dos tipos de etiquetas, las contienen elementos, para lo cual hay una etiqueta de inicio y otra de fin. Los atributos de las etiquetas han de ir siempre en la etiqueta de incio.

<etiqueta> Inicio

</etiqueta> Fin

Y las etiquetas que no contienen elementos que tienen el siguiente formato:

<etiqueta/>

Comentarios

Los comentarios en WML son iguales a los XML y HMTL. No pueden anidarse.

<!-- comentario -->

Variables

Las cartas y las barajas WML pueden parametrizarse utilizando variables . Para sustituir una variable por su valor se utiliza la siguiente sintaxis:


$identificador
$(identificador)
$(identificador:conversion)

Los parentesis son obligatorios si un espacio en blanco no indica el final del nombre de la variable. La interpretación de variables tiene la prioridad más alta dentro de WML

Distinción entre Mayúsculas y Minúsculas


Como se menciono antes, WML es un lenguaje que distingue entre mayúsculas y minúsculas. Todas los nombres de etiquetas, atributos y valores de atributos deben escribirse correctamente (en mayúsculas o minúsculas) para que funcionen.

Caracteres Especiales

En un texto WML hay ciertos caracteres que no pueden escribirse tal cual porque WML los reserva para su código. Estos pueden mostrarse especificando un nombre o un número. Todas los carácteres especiales comienzan con un ampersand y terminan con un punto y coma. Otra razón para introducirlas de forma especial es evitar su interpretación por parte del navegador.

En seguida vemos una tabla con las más usadas:

Caracteres Como se Escribe
"  &quot; (comillas)
&  &amp; (ampersand)
'  &apos; (apostrofe)
<  &lt; (mayor que)
>  &gt; (menor que)
   &nbsp;(espacio en blanco)
-  &shy;(guión)
$  $$(signo pesos)

Para conocer todos los códigos precione conjunto de caracteres.

Estructura de WML

Lo primero que se debe incluir en cualquier página WML es el siguiente encabezado que define que version del lenguaje estamos utilizando:

<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"
"http://www.wapforum.org/DTD/wml_1.1.xml">

A las páginas WML se les suele llamar barajas porque están compuestas por cartas. Una carta es la unidad de información que un navegador WAP puede mostrar. El navegador nos permite pasar de una carta a otra dentro de la baraja para así poder acceder a todas las cartas.

Barajas

Una baraja de cartas se marca con las etiquetas <wml> ...</wml> dentro de estas marcas irán todas las cartas de la baraja. Puede contener las etiquetas head, template y es obligatorio que al menos tenga una etiqueta card.

Cartas

Una carta es la unidad de información que se muestra en un navegador WAP, una carta puede contener texto, campos de datos, enlaces...

La etiqueta es <card> ... </card> y algunos de los atributos son title que nos permite indicar el título de la carta, id que nos proporciona una manera de identificar la carta. El atributo id es común para todos las etiquetas WML y nos permite identificar un elemento dentro de un documento WML.

Con el siguiente ejemplo comprnderemos un poco más:

<?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="t1" title="Carta 1">
    <p>Hola Clase!</p>
  </card>
</wml>

Texto en WML

El texto debe ir entre las etiquetas <p>... </p> ya que así está definido en el DTD de WML. Podemos incluir saltos de línea con la etiqueta <br/>.

La etiqueta <p> puede llevar los siguentes atributos:

  • align="" Puede contener los valores left, right y center. Indica la alineación del texto. Por defecto es left
  • mode="" Puede ser warp o nowrap. warp significa que el texto puede ir en varias líneas y nowrap quiere decir que el texto no puede ser roto en varias líneas. Por defecto es warp

Las etiquetas de texto son las mismas que en HTML. A diferencia de HTML, cualquier texto que escribamos debe estar encerrado entre <p> y </p>. Las etiquetas son estas:


<b>negrita</b>
<i>cursiva</i>
<em>énfasis </em>
<strong>mucho énfasis</strong>
<u>subrayado</u>
<big>letra grande</big>
<small>letra pequeña</small>

No es nada recomendable utilizar las etiquetas "b", "i" y "u" más que en momentos muy contados y siempre teniendo en cuenta que no todos los dispositivos las soportan.

Creación de Tablas

Aunque la etiqueta <table> está recogida en la especificación WML 1.1, hay algunos móviles que no la implementan. En su lugar los datos son mostrados en una tabla de una única columna.En WML no se puede poner tablas dentro de tablas y se debe especificar el número de columnas en la etiqueta <table>

Para explcar como construir tablas, utilizaremos un ejemplo:

<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"
"http://www.wapforum.org/DTD/wml_1.1.xml">
 <wml>
  <card>
   <p>
    <table columns="3">
      <tr><td>1,1</td><td>1,2</td></tr>
      <tr><td>2,1</td><td>2,2</td></tr>
    </table>
   </p>
  </card>
 </wml>

tr es la etiqueta que permite especificar filas y td la que permite especificar columnas. Los atributos de table son los siguientes:

Atributo Acción
title="titulo" Titulo de la tabla (no es obligatorio)
aling="C/L/R" Alineación de la tabla (no es obligatorio)
columns="número" Especifica el número de columnas (es obligatorio)

Enlaces


Al igual que en HTML podemos seleccionar parte de un texto o una imagen y que este sea un enlace a otra página o que realice una tarea.

Para realizar esto existe dos etiquetas <anchor>...</anchor> y <a>...</a>.

La etiqueta <a>...</a> nos permite seleccionar un texto o imagen y hacer que sea un enlace a otra página, de una manera muy similar a la etiqueta <a>...</a> de HTML. Contiene el atributo href en el cual ponemos la URL a donde nos llevará el enlace.

Ejemplo de este enlace:<a href="#pagina2">Ir a pagina 2</a>

Con la etiqueta </anchor>...<anchor> podemos además de indicar que se realice una acción al activar el enlace. Las acciones que podemos incluir son:

  • <go href=""/> Permite ir a la dirección indicada en el atributo href.
  • <prev/> Permite ir a la tarjeta anterior, en la historia del navegador.
  • <refresh>...</refresh> Refresca el contenido de la tarjeta actual, volviéndola a pedir al servidor.

Un par de ejemplos son:
<anchor>
  Ir a la tarjeta anterior.
<prev/>
</anchor>


<anchor>
  Ir a la tarjeta 2
<go href="#tarjeta2"/>
</anchor>

Imagenes en Movimiento

Img

img es la etiqueta que nos permite introducir imágenes. Es una etiqueta vacia, sin contenido. Su forma de uso es:

<img src="imagen.wbmp" alt="texto"/>

En el anterior ejemplo hemos usado dos atributos de img, src y alt. src indica la dirección de la imagen a mostrar, es un atributo obligatorio. Con alt podemos mostrar un texto alternativo en caso de que la imagen indicada en src no esté disponible, es opcional.

img tiene muchos atributos los mas importantes son:

  • alt="". Texto alternativo que se visualiza si nuestro navegador no es capaz de visualizar la imagen.
  • src="". URL de la imagen. Normalmente esta ha de estar en formato .wbmp
  • vspace="numero". Espacio vertical en blanco entre la imagen y el resto de la página.
  • hspace="numero". Espacio horizontal en blanco entre la imagen y el resto de la página.
  • Align="". Puede ser top, middle o bottom indica la alineación de la imagens con respecto al texto.
    • top. Alineado a la parte superior.
    • middle. Alineado al centro.
    • bottom. Alineado con la parte inferior del texto.
  • height="numero". Altura de la imagen.
  • weight="numero". Anchura de la imagen

Aqui podemos ver un ejemplo de uso de img:

<?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="imagenes" title="imagenes">
  <p>
    cabra <img src="cabra.wbmp" alt="cabra"/>
    <br/>
    cerdo <img src="cerdo.wbmp" alt="cerdo"/>
    <br/>
    conejo <img src="conejo.wbmp" alt="conejo"/>
    <br/>
    oso <img src="oso.wbmp" alt="oso"/>
    <br/>
    reno <img src="reno.wbmp" alt="reno"/>
    <br/>   </p>
 </card>
</wml>

Imágenes en movimiento

La única forma de crear imágenes en movimiento es utilizar contadores de tiempo (timer) para mostrar sucesivamente las diferentes imágenes. Veamos un ejemplo:

<?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="img1" ontimer="#img2">
<timer value="3"/>
<p>
<img src="img1.wbmp" alt="img1"/>
</p>
</card>

<card id="img2" ontimer="#img3">
<timer value="3"/>
<p>
<img src="img2.wbmp" alt="img2"/>
</p>
</card>

<card id="img3" ontimer="#img4">
<timer value="3"/>
<p>
<img src="img3.wbmp" alt="img3"/>
</p>
</card>

<card id="img4" ontimer="#img1">
<timer value="1"/>
<p>
<img src="img4.wbmp" alt="img4"/>
</p>
</card>

</wml>

Webliografía

Club de WML
http://www.wmlclub.com/tutorialwml

Web Estilo
http://webestilo.com/wml

WML: Wireless Markup Languaje
http://kal-el.ugr.es/~gustavo/wml/index.html

Manual de WML
http://teleline.terra.es/personal/wapfacil/manwml.htm




x