31/7/20151 desenvolvendo aplicações xml xhtml. 31/7/20152 xhtml xhtml – the extensible hypertext...
Post on 07-Apr-2016
223 Views
Preview:
TRANSCRIPT
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 </p> 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 <br /> 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>
<p>Exemplo XHTML</p></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: <p>Be <b>bold!</p></b>• XHTML: <p>Be <b>bold!</b></p>
– Todos os elementos não-vazios devem ser fechados• HTML: primeira linha<p>
segunda linha<p>• XHTML:<p>primeira linha</p> <p>segunda linha</p>
27/04/23 13
XHTML
• Diferenças entre XHTML e HTML 4.0– Elementos vazios devem ser terminados.– HTML:
• <hr>• <br>• <input ... >• <img src="aula3.gif">
– XHTML:• <hr />• <br />• <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"
<?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 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><!-- Isso é um comentário--><card id="Card1" title="Primeiro Exemplo WML">..</card></wml>
27/04/23 26
WML
Todo card deverá ter um elemento <p>, o qual deve conter algum texto
<?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"><p> Primeiro texto para o exemplo. </p></card></wml>
27/04/23 27
WML
• Resultado:
27/04/23 28
WML• Alinhamento de Texto
– O elemento <p> tem um atributo chamado align, o qual é útil para alinhar textos.
– O atributo align pode obter os seguintes valores : left, center, right
<?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="Alinhamento de Texto"><p align="center"><b>Alinhamento de Texto</b></p><p align="left">Texto alinhado a esquerda</p><p align="center">Texto central</p><p align="right">Texto alinhado a direita</p></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 <b> para texto em negrito, <i> para texto em itálico e <u> para texto sublinhado.
27/04/23 31
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="Texto formatado"><p align="center"><b>Texto formatado</b></p><p> WML suporta estes estilos de texto: <b> negrito</b>, <big>Grande</big>, <i> Itálico </i>, <small>pequeno</small> e
<u>sublinhado</u></p></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:
<?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="Botao"><p align="center"><b>Botao</b></p><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
<?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"><p align="center"><b>Muitos cards</b></p><do type="accept" label="Ir para o card 2"><go href="#Card2"/></do></card><card id="Card2" title="Card 2"><p align="center">Este e o card 2</p></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"><p align="center"><b>Muitos cards</b></p><do type="accept" label="Ir para o card 2"><go href="#Card2"/></do></card><card id="Card2" title="Card 2"><p align="center">Este e o card 2</p><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:
<?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="Hiperlinks"><p align="center">Hiperlinks</p><p> Quer ver alguns exemplos? Entao olhe em <a href="http://www.apachesoftware.com/wml/wmldemo.xml"> Exemplos do Apache </a> </p></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:
<?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="Tabelas"><p align="center">Tabelas</p><p align="center"> <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> </p></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 :
<?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="Input"><p align="center">Entrada de Texto</p><p> Ir para : <input type="text" name="url"/> <do type="accept" label="Ir"> <go href="$(url)"/> </do></p></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"><p align="center">Select</p> <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"><p> Voce que fazer o seguinte curso: $(selecao).</p></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"><p>Selecao utilizando o atributo "onpick"box.<br/>Selecione uams das opcoes.<br/><br/>
<select><option onpick="simples.wml">Selecao simples</option><option onpick="multipla.wml">Selecao multipla</option>
</select><br/><br/></p></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">
<p>Escolhe somente uma opcao.<br/>
<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><br/>
</p></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"><p>Escolhe varias opcoes<br/>
<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><br/><br/>
</p></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"><p align="center">Timers<br/></p><timer value="100"/><p> Em 10 segundos, sera redirecionado para o segundo card</p></card><card id="Card2" title="Bem vindo"> <p> Bem vindo ao card 2 </p></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"><p align="center"><b>Imagem</b><br/></p><p align="center"> <img alt="Imagem WML" src="imagem.wbmp" width="217" height="164"/> </p></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 < b>, <i>– 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
top related