Tema 7: XML y la Internet mvil: WML

1
Tema 7 XML y la Internet móvil WML

• Ricardo Eíto Brun
• Sevilla, 23 - 25 de octubre, 2002

2
Guíon del tema

• Crear páginas WML
• Emuladores WML
• xHTML, cHTML y WML
• PALM

• Internet móvil
• WAP
• El lenguaje WML
• Características
• Marcas
• WMLScript

3
Qué es WAP

• Wireless Application Protocol
• Estandar de facto cuyo objetivo es acceder a
  contenidos Internet desde dispositivos móviles
  sin cable -.
• Define un protocolo para el diseño de
  aplicaciones web que permitan acceder a servicios
  y contenidos desde dispositivos móviles
• Un protocolo más en la familia de protocolos
  Internet
• Está diseñado para micro-browsers con las
  limitaciones
• Presentación de información en pantalla
• Ancho de banda
• Límites en memoria y capacidad de computación de
  los dispositivos clientes

4
Qué es WAP

• El estándar WAP incluye las especificaciones
• WTAI Wireless Telephony Application Interface
• WML Wireless Markup Language -, que define el
  lenguaje que se tiene que utilizar para crear
  contenidos y su DTD
• WBXML WAP Binary XML Format -, que describe
  cómo codificar y transferir documentos WML
• WMLScript versión simplificada de JavaScript,
  para interactuar con los contenidos WML
• Estas especificaciones se agrupan en una
  especificación WAE Wireless Application
  Environment -.

5
Origen de WAP

• WAP Forum se encarga de su desarrollo
• Formado por Ericsson, Nokia, Motorola y Unwired
  Planet en 1998
• La versión 2.0 supuso importantes cambios en la
  creación y marcado de contenidos para
  dispositivos WAP
• Aplicaciones WAP
• Compra de billetes, entradas, etc. (mCommerce)
• Servicios de directorio, direcciones, números de
  teléfono, etc.
• Consultas de información específicas

6
Arquitectura WAP
7
Arquitectura WAP

• El proceso de comunicación entre el dispositivo
  WAP y el servidor Web que ofrece los contenidos
  se puede resumir de la siguiente forma
• El dispositivo móvil establece una conexión con
  la estación base, e inicia la conexión a una
  pasarela WAP preestablecidad en la configuración
  del teléfono.
• El microbrowser solicita una URL a la pasarela
  WAP, mediante una petición codificada y
  comprimida en un formato binario WTP.
• La pasarela WAP recibe la petición, y la traduce
  a una petición HTTP, que envía a través de
  Internet al servidor adecuado.
• El servidor web recibe la petición y como
  resultado envía una página con datos WML a la
  pasarela WAP mediante HTTP
• La pasarela WAP recibe la página WML, la comprime
  a un formato binario optimizado, que reenvía al
  dispositivo móvil mediante el protocolo WTP.
• El microbrowser decodifica la señal recibida, y
  muestra la página.

8
Lenguajes de marcas Internet móvil

• WML
• cHTML o Compact HTML, utilizado en el servicio
  i-Mode de NTT DoCoMo. Subconjunto de HTML que se
  distribuye desde servidores web convencionales.
• Web Clipping este lenguage se utiliza con PDA
  Palm OS. Subconjunto de la versión 3.2 de HTML.
  Se distribuye compilado en un formato binario
  propietario de Palm.
• HDML es el predecesor de WML, y fue diseñado por
  Openwave. Desde que Openwave se unión al WAP
  Forum, el lenguaje HDML ha sido reemplazado
  progresivamente por WML, si bien hoy en día un
  número elevado de teléfonos móviles en los
  Estados Unidos utilizan este lenguaje.

9
El lenguaje WML

• Es un lenguaje de marcas basado en XML
• Especifica cómo crear contenidos para
  dispositivos WAP
• WAP Forum lo diseñó y se encarga de su
  mantenimiento
• http//www.wapforum.org/DTD
• Similar a HTML
• Futuro incierto wml, xhtml, chtml?

10
Decks y cards

• Una página WML es similar a un documento HTML.
• Son archivos con extensión .wml, a los que se
  llama decks.
• Cada deck puede contener una o más cards, unidas
  entre sí mediante enlaces
• Un card es lo que se ve en la pantalla del
  dispositivo WAP
• Los decks se distribuyen en un formato comprimido
• Balance entre el número de cards en cada deck
• Se pueden introducir comentarios con lt!--gt

11
Estructura decks WML

• lt?xml version1.0?gt
• lt!DOCTYPE wml PUBLIC -//WAPFORUM//DTD WML
  1.1//EN http//www.wapforum.org/DTD/wml_1.1.xml
  gt
