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

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

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> </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 <p>...</p> Párrafos <br /> Saltos de línea <b>...</b> Negrita <u>...</u> Subrayado <i>...</i> Cursiva <em>...</em> <strong>...</strong> <big>...</big> Letra grande <small>...</small> Letra pequeña

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> <td>Barcelona</td> <td>93-4657505</td> </table></p> </card> </wml>

WML – Enlaces hipertexto Se incluyen dos posibilidades: Elemento anchor Elemento a 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. 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 … > <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> <a href="#card2">Aceptar</a> </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 <go href=“http://www.ser.com/busqueda.asp”> <postfield name=“categoria” value=“$(cat)” /> </go>

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