WML - Amazon Web Servicesspain-s3-mhe-prod.s3-website-eu-west-1.amazonaws.com/bcv/... · 2017. 11....

WMLInternet para móviles

En esta Unidadaprenderás a:

• Descubrir las limitaciones delos dispositivos WAP.

• Conocer la estructura que tieneun documento WML.

• Construir instrucciones en WML.

• Diseñar páginas WML.

• Incluir imágenes y formulariosen las páginas WML.

• Añadir eventos a las páginas WML.

8

163

En 1997, tres compañías de telefonía móvil –Motorola,Nokia y Ericsson– y otra de software –Phone.com– cre-aron una empresa llamada WAP Forum. Ésta debía desa-rrollar y poner en marcha el llamado WAP (Wireless Apli-cation Protocol), un conjunto o pila de protocolos paradispositivos inalámbricos como los teléfonos móviles olas PDA. En el año 2000, el WAP Forum se convirtió enOpen Mobile Alliance y agrupaba ya a más de 300empresas del sector de las telecomunicaciones. Losesfuerzos combinados de éstas permitieron la mejora dela antigua tecnología GSM, añadiéndole un nuevo sub-sistema de conmutación de paquetes por radio (GPRS)que posibilitaba la transmisión eficiente de datos. Inter-net 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 dispo-sitivo inalámbrico, ya sea un móvil o una PDA, noquiere decir que el usuario pueda navegar por la redcomo si utilizase el ordenador de su casa. Un móvil noes un ordenador ni viceversa. Existen una serie de cues-tiones que hay que tener en cuenta en este sentido:

• Movilidad. Con un dispositivo WAP, el usuario sepuede conectar independientemente del lugar dondese encuentre. Como contrapartida, el pequeñotamaño de estos dispositivos hace imposible inte-grar en ellos potentes procesadores, cargarlos delúltimo software o acoplarles una gran pantalla.

• Velocidad. En teoría, GPRS permite alcanzar unavelocidad de transmisión de datos de hasta 144Kbps (kilobits por segundo). En la práctica, ésta sereduce a entre 18 y 53 Kbps en sentido descen-dente (red-terminal) y entre 9 y 13 Kbps en sentidoascendente (terminal-red). Es decir, su velocidad escomparable a la de una línea fija de 56k, aceptablepero insuficiente si se compara con las conexionesde banda ancha existentes en la actualidad.

• Tarificación por volumen. Con GPRS se paga segúnla cantidad de bytes transferidos, no según la dura-ción de la llamada. La información puede mante-nerse en pantalla el tiempo que sea necesario sin

coste añadido. Sin embargo, la conexión desdeteléfonos móviles no suele ser muy habitual entreconsumidores particulares y el precio de dicho trá-fico puede resultar elevado a pesar de los bonos yofertas de las compañías de telefonía móvil.

Estas características implican una serie de diferenciasimportantes entre las tecnologías web tradicionales ylas adaptadas al mundo inalámbrico. Los móviles y PDA,por ejemplo, no utilizan el protocolo http sino el pro-tocolo WAP, no hablan HTML sino WML. Tanto WAPcomo WML son en realidad versiones reducidas de sus«hermanas» de la web y adaptadas a los microprocesa-dores y micronavegadores insertados en el pequeño espa-cio físico y de memoria que poseen estos dispositivos.

Para que los dos mundos puedan «hablar» entre sí, hasido necesario implementar una tecnología de red quetraduzca las comunicaciones entre ambos. Al dispositivoque permite dicha comunicación se le llama gateway opasarela. Si un sitio web quiere que sus contenidosHTML sean visibles para los móviles, debe recurrir a unapasarela que traduzca sus páginas a WML (véase laFigura 8.1).

Por desgracia, este tipo de tecnología no es fiable total-mente. A veces, la traducción de contenidos es imposi-ble debido a la complejidad de la propia web (PHP, ASP,etc.); otras veces, la traducción acaba generando pági-nas inmensas, algo muy negativo cuando se habla dedispositivos en los que se tarifica por flujo de datos.

Debido a esto, cada vez es más frecuente que las empre-sas interesadas en los usuarios de móviles se decantenpor hacer versiones de sus páginas directamente enWML. De hecho, en 2005 se aprobó la creación de losdominios .mobi, específicos para las páginas diseña-das para terminales móviles. Es aquí donde WML jugaráun papel verdaderamente relevante.

La tecnología móvil8.1

8. WML. Internet para móviles8.1 La tecnología móvil

Fig. 8.1. Esquemadel sistema decomunicacionestradicional entreun terminal WAP yun servidor web.

Móvil Gateway

DocumentoHTML Servidor

DocumentoWML

Como ya se ha comentado, los desarrolladores tuvieronque adaptar el mundo web al pequeño espacio de losmóviles y PDA. El lenguaje de marcas para dispositivosinalámbricos que «inventaron» fue WML (Wireless Mar-kup Language). WML podría definirse como el lenguajeque se utiliza para realizar páginas destinadas a dispo-sitivos WAP. Está basado en XML (eXtensible Markup Lan-guage, Lenguaje de marcas extensible; véase la Unidad11) y su estructura es muy similar al HTML aunque condiversas peculiaridades que pasaremos a ver a conti-nuación.

A Estructura básica

A diferencia del HTML, en WML se pueden tener variaspáginas dentro de un mismo fichero de datos. Es decir,si en HTML debíamos crear un fichero por cada «objetoenlazable», en WML podemos tener varias páginas webdentro de un mismo archivo. Esto se debe a que enWML, un fichero es lo que se denomina una baraja(deck), la cual puede contener tantas cartas (cards, loequivalente a páginas HMTL) como se quiera.

El hecho de que se puedan tener varias cartas dentro deuna baraja, no quiere decir que todo lo que se hagatenga que estar dentro de la misma. Con WML es posi-ble organizar un sitio web en diferentes barajas (consus correspondientes cartas) dado que se pueden crearenlaces entre ellas.

Para ver la estructura básica de un documento WML, lomejor es hacer una página simple. Nosotros empezare-mos con uno de los clásicos de los ejercicios de progra-mación: el famoso Hola Mundo.

Dado que WML está basado en XML, primeramente hayque indicar qué versión de XML vamos a utilizar.

<?xml version="1.0"?>

A continuación, se añade la etiqueta que indica queempieza la parte correspondiente a un documento WML.

<wml>

El proceso es similar al que se sigue en HTML, dondeexisten una serie de etiquetas (<html>, <head> y<body>), con sus correspondientes cierres (</body>,</head> y </html>) que determinan la estructura deldocumento. En este caso, la primera será, obviamente,<wml>.

Una vez completado este paso, se tiene que declararuna carta. Para ello, simplemente tendremos que asig-narle un título y un identificador por si se quiere refe-renciar posteriormente.

<card id="carta1" title="Hola Mundo">

Ahora podemos ya crear el contenido correspondiente ala carta. Si lo único que queremos insertar es HolaMundo, 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, esdecir, primero cerramos la de la carta y después la deWML. Así quedarán «balanceadas» o equilibradas.

