Introducción a WML - Hosting Miarrobafersystem.webcindario.com/manual/programacion_wap.pdf ·...

1

Introducción a WML(Wireless Markup Language)

Publicación Web para múltiples dispositivos de acceso

Jorge Blanco RodríguezRosa Mª García Rioja

Mario Muñoz Organero 2

¿Dónde estamos?

• Componentes WAE:

WML

WMLScript

WTAI

Formatos WBMP...

XHTML(WAP 2.0)

CHTML(opcional)

EFI

iHTML(opcional)

3

Índice

• Introducción• Estructura• Formato del texto• Tablas• Imágenes• Navegación

– Tareas– Enlaces

• Head– Acceso– Metainformación

• Template• Eventos• Animaciones

4

Índice (2)

• Con Mario Muñoz:– Variables– Entrada de datos– WML 2.0

5

Introducción

• Concepto:– “Wireless Markup Language (WML) es un

lenguaje de marcado basado en XML y usado para crear contenido para dispositivos móviles”

• Tipos MIME:Contenido MIME type Extensión

Código WML text/vnd.wap.wml .wmlWMLScript text/vnd.wap.wmlscript .wmlsImagen WBMP image/vnd.wap.wbmp .wbmpWML Compilado Application/vnd.wap.wmlc .wmlcWMLScript Compilado Application/vnd.wap.wmlscriptc .wmlsc

6

Estructura

• Case-sensitive• Tipos de elementos (etiquetas):

– Simples: <etiqueta />– Pareadas: <etiqueta> ... </etiqueta>

• Encabezado:

<?xml version="1.0"?><!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"

"http://www.wapforum.org/DTD/wml_1.1.xml">

2

7

Estructura (2)

• Estructura:<?xml version="1.0"?><!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN "

"http://www.wapforum.org/DTD/wml_1.1.xml"><wml>

Aqui va el codigo...</wml>

• Comentarios– 

8

Estructura (3)

• Decks y cards– Página: Deck (Baraja) ? Página .wml– Dividida en: Card (Carta) ? Pantalla en el

navegadorDECK2

card1

card2

card3

DECK1

card1

card2

card3

9

Estructura (4)

• Un primer ejemplo:

<?xml version="1.0"?><!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"

"http://www.wapforum.org/DTD/wml_1.1.xml"><wml>

<cardi d="First_Card">Esto es una card

</card>

</wml>10

Ejercicio

<?xml version="1.0"?><!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN""http://www.wapforum.org/DTD/wml_1.1.xml"><wml>

<card id="First_Card"><do type="accept" label="Next">

<go href="#Second_Card"/></do>Pulsa next para mostrar la siguiente card

</card><card id="Second_Card">

<do type="accept" label="Back"><go href="#First_Card"/>

</do>Esta es la segunda card

</card></wml>

11

Ejercicio: ¿Qué veremos?

• El resultado será algo como:

Pulsat next para mostrar la segunda card

next

Esta es la segunda card

back

12

Ejercicio

• Ahora probad a sustituir en la segunda card:

<go href="#First_Card"/>• Por:

<prev/>

3

13

Ejercicio

• Añadir una tercera card, a la que se pueda acceder desde la segunda con un botón de tipo options

• El resto de botones ponedlos de tipo accept

• Desde la nueva carta se debe poder acceder a la segunda que teníamos

14

Botones de acción

• Muchos posibles tipos de botones• Soportados por los terminales WAP

– ‘accept’, ‘prev’ y ‘options’

• Resto de acciones que se definen en WML (‘next’, ‘clear’, ‘delete’, ‘help’, etc.) son tratadas como si correspondiesen al tipo ‘options’ en la mayoría de los teléfonos

15

Botones de acción (2)

• La ubicación de los botones es diferente en cada microbrowser:

Openwave

Accept Options

16

Ejercicio

• A partir del ejercicio anterior, añadir más opciones al type=options y comprobar su funcionamiento

• En Openwave vemos “back” y “Menu”• Añadir el atributo “name” en el tag “do”

para distinguir un botón de otro. Si no, es posible que no vaya bien en algunos teléfonos

17

La etiqueta card

• Atributos:– id: Nombre de la card, usado para referirse

