|

1-
Empezando con WML
Lo
primero es lo primero. Si no tienes ni idea de HTML, te lo veo muy
crudo. . 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 card
Los
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. |
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="..."/> |
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 / |
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 browser
| Pais |
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 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 |
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 Temporarily\r
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>);
|