• ltwmlgt
• ltcardgt
• lt/cardgt
• ltcardgt
• lt/cardgt
• lt/wmlgt

12
El elemento card

• Identifica lo que se ve en cada pantalla del
  micro-browser
• Tiene dos atributos
• id identificador único para cada card
• title título que se muestra en la pantalla del
  dispositivo WAP
• Un card puede contener
• Texto
• Imágenes en formato WBMP
• Enlaces
• Elementos de formularios
• Tareas

13
Elemento card

• lt?xml version"1.0"?gt
• lt!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML
  1.1//EN" "http//www.wapforum.org/DTD/wml_1.1.xml"
  gt
• ltwmlgt
• ltcard id"card1" title" Biblioteca "gt
• ltp align"center"gtltbgtReservalt/bgtlt/pgt
• ltp align"center"gtltbgtConsulta OPAClt/bgtlt/pgt
• lt/cardgt
• lt/wmlgt

14
WML - Elementos básicos
15
WML Elementos básicos

• lt?xml version"1.0"?gt
• lt!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML
  1.1//EN" "http//www.wapforum.org/DTD/wml_1.1.xml"
  gt
• ltwmlgt
• ltcard id"card1" title" Biblioteca "gt
• ltpgtltbgtReservalt/bgtlt/pgt
• ltpgtltugtConsulta OPAClt/ugtlt/pgt
• ltpgtltigtDirecciónlt/igtlt/pgt
• ltpgtltsmallgtTelefonolt/smallgtlt/pgt
• ltpgtltbiggtPersonallt/biggtlt/pgt
• lt/cardgt
• lt/wmlgt

16
WML - Tablas

• El modelo de tablas es similar al que HTML
• El elemento table determina la aparición de una
  tabla.
• El elemento table no puede ser hijo directo del
  elemento card
• El elemento table tiene un atributo obligatorio,
  columns
• El atributo columns determina el número de
  columnas en la tabla.
• Para cada fila, el elemento table contendrá un
  elemento tr
• Para cada celda en cada fila, el elemento tr
  contendrá un elemento td

17
WML Tablas

• lt?xml version"1.0"?gt
• lt!DOCTYPE wml PUBLIC gt
• ltwmlgt
• ltcard id"card1" title" Biblioteca "gt
• ltpgtlttablegt
• lttrgt
• lttdgtMadridlt/tdgt
• lttdgt91-5555555lt/tdgt
• lt/trgt
• lttrgt
• lttdgtBarcelonalt/tdgt
• lttdgt93-4657505lt/tdgt
• lt/trgt
• lt/tablegtlt/pgt
• lt/cardgt
• lt/wmlgt

18
WML Enlaces hipertexto

• Se incluyen dos posibilidades
• Elemento anchor
• Elemento a
• Elemento anchor
• Elemento no vacío
• Incluirá un elemento vacío go ir a cualquier
  URL -, prev ir a la card anterior -, o refresh
  refrescar la card actual.
• Elemento a
• Elemento no vacío
• Contiene el texto origen del hiperenlace
• Tiene un atributo href que toma como valor la URL
  del documento WML destino

19
WML Enlaces

• lt?xml version"1.0"?gt
• lt!DOCTYPE wml PUBLIC gt
• ltwmlgt
• ltcard id"card1" title" Biblioteca "gt
• ltpgtlta hrefmad.wmlgtMadridlt/agtlt/pgt
• ltpgtBarcelonalt/pgt
• lt/cardgt
• lt/wmlgt

20
WML Enlaces

• lt?xml version"1.0"?gt
• lt!DOCTYPE wml PUBLIC gt
• ltwmlgt
• ltcard id"card1" title" Biblioteca "gt
• ltpgt
• ltanchorgtMadrid
• ltgo hrefmad.wml /gt
• lt/anchorgtlt/pgt
• ltpgtBarcelonalt/pgt
• lt/cardgt
• lt/wmlgt

21
WML - Imágenes

• Únicamente se acepta un formato de imagen WBMP
• Son imágenes en b/n
• Se utiliza el elemento vacío img
• El elemento img va acompañado de los atributos
  obligatorios
• src URL del archivo wbmp con la imagen
• alt texto alternativo, para dispositivos WAP
  que no pueden mostrar imágenes
• ltimg srclogo.wbmp altMyEmpresa /gt

22
WML Cajas de texto o campos

• En un card se pueden incluir campos o cajas de
  texto para la recogida de datos
