Breve Tutorial WML

download Breve Tutorial WML

of 18

Transcript of Breve Tutorial WML

IntroduccinWML es el lenguaje que se utiliza para realizar pginas para cualquier elemento que utilice la tecnologa WAP, como algunos telfonos mviles. WAP son las siglas de Wireless Application Protocol. WAP es una serie de tecnologas que consisten en: WML, que es el lenguaje de etiquetas, WMLScript es un lenguaje de script, lo que vendra a ser JavaScript y el Wireless Telephony Application Interface (WTAI) WML corresponden a las siglas de Wireless Markup Language (Lenguaje de marcas inalmbricas). Lenguaje de marcas (parecido HTML) basado en el XML pero con tags o marcas ms restringidas, ledo e interpretado por un micro navegador instalado en el dispositivo WAP. Las prestaciones de estos navegadores estarn en relacin directa con las capacidades del dispositivo. El formato WML proviene del lenguaje HTML. Todas las pginas basadas en HTML, con fondos, dibujos, etc seran imposibles de ver desde la pantalla de un telfono mvil, por esta razn fue diseado y creado el formato WML. WML da soporte para imgenes y texto, con posibilidad de texto con formato. Las pginas hechas en WML tiene extensin .wml, los scripts .wmls y los dibujos .wbmp El elemento ms bsico de WML se denomina baraja (deck) que es como si fuera una carpeta para Windows. Dentro de la baraja tendremos elementos denominados cartas (cards). Cada baraja contiene varias cartas. Una carta es la informacin que se ve en el telfono mvil. De esta manera el browser cargar una baraja de la web. Toda la informacin estar guardada en la memoria y se podr acceder al conjunto de cartas de cada baraja de forma inmediata sin necesidad de adquirir ms informacin del web.

Sintxis de WMLWML es un lenguaje de marcas comprendido dentro del estndar XML 1.0, esto conlleva que WML debe cumplir con la sintaxis de XML 1.0. Vamos a describir brevemente los rasgos ms importantes de esta sintaxis.

Sensible a maysculas/minsculas

Todos los elementos de WML son sensibles a maysculas/minsculas, esto incluye las etiquetas, los atributos, los identificadores, las variables, etc.Etiquetas

Todas las etiquetas en WML se escriben en minsculas. Hay dos tipos de etiquetas, las que contienen elementos, para lo cual hay una etiqueta de inicio y otra de fin. Los atributos de las etiquetas han de ir siempre en la etiqueta de incio. Inicio Fin

Y las etiquetas que no contienen elementos que tienen el siguiente formato: Comentarios

Los comentarios al igual que en HTML tienen el siguiente formato:

Ejemplo sencilloPara comprender mejor como funciona una pgina WAP vamos a hacer un sencillo ejemplo en el que mostraremos el mensaje "Hola mundo". Hola mundo !

A continuacin se proceder a explicar el ejemplo:

Indica que es un documento XML de versin 1.0 por lo tanto cumple todas las restricciones y reglas de los documentos XML.

Indica el tipo de documento XML y donde localizar la especificacin del tipo de documento.

Indica que comienza un pgina WML.

Indica que comienza una tarjeta que tiene como identificador "t1" y cuyo ttulo es "Tarjeta 1". El ttulo aparecer en la lnea de ttulo del dispositivo wap. y

Indica que comienza un prrafo de texto. A diferencia de HTML esta etiqueta es obligatoria si queremos escribir texto, adems debe cerrarse con la correspondiente Hola Mundo !

Este es el texto que aparecer en nuestro navegador.

Fin de la tarjeta.

Fin de la pgina WML

Barajas y cartasA las pginas WML se les suele llamar barajas porque estn compuestas por cartas. Una carta es la unidad de informacin que un navegador WAP puede mostrar. El navegador nos permite pasar de una carta a otra dentro de la baraja para as poder acceder a todas las cartas.Baraja