</card>

</wml>

Con eso, ya se tendría la primera página WML completa.Aunque simple, comprender su estructura es esencialpara escribir en lenguaje WML ya que, como se verá enlos casos prácticos, es de gran utilidad a la hora deorganizar el trabajo. Su esquema servirá de plantillapara páginas más complicadas.

164

8. WML. Internet para móviles8.2 Estructura básica del lenguaje WML

8.2 Estructura básica del lenguaje WML

La estructura básica de una baraja WML secorresponde con el siguiente esquema:


<wml>

<card id="id1" title="Título 1">

Contenido 1

</card>

</wml>

12

165


El editor

Para editar WML se puede utilizar cualquier herramienta quesea capaz de guardar texto plano sin incluir códigos de con-trol. Es decir, el bloc de notas serviría pero Word, no. Encualquier caso, siempre será preferible utilizar un editor ade-cuado como es UltraEdit (puedes descargártelo del CD o dewww.ultraedit.com) ya que puede ser configurado para quetrate el fichero .wml como XML (el lenguaje sobre el que sebasa WML) y resalte la sintaxis del documento.

El navegador

También será necesario comprobar que la página ha quedadocomo se deseaba. Una sencilla forma de hacerlo es abriendola página en algún navegador web compatible. De los nave-gadores tradicionales más extendidos, esto es, InternetExplorer (www.microsoft.com), Firefox (www.mozilla.org) yOpera (www.opera.com), se podrán usar los dos últimos paracomprobar que las páginas se muestran correctamente yaque las actuales versiones de Internet Explorer no soportanWML. En cuanto a Firefox, soporta WML siempre que tengainstalada la extensión (plugin) adecuada pero no representala información exactamente como el diseñador espera nicomo lo representan los terminales móviles en realidad. No

obstante, puede servir para comprobar que la sintaxis de lapágina está bien. Es por esta razón que, en esta Unidad, seutilizará Opera. Este navegador representa la información deforma 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íneaaproximada en la que se encuentran.

El simulador

Aunque usando los navegadores tradicionales, se puede com-probar si la página se ve bien, esto no acaba con todos losproblemas. Al fin y al cabo, la pantalla de un móvil es muchomás pequeña que un monitor y, por tanto, los diseños váli-dos para uno y para otro serán distintos. Para evitar esteproblema y facilitar el trabajo del diseñador, existen simula-dores de navegadores de móviles que presentan la informa-ción de forma parecida a la real, es decir, de acuerdo altamaño de las pantallas de los móviles de verdad. Un kit dedesarrollo o simulador válido y sencillo de utilizar es Open-wave SDK 6.2.2 para Windows, el cual se encuentra en el CDdel alumno o se puede descargar de http://developer.open-wave.com. Para otras plataformas será necesario utilizarotros simuladores, como SmartPhone Emulator DeveloperEdition 5.0 (www.yospace.com/spede.html).

Fig. 8.2. UltraEdit, elnavegador Opera y elsimulador Openwave,tres herramientas degran utilidad para tra-bajar con WML.

B Enlaces

Como ya se ha comentado, en WML es posible tenervarias cartas en una misma baraja. Para ello, simple-mente tienen que definirse una detrás de otra según elmodelo proporcionado anteriormente.


<wml>


Contenido 1

</card>


Contenido 2

</card>

</wml>

Siempre que se cargue una baraja, aparecerá su primeracarta. Para acceder a la segunda, será necesario usarenlaces. Como en HTML, en WML se pueden utilizar«anclas» o links directamente. El primer caso serviríapara enlazar dos cartas dentro de una misma baraja; elsegundo, para enlazar desde una baraja o carta a otrabaraja o sitio externo.

La forma que debe seguir un enlace de tipo ancla será<a href = "#identificador"> siendo el identifi-cador el de la carta a la que se quiera enlazar. Para loslinks a otras barajas, se usa <a href = "URL">siendo URL la dirección en la cual se puede acceder a lanueva baraja o sitio.

Un ejemplo sería el siguiente código:


<wml>

<card id="cartauno" title="Carta 1">

<p>Ésta es la carta 1.</p>

<p><a href="#cartados">Link a la

carta 2</a></p>

</card>

<card id="cartados" title="Carta 2">

<p>Ésta es la carta 2.</p>

<p><a href="#cartauno">Link a la

carta 1</a></p>

<p><a href="hola_mundo.wml">Ir a

otro sitio</a></p>

</card>

</wml>

166


Realización de una pequeña página WML

Se pide Realizar una página WML titulada Hola mundo, que consista en unabaraja con una carta. Ésta debe contener un pequeño texto.

SoluciónPaso 1. Se escribe la estructura básica de una baraja WML definiendosólo una carta.


<wml>


Contenido 1

</card>

</wml>

Paso 2. En la parte correspondiente al contenido de la baraja, se escribeun texto, por ejemplo, Mi primera carta, el cual debe ir dentro, almenos, de una etiqueta de párrafo (<p></p>).


<wml>


<p>Mi primera carta</p>

</card>

</wml>

Paso 3. Para ponerle el título, por ejemplo CP1 (o Caso práctico 1) sedebe editar la línea <card id="id1" title="Título 1">. En sulugar se pondrá:

<card id="id1" title="CP1">

Paso 4. Finalmente, se coloca todo el código en elesquema de la baraja y se comprueba, con ayudadel simulador, si el resultado es el idóneo (véasela Figura 8.3).


<wml>


<p>Mi primera carta</p>

</card>

</wml>

1

Fig. 8.3. Solución delCaso práctico 1.

1

2

3

4

5

6

7

8

9

12345

6789

10

1112

123456

123456

123456

Caso práctico

La creación de barajas y cartas así como la inserción deanclas y links sirve para crear la estructura básica de lapágina web. Sin embargo, ésta está vacía de contenidos.A continuación, se estudiará cómo añadir texto, tablas eimá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 fraseen una página WML (<p>frase</p>). El siguiente pasoconsiste en ver cómo se puede formatear ese texto, esdecir, darle el estilo que se desea. Muchas de las eti-quetas coinciden con las de HTML (<p>, <b>, <u>, etc.)pero otras son diferentes (en el CD se halla una pequeñaguía de referencia rápida donde se pueden consultardichas diferencias). En la Tabla 8.1 se muestran algunosde los atributos que se pueden aplicar a los textos.

Tabla 8.1. Algunos formatos de texto.

Aun a riesgo de ser repetitivos, hay que recalcar una vezmás que estas páginas van dirigidas, principalmente, amóviles y, por ello, existen algunas particularidadesrelacionadas con la pantalla. Puede ser que algunos ter-minales no muestren ciertos estilos que se hayan apli-cado a un texto debido a que no lo implementan pormotivos de espacio en pantalla. Por ejemplo, supo-niendo que se pone la fuente grande, en negrita y enfa-tizada, es posible que el usuario no vea la página comoel diseñador espera. Por ello, en este tipo de lenguajeestá bien visto el diseño poco recargado y la sobriedad.

