31/7/20151 desenvolvendo aplicações xml xhtml. 31/7/20152 xhtml xhtml – the extensible hypertext...

27/04/23 1

Desenvolvendo Aplicações XML

XHTML

27/04/23 2

XHTML

• XHTML – The Extensible Hypertext Markup Language

• XHTML é a reformulação de HTML 4.0 como uma aplicação XML. As tags XHTML são todas em “caixa baixa”, já que XML é “case sensitive”. XHTML pode ser visto como uma versão mais rigorosa e “limpa” de HTML.

27/04/23 3

XHTML• Os elementos, tags e atributos são quase todos

idênticos a HTML 4.0, e os documentos escritos em XHTML são bem aceitos pela maioria dos browsers, desde que algumas recomendações sejam seguidas.

• Todas as tags, incluindo as vazias, devem ser fechadas, como and </li>, por exemplo.

• A adição de uma barra ("/") em elementos vazios é uma opção de sintaxe par notações mais reduzidas como em e <hr />.

27/04/23 4

XHTML• As vantagens do uso de XHTML sobre HTML são:– Extensibilidade: possibilidade de combinação com

outras tags em documentos XML (aproveita-se a vantagem do conhecimento global da semântica das tags de XHTML; conceito de namespace)

– Portabilidade: existe previsão de que em 2002 mais de 75% dos acessos à Web serão provenientes de plataformas que não computadores pessoais como hoje, principalmente de recursos wireless e de pequena capacidade de memória e de processamento. Isso requer a construção de programas mais enxutos, mais “limpos”, para browsers mais simples.

27/04/23 5

XHTML• As vantagens do uso de XHTML sobre HTML são:– Flexibilidade: XHTML 1.0 permite que autores criem

documentos Web capazes de serem tratados pelos browsers HTML atuais e também poderem ser processados por softwares que suportam XML ¾ além de proporcionar a base para uma família de tipos de documentos, que irá estender e/ou encolher XHTML, de maneira a suportar a extensa gama de novos dispositivos e aplicações.

27/04/23 6

XHTML

• XHTML costitui-se na verdade de três recomendações:– XHTML Strict– Transitional – Frameset.

27/04/23 7

XHTML

• Strict– A versão Strict deve ser usada quando se desejar

um documento realmente “clean”, livre de detalhes de apresentação. Em geral é aplicada conjuntamente com uma folha de estilo, como Cascading Syle Sheets. Esta é a versão do XHTML 1.0 que a W3C espera que asa pessoas migrem no decorrer do tempo

27/04/23 8

XHTML

• Transitional– A versão Transitional deve ser quando se desejar

tirar vantagens das características de apresentação de HTML, uma vez que muitos de seus clientes não possuem versões mais atualizadas de browsers capazes de entender CSS. É a mais popular versão do XHTML no momento

27/04/23 9

XHTML

• Frameset– A versão Frameset, por sua vez, deve ser aplicada

quando se desejar utilizar Frames HTML para particionar a janela do browser em dois ou mais frames.

27/04/23 10

XHTML• Exemplo:

<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml">

<head><title>Exemplo XHTML</title>

</head><body>

Exemplo XHTML</body>

</html>

27/04/23 11

XHTML

• Diferenças entre XHTML e HTML 4.0– Tags obrigatórias . Os elementos <head> e

<body> não podem ser omitidos.– Os tags e nomes de atributos devem ser escritos

em letras minúsculas.• HTML: <TD BGCOLOR="#ffcc33">• XHTML: <td bgcolor="#ffcc33">

27/04/23 12

XHTML

• Diferenças entre XHTML e HTML 4.0– Os elementos devem se aninhar; overlappings não são

permitidos.• HTML: Be bold!• XHTML: Be bold!

– Todos os elementos não-vazios devem ser fechados• HTML: primeira linha

segunda linha• XHTML:primeira linha segunda linha

27/04/23 13

XHTML

• Diferenças entre XHTML e HTML 4.0– Elementos vazios devem ser terminados.– HTML:

• <hr>• • <input ... >• <img src="aula3.gif">

– XHTML:• <hr />• • <input ... />• <img src="aula3.gif" />

