Tecnologias para
Internet
Thyago Maia Tavares de Farias
Aula 21
Sumário
Desenvolvimento Web para dispositivos móveis
Submissão de dados através de formulários WML;
A linguagem de marcação XHTML Mobile Profile;
A folha de estilos WCSS;
Formulários WML
Através dos formulários WML, podemos fazer com
que usuários submetam dados para um servidor
remoto;
Normalmente, os dados submetidos são processados
por páginas PHP, JSP, ASP, etc;
Em HTML, utilizamos as tags form, para a declaração
de um formulário, e o input do tipo submit, para
criarmos o botão de submissão;
Em formulários WML, utilizamos as tags go, para a
declaração do formulário, e do, para a declaração do
botão de submissão;
Formulários WML
Exemplo: Criação de um formulário WML que
permite a submissão de um nome e uma
mensagem específica;
Formulários WML
Formulários WML
PHP remoto (exemplo.php):
XHTML MP
XHTML Mobile Profile (abreviado como
XHTML MP) é uma linguagem de marcação de
hipertexto desenvolvido para dispositivos
móveis;
Trata-se de uma evolução da linguagem WML;
Utiliza a especificação WAP 2.0;
Apenas celulares que trabalham com WAP 2.0
poderão exibir corretamente páginas XHTML
MP;
XHTML MP
XHTML Mobile Profile (abreviado como XHTML
MP) é uma linguagem de marcação de hipertexto
desenvolvido para dispositivos móveis;
Trata-se de uma evolução da linguagem WML;
Utiliza a especificação WAP 2.0;
A codificação de uma página XHTML MP é similar
a uma página HTML;
Mais robusta que WML, pois permite a formatação
de conteúdo;
Possibilita o uso de folhas de estilo;
XHTML MP
Sintaxe básica de uma página XHTML MP:
<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile
1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>WCSS Tutorial</title>
</head>
<body>
Aqui ficará o conteúdo da página
</body>
</html>
WCSS – WAP CSS
WCSS é a versão mobile do CSS, isto é, são
folhas de estilo compatíveis com dispositivos
móveis;
A idéia do WCSS é simples: O estilo e
informações de layout de um documento são
definidos separadamente do conteúdo;
As regras de implementação de folhas de estilo
WCSS são similares às regras apresentadas
anteriormente para CSS;
WCSS – WAP CSS
Exemplo: Deixar o fundo do site XHTML MP
apresentado anteriormente com o fundo
colorido;
Criaremos 2 arquivos:
O site propriamente dito (exemplo.xhtml);
O arquivo XHTML irá possuir uma ligação para uma
folha de estilo;
Sua folha de estilo (estilo.css);
WCSS – WAP CSS
<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML
Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtmlmobile10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href=“estilo.css" rel="stylesheet" type="text/css"/>
<title>WCSS Tutorial</title>
</head>
<body>
Aqui ficará o conteúdo da página
</body>
</html>
WCSS – WAP CSS
Folha de estilo estilo.css:
body
{
background: #00BFFF;
}
WCSS – WAP CSS
Exemplo 2: Deixar o fundo do site XHTML MP
apresentado anteriormente com o fundo
colorido e alterar a cor da fonte de um
parágrafo;
Criaremos 2 arquivos:
O site propriamente dito (exemplo.xhtml);
O arquivo XHTML irá possuir uma ligação para uma
folha de estilo;
Sua folha de estilo (estilo.css);
WCSS – WAP CSS
<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML
Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtmlmobile10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href=“estilo.css" rel="stylesheet" type="text/css"/>
<title>WCSS Tutorial</title>
</head>
<body>
<p>Aqui ficará o conteúdo da página</p>
</body>
</html>
WCSS – WAP CSS
Folha de estilo estilo.css:
body
{
background: #00BFFF;
}
p
{
color: #cccccc;
}
Download
