Página principal

Se parte de la base de que se controla el tema de la edición de páginas HTML, por lo que recomiendo encarecidamente ver el manual de HTML de este mismo sitio antes de empezar.

- Las páginas hechas en WML tiene extensión .wml, los scripts .wmls y las imagenes .wbmp (que pueden ser de hasta 127x127 con dos colores, aunque se estima que en el año 2001 saldran los dispositivos WAP capaces de visualizar colores)

- Este es el encabezado que define la versión de WML que usamos:

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

- El resto del código va entre las etiquetas <wml> y </wml>. Ej.:

<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml">
<wml>
Aquí va el código
</wml>

- Una página se denomina deck(baraja) y se subdivide en cards(cartas), de tal forma que podemos movernos por varias cards dentro de la misma deck. 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="First_Card">
<do type="accept" label="Next">
<go href="#Second_Card"/>
</do>
<p>
Select <b>Next</b> to display the next card.
</p>
</card>
<card id="Second_Card">
<p>
This card contains the following:...
</p>
</card>
</wml>

Esto define un deck que contiene 2 cards, de tal forma que cuando pulsemos Next nos iremos a la segunda card, en la cual podremos elegir la opción Back para volver a la anterior. El objeto y propiedades de card se definirán más adelante.

2- El formateo de los textos

Lo primero que debemos aprender es el formateo de los textos, para conseguir una presentación aceptable de nuestros datos, cosa difícil debido al pequeño espacio que se nos proporciona en el navegador WML. TODOS los textos deben ir dentro de una etiqueta <p> Textos....</p>

Etiqueta	Uso
<em> <strong> <i> <b> <u> <big> <small>	Texto con énfasis Texto con mucho énfasis Texto con cursiva Texto con negrilla Texto con subrayado Texto con letra grande Texto con letra pequeña

Ej.:El código <b>Hola</b>a todos --> Hola a todos // <b><i>Hola</b></i>a todos --> Hola a todos

La alineación también es importante, y esta se consigue utilizando la etiqueta <p align="...."> Texto </p>. En la siguiente tabla vemos los usos de la misma.

Alineado a la izquierda
(Por defecto) Alineado al centro Alineado a la derecha
<p align="left">
El resultado final
<br/>es el siguiente
</p> <p align="center">
El resultado final
<br/>es el siguiente
</p> <p align="right">
El resultado final
<br/>es el siguiente
</p>
El resultado final
es el siguiente El resultado final
es el siguiente El resultado final
es el siguiente

La etiqueta <br/> se utiliza para hacer un salto de línea

RECUERDE que al igual que en HTML, hay ciertos caracteres que no se pueden escribir literalmente

Caracteres especiales
á é í ó é ñ & cedilla " abrir comillas cerrar comillas apóstrofe < > nbsp $	á é í ó ú ñ &#amp; o & ç " o " « » &#apos; o ' < >   $$

3- La etiqueta card

Los atributos principales de esta etiqueta son:

Etiqueta Explicación Valores que puede tomar
id Nombre de la card. Usado para referirse a ella Texto
title Es el título que sale en la parte superior del navegador al entrar en la card Texto
newcontext Borra el historial de navegación. Resetea todas las variables. Sólo actéa al realizar el evento go. True ó false(valor por defecto)
onenterforward Dirección a la que se va al ocurrir este evento(ir adelante) usando la etiqueta go. Href. URL o dirección de otro card.
onenterbackward Dirección a la que se va al ocurrir este evento(ir atrás) usando la etiqueta go. href. URL o dirección de otro card.
ontimer Dirección a la que se va al ocurrir este evento(reloj) usando la etiqueta timer. Href. URL o dirección de otro card.
Ej. <card id="card_1" title="Primera Card" onenterforward="http://www.wapserver.com/3.wml" onenterbackward="http://www.wapserver.com/1.wml" ontimer="#card_2"> Resto del código </card>

4- La etiqueta template

Los atributos de esta etiqueta son:

