Desenvolvimento - Wap

Introdução a tecnologia WAP

Escrevi este artigo com o objetivo de apresentar a tecnologia WAP e sua linguagem de marcação WML.
Tomei conhecimento do assunto pela Internet e achando-o muito interessante resolvi divulgá-lo com a pretensão de motivá-lo para o estudo.

por Maurício Samy Silva



Prólogo

Escrevi este artigo com o objetivo de apresentar a tecnologia WAP e sua linguagem de marcação WML.
Tomei conhecimento do assunto pela Internet e achando-o muito interessante resolvi divulgá-lo com a pretensão de motivá-lo para o estudo.

O que é protocolo WAP?

Wap é a sigla em inglês para Wireless Application Protocol.
Trata-se de um protocolo de comunicação para dispositivos portáteis do tipo sem fio, que se utilizam de micro brownsers, tais como os telefones celulares.

O protocolo WAP é uma aplicação XML 1.0 e foi projetado para apresentar conteúdos Web nos dispositivos portáteis sem fio.

Como surgiu WAP?

O Fórum WAP foi fundado em 1997 pelos fabricantes Ericsson, Motorola, Nokia e Unwired Planet e com vistas a desenvolver as facilidades para acesso a internet pelas suas aplicações portáteis.
As normas e regulamentações do protocolo WAP são conformes com as Internet Standards da W3C e com as especificações da WTAI.

Se você quiser saber mais visite o site Forum WAP.

O micro browser

Os dispositivos sem fios e portáteis, por suas características compactas, utilizam-se de um micro browser para navegar pelos conteúdos Web.
As necessidades de hardware, CPU e memórias para estes micro brownsers são reduzidas ao mínimo.
Também a linguagem de marcação dos documentos a serem apresentados nos displays dos aparelhos, segue normas rígidas e estritas.

O suporte para JavaScript que se denomina WMLScript é também bastante simples e reduzido.

A linguagem de marcação WML

WML é a sigla em inglês para Wireless Markup Language.
Trata-se de uma linguagem de marcação baseada em XML própria para criar documentos web para serem exibidos em micro browsers que se utilizam da tecnologia WAP.
Poder-se-ia dizer a título de analogia que WML é o HTML dos portáteis sem fios.
A maioria das tags WML é igual as do HTML.
No entanto, sendo WML uma aplicação XML é uma linguagem bem mais rigorosa e estrita que HTML.

Básico de uma página WML

As páginas WML são semelhantes as páginas HTML e o mesmo editor de texto que você utiliza para criar seus documentos HTML pode ser usado para WML.

A extensão de uma página WML é .wml

Tabelas e imagens podem ser utilizadas, mas é recomendado evitar-se seu uso ou no máximo reduzir o uso ao estritamente necessário.

As tags são case-sensitives e devem ser todas elas fechadas, conforme as normas XML.

Negritos devem ser marcados com a tag <strong>. Não use a tag <b> pois alguns dispositivos não a reconhecem.

A estrutura de baralho e cartas

Páginas WML são chamadas de "baralhos".
Uma página WML é constituida de um conjunto de "cartas".
As cartas estão unidas umas as outras por meio de links.
O salto de linha é através da tag <br />.
Os textos devem ser escritos dentro da tag <p> e começar sempre no início de uma linha, nunca no meio ou final da linha.
Links escrevem-se de modo semelhante ao HTML.
Comentários são enclausurados assim: <!-- Comentário --> igual ao HTML.

Uma página 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="um" title="Primeira Carta">
<p>Esta é a primeira carta<br />
Texto da carta um<br />
Um,um,um,um,um<br />
<a href="#dois">Próxima</a>
</p>
</card>

<card id="dois" title="Segunda Carta">
<p>Esta é a segunda carta<br />
Texto da carta dois<br />
Dois,dois,dois,dois,dois<br />
<a href="#tres">Próxima</a>
</p>
</card>

<card id="tres" title="Terceira Carta">
<p>Esta é a terceira carta<br />
Texto da carta tres<br />
Tres,tres,tres,tres,tres<br />
<a href="#um">Próxima</a>
</p>
</card>
</wml>

Da observação do código acima vemos que uma página básica contém:

