Tema 7: XML y la Internet móvil: WML

Tema 7: XML y la Internet móvil: WML Ricardo Eíto Brun Sevilla, 23 - 25 de octubre, 2002

Internet… móvil WAP El lenguaje WML Características Marcas WMLScript Guíon del tema • Crear páginas WML • Emuladores WML • xHTML, cHTML y WML • PALM

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”

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 -.

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

Arquitectura WAP

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.

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.

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?

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 <!-->

Estructura decks WML <?xml version=“1.0”?> <!DOCTYPE wml PUBLIC “-//WAPFORUM//DTD WML 1.1//EN” “http://www.wapforum.org/DTD/wml_1.1.xml”> <wml> <card> ………………………… </card> <card> ………………………… </card> </wml>

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

Elemento card <?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="card1" title=" Biblioteca "> <p align="center"><b>Reserva</b></p> <p align="center"><b>Consulta OPAC</b></p> </card> </wml>

WML - Elementos básicos

WML – Elementos básicos <?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="card1" title=" Biblioteca "> <p><b>Reserva</b></p> <p><u>Consulta OPAC</u></p> <p><i>Dirección</i></p> <p><small>Telefono</small></p> <p><big>Personal</big></p> </card> </wml>

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

WML – Tablas <?xml version="1.0"?> <!DOCTYPE wml PUBLIC … > <wml> <card id="card1" title=" Biblioteca "> <p><table> <tr> <td>Madrid</td> <td>91-5555555</td> </tr> <tr> <td>Barcelona</td> <td>93-4657505</td> </tr> </table></p> </card> </wml>

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

WML – Enlaces <?xml version="1.0"?> <!DOCTYPE wml PUBLIC … > <wml> <card id="card1" title=" Biblioteca "> <p><a href=“mad.wml”>Madrid</a></p> <p>Barcelona</p> </card> </wml>

WML – Enlaces <?xml version="1.0"?> <!DOCTYPE wml PUBLIC … > <wml> <card id="card1" title=" Biblioteca "> <p> <anchor>Madrid <go href=“mad.wml” /> </anchor></p> <p>Barcelona</p> </card> </wml>

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 <img src=“logo.wbmp” alt=“MyEmpresa” />

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 <p>ISBN: <input name=“isbn” size=“10” /></p>

WML – Cajas de texto o campos <?xml version="1.0"?> <!DOCTYPE wml PUBLIC … > <wml> <card id="card1" title=" Biblioteca "> <p>ISBN: <input name="isbn" size="15" /></p> <p>Titulo: <input name="titulo" /></p> </card> </wml>

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. <p> <fieldset name=“libro”> ISBN: <input name=“isbn” size=“15” /> <br /> Autor: <input name=“autor” size=“25” /> </fieldset> </p>

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.

WML – Optiones (radio button) <?xml version="1.0"?> <!DOCTYPE wml PUBLIC … > <wml> <card id="card1" title=" Biblioteca "> <p> <select> <option value="BCN">Barcelona</option> <option value="MAD">Madrid-Barajas</option> <option value="GRA">Granada</option> </select> </p> </card> </wml>

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 multiple=“true” • 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

WML – Optiones (check boxes) <?xml version="1.0"?> <!DOCTYPE wml PUBLIC … > <wml> <card id="card1" title=" Biblioteca "> <p> <select multiple=“true”> <option value="BCN">Barcelona</option> <option value="MAD">Madrid-Barajas</option> <option value="GRA">Granada</option> </select> </p> </card> </wml>

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

WML – Timer <?xml version="1.0"?> <!DOCTYPE wml PUBLIC … > <wml> <card id="card1" title=" Biblioteca “ ontimer=“opac.wml”> <timer value=“50” /> <p>Aconseja un libro… </p> </card> </wml>

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)

WML – Variables <?xml version="1.0"?> <!DOCTYPE wml PUBLIC … > <wml> <card id="card1" title=" Biblioteca "> <p> <select name="strnombre"> <option value="Madrid">Madrid</option> <option value="Barcelona">Barcelona</option> </select> </p> <p>Ha elegido el destino: $(strnombre)</p> </card> </wml>

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: <do type=“accept” label=“Aceptar”> <go href=“#card2” /> </do>

WML – Ejemplo card 1 <?xml version="1.0"?> <!DOCTYPE wml PUBLIC … > <wml> <card id="card1" title="Lista de vuelos"> <p> <select name="strnombre"> <option value="MAD">Madrid-Barajas</option> <option value="BAR">Barcelona</option> <option value="GRA">Granada</option> </select> </p> <p> <a href="#card2">Aceptar</a> </p> </card> ……………

WML – Ejemplo card 2 ………… <card id="card2" title="Detalle vuelos"> <p><table columns="2"> <tr><td><small>Origen:</small></td> <td><small>Sevilla</small></td></tr> <tr><td><small>Destino:</small></td> <td><small>Barcelona</small></td></tr> <tr><td><small>Horarios:</small></td> <td><small>LXJV - 09:10</small></td></tr> <tr><td><small>Precio:</small></td> <td><small>17400 pts</small></td></tr> </table> </p> </card> </wml>

Otros elementos WML • Do – ejecuta una acción cuando el usuario selecciona una opción o literal <do type=“accept” label=“Buscar”> <go href=“busqueda.wml” /> </do> • Postfield – envía información al servidor <do type=“accept” label=“Buscar”> <go href=“http://www.ser.com/busqueda.asp”> <postfield name=“categoria” value=“$(cat)” /> </go> </do>

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: <do type=“accept” label=“validar”> <go href=“archivo.wmls#funcion($(variable))” /> </do>

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

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

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: • <CENTER>...</CENTER> • <DIR> • <HR> • <MENU> • <PLAINTEXT> • Tel: • <FONT>

XHTML vs cHTML • Elementos en XHTML que no están en cHTML: • <style>...</style> • <link rel=“stylesheet” href=“...”> • Atributo style • <table>, <td>, <tr> y <caption> • <strong>...</strong> • <span>...</span> • <em>...</em> • <address>...</address> • Etc.

Emuladores WAP

Tema 7: XML y la Internet móvil: WML