Etiqueta Explicación Valores que puede tomar
id Nombre de la plantilla. Usado para referirse a ella Texto
onenterforward Dirección a la que se va al ocurrir este evento(ir adelante) usando la etiqueta go. Href. URL o dirección de otro card.
onenterforward Dirección a la que se va al ocurrir este evento(ir atrás) usando la etiqueta go. href. URL o dirección de otro card.
ontimer Dirección a la que se va al ocurrir este evento(reloj) usando la etiqueta timer. Href. URL o dirección de otro card.
Notas: Como una plantilla que es, sus valores se aplican a todas las cards que definamos en esa página WML. Atención Si dentro de una card definimos un evento onenterforward, onenterbackward u ontimer con el mismo id que en la plantilla el que se utiliza es el definido en la card.
Ej.
<template id="Template_1">
  <do type="options" name="hazlo" label="Default">
    Código eliminado...
  </do>
</template>
<card id="Card_1">
  <do type="options" name="hazlo"> Esta definición sobreescribe la de la plantilla para esta card al tener el mismo nombre
    Código eliminado...
  </do>
</card>

Los atributos de esta etiqueta son:

Etiqueta	Explicación	Valores que puede tomar
id	Nombre de la etiqueta. Usado para referirse a ella	Texto
domain	Dominio de acceso	Href
path	Dirección de acceso	Href
Notas: Atención Esta etiqueta debe ir dentro de la etiqueta <head> AQUI </head>. Si no se aplica la etiqueta access el acceso es libre.
Ej. <access domain="miempresa.com" path="/pub"> Se accede a: miempresa.com/pub/stock.asp , miempresa.com/pub/demos/ventas.cgi No se accede a: miempresa.com/cgi-bin/ , otraempresa.com/index.wml

Los atributos de esta etiqueta son:

Etiqueta	Explicación	Valores que puede tomar
name	Nombre del objeto. Usado para referirse a ella	Texto
label	Texto que aparece al pulsar el botón options en el navegador para iniciar el evento	Texto
type	Define el tipo de evento que se va a realizar	accept Aceptar prev Ir atrás reset Resetea el estado actual options Operaciones opcionales delete Borra un objeto o selección
Notas: Las etiquetas que pueden ir dentro de un do son <go href="...."/>, <prev/>, <noop/>, <refresh/>. Si una etiqueta do tiene el mismo name que otra definida en la template se usa la de esta card.

7- La etiqueta go

Los atributos de esta etiqueta son:

Etiqueta	Explicación	Valores que puede tomar
href	Dirección a la que se quiere ir	Href. Url o nombre de otra card
method	Utilizado para enviar datos al servidor.	post o get
Notas: esta etiqueta siempre acaba con una barra <go href="..."/>

8- Las etiquetas prev, noop y refresh

Estas etiquetas no tienen atributos

Etiqueta	Explicación	Ejemplo
<prev/>	Ir a la página anterior	<do type="accept" label="Oprima select"><go href="#card2"/></do>
<noop/>	Ninguna operación	<do type="accept" label="Oprima select"><noop/></do>
<refresh/>	Resetea los valores	<do type="accept" label="Oprima select"><refresh/></do>
Notas: estas etiquetas siempre acaban con una barra /

Los atributos de esta etiqueta son:

Etiqueta	Explicación	Valores que puede tomar
src	Lugar donde se encuentra la imagen	Href. Por ahora solamente se aceptan ficheros .wbmp, pero en un futuro se aceptarán GIF y JPG(El Nokia WAP Toolkit 1.2 acepta GIF y JPG) .
alt	Texto alternativo. Se recomienda usarlo siempre	Texto
vspace y hspace	Espacio en blanco entre la imagen y el resto de contenidos. Si es expresado en porcentaje, representa el espacio total de visión del browser, no las medidas de la imagen	Némero o porcentaje
align	Alineación del texto con respecto a la imagen	top, middle o bottom
height y width	Alto y ancho de la imagen(por este orden)	Némero
id	Identificador del objeto. Usado para referirse a ella	Texto
Notas: Siempre se debe utilizar la propiedad alt, ya que al estar WML aén en desarrollo, nunca sabemos si el navegador que se está usando acepta imágenes. Esta etiqueta siempre acaba con una barra /
Ejemplo <img src="./images/ojo.wbmp" alt="ojo" align="middle" />