Por otra parte, WML tiene ciertas características a teneren cuenta. En primer lugar, el salto de línea es <br/>

y no <br> como en HTML. En algunos dispositivos, estaetiqueta hay que ponerla obligatoriamente delante decada línea, por lo que será mejor que siempre se hagaasí para evitar problemas de compatibilidad.

En segundo lugar, es conveniente evitar el uso de la eti-queta <b> ya que puede dar errores en algunos dispo-sitivos que no lo admiten. Para usar un tamaño de letramás grande es mejor utilizar <strong></strong>pero siempre con moderación porque las pantallas delos dispositivos a los que va dirigido WML suelen tenerun tamaño limitado.

Los caracteres especiales

Un aspecto también a tener en cuenta es el relacionadocon los caracteres especiales que tanto nos afecta porla cuestión de los acentos y la «ñ». Dependiendo de laconfiguración del servidor o incluso del propio terminal,puede ocurrir que este tipo de caracteres no se visuali-cen correctamente en algunas ocasiones.

167

Contenidos: texto, tablas e imágenes8.3

Salto de línea

Tamaño grande

Enfatizado

Pequeño

Negrita a la vez que enfatizada

<br/>

<big></big>

<em></em>

<small></small>

<strong></strong>

Etiquetas Significado

8. WML. Internet para móviles8.3 Contenidos: texto, tablas e imágenes

Reglas básicas de WML