27/04/23 14

XHTML

• Diferenças entre XHTML e HTML 4.0– Os valores dos atributos devem sempre estar entre aspas.

• HTML: <img ... border=0>• XHTML: <img ... border="0" />

• Pares nome/valor de atributos não podem ser minimizados– HTML

• <dl compact>• <option ... selected>

– XHTML• <dl compact="compact">• <option..selected="selected">

27/04/23 15

O que já foi visto?

• Introdução a XML• Documentos XML• DTDs• Namespaces• XML Schema• XSLT• XHTML

27/04/23 16

Desenvolvendo Aplicações XML

WML

27/04/23 17

WML

• WML - Wireless markup Language• Protocolo associado a WML é o WAP -

Wireless Aplication Protocol• WML é direcionada a ser usada por

dispositivos móveis, tais como: celular, PDAs e outros serviços com capacidade de hardware restrita.

27/04/23 18

WML

• Representa uma linguagem de sintaxe limitada relativamente fácil de implementar para tais dispositivos

• Os programas que usam WML nesses dispositivos são chamados microbrowsers

• Como forma de visualização de documentos WML, utilizaremos WML browser Klondike

27/04/23 19

WML

• WML possui cerca de 35 elementos e mais de uma centena de atributos

• Ex:– Elemento --> a– Atributos do elemento “a” • href, id, title, xml:lang

27/04/23 20

WML

• Em adição,WML suporta estes caracteres de entidade– & - caracter ( & )– &pos; - caracter ( ‘ )– > - caracter ( > )– < - caracter ( < )– - espaço em branco ' ' – "- caracter ( “ )– - caracter ( - ) - hífen

27/04/23 21

WML

• Microbrowsers não tem uma área de visualização grande, então documentos WML são divididos em "cards", os quais são mostrados um de cada vez.

• Um documento WML é chamado de "deck" de tais "cards".

• Um deck começa e termina com a tag <wml>, cada card começa e termina com a tag card.

• Quando um microbrowser ler um documento WML. ele ler o deck todo, embora mostre somente um card a cada vez.

27/04/23 22

WML

• Nós começamos o documento WML com a declaração XML:

<?xml version="1.0"?>...

27/04/23 23

WML

• Tal como no XHTML, WML usa o elemento <!DOCTYPE> com um formal identificador público.

<?xml version="1.0"?><!DOCTYPE wml PUBLIC ".//WAPFORUM/DTD WML 1.1//EN"

"http://www.wapforum.org/DTD/wml_1.1.xml"><wml>...</wml>

27/04/23 24

WML

• Cria-se um card dentro de um deck com o elemento <card>. Neste caso, atribuo ao card o ID "Card1" e o titulo "Primeiro Exemplo WML"


"http://www.wapforum.org/DTD/wml_1.1.xml"><wml><card id="Card1" title="Primeiro Exemplo WML">..</card></wml>

27/04/23 25

WML

• Pode-se usar comentários, tal como em XML<?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="Primeiro Exemplo WML">..</card></wml>

27/04/23 26

WML

Todo card deverá ter um elemento , o qual deve conter algum texto


"http://www.wapforum.org/DTD/wml_1.1.xml"><wml><card id="Card1" title="Primeiro Exemplo WML"> Primeiro texto para o exemplo. </card></wml>

27/04/23 27

WML

• Resultado:

27/04/23 28

WML• Alinhamento de Texto

– O elemento tem um atributo chamado align, o qual é útil para alinhar textos.

– O atributo align pode obter os seguintes valores : left, center, right


"http://www.wapforum.org/DTD/wml_1.1.xml"><wml><card id="Card1" title="Alinhamento de Texto">Alinhamento de TextoTexto alinhado a esquerdaTexto centralTexto alinhado a direita</card></wml>

27/04/23 29

WML

• Resultado:

27/04/23 30

WML

• Estilo de texto básico– WML possui deversos elementos básicos de

estilo de texto, tasi como para texto em negrito, para texto em itálico e para texto sublinhado.

27/04/23 31

WML

Exemplo:


"http://www.wapforum.org/DTD/wml_1.1.xml"><wml><card id="Card1" title="Texto formatado">Texto formatado WML suporta estes estilos de texto: negrito, <big>Grande</big>, Itálico , pequeno e

sublinhado</card></wml>

27/04/23 32

WML• Resultado:

27/04/23 33

WML

• Botão– Pode-se criar botões em WML com o elemento

<do>.– Ex:Suponha que eu queira usar o botão para

navegar para outra página. Então devo começar utilizando o elemento <do>, setando o atributo type para "accept", e adicionando uma discrição no atributo label. Pode navegar para outro documento com o elmento <go>, especificando a URL com o elemento "href"

27/04/23 34

WML

• Exemplo:


"http://www.wapforum.org/DTD/wml_1.1.xml"><wml><card id="Card1" title="Botao">Botao<do type="accept" label="Ir para uma nova pagina WML"><go href="wml1.wml"/></do></card></wml>

27/04/23 35

WML

• Resultado:

27/04/23 36

WML

• Como mencionado anteriormente, podemos ter muitos cards em um deck, mas podemos ver somente um de cada vez.

• Então como é que podemos ver os outros cards de um deck?– Podemos utilizar botões

• Neste caso, devemos atribuir o ID do card alvo para o atributo href do elemento <go>

27/04/23 37

WML

• Exemplo


"http://www.wapforum.org/DTD/wml_1.1.xml"><wml><card id="Card1" title="Muitos cards">Muitos cards<do type="accept" label="Ir para o card 2"><go href="#Card2"/></do></card><card id="Card2" title="Card 2">Este e o card 2</card></wml>

27/04/23 38

WML• Resultado

27/04/23 39

WML

• Conseguimos navegar para o card2, como fazer para voltar para o card 1?– Utiliza-se o botão para voltar através do uso do

elemento <prev>

27/04/23 40

WMLExemplo:<?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="Muitos cards">Muitos cards<do type="accept" label="Ir para o card 2"><go href="#Card2"/></do></card><card id="Card2" title="Card 2">Este e o card 2<do type="prev" label=“Volta"> <prev/></do></card></wml>

27/04/23 41

WML• Resultado:

27/04/23 42

WML

• Hiperlinks– WML também suporta um elemento <a> para

hiperlinks. Como no HTML, usa-se o atributo href para especificar a URL para qual você quer navegar

27/04/23 43

WML

• Exemplo:


"http://www.wapforum.org/DTD/wml_1.1.xml"><wml><card id="Card1" title="Hiperlinks">Hiperlinks Quer ver alguns exemplos? Entao olhe em <a href="http://www.apachesoftware.com/wml/wmldemo.xml"> Exemplos do Apache </a> </card></wml>

27/04/23 44

WML

• Resultado:

27/04/23 45

WML

• Tabelas– Pode-se criar tabelas em WML usando elementos,

tais como <table>,<tr> e <td>.– Não existem esses elementos• <th>,<tbody>,<thead>

27/04/23 46

WMLExemplo:


"http://www.wapforum.org/DTD/wml_1.1.xml"><wml><card id="Card1" title="Tabelas">Tabelas <table columns="3"> <tr>

<td>Nome</td><td>Pesquisa</td><td>Idade</td>

</tr> <tr>

<td>Wamberg</td><td>Banco de dados</td><td>23</td>

</tr> ..... </table> </card></wml>

27/04/23 47

WML

• Resultado:

27/04/23 48

WML

• Entrada de texto– WML também suporta o elemento <input>. Se

você seta o atributo type deste elemento para "text", você pode mostrar um campo de texto, tais campo de texto em html.

– Vamos mostar um exemplo onde o usuário entra com a URL de um arquivo local no campo de texto. Quando o usuário clicar o botão "Ir", o browser navega pela URL.

27/04/23 49

WMLExemplo :


"http://www.wapforum.org/DTD/wml_1.1.xml"><wml><card id="Card1" title="Input">Entrada de Texto Ir para : <input type="text" name="url"/> <do type="accept" label="Ir"> <go href="$(url)"/> </do></card></wml>

27/04/23 50

WML• Resultado

27/04/23 51

WML

• Selecionando elementos– Como no HTML, WML suporta um elemento