12- La etiqueta table

Los atributos de esta etiqueta son:

Etiqueta

Explicación

Valores que puede tomar

title

Título de este elemento.

Texto

colums

Némero de columnas que van a ser representadas. Se recomienda usarlo siempre. El valor 0 es un error en WML

Némero

align

Alineación del texto dentro de su celda

L= Izquierda
C= Centro
R= Derecha

Identificador del objeto. Usado para referirse a el

Texto

<tr>

Definición de salto de línea. Se cierra con </tr>

Ninguno

<td>

Definición de salto de columna. Se cierra con </td>

Ninguno

Ejemplo

<table columns=2>
<tr>
  <td>Pais</td><td>l/m2</td>
</tr>
<tr>
  <td>Suiza</td><td>1,3</td>
</tr>
<tr>
  <td>Francia</td><td>2,5</td>
</tr>
</table>

Ventana del browser

Pais	l/m2
Suiza	1,3
Francia	2,5

Los atributos de esta etiqueta son:

Etiqueta	Explicación	Valores que puede tomar
title	Título usado en la presentación del objeto	Texto
Notas: Siempre se acaba con la etiqueta </optgroup>. Esta etiqueta es usada para agrupar a varias option
Ejemplo: <select name="Pais"> <optgroup title="América"> <option value="USA">USA</option> <option value="Mex">México</option> </optgroup> <optgroup title="Europa"> <option value="Esp">España</option> <option value="Fra">Francia</option> </optgroup> </select>	Explicación: Tenemos 2 opciones dentro de cada subgrupo. Sólo podemos elegir 1 de ellas. Primero seleccionamos el continente, y dependiendo del seleccionado, nos salen las siguientes opciones, y allí elegimos el valor que asignaremos a la variable Pais

Las variables, siguen el formato normal de la gran mayoría de lenguajes. Deben empezar por una letra o guión bajo y pueden seguir por otras letras, guiones o némeros. No uses símbolos ni eñes y ni mucho menos el signo dólar, o el ampersand &. Las variables son Case Sensitive, lo que implica que diferencian mayésculas de minésculas, Variable no es lo mismo que variable, ni que VaRiAbLe.

Sustitución de variables: A veces queremos que una valor o atributo sea sustituido por los datos que hay almacenados en una variable, y esto se consigue anteponiendo el signo dolar al nombre de la variable entre paréntesis. Ej.
<input type="text" name="Nombre"/><postfield name="dato1" value="Nombre"/> Esto lo que hace es pasar al servidor el campo dato1 con el valor Nombre, no el nombre que introdujo el usuaior
<input type="text" name="Nombre"/><postfield name="dato1" value="$(Nombre)"/> Esto lo que hace es pasar al servidor el campo dato1 con el nombre que el usuario ha escrito en el input.

Caracteres de escape: A veces los servidores necesitan obtener la información en formato de caracteres de escape(el típico http:\\empresa.com\bancos?%24insertar%24%26true), o una información obtenida en este formato pasarla a normal. Para ello usamos las transformaciones que implementa WML.
$(nombre_variable:e) --> Pasar a formato escape --> Si el valor de la variable es abc=? nos da abc%3D%3F
$(nombre_variable:unesc) --> Pasar a formato unescape -->Si el valor de la variable es abc%3D%3F nos da abc=?

Las URL relativas o absolutas Puede ocurrir que el dispositivo WAP o el gateway no interprete correctamente una URL relativa. Para evitar esto ser recomienda usar la URL absoluta:

Como forzar a un servidor que acepte wml

