Diseño WAP Iván Bernal, Ph.D. [email protected] Quito – Ecuador Copyright @2008, I. Bernal Agenda • Tópicos a tratarse • Visión general • Arquitectura • SDKs • WML y WMLScript Revisión Julio 2008 Iván Bernal, Ph.D. 2 1 Bibliografía 1. Martin Frost, Learning WML & WMLScript. 1st Edition, O'Reilly, USA, 2000. 2 Dale 2. D l B Bulbrook, lb k WAP:A WAP A Beginner’s B i ’ Guide, G id Osborne/McGrawOb /M G Hill. USA, 2001. 3. Huw Evans y Paul Ashworth, Getting Started With WAP and WML, SYBEX, USA, 2001. 4 Varios 4. V i sitios iti web. b Revisión Julio 2008 Iván Bernal, Ph.D. 3 Introducción • WAP (Wireless Application Protocol) es una especificación de la industria para aplicaciones que operan en redes inalámbricas con particular énfasis en aplicaciones para dispositivos móviles, especialmente teléfonos móviles. Es una nueva tecnología que enlaza el Internet a dispositivos inalámbricos portátiles. ¾ WAP es el puente entre el Internet y el mundo inalámbrico, ofreciendo el potencial para un rango ilimitado de servicios de valor agregado que serán entregado al usuario sin importar la red o dispositivo que estén usando. ¾ La convergencia del Internet y la telefonía celular, dos de las tecnologías que mas rápido han crecido en la última década, permitirá la transformación de la información del Internet a una forma que pueda presentarse en los tamaños de pantalla reducida asociados a los teléfonos celulares y otros dispositivos portátiles como PDAs. Revisión Julio 2008 Iván Bernal, Ph.D. 4 2 Introducción • Marcará el nacimiento de la nueva era de comercio inalámbrico (un medio de comunicarse y realizar transacciones inalámbricas). • Los países europeos están liderando el camino en la adopción de telefonía celular. Un gigantesco incremento en el uso de WAP ha ocurrido en Europa, en donde países como Alemania y Finlandia están estableciendo las tendencias a seguir por USA y los otros países del mundo. Users in the UK alone downloaded 8 billion pages to their phones in 2003. Revisión Julio 2008 Iván Bernal, Ph.D. 5 Introducción • Los estándares eran publicados por el Foro WAP (http://www.wapforum.org). Formado en Junio de 1997 por Ericsson, Nokia, Motorola y Unwired Planet (ahora llamada Phone.com/Openwave) ¾ Lego se unieron cientos de compañías como IBM, HP, Visa y Microsoft. ¾ De acuerdo a estadísticas del Foro WAP, los miembros del Foro representan el 90% de fabricantes de teléfonos celulares a nivel mundial (2000). A fines de 1998, WAP 1.0 había sido probado superficialmente pero se generaron suficientes resultados para identificar algunas fallas. Las mejoras propuestas eran fundamentales para el éxito de WAP y se decidió descartar WAP 1.0 y eliminar compatibilidad hacia atrás. WAP 1.1 fue anunciado en Mayo de 1999 y un poco mas tarde terminales habilitados con WAP empezaron a entrar en el mercado. WAP 1.2 fue anunciado en Diciembre de 1999, con un release de mantenimiento 1.2.1 (se conoce formalmente como WAP June 2000) que incrementa la interoperabilidad. Revisión Julio 2008 Iván Bernal, Ph.D. 6 3 Introducción • “The WAP Forum has consolidated into the Open Mobile Alliance (OMA) and no longer exists as an independent organization”. http://www.openmobilealliance.org (http://www.openmobilealliance.org/tech/affiliates/wap/wapindex.html) OMA es responsable por el desarrollo de las especificaciones WAP. Formado en Junio 12, 2002 OMA se concentra principalmente en crear habilitadores de servicios interoperables antes que solo un stack de protocolos. Revisión Julio 2008 Iván Bernal, Ph.D. 7 Introducción • WAP 2.0 y OMA (Open Mobile Alliance) El objetivo de WAP 2.0 (junio de 2001) es combinar servicios inalámbricos y el Internet a medidad que el ancho de banda se incrementa y los dispositivos se están haciendo más poderosos. WAP 22.0 0 usa W W-HTTP HTTP y W W-TCP TCP para transportar el contenido al dispositivo, dispositivo y define una extensión móvil de XHTML para hacer las páginas WAP más versátiles y fáciles de crear. WAP 2.0 clama proveer contenido mas rico y a mas usuarios. Los gateways/proxies WAP no solo actúan como puntos de conversión de contenido, sino que también añaden muchas características y capacidades para los desarrolladores de aplicaciones. This node is one of many components, services enablers, of the service layer, a set of nodes residing in an operator network that can help add functionality to any mobile application. WAP es un componente esencial en la solución de mensajería multimedia. ¾ Por ejemplo: Ericsson WAP gateway MIEP puede ser utilizada para enviar notificaciones MMS. Revisión Julio 2008 Iván Bernal, Ph.D. 8 4 Introducción • Los dispositivos que soportan WAP incluyen: Teléfonos celulares PDAs Palmtops Computadoras miniaturizadas completas con teclado Revisión Julio 2008 9 Iván Bernal, Ph.D. Introducción • Los distintos dispositivos tienen diferentes tipos de display y métodos para el ingreso de datos. La trabaja de la especificación WAP es proveer una infraestructura común (framework) que permita que las aplicaciones corran en las diferentes plataformas. Debido a que WAP trabaja en un ambiente móvil , también debe lidiar con los problemas particulares de redes inalámbricas. ¾ Bajas tasas de transmisión (varían con las nuevas redes celulares) ¾ Altos retardos (tiempos de ida y vuelta en el orden de segundos pueden ser comunes) ¾ Falta de confiabilidad • Se puede preguntar por que no se pueden usar páginas web comunes entregadas sobre conexiones TCP/IP normales; después de todo, la única diferencia con una PC en casa es el enlace inalámbrico. El problema con las tecnologías web normales es que están orientadas para grandes tasas de transmisión y grandes pantallas. WAP mantiene el modelo del Internet pero optimiza los componentes para un ambiente móvil. WAP controla el estado de una sesión en caso de que la conexión se pierda. WAP provee formatos comprimidos para la transferencia de datos. WAP maneja la presentación de aplicaciones sin importar los dispositivos de I/O disponibles. Revisión Julio 2008 Iván Bernal, Ph.D. 10 5 Introducción Revisión Julio 2008 Iván Bernal, Ph.D. 11 Stack de protocolos • El usuario interactúa con la parte superior del stack, y el hardware de comunicación está ubicado por debajo del nivel mas bajo del stack. • La capa más baja contiene varios protocolos (denominados de transporte - bearer) y que no son en realidad parte de WAP pero proveen el enlace entre WAP y el hardware. Revisión Julio 2008 Iván Bernal, Ph.D. 12 6 Stack de protocolos • IP y PPP son los protocolos de las capas mas bajas usados para acceso dial-up al Internet. Muchos dispositivos WAP de primera generación trabajaban haciendo una llamada dial up normal y enviando los datos WAP por el enlace con el módem. • SMS (Short Message Service) es una característica ofrecida por los sistemas celulares actuales que permite enviar y recibir mensajes cortos sobre un enlace inalámbrico. Se puede transmitir datos binarios y usado para WAP. • GPRS ((General Packet Radio System) y ) ofrece mayores y tasas de datos,, evitando el tener que marcar y ofreciendo una conexión permanente al Internet. Basado en IP. Revisión Julio 2008 Iván Bernal, Ph.D. 13 Stack de protocolos • La siguiente capa desde la parte inferior incluye varios protocolos de comunicación WAP de bajo nivel: WTP (Wireless Transaction Protocol) WTLS (Wireless Transaction Layer Security) WDP (Wireless Datagram Protocol) (No son relevantes para desarrolladores de aplicaciones, a menos que se diseñe un browser) • WTP y WDP permiten unir las capas superiores y las comunicaciones de bajo nivel. • WTLS provee servicios de seguridad (encripción y autenticación). Revisión Julio 2008 Iván Bernal, Ph.D. 14 7 Stack de protocolos • WSP (Wireless Session Protocol) provee un reemplazo completo para HTTP. • WAE (Wireless Application Environment) la parte que el usuario ve y con la cual interactúa. Provee un modelo similar al de la web para escribir aplicaciones. Casi todas las aplicaciones inalámbricas pueden escribirse con WML (que reemplaza HTML) y WMLScript (que reemplaza a JavaScript). p el formato WAP p para ¾ WBMP ((Wireless Bitmap: imágenes). Incorpora varias características de la web, así: ¾ URLs (like http://www.wap.net) ¾ Tipos de contenido MIME (tales como text/html e image/gif. Revisión Julio 2008 Iván Bernal, Ph.D. 15 Introducción • “La siguiente generación de comunicadores móviles” está aquí y para entregarles contenido significa escribir en WML y WMLScript. WML y WMLScript son los lenguajes de WAE. ¾ WML 1.1 especificado en WAP 1.1 ¾ WML 1.2 especificado en WAP 1.2 ¾ WML 1.3 especificado en WAP June 2000. • WAE permite que información en casi cualquier aplicación sea formateada para su presentación en dispositivos móviles y permite que el usuario interactúe con la información. Revisión Julio 2008 Iván Bernal, Ph.D. 16 8 Infraestructura básica • La cadena completa de procesamiento que sigue el contenido WAP en su viaje hacia el dispositivo del usuario: Se omite los detalles de las comunicaciones; éstas cambian dependiendo del protocolo específico de transporte de bajo nivel que se emplee. El browser WAP puede ejecutarse en dispositivos desde teléfonos celulares a PDAs. ¾ Los celulares deben ser diseñados para soportar WAP pero la mayoría de PDAs modernos pueden ser actualizados para soportar WAP simplemente obteniendo el software de browser e instalándolo. ¾ Los PDAs deben emplearse con teléfonos celulares para proveer conectividad. conectividad Revisión Julio 2008 Iván Bernal, Ph.D. 17 Infraestructura básica • El “servidor origen” almacena o genera el contenido. El protocolo que se usa para comunicarse con el servidor origen es HTTP estándar. El servidor origen puede ser un servidor web estándar. ¾ Es suficiente realizar un par de modificaciones menores a la configuración del servidor para que pueda d atender t d contenido t id WAP WAP. 9 La mayoría del software de servidores web permiten realizar esta operación. 9 Una solución interesante es usar una tecnología como XSLT (XML Stylesheet Language Transformations) que permite generar automáticamente HTML y WML de la misma fuente de datos (raw data, sin formato). ¾ Probablemente estará presente también algún servidor de bases de datos (backend). ¾ El servidor origen puede emplear cualquier tecnología web estándar para generar cualquier contenido de tipo dinámico. 9 Scripts CGI, Java Servlets, ASP, ASP. NET 9 Podría requerirse comunicarse con la base de datos para obtener los datos sin formato y generar la salida. Revisión Julio 2008 Iván Bernal, Ph.D. 18 9 Infraestructura básica • El “gateway WAP” Convierte entre los protocolos del browser WAP (WSP, WTP, etc.) y los protocolos estándar requeridos por el servidor origen (HTTP, TCP/IP). Funcionalidad de gateway. Revisión Julio 2008 Iván Bernal, Ph.D. 19 Infraestructura básica • Convierte el contenido de salida del servidor origen (formateado como texto) en el formato binario comprimido de WML y WMLScript, de acuerdo a lo requerido por el browser WAP. Funcionalidad de un proxy. “In In the same way, other technologies such as MMS utilize this feature to efficiently transfer content to mobile subscribers”. subscribers WBXML – WAP Binary XML Format -, que describe cómo codificar y transferir documentos WML • El gateway consiste de software que realice estas conversiones, corriendo en hardware estándar. Gateways mas sofisticados corren en servidores UNIX para grandes cargas (heavy-duty) pero hay software para gateway disponible tipo low-end que incluso corre en PCs con Windows. El propietario del gateway también debe manejar la conexión a la red de transporte (bearer). ¾ Para un portador basado en dial up, este proceso se logra con un servidor de acceso estándar (se usaría los mismos elementos de hardware que las personas usan para marcar al Internet). ¾ Para portadores como SMS y GPRS, la conexión probablemente involucra una línea dedicada al carrier. Revisión Julio 2008 Iván Bernal, Ph.D. 20 10 Infraestructura básica Revisión Julio 2008 Iván Bernal, Ph.D. 21 Infraestructura básica • WAP 1.x El microbrowser en el dispositivo móvil envía un pedido al gateway WAP a través de la red móvil, típicamente usando un transporte de conmutación de paquetes (packet switched bearer). ¾ Por ejemplo: GPRS, WCDMA ó CDMA. El gateway extrae el pedido de la página y emplea el protocolo HTTP para enviar un pedido estándar HTTP hacia el servidor web que contiene el contenido. El servidor web envía una respuesta hacia el gateway, en donde es convertido a formato WAP (codificado de forma binaria). El contenido es enviado es luego enviado y presentado en el dispositivo móvil usando la red móvil. Revisión Julio 2008 Iván Bernal, Ph.D. 22 11 Infraestructura básica • Muchos mantendrán sus servidores origen, puesto que esto no es muy diferente de mantener un servidor web normal. • Debido a los requerimientos de toda esta infraestructura, la mayoría de quienes ofertan contenido WAP no mantendrán sus propios gateways. • Todos los carriers de telefonía celular que quieren soportar WAP mantendrán probablemente sus propios gateways. • Existe un número de sitios de portales que también mantienen sus gateways. • Puesto que la mayoría de estos permiten que los usuarios se conecten a cualquier para contenido en el Internet,, un usuario solo necesita una cuenta en uno de estos p acceder a todo el contenido de disponible de terceros. Revisión Julio 2008 Iván Bernal, Ph.D. 23 Otros Lenguajes de marcado • WML • cHTML (Compact HTML), utilizado en el servicio i-Mode de NTT DoCoMo (lanzado en marzo de 1999). Subconjunto j de HTML que q se distribuye y desde servidores web convencionales. Mas de 15 millones de usuarios al final del 2000. • Web Clipping 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 (Handheld Device Markup Language) Predecesor de WML Fue diseñado por Openwave. ¾ Desde que Openwave se unión al WAP Forum, HDML ha sido reemplazado progresivamente por WML. Revisión Julio 2008 Iván Bernal, Ph.D. 24 12 Otros Lenguajes de marcado Revisión Julio 2008 Iván Bernal, Ph.D. 25 WML • Un nuevo lenguaje de marcas (markup). • La mayor parte de WML es muy similar a HTML. • Existen, sin embargo, diferencias. Algunas debidas a la simplicidad de WML comparado con HTML. Algunas características encontradas en HTML simplemente no están presentes en WML. WML ¾ HTML provee gran control sobre la apariencia del texto en un documento. 9 Cambiar su tamaño 9 Especificar el tipo de letra 9 Agregar estilos como negrilla, subrayado 9 Fino control sobre su color ¾ WML ofrece simple control solo sobre: 9 Unos pocos estilos (emphasis, strong emphasis, negrilla, itálica y subrayado) 9 Tamaño más grande o más pequeño que el normal. 9 (Muchos browsers WAP ni siquiera soportan estos controles) El perder el nivel de control que provee HTML obliga a pensar en una manera diferente sobre las páginas que se escriben, concentrándose mas en el contenido que en la apariencia. ¾ No todos los browsers WAP soportan imágenes, tablas o cambios de estilos de texto. ¾ Si se confía en que todos los browsers soportan estas características, se reduce la potencial audiencia de las páginas de forma dramática. Revisión Julio 2008 Iván Bernal, Ph.D. 26 13 WML • No todo es negativo. WML deja de lado muchas características de HTML pero añade algunas nuevas y poderosas. Fue diseñado desde un inicio para aplicaciones interactivas, muchos de los dolores de cabeza de la web simplemente desaparecen. j de haber sido diseñado de una vez,, antes que q tener características añadidas p por También tiene la ventaja diferentes personas sin una coordinación adecuada (como ocurre en HTML con nuevas características). • El estándar WAP incluye también la especificación: WTAI – Wireless Telephony Application Interface “… a library of functions that link web pages to the primary functions of your phone.” You can initiate a call to the number specified, send a series of DTMF tones down the line (to access your voicemail, for example), and you can add the phone number to your list of contacts. Revisión Julio 2008 Iván Bernal, Ph.D. 27 WML • Ejemplo: Dependiendo del dispositivo y su browser, podría presentarse al usuario como se indica en la figura. Se explican algunos aspectos del listado con WML y otros se difieren para mas tarde. ¾ Se nota un encabezado especial (las cuatro primeras líneas) que, por ahora, se supone que simplemente es necesario al inicio de todas las páginas WML. Revisión Julio 2008 Iván Bernal, Ph.D. 28 14 WML • Ejemplo: • Todos los nombres de las etiquetas (tags) están en letras minúsculas. A diferencia de HTML, en donde <HTML>, <html>, <Html> y <hTMl> todas se refieren fi a la l misma i cosa. En WML, los nombres de las etiquetas son sensibles a mayúsculas y minúsculas. ¾ Todos los nombres de las etiquetas WML usan minúsculas y así se las debe utilizar. ¾ La primera etiqueta es <wml> y no <HTML> ¾ <card> que se explica luego ¾ <p> simplemente inicia un párrafo de texto Revisión Julio 2008 Iván Bernal, Ph.D. 29 WML • WML estructura su contenido de forma diferente a HTML. En HTML se organiza un archivo como un gran flujo de contenido. En WML se organiza un archivo como un deck (baraja) de cartas (deck of cards). • Características Una sola carta es presentada a la vez. ¾ Puede decirse que cada carta individual se comporta de forma muy similar a una página HTML. Puede tenerse enlaces de una carta a otra. Se pueden guardar varias cartas en un deck en un mismo archivo. ¾ Se puede pensar que un deck WML es similar a un número de páginas web agrupadas. • Un card p puede contener: Texto Imágenes en formato WBMP Enlaces Elementos de formularios Tareas Revisión Julio 2008 Iván Bernal, Ph.D. 30 15 WML • Es un buen estilo WML usar decks de cards para agrupar información relacionada o interacciones con el usuario. Las cartas en un deck se descargan de forma simultánea, de tal manera que el usuario tiene que esperar una sola vez, y las otras (cartas) puede ser accesadas casi instantáneamente. • Es un mal estilo WML sobreutilizar cards, agrupar demasiadas en un solo deck (y por lo tanto en un solo archivo descargable). A pesar que se puede pensar que todas las cartas que se deciden agrupar (por ejemplo 30) son todas relevantes al mismo tiempo, el usuario puede aburrirse esperando que todas esas cartas se descarguen antes de observar la primera. ¾ Es difícil poner un límite fijo en el número de cartas que pueden usarse. ¾ Hay una recomendación: si uno se encuentra usando mas de 5 o 6 cartas en un único deck, d k debe pensarse seriamente acerca de cómo están organizadas las páginas. Aunque el programador, generalmente, no se preocupa de la transmisión del contenido, algo a considerarse es que muchos dispositivos no pueden manejar archivos grandes. ¾ El teléfono celular Nokia 7110, uno de los dispositivos WAP mas populares en Europa, tiene problemas si el deck tiene mas de 1400 bytes luego de pasar por el gateway. Revisión Julio 2008 Iván Bernal, Ph.D. 31 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> Revisión Julio 2008 Iván Bernal, Ph.D. 32 16 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 id="card1" title=" Biblioteca "> <p align="center"><b>Reserva</b></p> <p align="center"><b>Consulta OPAC</b></p> </card> </wml> Revisión Julio 2008 Iván Bernal, Ph.D. 33 WML • Empty-Element Tags <img> usada también en HTML. Observar al final de la etiqueta: existe un / extra. ¾ Se requiere en WML siempre que una etiqueta no tiene la correspondiente etiqueta terminal (la que tiene un / después del primer paréntesis angular: <p> ……</p>). ¾ A este tipo de etiqueta se les denomina Empty-Element Tags y son comunes en HTML y WML. 9 HTML no las decora de ninguna manera especial, por lo que parecen como etiquetas ti t de d inicio i i i (start ( t t tags). t ) Esto hace que los browsers HTML u otro programa cualquiera realicen trabajo extra innecesario para leer el archivo. 9 WML al incluir el / extra hace la estructura mas consistente. Es una característica tomada de XML. Hace que la lectura y el parsing sea mas fácil para el browser. Revisión Julio 2008 Iván Bernal, Ph.D. 34 17 WML • Elementos Toma una de dos formas. ¾ Start tag y end tag (etiquetas de inicio y fin) cuyos tipos deben coincidir. ¾ Solo un empty-element tag ¾ Nótese que hay exactamente un / por elemento. Un elemento puede contener otros elementos (cualquiera de las dos formas indicadas). Para el ejemplo: ¾ Un solo elemento <wml> (un par de etiquetas correspondientes: <wml> </wml> ) que contiene un solo elemento <card> (el par: <card> </card>), que a su vez contiene un solo elemento <p> (el par: <p> </p>), que a su vez contiene un solo elemento <img> (como una etiqueta empty-element <img/ >). Revisión Julio 2008 Iván Bernal, Ph.D. 35 WML • Elementos Es importante para asegurar que las etiquetas correspondan adecuadamente. Ejemplo incorrecto y que no permitirá la visualización adecuada: La forma correcta es: Revisión Julio 2008 Iván Bernal, Ph.D. 36 18 WML • Atributos Etiquetas tipo start y empty-element pueden tener atributos. ¾ En la etiqueta <card> se tiene el atributo title. q <img> g se tiene el atributo src. ¾ En la etiqueta Los atributos afectan el comportamiento de todo el elemento y su efecto varía entre diferentes elementos. ¾ El atributo title en <card> proporciona un título opcional a ser presentado con la carta. ¾ El atributo src en <img> proporciona el URL en el cual la imagen puede encontrarse. ¾ El atributo align=“center” en el elemento <p>, permite centrar el párrafo de texto (si el browser soporta esta característica). Revisión Julio 2008 Iván Bernal, Ph.D. 37 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 Revisión Julio 2008 Iván Bernal, Ph.D. 38 19 WML • Atributos Una diferencia menor entre WML y HTML es el uso de las comillas en el valor de los atributos. ¾ En HTML, los valores de los atributos pueden aparecer en comillas simples (atributo=‘valor’), en comillas dobles (atributo=“valor”), y en la mayoría de browsers se permite no usar comillas de ningún tipo (atributo=valor) aunque no sea estrictamente válido. ¾ En WML, no se permite tener los valores de atributos sin comillas. Todos los valores deben aparecer entre ya sea comillas simples o dobles. Revisión Julio 2008 Iván Bernal, Ph.D. 39 WML • Entidades (entity) Su propósito es representar símbolos que: ¾ No pueden ser ingresados fácilmente 9 Puede ser que no disponga del símbolo de libras esterlinas de los británicos en el teclado. ¾ Tienen un significado especial en WML 9 Si se pone el carácter < en el texto normal, el browser piensa que es el inicio de una etiqueta; el browser luego se queja cuando no puede encontrar el carácter > correspondiente a la etiqueta de fin. 9 En HTML se encuentra un problema similar cuando se desea poner en el texto ciertos símbolos especiales (comillas, símbolos de mayor o menor, y otros). Revisión Julio 2008 Iván Bernal, Ph.D. 40 20 WML • Entidades (entity) Hay tres formas de entidades en WML: ¾ Entidades nombradas (named entities) que aparecen como &amp ó &lt. 9 Representan un solo carácter nombrado por medio de un mnemónico. ¾ Las entidades pueden ser ingresadas en una de dos formas numéricas (decimal o hexadecimal), lo que permite incluir caracteres Unicode en WML. 9 Esto no garantiza que el browser pueda presentarlo presentarlo, pero es un intento intento. 9 Las entidades numéricas decimales aparecen como &#33 (símbolo de exclamación Unicode) ó &#163 (símbolo de libra Unicode). 9 Las entidades numéricas hexadecimales aparecen como &#x21 ó &#xA3, para los mismos caracteres anteriores. Revisión Julio 2008 Iván Bernal, Ph.D. 41 WML • Entidades (entity) Todas las entidades inician con un & y terminan con ; ¾ El punto y coma es muy importante 9 Algunas páginas web no lo incluyen olvidan y producen problemas en lo browsers que esperan HTML bien estructurado. 9 La mayoría de web browsers son tolerantes de pequeñas incorrecciones en la sintaxis HTML por lo que errores comunes pasan desapercibidos. ¾ Los browsers WAP son mas estrictos respecto a este tipo de errores. Revisión Julio 2008 Iván Bernal, Ph.D. 42 21 WML • Entidades (entity) • Cuando el browser requiere dividir una línea larga de texto para que calce en la pantalla, t ll busca b por un punto t adecuado d d en donde d d hacer h la l división. di i ió Puede ser la “brecha” entre dos palabras. Esto significa que normalmente las líneas se dividen en los espacios. • Nonbreaking space Un tipo especial de espacio que no delimita una palabra. El browser no divide la línea en este lugar. Son útiles cuando los caracteres alrededor del espacio no es texto normal (en Inglés). ¾ En algunas ocasiones ayudan a escoger el lugar en el que las líneas se dividen en largos pasajes de texto, haciendo el texto más fácil de leer. ¾ Esto no se hace comúnmente en WAP. Revisión Julio 2008 Iván Bernal, Ph.D. 43 WML • Entidades (entity) • Soft hyphen Relacionado a la división de líneas de texto. En lugar de prevenir la división, marcan un lugar en una palabra larga en donde se puede realizar la división (un hyphen discrecional). El hyphen (guión) es visible solo si la línea es dividida en ese punto. Revisión Julio 2008 Iván Bernal, Ph.D. 44 22 WML • Comentarios Para recordar luego como funciona algo. Remover temporalmente una parte de un archivo mientras se prueba algo diferente. Un comentario: ¾ Inicia con los cuatro caracteres <!- ¾ Finaliza con los tres caracteres - - > ¾ Todo lo que está entre estos dos marcadores, incluyendo etiquetas, texto, entidades y divisiones de líneas, se ignora. ¾ Podría parecer que el agregar comentarios causa un efecto negativo en la cantidad de información transmitida y en el tiempo de espera. 9 Pero el gateway WAP remueve todos los comentarios como parte de sus tareas de procesamiento, por lo que el browser ni siquiera sabe que existen. Revisión Julio 2008 Iván Bernal, Ph.D. 45 SDKs • Para probar y desarrollar código WML se debe instalar un SDK. Un SDK generalmente contiene un emulador de un microbrowser. Existen emuladores de microbrowser independientes de un SDK. • El SDK que se escoja depende de varios factores: Los dispositivos inalámbricos que se desean soportar. Las características que se requieran. Preferencias personales. • Para asegurar que el código trabajará correctamente en el mayor número de microbrowsers y dispositivos WAP, puede ser una buena idea instalar algunos de los principales SDKs disponibles. Revisión Julio 2008 Iván Bernal, Ph.D. 46 23 SDKs • Ericsson (antiguo) El nombre de la herramienta es WapIDE y puede encontrarse en el área de desarrolladores de la página de Ericsson una vez que te has registrado (??). Primero debe instalarse la base y luego el kit de desarrollo: ¾ WapIDE_3PP_2_0.exe ¾ WapIDE_SDK_2_1.exe. Una vez terminada la instalación, tendremos un grupo de programas denominado Erisson que incluye el grupo WapIDE, que a su vez debe contener un fichero con instrucciones básicas, el programa WapIDE 2.0, la ayuda WapIDE Help y por último un acceso directo al servidor WML, WML Server. Si al intentar arrancar WapIDE 2.0, obtenemos un error de falta de memoria, deberemos aumentar el tamaño inicial del espacio de variables al máximo permitido. Revisión Julio 2008 Iván Bernal, Ph.D. 47 SDKs • Nokia (antiguos) Nokia Mobile Internet Toolkit Nokia WAP Toolkit 1.2 Nokia WAP Toolkit 2.0 Jun-2000 Revisión Julio 2008 Iván Bernal, Ph.D. 48 24 SDKs • Nokia Mobile Internet Toolkit – NMIT - (Version 4.1) http://www.forum.nokia.com/info/sw.nokia.com/id/f156b8e9-1dcd-4e5b-8e756e6ceded398e/NMIT_41.zip.html “..to everyone who failing to open WML editor/XHTML with Nokia Toolkit. If you have installed Java runtime environment 1.5 and above, just unistall it and reinstall JRE 1.4.1.x.x. Otherwise it won't work!!! It is a wierd problem, and I was quite frustrated with it”. ¾ http://java.sun.com/j2se/1.4.2/download.html ¾ Problema: OTROS PROGRAMAS (SDKs de dispositivos) REQUIEREN JRE 1.5 • Para números de serie http://www.forum.nokia.com/main/resources/tools_and_sdks/request_serial_number.html • Parche para NMIT 4.1 –todo trabaja ahora con JRE 1.5- http://www.forum.nokia.com/info/sw.nokia.com/id/75c20ed5-6512-46ed-befa-5d67af75b2bf.html Revisión Julio 2008 Iván Bernal, Ph.D. 49 SDKs • Nokia – NMIT (Solución temporal) Revisión Julio 2008 Iván Bernal, Ph.D. 50 25 SDKs • Nokia – NMIT (Solución temporal) Archivo *.bat @echo off C:\"Archivos de programa"\Java\j2re1.4.2_16\bin\java -jar lib\toolkit.jar Revisión Julio 2008 Iván Bernal, Ph.D. 51 SDK • NOKIA - NMIT Revisión Julio 2008 Iván Bernal, Ph.D. 52 26 SDKs • Nokia Revisión Julio 2008 Iván Bernal, Ph.D. 53 SDKs • Dispositivos http://www.forum.nokia.com/devices/matrix_midp1_1.html • http://www.forum.nokia.com/main/platforms/s40/ http://www.forum.nokia.com/info/sw.nokia.com/id/cc48f9a1-f5cf-447b-bdbap c4d41b3d05ce/Series_40_Platform_SDKs.html ¾ Requiere JRE 1.5 ¾ http://java.sun.com/javase/downloads/index_jdk5.jsp http://www.forum.nokia.com/devices/6500_slide • Nokia Mobile Browser http://www.forum.nokia.com/info/sw.nokia.com/id/db2c69a2-4066-46ff-81c4caac8872a7c5/NMB40_install.zip.html Revisión Julio 2008 Iván Bernal, Ph.D. 54 27 SDKs • Series 40 Platform SDKs Series 40 5th Edition SDK, Feature Pack 1 Requerimientos: ¾ Windows XP (SP2) or Windows 2000 (SP4) ¾ Java™ Runtime Environment (JRE) 1.5 or later ¾ 256 MB RAM minimum 512 MB recommended ¾ 80 MB free disk space ¾ 667 MHz or faster Pentium-class processor Revisión Julio 2008 Iván Bernal, Ph.D. 55 Iván Bernal, Ph.D. 56 NOKIA Revisión Julio 2008 28 SDKs • NOKIA Revisión Julio 2008 Iván Bernal, Ph.D. 57 SDKs • Openwave Phone Simulator Is a free software development kit Programming tool that features the latest versions of: ¾ Openwave Mobile Browser ¾ Openwave Mobile Messaging Client ¾ Documentation and sample code for authoring wireless applications using XHTML/CSS and MMS-SMIL. Version 7.0 Now Available Revisión Julio 2008 Iván Bernal, Ph.D. 58 29 Gateway • Probar con http://webcab.de/i.wml http://www.solucionesahora.com/index.wml http://www.wappen.nl/www/enter/index.php (en series 40) • http://www.hicon.nl/ENG/index.html (página HTML) http://www.hicon.nl/wap/images/cart1_animals/animal7.wbmp Salvar al disco y abrir con NMIT • http://wappy.to/ • http://www.google.com/wml?q=indigestionmide11 • http://www.midlet.org/wap/ • http://www.gcmovil.com/Guia-de-Sitios-WAP.html (revisar) • http://www.alkon.com.ar/foro/telefonia_celular.120/229541-direcciones_wap/ Revisión Julio 2008 Iván Bernal, Ph.D. 59 IIS 6.0 Revisión Julio 2008 Iván Bernal, Ph.D. 60 30 IIS 6.0 Revisión Julio 2008 Iván Bernal, Ph.D. 61 Apache • El archivo hhtpd.conf indica la extensión de los archivos para indicar las configuraciones de directorios individuales. Revisión Julio 2008 Iván Bernal, Ph.D. 62 31 Apache • Una forma de habilitar la entrega de archivos relacionados a WAP. Incluir este archivo en el directorio que contiene los archivos wml y (relacionados) Revisión Julio 2008 Iván Bernal, Ph.D. 63 Smartphone • Un dispositivo electrónico que fusiona un teléfono celular con características similares a las de un computador personal. Casi todos los teléfonos inteligentes son celulares que soportan completamente un cliente de correo electrónico con la funcionalidad completa de un organizador personal. personal • Permiten la instalación de programas para incrementar el procesamiento de datos y la conectividad. Estas aplicaciones pueden ser desarrolladas por el fabricante del dispositivo, por el operador o por un tercero. • El término "Inteligente" hace referencia a cualquier interfaz,, como un teclado QWERTY Q en miniatura,, una pantalla táctil, o simplemente el acceso seguro al correo electrónico de una compañía. Revisión Julio 2008 Iván Bernal, Ph.D. 64 32 Teclado Qwerty • El teclado QWERTY es una distribución de teclado, la más común actualmente. Fue diseñado y patentado por Christopher Sholes en 1868 y vendido a Remington en 1873. • Al mirar el teclado de la computadora se ve que la primera secuencia de letras es QWERTY. QWERTY Esta secuencia es por la que se conoce popularmente esta disposición del teclado. Revisión Julio 2008 Iván Bernal, Ph.D. 65 WML - Elementos básicos <p>...</p> Párrafos <br /> Saltos de línea <b>...</b> / Negrita g <u>...</u> Subrayado <i>...</i> Cursiva <em>...</em> Cursiva <strong>...</strong> Negrita <big>...</big> Letra grande <small>...</small> Letra pequeña Revisión Julio 2008 Iván Bernal, Ph.D. 66 33 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> Revisión Julio 2008 Iván Bernal, Ph.D. 67 WML – Elementos básicos Revisión Julio 2008 Iván Bernal, Ph.D. 68 34 WML – Elementos básicos <p><big><i><b><u>Reserva</u></b></i></big></p> Revisión Julio 2008 Iván Bernal, Ph.D. 69 WML - Tablas • El modelo de tablas es similar al que ofrece HTML El elemento table determina la aparición de una tabla. 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 (table row) Para cada celda en cada fila, el elemento tr contendrá un elemento td (table data) <table columns=“2" > <tr> <td>Madrid</td> <td>91-5555555</td> </tr> <tr> <td>Barcelona</td> <td>93-4657505</td> </tr> </table> Revisión Julio 2008 Iván Bernal, Ph.D. 70 35 WML – Tablas <?xml version="1.0"?> <!DOCTYPE wml PUBLIC … > <wml> <card id="card1" title=" Biblioteca "> <p><table columns= columns="2" 2 > <tr> <td>Madrid</td> <td>91-5555555</td> </tr> <tr> <td>Barcelona</td> <td>93-4657505</td> </tr> </table></p> </card> </wml> Revisión Julio 2008 Iván Bernal, Ph.D. 71 WML – Enlaces hipertexto • Se incluyen dos posibilidades: ¾ Elemento anchor ¾ Elemento a • Elemento anchor U link Un li k debe d b tener asociada i d una acción ió a ejecutarse j cuando d ell link li k sea seleccionado: go – ir a cualquier URL prev – ir a la card anterior refresh – refrescar la card actual • Elemento a Forma abreviada de anchor que está asociada siempre a go go. Contiene el texto origen del hiperenlace (Madrid, en el ejemplo). Tiene un atributo href que toma como valor el URL del documento WML destino. Revisión Julio 2008 Iván Bernal, Ph.D. 72 36 WML – Enlaces <card id="card1" title=" Biblioteca "> <p><a a href="biblioteca.wml">Madrid</a></p> <p>Barcelona</p> </card> <!-- Probar con el web server y gateway --> Revisión Julio 2008 Iván Bernal, Ph.D. 73 WML – Enlaces <card id="card1" title=" Biblioteca "> <p> <anchor>Madrid <go href="biblioteca.wml" /> </anchor> </p> <p>Barcelona</p> </card> • Atributos de anchor: Revisión Julio 2008 Iván Bernal, Ph.D. 74 37 WML – Enlaces • Observar pedidos y codificación de respuestas desde un servidor Revisión Julio 2008 Iván Bernal, Ph.D. 75 WML - Imágenes • Únicamente (?) se acepta un formato de imagen: WBMP Son imágenes en blanco y negro • El elemento img va acompañado de los atributos obligatorios: src ¾URL del archivo wbmp que contiene la imagen alt ¾Texto alternativo para dispositivos WAP que no pueden mostrar imágenes Revisión Julio 2008 Iván Bernal, Ph.D. 76 38 WML – Enlaces <wml> <template> <do type="options" name="prev" label="anterior"> <prev/> </do> </template> <card id="elige" title="animales"> <p> <anchor title="buho">buho <go href="#buho"/> </anchor> / <anchor title="conejo">conejo <go href="#conejo"/> </anchor> <anchor title="perro">perro <go href="#perro"/> </anchor> </p> </card> <card id="buho" title="buho"> <p> <img src="buho.wbmp" alt="buho"/> </p> </card> / <card id="conejo" title="conejo"> <p> <img src="conejo.wbmp" alt="conejo"/> </p> </card> <card id="perro" title="perro"> <p> <img src="perro.wbmp" alt="perro"/> </p> </card> </wml> Revisión Julio 2008 Iván Bernal, Ph.D. 77 WML – Enlaces Revisión Julio 2008 Iván Bernal, Ph.D. 78 39 WML – Cajas de texto o campos • En un card se pueden incluir campos o cajas de texto para que el usuario ingrese datos que luego podemos asignar a una variable. • Se utiliza el elemento input. • input tiene dos atributos: name ¾ Nombre del control o campo. Es obligatorio size ¾ Tamaño de la caja de texto <p>ISBN: <input name=“isbn” size=“10” /></p> Revisión Julio 2008 Iván Bernal, Ph.D. 79 WML – Cajas de texto o campos <wml> <card id="card1" title=" Biblioteca "> <p>ISBN: <input name="isbn" size="15" /></p> <p>Titulo: <input name="titulo" /></p> </card> </wml> Revisión Julio 2008 Iván Bernal, Ph.D. 80 40 WML – Opciones ((radio radio button) 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 tiene 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. Revisión Julio 2008 Iván Bernal, Ph.D. 81 WML – Opciones (radio button button)) <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> Revisión Julio 2008 Iván Bernal, Ph.D. 82 41 WML – Opciones (radio button button)) Revisión Julio 2008 Iván Bernal, Ph.D. 83 WML – Opciones ((check check boxes boxes)) • Se utilizan para que el “usuario” pueda elegir más de una opción entre varias. Se utiliza el elemento select, con el atributo multiple=“true” <select multiple=“true”> multiple true > • El elemento select contendrá un elemento option para cada opción disponible. • El elemento option posee un atributo value, que recoge como valor el “valor” que habrá seleccionado el usuario si elige esa opción. opción • El elemento option contiene además el texto que se verá a la derecha de la casilla de validación. Revisión Julio 2008 Iván Bernal, Ph.D. 84 42 WML – Opciones (check boxes boxes)) <wml> <card id="card1" title=" Biblioteca "> <p> <select multiple=“true”> <option value="BCN">Barcelona</option> <option value="MAD">Madrid-Barajas</option> value MAD >Madrid Barajas</option> <option value="GRA">Granada</option> </select> </p> </card> </wml> Revisión Julio 2008 Iván Bernal, Ph.D. 85 WML – Opciones (check boxes boxes)) Revisión Julio 2008 Iván Bernal, Ph.D. 86 43 WML – Opciones (check boxes boxes)) <wml> <card id="hw" title="select"> <p> A donde has viajado <br/> < l t multiple="true" <select lti l "t " name="pais" " i " iname="i" i "i" ivalue="1;3"> i l "1 3"> <option value="SriLanka">Sri Lanka</option> <option value="Hungria">Hungria</option> <option value="Afganistan">Afganistan</option> <option value="Mexico">Mexico</option> </select> <br/> La variable p pais = $(p $(pais)) <br/> La variable i = $(i) <br/> </p> </card> </wml> Revisión Julio 2008 Iván Bernal, Ph.D. 87 WML – Opciones (check boxes boxes)) •ivalue es 1 y 3 •1 es Sri Lanka •3 es Afganistán Revisión Julio 2008 Iván Bernal, Ph.D. 88 44 WML – fieldset • La etiqueta fieldset se usa para agrupar elementos relacionados lógicamente en una card. Estos elementos relacionados incluyen: text, tables, elementos select, links, elementos input, imágenes, o lo que se requiera. Es posible anidar elementos fieldset dentro de otros elementos fieldset. El elemento fieldset tendrá un atributo title, que recogerá un nombre para el grupo de campos. • Esto permite que el browser optimice la distribución/ubicación de elementos (layout) y la navegación (trata de mantener toda la información relevante en pantalla al mismo t). <fieldset title=“libro”> ISBN: <input name=“isbn” size=“15” /> <br /> Autor: <input name=“autor” size=“25”/> </fieldset> Revisión Julio 2008 Iván Bernal, Ph.D. 89 WML – fieldset <wml> <card id="ic" title="Ice Cream Poll"> <p> <fieldset id="fs1" title="Name"> Please enter your name<br /> First Name: <input id="inp1" type="text" name="firstname" maxlength="20" /> Last Name: <input id="inp2" type="text" name="lastfname" maxlength="20" /> </fieldset> <fieldset id="fs2" title="Select a favorite"> Click Select<br /> <select id="sl1" name="favorite" title="Pick your favorite!"> <option value="ch">Chocolate</option> <option value="st">Strawberry</option> <option value="va">Vanila</option> </select> </fieldset> </p> </card> </wml> Revisión Julio 2008 Iván Bernal, Ph.D. 90 45 Eventos • En HTML se usa texto para incorporar enlaces para que el usuario navegue a través de un doble-click sobre ellos. • En WML se encadenan las cartas mediante la captura de eventos. Los eventos son pulsaciones del teclado del móvil por parte del usuario o el disparo de temporizadores. Las etiquetas que se emplean para capturar eventos son, fundamentalmente, do y onevent. ¾ “Do” ya se ha empleado en ejemplos anteriores. ¾ do permite programar las acciones que puede hacer el usuario en una carta. Revisión Julio 2008 Iván Bernal, Ph.D. 91 do <do type="accept" name=“Nombre"><go href="http://www.pagina.com/"/></do> • name: El nombre del evento do. • type: yp Indica el tipo p de elemento q que será do. accept (acepta la acción que se asigna dentro de do y la ejecuta), prev (va a la página anterior) help (abre el menú de ayuda) reset (limpia los campos de introducción de datos, o ejecuta un reset del status) options (abre el menú de opciones) delete (borra un elemento o elección) unknown (nada especial, equivale a type="") • Dentro de la etiqueta <do>, podemos poner las siguientes tareas: <go/> <prev/> <noop/> <refresh/> Revisión Julio 2008 Iván Bernal, Ph.D. 92 46 do <wml> <card> <do type="accept"> <go href="#card2"/> </do> /d <p> Press OK to display the next screen. </p> </card> <card id="card2"> <p> This screen displays Card 2. </p> </card> </wml> Revisión Julio 2008 Iván Bernal, Ph.D. 93 do <wml> <card> <do type="accept"> <go href="#card2"/> </do> <p> Press OK to display the next screen. </p> </card> <card id="card2"> <do type="prev" name="prev" label="anterior"> <prev/> p </do> <p> This screen displays Card 2 </p> <p>Press anterior to display the previous screen. </card> </wml> Revisión Julio 2008 Iván Bernal, Ph.D. </p> 94 47 do • label Pone una etiqueta al do que puede sustituir a al texto de menú que aparece cuando el usuario pulsa un botón. Hay que tratar de poner un texto muy pequeño o el texto será truncado, truncado ¾ No debería superar los 5 ó 6 caracteres. • optional Si optional es TRUE, permite que algunos o todos los elementos de un do sean opcionales, lo cual hace que el usuario pueda activarlos (porque previamente i t están tá desactivados d ti d y son opcionales). i l ) ¾ Puede ser: true o false. Por ejemplo: <do type="accept" optional="true" label="Wmlclub"><go href="http://www.wmlclub.com/"/></do> Revisión Julio 2008 Iván Bernal, Ph.D. 95 WML - Timer • El elemento timer se utiliza para dejar transcurrir un periodo de tiempo. Tiene un atributo value que toma como valor el tiempo que debe transcurrir, expresado en décimas de segundo. • 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 cardd Revisión Julio 2008 Iván Bernal, Ph.D. 96 48 WML – Timer <wml> <card id="card1" title="Biblioteca“ ontimer="example.wml"> <timer value="50" /> <p>Espera que se cargue otra pagina…</p> </card> </wml> Revisión Julio 2008 Iván Bernal, Ph.D. 97 WML – Timer <wml> <card id="card1" title="Biblioteca“ ontimer="example.wml"> <timer value="50" /> <p>Espera que se cargue otra pagina…</p> </card> </wml> <wml> <card> <onevent type="ontimer"> <go href= "example.wml" /> </onevent> <timer value="50"/> <p>Espera que se cargue otra pagina…</p> </card> </wml> Revisión Julio 2008 Iván Bernal, Ph.D. 98 49 WML - Variables • Una de las grandes diferencias entre el WML y el HTML. En WML se pueden definir variables en las cards, asignarles valores y presentarlos en la pantalla, incluso utilizar las variables en expresiones. ¾ Se puede conservar información en el paso de una carta a otra y dividir los procesos en varios i pasos que en pantallas t ll pequeñas ñ es muy conveniente. i t • Las variables son cadenas de texto a la que se le asigna un valor o ningún valor. Recordar que en los nombres se distinguen mayúsculas y minúsculas. • Hay tres formas de referenciar una variable: $nombrevariable ¾ Se utiliza cuando no hay ambigüedad con el nombre de la variable dentro del contexto. $(nombrevariable) ¾ Cuando puede existir ambigüedad con el nombre de la variable dentro del contexto. $(nombrevariable:conversión) ¾ Se explica más adelante. Revisión Julio 2008 Iván Bernal, Ph.D. 99 WML - Variables • Alternativas para la declaración e inicialización de variables: Con setvar <setvar name="nombre" value=“Hola"/> ¾ Hola es el valor de la variable nombre. ¾ Con setvar se crea la variable y a la vez se le asigna un valor. Con input ¾ Se puede declarar la variable y asignarle un valor. ¾ input se utiliza para la entrada de datos y esos datos se asignarán a una variable. Con select ¾ Se puede declarar la variable y asignarla un valor. ¾ Permite al usuario seleccionar uno o más valores de una lista de opciones; dichos valores escogidos se asignarán a la variable. Con postfield ¾ Se puede declarar la variable y asignarla un valor. Revisión Julio 2008 Iván Bernal, Ph.D. 100 50 WML – Variables •Para presentar el valor de una variable en una card, se utiliza la sintaxis $(nombreVariable) <wml> <card id="card1" title=" Biblioteca "> <p> <select name="strnombre"> <option value="Madrid">Madrid</option> <option value="Barcelona">Barcelona</option> </select> </p> <p>Ud. eligió el destino: $(strnombre)</p> </card> </wml> Revisión Julio 2008 Iván Bernal, Ph.D. 101 WML – Variables Revisión Julio 2008 Iván Bernal, Ph.D. 102 51 WML – Variables <wml> <card id="card1" title=" Biblioteca "> <p> <select multiple="true" name="strnombre"> <option value="BCN">Barcelona</option> <option value="MAD">Madrid-Barajas</option> <option value="GRA">Granada</option> </select> </p> <p>Ud. eligio el destino: $(strnombre)</p> </card> </wml> Revisión Julio 2008 Iván Bernal, Ph.D. 103 WML – Variables Revisión Julio 2008 Iván Bernal, Ph.D. 104 52 WML – Variables <wml> <card id="card1" title="Tu nombre" > <p> Este es tu nombre<br/> <input format="*M" name="s_nombre" title="Nombre:" value=“”/> <do type="accept" label="Continuar"> <go href="#card2"/> h f # d2 / </do> </p> </card> <card id="card2" title="Saludo"> <p> Hola $(s_nombre)<br/> Esta es la forma de pasar una variable de un lado a otro. </p> </card> </wml> Revisión Julio 2008 Iván Bernal, Ph.D. 105 WML – Variables Revisión Julio 2008 Iván Bernal, Ph.D. 106 53 WML – Variables <wml> <card id = 'card1' title = 'Paso variable‘ > <p> <b>PAGINA 1</b><br/> Nombre: <input type = 'text' name = 'Nombre' /> <br/> <a href="pasovariableDECKS_2.wml"> Ir a otra pagina</a><br/> </p> </card> </wml> // pasovariableDECKS_2.wml /*paso de variables entre decks*/ <wml> <card id = 'card1' title = 'Esta es otra pagina'> <p> <b>PAGINA 2</b><br/> <b>Ha pasado esta variable:</b><br/> $(Nombre) <do type = 'accept' label = 'Volver' > <go href = "pasovariableDECKS_1.wml"> </go> </do> </p> </card> </wml> Revisión Julio 2008 Iván Bernal, Ph.D. 107 WML – Variables Revisión Julio 2008 Iván Bernal, Ph.D. 108 54 WML – Variables • Ingresar texto usando un teléfono móvil puede ser sumamente tedioso. Puede ser aceptable usar abreviaciones cuando se envía texto a los amigos usando SMS (c l8r) . Sin embargo, si se desea ingresar datos en un sitio web no se puede seguir la idea de abreviar. • Cuando sea posible, se debe limitar el número de etiquetas <input> y en su lugar usar cajas de selección. De forma similar a las opciones de selección de HTML (pero no iguales), las entradas por selección WML ofrecen un conjunto de opciones predeterminadas, reduciendo el números de teclas presionadas a unas pocas. • Cada entrada por selección debe tener un nombre y al menos una etiqueta <option>. Al contrario de HTML, las etiquetas <option> son esenciales. Revisión Julio 2008 Iván Bernal, Ph.D. 109 WML – Variables • Conversión al formato escape Se definió una sustitución de algunos caracteres propios de los URLs para que el servidor no los confundiera (reglas del formato escape, RFC2396). Estas reglas facilitan un mecanismo para poder incluir esos caracteres en una línea URL. Aunque estas reglas fueron creadas para referenciar URLs, se pueden aplicar las mismas reglas para referenciar variables. Cuando se introduce el valor de una variable en un deck, se puede definir el formato (escape, unescape o no escape) así: Revisión Julio 2008 Iván Bernal, Ph.D. 110 55 WML – Variables • Conversión al formato escape <wml> <card id="carta1" title="conversion"> <p> Teclee un texto con caracteres especiales: </p> <p><input type="text" name="texto"/></p> <do type="accept"> <go href="#carta2"/> </do> </card> <card id="carta2" title="conversion"> <p> texto normal: $(texto) <br/> texto en formato escape: $(texto:e) </p> </card> </wml> Revisión Julio 2008 Iván Bernal, Ph.D. 111 WML – Variables • Conversión al formato escape Revisión Julio 2008 Iván Bernal, Ph.D. 112 56 WML – Variables • Conversión al formato escape Revisión Julio 2008 Iván Bernal, Ph.D. 113 WML - Variables • El elemento setvar tiene dos atributos: name – nombre de la variable value – valor que se le asigna Revisión Julio 2008 Iván Bernal, Ph.D. 114 57 Tareas (tasks (tasks)) • Con la etiqueta do se pueden especificar tareas que los browsers realizarán al presionar ciertas teclas o navegar por las cards y decks. Suele mencionarse que es lo mas cercano a agregar un botón en una forma. ¾ Puede ser una nueva alternativa que se agrega a un menú. Son la base de la interacción con el usuario y los documentos WAP. Entre las tareas mas comunes: ¾go ¾prev ¾refresh ¾noop Revisión Julio 2008 Iván Bernal, Ph.D. 115 Tareas (tasks (tasks)) • go (ejecuta una acción cuando el usuario selecciona una opción ) Produce un salto hacia otra página WAP o hacia otra card. ¾ En href se indica el nombre de otra card, deck o dirección WAP a presentar. ¾ EJEMPLO: <go href="http://geneura.ugr.es/~gustavo/wap/"/> Puede usarse para transferir información hacia el servidor. <wml> <card> <do type="accept"> <go href="biblioteca.wml"/> </do> <p>Ejemplo de go...</p> </card> </wml> Revisión Julio 2008 Iván Bernal, Ph.D. 116 58 Tareas (tasks (tasks)) • go Revisión Julio 2008 Iván Bernal, Ph.D. 117 Tareas (tasks (tasks)) • prev Indica al navegador que vuelva a la dirección anterior que tenga en la pila. ¾ Como efecto lateral elimina la carta actual de la pila de cartas visitadas. Sus únicos atributos son: <wml> <card id="carta1" ontimer="#carta2"> <timer name="t1" value="50"/> <p>esta es la primera carta</p> </card> <card id="carta2"> <do type="options" label="anterior"> <prev/> </do> <p>esta es la segunda carta</p> </card> </wml> Revisión Julio 2008 Iván Bernal, Ph.D. 118 59 Tareas (tasks (tasks)) Revisión Julio 2008 Iván Bernal, Ph.D. 119 Tareas (tasks (tasks)) • refresh Para una actualización del contexto del navegador especificado por la etiqueta setvar. Como efecto lateral del cambio de estado, el estado de la pantalla puede cambiar. • noop Especifica que no se debe hacer nada. Suele emplearse para evitar acciones habilitadas por defecto para todo un deck, mediante un patrón (template). ¾ En el siguiente ejemplo se usa para deshabilitar la opción de volver, especificada en el patrón, en la segunda carta: Revisión Julio 2008 Iván Bernal, Ph.D. 120 60 Tareas (tasks (tasks)) <wml> <template> <do type="options" name="prev" label="anterior"> <prev/> </do> </template> <card id="carta1"> <do type="accept" name="next" label="siguiente"> <go href="#carta2"/> href "#carta2"/> </do> <p>Contenido de la primera carta</p> </card> <card id="carta2"> <do type="accept" name="next" label="siguiente"> <go href="#carta3"/> </do> <do type="options" name="prev"> <noop/> </do> <p>Contenido de la segunda carta</p> </card> <card id="carta3"> <do type="accept" name="next" label="options"> <go href="#carta1"/> </do> <p>Contenido de la tercera carta</p> </card> </wml> Revisión Julio 2008 121 Iván Bernal, Ph.D. Tareas (tasks (tasks)) type name label Acción Template options prev anterior prev card 1 accept next siguiente go card 2 options prev anterior prev card 2 card3 Revisión Julio 2008 accept next siguiente go card 3 options prev XXXXXXX noop accept next options go card 1 options prev anterior prev Iván Bernal, Ph.D. 122 61 Tareas (tasks (tasks)) Revisión Julio 2008 Iván Bernal, Ph.D. 123 Tareas (tasks (tasks)) • Aunque el documento XML estará well-formed con mas de un de las etiquetas <do>, muchos browsers y toolkits ignorarán el código duplicado. • También la manera en que se presenta la información asociada la usuario varía de forma drástica de teléfono a teléfono teléfono. • Por esta razón, se suele usar la etiqueta <do> solo para las tareas de: back, accept (equivalente a submit) o reset en las formas, help as appropriate Options • Si se tiene una serie de links que indicar, se prefiere usar la etiqueta <anchor> o la <a>. Esto ayuda a que cada teléfono presente las opciones de forma consistente. Revisión Julio 2008 Iván Bernal, Ph.D. 124 62 Tareas (tasks (tasks)) • Observaciones La etiqueta <do> puede aparecer tanto a nivel de carta como a nivel de baraja. ¾ A nivel de carta significa que puede ponerse dentro de <card> card ... </card> /card ¾ A nivel de baraja (deck) significa que puede ponerse dentro de una plantilla (template). ¾ La etiqueta template está dentro de la etiqueta <wml> directamente. <wml> <template> <do type="options" name="prev" label="anterior"> <prev/> </do> </t </template> l t > …….. </wml> Si desea prescindir o cambiar del template en un deck deberá sobreescribir el elemento <prev> del template. Revisión Julio 2008 Iván Bernal, Ph.D. 125 Ejemplo navegación • 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. Probar con los distintos teléfonos y SDKs. <wml> <card id="card1" title="Lista de vuelos"> <p> <select name="strnombre"> <option value="MAD">Madrid-Barajas</option> <option value="BAR">Barcelona</option> <option p value="GRA">Granada</option> p </select> </p> <p> <a href="#card2">Aceptar</a> </p> </card> ………… Revisión Julio 2008 Iván Bernal, Ph.D. 126 63 Ejemplo navegación ………… <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> <t ><td>< ll>P i </ ll></td> <td><small>17400 pts</small></td></tr> </table> </p> </card> </wml> Revisión Julio 2008 Iván Bernal, Ph.D. 127 Ejemplo navegación • Revisar Ejemplo2 Se debe permanecer bajo el límite del byte code del gateway WAP. ¾ No poner demasiados ingresos de datos del tipo selección. poner demasiadas opciones p en cada ingreso g de datos p por selección. ¾ No p ¾ Mantener los valores y el contenido de las opciones lo mas breves posibles. 9 Trate de que las opciones sean claras y que no sean ambiguas. Puede ser mejor dividir el procesos en varios decks. • Revisar Ejemplo5 Revisión Julio 2008 Iván Bernal, Ph.D. 128 64 Otros elementos WML • Postfield Define los datos que se envía al servidor En HTML, todo control de entrada con un atributo name automáticamente forma parte de la salida. En WML, se debe señalar de forma explícita cuáles campos deben enviarán datos. Si se omite el campo de la sección <postfield>, no se enviarán datos. <do type=“accept” label=“Buscar”> <go href=“http://www.ser.com/busqueda.asp”> <postfield name=“categoria” value=“$(cat)” /> </go> </do> • Usar GET para navegación y POST para contenido generado dinámicamente mediante scripts. <go method="POST"> ¾ Los datos incluidos en la etiqueta <postfield> necesita ir a un script. <go method="GET"> ¾ Los datos incluidos en la etiqueta <postfield> necesita ir a una página WML. Revisión Julio 2008 Iván Bernal, Ph.D. 129 Otros elementos WML <wml> <card id="hw" title="Fieldset"> <p> <fieldset title="Usuario"> Nombre:<input type="text" name="nombre"/> <br/> A llid <i Apellido:<input t ttype="text" "t t" name="apellido"/> " llid "/> </fieldset> <br/> <fieldset title="Sexo"> <select name="sexo"> <option value="F">Femenino</option> <option value="M">Masculino</option> </select> </fieldset> <br/> br/ <a href="http://mercurio.ugr.es/cgi-bin/javi/wap/usuarios.cgi?NOMBRE= $(nombre)&amp;APELLIDO=$(apellido)&amp;SEXO=$(sexo)">Continuar</a> </p> </card> </wml> Revisión Julio 2008 Iván Bernal, Ph.D. 130 65 Otros elementos WML Revisión Julio 2008 Iván Bernal, Ph.D. 131 Otros elementos WML • Optgroup Tiene como propósito dividir una larga lista de opciones en varias secciones. Diferentes browsers pueden usar esta información de diversas maneras. ¾ Muchos simplemente la ignoran (particularmente en dispositivos con pantallas grandes). ¾ Otros browsers pueden presentar el título del grupo pero no hacen nada mas con esta etiqueta. ¾ Algunos pueden usar el título del grupo como el nombre de un submenú, con el contenido del grupo en ese submenú. 9 El título del grupo es el único atributo de optgroup. Revisión Julio 2008 Iván Bernal, Ph.D. 132 66 Otros elementos WML • Optgroup <wml> <card id="main" title="Ejemplo optgroup" > <p> <select name="toppings"> <optgroup title="Meat &amp; Fish"> <option value="p">Pepperoni</option> <option value="h">Ham</option> <option value="b">Spicy Beef</option> <option value="a">Anchovies</option> </optgroup> <optgroup title="Vegetables"> <option value="o">Olives</option> <option value="m">Mushrooms</option> <option value= value="c">Chillies</option> c >Chillies</option> </optgroup> </select> </p> </card> </wml> Revisión Julio 2008 Iván Bernal, Ph.D. 133 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 browser WAP no tiene la misma habilidad para validar datos que un browser WEB. WML tiene un atributo extra p para ayuda y con la validación. ¾ El atributo es: emptyok=(true|false) con default=false para prevenir/permitir que se dejen campos vacíos. • Los controles de entrada pueden usar también el atributo format para asegurarse que la entrada sea solo numérica, letras mayúsculas, letras minúsculas o un número límite de caracteres. Cualquier validación adicional debe realizarse en el lado del servidor incurriendo en grandes retaros o usar WMLScript para validar localmente. • Los controles de entrada en WML son también limitados: En los controles de ingreso de texto se puede usar solo type=text o type=password Select, option y optgroup están disponibles pero los controles de selección pueden implementarse de diferente manera en los dispositivos (teléfonos) y algunos dispositivos solo permiten unos pocos caracteres para presentar las opciones. • El código WMLScript no se guarda en los archivos wml, sino en archivos wmls Revisión Julio 2008 Iván Bernal, Ph.D. 134 67 WMLScript • En la página wml se incluyen llamadas a las funciones declaradas en el archivo wmls. • Se puede incluir una llamada a WMLScript en cualquier lugar en el que se puede poner una tarea WML. Se usa una tarea <go> para llamar a WMLScript, con una URL formateada de forma especial. • Los scripts pueden leer y cambiar variables en el browser y correr tareas. Ejemplo: <do type=“accept” label=“validar”> <go href=“archivo.wmls#funcion($(variable))” /> </do> Revisión Julio 2008 <wml> Iván Bernal, Ph.D. 135 WMLScript (Ejemplo 1) <card id="card1" title="Card #1"> <do type="accept" label=“SIGUIENTE"> <go href="ivan.wmls#bernal()" /> <!--sin espacio entre los parentesis --> </do> <p> State (US only): <input name="state" format="AA" emptyok="true"/> Country: <input name="country" format="AA" value="US"/> </p> </card> <card title="No State" id="nostate"> <p>Since Si you li live in i the th US, US you mustt enter t a state. t t Please go back and enter one.</p> <do type="prev"><prev/></do> </card> </wml> Revisión Julio 2008 Iván Bernal, Ph.D. 136 68 WMLScript (Ejemplo 1) extern function bernal( ) { var state = WMLBrowser.getVar ("state"); var country = WMLBrowser.getVar ("country"); /* If country is US, a state must be provided. */ if (country == "US" && state == "") { WMLBrowser.go ("#nostate"); return; } /* ... Check other possible mistakes in here ... */ /* No errors found: send to server. */ WMLBrowser.go ("address.cgi?s=" + state + "&c=" + country); } Revisión Julio 2008 Iván Bernal, Ph.D. 137 WMLScript (Ejemplo 1) Revisión Julio 2008 Iván Bernal, Ph.D. 138 69 WMLScript (Ejemplo 2) <wml> <card id="main" title="Main"> <p>WelCome to Big Restaurant. Click Menu to proceed. <do type="accept" label="Menu"> <go href="#menu"/> </do> </p> /p </card> <card id="menu" title="Menu" newcontext="true"> <p>Select dishes among options: <select name="Value" iname="Number" ivalue="1" multiple="true"> <option value="Dish1">Dish1 USD1</option> <option value="Dish2">Dish2 USD2</option> <option value="Dish3">Dish3 USD3</option> <option value="Dish4">Dish4 USD4</option> </select> </p> <do type="accept" label="Order"> <go href="restaurant.wmls#convert('$(Value)')"/> </do> </card> … Revisión Julio 2008 Iván Bernal, Ph.D. 139 WMLScript (Ejemplo 2) ….. <card id="result" > <p><b>$(Value)</b> </p> <p> Do you want to enter our phone number in your phone directory <do type="accept" label="Add"> <go href="wtai://wp/ap;5554367;EINSTEIN"/> </do> </p> </card> </wml> PROBAR /* <go href="wtai://wp/mc;2065551212"/> */ <p align="center"> <a href="mailto:[email protected]">Email Us</a> </p> Revisión Julio 2008 Iván Bernal, Ph.D. 140 70 WMLScript (Ejemplo 2) extern function convert( Value ) { Value = Value+"A"; /* add one more character to the incoming string*/ var dishPriceList = "1,3,2,5"; /* string being used as an array*/ var Format=""; var Dish=""; var n=5; var counter=1; var result=0; var returnString=""; restaurant.wmls while(counter < n) { var counterString = String.format("Dish%d", counter); if ((String.find(Value, counterString) >=0)) { Format="Dish" + counter + "*1,"; Dish=Dish+Format; var result2=Lang.parseInt (String.charAt(dishPriceList, 2*(counter-1))); result=result + result2; } counter=counter+1; } returnString="You have ordered " + Dish + " and Total="+ result; WMLBrowser.setVar("Value",returnString); WMLBrowser.go("script_IBM.wml#result"); } Revisión Julio 2008 141 Iván Bernal, Ph.D. WMLScript (Ejemplo 2) script_IBM.wml <card id="menu“ ….> …. <go href="restaurant.wmls#convert('$(Value)')" /> ….. restaurant.wmls extern function convert(Value) …. WMLBrowser.setVar("Val ue",returnString); Cambia el valor de Value WMLBrowser.go("script_I BM.wml#result"); …… <card id="result" > ………… Revisión Julio 2008 Iván Bernal, Ph.D. 142 71 WMLScript (Ejemplo 2) Revisión Julio 2008 Iván Bernal, Ph.D. 143 WMLScript (Ejemplo 2) Revisión Julio 2008 Iván Bernal, Ph.D. 144 72 WMLScript (Ejemplo 2) Revisión Julio 2008 Iván Bernal, Ph.D. 145 WMLScript (Ejemplo 2) Revisión Julio 2008 Iván Bernal, Ph.D. 146 73 Revisión Julio 2008 Iván Bernal, Ph.D. 147 Iván Bernal, Ph.D. 148 • BLANCO Revisión Julio 2008 74 Ejercicio • Escriba un archivo wml que permita que la siguiente línea se ejecute: • <a href=“file href= file_2.wml#c2 2 wml#c2”>Enlace >Enlace a carta 2 de la pagina file file_2.wml</a> 2 wml</a> Si existe algún error en la línea corríjalo. file_2.wml debe contener múltiples cards. Incluir imágenes de color y b/n en los archivos WML, con texto. Incluir una tabla Incluir etiquetas do • Extra (2 puntos): si sube al servidor IIS el contenido y navega desde emuladores. Revisión Julio 2008 Iván Bernal, Ph.D. 149 WMLScript (Ejemplos) • Probando en mi configuración con IIS (5.1) no se pueden ejecutar los scripts y se obtiene el código de error 406. Revisión Julio 2008 Iván Bernal, Ph.D. 150 75 WMLScript (Ejemplos) • Con la ayuda de la herramienta de diagnóstico de los SDKs, asociada a cada teléfono, se detectó que en la lista bajo Accept del browser no está “wmls”. Revisión Julio 2008 Iván Bernal, Ph.D. 151 WMLScript (Ejemplos) • Dada la limitación de los emuladores, se realizó el siguiente cambio, dado que wmlsc si está incluido en el header: <do d type="accept" t " t" label="Order"> l b l "O d " <go href="restaurant.wmlsc#convert('$(Value)')"/> </do> •Debe mencionarse que los tipos mime en el IIS estaban adecuadamente configurados. Revisión Julio 2008 Iván Bernal, Ph.D. 152 76 • The MSISDN (Mobile Station ISDN number- the telephone number) of the WAP terminal must always be sent using the ISDN channel in order to personalize the WAP services and to generate additional, content-dependent billing information. Revisión Julio 2008 Iván Bernal, Ph.D. 153 WML (atributos) Revisión Julio 2008 Iván Bernal, Ph.D. 154 77 Revisión Julio 2008 Iván Bernal, Ph.D. 155 Trabajos • Openwave • Ericcson o Motorola • VoiceXML • Aplicaciones J2ME Revisión Julio 2008 Iván Bernal, Ph.D. 156 78 • class asocia un elemento, mediante su identificador, con una o más “clases”, siendo esta última el conjunto de todos los elementos de una baraja que comparten un mismo atributo class. Revisión Julio 2008 Iván Bernal, Ph.D. 157 79