a ella (Texto)– title: Es el título que sale en la parte

superior del navegador al entrar en la card. No es interpretado por el simulador de Openwave (Texto)

– newcontext: Borra el historial de navegación. Resetea todas las variables. Sólo actúa al realizar el evento go (true o false -valor por defecto-)

18

La etiqueta card (2)

• Más atributos:– onenterforward: Dirección a la que se va

al ocurrir este evento (ir delante) usando la etiqueta <go>. (href)

– onenterbackward: Dirección a la que se va al ocurrir este evento (ir atrás) usando la etiqueta <prev/>. (href)

– ontimer: Dirección a la que se va al ocurrir este evento (reloj) usando la etiqueta timer (href)

4

19

Formato del texto

• Tags de estilo:– : Texto con énfasis– : Texto con mucho énfasis– : Texto con cursiva– : Texto con negrilla– : Texto con subrayado

– <big>: Texto con letra grande– : Texto con letra pequeña

20

Formato del texto (2)

• Párrafos:Esto es un párrafo

• Retorno de carro:

Esto es una línea Esto es otra línea

21


• Espacios en blanco:a b c a b c

• Alineación:Esto es un ejemplito

a b ca b c

Esto esun ejemplito

22


• Modo wrap / nowrap:

Este es un texto muy largo para ser mostrado en una sola linea



• Caracteres especiales:– Para que aparezcan de forma correcta en el

terminal han de incluirse en las páginas WML con los códigos definidos por Unicode, a menos que le indiquemos de alguna manera al microbrowser que la codificación es otra (ISO-8859-1, por ejemplo)

23


• Caracteres especiales:Carácter Código Carácter Código

Á Á á á É É é é Í Í í í

Ó Ó ó ó Ú Ú ú ú Ü Ü ü ü Ñ Ñ ñ ñ Ç Ç ç ç ¿ ¿ ¡ ¡ © © ® ®

º º ª ª < < ó < > > ó >

<< « >> » $ $$ & & ‘ ' o ' “ &#quot;

24

Ejercicio

• Probad el modo nowrap, los espacios, alineación de texto, tags de estilo, etc. en el emulador

5

25

Tablas

• Se utiliza el elemento tableAtributo Explicación Valores que puede tomar title Texto columns Número de columnas Número align Alineación del texto dentro de su

celda L= Izquierda C= Centro R= Derecha

id Identificador del objeto Texto <tr> Definición de salto de línea. Se

cierra con </tr> Ninguno

<td> Definición de salto de columna. Se cierra con </td>

Ninguno

26

Tablas (2)

• Ejemplo:

<table columns=”2" title="mitabla"><tr><td>campo1</td>

<td>campo2</td></tr><tr><td>a</td><td>b</td></tr><tr><td>c</td><td>d</td></tr><tr><td>e</td><td>f</td></tr>

</table>

27

Ejercicio

• Crear una página wml con una tabla de tres columnas y tres filas y visualizarla en el simulador de Alcatel

28

Imágenes

• EL formato de gráficos estándar soportado por los terminales WAP es el WBMP, aunque existen terminales que no soportan dicho formato, sino únicamente el BMP de 1 bit de profundidad (monocromo)

• Existen varias utilidades de creación de gráficos en formato WBMP , así como conversores a este formato desde BMP, GIF o JPG

29

Imágenes (2)

• Atributos de img:Atributo Explicación Valores que puede tomar src URL correspondiente al

archivo WBMP. URL. Por ahora solamente se aceptan ficheros .wbmp

alt Texto alternativo. Se recomienda usarlo siempre.

Texto

localsrc Nombre de un icono local. Texto vspace y hspace

Espacios en blanco entre la imagen y el resto de contenidos. Si es expresado en porcentaje, representa el espacio total de visión del browser, no las medidas de la imagen.

Número o porcentaje

align Alineación del texto con respecto a la imagen.

top, middle o bottom

height y width Alto y ancho de la imagen(por este orden). Sirve para escalar la imagen.

Número (en pixels)

id Identificador del objeto. Texto

30

Imágenes (3)

• Elemento <img>– Formatos WBMP y BMP de 1 bit– Iconos locales