Como sucede en muchos casos los webmasters o developers , no tienen control sobre el servidor en que estan trabajando , ya que han contratado a una empresa encargada de ello , lo que se le llama “ Hosting “ , existen otras relaciones entre desarrolladores y ISPs pero la mas comén es esta .

Es por eso que en muchos casos cuando un desarrollador necesita realizar algun cambio en la parte “ técnica “ del servidor que esta utilizando , donde el más comén de los casos es la aparición de nuevas tecnologías

( ASP,PHP,XML,etc ) se ven obstaculizados muchas veces por su distancia con el servidor , su contacto casi nulo con su administrador , etc .

Uno de los cambios mas comunes que se realizan a nivel de servidor es el agregar mime-types en el mismo , lo que no basta en muchos casos como ASP por ejemplo que se necesita insertar módulos en el caso de ser bajo Apache .

En el caso de este nuevo lenguaje como lo es el XML de donde deriva el WML , el cual esta mostrando una impresionante expansión en todos los ámbitos de programación especialmente en el comercio electrónico , la incorporación de mime types para soportar dicho lenguaje se debe hacer a nivel de servidor en la configuración del mismo .

Puede que Ud. haya oído hablar alguna vez de los MIME Types pero no tiene bien claro lo que son o nunca habia oído hablar de ellos y no tiene la menor idea de lo que son .