Una baraja de cartas se marca con las etiquetas ... dentro de estas marcas irn todas las cartas de la baraja. Puede contener las etiquetas head,template y es obligatorio que al menos tenga una etiqueta card.Carta

Una carta es la unidad de informacin que se muestra en un navegador WAP, una carta puede contener texto, campos de datos, enlaces, etc. La etiqueta es ... y algunos de los atributos son title que nos permite indicar el ttulo de la carta y id que nos proporciona una manera de identificar la carta. El atributo id es comn para todos las etiquetas WML y nos permite identificar un elemento dentro de un documento WML. Hola mundo !

Bienvenido

Formato de textoEl texto debe ir entre las etiquetas ... ya que as est definido en el DTD de WML. Adems podemos incluir saltos de lnea con la etiqueta
. La etiqueta puede llevar los siguentes atributos: 1. align="" Puede contener los valores left, right y center. Indica la alineacin del texto. Por defecto es left 2. mode="" Puede ser warp o nowrap. warp significa que el texto puede ir en varias lneas y nowrap quiere decir que el texto no puede ser roto en varias lneas. Por defecto es warp Tambin hay que resear que aunque indiquemos el conjunto de carcteres que vamos a emplear, existen algunos que no pueden escribirse directamente como son los siguientes:Caracteres especiales Smbolo Se escribe & cedilla " abrir comillas apstrofe < > nbsp $ & " ' < > $$

cerrar comillas

A continuacin se muestra un pequeo ejemplo en el que se hace uso de estos caracteres especiales Esto es un
ejemplo
de "texto".