<img src=“url del archivo WBMP” alt=“texto alternativo” localsrc=“icono local” align=“respecto al texto” height=“pixeles” width=“pixeles” />

• Hay que elegir el tamaño más adecuado para cada terminal

6

31

Imágenes (4)

• Carga de imágenes:– El comportamiento de los diferentes

teléfonos es distinto a la hora de cargar los gráficos

• Algunos no muestran la página hasta que todos los gráficos han sido cargados

• Otros muestran el texto de la página mientras, en segundo plano, se cargan los gráficos

– Esto se ha de tener en cuenta para no sobrecargar con muchos gráficos las páginas

32

Imágenes (5)

• Iconos locales:– Son iconos que tienen asociado un nombre y que

se utilizan en el atributo localsrc– Al estar almacenados en la ROM del terminal, no

es necesario cargarlos y se agiliza enormemente la transferencia de la página

– En el browser prevalece el icono frente al archivo WBMP, de modo que si una imagen tiene un localsrc asociado, no se transfiere la imagen, sino que se muestra en su lugar el icono

– WAP Forum ha estandarizado este tipo de iconos locales en WAP 2.0 (pictogramas). Aunque si bien no han estandarizado los dibujos, si han definido semánticamente que dibujos debe haber

33

Imágenes (6)

• Iconos locales del emulador de Openwave:

34

Ejercicio

• Visualizar en el emulador una imagen WBMP

• Probad a usar el atributo localsrc, por ejemplo, localsrc="68" olocalsrc=“smileyface"

35

Navegación

• Para navegar entre cards y decks se dispone de dos posibilidades:– Enlaces hipertexto (“anchor”, “a”)– Tareas asociadas a botones de acción

(“do”)• También se pueden asociar saltos entre

cards a la aparición de ciertos eventos (lo vemos luego...)

• El elemento “go” nos va a permitir saltar a otra card (en la misma u otra deck)

36

go

• Atributos:Atributo Explicación Valores que puede tomar href Dirección a la que se quiere ir URL o nombre de otra card method Método http post o get sendreferer Especifica si se debe enviar la

URL actual en la petición de la nueva URL. Se puede usar como medida de seguridad o control.

true o false

accept-charset

Especifica la codificación de caracteres. Por defecto se entiende UTF -8 en el gateway de Openwave. Para el español debemos usar ISO -8859-1

Conjuntos de caracteres separados por espacio o coma. P.ej: “UTF -8, US-ASCII,ISO-8859-1”

7

37

go: Sintaxis

• Sintaxis:<go href=“url”

method=“get o post”sendreferer=“true o false”accept-charset=“ISO-8859-1”>...

</go>

38

go: URL’s

• Una card dentro del mismo deck:– href=”#<nombre de la card>”– siendo el nombre de la card, el definido por

el atributo id de la misma

• Recargar la misma URL en la que nos encontramos actualmente:– href=”?”

39

Tareas: do

• El elemento do nos va a permitir definir “tareas” que se ejecutan cuando pulsamos uno de los botones de acción

• Ejemplo:<do type=“accept” label=“ok” ><go ...></do>

40

Tareas: do (2)

• Atributos:A t r i b u t o E x p l i c a c i ó n V a l o r e s q u e p u e d e t o m a r t y p e D e f i n e l a i n t e r f a z d e

u s u a r i o ( b o t ó n d e a c c i ó n ) q u e d i s p a r a l a t a r e a

? ? a c c e p t : A c e p t a r ? ? p r e v : I r a t r á s ? ? r e s e t : R e s e t e a e l e s t a d o

a c t u a l ? ? o p t i o n s : O p e r a c i o n e s

o p c i o n a l e s ? ? d e l e t e : B o r r a u n o b j e t o o

s e l e c c i ó n ? ? h e l p : a y u d a

l a b e l T e x t o q u e a p a r e c e e n e l b o t ó n a s o c i a d o e n e l n a v e g a d o r p a r a i n i c i a r e l e v e n t o

T e x t o . N o s e r e c o m i e n d a m á s d e 5 c a r a c t e r e s

n a m e N o m b r e d e l o b j e t o T e x t o i g n o r e E s p e c i f i c a s i e l

n a v e g a d o r p u e d e i g n o r a r e s t e e l e m e n t o

t r u e o f a l s e

