WML Wireless Markup Languaje. WML Cualquier editor de textos Servidor de páginas WML  Configurar los MIME TYPES Case sensivite Conceptos que se manejan:

Presentación del tema: "WML Wireless Markup Languaje. WML Cualquier editor de textos Servidor de páginas WML  Configurar los MIME TYPES Case sensivite Conceptos que se manejan:"— Transcripción de la presentación:

1 WML Wireless Markup Languaje

2 WML Cualquier editor de textos Servidor de páginas WML  Configurar los MIME TYPES Case sensivite Conceptos que se manejan:  Carta  Baraja ContenidoMIME typeExtensión Código WMLtext/vnd.wap.wml.wml WMLScripttext/vnd.wap.wmlscript.wmls Imagen WBMPimage/vnd.wap.wbmp.wbmp WML Compiladoapplication/vnd.wap.wmlc.wmlc WMLScript Compiladoapplication/vnd.wap.wmlscriptc.wmlsc

3 Cartas y Barajas Cartas  Pantallas con poca información Barajas  Conjunto de cartas

4 Cabecera ‘Abrir baraja ‘Abrir carta ‘Cerrar carta ‘Cerrar baraja

5 Etiquetas Parámetros de etiquetas “ “ 2 tipos:  Simples  Pareadas o compuestas …

6 Cartas … Parámetros  id = “identificador_carta”  title = “titulo_carta” Texto en cartas  … Parámetros  align:  left  right  center  mode  wrap: texto varias líneas  nowrap: una línea

7 Ejemplo Hola Mundo!

8 … comandos Salto de línea 

9 Formatos de texto... Texto enfatizado... Texto fuerte... Texto en cursiva... Texto en negrita... Texto subrayado... Texto más grande... Texto más pequeño <<>> ""&& $$$ SPACE ááéé ííóó úúññ ÑÑÁÁ ÉÉÍÍ ÓÓÚÚ

10 Ejemplo Texto en enfasis, cursiva, fuerte, subrayado, grande, pequeña

11 Tabla Las tablas son una colección de filas y columnas  Útiles para mostrar datos de forma ordenada. Directiva pareada: ....  Esta directiva admite los siguientes parámetros: columns, title, align, id.  El primero de estos parámetros es obligatorio: columns="n" siendo n un entero mayor o igual que 1, estamos diciendo cuántas columnas va a tener la tabla.  Los otros tres parámetros ya no son obligatorios.  title=“Un titulo" Especifica el título de la tabla  align="XX...X" especifica la alineación de cada columna. Cada X es una letra que puede ser una de estas tres: L, C, R; habrá tantas letras como columnas tenga la tabla. El significado de estas letras es: L = left (izquierda), C = center (centrado) y R = right (derecha).  id="ident" Es un identificador para la tabla.  Renglones y Celdas de la tabla, Etiqueta pareada... y dentro de cada fila, Celdas con la directiva....

12 Uso de tablas Directiva  … Parámetros:  columns  title  align  id Etiquetas  Delimitar renglones …  Delimitar celda … Ejemplo: 

13 Ejemplo de tabla <!DOCTYPE wml PUBLIC "-//WAPFORUM DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml"> Celda(1,1) Celda(1,2) Celda(1,3) Celda(2,1) Celda(2,2) Celda(2,3) Ejemplo de tabla

14 Tareas Especifica un proceso Realizado en respuesta a un evento Navegación entre cartas y barajas Etiqueta  Acciones que el usuario puede hacer en una carta.  Nivel de baraja y de carta

15 Etiqueta Parámetros  type: Acciones a ejecutar accept. Acepta la acción asignada y se ejecuta prev. Ir hacía atrás en el historial help. Petición de ayuda reset. Limpia el estado options. Opciones u operaciones adicionales delete. Borra un elemento o una acción unknown. genérico, cadena vacía  name. Id de  label. Texto que aparece en el navegador, botón es título

16 Tareas  . Página anterior del historial . Ninguna tarea  Actualización del contexto