<select> para mostrar uma seleção– Seleciona uma opção e ao clicar no botão, irá

mostrar a opção selecionada em outro card do XML

27/04/23 52

WMLExemplo:<?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="Select">Select <select name="selecao"> <option value="computacao">Computacao</option> <option value="biologia">Bilogia</option> <option value="medicina">Medicina</option> </select> <do type="accept" label="Escolha"> <go href="#Card2"/> </do></card><card id="Card2" title="Selecionado"> Voce que fazer o seguinte curso: $(selecao).</card></wml>

27/04/23 53

WML

• Resultado:

27/04/23 54

WML

• Outro útil aspecto para selação é o atributo "onpick" do elemento option, o qual permite o usuário navegar para novas urls.

27/04/23 55

WML

Exemplo:?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="selbox" title="Selecao">Selecao utilizando o atributo "onpick"box. Selecione uams das opcoes. 

<select><option onpick="simples.wml">Selecao simples</option><option onpick="multipla.wml">Selecao multipla</option>

</select> </card></wml>

27/04/23 56

WML• Resultado

simples.wml

multipla.wml

27/04/23 57

WML

simples.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="simples" title="Selecao simples">

Escolhe somente uma opcao. 

<select name="single"><option value="ss_one">Primeira Opcao</option><option value="ss_two">Segunda Opcao</option><option value="ss_three">Terceira Opcao</option>

</select> 

</card></wml>

27/04/23 58

WML• Resultado:

27/04/23 59

WMLmultipla.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="multipla" title="Selecao Multipla">Escolhe varias opcoes 

<select name="multiple" multiple="true" value="ms_one;ms_three"><option value="ms_one">Primeira Opcao</option><option value="ms_two">Segunda Opcao</option><option value="ms_three">Terceira Opcao</option>

</select> 

</card></wml>

27/04/23 60

WML• Resultado

27/04/23 61

WML

• Timers– Em WML, pode-se mudar um timer para mensurar

um período de tempo, e o browser irá realizar alguma ação quando esse período expirar.

– Por exemplo, coloco no atributo “ontimer” de um card o Id de outro card, para que o browser possa navegar entre os cards quando o tempo termina

27/04/23 62

WMLExemplo<?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" ontimer="#Card2" title="Timers">Timers <timer value="100"/> Em 10 segundos, sera redirecionado para o segundo card</card><card id="Card2" title="Bem vindo"> Bem vindo ao card 2 </card></wml>

27/04/23 63

WML• Resultado

27/04/23 64

WML

• Imagens– Podemos mostrar imagens em WML. Mas sob

uma condição:• Imagens devem ser do formato especial wbmp, este

formato não permite uma grande riqueza de cores.– Para mostrarmos imagens, você provavelmente

não ficaria surpreso se eu dissesse que existe um elemento <img>. Temos os seguintes atributos para o elemento "img" : alt, src, width e height.

27/04/23 65

WML

Exemplo:<?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="Imagem">Imagem <img alt="Imagem WML" src="imagem.wbmp" width="217" height="164"/> </card></wml>

27/04/23 66

WML

• Resultado:

27/04/23 67

Exercício

• Faça um documento WML com as seguintes caracterísitcas:– Use propriedades de alinhamento de texto, tais como

"align="center"– Use propriedades de estilo de texto, tais como , – Um botão que direcione para outra página e outro botão

que direcione para outro card– Um botão que use o elemento <prev>, no segundo card– Um link para outro documento WML

27/04/23 68

Exercício

• Faça um documento WML com as seguintes caracterísitcas:– Uma entrada de texto e um botão que funcione

como link para um outro documento WML– Faça uma seleção com quatro opções utilizando o

atributo "onpick"

27/04/23 69

Exercício

• Faça um documento WML com as seguintes características:– Tenha um card e um timer de 15 segundos que faz

com que seja redirecionado para outro arquivo WML.

27/04/23 70

O que já foi visto?

• Introdução a XML• Documentos XML• DTDs• Namespaces• XML Schema• XSLT• XHTML• WML

31/7/20151 desenvolvendo aplicações xml xhtml. 31/7/20152 xhtml xhtml – the extensible hypertext...

Documents