41

Tareas: do (3)

• En el emulador de Openwave cuando se definen multiples opciones, el botón options aparece con la etiqueta “menu”, que da acceso al menú de opciones

• En el de Nokia cuando se definen varias opciones (“options ”) es obligatorio el uso del atributo “name” para identificar a cada opción. De lo contrario, dará error

• La ubicación de los botones de acción no es la misma en los distintos navegadores

42

Ejercicio

• Diseñar una baraja con tres cartas• Desde la primera se debe poder

acceder a las otras dos a través de botones de tipo “options”

8

43

Tareas: do (4)

• ¿Qué puede ir dentro de un do?Tarea Significado <go href="...."/> Define un salto. <prev/> Salto a la card anterior. <noop/> Especifica que nada debe hacerse. Se

utiliza para solapar otras acciones definidas a nivel de template.

<refresh/> Permite actualizar variables y si es necesario refrescar la pantalla, en caso de que alguna/s de la variables actualizadas se estuviese mostrando.

44

Enlaces

• El elemento “<anchor>”, o su versión abreviada “<a>”, permite insertar enlaces hipertexto en las páginas WML

• El elemento <a> tiene los siguientes atributos:

Atributo Explicación Valores que puede tomar

href Dirección a la que accederemos. URL u otra card. title El texto que sale al entrar en las

opciones. Por defecto toma el valor “link”

Texto

45

Enlaces (2)

• El elemento “<anchor>” es muy similar al elemento “<a>”, con la salvedad de que permite anidar una tarea de entre las que ya se han definido para el elemento “<do>” (go, prev, etc.)

• Los atributos de <anchor> son los siguientes:Atributo Explicación Valores que puede

tomar title Etiqueta que identifica el link. Texto.

46

Ejercicio

• Diseñar una baraja con tres cartas• Desde la primera se debe poder

acceder a las otras dos a través de enlaces

• Probad a utilizar tanto el elemento <anchor> como el <a> para comprobar la diferencia en la sintaxis

WML Avanzado

48

Head

• El elemento <head> especifica información sobre un deck

• El elemento <head> no tiene atributos• Ubicación:

<wml><head>

</head>...</wml>

9

49

Head (2)

• Incluye metadatos e información de acceso (mediante las etiquetas “access”y “meta”)

• Usos:– Control de acceso– Control de caché– Control de bookmarks– Palabras clave para buscadores

50

Acceso

• El elemento <access> debe ir dentro de la etiqueta <head> y sirve para definir políticas de control de acceso

• Atributos:A t r i b u t o E x p l i c a c i ó n V a l o r e s q u e

p u e d e t o m a r d o m a i n D o m i n i o d e s d e e l c u a l s e

p u e d e a c c e d e r . U R L

p a t h E l p a t h d e n t r o d e l d o m i n i o d e s d e e l q u e s e p u e d e a c c e d e r . E l v a l o r p o r d e f e c t o e s “ / ” ( r o o t )

T e x t o

51

Acceso (2)

• Ejemplo:<head>

<access domain=“mi-host” path=“/wml/access” />

</head>

• La comparación del dominio se hace a nivel de string, no de IP

52

Acceso (3)

<wml><card id="First_Card">

<do type="accept" label="go!"><go href="http://localhost/wml/access/ej.wml"/>

</do>

Hola

</card></wml>

53

Acceso (4)

<wml><head>

<access domain=“localhost" path="/wml/access"/></head><card id="First_Card">

Tienes acceso!

</card></wml>

54

Acceso (5)

• Si accedemos a “http://localhost/wml/access/ ej_intro.wml” y pulsamos go!, saltaremos a la página “ej.wml” si estamos en localhost, y en la ruta /wml/access

• Mecanismo de control sencillo, aunque no puede considerarse seguro– Es posible acceder a la página protegida– Es el navegador el que decide no mostrar la

página a partir de la informaci ón de <head>– Cuando el navegador empieza a decodificarla, lee

la etiqueta <access> y decide parar si no tiene permiso, pero la página ya está en el navegador

10

55

Metainformación

• El elemento <meta> debe ir dentro de la etiqueta <head> y sirve para definir:– Políticas de caché– Bookmarks– Palabras clave para buscadores– Otras características propias de cada