17 Ejemplo > En este ejemplo, vamos a ver como navegar entre distintas cartas y barajas. Esta es la primera carta de esta baraja. Para acceder a la segunda, tenemos esta opcion: Ahora estamos en la segunda carta. Podemos volver a la primera, o podemos visitar la tercera, segun lo que elijas: Y ahora estamos en la tercera carta. Podemos regresar a la anterior, o puedes ir a la segunda baraja, para ver como moverte entre barajas.

18 Ahora estamos en la segunda carta. Podemos volver a la primera, o podemos visitar la tercera, segun lo que elijas:

19 Parámetros  hreft. URL a visitar, obligatorio, en la misma carta # Ejemplo:  method. Enviar datos al servidor GET POST

20 Enlaces Etiquetas pareadas: ... y ... La etiqueta  Delimita un enlace Todo lo que vaya dentro de ella será lo que forme parte del enlace. No se deben anidar enlaces dentro anchor El parámetro title. Texto el cual identificará al enlace

21 En esta pagina el anchor engloba el texto Segunda carta de esta baraja. Venimos del enlace de la carta anterior. Carta anterior. Siguiente baraja

22 Carta 2 Carta 3

23 Etiqueta …...  Texto descriptivo para dicho enlace. Parámetros  href: contendrá el URL de la página.  title: será una etiqueta para poder seleccionar el enlace en algunos dispositivos. Es recomendable no exceder de 6 caracteres.

24 Ejemplo Similar con anchor y go, pero abreviando con a: Volver a la otra baraja, carta 2

25 Carta 1 Carta3 Otra Baraja

26 Carta 1 Carta 2 Carta 3 Carta 2 Carta 1 Carta3 Otra Baraja Carta 3

27 Plantilla La opción de la plantilla se aplicará a todas las cartas de la baraja.  Etiqueta... Esta etiqueta define una plantilla para las cartas de una baraja. Los eventos especificados se aplicarán a todas las cartas de la baraja, como si se aplicaran una a una. Una carta dada puede sobreescribir el comportamiento definido en la etiqueta.

28 Ejemplo template Plantilla de ejemplo Carta 1 con plantilla, do con name="atras" sobreescrito, y do adicional. Carta 2 con plantilla y do adicional que no sobreescribe al do de la plantilla. Carta 3 con plantilla

29

30 Eventos Hay algunas etiquetas WML en las que podemos especificar una acción a realizar cuando se produzca un determinado evento,  Evento intrínseco. Asignar una tarea para que esta sea ejecutada cuando se de ese evento. Esta asignación puede hacer de dos formas.  Directa, es decir, dentro de la etiqueta que admite al evento, añadirlo como un parámetro más y, tras un igual, poner entre comillas la URL a la que queremos acceder cuando suceda este evento ...la carta...  Etiqueta pareada. Se trata de una "versión" expandida de la anterior, que permite un mayor control sobre el comportamiento del navegador.  Una etiqueta debe llevar como parámetro type el tipo de evento que va a tratar, y dentro de las etiquetas se ha de especificar el tratamiento completo del evento

31 Evento intrínseco Evento Afecta a la(s) etiqueta(s) Descripción ontimer card, template Este evento se da cuando finaliza un temporizador. Los temporizadores son especificados usando la etiqueta onenter forw ard card, template Este evento se da cuando el usuario escoge ver una carta vía la tarea go o cualquier otro método que cause un efecto similar. Esto incluye entrar en una carta mediante un script o por un enlace. Puede especificarse tanto en una carta concreta como en una plantilla. Si es en una plantilla, el evento será aplicado a todas las cartas salvo en aquella(s) en la(s) que se sobreescriba. onenterba ckward card, template Este evento se da cuando el usuario escoge ver una carta vía la tarea prev o cualquier otro método que cause un efecto similar. onpickoption Este evento se da cuando el usuario selecciona o deselecciona un cierto elemento de una lista

32