• La mayoría de etiquetas tienen que abrirse y cerrarse. Aquellasetiquetas que no necesitan cerrarse (<access>, <br/> o<img>, por ejemplo), suelen tener una barra al final de lacadena (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 quecuando se abrió. Por eso, <wml> no es igual que <Wml>.

• Todo texto debe estar dentro de una etiqueta, aunque seauna simplemente de párrafo (<p>).

• Todos los valores de los parámetros que van dentro de unaetiqueta, deben ir entre comillas. Por ejemplo:

<card id="c1" title="t1">

• Para insertar un comentario en el código y que este no apa-rezca en pantalla al ser interpretado por el navegador, debe-remos escribirlo de la siguiente forma:

Si no se muestran los acentos u otros caracteres espe-ciales correctamente, la solución es escribirlos usandounos 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 dife-rentes. (Veáse la Tabla 8.2).

La etiqueta <p> y el ajuste de texto

Para evitar posibles problemas de visualización de untexto en la pantalla de un móvil, WML incorpora laopción de párrafo wrap (envolver). Ésta se puede usarcomo parámetro opcional para decir si se quiere que eltexto aparezca en una sola línea o bien se quiere quese ajuste automáticamente según el ancho de la panta-lla. Para obtener lo primero, se escribirá, dentro de laetiqueta de apertura de párrafo, mode="nowrap":

<p mode="nowrap">Este texto es largo y a

lo mejor no se verá entero en la panta-

lla</p>

De esta manera, el texto no se ajustará al ancho de lapantalla y puede que no se lea la frase entera si no cabeen una línea del terminal en el que se está visualizando.

168


Tabla 8.2. Algunos caracteres especiales y sus códigos pro-pios en WML.

$

©

á

é

í

ó

ú

$$

©

á

é

í

ó

ú

Código Símbolo

ñ

Ñ

Á

É

Í

Ó

Ú

Código

ñ

Ñ

Á

É

Í

Ó

Ú

Símbolo

Caso práctico

Los formatos y sus efectos

Se pideEscribir una baraja con una carta y un texto que incluya todoslos formatos de texto vistos anteriormente.

SoluciónPaso 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 laTabla 8.1. Por ejemplo:

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.


<wml>


<p>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>.</p>

</card>

</wml>

Paso 4. Sólo queda comprobar el resul-tado (véase la Figura 8.4).

Fig. 8.4. Solución delCaso práctico 2.

1234

56

Para evitarlo, deberemos escribir mode="wrap":

<p mode="wrap">Este texto es largo y

seguro, se verá entero en la pantalla</p>

El texto se ajustará automáticamente y tendrá tantaslíneas como sean necesarias para mostrar todo el texto.En la Figura 8.5 se puede observar el resultado de apli-car las opciones wrap y nowrap.

Fig. 8.5. Ejemplo de texto en modo no wrap (izquierda) ywrap (derecha).

B Imágenes

Todos los dispositivos móviles tienen pantallas y amedida que pasa el tiempo, con mayores prestaciones.Esto ha provocado que cada vez sea más frecuente laincorporación de imágenes a las páginas WML. Este len-guaje, al igual que HTML, permite usar imágenes paraenriquecer las páginas destinadas a los navegadorescompatibles aunque con evidentes limitaciones.

Por ejemplo, el formato de imagen que reconocen todoslos dispositivos que soportan WML es WBMP (Wireless Bit-Map, Mapa de bits para dispositivos inalámbricos), unformato que sólo admite las imágenes en blanco y negro.Las continuas mejoras en la telefonía móvil están permi-tiendo el uso de otros formatos como GIF o JPEG, aunquetodavía no son aceptados por muchos dispositivos.

Para insertar una imagen, al igual que ocurre en HTML, seusa 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ámetrosque acompañan a la etiqueta <img> y que se describena continuación (sólo los dos primeros son obligatorios):

• src="URL_imagen". Indica la URL de la imagen.

• alt="Texto alternativo". Este texto es decarácter descriptivo y aparece en pantalla en elcaso de que un dispositivo no pueda mostrar laimagen. Se trata de un parámetro obligatorio.

• align="valor". Sirve para fijar la alineación dela imagen con respecto a la línea base que lleva eltexto. Puede tomar uno de los siguientes valores:top (arriba), middle (mitad) o bottom (abajo),siendo este último el valor que adoptará Alignpor defecto.

• vspace="n". Indicará la separación vertical de laimagen en relación con el texto.

• hspace="m". Indicará la separación horizontal dela imagen en relación con el texto.

• height="n". Sirve para indicar que la imagendebe tener una altura determinada.

• width="m". Sirve para indicar que la imagen debetener un ancho determinado.

Tanto al usar height como width, hay que tener encuenta que se puede modificar el aspecto de la imagenrespecto al original. Es posible que la imagen resultanteno esté proporcionada en sus nuevas dimensiones. Porello, es importante que cuando se modifique el tamañode la misma, haciéndola más grande o más pequeña, serespeten las proporciones originales.

Conociendo la estructura básica de una baraja y losparámetros de la etiqueta <img>, es muy sencillo crearuna página con una imagen (véase la Figura 8.6):


<wml>

<card id="id1" title="ejemplo"><img src="paloma.wbmp" alt="Paloma"align="middle"/>

</card>

</wml>

En este caso, la URL hace referencia a una imagen(paloma.wbmp) que se encuentra en la misma carpetaque el código.

169

Fig. 8.6. Inser-ción de una ima-gen en una pá-gina WML.

1234

56


C Tablas

Las tablas son útiles para mostrar datos de forma clara yestructurada. En WML se pueden hacer tablas sencillascon las etiquetas <table></table> aunque, a dife-rencia 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 decolumnas que tendrá la tabla por lo que n debe serun número entero y mayor o igual que 1. Se tratade un parámetro obligatorio.

• title="título". Sirve para especificar el títulode la tabla. Dependiendo del navegador que incor-pore el terminal móvil, se representará en pantallao no. No es un parámetro obligatorio.

• align="XX...X". Con este parámetro no obliga-torio se especifica la alineación de cada columna.Aquí X es una letra que especifica la alineación decada columna —L (left, izquierda), C (center, cen-trada) o R (right, derecha)— teniendo que habertantas letras como columnas tenga la tabla.

• id="identificador". Se utiliza para identificarla tabla, siendo un parámetro no obligatorio.

En cuanto a lo que es el contenido en sí de la tabla, esigual que en HTML. Para delimitar las filas de la tablase usarán las etiquetas <tr></tr> y, dentro de cadafila, se delimitarán las celdas con las etiquetas<td></td>.

Si se quisiera que la tabla tuviera bordes, se tendría queañadir la opción border al igual que se hace en HTML:

<table id="tabla1" columns="3"

title="Tabla" align="CCC" border="1">

Así mismo, también se puede añadir cierto color a latabla 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 legibilidaddel texto ya que el diseño nunca debería impedir lavisualización de la información que se proporciona.

170


Tablas en WML

Se pideRealizar una tabla de dos filas y dos columnas que contenga nombresde personas en la primera fila y su edad en la segunda.

SoluciónPaso 1. Escribimos el esquema de una baraja con una carta.

Paso 2. Realizamos el código relacionado con la tabla:

<table id="tabla1" columns="2" title="Tabla"

align="CCC" border="1">

</table>

Paso 3. Definimos dentro de la tabla las dos filas, la primera con losnombres y la segunda con las edades:

<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 zonade contenido del esquema de la carta y comprobamos el resultado:


<wml>


<table id="tabla1" columns="2" title="Tabla"

align="CCC" border="1">

<tr>

<td>Juan</td>

<td>Lara</td>

</tr>

<tr>

<td>15</td>

<td>17</td>

</tr>

</table>

</card>

</wml>

3

Fig. 8.7. Solución del Caso práctico 3.

1

2

12345678

1234

56789101112131415

Caso práctico

171

Hasta ahora se ha visto cómo crear una baraja con suscartas, enlazar cartas entre sí o con otros sitios web ycómo enriquecer las páginas creadas mediante la inser-ción de elementos como textos o imágenes. Sin embargo,es posible hacer cosas más complejas, como añadir for-mularios 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 valorpreestablecido, dejar que el usuario lo defina a travésde la interfaz de un formulario, etc. Tienen diversas uti-lidades, desde las basadas en formularios (como unlogin) a las que permiten dividir el contenido de unapágina en varios «pantallazos» (algo extremadamenteútil teniendo en cuenta el tamaño de las pantallas delos dispositivos inalámbricos).

Creación de variables

Para crear una variable y asignarle un valor se debenutilizar las etiquetas establecidas para ello en WML ysus correspondientes parámetros. Éstas son <setvar>,<input>, <select> y <postfield>. Además, sedebe recordar que las variables son case sensitive (dis-tinguen entre mayúsculas y minúsculas) y su nombrepuede empezar por el guión bajo o una letra, seguidade una o más letras, números o guiones bajos. Nuncaempezarán por aquellos símbolos susceptibles de serutilizados como parte del código (por ejemplo $).

La etiqueta <setvar>

Con <setvar> se crea la variable a la vez que se leasigna un valor fijo, es decir, es el desarrollador quiendecide que valor darle. Esto es útil algunas veces parapoder inicializar variables que posteriormente se van autilizar en un formulario. Por ejemplo, en la siguientelínea, 12 es el valor de la variable edad.

<setvar name="edad" value="12"/>

La etiqueta <input>

La etiqueta <input> se utiliza a menudo en la creaciónde formularios. Con ella se declara una variable pero no

se le asigna un valor; posteriormente será el usuarioquien le asigne el valor que debe tener. Por ejemplo, sise desea crear un campo donde el usuario consigne susapellidos (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 deellos es name, con el que se especifica el nombre de lavariable que recogerá el dato que se introduzca en esecampo. El siguiente parámetro es size y con él seespecifica el tamaño que se le quiere dar al recuadro enel cual el usuario tiene que escribir la información. Parafinalizar, está el parámetro format, con el que se espe-cifica exactamente el formato que debe tener la infor-mación que introduzca el usuario (véase la Tabla 8.3).

Especificar el tipo de formato es útil para que el telé-fono sepa cómo reproducir en pantalla la informaciónintroducida por el usuario. Por ejemplo, si se le dice que

8. WML. Internet para móviles8.4 Variables, tareas y eventos

Variables, tareas y eventos8.4

Carácter alfabético (en mayúsculas) o de puntuación.

Carácter alfabético (en minúsculas) o de puntuación.

Carácter numérico.

Carácter en mayúsculas.

Carácter en minúsculas.

Cualquier carácter. El navegador puede suponer, por simplicidad, que seránmayúsculas pero permitirá la entrada de cualquier carácter.

Cualquier carácter. El navegador puede suponer, por simplicidad, que seránminúsculas pero permitirá la entrada de cualquier carácter.

Cualquier número de caracteres, siendo f uno de los formatos vistos anterior-mente (A, a, N, etc.). Este formato sólo puede aplicarse una vez y debe apa-recer al final de la cadena de formatos.

Un número determinado de caracteres, siendo n un número y f uno de los for-matos explicados (salvo *f, ya que no se puede poner n*a, por ejemplo). Esteformato sólo puede aplicarse una vez y debe aparecer al final de la cadena deformatos.

A

a

N

X

x

M

m

*f

nf

Valor Significado

Tabla 8.3. Valoresaceptados por elparámetro format.

el formato de un campo es numérico, al pulsar una teclase escribirá el número correspondiente, mientras que sies texto, escribirá letras directamente. Así se evita queel usuario tenga que estar cambiando el formato en elque está escribiendo ya que es el propio terminal el quelo interpreta y lo cambia automáticamente segúncorresponda. En cualquier caso, a veces la captura delformato no da los resultados esperados debido a quealgunos navegadores no implementan estrictamente elestándar.

Los tres parámetros vistos anteriormente son los másutilizados ya que permiten crear formularios tradicio-nales como el que se muestra a continuación.


<wml>

<card id="id1" title="Ejemplo">

<p>

Nombre: <input name="nombre"

size="25"/>

<br/>

Apellidos: <input name="apellidos"

size="45" format="*X"/>

<br/>

Edad: <input name="edad" size="15"

format="3N"/>

<br/>

</p>

</card>

</wml>

Con este, sencillamente, se pediría al usuario el nom-bre, los apellidos y la edad (esta última debería estar enformato numérico y con un máximo de tres números).

Por supuesto, también hay otro tipo de opciones deformat más avanzadas. Por ejemplo, ¿cómo se haríapara decir que un campo no puede quedar vacío? ¿Ocó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 losvalores true o false. El primero indica que laentrada puede quedar vacía (aunque se le especifi-que un formato). Por defecto, cualquier format esemptyok=false, es decir, no se puede dejarvacío.

• maxlength. Indica el número máximo de caracte-res permitidos en la entrada de texto. La diferenciaentre maxlength y size es que con el primero seestá limitando la cantidad de texto que se puedeintroducir en un cuadro, mientras que con elsegundo se puede introducir el texto que se quieraaunque sea más largo que el cuadro.

• type="password". Sirve para que aparezcanasteriscos en el recuadro en vez de lo que estáescribiendo el usuario, evitando así que otras per-sonas puedan averiguar que es lo que se está intro-duciendo en el formulario. Como su propio nombreindica, es especialmente útil a la hora de pedir laintroducción de una contraseña.

La etiqueta <select>

Con esta etiqueta, al igual que la anterior, también sepuede asignar un valor a una variable. La diferencia estáen que con <select> se le ofrece al usuario la lista deposibles valores que se quieren capturar. Por ejemplo,en el código que viene a continuación, se puede vercomo en la variable alumno se almacenará Pepe o Juanadependiendo de lo que seleccione el usuario de la listaconformada por las opciones José García y Juana Díaz.

<select name="alumno">

<option value="Pepe">José García

</option>

<option value="Juana">Juana Díaz

</option>

</select>

Como se puede observar en este ejemplo, la variable<select> va acompañada por otras etiquetas comoson <option></option>. Es decir, con la variable<select> definimos la ventana desplegable o lista deitems entre los que deberá elegir el usuario. Dichasopciones vienen marcadas por <option>, a la queademás se la ha añadido un valor. Aunque el usuario veauna lista compuesta por las opciones José García yJuana Díaz, en realidad estará escogiendo entre losvalores Pepe y Juana.

Además, es importante darse cuenta de que mientras quecon las otras variables no era necesaria la etiqueta decierre, con <select> sí. En este caso, </select> iráal final del conjunto de opciones que se han definido.

172


12345

67

89

10111213

123456

La etiqueta <postfield>

Esta etiqueta contiene información que se quiere expor-tar a un servidor. Por ejemplo, si se quiere enviar unavariable <input> a un servidor PHP para generar unapágina WML dinámica, es necesario identificar previa-mente dicha variable ante el servidor. Es decir, es nece-sario hacerla «visible» antes de exportarla. Se utilizacon la etiqueta <go> y su sintaxis sería, por ejemplo:

<go method="post" href= "http://prue

bas/alumno.php">

<postfield name="nombre"

value="Juan"/>

</go>

Aunque la etiqueta <go> se explicará más adelante, eneste ejemplo ya se puede observar que se ha indicado ala página señalada por el enlace, que el valor de nom-bre es Juan.

Referenciar variables

Ya se ha visto cómo crear variables pero ¿cómo se laspuede llamar una vez declaradas e inicializadas? Parareferenciar variables en WML se pueden usar dos méto-dos. Si no existe ambigüedad de ningún tipo con elnombre de una variable en un contexto, se puede usar$variable. Si existiese dicha ambigüedad, se deberíautilizar $(variable) para así descartar cualquier con-fusión.

Veamos el siguiente ejemplo (el resultado puede verseen las Figuras 8.8 a y b):

Tal y como se ha hecho hasta ahora, lo primero ha sidodeclarar las dos cartas: carta1 y carta2. En la primera deellas 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 valoraparezca en la segunda página, es necesario declarar elenlace entre ambas cartas mediante la instrucción:

<p><a href="#carta2">Mostrar</a></p>

Posteriormente, bastará con incluir en el contenido deesta segunda carta la referencia a la variable:

<p>Ha seleccionado: $(alumno)</p>

B Tareas

Las tareas se definen mediante etiquetas que permitenespecificar acciones que deben ser realizadas: ir atrás,refrescar la página, etc. Para ejecutar estas tareas, esnecesario asociarlas a un elemento <do>, el cual englo-bará la declaración de la tarea permitiendo programarlas acciones que puede seleccionar el usuario en unacarta. La estructura que tendrá será:

<do>

Tarea

</do>

La representación del elemento <do> depende del na-vegador 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 defunción o cualquier otro elemento que el terminal móvilimplemente para interactuar con el usuario a través dela interfaz. Cuando el usuario active el <do> a través deesa representación, la tarea asociada será ejecutada.

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 deacuerdo a unos valores determinados. Lo normal esusar type="accept" para modelar el comporta-miento deseado ya que es la tarea que suelen traer

173

1

2

3

1

2

Fig. 8.8b. El valoralmacenado en lavariable se muestraen una segundacarta.

Fig. 8.8a. El usua-rio escoge la opciónJosé García, alma-cenándose el valorPepe en la variable.


<wml>

<card id="carta1">

<select name="alumno">

<option value="Pepe">José García

</option>

<option value="Juana">Juana Díaz

</option>

</select>

<p><a href="#carta2">Mostrar</a></p>

</card>

<card id="carta2">

<p>Ha seleccionado: $(alumno)</p>

</card>

</wml>

123456789101112131415


Realización de un formulario en WML

Se pideRealizar un formulario que solicite el nombre de usuario y una clave de cuatro dígitos. Dichos datos serán mostrados en unasegunda carta, accesible a través de un enlace situado en la primera carta.

SoluciónPaso 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 vienea continuación aparezca justo al final del cuadro del formulario.

Usuario: <input type="text" name="usuario"/>

<br/>

Paso 3. Definimos el campo clave. Su formato será numérico y su tamaño máximo será de cuatro caracteres.

Clave: <input type="text" name="clave" format="4N"/>

<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.

<p>Usuario: $usuario

<br/>

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).


<wml>

<card id="identificador1" title="CP4">

Usuario: <input type="text" name="usuario"/>

<br/>

Clave: <input type="text" name="clave" format="4N"/>

<br/>

<a href="#identificador2">Mostrar datos</a>

</card>

<card id="identificador2" title="CP4">

<p>Usuario: $usuario

<br/>

Clave: $clave</p>

</card>

</wml>

4

174


Fig. 8.9. Solución del Caso práctico 4. A la izquierda, elformulario de la primera carta; a la derecha, la segundacarta muestra los valores de las variables.

123456789101112131415

12

12

123

Caso práctico

todos los navegadores móviles implementada. Elresto de parámetros es parte del estándar pero nosiempre funcionan (véase la Tabla 8.4).

• name. Sirve para especificar el nombre que se daráal identificador del <do>. Hay que tener en cuentaque no se debe dar el mismo nombre a dos <do>distintos dentro de la misma carta.

• label. Especifica el texto que debe aparecer en lapantalla para simbolizar ese <do>. Normalmenteserá un botón con dicho texto escrito.

Tabla 8.4. Valores aceptados por el parámetro type.

Tipos de tareas

WML posee diversas etiquetas para definir las tareas queirán encuadradas dentro del <do>:

• <noop/>. Indica que no se debe hacer nada. Seutiliza para desactivar eventos en la baraja.

• <prev/>. Provoca el retroceso a la URL anterior.Es el equivalente a cuando en un navegador webestándar se pulsa el botón de «ir atrás». Si dentrode <prev> hay un elemento <setvar>, éste seevalúa antes de volver a la URL anterior. Esto puedeservir para saber, por ejemplo, la página desde lacual se ha retrocedido.

<do type="accept" label="retroceder">

<prev>

<setvar name="vengoDe"

value="aquí"/></prev>

</do>

En este ejemplo, al pulsar el botón retroceder sealmacena el valor aquí en la variable vengoDe. Pos-teriormente, se cargará la página anterior.

• <refresh/>. Recarga o actualiza los contenidosvisibles del navegador. Lo dicho anteriormente para<prev> en cuanto al orden de procesamiento devariables es válido aquí. Primero se evalúa la variabley luego se recarga la página. Un ejemplo de estatarea sería:


<wml>

<card id="carta1" title="Ejemplo">

<p>Nombre= $Alumno</p>

<do type="accept" label="Recargar">

<refresh>

<setvar name="Alumno"

value="Pepe"/>

</refresh>

</do>

</card>

</wml>

La referencia a la variable Alumno aparecerá vacíahasta que el usuario ejecute el <do> a través delbotón Recargar. Entonces se almacenará el valorPepe y se actualizará la página.

• <go>. Sirve para ir a otra URL u otra carta. Lasvariables se procesan antes de ejecutarse la tareapropiamente dicha. Se usa, por ejemplo, para pasarparámetros de una página a otra utilizando unbotón en la interfaz del móvil en vez de un enlace.Esto se puede ver en el siguiente ejemplo:


<wml>


<p> Carta 1</p>

<do type="accept" label="Ir">

<go href="#carta2"/>

</do>

</card>


<p>Carta 2</p>

</card>

</wml>

C Eventos

En WML, es posible declarar acciones que deben ser rea-lizadas bajo determinadas circunstancias a través deuna serie de etiquetas especiales. Por ejemplo, con laetiqueta ontimer declararemos que la acción o evento

175

1234567

891011

1234567891011121

23

4


Acepta y ejecuta la acción del <do>.

Va hacia atrás en el historial del navegador.

Realiza una petición de ayuda.

Limpia el estado.

Realiza una petición de opciones adicionales.

Borra un elemento o elección.

Indica que es un <do> genérico.

accept

prev

help

reset

options

delete

unknown

Valor Significado

que expresa debe esperar a que pase cierto tiempodesde que se cargó la página.

Existen dos métodos de declarar estos eventos. La pri-mera forma consiste en introducir dentro de la etiqueta<card> el evento en cuestión, dependiendo su valor delo que haga en concreto. La segunda consiste en declarardentro 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 com-portamiento completo del evento. A continuación severán los tipos de eventos y ejemplos de las dos formasde declaración posibles.

El evento ontimer

Ejecuta una acción tras un tiempo determinado. Dichotiempo se indica con la etiqueta <timer value="n"/>

176


Mecanismos de navegación

Se pideRealizar 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ónPaso 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>.

<do type="accept" label="Ir Carta 2">


</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 pri-mera.

<do type="accept" label="Atrás">

<prev/>

</do>

Paso 4. Se ordena dentro de la baraja el código generado y se comprueba el resultado (véase la Figura 8.10).


<wml>

<card id="carta1" title="CP5">

<do type="accept" label="Ir Carta 2">


</do>

</card>

<card id="carta2" title="CP5">

<do type="accept" label="Atrás">

<prev/>

</do>

</card>

</wml>

5

Fig. 8.10. Solución del Caso práctico 5. A laizquierda, la primera carta con el enlace parair a la segunda; a la derecha, la segundacarta con el enlace para retroceder.

123

123

12345678910111213

Caso práctico

177

en la que n es un número que indica la cantidad detiempo en décimas de segundos. En el siguiente ejem-plo, el evento ha sido incluido dentro de la etiqueta<card> y se le ha definido para que al pasar 5 segun-dos, cargue la carta 2.

El evento onenterforward

Este evento se ejecuta cuando el usuario carga unacarta mediante un enlace con una tarea <go> asociadao un método equivalente (teclear la URL de la carta oejecutar un script).


<wml>

<card id="carta1" title="carta 1">

<p>Carta 1</p>

<do type="accept" label="ir">


</do>

</card>


<p>Carta 2</p>

<onevent type="onenterforward">


</onevent>

</card>


<p>Carta 3</p>

</card>

</wml>

En este ejemplo, en la carta1 aparece un enlace a lacarta 2. Al pulsarse, se cargará ésta pero antes de poderser visualizada, se ejecutará el onenterforward, elcual redirigirá al usuario hacia la carta3. Es decir, elusuario nunca llegará a ver el contenido de la carta2pues, aparentemente, pasará desde la carta1 a la carta3.

El evento onenterbackward

Es igual al evento onenterforward pero yendo haciaatrás en el historial del navegador. En vez de usar unatarea <go> utiliza la tarea <prev>. Muchos de losnavegadores WAP no lo tienen bien implementado.

El evento onpick

Este evento se activa cuando el usuario selecciona, porejemplo, un elemento de una lista. Es el caso delsiguiente código, cuyo resultado se muestra en lasFiguras 8.11 a y b.

Si el navegador implementase la selección como una listadesplegable, debería añadirse una primera opción mera-mente informativa (por ejemplo, Seleccione color...). Sino, el primer elemento de la lista vendría seleccionadopor defecto y no se ejecutaría el onpick.

Fig. 8.11 b. Secarga la cartaVerde onpick quepresenta de nuevolas dos opciones.

Fig. 8.11 a. Elusuario puede ele-gir entre dosopciones (rojo yverde) en la cartaRojo onpick. Elusuario elige laopción verde.

123456789101112131415161718


<wml>

<card id="rojo" title="Rojo onpick">

<select>

<option>Rojo

<onevent type="onpick">

<go href="#rojo" />

</onevent>

</option>

<option>Verde


<go href="#verde" />

</onevent>

</option>

</select>

</card>

<card id="verde" title="Verde onpick">

<select>

<option>Rojo


<go href="#rojo" />

</onevent>

</option>

<option>Verde


<go href="#verde" />

</onevent>

</select>

</card>

</wml>

123456789101112131415161718192021222324252627282930


<wml>

<card id="carta1" ontimer="#carta2"

title="Saltamos">

<timer value="50"/>

<p>Tras 5 seg. pasamos a carta 2</p>

</card>

<card id="carta2" title="Salto">

<p>Carta 2, hemos llegado.</p>

</card>

</wml>

123

45678910


178

Se pretende adaptar a lenguaje WML parte del portal de infor-mación personal que se realizó en la Unidad 4, de tal maneraque el usuario tenga la posibilidad de consultar a través delmóvil cierta información que le resulte útil. Las páginas que sehan elegido en esta ocasión corresponden a aquellas que seajustan mejor a las características de diseño vistas en esta Uni-dad como son el tamaño reducido de pantalla o el pago porinformación recibida. Por ello, las páginas que nosotros vamosa «verter» a código WML serán:

• Agenda de teléfonos. En este menú el usuario podrá verla lista de todos sus contactos telefónicos. Dicha informa-ción se imprimirá en pantalla con un formato especial queconsistirá en poner en una línea, primero los apellidos yluego el nombre y, a partir de la línea inmediatamenteinferior, todos los teléfonos de esa persona, indicando sise 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 puedenresultar de utilidad. El formato será parecido al seguido enel caso del listín telefónico: aparecerá el nombre de la per-sona 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 hacerfalta. Esto dependerá del enfoque que se le dé al problema y,por ello, habrá soluciones diferentes a la que aquí se dará. Esono significa que estén mal; sólo serán otras posibles soluciones.

En primer lugar, hay que tener en cuenta que, en principio, nose está planteando una relación directa entre las personasincluidas en el listín telefónico y las incluidas en la libreta dedirecciones. Pueden tratarse de personas totalmente distintasy sin relación entre ellas. Si se decidiese juntar toda la infor-mación, se crearía una página wml sumamente compleja en laque el código acabaría sepultado entre toda la informaciónincluida. 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 tenerdos páginas wml inconexas, sino que lo que se desea es tenerun sitio web, accesible desde una terminal. Por ello, será nece-sario dar cierta estructura al sitio.

Para ello se creará un menú que sirva para acceder bien a laagenda de telefónos, bien a la de direcciones. Para acceder adicho menú, el usuario debe introducir previamente su nombrede usuario y la contraseña. Dado que WML no es un lenguaje deservidor como PHP o ASP, sólo se simulará dicho login: trasintroducir los datos y enviarlos, se llegará a una carta en la queno se hará nada más que esperar cierto tiempo y pasar a la delmenú.

Su diseño debe ser sobrio en el sentido de que, como se hamencionado, se paga por Kilobyte transferido y, por tanto, sedeben hacer páginas ligeras. Esto quiere decir que no se utili-zarán los iconos empleados en el portal HTML o cualquier otroefecto DHTML. La versión WML del portal tiene una finalidademinentemente práctica por lo que se debe reducir cualquierelemento innecesario. Es por ello que el menú será muy simpley sólo tendrá dos enlaces, uno por cada agenda a la que quere-mos acceder.

Queda por decidir cómo se ordenará la información dentro decada agenda. En este caso, se ha decidido por crear un nuevomenú que ofrezca al usuario la posibilidad de elegir la letra porla 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 laagenda de direcciones se pulsa sobre la A, se accederá a labaraja direccionesA.wml. En ella se encontrarán todos losdatos de las personas cuyo nombre comience por la letra A.

En definitiva, el esquema del portal wml es el siguiente:

Fig. 8.12. Flujo de navegación a través del portal wml.

index.wml

telefonos.wml direcciones.wml

telefonosA.wml

telefonosB.wml

telefonosC.wml

telefonosD.wml

direccionesA.wml

direccionesB.wml

direccionesC.wml

direccionesD.wml

Práctica final. Desarrollo de un portal en WML

8. WML. Internet para móvilesPráctica final

179


Login de inicio

Esta baraja tendrá tres cartas:

1) En la primera se pedirán los datos del login. Para ello crea-remos, mediante la etiqueta <input>, un pequeño for-mulario con dos campos. El segundo será numérico y ocul-tará la contraseña de «miradas ajenas».