navegador

56

Metainformación (2)

• Atributos:Atributo Expl icación Valores que puede tomar property ?? S i se especif ica el atr ibuto name , el

gateway ignora su conten ido, se supone que son datos para e l n a v e g a d o r

?? S i se especif ica el atr ibuto http -e q u i v, e l gateway convier te los metadatos e n u n a r e s p u e s t a HTTP

n a m e = ” n a m e ” ht tp-equ iv=”name”

content Especi f ica e l metadato asociado con e l atr ibuto property

Texto

forua E spec i f ica que la p rop iedad debe o no l legar hasta e l navegador. Puede que e l metadato esté ún icamente d i r ig ido a l gateway

t rue o fa lse (por defecto)

57

Control de caché

• Directiva “meta”, utilizando “http-equiv=Cache-Control”

• Acepta diversas opciones Ejemplos: – <meta http-equiv=”Cache-Control” content=”max-

age=0” forua=true/>• Especifica que la página no es “cacheable”

– <meta http-equiv=”Cache-Control” content=”no-cache” forua=true/>

• Especifica lo mismo, que la p ágina no es “cacheable”

– <meta http-equiv=”Cache-Control” content=”max-age=3600” forua=true/>

• Especifica que el navegador volver á a solicitar la p ágina si han pasado más de 3600 segundos desde que solicit óy almacenó en caché esa página por última vez 58

Bookmarks

• En principio todas las URLs pueden ser almacenadas como bookmarks, quedando almacenado el atributo “title” de la “card” y la URL asociada– Si queremos que una URL no pueda ser

almacenada en los bookmarks:• <meta name=”vnd.up.markable”content=”false” forua=true/>

– Si lo que queremos es que la url que se almacena en el bookmark sea otra diferente de la actual:• <meta name=”vnd.up.markable” content=”url”forua=true/>

• siendo “url” la URL que se almacenar ía en el bookmark

59

Palabras clave para Buscadores

• Motores de búsqueda se basan en varias características de las páginas a la hora de buscar entre ellas, clasificarlas, etc.– Se suelen tener en cuenta, coincidencias de lo

buscado en las URLs, títulos de las páginas y contenido

– Pero la herramienta más útil suele ser la inclusi ón por parte de los programadores de "metainformación" en la cabecera de las páginas

– En el caso de WAP, esta "metainformación" se ha de añadir con el elemento <meta>

60

Palabras clave para Buscadores (2)

<wml><head>

<meta name="Description" content="Mis Libros Favoritos">

<meta name="keywords" content="libros, aficiones, ocio, wap">

</head><card id="menu" title="Mis Libros">

Este sitio WAP esta dedicado a mi principal afici ón,los libros

</card></wml>

11

61

Plantillas: template

• Permiten definir acciones aplicables a todas las cards de un deck

• Prevalece lo definido en las card particulares

• Aquí se hace interesante la etiqueta <noop/> que define una accion “nula” y que permite anular la acción definida en la template

62

Plantillas: template (2)

• Ubicación y sintaxis de una template:<wml>

<head>...<head/><template>...<template><card>...</card>

</wml>

63

Plantillas: template (3)

• Atributos:Atributo Explicación Valores que

puede tomar id Nombre de la plantilla. Texto onenterforward Dirección a la que se va al ocurrir este evento,

que consiste en entrar en la página usando la etiqueta <go>.

URL o card

onenterbackward Dirección a la que se va al ocurrir este evento, que consiste en entrar en la página usando la etiqueta <prev> .

URL o card

ontimer Dirección a la que se va al vencer un timer concreto.

URL o card

64

Ejercicio

• Definid una baraja con 4 cartas• Definid también una plantilla como ésta:

<template onenterbackward=" #card4">... Botones ...

</template>

• Dentro de la plantilla incluid un botón para ir a la card 1 (label=“inicio”) y otro para volver atrás (label=“prev”)

• Definid también botones para navegar de la card1 a la 2 y de ésta a la 3

• Probad la página wml creada

65

Eventos

• Para definir acciones asociadas a eventos existe el elemento <onevent>

• Atributos:Atributo Explicación Valores que puede tomar type Tipo de

evento ?? onpick: El usuario