• Se utiliza el elemento vacío input.
• El elemento input tiene dos atributos
• name nombre del control o campo. Es obligatorio
• size tamaño de la caja de texto o campo
• ltpgtISBN ltinput nameisbn size10 /gtlt/pgt

23
WML Cajas de texto o campos

• lt?xml version"1.0"?gt
• lt!DOCTYPE wml PUBLIC gt
• ltwmlgt
• ltcard id"card1" title" Biblioteca "gt
• ltpgtISBN ltinput name"isbn" size"15" /gtlt/pgt
• ltpgtTitulo ltinput name"titulo" /gtlt/pgt
• lt/cardgt
• lt/wmlgt

24
WML fieldsets

• Los campos de un card se pueden agrupar en un
  elemento fieldset
• El elemento fieldset tendrá un atributo title,
  que recogerá un nombre para el grupo de campos.
• ltpgt
• ltfieldset namelibrogt
• ISBN ltinput nameisbn size15 /gt ltbr /gt
• Autor ltinput nameautor size25 /gt
• lt/fieldsetgt
• lt/pgt

25
WML Opciones (radio button)

• Se utilizan para que el usuario puede elegir
  una opción entre varias
• Se utiliza el elemento select
• El elemento select contendrá un elemento option
  para cada opción disponible
• El elemento option un atributo value, que recoge
  como valor el valor que habrá seleccionado el
  usuario si elige esa opción.
• El elemento option contiene además el texto que
  se verá a la derecha del botón de opción.

26
WML Optiones (radio button)

• lt?xml version"1.0"?gt
• lt!DOCTYPE wml PUBLIC gt
• ltwmlgt
• ltcard id"card1" title" Biblioteca "gt
• ltpgt
• ltselectgt
• ltoption value"BCN"gtBarcelonalt/optiongt
• ltoption value"MAD"gtMadrid-Barajaslt/optiongt
• ltoption value"GRA"gtGranadalt/optiongt
• lt/selectgt
• lt/pgt
• lt/cardgt
• lt/wmlgt

27
WML Opciones (check boxes)

• Se utilizan para que el usuario puede elegir
  más de una opción entre varias
• Se utiliza el elemento select, con el atributo
  multipletrue
• El elemento select contendrá un elemento option
  para cada opción disponible
• El elemento option un atributo value, que recoge
  como valor el valor que habrá seleccionado el
  usuario si elige esa opción.
• El elemento option contiene además el texto que
  se verá a la derecha de la casilla de validación

28
WML Optiones (check boxes)

• lt?xml version"1.0"?gt
• lt!DOCTYPE wml PUBLIC gt
• ltwmlgt
• ltcard id"card1" title" Biblioteca "gt
• ltpgt
• ltselect multipletruegt
• ltoption value"BCN"gtBarcelonalt/optiongt
• ltoption value"MAD"gtMadrid-Barajaslt/optiongt
• ltoption value"GRA"gtGranadalt/optiongt
• lt/selectgt
• lt/pgt
• lt/cardgt
• lt/wmlgt

29
WML - Timer

• El elemento vacío timer se utiliza para dejar
  transcurrir un periodo de tiempo.
• El elemento timer tiene un atributo value que
  toma como valor el tiempo que debe transcurrir,
  expresado en décimas de segundo.
• Este elemento está asociado al evento o atributo
  ontimer del elemento card, que indica qué acción
  se debe realizar cuando transcurra el tiempo.
• La acción consiste, generalmente, en abrir una
  nueva página o card

30
WML Timer

• lt?xml version"1.0"?gt
• lt!DOCTYPE wml PUBLIC gt
• ltwmlgt
• ltcard id"card1" title" Biblioteca
  ontimeropac.wmlgt
• lttimer value50 /gt
• ltpgtAconseja un libro
• lt/pgt
• lt/cardgt
• lt/wmlgt

31
WML - Variables

• Es posible declarar variables y asignarles valor
• Mediante el elemento vacío setvar
• Mediante el atributo name en listas de opciones
• El elemento vacío setvar tiene dos atributos
• name nombre de la variable
• value valor que se le asigna
• Para mostrar el valor de una variable en un card,
  se utilizará la sintáxis (nombreVariable)

32
WML Variables

• lt?xml version"1.0"?gt
• lt!DOCTYPE wml PUBLIC gt
• ltwmlgt
• ltcard id"card1" title" Biblioteca "gt
• ltpgt
• ltselect name"strnombre"gt
• ltoption value"Madrid"gtMadridlt/optiongt
• ltoption value"Barcelona"gtBarcelonalt/optiongt
• lt/selectgt
• lt/pgt
• ltpgtHa elegido el destino (strnombre)lt/pgt
• lt/cardgt
• lt/wmlgt