Los MIME o Multipurpose Internet Mail Extensions es un formato originalmente diseñado para incluir imágenes , sonidos, animaciones y otro tipo de documentos sin mensajes de mail de Internet , como en nuestro caso que lo que haremos es incluir un nuevo tipo de contenido para que sea soportado por nuestro servidor .Un MIME Type es del formato type / subtype . El World Wide Web usa mayormente los siguientes types : text , image , audio video y application (aquí hay otros dos tipos como lo son multiparte y mensaje que casi nunca son usados . El subtype especifica un formato particular del archivo , por ejemplo el MIME type de un archivo HTML es text/html , en caso similar el MIME type de los archivos de imagen GIF es image/gif .

Es entonces que para que el servidor soporte WML en toda su extensión se deben agregar 5 mime types a través de los cuales , se podrá soportar todas las extensiones del lenguaje :

Esto lo podríamos efectuar fácilmente si tenemos el control sobre el servidor que estamos usando . Entonces la pregunta es como hacerlo si no somos los administradores del servidor .

Seguramente accedemos a el servidor mediante una cuenta FTP ( File Transfer Protocol ) para enviar nuestros archivos. Aunque existen otras vías a nosotros nos interesará esta . Entonces, si queremos trabajar en wml y que el servidor lo soporte , lo que haremos es agregar un archivo .htaccess en el directorio que deseamos trabajar . Vale aclarar que estamos trabajando sobre un servidor UNÍX corriendo bajo Apache/1.3.6 mod_fs 3.311 . Como dijimos entonces , lo que haremos es crear un archivo .htaccess en el cual especificaremos las directivas para soportar el contenido wml .

El archivo .htaccess puede ser ubicado en uno o varios de los directorios de un servidor virtual . Generalmente este archivo tiene como función controlar el acceso a las paginas ubicadas en un directorio , aunque también como en este caso se puede usar para agregar MIME types .

Este archivo se puede construir con el viejo y conocido Notepad de Windows si queremos ,o con cualquier otro editor de texto guardandolo con la extensión .htaccess .

Entonces lo que haremos es mediante la directiva Add Type forzar al servidor a que envíe el MIME Type “ text/vnd.wap.wml “ que permitirá que el servidor los archivos con extensión .wml . Por lo tanto el Htaccess contendrá la siguiente línea :

Etiqueta	Explicación	Valores que puede tomar
name	Nombre de la variable que va a tomar los datos que introduzca el usuario(Obligatorio)	Texto
value	Valor que aparece en el campo input por defecto. Debe cumplir las reglas de formato de este campo o si no será ignorado; También será ignorado si la variable ya tiene un valor previo	Texto
type	Forma en la que se introducen los datos	text Texto normal password Aparecen asteriscos en vez del texto tecleado. NO se recomienda, ya que para escribir con un telef. móvil es muy complicado
format	Formato en que se acepta la introducción de datos	El formato por defecto es M, o sea cualquier caracter en mayésculas. A= Cualquier caracter no numérico en mayésculas a= Cualquier caracter no numérico en minésculas N= Sólo némeros X= Cualquier caracter en mayésculas x= Cualquier caracter en minésculas \dato=* Dato es un valor que queremos que aparezca tal cual
emptyok	En true si queremos que no sea obligatorio introducir este dato, ya que si tenemos un formato en un campo y no queremos cubrirlo, si lo dejamos en blanco puede no cumplir el formato, lo que nos da un error	True o false(Por defecto si el campo tiene formato)
size	Especifica el ancho en caracteres del input	Némero
maxlenght	Especifica el némero máximo de caracteres a introducir	Némero
title	Título usado en la presentación del objeto	Texto
tabindex	Especifica el orden en que se accede a los distintos objetos dentro de una card. Por defecto de arriba a abajo	Némero
Notas: Siempre se acaba la etiqueta con una barra /
Ejemplo <input type="text" name="a1" format="A" maxlength="25" emptyok=true /> Acepta 25 letras en mayésculas y las almacena en la variable a1. No es un campo obligatorio(emptyok=true) <input type="text" name="fecha" format="NN\-NN\-19NN" maxlength="10"/> Acepta solamente némeros y ya pone el los quiones y el 19, almacenando esto en la variable fecha. Es un campo obligatorio

Etiqueta	Explicación	Valores que puede tomar
value	Valor que toma la variable al seleccionar este item	Texto
title	Título usado en la presentación del objeto	Texto
onpick=	Evento que ocurre al seleccionar o deseleccionar un item	Href. URL o dirección de otra card
Notas: Siempre se acaba con la etiqueta </option>. Debe estar dentro de la etiqueta <select>
Ejemplo: <select name="mascota" value="N" ivalue=1> <option value="N">Ninguno</option> <option value="P">Perro<</option> <option value="G">Gato<</option> </select>	Explicación: Tenemos 3 opciones, y por defecto Ninguno seleccionada(ivalue=1). Sólo podemos elegir 1 de ellas. Si elegimos Perro, la variable mascota es P, gato es G y si no elegimos nada N(value="N").

NO	SÍ
<a href="../foo/bar.wml"> <a href="#myID">	<a ref="http://my.server.com/foo/bar.wml"> <a href="http://my.server.com/foo/bar.wml#myID">

NO	SÍ
<select ivalue="0"> <option onpick="#Card2">Link 1</option> <option onpick="#Card3">Link 2</option> </select>	<p><a href="#Card2">Link 1</a></p> <p><a href="#Card3">Link 2</a></p>
Así se va a ver	Así se va a ver
aaaa bbb El problema es que como aparece seleccionado el primer link, no podemos accionarlo, y si bajamos al segundo, se inicializa el evento onpick y nos vamos a al Card3	Link 1 Link 2

Contenido	Mime Type	Extensión
codigo WML	text/vnd.wap.wml	wml
WML compilado	Application/vnd.wap.wmlc	wmlc
WML Script	text/vnd.wap.wmlscript	wmls
WML Sript compilado	Application/vnd.wap.wmlscriptc	Wmlsc
Wireless Bitmap	image/vnd.wap.wbmp	wbmp

Alineado a la izquierda (Por defecto)	Alineado al centro	Alineado a la derecha
<p align="left"> El resultado final <br/>es el siguiente </p>	<p align="center"> El resultado final <br/>es el siguiente </p>	<p align="right"> El resultado final <br/>es el siguiente </p>
El resultado final es el siguiente	El resultado final es el siguiente	El resultado final es el siguiente