2) La segunda no hará nada pero servirá para simular el pro-ceso de autenticación. Para ello introduciremos un evento

ontimer con el que, durante 3 segundos, mostraremos elmensaje Comprobando credenciales... antes de pasar a latercera carta.

3) La tercera carta será un simple menú con los enlaces a lasbarajas 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 puedeobservar en la Figura 8.13.

Código del login de inicio


<wml>

<card id="login" title="Bienvenido">

<p>

Nombre: <input name="nombre" size="10"/>

<br/>

PIN: <input name="pin" size="4" format="4N" type="password"/>

<br/>

<a href="#checklogin">Aceptar</a>

</p>

</card>

<card id="checklogin" title="Procesando...">

<timer value="30"/>

<p>Comprobando credenciales...</p>

<onevent type="ontimer">

<go href="#menu"/>

</onevent>

</card>

<card id="menu" title="Menú">

<p>

1.- <a href="telefonos.wml">Teléfonos</a>

<br/>

2.- <a href="direcciones.wml">Direcciones</a>

</p>

</card>

</wml>

Al acceder a la página,se nos pide el nombre yla contraseña.

La página simula el pro-ceso de verificación yconexión.Fig. 8.13. Visualización del proceso del login de inicio.

1

2

3

1234567891011121314151617181920212223242526