33 Ejemplo de eventos <!DOCTYPE wml PUBLIC "-//WAPFORUM DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml"> En esta carta se define un evento en su version expandida, con la etiqueta <onevent> Esta carta es posesiva y no dejara avanzar hacia atras en algun caso. Una tercera carta

34 Input La etiqueta.  Esta etiqueta permite la entrada de texto, que puede tener un formato a especificar en uno de sus parámetros.  Si los datos introducidos no obedecen este patrón, el navegador debe avisarlo y dar la opción de volver a introducir los datos.  No se debe inicializar el valor de la etiqueta con un dato que no obedezca al formato dado.

35 Parámetros name  Especifica un nombre de variable sobre el que se dará un valor;  El valor será la entrada del usuario. value  Indica un valor por defecto para la variable usada en name.  Si este valor no obedece al formato, será ignorado. type  Especifica el tipo de entrada de datos.  Puede tomar uno de los dos valores siguientes: text, password; siendo text el valor por defecto. format  Este parámetro especifica una máscara de entrada para los datos del usuario.  La cadena consiste en una serie de caracteres de control que a continuación explicamos.  El formato por defecto es "*M".

36 Variables El WML posibilita la utilización de variables dentro del código. Las variables se sustituyen por su valor, en caso de tener alguno. En el siguiente ejemplo, se ve como se inicializa una variable y las diferentes formas de que se puede referenciar. <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml"> Variables: $var1 $(var1) $(var1:e)

37 Cont… Variables Se pueden utilizar la misma variable en diferentes cartas, variando su valor. <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml"> Estamos en: $var1 Siguiente Estamos en: $var1 Siguiente

38 Imágenes En los dispositivos móviles se permite la visualización de imágenes, pero éstas deben estar en formato WBMP o JPG, en lugar de las utilizadas en HTML que pueden ser gif, jpg o bmp. También hay que indicar que entre los terminales móviles existen diferencias en cuanto al tipo de imágenes que soportan, por lo que se recomienda conocer el tipo de imágenes soportadas por el móvil con el que se va a trabajar. En el caso de simuladores no existen graves problemas con imágenes. Hay que tener en cuenta el tamaño de la página tras insertar una imagen, ya que en un terminal real puede dar error, porque se ha sobrepasado el tamaño, y en el simulador puede visionarse perfectamente. Hay distintos medios para producir una imagen WBMP, una de ellas es crear las propias imágenes, para ello se puede utilizar el programa Generador WBMP. Además este programa permite convertir de un formato no soportado como gif, etc... a tipo wbmp. La forma de introducir imágenes es la siguiente: <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" " http://www.wapforum.org/DTD/wml_1.1.xml"> El atributo alt es obligatorio, es un texto alternativo a la imagen, ya que si esta no se puede visualizar correctamente o el navegador no permite su visualización, se imprimirá este texto.

39 INPUT Introduce tu datos: Nombre: Apellidos: Edad: DNI:

40 Formatos A Permite cualquier carácter alfabético (en mayúsculas) o de puntuación a Permite cualquier 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, donde f es uno de los formatos vistos anteriormente. Este formato sólo puede aplicarse una vez y debe aparecer al final de la cadena de formatos.

41 Select El elemento select permite al usuario escoger de una lista de opciones. Cada opción está especificada por un elemento option que tiene una línea de texto formateado. Se puede organizar los elementos option dentro de grupos jerarquizados usando el elemento optgroup. Se debe incluir uno de los siguientes elementos al menos una vez dentro de un elemento select:  optgroup  option

42 Si el atributo iname existe, los índices de la variable denominada por el iname son usados para seleccionar la opción. Si la variable especificada no está colocada, el índice se presume como 1. Si algún índice es más grande que el número de opciones de la lista de selección, se selecciona la última opción. Si el atributo iname no existe, pero si existe el atributo name, el valor de la variable especificada por name es utilizado para seleccionar las opciones. Si la variable especificada por name no ha sido fijada o ningún elemento option tiene un atributo value emparejando el valor, se selecciona la primera opción.