33
Ejemplo navegación cards

• El formulario presenta una lista de opciones con
  vuelos.
• El usuario selecciona una de ellas, y se salta a
  otro card que muestra información detallada del
  vuelo.
• Alternativa
• ltdo typeaccept labelAceptargt
• ltgo hrefcard2 /gt
• lt/dogt

34
WML Ejemplo card 1

• lt?xml version"1.0"?gt
• lt!DOCTYPE wml PUBLIC gt
• ltwmlgt
• ltcard id"card1" title"Lista de vuelos"gt
• ltpgt
• ltselect name"strnombre"gt
• ltoption value"MAD"gtMadrid-Barajaslt/optiongt
• ltoption value"BAR"gtBarcelonalt/optiongt
• ltoption value"GRA"gtGranadalt/optiongt
• lt/selectgt
• lt/pgt
• ltpgt
• lta href"card2"gtAceptarlt/agt
• lt/pgt
• lt/cardgt

35
WML Ejemplo card 2

• ltcard id"card2" title"Detalle vuelos"gt
• ltpgtlttable columns"2"gt
• lttrgtlttdgtltsmallgtOrigenlt/smallgtlt/tdgt
• lttdgtltsmallgtSevillalt/smallgtlt/tdgtlt/trgt
• lttrgtlttdgtltsmallgtDestinolt/smallgtlt/tdgt
• lttdgtltsmallgtBarcelonalt/smallgtlt/tdgtlt/trgt
• lttrgtlttdgtltsmallgtHorarioslt/smallgtlt/tdgt
• lttdgtltsmallgtLXJV - 0910lt/smallgtlt/tdgtlt/trgt
• lttrgtlttdgtltsmallgtPreciolt/smallgtlt/tdgt
• lttdgtltsmallgt17400 ptslt/smallgtlt/tdgtlt/trgt
• lt/tablegt
• lt/pgt
• lt/cardgt
• lt/wmlgt

36
Otros elementos WML

• Do ejecuta una acción cuando el usuario
  selecciona una opción o literal
• ltdo typeaccept labelBuscargt
• ltgo hrefbusqueda.wml /gt
• lt/dogt
• Postfield envía información al servidor
• ltdo typeaccept labelBuscargt
• ltgo hrefhttp//www.ser.com/busqueda.aspgt
• ltpostfield namecategoria value(cat) /gt
• lt/gogt
• lt/dogt

37
WMLScript

• Lenguaje de script que se ejecuta en el
  dispositivo cliente.
• Versión simplificada de JavaScript
• Sirve para validar datos introducidos por el
  usuario, cálculos, etc.
• El código es compilado por el WAP Gateway y
  enviado al cliente
• El código WMLScript no se guarda en los archivos
  wml, sino en archivos wmls
• En la página wml se incluyen llamadas a las
  funciones declaradas en el archivo wmls
• ltdo typeaccept labelvalidargt
• ltgo hrefarchivo.wmlsfuncion((variable)) /gt
• lt/dogt

38
Herramientas WAP

• Nokia WAP SDK
• WinWAP
• MobileDev
• Nokia WML Studio for Macromedia Dreamweaver
• Ericsson WAPIDE
• IBM WAPSody

39
WML vs XHTML

• La versión 2.0 de WAP se basa en XHTML Basic en
  lugar de WML
• XHTML Basic en la versión de XHTML para
  dispositivos móviles.
• Así se garantiza
• la compatibilidad entre dispositivos
• La reutilización de contenidos
• Mejores opciones de presentación - CSS
• I-Mode utilizaba el lenguaje cHTML (HTML
  compacto), en lugar de WML

40
XHTML vs cHTML

• cHTML no es un estándar del W3C, XHTML sí lo es
• cHTML no soporta hojas de estilo CSS, XHTML sí.
• cHTML no obliga a que los documentos estén bien
  formados, XHTML sí.
• Elementos en cHTML que no están en XHTML
• ltCENTERgt...lt/CENTERgt
• ltDIRgt
• ltHRgt
• ltMENUgt
• ltPLAINTEXTgt
• Tel
• ltFONTgt

41
XHTML vs cHTML

• Elementos en XHTML que no están en cHTML
• ltstylegt...lt/stylegt
• ltlink relstylesheet href...gt
• Atributo style
• lttablegt, lttdgt, lttrgt y ltcaptiongt
• ltstronggt...lt/stronggt
• ltspangt...lt/spangt
• ltemgt...lt/emgt
• ltaddressgt...lt/addressgt
• Etc.

42
Emuladores WAP