Desarrollo de un portal en WML (continuación)

180


Teléfonos y direcciones

El desarrollo de las páginas con las agendas de teléfonos ydirecciones es muy similar, por lo que aquí sólo escribiremos elcódigo de la primera. Una vez realizado, simplemente habrá quecambiar la información de los números de teléfono por la de lasdirecciones ya que la estructura interna del documento será lamisma.

Esta sección cuenta con numerosas barajas ya que se ha optadopor diferenciar alfabéticamente los contactos, incluyéndolos endistintas páginas wml según por qué letra comience su nom-bre. Para acceder a cada una de estas barajas se utilizará unmenú inicial con un listado de enlaces.

Las barajas que almacenarán los contactos serán muy simplesya que sólo contarán con un conjunto de tablas con diferentesfilas y dos columas. En la primera fila de cada tabla irá el nom-bre y apellidos de la persona; a continuación, en filas diferen-

tes, se irán mostrando los números de teléfono que posea, indi-cándose en cada caso si se trata de un teléfono móvil o unofijo. Si una persona sólo posee teléfono fijo, su tabla sólo lle-vará dos filas (la del nombre y el número de teléfono); si poseetres teléfonos, tendrá cuatro filas, etcétera.

La ventaja de este sistema es que añadir contactos es suma-mente fácil. Simplemente se deberá abrir la baraja deseada ycopiar 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 yaexistente, 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 lapantalla del móvil. Por ello, se utilizará una alternancia decolores: la primera tabla será gris, la segunda blanca, la terceragris, etc. Este método es muy sencillo y no necesita grandesrecursos pero a la vez, es muy útil, haciendo la presentación dela información en un terminal móvil mucho más clara.

