Codigos WML y HTML
Lo primero es lo primero. Si no tienes ni idea de HTML, te lo veo muy crudo. Lee el manual de HTML que hay en la URL http://www.wmaestro.com. Si te quieres arriesgar, es cosa tuya, pero te advierto que se parte de la base de que se controla el tema de la edición de páginas HTML.
- Las páginas hechas en WML tiene extensión .wml, los scripts .wmls y los dibujos .wbmp
- 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">
No lo vamos a explicar ya que es un tema avanzado. Simplemente es lo que pondremos al principio de nuestra página.
- Como en el HTML 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. Ej.:
<?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
RECUERDA que igual que en HTML, hay ciertos caracteres que no se pueden escribir literalmente
Caracteres especiales
á
é
í
ó
ú
ñ
&
cedilla
"
abrir comillas
cerrar comillas
apóstrofe
<
>
nbsp
$ á
é
í
ó
ú
ñ
&
ç
"
«
»
'
<
>
 
$$
3- La etiqueta cardLos atributos 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)
ordered No se explica por el momento True(valor por defecto) ó false
onenterforward Dirección a la que se va al ocurrir este evento(ir adelante) usando la etiqueta go.Se amplia más adelante 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.Se amplia más adelante 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.Se amplia más adelante 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.Se amplia más adelante 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.Se amplia más adelante 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.Se amplia más adelante 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>
5- La etiqueta access
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
6- La etiqueta do
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.
Ejemplo
Si quieres ver este ejemplo en acción con fotografías del teléfono móvil PULSA AQUI y se abrirá otra ventana
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. Se amplia con el tema postfield post o get
Notas: esta etiqueta siempre acaba con una barra <go href="..."/>
Ejemplo
Si quieres ver este ejemplo en acción con fotografías del teléfono móvil PULSA AQUI y se abrirá otra ventana
8- Las etiquetas prev, noop y refresh
Estas etiquetas no tienen atributosEtiqueta 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 /
9- La etiqueta a
Los atributos de esta etiqueta son:Etiqueta Explicación Valores que puede tomar
title El texto que sale al entrar en las opciones Texto
href Dirección a la que accederemos Href. URL u otra card
Notas: Se cierra con </a>
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="links" title="Links">
<p>
Este es un texto normal, pero aquí hay un
<a title="LINK" href="#card2">link!
</a>
</p>
</card>
<card id="card2" title="Segunda Card">
<p align="center">
<br/>
Estamos en la
<br/>
Card2
</p>
</card>
</wml>
Explicación: Aparece en la pantalla: Este es un texto normal, pero aquí hay un link! y en la barra de navegación del browser aparece options. Al acceder a options nos aparece la lista de links activos(en este caso solamente uno).
10- La etiqueta timer
Los atributos de esta etiqueta son:Etiqueta Explicación Valores que puede tomar
id Identificador del objeto. Usado para referirse a ella Texto
value Tiempo que debe pasar para que se inicialize el evento. Se expresa en décimas de segundo Número
Notas: Si se utiliza una etiqueta timer, siempre hay que definir en la card el valor ontimer, bién sea a otra card ontimer="#card2" u a otra URL ontimer="http://otraempresa.com/pub/inicio.wml"
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="card1" ontimer="#card2" title="Demostrando un timer">
<timer value="35"/>
<p align="center">
<br/>
<big> Bienvenidos a ... </big>
</p>
</card>
<card id="card2" ontimer="#card3" title="Demostrando un timer">
<timer value="50"/>
<p align="center">
<br/>
<b> WAP facil<br/></b>
<u> Wireless Application Protocol </u>
...
</p>
</card>
<card id="card3" title="Demostrando un timer">
<p align="center">
<br/>
<big><i> El mejor curso! </i></big>
</p>
</card>
</wml>
Explicación: Lo primero que vemos es una pantalla con un texto que dice Bienvenidos a ... y al cumplirse el timer <timer value="35"/>, pasa a la siguiente y al cumplirse el timer de esta se pasa a la última.
11- La etiqueta img
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) . Descárgate el conversor de ficheros PULSANDO AQUÍ
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
id 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 browserPais l/m2
Suiza 1,3
Francia 2,5
13- La etiqueta input
Los atributos de esta etiqueta son: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="ape1" format="A" maxlength="25" emptyok=true /> Acepta 25 letras en mayúsculas y las almacena en la variable ape1. 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
14- La etiqueta select
Los atributos de esta etiqueta son: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 tiene la variable por defecto. Texto
multiple Posibilidad de seleccionar más de una opción. Si es así el valor de la variable será ambos valores separados po ; True ó False(por defecto)
ivalue Deternima el index de la opción que queremos que esté seleccionada por defecto. El primer item es 0, el segundo 1.... Número
title Título usado en la presentación del objeto Texto
Notas: Siempre utilizaremos la opción ivalue=0, o al menu que queremos que sea seleccionado por defecto. Siempre se acaba con la etiqueta </select>. Dentro de esta etiqueta deben ir <option> o <optgroup>
Ejemplo: Se ven en las siguientes etiquetas
15- La etiqueta option
Los atributos de esta etiqueta son: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"
. 16- La etiqueta optgroup
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 aglurinar 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">Espaqa</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
17-La etiqueta postfield
Los atributos de esta etiqueta son:Etiqueta Explicación Valores que puede tomar
name Nombre de la variable que va a enviar el usuario(Obligatorio) Texto
value Valor que toma la variable a enviar Texto
Notas: Atención: Normalmente los datos deben ser enviados en formato escape al servidor, por lo que si los recibimos de un input debemops transformarlos(<postfield name="f" value="$(datos:e)"/> este tema se amplia en variables) Se utiliza dentro de una etiqueta go. Acaba siempre con una barra /. No todos los dispositivos WAP (Ej. Nokia 7110) aceptan el envio de datos
Ejemplo
<go method="post" href="http://www.empresa.com/cgi/banco">
<postfield name="Dinero" value="10000"/>
<postfield name="Num_Cta" value="12345"/>
<postfield name="Operacion" value="Deposito"/>
</go> Explicación:
Enviamos los campos Dinero=10000, Num_Cta=12345 y Operacion=Deposito al servidor
18- La etiqueta setvar
Los atributos de esta etiqueta son:Etiqueta Explicación Valores que puede tomar
name Nombre de la variable que va a inicializar(Obligatorio) Texto
value Valor que toma la variable Texto
Notas: Se suele utilizar dentro de otras etiquetas. Acaba siempre con una barra /
Ejemplo
<go href="#card2">
<setvar name="Anterior" value="Card1" />
</go>
19- Las variables. Nombres y Usos
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 &. 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. (Cuidado aún tiene un pequeqo fallo que explicamos ahora).
Caracteres de escape: A veces los servidores necesitan obtener la información en formato de caracteres de escape(el típico http:\empresa.combancos?%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=?
Manual de WML - Trucos
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:
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">
--------------------------------------------------------------------------------
Nombre de variables y ficheros
No olvides que los datos se envian y reciben a través del aire. La velocidad suele se de 9600. Intenta que se envien el menor volumen de datos posible.
Idea 1: Usa nombres de ficheros lo más cortos posibles. Ej: http:"//my.server.com/i.wml" mejor que http://my.server.com/index.wml
Idea 2: Usa nombres de variables lo más cortos posibles. Si usas menos de 25 variables lo mejor es que uses las letras del alfabeto.
--------------------------------------------------------------------------------
Imágenes
Cuidado. No todos los dispositivos WAP aceptan imágenes. Utilízalas lo menos posible. Alguna SDK si las aceptan, pero... Y si las utilizas no te olvides nunca de poner el atributo alt <img src="imagen.gif" alt="Icono" />
--------------------------------------------------------------------------------
Nombre de variables y ficheros
¿Has intentado alguna vez escribir un password en un teléfono móvil? Es muy fácil en un PC o en un PDA, pero en un teléfono... Procura no usar el atributo type="password" en los input
--------------------------------------------------------------------------------
¿Listas o Links normales?
Hay dos formas de crear una lista de 2 links, con un select o con a. Recomendamos la segunda por lo que se explica abajo
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
--------------------------------------------------------------------------------
Newcontext="true"
&Iquest;Has visto en el código de alguna página <card id="card1" title="Currency" newcontext="true">? ¿ Lo has probado?
Si pones ese atributo, las variables se borran, incluso la history, por lo que no se puede usar el back. Para inicializar variables es mejor
<card title="Titulo">
<<onevent type="onenterforward">
<refresh>
<setvar name="Var1" value=" "/>
<setvar name="some_var2" value=" "/>
</refresh>
</onevent>
...
</card>
--------------------------------------------------------------------------------
Pasar datos a ASP o CGI
Por ejemplo con un input:
<input format="NN" name="Var1" title="Var1:"/>
<do type="accept" label="Mandar:">
<go href="http://*****/test.asp?datos=$(Var1)"/>
--------------------------------------------------------------------------------
Detectar en el servidor si se accede con un dispositivo WAP
Sorry, pero no lo he traducido... XP
Sacado de http://www.egroups.com/group/wmlprogramming
I tried to redirect my browser clients using ASP and following your sample code. For some reason the content type is text/html. I submit the code see if any of you can see whats wrong. The redirect woks fine when I use the web browser.
---------code-----------------------------------------------------
<%Response.ContentType = "text/vnd.wap.wml"%>
<% Dim uastring, wmlURL, htmlURL
uastring = request.ServerVariables("HTTP_USER_AGENT"
wmlURL = "/martin/index.wml"
htmlURL = "some URL"
If (InStr(uastring,"UP"
Or InStr(uastring, "Nokia" Or InStr(uastring, "Wap"
) Then Response.Redirect wmlURL
else
Response.Redirect htmlURL
End If %>
-------End of code---------------------------------------
Marco
The only problem with this approach is when you encounter a phone that does not support WMLScript, or your site gets hit by an HTML client. You're much better off checking on the server end first. This is a trivial exercise in just about any language, Perl, ASP, Java, etc...
In Perl 5
#!/usr/local/bin/perl5
$ua = $ENV{"HTTP_USER_AGENT"};
if ($ua =~ "UP"
{ print "Status: 302 Moved Temporarilyr Location: <one location>"; } elsif($ua =~ "Nokia"{ ... You get the picture.
In asp, this construct would look like:
Dim uastring
uastring = request.ServerVariables("HTTP_USER_AGENT"
If (InStr(uastring,"UP"
)Then Response.Redirect(<onelocation> and in a Java Servlet it would look like this:
String ua = req.getHeader(HTTP_USER_AGENT);
if (ua.indexOf("UP"
!= null){ res.setStatus(res.SC_MOVED_TEMPORARILY);
res.setHeader("Location", <one location>
;