31/7/20151 Desenvolvendo Aplicações XML XHTML

31/7/20152 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.

31/7/20153 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, por exemplo. A adição de uma barra ("/") em elementos vazios é uma opção de sintaxe par notações mais reduzidas como em e.

31/7/20154 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.

31/7/20155 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.

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

31/7/20157 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

31/7/20158 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

31/7/20159 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.

31/7/ XHTML Exemplo: Exemplo XHTML Exemplo XHTML

31/7/ XHTML Diferenças entre XHTML e HTML 4.0 – Tags obrigatórias. Os elementos e não podem ser omitidos. – Os tags e nomes de atributos devem ser escritos em letras minúsculas. HTML: XHTML:

31/7/ 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

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

31/7/ XHTML Diferenças entre XHTML e HTML 4.0 – Os valores dos atributos devem sempre estar entre aspas. HTML: XHTML: Pares nome/valor de atributos não podem ser minimizados – HTML – XHTML

31/7/ O que já foi visto? Introdução a XML Documentos XML DTDs Namespaces XML Schema XSLT XHTML

31/7/ Desenvolvendo Aplicações XML WML

31/7/ 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.

31/7/ 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

31/7/ 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

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

31/7/ 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, 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.

31/7/ WML Nós começamos o documento WML com a declaração XML:.

31/7/ WML Tal como no XHTML, WML usa o elemento com um formal identificador público. <!DOCTYPE wml PUBLIC ".//WAPFORUM/DTD WML 1.1//EN" "

31/7/ WML Cria-se um card dentro de um deck com o elemento. Neste caso, atribuo ao card o ID "Card1" e o titulo "Primeiro Exemplo WML" <!DOCTYPE wml PUBLIC ".//WAPFORUM/DTD WML 1.1//EN" "

31/7/ WML Pode-se usar comentários, tal como em XML <!DOCTYPE wml PUBLIC ".//WAPFORUM/DTD WML 1.1//EN" "

31/7/ WML Todo card deverá ter um elemento, o qual deve conter algum texto <!DOCTYPE wml PUBLIC ".//WAPFORUM/DTD WML 1.1//EN" " Primeiro texto para o exemplo.

31/7/ WML Resultado:

31/7/ 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 <!DOCTYPE wml PUBLIC ".//WAPFORUM/DTD WML 1.1//EN" " Alinhamento de Texto Texto alinhado a esquerda Texto central Texto alinhado a direita

31/7/ WML Resultado:

31/7/ 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.

31/7/ WML Exemplo: <!DOCTYPE wml PUBLIC ".//WAPFORUM/DTD WML 1.1//EN" " Texto formatado WML suporta estes estilos de texto: negrito, Grande, Itálico, pequeno e sublinhado

31/7/ WML Resultado:

31/7/ WML Botão – Pode-se criar botões em WML com o elemento. – Ex:Suponha que eu queira usar o botão para navegar para outra página. Então devo começar utilizando o elemento, setando o atributo type para "accept", e adicionando uma discrição no atributo label. Pode navegar para outro documento com o elmento, especificando a URL com o elemento "href"

31/7/ WML Exemplo: <!DOCTYPE wml PUBLIC ".//WAPFORUM/DTD WML 1.1//EN" " Botao

31/7/ WML Resultado:

31/7/ 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

31/7/ WML Exemplo <!DOCTYPE wml PUBLIC ".//WAPFORUM/DTD WML 1.1//EN" " Muitos cards Este e o card 2

31/7/ WML Resultado

31/7/ 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

31/7/ WML Exemplo: <!DOCTYPE wml PUBLIC ".//WAPFORUM/DTD WML 1.1//EN" " Muitos cards Este e o card 2

31/7/ WML Resultado:

31/7/ WML Hiperlinks – WML também suporta um elemento para hiperlinks. Como no HTML, usa-se o atributo href para especificar a URL para qual você quer navegar

31/7/ WML Exemplo: <!DOCTYPE wml PUBLIC ".//WAPFORUM/DTD WML 1.1//EN" " Hiperlinks Quer ver alguns exemplos? Entao olhe em Exemplos do Apache

31/7/ WML Resultado:

31/7/ WML Tabelas – Pode-se criar tabelas em WML usando elementos, tais como, e. – Não existem esses elementos,,

31/7/ WML Exemplo: <!DOCTYPE wml PUBLIC ".//WAPFORUM/DTD WML 1.1//EN" " Tabelas Nome Pesquisa Idade Wamberg Banco de dados

31/7/ WML Resultado:

31/7/ WML Entrada de texto – WML também suporta o elemento. 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.

31/7/ WML Exemplo : <!DOCTYPE wml PUBLIC ".//WAPFORUM/DTD WML 1.1//EN" " Entrada de Texto Ir para :

31/7/ WML Resultado

31/7/ WML Selecionando elementos – Como no HTML, WML suporta um elemento 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

31/7/ WML Exemplo: <!DOCTYPE wml PUBLIC ".//WAPFORUM/DTD WML 1.1//EN" " Select Computacao Bilogia Medicina Voce que fazer o seguinte curso: $(selecao).

31/7/ WML Resultado:

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

31/7/ WML Exemplo: ?xml version="1.0"?> <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" " Selecao utilizando o atributo "onpick" box. Selecione uams das opcoes. Selecao simples Selecao multipla

31/7/ WML Resultado simples.wml multipla.wml

31/7/ WML simples.wml <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" " Escolhe somente uma opcao. Primeira Opcao Segunda Opcao Terceira Opcao

31/7/ WML Resultado:

31/7/ WML multipla.wml <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" " Escolhe varias opcoes Primeira Opcao Segunda Opcao Terceira Opcao

31/7/ WML Resultado

31/7/ 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

31/7/ WML Exemplo <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" " Timers Em 10 segundos, sera redirecionado para o segundo card Bem vindo ao card 2

31/7/ WML Resultado

31/7/ 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. Temos os seguintes atributos para o elemento "img" : alt, src, width e height.

31/7/ WML Exemplo: <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" " Imagem

31/7/ WML Resultado:

31/7/ 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, no segundo card – Um link para outro documento WML

31/7/ 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"

31/7/ 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.

31/7/ O que já foi visto? Introdução a XML Documentos XML DTDs Namespaces XML Schema XSLT XHTML WML