Menú alfabético


<wml>

<card id="tfno" title="Agenda telefónica A-Z">

<p>



<a href="telefonosA.wml">A</a>

<a href="telefonosB.wml">B</a>

<a href="telefonosC.wml">C</a>

<a href="telefonosD.wml">D</a></p>



<p><a href="inicio.wml#menu">Menú</a></p>

</card>

</wml>

123456

78910

11

121314

Fig. 8.14. Vista del menú de laagenda telefónica.

181


Agenda de teléfonos


<wml>

<card id="tfno" title="Agenda telefónica">



<table columns="2" align="LC" bgcolor="gray">

<tr>

<td>Aller,</td>

<td>Juan</td>

</tr>

<tr>

<td>Fijo:</td>

<td>123456789</td>

</tr>

<tr>

<td>Móvil:</td>

<td>987654321</td>

</tr>

</table>



<table columns="2" align="LC" bgcolor="white">

<tr>

<td>Ares,</td>

<td>Pepe</td>

</tr>

<tr>

<td>Fijo:</td>

<td>234567891</td>

</tr>

<tr>

<td>Móvil:</td>

<td>198765432</td>

</tr>

</table>

<p><a href="inicio.wml#menu">Menú</a></p>

</card>

</wml>

123

456

7891011121314151617181920

