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 $$ $ &#241; ñ &#169; © &#209; Ñ &#225; á &#193; Á &#233; é &#201; É &#237; í &#205; Í &#243; ó &#211; Ó &#250; ú &#218; Ú 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