WML. Internet para móviles. En esta Unidad aprenderás a: Descubrir las limitaciones de los dispositivos WAP.

Transcripción

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

2 . La tecnología móvil. La tecnología móvil En 99, 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 000, el WAP Forum se convirtió en Open Mobile Alliance y agrupaba ya a más de 00 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 Kbps (kilobits por segundo). En la práctica, ésta se reduce a entre y Kbps en sentido descendente (red-terminal) y entre 9 y Kbps en sentido ascendente (terminal-red). Es decir, su velocidad es comparable a la de una línea fija de k, aceptable pero insuficiente si se compara con las conexiones de banda ancha existentes en la actualidad. 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.). 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 00 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. Fig... Esquema del sistema de comunicaciones tradicional entre un terminal WAP y un servidor web. 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 Móvil Documento WML Gateway Documento HTML Servidor

3 . Estructura básica del lenguaje WML. 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 ) 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,. 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. 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=".0"?> A continuación, se añade la etiqueta que indica que empieza la parte correspondiente a un documento WML. 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. 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=".0"?> <card id="id" title="título "> Contenido <card id="carta" title="hola Mundo">

4 . 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 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 ( Firefox ( y Opera ( 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.. para Windows, el cual se encuentra en el CD del alumno o se puede descargar de Para otras plataformas será necesario utilizar otros simuladores, como SmartPhone Emulator Developer Edition.0 ( Fig... UltraEdit, el navegador Opera y el simulador Openwave, tres herramientas de gran utilidad para trabajar con WML.

5 . Estructura básica del lenguaje WML 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. Se escribe la estructura básica de una baraja WML definiendo sólo una carta. <?xml version=".0"?> <card id="id" title="título "> Contenido Paso. 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>). <?xml version=".0"?> <card id="id" title="título "> <p>mi primera carta</p> Paso. Para ponerle el título, por ejemplo CP (o Caso práctico ) se debe editar la línea <card id="id" title="título ">. En su lugar se pondrá: <card id="id" title="cp"> Paso. 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.). <?xml version=".0"?> <card id="id" title="cp"> <p>mi primera carta</p> Fig... Solución del Caso práctico. Caso práctico 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. <?xml version=".0"?> <card id="id" title="título "> Contenido <card id="id" title="título "> Contenido 9 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: 9 0 <?xml version=".0"?> <card id="cartauno" title="carta "> <p>ésta es la carta.</p> <p><a href="#cartados">link a la carta </a></p> <card id="cartados" title="carta "> <p>ésta es la carta.</p> <p><a href="#cartauno">link a la carta </a></p> <p><a href="hola_mundo.wml">ir a otro sitio</a></p>

6 . Contenidos: texto, tablas e imágenes. 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 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. se muestran algunos de los atributos que se pueden aplicar a los textos. <br/> Etiquetas <big></big> Salto de línea Tamaño grande Significado 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 <em></em> <small></small> <strong></strong> Enfatizado Pequeño Negrita a la vez que enfatizada 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"/>). Tabla.. 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/> 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, 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="c" title="t"> 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:

7 . 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 coinciden con los que ya se vieron anteriormente en HTML (véase la Unidad ) aunque otros son totalmente diferentes. (Veáse la Tabla.). La etiqueta <p> y el ajuste de texto Código $$ &#; &#; Símbolo $ á é Código &#;  Símbolo ñ Ñ Á É Para evitar posibles problemas de visualización de un texto en la pantalla de un móvil, WML incorpora la opción de párrafo wrap (envolver). Ésta se puede usar como parámetro opcional para decir si se quiere que el texto aparezca en una sola línea o bien se quiere que se ajuste automáticamente según el ancho de la pantalla. Para obtener lo primero, se escribirá, dentro de la etiqueta de apertura de párrafo, mode="nowrap": &#; &#; í ó  &#; Í Ó <p mode="nowrap">este texto es largo y a lo mejor no se verá entero en la pantalla</p>  ú &#; Tabla.. 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. Se escribe el esquema de una baraja con una carta (se puede utilizar el ejemplo del Caso práctico ). Paso. Se escribe un párrafo con los formatos que hay en la Tabla.. 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. Se inserta dicho texto dentro de etiquetas de párrafo <p></p> y se organiza dentro del esquema de la baraja. <?xml version=".0"?> <card id="id" title="cp"> <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> Paso. Sólo queda comprobar el resultado (véase la Figura.). Fig... Solución del Caso práctico.

8 . Contenidos: texto, tablas e imágenes 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á tantas líneas como sean necesarias para mostrar todo el texto. En la Figura. se puede observar el resultado de aplicar las opciones wrap y nowrap. src="url_imagen". Indica la URL de la imagen. 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. 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. Fig... 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 Bit- Map, 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. 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): height="n". Sirve para indicar que la imagen debe tener una altura determinada. 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.): <?xml version=".0"?> <card id="id" title="ejemplo"> <img src="paloma.wbmp" alt="paloma" align="middle"/> En este caso, la URL hace referencia a una imagen (paloma.wbmp) que se encuentra en la misma carpeta que el código. Fig... Inserción de una imagen en una página WML. 9

9 . Contenidos: texto, tablas e imágenes 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. Escribimos el esquema de una baraja con una carta. Paso. Realizamos el código relacionado con la tabla: <table id="tabla" columns="" title="tabla" align="ccc" border=""> </table> Paso. Definimos dentro de la tabla las dos filas, la primera con los nombres y la segunda con las edades: <tr> <td>juan</td> <td>lara</td> </tr> <tr> <td></td> <td></td> </tr> Paso. Juntamos todo el código correspondiente a la tabla en la zona de contenido del esquema de la carta y comprobamos el resultado: 9 0 <?xml version=".0"?> <card id="id" title="cp"> <table id="tabla" columns="" title="tabla" align="ccc" border=""> <tr> <td>juan</td> <td>lara</td> </tr> <tr> <td></td> <td></td> </tr> </table> Fig... Solución del Caso práctico. Caso práctico 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. 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: <table id="tabla" columns="" title="tabla" align="ccc" border=""> Así mismo, también se puede añadir cierto color a la tabla con la opción bgcolor. <table id="tabla" columns="" 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. 0

10 . Variables, tareas y eventos. 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 $). 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="" 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 especifica exactamente el formato que debe tener la información que introduzca el usuario (véase la Tabla.). Valor A a N X x M 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. Significado Tabla.. Valores aceptados por el parámetro format. Cualquier carácter. El navegador puede suponer, por simplicidad, que serán mayúsculas pero permitirá la entrada de cualquier carácter. 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, es el valor de la variable edad. <setvar name="edad" value=""/> m *f nf Cualquier carácter. El navegador puede suponer, por simplicidad, que serán minúsculas pero permitirá la entrada de cualquier carácter. 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. 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

11 . 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. 9 0 <?xml version=".0"?> <card id="id" title="ejemplo"> <p> Nombre: <input name="nombre" size=""/> <br/> Apellidos: <input name="apellidos" size="" format="*x"/> <br/> Edad: <input name="edad" size="" format="n"/> <br/> </p> 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. 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. <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 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.