selecciona una opción ?? onenterforward: El usuario

llega a través de un <go/> ?? onenterbackward: Llega a

través de un <prev/> ?? ontimer: Vence un

temporizador 66

Eventos (2)

• Dentro del elemento <onevent> se anida la tarea que se desea realizar – Puede ser una entre <go> <prev> <noop>

ó <refresh>

• También se pueden asociar eventos mediante atributos, como veremos en los siguientes ejemplos– Si utilizamos esta forma, sólo podremos

realizar acciones tipo <go href ...>

12

67

Eventos: Ejemplo

<wml><card id="card1">

<onevent type="onenterforward"><go href="#card2"/>

</onevent>Estas en la card 1 Llegaste desde la card2

</card>

68

Eventos: Ejemplo (2)

<cardi d="card2 "><do type=" options" label =" prev">

<prev/></do>Estas en la card 2 <select name=" eleccion" title="transporte">

<option value= "coche">coche<onevent type=" onpick">

<go href=" #card4"/></onevent>

</option><option onpick=" #card3"

value="barco"> barco</option></select>

</card>

69


<cardi d="card3 " ontimer="#card2">

<timer value=" 20"/>Evento pick en barco!!! 

</card>

<cardi d="card4 " ontimer="#card2"><timer value=" 20"/>Evento pick en coche!!! 

</card></wml>

70


• En este ejemplo accedemos directamente a la card2 sin pasar por la card1, gracias al evento onenterforward

• Cuando hacemos una selección navegamos a las card 3 y 4 gracias al evento onpick

• Si queremos entrar en la card1, la única forma es haciendo prev desde la card2

• Una vez que estamos en la card3 o la card4, si esperamos 2 segundos saltamos a la card2 gracias al evento ontimer

71

Timers

• Los timers se arrancan cada vez que cargamos una card

• Si el timer se califica con el atributo “name”, el funcionamiento es distinto, ya que se considera que el timer referenciado es el mismo, y por lo tanto, no vuelve a inicializarse

• El valor de un timer (atributo “value”) se expresa en décimas de segundo

72

Ejercicio

• Diseñad dos barajas, cada una con dos cartas:– En la primera saltamos permanentemente

de una card a la otra cada 5 segundos– En la otra, saltamos de card1 a card2,

luego otra vez a card1 y después no se volverá a producir ningún salto (usar el atributo name en el timer)

13

73

Animaciones

• WML no soporta la inclusión de animaciones en las páginas

• Para crear imágenes en movimiento utilizamos un timer, de modo que vamos cambiando de card, y en cada card situamos un dibujo que no es sino un “fotograma” de la secuencia de animación

74

Ejercicio

• Diseñad una baraja con 4 cartas, cada una mostrando un dibujo de un muñeco

• Incluid eventos ontimer para pasar de una a otra y que parezca que el muñeco se mueve

• Incluid un botón de parada de la animación que lleve a una carta adicional (en total 5 cartas) desde la que se pueda empezar otra vez la animación pulsando un botón

75

Precarga de imágenes

• Problema de las im ágenes en movimiento:– Si no las precargamos antes de empezar la

animación, algunos navegadores muestran la primera imagen, aparece la pantalla de “cargando”, aparece la segunda imagen, vuelve a aparecer la pantalla de cargando, etc...

• Soluciones:– Basta con poner un timer antes de empezar la

animación suficientemente grande– Insertar todas las imágenes en la primera card,

antes de empezar. Así ya se han cargado las imágenes y sólo las tiene que tomar de su memoria y no de la red

76

Precarga de imágenes (2)

<card id="inicio" title="Portada"> Bienvenido, blablabla... <a href="#card2">Continuar <img src="img1.wbmp"> <img src="img2.wbmp"> <img src="img3.wbmp"> <img src="img4.wbmp"> 

</card> <card id="card2" title="Imagenes mov">

 Codigo de imagenes en movimiento 

</card> etc...

¿Dudas, preguntas, comentarios...?

Introducción a WML - Hosting Miarrobafersystem.webcindario.com/manual/programacion_wap.pdf ·...

Documents

Transcript of Introducción a WML - Hosting Miarrobafersystem.webcindario.com/manual/programacion_wap.pdf ·...