Breve Tutorial WML
-
Upload
andres-fernando-cuellar-cardona -
Category
Documents
-
view
291 -
download
0
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.