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.

Apresentação em tema: "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."— Transcrição da apresentação:

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

2 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.

3 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.

4 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.

5 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.

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

7 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

8 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

9 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.

10 31/7/201510 XHTML Exemplo: Exemplo XHTML Exemplo XHTML

11 31/7/201511 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:

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

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

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

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

16 31/7/201516 Desenvolvendo Aplicações XML WML

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

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

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

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

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

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

23 31/7/201523 WML Tal como no XHTML, WML usa o elemento com um formal identificador público. <!DOCTYPE wml PUBLIC ".//WAPFORUM/DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml">.

24 31/7/201524 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" "http://www.wapforum.org/DTD/wml_1.1.xml">.

25 31/7/201525 WML Pode-se usar comentários, tal como em XML <!DOCTYPE wml PUBLIC ".//WAPFORUM/DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml">.

26 31/7/201526 WML Todo card deverá ter um elemento, o qual deve conter algum texto <!DOCTYPE wml PUBLIC ".//WAPFORUM/DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml"> Primeiro texto para o exemplo.

27 31/7/201527 WML Resultado:

28 31/7/201528 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" "http://www.wapforum.org/DTD/wml_1.1.xml"> Alinhamento de Texto Texto alinhado a esquerda Texto central Texto alinhado a direita

29 31/7/201529 WML Resultado:

30 31/7/201530 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 31/7/201531 WML Exemplo: <!DOCTYPE wml PUBLIC ".//WAPFORUM/DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml"> Texto formatado WML suporta estes estilos de texto: negrito, Grande, Itálico, pequeno e sublinhado

32 31/7/201532 WML Resultado:

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

34 31/7/201534 WML Exemplo: <!DOCTYPE wml PUBLIC ".//WAPFORUM/DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml"> Botao

35 31/7/201535 WML Resultado:

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

37 31/7/201537 WML Exemplo <!DOCTYPE wml PUBLIC ".//WAPFORUM/DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml"> Muitos cards Este e o card 2

38 31/7/201538 WML Resultado

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

40 31/7/201540 WML Exemplo: <!DOCTYPE wml PUBLIC ".//WAPFORUM/DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml"> Muitos cards Este e o card 2

41 31/7/201541 WML Resultado:

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

43 31/7/201543 WML Exemplo: <!DOCTYPE wml PUBLIC ".//WAPFORUM/DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml"> Hiperlinks Quer ver alguns exemplos? Entao olhe em Exemplos do Apache

44 31/7/201544 WML Resultado:

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

46 31/7/201546 WML Exemplo: <!DOCTYPE wml PUBLIC ".//WAPFORUM/DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml"> Tabelas Nome Pesquisa Idade Wamberg Banco de dados 23.....

47 31/7/201547 WML Resultado:

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

49 31/7/201549 WML Exemplo : <!DOCTYPE wml PUBLIC ".//WAPFORUM/DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml"> Entrada de Texto Ir para :

50 31/7/201550 WML Resultado

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

52 31/7/201552 WML Exemplo: <!DOCTYPE wml PUBLIC ".//WAPFORUM/DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml"> Select Computacao Bilogia Medicina Voce que fazer o seguinte curso: $(selecao).

53 31/7/201553 WML Resultado:

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

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

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

57 31/7/201557 WML simples.wml <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml"> Escolhe somente uma opcao. Primeira Opcao Segunda Opcao Terceira Opcao

58 31/7/201558 WML Resultado:

59 31/7/201559 WML multipla.wml <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml"> Escolhe varias opcoes Primeira Opcao Segunda Opcao Terceira Opcao

60 31/7/201560 WML Resultado

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

62 31/7/201562 WML Exemplo <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml"> Timers Em 10 segundos, sera redirecionado para o segundo card Bem vindo ao card 2

63 31/7/201563 WML Resultado

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

65 31/7/201565 WML Exemplo: <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml"> Imagem

66 31/7/201566 WML Resultado:

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

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

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

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