21

2223242526272829303132333435363738

Fig. 8.15. Vista de la tablasin orden alfabético.

182

8. WML. Internet para móvilesActividades

Actividades

Busca información sobre las posibilidades que ofre-cen las distintas operadoras de telefonía móvil parala transmisión de datos (precios, bonos, tarifas pla-nas, velocidades, etc.).

Busca el plugin o extensión que necesita el nave-gador Firefox para poder visualizar páginas WML.Instálalo y comprueba cómo se ven en él las pági-nas WML que has hecho.

¿Cómo se llama el «traductor» que incorporanalgunos sitios para que las páginas estén dispo-nibles para dispositivos WAP sin necesidad de queel desarrollador se preocupe por ello?

¿Qué recomendaciones hay que tener en cuenta a lahora de realizar páginas para un dispositivo móvil?

¿En qué lenguaje está basado WML?

En los documentos WML, ¿tienen que estar todaslas cartas en la misma baraja? Justifica tu res-puesta.

¿Qué implica que una etiqueta termine con />?

¿Cuándo es conveniente utilizar el atributo wrapen los párrafos?

¿Qué símbolo hay que poner dentro de la etiqueta<a href> cuando se quiere realizar un enlaceentre cartas de una misma baraja?

¿Qué tendrías que añadir en un documento WML paraenlazar una carta con la baraja ejemplo.wml?

¿Cómo habría que escribir la frase «El murciélagohindú comía caña y kiwi» en un documento WML?

¿Por qué es recomendable no introducir muchasimágenes en una carta WML?

¿Qué puede ocurrir si utilizamos los atributosheight y width al introducir una imagen en unaweb WML?

Busca en Internet conversores de formato BMP aWBMP, librerías WBMP y utilidades para trabajar coneste formato.

¿Cuáles de los siguientes nombres de variables sonválidos en WML?

¿Se podrían recoger los siguientes datos con losformatos definidos a continuación?

Si declaramos en una carta una variable consetvar, ¿sería visible dicha variable en otrabaraja a la que se llegue a través de un enlace? ¿Yen una carta que esté en la misma baraja?

17

16

15

14

13

12

11

10

9

8

7

6

5

4

3

2

1

USUARIO_nombre

_USUARIO_nombre

2_Usuarios

usuario_ok

Variable

123pepeJuan 2Juan1235J

Dato

N

*f

10M

10x

3N

NX

Formato Sí/No

Validez

Prácticas

183

8. WML. Internet para móvilesPrácticas

Crea una baraja en la que se introduzca la imagenpaloma.wbmp utilizando primero el atributowidth, después el height, después vspace ypor último hspace. Compara los resultados con elde la Figura 8.6 y su código correspondiente eindica qué ha cambiado.

Realiza un formulario en el que se pida a los usua-rios su nombre, teléfono y afición favorita, de formaque ninguno pueda dejarse en blanco. Usa los for-matos correspondientes y los limitadores de longi-tud de campo y haz que los datos introducidos semuestren en otra carta en la que diga:

"Eres NOMBRE y podemos llamarte al TELÉFONO si nosgusta HOBBY como a ti".

Nombre, teléfono y hobby serán sustituidos por losvalores proporcionados por el usuario.

Escribe una carta en la que aparezca «Edad» ydebajo una lista con tres opciones: «menor de 18años» (<18), «18 años» (=18) y «mayor de 18años» (>18). Desde esa carta se debe acceder a otraen la que aparezca el resultado de la selección:«Bienvenido, eres menor de 18 años», «Bienve-nido, eres mayor de 18 años» o «Bienvenido, tienes18 años» según corresponda.

Haz una baraja con un mínimo de cinco cartas en laque se pase de una carta a otra de forma automá-tica. En cada carta debe aparecer al menos unapalabra en la que se apliquen los formatos de texto.

Realiza una baraja en la que en la primera cartaaparezca la frase «Cuando pulses el botón verás loscolores del arco iris». Dicha página debe contenerun botón que lleve a otra carta en la que aparezcaescrito el nombre de un color. De ahí debe saltarautomáticamente a otra página con otro colorescrito y así sucesivamente hasta completar lossiete colores del arco iris.

Diseña un documento WML que simule un contadorhacia atrás. Lo primero que debe ver el usuario esel siguiente mensaje: «Este mensaje se autodestruiráen… 5 segundos». Posteriormente se irá actuali-zando dicho mensaje para poner, en lugar de 5, losdiferentes decrementos de 4, 3, 2 y 1. Finalmente,se mostrará una imagen que simbolice la destruc-ción del documento.

Realiza una página WML que contenga una tablacon tres filas y tres columnas con las siguientescaracterísticas:

" El color de fondo de la primera fila será rojo. Además, encada una de las celdas de la fila aparecerá la palabra«Rojo».

" El color de fondo de la primera fila será amarillo. Ade-más, en cada una de las celdas de la fila aparecerá lapalabra «Amarillo».

" En la tercera fila, la primera celda tendrá un fondo verdey, escrito, «Verde». La segunda celda tendrá un fondoazul y, escrito, «Azul». La tercera celda tendrá un fondonaranja y, escrito, «Naranja».

El título de la baraja será «Tabla coloreada» y debetener borde.

Realiza una página WML que contenga un formula-rio que recoja la siguiente información del usuario:nombre de pila, edad, color preferido y signo delzodiaco. Además, el campo correspondiente alsigno del zodiaco será una lista de opciones (aries,tauro, géminis, cáncer, leo, virgo, libra, escorpio,sagitario, capricornio, acuario y piscis). Una vezque el usuario haya introducido dicha información,se le debe mostrar en pantalla la misma según lasiguiente plantilla:

«Hola, NOMBRE. Sabemos que tienes EDAD años, eresZODIACO y que tu color preferido es COLOR.»

8

7

6

5

4

3

2

1

WML - Amazon Web Servicesspain-s3-mhe-prod.s3-website-eu-west-1.amazonaws.com/bcv/... · 2017. 11....

Documents

Transcript of WML - Amazon Web Servicesspain-s3-mhe-prod.s3-website-eu-west-1.amazonaws.com/bcv/... · 2017. 11....