Um prólogo XML;
Uma declaração DOCTYPE;
A conteúdo do documento dentro da tag <wml>...</wml>;
As cartas dentro da tag <card>...</card>;
Cada carta com uma "id" e um "title" opcional e links de navegação;
Nota: acentuações são com codificação de caracteres.

Este baralho está hospedado em http://www.maujor.com/wap/ex1.wml
Vá até este SIMULADOR WAP, digite o endereço acima e veja a página renderizada em um display de telefone celular.

Formatando textos

A linguagem WML admite formatar textos de maneira semelhante ao HTML.
Observe a carta abaixo:

<?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="formatar" title="Formatação"> 
<p>sem formato<br/>
<em>itálico</em><br/>
<strong>negrito</strong><br/>
<u>sublinhado</u><br/>
<big>fonte grande</big><br/>
<small>fonte pequena</small>
</p>
</card>
</wml>

Este baralho está hospedado em http://www.maujor.com/wap/ex2.wml
Vá até este SIMULADOR WAP, digite o endereço acima e veja a página renderizada em um display de telefone celular.

Tabelas

As tabelas tem uma sintaxe semelhante a da HTML.
Observe a carta abaixo:

<?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="tab" title="Exemplo 3"><p>
<table columns="2" align="center">
<tr>
<td>cel_11</td>
<td>cel_21</td>
</tr>
<tr>
<td>cel_21</td>
<td>cel_22</td>
</tr>
<tr>
<td>cel_31</td>
<td>cel_32</td>
</tr>
<tr>
<td>cel_41</td>
<td>cel_42</td>
</tr>
</table>
</p></card>
</wml>

Uma tabela com duas colunas e quatro linhas.

Este baralho está hospedado em http://www.maujor.com/wap/ex3.wml
Vá até este SIMULADOR WAP, digite o endereço acima e veja a página renderizada em um display de telefone celular.

Links - tag <a>

A linguagem WML admite as tags de links <anchor> e <a>.
Vejamos a tag <a>

<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"
"http://www.wapforum.org/DTD/wml_1.1.xml">
<wml>
<card title="MENU">
<p>
<a href="ex1.wml">Página básica</a><br />
<a href="ex2.wml">Formatação</a><br />
<a href="ex3.wml">Tabela</a>
</p>
</card>
</wml>

Este baralho está hospedado em http://www.maujor.com/wap/menu.wml
Vá até este SIMULADOR WAP, digite o endereço acima e veja a página renderizada em um display de telefone celular.

Formulários

Os formulários disponíveis em HTML podem ser usados em WML.
A seguir um exemplo com uso do campo select.

<?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="pergunta" title="Assuntos">
<p align="center"><br />
<select name="name"> 
<option value="um">Exemplo 1</option>
<option value="dois">Exemplo 2</option>
<option value="tres">Exemplo 3</option>
<option value="quatro">Exemplo 4</option>
<option value="cinco">Exemplo 5</option>
<option value="seis">Exemplo 6</option>
</select>
</p>
</card>
</wml>

Este formulário está hospedado em http://www.maujor.com/wap/form.wml
Vá até este SIMULADOR WAP, digite o endereço acima e veja a página renderizada em um display de telefone celular.

Palavra final

Esta foi uma amostra de como funciona a linguagem de marcação WML para dispositivos que se utilizam da tecnologia WAP.
O assunto é vasto e interessante!
O site do WML Club é completo para quem deseja aprofundar-se no assunto ou simplemeste conhecer um pouco mais de WAP e WML.

Obrigado ao Fábio Berbert de Paula pelo Tutorial "Criando sites para celular com WML" publicado em phpbrasil.com
por ter-me possibilitado o primeiro contato com a tecnologia WAP.

NOTA

Escrevi este artigo no mês de maio de 2004, tendo hospedado os códigos e o SIMULADOR WAP em um diretório do meu site CSS para Web Design .
Não tenho intenção de retirá-los de lá, no entanto caso você não consiga acesso a eles nem tudo está perdido.
Hospede o código no seu servidor pois a maioria está configurada para a tecnologia WAP, procure um simulador wap "online" e visualize os códigos!

Autor: Maurício Samy Silva
CSS para WebDesign
http://www.maujor.com

Maurício Samy Silva

Maurício Samy Silva - Desenvolvedor do site CSS para Web Design
e-mail do autor