43 Sintaxis multiple=boolean  Si se coloca este atributo con valor true, la lista de selección acepta múltiples selecciones.  Si no se coloca, la lista de selección acepta solo una opción de selección simple. El valor por defecto es false. name=nmtoken  El atributo name indica el nombre de la variable que toma el valor del elemento elegido.  La variable se fija con el valor de la cadena del elemento option elegido, el cual se especifica con el atributo value.  El valor de la variable name se utiliza para preseleccionar opciones de la lista de selección. value=vdata  El atributo value indica el valor por defecto de la variable especificada por el atributo name.  Si la variable especificada por el atributo name no tiene un valor cuando se muestra la carta, el terminal le asigna el valor especificado en el atributo value.  Si la variable name ya contiene un valor, se ignora el atributo value. Hay que señalar que cualquier aplicación del valor por defecto se realiza antes de que la lista sea preselecciónala con el valor de la variable name.  Si este elemento permite la selección de múltiples opciones, el resultado de la elección del usuario es una lista de todos los valores seleccionados, separados por puntos y aparte. A la variable name se le asigna este resultado. Además el atributo value se interpreta como una lista de opciones de preselección separados por puntos y aparte. iname=nmtoken  El atributo iname indica el nombre de una variable que contiene un numero de índice.  El terminal del usuario utiliza el numero de ¡índice para colocar la opción por defecto. El numero 1 especifica el primer articulo, el numero 2 el segundo, y as¡ sucesivamente. Un numero cero de índice indica que no se selecciona ninguna opción. La numeración del ¡índice empieza en uno y se incrementa monótonamente. ivalue=vdata  El atributo ivalue indica que el índice de el elemento option se selecciona por defecto.  Si la variable especificada por el atributo iname no está fijada cuando la carta es mostrada, se le asigna la entrada seleccionada por defecto. Si la variable ya contiene un valor, se ignora el atributo ivalue. Si el atributo iname no está especificado, el valor ivalue se aplica cada vez que se muestra la carta.  Si este elemento permite la selección de múltiples opciones, el ¡índice que resulta de la elección del usuario es una lista de los índices de todas las opciones seleccionadas, separados por puntos y aparte (por ej. 1;2). La variable iname se coloca con este resultado. Además, el atributo ivalue se interpreta como una lista de opciones preselecciónalas separadas por puntos y coma. title=vdata  Este atributo especifica un título para el elemento select, el cual puede usarse en la presentación de este objeto. tabindex=number  El elemento tabindex especifica la posición "tabbing" del elemento actual. Esta posición indica el orden relativo en el cual los elementos son atravesados cuando se va dentro de una carta simple de WML. Un valor tabindex numéricamente mayor indica un elemento que va después en la secuencia que un elemento con un valor menor.

44 Ejemplos Selecciona t tus números favoritos: UNO DOS TRES

45 Ejemplo Selecciona tu número favorito: UNO DOS

46 Ejemplo Selecciona tu número favorito: UNO DOS

47 Ejemplo optgroup Selecciona una país UNO DOS TRES CUATRO CINCO

48 WMLS Pesos a dólares Tipo de cambio Resultado: $(resultado) /* WMLScript file created by the Openwave SDK */ extern function calcular(cantidad,cambio) { var dolar = (cantidad/cambio); var dolarString = String.toString(dolar); dolarString = String.format("%.2f", dolarString); WMLBrowser.setVar("resultado", dolarString); WMLBrowser.refresh(); }

49 Librerías El WmlScript tiene seis librerías con sus funciones, que nos permitirán hacer muchas cosas:  Lang Funciones de aritméticas  Float Funciones para manejar números con decimales  no todos los browsers soportan esta librería, porque hay algunos dispositivos que sólo admiten números enteros  String Funciones para manejar cadenas de texto  URL Funciones para manejar URLs  WMLBrowser Funciones para leer y escribir variables WML y ejecutar algunas tareas WML  Dialogs Funciones para diálogos  Mensajes en la pantalla que esperan una respuesta del usuario