WML Internet para móviles

WML
Internet para móviles
En esta Unidad
aprenderás a:
•
Descubrir las limitaciones de
los dispositivos WAP.
•
Conocer la estructura que tiene
un documento WML.
•
Construir instrucciones en WML.
•
Diseñar páginas WML.
•
Incluir imágenes y formularios
en las páginas WML.
•
Añadir eventos a las páginas WML.
8
8. WML. Internet para móviles
8.1 La tecnología móvil
8.1 La tecnología móvil
En 1997, tres compañías de telefonía móvil –Motorola,
Nokia y Ericsson– y otra de software –Phone.com– crearon una empresa llamada WAP Forum. Ésta debía desarrollar y poner en marcha el llamado WAP (Wireless Aplication Protocol), un conjunto o pila de protocolos para
dispositivos inalámbricos como los teléfonos móviles o
las PDA. En el año 2000, el WAP Forum se convirtió en
Open Mobile Alliance y agrupaba ya a más de 300
empresas del sector de las telecomunicaciones. Los
esfuerzos combinados de éstas permitieron la mejora de
la antigua tecnología GSM, añadiéndole un nuevo subsistema de conmutación de paquetes por radio (GPRS)
que posibilitaba la transmisión eficiente de datos. Internet acababa de llegar a las pantallas de los móviles.
A Internet y la telefonía móvil
El hecho de que Internet sea accesible desde un dispositivo inalámbrico, ya sea un móvil o una PDA, no
quiere decir que el usuario pueda navegar por la red
como si utilizase el ordenador de su casa. Un móvil no
es un ordenador ni viceversa. Existen una serie de cuestiones que hay que tener en cuenta en este sentido:
• Movilidad. Con un dispositivo WAP, el usuario se
puede conectar independientemente del lugar donde
se encuentre. Como contrapartida, el pequeño
tamaño de estos dispositivos hace imposible integrar en ellos potentes procesadores, cargarlos del
último software o acoplarles una gran pantalla.
• Velocidad. En teoría, GPRS permite alcanzar una
velocidad de transmisión de datos de hasta 144
Kbps (kilobits por segundo). En la práctica, ésta se
reduce a entre 18 y 53 Kbps en sentido descendente (red-terminal) y entre 9 y 13 Kbps en sentido
ascendente (terminal-red). Es decir, su velocidad es
comparable a la de una línea fija de 56k, aceptable
pero insuficiente si se compara con las conexiones
de banda ancha existentes en la actualidad.
• Tarificación por volumen. Con GPRS se paga según
la cantidad de bytes transferidos, no según la duración de la llamada. La información puede mantenerse en pantalla el tiempo que sea necesario sin
coste añadido. Sin embargo, la conexión desde
teléfonos móviles no suele ser muy habitual entre
consumidores particulares y el precio de dicho tráfico puede resultar elevado a pesar de los bonos y
ofertas de las compañías de telefonía móvil.
Estas características implican una serie de diferencias
importantes entre las tecnologías web tradicionales y
las adaptadas al mundo inalámbrico. Los móviles y PDA,
por ejemplo, no utilizan el protocolo http sino el protocolo WAP, no hablan HTML sino WML. Tanto WAP
como WML son en realidad versiones reducidas de sus
«hermanas» de la web y adaptadas a los microprocesadores y micronavegadores insertados en el pequeño espacio físico y de memoria que poseen estos dispositivos.
Para que los dos mundos puedan «hablar» entre sí, ha
sido necesario implementar una tecnología de red que
traduzca las comunicaciones entre ambos. Al dispositivo
que permite dicha comunicación se le llama gateway o
pasarela. Si un sitio web quiere que sus contenidos
HTML sean visibles para los móviles, debe recurrir a una
pasarela que traduzca sus páginas a WML (véase la
Figura 8.1).
Por desgracia, este tipo de tecnología no es fiable totalmente. A veces, la traducción de contenidos es imposible debido a la complejidad de la propia web (PHP, ASP,
etc.); otras veces, la traducción acaba generando páginas inmensas, algo muy negativo cuando se habla de
dispositivos en los que se tarifica por flujo de datos.
Debido a esto, cada vez es más frecuente que las empresas interesadas en los usuarios de móviles se decanten
por hacer versiones de sus páginas directamente en
WML. De hecho, en 2005 se aprobó la creación de los
dominios .mobi, específicos para las páginas diseñadas para terminales móviles. Es aquí donde WML jugará
un papel verdaderamente relevante.
Móvil
Documento
WML
Gateway
Documento
HTML
Fig. 8.1. Esquema
del sistema de
comunicaciones
tradicional entre
un terminal WAP y
un servidor web.
Servidor
163
8. WML. Internet para móviles
8.2 Estructura básica del lenguaje WML
8.2 Estructura básica del lenguaje WML
Como ya se ha comentado, los desarrolladores tuvieron
que adaptar el mundo web al pequeño espacio de los
móviles y PDA. El lenguaje de marcas para dispositivos
inalámbricos que «inventaron» fue WML (Wireless Markup Language). WML podría definirse como el lenguaje
que se utiliza para realizar páginas destinadas a dispositivos WAP. Está basado en XML (eXtensible Markup Language, Lenguaje de marcas extensible; véase la Unidad
11) y su estructura es muy similar al HTML aunque con
diversas peculiaridades que pasaremos a ver a continuación.
El proceso es similar al que se sigue en HTML, donde
existen una serie de etiquetas (<html>, <head> y
<body>), con sus correspondientes cierres (</body>,
</head> y </html>) que determinan la estructura del
documento. En este caso, la primera será, obviamente,
<wml>.
Una vez completado este paso, se tiene que declarar
una carta. Para ello, simplemente tendremos que asignarle un título y un identificador por si se quiere referenciar posteriormente.
<card id="carta1" title="Hola Mundo">
A Estructura básica
A diferencia del HTML, en WML se pueden tener varias
páginas dentro de un mismo fichero de datos. Es decir,
si en HTML debíamos crear un fichero por cada «objeto
enlazable», en WML podemos tener varias páginas web
dentro de un mismo archivo. Esto se debe a que en
WML, un fichero es lo que se denomina una baraja
(deck), la cual puede contener tantas cartas (cards, lo
equivalente a páginas HMTL) como se quiera.
El hecho de que se puedan tener varias cartas dentro de
una baraja, no quiere decir que todo lo que se haga
tenga que estar dentro de la misma. Con WML es posible organizar un sitio web en diferentes barajas (con
sus correspondientes cartas) dado que se pueden crear
enlaces entre ellas.
Para ver la estructura básica de un documento WML, lo
mejor es hacer una página simple. Nosotros empezaremos con uno de los clásicos de los ejercicios de programación: el famoso Hola Mundo.
Dado que WML está basado en XML, primeramente hay
que indicar qué versión de XML vamos a utilizar.
<?xml version="1.0"?>
A continuación, se añade la etiqueta que indica que
empieza la parte correspondiente a un documento WML.
<wml>
164
Ahora podemos ya crear el contenido correspondiente a
la carta. Si lo único que queremos insertar es Hola
Mundo, entonces deberíamos escribir:
<p>Hola Mundo</p>
Finalmente, sólo queda cerrar las etiquetas abiertas.
Para ello se sigue el orden inverso al que se crearon, es
decir, primero cerramos la de la carta y después la de
WML. Así quedarán «balanceadas» o equilibradas.
1 </card>
2 </wml>
Con eso, ya se tendría la primera página WML completa.
Aunque simple, comprender su estructura es esencial
para escribir en lenguaje WML ya que, como se verá en
los casos prácticos, es de gran utilidad a la hora de
organizar el trabajo. Su esquema servirá de plantilla
para páginas más complicadas.
La estructura básica de una baraja WML se
corresponde con el siguiente esquema:
<?xml version="1.0"?>
<wml>
<card id="id1" title="Título 1">
Contenido 1
</card>
</wml>
8. WML. Internet para móviles
8.2 Estructura básica del lenguaje WML
El editor
Para editar WML se puede utilizar cualquier herramienta que
sea capaz de guardar texto plano sin incluir códigos de control. Es decir, el bloc de notas serviría pero Word, no. En
cualquier caso, siempre será preferible utilizar un editor adecuado como es UltraEdit (puedes descargártelo del CD o de
www.ultraedit.com) ya que puede ser configurado para que
trate el fichero .wml como XML (el lenguaje sobre el que se
basa WML) y resalte la sintaxis del documento.
El navegador
También será necesario comprobar que la página ha quedado
como se deseaba. Una sencilla forma de hacerlo es abriendo
la página en algún navegador web compatible. De los navegadores tradicionales más extendidos, esto es, Internet
Explorer (www.microsoft.com), Firefox (www.mozilla.org) y
Opera (www.opera.com), se podrán usar los dos últimos para
comprobar que las páginas se muestran correctamente ya
que las actuales versiones de Internet Explorer no soportan
WML. En cuanto a Firefox, soporta WML siempre que tenga
instalada la extensión (plugin) adecuada pero no representa
la información exactamente como el diseñador espera ni
como lo representan los terminales móviles en realidad. No
obstante, puede servir para comprobar que la sintaxis de la
página está bien. Es por esta razón que, en esta Unidad, se
utilizará Opera. Este navegador representa la información de
forma parecida a como lo haría un terminal móvil y, además,
avisa de los fallos cometidos en el código, indicando la línea
aproximada en la que se encuentran.
El simulador
Aunque usando los navegadores tradicionales, se puede comprobar si la página se ve bien, esto no acaba con todos los
problemas. Al fin y al cabo, la pantalla de un móvil es mucho
más pequeña que un monitor y, por tanto, los diseños válidos para uno y para otro serán distintos. Para evitar este
problema y facilitar el trabajo del diseñador, existen simuladores de navegadores de móviles que presentan la información de forma parecida a la real, es decir, de acuerdo al
tamaño de las pantallas de los móviles de verdad. Un kit de
desarrollo o simulador válido y sencillo de utilizar es Openwave SDK 6.2.2 para Windows, el cual se encuentra en el CD
del alumno o se puede descargar de http://developer.openwave.com. Para otras plataformas será necesario utilizar
otros simuladores, como SmartPhone Emulator Developer
Edition 5.0 (www.yospace.com/spede.html).
Fig. 8.2. UltraEdit, el
navegador Opera y el
simulador Openwave,
tres herramientas de
gran utilidad para trabajar con WML.
165
8. WML. Internet para móviles
8.2 Estructura básica del lenguaje WML
Caso práctico
1
Realización de una pequeña página WML
Se pide
Realizar una página WML titulada Hola mundo, que consista en una
baraja con una carta. Ésta debe contener un pequeño texto.
Solución
Paso 1. Se escribe la estructura básica de una baraja WML definiendo
sólo una carta.
1
2
3
4
5
6
<?xml version="1.0"?>
<wml>
<card id="id1" title="Título 1">
Contenido 1
</card>
</wml>
Paso 2. En la parte correspondiente al contenido de la baraja, se escribe
un texto, por ejemplo, Mi primera carta, el cual debe ir dentro, al
menos, de una etiqueta de párrafo (<p></p>).
1
2
3
4
5
6
<?xml version="1.0"?>
<wml>
<card id="id1" title="Título 1">
<p>Mi primera carta</p>
</card>
</wml>
Paso 3. Para ponerle el título, por ejemplo CP1 (o Caso práctico 1) se
debe editar la línea <card id="id1" title="Título 1">. En su
lugar se pondrá:
<card id="id1" title="CP1">
Paso 4. Finalmente, se coloca todo el código en el
esquema de la baraja y se comprueba, con ayuda
del simulador, si el resultado es el idóneo (véase
la Figura 8.3).
1
2
3
4
5
6
166
<?xml version="1.0"?>
<wml>
<card id="id1" title="CP1">
<p>Mi primera carta</p>
</card>
</wml>
Fig. 8.3. Solución del
Caso práctico 1.
B
Enlaces
Como ya se ha comentado, en WML es posible tener
varias cartas en una misma baraja. Para ello, simplemente tienen que definirse una detrás de otra según el
modelo proporcionado anteriormente.
1 <?xml version="1.0"?>
2 <wml>
3 <card id="id1" title="Título 1">
4
Contenido 1
5 </card>
6 <card id="id2" title="Título 2">
7 Contenido 2
8 </card>
9 </wml>
Siempre que se cargue una baraja, aparecerá su primera
carta. Para acceder a la segunda, será necesario usar
enlaces. Como en HTML, en WML se pueden utilizar
«anclas» o links directamente. El primer caso serviría
para enlazar dos cartas dentro de una misma baraja; el
segundo, para enlazar desde una baraja o carta a otra
baraja o sitio externo.
La forma que debe seguir un enlace de tipo ancla será
<a href = "#identificador"> siendo el identificador el de la carta a la que se quiera enlazar. Para los
links a otras barajas, se usa <a href = "URL">
siendo URL la dirección en la cual se puede acceder a la
nueva baraja o sitio.
Un ejemplo sería el siguiente código:
1 <?xml version="1.0"?>
2 <wml>
3 <card id="cartauno" title="Carta 1">
<p>Ésta es la carta 1.</p>
4
<p><a href="#cartados">Link a la
5
carta 2</a></p>
6 </card>
7 <card id="cartados" title="Carta 2">
<p>Ésta es la carta 2.</p>
8
<p><a href="#cartauno">Link a la
9
carta 1</a></p>
<p><a href="hola_mundo.wml">Ir a
otro sitio</a></p>
11 </card>
12 </wml>
10
8. WML. Internet para móviles
8.3 Contenidos: texto, tablas e imágenes
8.3 Contenidos: texto, tablas e imágenes
La creación de barajas y cartas así como la inserción de
anclas y links sirve para crear la estructura básica de la
página web. Sin embargo, ésta está vacía de contenidos.
A continuación, se estudiará cómo añadir texto, tablas e
imágenes, es decir, los contenidos básicos de la página.
A Formato de texto
En el Caso práctico 1 se ha visto cómo poner una frase
en una página WML (<p>frase</p>). El siguiente paso
consiste en ver cómo se puede formatear ese texto, es
decir, darle el estilo que se desea. Muchas de las etiquetas coinciden con las de HTML (<p>, <b>, <u>, etc.)
pero otras son diferentes (en el CD se halla una pequeña
guía de referencia rápida donde se pueden consultar
dichas diferencias). En la Tabla 8.1 se muestran algunos
de los atributos que se pueden aplicar a los textos.
Etiquetas
Significado
<br/>
Salto de línea
<big></big>
Tamaño grande
<em></em>
Enfatizado
<small></small>
Pequeño
<strong></strong>
Negrita a la vez que enfatizada
Tabla 8.1. Algunos formatos de texto.
Aun a riesgo de ser repetitivos, hay que recalcar una vez
más que estas páginas van dirigidas, principalmente, a
móviles y, por ello, existen algunas particularidades
relacionadas con la pantalla. Puede ser que algunos terminales no muestren ciertos estilos que se hayan aplicado a un texto debido a que no lo implementan por
motivos de espacio en pantalla. Por ejemplo, suponiendo que se pone la fuente grande, en negrita y enfatizada, es posible que el usuario no vea la página como
el diseñador espera. Por ello, en este tipo de lenguaje
está bien visto el diseño poco recargado y la sobriedad.
Por otra parte, WML tiene ciertas características a tener
en cuenta. En primer lugar, el salto de línea es <br/>
y no <br> como en HTML. En algunos dispositivos, esta
etiqueta hay que ponerla obligatoriamente delante de
cada línea, por lo que será mejor que siempre se haga
así para evitar problemas de compatibilidad.
En segundo lugar, es conveniente evitar el uso de la etiqueta <b> ya que puede dar errores en algunos dispositivos que no lo admiten. Para usar un tamaño de letra
más grande es mejor utilizar <strong></strong>
pero siempre con moderación porque las pantallas de
los dispositivos a los que va dirigido WML suelen tener
un tamaño limitado.
Los caracteres especiales
Un aspecto también a tener en cuenta es el relacionado
con los caracteres especiales que tanto nos afecta por
la cuestión de los acentos y la «ñ». Dependiendo de la
configuración del servidor o incluso del propio terminal,
puede ocurrir que este tipo de caracteres no se visualicen correctamente en algunas ocasiones.
Reglas básicas de WML
• La mayoría de etiquetas tienen que abrirse y cerrarse. Aquellas
etiquetas que no necesitan cerrarse (<access>, <br/> o
<img>, por ejemplo), suelen tener una barra al final de la
cadena (por ejemplo, <br/> o <img
src="URL"
alt="texto alternativo"/>).
• WML es case sensitive (sensible a mayúsculas y minúsculas)
por lo que, al cerrar una etiqueta, hay que escribirla igual que
cuando se abrió. Por eso, <wml> no es igual que <Wml>.
• Todo texto debe estar dentro de una etiqueta, aunque sea
una simplemente de párrafo (<p>).
• Todos los valores de los parámetros que van dentro de una
etiqueta, deben ir entre comillas. Por ejemplo:
<card id="c1" title="t1">
• Para insertar un comentario en el código y que este no aparezca en pantalla al ser interpretado por el navegador, deberemos escribirlo de la siguiente forma:
<!-- Esto es un comentario -->
167
8. WML. Internet para móviles
8.3 Contenidos: texto, tablas e imágenes
Si no se muestran los acentos u otros caracteres especiales correctamente, la solución es escribirlos usando
unos códigos. En algunos casos, dichos códigos coinci-
den con los que ya se vieron anteriormente en HTML
(véase la Unidad 4) aunque otros son totalmente diferentes. (Veáse la Tabla 8.2).
La etiqueta <p> y el ajuste de texto
Código
Símbolo
Código
Símbolo
$$
$
ñ
ñ
©
©
Ñ
Ñ
á
á
Á
Á
é
é
É
É
í
í
Í
Í
ó
ó
Ó
Ó
ú
ú
Ú
Ú
Para evitar posibles problemas de visualización de un
texto en la pantalla de un móvil, WML incorpora la
opción de párrafo wrap (envolver). Ésta se puede usar
como parámetro opcional para decir si se quiere que el
texto aparezca en una sola línea o bien se quiere que
se ajuste automáticamente según el ancho de la pantalla. Para obtener lo primero, se escribirá, dentro de la
etiqueta de apertura de párrafo, mode="nowrap":
<p mode="nowrap">Este texto es largo y a
lo mejor no se verá entero en la pantalla</p>
Tabla 8.2. Algunos caracteres especiales y sus códigos propios en WML.
De esta manera, el texto no se ajustará al ancho de la
pantalla y puede que no se lea la frase entera si no cabe
en una línea del terminal en el que se está visualizando.
Caso práctico
Los formatos y sus efectos
Se pide
Escribir una baraja con una carta y un texto que incluya todos
los formatos de texto vistos anteriormente.
Solución
Paso 1. Se escribe el esquema de una baraja con una carta
(se puede utilizar el ejemplo del Caso práctico 1).
Paso 2. Se escribe un párrafo con los formatos que hay en la
Tabla 8.1. Por ejemplo:
1 <?xml version="1.0"?>
2 <wml>
3 <card id="id1" title="CP2">
<p>Este <b>texto</b> es <big>largo</big> y
4
<em>sirve</em> para <i>probar</i> los
<strong>diferentes</strong> formatos
<u>aplicables</u> a un
<small>texto</small>.</p>
5 </card>
6 </wml>
Paso 4. Sólo queda comprobar el resultado (véase la Figura 8.4).
Este <b>texto</b> es <big>largo</big> y
<em>sirve</em> para <i>probar</i> los
<strong> diferentes</strong> formatos
<u>aplicables</u> a un <small>texto</small>.
Paso 3. Se inserta dicho texto dentro de etiquetas de párrafo
<p></p> y se organiza dentro del esquema de la baraja.
Fig. 8.4. Solución del
Caso práctico 2.
168
8. WML. Internet para móviles
8.3 Contenidos: texto, tablas e imágenes
Para evitarlo, deberemos escribir mode="wrap":
• src="URL_imagen". Indica la URL de la imagen.
<p mode="wrap">Este texto es largo y
seguro, se verá entero en la pantalla</p>
• alt="Texto alternativo". Este texto es de
carácter descriptivo y aparece en pantalla en el
caso de que un dispositivo no pueda mostrar la
imagen. Se trata de un parámetro obligatorio.
El texto se ajustará automáticamente y tendrá tantas
líneas como sean necesarias para mostrar todo el texto.
En la Figura 8.5 se puede observar el resultado de aplicar las opciones wrap y nowrap.
• align="valor". Sirve para fijar la alineación de
la imagen con respecto a la línea base que lleva el
texto. Puede tomar uno de los siguientes valores:
top (arriba), middle (mitad) o bottom (abajo),
siendo este último el valor que adoptará Align
por defecto.
• vspace="n". Indicará la separación vertical de la
imagen en relación con el texto.
• hspace="m". Indicará la separación horizontal de
la imagen en relación con el texto.
• height="n". Sirve para indicar que la imagen
debe tener una altura determinada.
Fig. 8.5. Ejemplo de texto en modo no wrap (izquierda) y
wrap (derecha).
B
Imágenes
Todos los dispositivos móviles tienen pantallas y a
medida que pasa el tiempo, con mayores prestaciones.
Esto ha provocado que cada vez sea más frecuente la
incorporación de imágenes a las páginas WML. Este lenguaje, al igual que HTML, permite usar imágenes para
enriquecer las páginas destinadas a los navegadores
compatibles aunque con evidentes limitaciones.
Por ejemplo, el formato de imagen que reconocen todos
los dispositivos que soportan WML es WBMP (Wireless BitMap, Mapa de bits para dispositivos inalámbricos), un
formato que sólo admite las imágenes en blanco y negro.
Las continuas mejoras en la telefonía móvil están permitiendo el uso de otros formatos como GIF o JPEG, aunque
todavía no son aceptados por muchos dispositivos.
• width="m". Sirve para indicar que la imagen debe
tener un ancho determinado.
Tanto al usar height como width, hay que tener en
cuenta que se puede modificar el aspecto de la imagen
respecto al original. Es posible que la imagen resultante
no esté proporcionada en sus nuevas dimensiones. Por
ello, es importante que cuando se modifique el tamaño
de la misma, haciéndola más grande o más pequeña, se
respeten las proporciones originales.
Conociendo la estructura básica de una baraja y los
parámetros de la etiqueta <img>, es muy sencillo crear
una página con una imagen (véase la Figura 8.6):
1 <?xml version="1.0"?>
2 <wml>
3 <card id="id1" title="ejemplo">
<img src="paloma.wbmp" alt="Paloma"
4
align="middle"/>
Para insertar una imagen, al igual que ocurre en HTML, se
usa la etiqueta <img>. Esta etiqueta no necesita estar
«balanceada» con otra de cierre y bastará con escribir
<img XXX />. Las X, en este caso, son los parámetros
que acompañan a la etiqueta <img> y que se describen
a continuación (sólo los dos primeros son obligatorios):
5 </card>
6 </wml>
En este caso, la URL hace referencia a una imagen
(paloma.wbmp) que se encuentra en la misma carpeta
que el código.
Fig. 8.6. Inserción de una imagen en una página WML.
169
8. WML. Internet para móviles
8.3 Contenidos: texto, tablas e imágenes
Caso práctico
3
Tablas en WML
Se pide
Realizar una tabla de dos filas y dos columnas que contenga nombres
de personas en la primera fila y su edad en la segunda.
Solución
Paso 1. Escribimos el esquema de una baraja con una carta.
Paso 2. Realizamos el código relacionado con la tabla:
1 <table id="tabla1" columns="2" title="Tabla"
align="CCC" border="1">
2 </table>
Paso 3. Definimos dentro de la tabla las dos filas, la primera con los
nombres y la segunda con las edades:
1
2
3
4
5
6
7
8
<tr>
<td>Juan</td>
<td>Lara</td>
</tr>
<tr>
<td>15</td>
<td>17</td>
</tr>
Paso 4. Juntamos todo el código correspondiente a la tabla en la zona
de contenido del esquema de la carta y comprobamos el resultado:
1 <?xml version="1.0"?>
2 <wml>
3 <card id="id1" title="CP3">
<table id="tabla1" columns="2" title="Tabla"
4
C
Tablas
Las tablas son útiles para mostrar datos de forma clara y
estructurada. En WML se pueden hacer tablas sencillas
con las etiquetas <table></table> aunque, a diferencia de HTML, no se admite la anidación de las mismas.
La etiqueta <table> admite los siguientes parámetros:
• columns="n". Sirve para definir el número de
columnas que tendrá la tabla por lo que n debe ser
un número entero y mayor o igual que 1. Se trata
de un parámetro obligatorio.
• title="título". Sirve para especificar el título
de la tabla. Dependiendo del navegador que incorpore el terminal móvil, se representará en pantalla
o no. No es un parámetro obligatorio.
• align="XX...X". Con este parámetro no obligatorio se especifica la alineación de cada columna.
Aquí X es una letra que especifica la alineación de
cada columna —L (left, izquierda), C (center, centrada) o R (right, derecha)— teniendo que haber
tantas letras como columnas tenga la tabla.
• id="identificador". Se utiliza para identificar
la tabla, siendo un parámetro no obligatorio.
En cuanto a lo que es el contenido en sí de la tabla, es
igual que en HTML. Para delimitar las filas de la tabla
se usarán las etiquetas <tr></tr> y, dentro de cada
fila, se delimitarán las celdas con las etiquetas
<td></td>.
Si se quisiera que la tabla tuviera bordes, se tendría que
añadir la opción border al igual que se hace en HTML:
align="CCC" border="1">
<tr>
5
<td>Juan</td>
6
<td>Lara</td>
7
</tr>
8
<tr>
9
<td>15</td>
10
<td>17</td>
11
</tr>
12
13 </table>
14 </card>
15 </wml>
Fig. 8.7. Solución del Caso práctico 3.
170
<table id="tabla1" columns="3"
title="Tabla" align="CCC" border="1">
Así mismo, también se puede añadir cierto color a la
tabla con la opción bgcolor.
<table id="tabla1" columns="3"
title="Tabla" align="CCC" bgcolor="red">
En este caso, habrá que tener en cuenta la legibilidad
del texto ya que el diseño nunca debería impedir la
visualización de la información que se proporciona.
8. WML. Internet para móviles
8.4 Variables, tareas y eventos
8.4 Variables, tareas y eventos
Hasta ahora se ha visto cómo crear una baraja con sus
cartas, enlazar cartas entre sí o con otros sitios web y
cómo enriquecer las páginas creadas mediante la inserción de elementos como textos o imágenes. Sin embargo,
es posible hacer cosas más complejas, como añadir formularios o introducir procesos similares a los scripts.
A Variables
El lenguaje WML permite la utilización de variables,
cadenas de texto a las que se les puede asignar un valor
preestablecido, dejar que el usuario lo defina a través
de la interfaz de un formulario, etc. Tienen diversas utilidades, desde las basadas en formularios (como un
login) a las que permiten dividir el contenido de una
página en varios «pantallazos» (algo extremadamente
útil teniendo en cuenta el tamaño de las pantallas de
los dispositivos inalámbricos).
Creación de variables
Para crear una variable y asignarle un valor se deben
utilizar las etiquetas establecidas para ello en WML y
sus correspondientes parámetros. Éstas son <setvar>,
<input>, <select> y <postfield>. Además, se
debe recordar que las variables son case sensitive (distinguen entre mayúsculas y minúsculas) y su nombre
puede empezar por el guión bajo o una letra, seguida
de una o más letras, números o guiones bajos. Nunca
empezarán por aquellos símbolos susceptibles de ser
utilizados como parte del código (por ejemplo $).
La etiqueta <setvar>
Con <setvar> se crea la variable a la vez que se le
asigna un valor fijo, es decir, es el desarrollador quien
decide que valor darle. Esto es útil algunas veces para
poder inicializar variables que posteriormente se van a
utilizar en un formulario. Por ejemplo, en la siguiente
línea, 12 es el valor de la variable edad.
<setvar name="edad" value="12"/>
se le asigna un valor; posteriormente será el usuario
quien le asigne el valor que debe tener. Por ejemplo, si
se desea crear un campo donde el usuario consigne sus
apellidos (por ejemplo en un login), se puede escribir:
<p>Apellidos: <input name="apellidos"
size="45" format="*X"/></p>
En este ejemplo, se pueden observar ya algunos parámetros que adopta la etiqueta <input>. El primero de
ellos es name, con el que se especifica el nombre de la
variable que recogerá el dato que se introduzca en ese
campo. El siguiente parámetro es size y con él se
especifica el tamaño que se le quiere dar al recuadro en
el cual el usuario tiene que escribir la información. Para
finalizar, está el parámetro format, con el que se espe- Tabla 8.3. Valores
cifica exactamente el formato que debe tener la infor- aceptados por el
mación que introduzca el usuario (véase la Tabla 8.3). parámetro format.
Valor
Significado
A
Carácter alfabético (en mayúsculas) o de puntuación.
a
Carácter alfabético (en minúsculas) o de puntuación.
N
Carácter numérico.
X
Carácter en mayúsculas.
x
Carácter en minúsculas.
M
Cualquier carácter. El navegador puede suponer, por simplicidad, que serán
mayúsculas pero permitirá la entrada de cualquier carácter.
m
Cualquier carácter. El navegador puede suponer, por simplicidad, que serán
minúsculas pero permitirá la entrada de cualquier carácter.
*f
Cualquier número de caracteres, siendo f uno de los formatos vistos anteriormente (A, a, N, etc.). Este formato sólo puede aplicarse una vez y debe aparecer al final de la cadena de formatos.
nf
Un número determinado de caracteres, siendo n un número y f uno de los formatos explicados (salvo *f, ya que no se puede poner n*a, por ejemplo). Este
formato sólo puede aplicarse una vez y debe aparecer al final de la cadena de
formatos.
La etiqueta <input>
La etiqueta <input> se utiliza a menudo en la creación
de formularios. Con ella se declara una variable pero no
Especificar el tipo de formato es útil para que el teléfono sepa cómo reproducir en pantalla la información
introducida por el usuario. Por ejemplo, si se le dice que
171
8. WML. Internet para móviles
8.4 Variables, tareas y eventos
el formato de un campo es numérico, al pulsar una tecla
se escribirá el número correspondiente, mientras que si
es texto, escribirá letras directamente. Así se evita que
el usuario tenga que estar cambiando el formato en el
que está escribiendo ya que es el propio terminal el que
lo interpreta y lo cambia automáticamente según
corresponda. En cualquier caso, a veces la captura del
formato no da los resultados esperados debido a que
algunos navegadores no implementan estrictamente el
estándar.
Los tres parámetros vistos anteriormente son los más
utilizados ya que permiten crear formularios tradicionales como el que se muestra a continuación.
1 <?xml version="1.0"?>
2 <wml>
3 <card id="id1" title="Ejemplo">
<p>
4
Nombre: <input name="nombre"
5
size="25"/>
<br/>
Apellidos: <input name="apellidos"
size="45" format="*X"/>
<br/>
8
Edad: <input name="edad" size="15"
9
format="3N"/>
<br/>
10
11 </p>
12 </card>
13 </wml>
6
7
Con este, sencillamente, se pediría al usuario el nombre, los apellidos y la edad (esta última debería estar en
formato numérico y con un máximo de tres números).
Por supuesto, también hay otro tipo de opciones de
format más avanzadas. Por ejemplo, ¿cómo se haría
para decir que un campo no puede quedar vacío? ¿O
cómo sería si se quiere acotar la longitud del texto?
Algunas de las opciones avanzadas de la etiqueta
<input> son:
• emptyok. Este parámetro sólo puede tomar los
valores true o false. El primero indica que la
entrada puede quedar vacía (aunque se le especifique un formato). Por defecto, cualquier format es
emptyok=false, es decir, no se puede dejar
vacío.
172
• maxlength. Indica el número máximo de caracteres permitidos en la entrada de texto. La diferencia
entre maxlength y size es que con el primero se
está limitando la cantidad de texto que se puede
introducir en un cuadro, mientras que con el
segundo se puede introducir el texto que se quiera
aunque sea más largo que el cuadro.
• type="password". Sirve para que aparezcan
asteriscos en el recuadro en vez de lo que está
escribiendo el usuario, evitando así que otras personas puedan averiguar que es lo que se está introduciendo en el formulario. Como su propio nombre
indica, es especialmente útil a la hora de pedir la
introducción de una contraseña.
La etiqueta <select>
Con esta etiqueta, al igual que la anterior, también se
puede asignar un valor a una variable. La diferencia está
en que con <select> se le ofrece al usuario la lista de
posibles valores que se quieren capturar. Por ejemplo,
en el código que viene a continuación, se puede ver
como en la variable alumno se almacenará Pepe o Juana
dependiendo de lo que seleccione el usuario de la lista
conformada por las opciones José García y Juana Díaz.
1 <select name="alumno">
<option value="Pepe">José García
2
</option>
3
<option value="Juana">Juana Díaz
4
</option>
5
6 </select>
Como se puede observar en este ejemplo, la variable
<select> va acompañada por otras etiquetas como
son <option></option>. Es decir, con la variable
<select> definimos la ventana desplegable o lista de
items entre los que deberá elegir el usuario. Dichas
opciones vienen marcadas por <option>, a la que
además se la ha añadido un valor. Aunque el usuario vea
una lista compuesta por las opciones José García y
Juana Díaz, en realidad estará escogiendo entre los
valores Pepe y Juana.
Además, es importante darse cuenta de que mientras que
con las otras variables no era necesaria la etiqueta de
cierre, con <select> sí. En este caso, </select> irá
al final del conjunto de opciones que se han definido.
8. WML. Internet para móviles
8.4 Variables, tareas y eventos
La etiqueta <postfield>
Esta etiqueta contiene información que se quiere exportar a un servidor. Por ejemplo, si se quiere enviar una
variable <input> a un servidor PHP para generar una
página WML dinámica, es necesario identificar previamente dicha variable ante el servidor. Es decir, es necesario hacerla «visible» antes de exportarla. Se utiliza
con la etiqueta <go> y su sintaxis sería, por ejemplo:
Tal y como se ha hecho hasta ahora, lo primero ha sido
declarar las dos cartas: carta1 y carta2. En la primera de
ellas se ha definido una variable de nombre alumno así
como las opciones que verá el usuario. Si éste elige José
García, por ejemplo, la variable <select> almacenará
el valor Pepe (y no José García). Para que dicho valor
aparezca en la segunda página, es necesario declarar el
enlace entre ambas cartas mediante la instrucción:
<p><a href="#carta2">Mostrar</a></p>
1 <go method="post" href= "http://prue
bas/alumno.php">
<postfield name="nombre"
value="Juan"/>
3 </go>
2
Aunque la etiqueta <go> se explicará más adelante, en
este ejemplo ya se puede observar que se ha indicado a
la página señalada por el enlace, que el valor de nombre es Juan.
Referenciar variables
Ya se ha visto cómo crear variables pero ¿cómo se las
puede llamar una vez declaradas e inicializadas? Para
referenciar variables en WML se pueden usar dos métodos. Si no existe ambigüedad de ningún tipo con el
nombre de una variable en un contexto, se puede usar
$variable. Si existiese dicha ambigüedad, se debería
utilizar $(variable) para así descartar cualquier confusión.
Veamos el siguiente ejemplo (el resultado puede verse
en las Figuras 8.8 a y b):
1 <?xml version="1.0"?>
2 <wml>
3 <card id="carta1">
<select name="alumno">
4
<option value="Pepe">José García
5
</option>
6
<option value="Juana">Juana Díaz
7
</option>
8
</select>
9
10 <p><a href="#carta2">Mostrar</a></p>
11 </card>
12 <card id="carta2">
13 <p>Ha seleccionado: $(alumno)</p>
14 </card>
15 </wml>
Posteriormente, bastará con incluir en el contenido de
esta segunda carta la referencia a la variable:
<p>Ha seleccionado: $(alumno)</p>
B
Fig. 8.8a. El usuario escoge la opción
José García, almacenándose el valor
Pepe en la variable.
Tareas
Las tareas se definen mediante etiquetas que permiten
especificar acciones que deben ser realizadas: ir atrás,
refrescar la página, etc. Para ejecutar estas tareas, es
necesario asociarlas a un elemento <do>, el cual englobará la declaración de la tarea permitiendo programar
las acciones que puede seleccionar el usuario en una
carta. La estructura que tendrá será:
1 <do>
Tarea
2 </do>
La representación del elemento <do> depende del navegador que utilice el usuario pero siempre se mostrará
como un único elemento que el usuario puede activar.
Esta representación podrá ser un botón, una tecla de
función o cualquier otro elemento que el terminal móvil
implemente para interactuar con el usuario a través de
la interfaz. Cuando el usuario active el <do> a través de
esa representación, la tarea asociada será ejecutada.
Fig. 8.8b. El valor
almacenado en la
variable se muestra
en una segunda
carta.
Parámetros
La etiqueta <do>, como otras vistas anteriormente,
admite parámetros que definen su comportamiento.
Dichos parámetros son:
• type. Especifica la acción que debe ejecutarse de
acuerdo a unos valores determinados. Lo normal es
usar type="accept" para modelar el comportamiento deseado ya que es la tarea que suelen traer
173
8. WML. Internet para móviles
8.4 Variables, tareas y eventos
Caso práctico
4
Realización de un formulario en WML
Se pide
Realizar un formulario que solicite el nombre de usuario y una clave de cuatro dígitos. Dichos datos serán mostrados en una
segunda carta, accesible a través de un enlace situado en la primera carta.
Solución
Paso 1. Escribimos el esquema de una baraja con dos cartas.
Paso 2. Definimos el campo usuario e insertamos un retorno de carro para forzar el salto de línea y evitar que, en pantalla, lo que viene
a continuación aparezca justo al final del cuadro del formulario.
1 Usuario: <input type="text" name="usuario"/>
2 <br/>
Paso 3. Definimos el campo clave. Su formato será numérico y su tamaño máximo será de cuatro caracteres.
1 Clave: <input type="text" name="clave" format="4N"/>
2 <br/>
Paso 4. Para terminar con la primera carta, sólo nos queda poner el enlace a la carta 2.
<a href="#identificador2">Mostrar datos</a>
Paso 5. En la carta 2 sólo mostraremos los datos introducidos en el formulario. Para ello, usaremos la sintáxis $nombre_variable.
1 <p>Usuario: $usuario
2 <br/>
3 Clave: $clave</p>
Paso 6. Ahora sólo queda copiar el código dentro del esquema y comprobar el resultado (véase la Figura 8.9).
1 <?xml version="1.0"?>
2 <wml>
3 <card id="identificador1" title="CP4">
4 Usuario: <input type="text" name="usuario"/>
5 <br/>
6 Clave: <input type="text" name="clave" format="4N"/>
7 <br/>
8 <a href="#identificador2">Mostrar datos</a>
9 </card>
10 <card id="identificador2" title="CP4">
11 <p>Usuario: $usuario
12 <br/>
13 Clave: $clave</p>
Fig. 8.9. Solución del Caso práctico 4. A la izquierda, el
formulario de la primera carta; a la derecha, la segunda
14 </card>
carta muestra los valores de las variables.
15 </wml>
174
8. WML. Internet para móviles
8.4 Variables, tareas y eventos
todos los navegadores móviles implementada. El
resto de parámetros es parte del estándar pero no
siempre funcionan (véase la Tabla 8.4).
• name. Sirve para especificar el nombre que se dará
al identificador del <do>. Hay que tener en cuenta
que no se debe dar el mismo nombre a dos <do>
distintos dentro de la misma carta.
• label. Especifica el texto que debe aparecer en la
pantalla para simbolizar ese <do>. Normalmente
será un botón con dicho texto escrito.
Significado
Valor
accept
• <refresh/>. Recarga o actualiza los contenidos
visibles del navegador. Lo dicho anteriormente para
<prev> en cuanto al orden de procesamiento de
variables es válido aquí. Primero se evalúa la variable
y luego se recarga la página. Un ejemplo de esta
tarea sería:
1 <?xml version="1.0"?>
2 <wml>
3 <card id="carta1" title="Ejemplo">
4 <p>Nombre= $Alumno</p>
5 <do type="accept" label="Recargar">
<refresh>
6
<setvar name="Alumno"
7
value="Pepe"/>
Acepta y ejecuta la acción del <do>.
prev
Va hacia atrás en el historial del navegador.
help
Realiza una petición de ayuda.
reset
Limpia el estado.
options
Realiza una petición de opciones adicionales.
delete
Borra un elemento o elección.
unknown
Indica que es un <do> genérico.
Tabla 8.4. Valores aceptados por el parámetro type.
Tipos de tareas
WML posee diversas etiquetas para definir las tareas que
irán encuadradas dentro del <do>:
• <noop/>. Indica que no se debe hacer nada. Se
utiliza para desactivar eventos en la baraja.
• <prev/>. Provoca el retroceso a la URL anterior.
Es el equivalente a cuando en un navegador web
estándar se pulsa el botón de «ir atrás». Si dentro
de <prev> hay un elemento <setvar>, éste se
evalúa antes de volver a la URL anterior. Esto puede
servir para saber, por ejemplo, la página desde la
cual se ha retrocedido.
1 <do type="accept" label="retroceder">
2 <prev>
3 <setvar name="vengoDe"
value="aquí"/></prev>
4 </do>
En este ejemplo, al pulsar el botón retroceder se
almacena el valor aquí en la variable vengoDe. Posteriormente, se cargará la página anterior.
</refresh>
8
9 </do>
10 </card>
11 </wml>
La referencia a la variable Alumno aparecerá vacía
hasta que el usuario ejecute el <do> a través del
botón Recargar. Entonces se almacenará el valor
Pepe y se actualizará la página.
• <go>. Sirve para ir a otra URL u otra carta. Las
variables se procesan antes de ejecutarse la tarea
propiamente dicha. Se usa, por ejemplo, para pasar
parámetros de una página a otra utilizando un
botón en la interfaz del móvil en vez de un enlace.
Esto se puede ver en el siguiente ejemplo:
1 <?xml version="1.0"?>
2 <wml>
3 <card id="carta1" title="Ejemplo">
4 <p> Carta 1</p>
5 <do type="accept" label="Ir">
<go href="#carta2"/>
6
7 </do>
8 </card>
9 <card id="carta2" title="Ejemplo">
10 <p>Carta 2</p>
11 </card>
12 </wml>
C
Eventos
En WML, es posible declarar acciones que deben ser realizadas bajo determinadas circunstancias a través de
una serie de etiquetas especiales. Por ejemplo, con la
etiqueta ontimer declararemos que la acción o evento
175
8. WML. Internet para móviles
8.4 Variables, tareas y eventos
que expresa debe esperar a que pase cierto tiempo
desde que se cargó la página.
Existen dos métodos de declarar estos eventos. La primera forma consiste en introducir dentro de la etiqueta
<card> el evento en cuestión, dependiendo su valor de
lo que haga en concreto. La segunda consiste en declarar
dentro del cuerpo de una carta, una etiqueta <onevent>
que llevará como parámetro el tipo de evento que captura.
Dentro del cuerpo de <onevent>, se especificará el comportamiento completo del evento. A continuación se
verán los tipos de eventos y ejemplos de las dos formas
de declaración posibles.
El evento ontimer
Ejecuta una acción tras un tiempo determinado. Dicho
tiempo se indica con la etiqueta <timer value="n"/>
Caso práctico
5
Mecanismos de navegación
Se pide
Realizar una baraja con dos cartas de tal manera que usando las tareas <go> y <prev>, desde una se vaya a la otra y viceversa.
Solución
Paso 1. Escribimos el esquema de una baraja con dos cartas.
Paso 2. Creamos la tarea que servirá para ir de la primera carta a la segunda. Para ello se usará <go>.
1 <do type="accept" label="Ir Carta 2">
<go href="#carta2"/>
2
3 </do>
Paso 3. Para ir de la carta 2 a la carta 1, se usará la tarea <prev> ya que sólo se llegará a la segunda carta viniendo desde la primera.
1 <do type="accept" label="Atrás">
<prev/>
2
3 </do>
Paso 4. Se ordena dentro de la baraja el código generado y se comprueba el resultado (véase la Figura 8.10).
1 <?xml version="1.0"?>
2 <wml>
3 <card id="carta1" title="CP5">
<do type="accept" label="Ir Carta
4
<go href="#carta2"/>
5
</do>
6
7 </card>
8 <card id="carta2" title="CP5">
<do type="accept" label="Atrás">
9
<prev/>
10
11 </do>
12 </card>
13 </wml>
176
2">
Fig. 8.10. Solución del Caso práctico 5. A la
izquierda, la primera carta con el enlace para
ir a la segunda; a la derecha, la segunda
carta con el enlace para retroceder.
8. WML. Internet para móviles
8.4 Variables, tareas y eventos
en la que n es un número que indica la cantidad de
tiempo en décimas de segundos. En el siguiente ejemplo, el evento ha sido incluido dentro de la etiqueta
<card> y se le ha definido para que al pasar 5 segundos, cargue la carta 2.
1 <?xml version="1.0"?>
2 <wml>
3 <card id="carta1" ontimer="#carta2"
title="Saltamos">
<timer value="50"/>
4
<p>Tras 5 seg. pasamos a carta 2</p>
5
6 </card>
7 <card id="carta2" title="Salto">
<p>Carta 2, hemos llegado.</p>
8
9 </card>
10 </wml>
El evento onenterforward
Este evento se ejecuta cuando el usuario carga una
carta mediante un enlace con una tarea <go> asociada
o un método equivalente (teclear la URL de la carta o
ejecutar un script).
1 <?xml version="1.0"?>
2 <wml>
3 <card id="carta1" title="carta 1">
<p>Carta 1</p>
4
<do type="accept" label="ir">
5
<go href="#carta2"/>
6
</do>
7
8 </card>
9 <card id="carta2" title="carta 2">
10 <p>Carta 2</p>
11 <onevent type="onenterforward">
<go href="#carta3"/>
12
13 </onevent>
14 </card>
15 <card id="carta3" title="carta 3">
16 <p>Carta 3</p>
17 </card>
18 </wml>
En este ejemplo, en la carta1 aparece un enlace a la
carta 2. Al pulsarse, se cargará ésta pero antes de poder
ser visualizada, se ejecutará el onenterforward, el
cual redirigirá al usuario hacia la carta3. Es decir, el
usuario nunca llegará a ver el contenido de la carta2
pues, aparentemente, pasará desde la carta1 a la carta3.
El evento onenterbackward
Es igual al evento onenterforward pero yendo hacia
atrás en el historial del navegador. En vez de usar una
tarea <go> utiliza la tarea <prev>. Muchos de los
navegadores WAP no lo tienen bien implementado.
El evento onpick
Este evento se activa cuando el usuario selecciona, por
ejemplo, un elemento de una lista. Es el caso del
siguiente código, cuyo resultado se muestra en las
Figuras 8.11 a y b.
1 <?xml version="1.0"?>
2 <wml>
3 <card id="rojo" title="Rojo onpick">
<select>
4
<option>Rojo
5
<onevent type="onpick">
6
<go href="#rojo" />
7
</onevent>
8
</option>
9
<option>Verde
10
<onevent type="onpick">
11
<go href="#verde" />
12
</onevent>
13
</option>
14
15 </select>
16 </card>
17 <card id="verde" title="Verde onpick">
18 <select>
<option>Rojo
19
<onevent type="onpick">
20
<go href="#rojo" />
21
</onevent>
22
</option>
23
<option>Verde
24
<onevent type="onpick">
25
<go href="#verde" />
26
</onevent>
27
28 </select>
29 </card>
30 </wml>
Si el navegador implementase la selección como una lista
desplegable, debería añadirse una primera opción meramente informativa (por ejemplo, Seleccione color...). Si
no, el primer elemento de la lista vendría seleccionado
por defecto y no se ejecutaría el onpick.
Fig. 8.11 a. El
usuario puede elegir entre dos
opciones (rojo y
verde) en la carta
Rojo onpick. El
usuario elige la
opción verde.
Fig. 8.11 b. Se
carga la carta
Verde onpick que
presenta de nuevo
las dos opciones.
177
8. WML. Internet para móviles
Práctica final
Práctica final. Desarrollo de un portal en WML
Se pretende adaptar a lenguaje WML parte del portal de información personal que se realizó en la Unidad 4, de tal manera
que el usuario tenga la posibilidad de consultar a través del
móvil cierta información que le resulte útil. Las páginas que se
han elegido en esta ocasión corresponden a aquellas que se
ajustan mejor a las características de diseño vistas en esta Unidad como son el tamaño reducido de pantalla o el pago por
información recibida. Por ello, las páginas que nosotros vamos
a «verter» a código WML serán:
• Agenda de teléfonos. En este menú el usuario podrá ver
la lista de todos sus contactos telefónicos. Dicha información se imprimirá en pantalla con un formato especial que
consistirá en poner en una línea, primero los apellidos y
luego el nombre y, a partir de la línea inmediatamente
inferior, todos los teléfonos de esa persona, indicando si
se trata del teléfono fijo o del móvil.
• Agenda de direcciones. En este menú, el usuario podrá
ver aquellas direcciones que quiere recordar o le pueden
resultar de utilidad. El formato será parecido al seguido en
el caso del listín telefónico: aparecerá el nombre de la persona y debajo, la dirección.
Consideraciones iniciales
Lo primero que hay que hacer tras desarrollar el planteamiento,
es pensar en el número de cartas y barajas que van a hacer
falta. Esto dependerá del enfoque que se le dé al problema y,
por ello, habrá soluciones diferentes a la que aquí se dará. Eso
no significa que estén mal; sólo serán otras posibles soluciones.
En primer lugar, hay que tener en cuenta que, en principio, no
se está planteando una relación directa entre las personas
incluidas en el listín telefónico y las incluidas en la libreta de
direcciones. Pueden tratarse de personas totalmente distintas
y sin relación entre ellas. Si se decidiese juntar toda la información, se crearía una página wml sumamente compleja en la
que el código acabaría sepultado entre toda la información
incluida. Por ello, las dos agendas se generarán por separado,
es decir, en dos barajas distintas.
Además, hay que tener en cuenta que no sólo se busca tener
dos páginas wml inconexas, sino que lo que se desea es tener
un sitio web, accesible desde una terminal. Por ello, será necesario dar cierta estructura al sitio.
178
Para ello se creará un menú que sirva para acceder bien a la
agenda de telefónos, bien a la de direcciones. Para acceder a
dicho menú, el usuario debe introducir previamente su nombre
de usuario y la contraseña. Dado que WML no es un lenguaje de
servidor como PHP o ASP, sólo se simulará dicho login: tras
introducir los datos y enviarlos, se llegará a una carta en la que
no se hará nada más que esperar cierto tiempo y pasar a la del
menú.
Su diseño debe ser sobrio en el sentido de que, como se ha
mencionado, se paga por Kilobyte transferido y, por tanto, se
deben hacer páginas ligeras. Esto quiere decir que no se utilizarán los iconos empleados en el portal HTML o cualquier otro
efecto DHTML. La versión WML del portal tiene una finalidad
eminentemente práctica por lo que se debe reducir cualquier
elemento innecesario. Es por ello que el menú será muy simple
y sólo tendrá dos enlaces, uno por cada agenda a la que queremos acceder.
Queda por decidir cómo se ordenará la información dentro de
cada agenda. En este caso, se ha decidido por crear un nuevo
menú que ofrezca al usuario la posibilidad de elegir la letra por
la que comienza el nombre de la persona cuyo número de teléfono o dirección está buscando. Es decir, si en el menú de la
agenda de direcciones se pulsa sobre la A, se accederá a la
baraja direccionesA.wml. En ella se encontrarán todos los
datos de las personas cuyo nombre comience por la letra A.
En definitiva, el esquema del portal wml es el siguiente:
index.wml
telefonos.wml
direcciones.wml
telefonosA.wml
direccionesA.wml
telefonosB.wml
direccionesB.wml
telefonosC.wml
direccionesC.wml
telefonosD.wml
direccionesD.wml
Fig. 8.12. Flujo de navegación a través del portal wml.
8. WML. Internet para móviles
Práctica final
Desarrollo de un portal en WML (continuación)
Login de inicio
ontimer con el que, durante 3 segundos, mostraremos el
mensaje Comprobando credenciales... antes de pasar a la
tercera carta.
Esta baraja tendrá tres cartas:
1) En la primera se pedirán los datos del login. Para ello crearemos, mediante la etiqueta <input>, un pequeño formulario con dos campos. El segundo será numérico y ocultará la contraseña de «miradas ajenas».
2) La segunda no hará nada pero servirá para simular el proceso de autenticación. Para ello introduciremos un evento
3) La tercera carta será un simple menú con los enlaces a las
barajas del listín telefónico y la agenda de direcciones.
El código correspondiente es el que se detalla a continuación;
el aspecto de los menús durante todo el proceso se puede
observar en la Figura 8.13.
Código del login de inicio
1 <?xml version="1.0"?>
2 <wml>
3 <card id="login" title="Bienvenido">
<p>
4
Nombre: <input name="nombre" size="10"/>
5
<br/>
6
PIN: <input name="pin" size="4" format="4N" type="password"/>
7
<br/>
8
<a href="#checklogin">Aceptar</a>
9
10 </p>
11 </card>
12 <card id="checklogin" title="Procesando...">
13 <timer value="30"/>
14 <p>Comprobando credenciales...</p>
15 <onevent type="ontimer">
<go href="#menu"/>
16
17 </onevent>
18 </card>
19 <card id="menu" title="Menú">
20 <p>
1.- <a href="telefonos.wml">Teléfonos</a>
21
<br/>
22
2.- <a href="direcciones.wml">Direcciones</a>
23
24 </p>
25 </card>
26 </wml>
3
Fig. 8.13. Visualización del proceso del login de inicio.
1
Al acceder a la página,
se nos pide el nombre y
la contraseña.
2
La página simula el proceso de verificación y
conexión.
179
8. WML. Internet para móviles
Práctica final
Desarrollo de un portal en WML (continuación)
Teléfonos y direcciones
El desarrollo de las páginas con las agendas de teléfonos y
direcciones es muy similar, por lo que aquí sólo escribiremos el
código de la primera. Una vez realizado, simplemente habrá que
cambiar la información de los números de teléfono por la de las
direcciones ya que la estructura interna del documento será la
misma.
Esta sección cuenta con numerosas barajas ya que se ha optado
por diferenciar alfabéticamente los contactos, incluyéndolos en
distintas páginas wml según por qué letra comience su nombre. Para acceder a cada una de estas barajas se utilizará un
menú inicial con un listado de enlaces.
Las barajas que almacenarán los contactos serán muy simples
ya que sólo contarán con un conjunto de tablas con diferentes
filas y dos columas. En la primera fila de cada tabla irá el nombre y apellidos de la persona; a continuación, en filas diferen-
tes, se irán mostrando los números de teléfono que posea, indicándose en cada caso si se trata de un teléfono móvil o uno
fijo. Si una persona sólo posee teléfono fijo, su tabla sólo llevará dos filas (la del nombre y el número de teléfono); si posee
tres teléfonos, tendrá cuatro filas, etcétera.
La ventaja de este sistema es que añadir contactos es sumamente fácil. Simplemente se deberá abrir la baraja deseada y
copiar la estructura básica de una tabla cambiando los datos.
Si lo que se quiere es añadir un nuevo número a un contacto ya
existente, se localizará su tabla y se añadirá una nueva fila.
Finalmente, será necesario distinguir visualmente cada entrada,
facilitando al usuario la tarea de buscar los contactos en la
pantalla del móvil. Por ello, se utilizará una alternancia de
colores: la primera tabla será gris, la segunda blanca, la tercera
gris, etc. Este método es muy sencillo y no necesita grandes
recursos pero a la vez, es muy útil, haciendo la presentación de
la información en un terminal móvil mucho más clara.
Menú alfabético
1
2
3
4
5
6
7
8
9
10
<?xml version="1.0"?>
<wml>
<card id="tfno" title="Agenda telefónica A-Z">
<p>
<!-- En telefonoA.wml estarán todos los teléfonos de las personas cuyo apellido comience por A.
Para añadir las otras letras, sólo hay que ir repitiendo la misma instrucción. -->
<a
<a
<a
<a
href="telefonosA.wml">A</a>
href="telefonosB.wml">B</a>
href="telefonosC.wml">C</a>
href="telefonosD.wml">D</a></p>
11 <!-- Otra fórmula posible hubiese sido crear barajas por grupos de letras. Es
decir, telefonosABC.wml contendría todos los contactos cuyos apellidos comenzasen por la A, la B o la C. Aunque así evitaríamos tener numerosas barajas,
seguiría dificultando la labor de búsqueda-->
12 <p><a href="inicio.wml#menu">Menú</a></p>
13 </card>
14 </wml>
Fig. 8.14. Vista del menú de la
agenda telefónica.
180
8. WML. Internet para móviles
Práctica final
Desarrollo de un portal en WML (continuación)
Agenda de teléfonos
1 <?xml version="1.0"?>
2 <wml>
3 <card id="tfno" title="Agenda telefónica">
4 <!-- Aquí definiremos la primera tabla. Mediante el atributo bgcolor podremos ir variando el
5 color de cada entrada, de gris a blanco, lo que nos ayudará a distinguir cada uno de nuestros
6 contactos-->
7 <table columns="2" align="LC" bgcolor="gray">
<tr>
8
<td>Aller,</td>
9
<td>Juan</td>
10
</tr>
11
<tr>
12
<td>Fijo:</td>
13
<td>123456789</td>
14
</tr>
15
<tr>
16
<td>Móvil:</td>
17
<td>987654321</td>
18
</tr>
19
20 </table>
21 <!-- Cada vez que quisiéramos añadir un nuevo contacto a nuestra agenda, deberíamos copiar la
tabla precedente, «pegarla» a continuación y cambiar los datos. También sería necesario ir cambiando el atributo bgcolor de la tabla para así conservar la alternancia de colores deseada.-->
22 <table columns="2" align="LC" bgcolor="white">
<tr>
23
<td>Ares,</td>
24
<td>Pepe</td>
25
</tr>
26
<tr>
27
<td>Fijo:</td>
28
<td>234567891</td>
29
</tr>
30
<tr>
31
<td>Móvil:</td>
32
<td>198765432</td>
33
</tr>
34
35 </table>
36 <p><a href="inicio.wml#menu">Menú</a></p>
37 </card>
38 </wml>
Fig. 8.15. Vista de la tabla
sin orden alfabético.
181
8. WML. Internet para móviles
Actividades
Actividades
1
Busca información sobre las posibilidades que ofrecen las distintas operadoras de telefonía móvil para
la transmisión de datos (precios, bonos, tarifas planas, velocidades, etc.).
2
Busca el plugin o extensión que necesita el navegador Firefox para poder visualizar páginas WML.
Instálalo y comprueba cómo se ven en él las páginas WML que has hecho.
3
¿Cómo se llama el «traductor» que incorporan
algunos sitios para que las páginas estén disponibles para dispositivos WAP sin necesidad de que
el desarrollador se preocupe por ello?
4
¿Qué recomendaciones hay que tener en cuenta a la
hora de realizar páginas para un dispositivo móvil?
5
¿En qué lenguaje está basado WML?
6
En los documentos WML, ¿tienen que estar todas
las cartas en la misma baraja? Justifica tu respuesta.
7
¿Qué implica que una etiqueta termine con />?
8
¿Cuándo es conveniente utilizar el atributo wrap
en los párrafos?
9
¿Qué símbolo hay que poner dentro de la etiqueta
<a href> cuando se quiere realizar un enlace
entre cartas de una misma baraja?
10 ¿Qué tendrías que añadir en un documento WML para
enlazar una carta con la baraja ejemplo.wml?
11 ¿Cómo habría que escribir la frase «El murciélago
hindú comía caña y kiwi» en un documento WML?
12 ¿Por qué es recomendable no introducir muchas
imágenes en una carta WML?
182
13 ¿Qué puede ocurrir si utilizamos los atributos
height y width al introducir una imagen en una
web WML?
14 Busca en Internet conversores de formato BMP a
WBMP, librerías WBMP y utilidades para trabajar con
este formato.
15 ¿Cuáles de los siguientes nombres de variables son
válidos en WML?
Variable
Validez
USUARIO_nombre
_USUARIO_nombre
2_Usuarios
usuario_ok
16 ¿Se podrían recoger los siguientes datos con los
formatos definidos a continuación?
Dato
123
pepe
Juan 2
Juan
123
5J
Formato
Sí/No
N
*f
10M
10x
3N
NX
17 Si declaramos en una carta una variable con
setvar, ¿sería visible dicha variable en otra
baraja a la que se llegue a través de un enlace? ¿Y
en una carta que esté en la misma baraja?
8. WML. Internet para móviles
Prácticas
Prácticas
1
Crea una baraja en la que se introduzca la imagen
paloma.wbmp utilizando primero el atributo
width, después el height, después vspace y
por último hspace. Compara los resultados con el
de la Figura 8.6 y su código correspondiente e
indica qué ha cambiado.
2
Realiza un formulario en el que se pida a los usuarios su nombre, teléfono y afición favorita, de forma
que ninguno pueda dejarse en blanco. Usa los formatos correspondientes y los limitadores de longitud de campo y haz que los datos introducidos se
muestren en otra carta en la que diga:
6
Diseña un documento WML que simule un contador
hacia atrás. Lo primero que debe ver el usuario es
el siguiente mensaje: «Este mensaje se autodestruirá
en… 5 segundos». Posteriormente se irá actualizando dicho mensaje para poner, en lugar de 5, los
diferentes decrementos de 4, 3, 2 y 1. Finalmente,
se mostrará una imagen que simbolice la destrucción del documento.
7
Realiza una página WML que contenga una tabla
con tres filas y tres columnas con las siguientes
características:
"
"Eres NOMBRE y podemos llamarte al TELÉFONO si nos
gusta HOBBY como a ti".
Nombre, teléfono y hobby serán sustituidos por los
valores proporcionados por el usuario.
3
Escribe una carta en la que aparezca «Edad» y
debajo una lista con tres opciones: «menor de 18
años» (<18), «18 años» (=18) y «mayor de 18
años» (>18). Desde esa carta se debe acceder a otra
en la que aparezca el resultado de la selección:
«Bienvenido, eres menor de 18 años», «Bienvenido, eres mayor de 18 años» o «Bienvenido, tienes
18 años» según corresponda.
4
Haz una baraja con un mínimo de cinco cartas en la
que se pase de una carta a otra de forma automática. En cada carta debe aparecer al menos una
palabra en la que se apliquen los formatos de texto.
5
Realiza una baraja en la que en la primera carta
aparezca la frase «Cuando pulses el botón verás los
colores del arco iris». Dicha página debe contener
un botón que lleve a otra carta en la que aparezca
escrito el nombre de un color. De ahí debe saltar
automáticamente a otra página con otro color
escrito y así sucesivamente hasta completar los
siete colores del arco iris.
"
"
El color de fondo de la primera fila será rojo. Además, en
cada una de las celdas de la fila aparecerá la palabra
«Rojo».
El color de fondo de la primera fila será amarillo. Además, en cada una de las celdas de la fila aparecerá la
palabra «Amarillo».
En la tercera fila, la primera celda tendrá un fondo verde
y, escrito, «Verde». La segunda celda tendrá un fondo
azul y, escrito, «Azul». La tercera celda tendrá un fondo
naranja y, escrito, «Naranja».
El título de la baraja será «Tabla coloreada» y debe
tener borde.
8
Realiza una página WML que contenga un formulario que recoja la siguiente información del usuario:
nombre de pila, edad, color preferido y signo del
zodiaco. Además, el campo correspondiente al
signo del zodiaco será una lista de opciones (aries,
tauro, géminis, cáncer, leo, virgo, libra, escorpio,
sagitario, capricornio, acuario y piscis). Una vez
que el usuario haya introducido dicha información,
se le debe mostrar en pantalla la misma según la
siguiente plantilla:
«Hola, NOMBRE. Sabemos que tienes EDAD años, eres
ZODIACO y que tu color preferido es COLOR.»
183