Aunque los navegadores WAP estn muy limitados en lo referente al apartado visual podemos hacer algunos efectos en el texto. Estas son las etiquetas para dar formato al texto:Etiqueta Significado Enfsis Mucho enfsis Cursiva Negrita Subrayado Letra grande Letra pequeoTodas esta marcas deber ir precedidas de la marca que cierra Este fragmento de cdigo muestra un ejemplo en el que se utilizan estas etiquetas de formato del texto. Esto es un texto con algo de formato para ver como funciona. TablasEn WML tambien se pueden hacer tablas, aunque estas estn mucho ms limitadas que en HTML. En WML no se puede poner tablas dentro de tablas y se debe especificar el nmero de columnas en la etiqueta . Atributos de la etiqueta :1. columns=numero Con este atributo ponemos el nmero de columnas que tendr nuestra tabla, es obligatorio ponerlo. 2. title="" Ttulo de la tabla, puede ser representado o no por el navegador. 3. align="" Con este atributo se especifica la alineacin de las columnas dentro de la tabla. C significa centrado, L alineado a la izquierda y R alineado a la derecha. Se escribe una letra por cada columna, de manera que CCR, significara que la primera y segunda columnas van centradas y la tercera alineada a la derecha. Por cada lnea pondremos una etiqueta ... y por cada celda una etiqueta ... tal y como se hace en HTML. Dato 1 Dato 2 Otro dato 4 5 6 Eventos y tareasLos eventos y las tareas nos proporcionan un mecanismo para realizar acciones sobre las tarjetas, permitindonos navegar entre tarjetas y construir pequeos interfaces para dar ms funcionalidad a las pginas. El ms importante de todos es quizs el elemento , ya que nos permite asignar una tarea sobre una accin. La etiqueta puede contener uno de las siguientes tareas, , , , que indican la accin que se realiza sobre la etiqueta. Los atributos ms importantes que contiene la etiqueta son: type="", label="" y name="".1. type="" Indica sobre qu botn del navegador se aplica la accin, las ms comunes son "accept", "prev" y "help". 2. label="" Texto que aparece asociado a la accin. 3. name="" Nombre de la accin, es imprescindible si vamos a asignar ms de una accin a un mismo tipo. El contenido de la etiqueta es la tarea que se realizar al seleccionar esa accin, y estas tareas pueden ser: 1. 2. 3. 4. Permite ir a la direccin indicada en el atributo href. Permite ir a la tarjeta anterior, en la historia del navegador. Es una accin que no realiza nada. ... Refresca el contenido de la tarjeta actual, volvindola a pedir al servidor.A continuacin se muestra un ejemplo de la utilizacin de estas acciones. Primera tarjeta Segunda tarjeta Tercera tarjeta EnlacesAl igual que en HTML podemos seleccionar parte de un texto o una imagen y que este sea un enlace a otra pgina o que realice una tarea.Para realizar esto existe dos etiquetas ... y .... es mas completa y es mas sencilla de usar. La etiqueta ... nos permite seleccionar un texto o imagen y hacer que sea un enlace a otra pgina, de una manera muy similar a la etiqueta ... de HTML. Contiene el atributo href en el cual ponemos la URL a donde nos llevar el enlace. A continuacin se muestra un ejemplo:Ir a tarjeta 2Con la etiqueta ... podemos adems indicar que se realice una accin al activar el enlace. Las acciones que podemos incluir son: 1. Permite ir a la direccin indicada en el atributo href. 2. Permite ir a la tarjeta anterior, en la historia del navegador. 3. ... Refresca el contenido de la tarjeta actual, volvindola a pedir al servidor. A continuacin se muestra un ejemplo: Ir a la tarjeta anterior. Ir a la tarjeta 2 ImgenesEl uso de imgenes en las navegadores WAP esta limitado, pero aun as es posible poner imgenes en dichas pginas. La etiqueta para poner imgenes en las pginas WAP es , con ella podemos poner una imagen e indicar un texto alternativo por si nuestro navegador WAP no es capaz de representar dicha imagen. La etiqueta tiene los siguientes atributos: 1. alt="". Texto alternativo que se visualiza si nuestro navegador no es capaz de visualizar la imagen.2. src="". URL de la imagen. Normalmente sta ha de estar en formato .wbmp 3. vspace="numero". Espacio vertical en blanco entre la imagen y el resto de la pgina. 4. hspace="numero". Espacio horizontal en blanco entre la imagen y el resto de la pgina. 5. Align="". Puede ser top, middle o bottom indica la alineacin de la imgenes con respecto al texto. o top. Alineado a la parte superior. o middle. Alineado al centro. o bottom. Alineado con la parte inferior del texto. 6. height="numero". Altura de la imagen. 7. weight="numero". Anchura de la imagen. A continuacin se muestra un ejemplo en el que se utilizan algunos de los atrubutos descritos:Imgenes en movimientoPara crear imgenes en movimiento utilizamos el contador de tiempo "timer". El formato de las imgenes wml es wbmp. A continuacin se muestra un ejemplo de cdigo para imgenes en movimiento: Fin
Otra vez! Etiquetas La etiqueta card La etiqueta template La etiqueta access La etiqueta do La etiqueta go Las etiquetas prev, noop y refresh La etiqueta timer La etiqueta input La etiqueta select La etiqueta option La etiqueta optgroup La etiqueta postfield La etiqueta setvarLa etiqueta card Los atributos de esta etiqueta son: id. Nombre de la card. Usado para referirse a ella. Los valores son de tipo texto. title. Es el ttulo que sale en la parte superior del navegador al entrar en la card. Los valores son tipo texto . newcontext. Borra el historial de navegacin. Resetea todas las variables. Slo acta al realizar el evento go. Los valores pueden ser true false(valor por defecto). ordered. No se explica por el momento. Los valores pueden ser true(valor por defecto) false. onenterforward. Direccin a la que se va al ocurrir este evento(ir adelante) usando la etiqueta go. Se amplia ms adelante. El valor que toma es una Href. URL o direccin de otro card. onenterforward. Direccin a la que se va al ocurrir este evento(ir atrs) usando la etiqueta go. Se amplia ms adelante. El valor que toma es una href. URL o direccin de otro card. ontimer. Direccin a la que se va al ocurrir este evento(reloj) usando la etiqueta timer.Se amplia ms adelante. El valor que toma es una Href. URL o direccin de otro card.La etiqueta template Los atributos de esta etiqueta son: id. Nombre de la plantilla. Usado para referirse a ella. Los valores son de tipo texto. onenterforward. Direccin a la que se va al ocurrir este evento(ir adelante) usando la etiqueta go. Se amplia ms adelante. El valor que toma es una Href. URL o direccin de otro card. onenterforward. Direccin a la que se va al ocurrir este evento(ir atrs) usando la etiqueta go. Se amplia ms adelante. El valor que toma es una href. URL o direccin de otro card. ontimer. Direccin a la que se va al ocurrir este evento(reloj) usando la etiqueta timer.Se amplia ms adelante. El valor que toma es una Href. URL o direccin de otro card.La etiqueta access Los atributos de esta etiqueta son: id. Nombre de la etiqueta. Usado para referirse a ella. Los valores son de tipo texto. domain. Dominio de acceso. El valor es una Href. path. Direccin de acceso. El valor es una Href.Notas: Esta etiqueta debe ir dentro de la etiqueta ... . Si no se aplica la etiqueta access el acceso es libre. La etiqueta do Los atributos de esta etiqueta son: name. Nombre del objeto. Usado para referirse a ella. Los valores son de tipo texto. label. Texto que aparece al pulsar el botn options en el navegador para iniciar el evento. Los valores son de tipo texto. type. Define el tipo de evento que se va a realizar o accept. Aceptar o prev. Ir atrs o reset. Resetea el estado actual o options. Operaciones opcionales o delete. Borra un objeto o seleccinLa etiqueta go Los atributos de esta etiqueta son: href. Direccin a la que se quiere ir. El valor es una Href. Url o nombre de otra card. method. Utilizado para enviar datos al servidor. Se amplia con el tema postfield. Los valores pueden ser post o get.Las etiquetas prev, noop y refresh Las etiquetas no tiene atributos:. Ir a la pgina anterior. Ejemplo: . Ninguna operacin. Ejemplo: . Resetea los valores. Ejemplo: La etiqueta timer Los atributos de esta etiqueta son: id. Identificador del objeto. Usado para referirse a ella. El valor es de tipo texto value. Tiempo que debe pasar para que se inicialize el evento. Se expresa en dcimas de segundo. El valor es de tipo numrico.La etiqueta inputLos atributos de esta etiqueta son: name. Nombre de la variable que va a tomar los datos que introduzca el usuario(Obligatorio). El valor es de tipo texto. value. Valor que aparece en el campo input por defecto. Debe cumplir las reglas de formato de este campo o si no ser ignorado; Tambin ser ignorado si la variable ya tiene un valor previo. El valor es de tipo texto. type. Forma en la que se introducen los datos. o text Texto normal o password Aparecen asteriscos en vez del texto tecleado. NO se recomienda, ya que para escribir con un telef. mvil es muy complicado. format. Formato en que se acepta la introduccin de datos. El formato por defecto es *M, o sea cualquier caracter en maysculas. o A= Cualquier carcter no numrico en maysculas o a= Cualquier carcter no numrico en minsculas o N= Slo nmeros o X= Cualquier carcter en maysculas o x= Cualquier carcter en minsculas o \dato= Dato es un valor que queremos que aparezca tal cual emptyok. En true si queremos que no sea obligatorio introducir este dato, ya que si tenemos un formato en un campo y no queremos cubrirlo, si lo dejamos en blanco puede no cumplir el formato, lo que nos da un error. Los valores son true o false(Por defecto si el campo tiene formato). size. Especifica el ancho en caracteres del input. El valor es numrico. maxlenght. Especifica el nmero mximo de caracteres a introducir. El valor es numrico. title. Ttulo usado en la presentacin del objeto. El valor es de tipo texto. tabindex. Especifica el orden en que se accede a los distintos objetos dentro de una card. Por defecto de arriba a abajo. El valor es numrico.Ejemplo:Acepta 25 letras en maysculas y las almacena en la variable ape1. No es un campo obligatorio(emptyok=true)Acepta solamente nmeros y ya pone el los quiones y el 19, almacenando esto en la variable fecha. Es un campo obligatorio.La etiqueta select Los atributos de esta etiqueta son: name. Nombre de la variable que va a tomar los datos que introduzca el usuario(Obligatorio). El valor es de tipo texto. value. Valor que tiene la variable por defecto. El valor es de tipo texto. multiple. Posibilidad de seleccionar ms de una opcin. Si es as el valor de la variable ser ambos valores separados por ";". Los valores pueden ser true false(por defecto). ivalue. Determina el index de la opcin que queremos que est seleccionada por defecto. El primer item es 0, el segundo 1.... El valor es de tipo numrico. title. Ttulo usado en la presentacin del objeto. El valor es de tipo texto.Notas: Siempre utilizaremos la opcin ivalue=0, o al menu que queremos que sea seleccionado por defecto. Siempre se acaba con la etiqueta . Dentro de esta etiqueta deben ir o La etiqueta option Los atributos de esta etiqueta son: value. Valor que toma la variable al seleccionar este item. El valor es de tipo texto. title. Ttulo usado en la presentacin del objeto. El valor es de tipo texto. onpick=. Evento que ocurre al seleccionar o deseleccionar un item. El valor es un Href. URL o direccin de otra cardNotas: Siempre se acaba con la etiqueta . Debe estar dentro de la etiqueta Ejemplo: Ninguno Perro Gato Explicacin: Tenemos 3 opciones, y por defecto ninguna seleccionada(ivalue=1). Slo podemos elegir 1 de ellas. Si elegimos Perro, la variable mascota es P, gato es G y si no elegimos nada N(value="N").La etiqueta optgroup Los atributos de esta etiqueta son:title. Ttulo usado en la presentacin del objeto. El valor es de tipo texto.Notas: Siempre se acaba con la etiqueta . Esta etiqueta es usada para agrupar a varias option Ejemplo: USA Mxico Espaa Francia Explicacin: Tenemos 2 opciones dentro de cada subgrupo. Slo podemos elegir 1 de ellas. Primero seleccionamos el continente, y dependiendo del seleccionado, nos salen las siguientes opciones, y all elegimos el valor que asignaremos a la variable Pais. La etiqueta postfield name. Nombre de la variable que va a enviar el usuario(Obligatorio). El valor es e tipo texto. value. Valor que toma la variable a enviar. El valor es de tipo texto.Notas: Normalmente los datos deben ser enviados en formato escape al servidor, por lo que si los recibimos de un input debemops transformarlos(Ms informacin en Variables). Se utiliza dentro de una etiqueta go. Acaba siempre con una barra /. No todos los dispositivos WAP aceptan el envio de datos. Ejemplo: Explicacin: Enviamos los campos Dinero=10000, Num_Cta=12345 y Operacion=Deposito al servidor La etiqueta setvar Los atributos de esta etiqueta son: name. Nombre de la variable que va a inicializar(Obligatorio). El valor es de tipo texto. value. Valor que toma la variable. El valor es de tipo texto.Notas: Se suele utilizar dentro de otras etiquetas. Acaba siempre con una barra / Ejemplo Ejemplo comentadoA continuacin se muestra el cdigo de un ejemplo el cual ser descrito brevemente. Bienvenido al primer banco que opera por el mvil DNI: Seleccione la operacin que desea realizar Seleccione su cuenta corriente: 2010-8893 2019-2232 2321-1221 Bienvenido a la pgina de transferencias
Volver Estas imagenes muestran el resultado de "simular" el cdigo descrito anterioremente.