Processamento de Documentos Estruturados

Tamanho: px
Começar a partir da página:

Download "Processamento de Documentos Estruturados"

Transcrição

1 Processamento de Documentos Estruturados José Paulo Leal, Rita P. Ribeiro Departamento de Ciência de Computadores Faculdade de Ciências da Universidade do Porto 2015/2016

2 Programa 1. Essencial sobre XML 2. Normas básicas 3. Tipos de documentos 4. Transformação de documentos 5. Semântica de documentos 6. Interfaces aplicacionais José Paulo Leal, Rita P. Ribeiro PDE (DCC-FCUP) 2

3 Programa 1. Essencial sobre XML 2. Normas básicas 3. Tipos de documentos 4. Transformação de documentos 5. Semântica de documentos 6. Interfaces aplicacionais José Paulo Leal, Rita P. Ribeiro PDE (DCC-FCUP) 2

4 Sumário 4. Transformação de documentos 4.1 Folhas de Estilo 4.2 Localizações 4.3 Transformações 4.4 Formatação 4.5 Interrogação José Paulo Leal, Rita P. Ribeiro PDE (DCC-FCUP) 3

5 4.Transformação de Documentos- I Folhas de Estilo Conferir uma sintaxe gráfica a documentos Utilizável numa classe (tipo) de documentos Aplicado por processador do documento (ex: browser) CSS - Cascade Style Sheet Associação de propriedades a elementos Propriedades gráficas e posicionamento Separação entre apresentação e formatação XSL - Extensible Stylesheet Language Capacidade de processamento do documento Transformação para linguagem de formatação Maior controlo de formatação (idênticas às linguagens de descrição de página, ex: PDF, PS) José Paulo Leal, Rita P. Ribeiro PDE (DCC-FCUP) 4

6 4.Transformação de Documentos- II XSL é uma família de linguagens compreendendo: XPath - localização, seleção e testes sobre nós XSL-t - transformações de documentos XSL-fo - objetos de formatação XQuery - Interrogação de documentos Interrogação de bases de dados XML Transformação de documentos e geração de relatórios Linguagem baseada no XPath José Paulo Leal, Rita P. Ribeiro PDE (DCC-FCUP) 5

7 4.1 Folhas de Estilo Cascade Style Sheets - I BODY { background-color: lightgray; } H1,H2,H3,TH { background-color: lightblue; font-weight: bold; } Características Originalmente desenvolvido para ser usado com HTML, mas também funciona com XML Definição de propriedades dos elementos Conjunto de regras definido por linguagem não XML Seleção de elementos baseado nas suas características Propriedades gráficas, dimensões e posições Adaptação a suportes com diferentes capacidades José Paulo Leal, Rita P. Ribeiro PDE (DCC-FCUP) 6

8 4.1 Folhas de Estilo Cascade Style Sheets - II Versões de CSS (Cascade Style Sheets) CSS Level 1 - classificação, caixa, cores, letra e texto CSS Level 2 - posicionamento, geração de conteúdo, suportes, tabelas, tipos próprios, numeração, impressão, etc CSS Level 3 - caixas flexíveis, multi-colunas, média paginada, transformações, transições, animação GUI, etc CSS Level 4 - seleção mais poderosa de elementos, manipulação de texto, imagens, etc. Sintaxes text/css - definição estática JavaScript - modificação interativa Referência: Web Design Group (WDG) Nível 3 é ainda uma recomendação sendo parcialmente/experimentalmente suportada por alguns browsers José Paulo Leal, Rita P. Ribeiro PDE (DCC-FCUP) 7

9 4.1 Folhas de Estilo Associação de CSS a documento <?xml version="1.0" encoding="utf-8"?> <?xml-stylesheet type="text/css" href="exemplo.css"?> <documento>... </documento> Processamento CSS Regras CSS definidas em documento autónomo Associação a documento por instrução de processamento Processador do documento (ex:browser) aplica CSS Instrução de Processamento Anotação xml-stylesheet Tipo type="text/css" URL href=url Outras associações Em geral, regras CSS não são aplicáveis doutra forma No XHTML (como no HTML) é possível Embeber definições em documentos Associar regras CSS a elementos José Paulo Leal, Rita P. Ribeiro PDE (DCC-FCUP) 8

10 4.1 Folhas de Estilo Estrutura do CSS O CSS é uma linguagem não XML Documento CSS constituído por um conjunto de regras Regras definem valores de propriedades para elementos Regras podem ser agrupadas Propriedades dum elemento definidas em múltiplas regras Aplicação de regras em cascata resolve ambiguidade José Paulo Leal, Rita P. Ribeiro PDE (DCC-FCUP) 9

11 4.1 Folhas de Estilo Estrutura do CSS: Regras selector { propriedade: valor; } Selectores simples são nomes de elementos No HTML são suportados pseudo-elementos como selectores As declarações são delimitadas por chavetas Na declaração, o nome da propriedade e valor são separados por dois-pontos Valores podem ter várias palavras e são terminados por ponto-e-virgula Comentários começam por /*, terminam por */ e podem incluir várias linhas. Exemplo: P { /* color: red; */ color: yellow; } José Paulo Leal, Rita P. Ribeiro PDE (DCC-FCUP) 10

12 4.1 Folhas de Estilo Estrutura do CSS: Agrupar Selectores selector_1,...,selector_n { declaração } Declarações selectores { declaração_1... declaração_n } Exemplo: H1, H2, H3 { color: gray; text-transform: capitalize; font-family: arial, helvetiva; } José Paulo Leal, Rita P. Ribeiro PDE (DCC-FCUP) 11

13 4.1 Folhas de Estilo Estrutura do CSS: Aplicação de regras em cascata /* author */ h1, h2, h3 { font-family: san-serif font-weight: bold; font-style: normal; } h1 { font-size: xx-large; } h2 { font-size: x-large; } h3 { font-size: large; font-style: italic; } h2 { font-size: 110%; } /* user agent */ h1, h2, h3 { font-family: serif; font-weight: 500!important; } 1. Regras do autor mais importantes que as do leitor (browser) 2. Cálculo de especificidade: mais específicas prevalecem 3. Ordem de especificação: se iguais vale a última 4. Anotação!important José Paulo Leal, Rita P. Ribeiro PDE (DCC-FCUP) 12

14 4.1 Folhas de Estilo Conceitos Classificação (tipo de disposição) Modelo de caixa (box model) Unidades e tipos de letra Posicionamento José Paulo Leal, Rita P. Ribeiro PDE (DCC-FCUP) 13

15 4.1 Folhas de Estilo Conceitos: Classificação antes <anota> conteudo </anota> depois anota { display: block; } antes conteudo depois block Com quebras antes e depois Possibilidade de controlar dimensões Exemplo: elemento H1 e DIV do HTML anota { display: inline; } antes conteudo depois inline Posicionado no fluxo do texto Dimensão fixa dada pelo conteúdo Exemplo: elemento B e SPAN do HTML Outras classificações tabelas: table, table-row, table-cell listas: list-item José Paulo Leal, Rita P. Ribeiro PDE (DCC-FCUP) 14

16 4.1 Folhas de Estilo Conceitos: Box Model Áreas Lado do conteúdo ou lado interno Espaçamento (padding) Lado do bordo (border) Margem ou lado externo Sub-regiões Topo Fundo Esquerda Direita José Paulo Leal, Rita P. Ribeiro PDE (DCC-FCUP) 15

17 4.1 Folhas de Estilo Conceitos: Unidades e Tipos de Letra Unidades Dependentes da resolução: px (pixel) Dependentes do contexto (percentagens) Absolutas: cm, mm, etc Tipos de letra Família-genérica: Mono espaçada, Cursiva, Fantasia, Serif, Sans-serif Família: Helvetica, Times, Courier Tamanho: Absoluto: ex: Large Relativo: ex: smaller, 120% José Paulo Leal, Rita P. Ribeiro PDE (DCC-FCUP) 16

18 4.1 Folhas de Estilo Conceitos: Posicionamento Referencial Estático - definido pela formatação Relativo - à posição dada pela formatação Absoluta - progenitor não estático Fixa - a página/écran Relações (face ao referencial) Topo Esquerda Direita Fundo Sobreposição Clipping Overflow Visibilidade Elementos flutuantes Alinhamento Quebra José Paulo Leal, Rita P. Ribeiro PDE (DCC-FCUP) 17

19 4.1 Folhas de Estilo Conceitos: Funções artigo:after { content: ":\00a0 " attr(preco) "e"; margin: 5mm; } linha { width: -moz-calc(100% - 1em); width: -webkit-calc(100% - 1em); width: calc(100% - 1em); } Função - attr() Introduzida no CSS2 Retorna valor do atributo como texto CSS2 No CSS3 pode retornar valores de outros tipos Permite integrar valores de atributos no conteúdo Função - calc() Introduzida no CSS3 Avalia expressões aritméticas ( + - * / ) Pode ser usada em propiedades de comprimento Pensado para o cálculo de margens Pode usar o resultado de um calc como argumento As funções são bastante estendidas no XPath José Paulo Leal, Rita P. Ribeiro PDE (DCC-FCUP) 18

20 4.1 Folhas de Estilo Seletores Graus de complexidade Básico - CSS nível 1 Intermédio - CSS nível 2 Avançado - CSS nível 3 (apenas recomendação, nem sempre suportado) Constituintes selecionáveis elementos alguns conteúdos (primeiras letras, linhas) nunca sobre atributos Critério de seleção nomes de elementos estrutura (relações entre elementos) valores de atributos estado da interação (HTML) Relação com XPath Expressões XPath generalizam de seletores (mas não só) Acrescentam operações sobre seletores (aritméticas, lógicas, etc) Níveis avançados influenciados por eixos do XPath José Paulo Leal, Rita P. Ribeiro PDE (DCC-FCUP) 19

21 4.1 Folhas de Estilo Seletores: Básico - CSS nível 1 Direto Contexto Conteúdo Estado elemento.classe #id elemento, elemento ancestral elemento seletor:first-letter seletor:first-line :link :visited :active elementos com nome dado elementos com atributo class com valor dado elementos com atributo id com valor dado seleciona ambos os elementos elementos com um dado ancestral primeira letra do elemento selecionado primeira linha do elemento selecionado links não visitados links visitados links ativos Seleção direta de elementos baseados em critérios simples Pouco suporte para seleção estrutural (estar contido) Algum suporte para conteúdo (primeira letra, linha) Estado focado no HTML (pseudo-seletores) José Paulo Leal, Rita P. Ribeiro PDE (DCC-FCUP) 20

22 4.1 Folhas de Estilo Seletores: Intermédio - CSS nível 2 Direto * todos os elementos Estruturais Conteúdo Atributos progenitor > elemento anterior + elemento seletor:first-child seletor:before seletor:after [atributo] [atributo=valor] [atributo~=valor] [atributo =valor] elemento:lang(língua) elementos com um dado progenitor elementos que seguem imediatamente o anterior dado primeira linha do elemento selecionado ponto antes do elemento selecionado ponto depois do elemento selecionado elementos com um dado atributo elementos com um dado valor de atributo elementos com um atributo de valor diferente do dado elementos com um atributo cujo valor tem um dado prefixo elementos com um atributo lang dado Estado elemento:focus elementos com focus (digitação de carateres) Seleção direta de todos os elementos (wildcards) Pequeno complemento de seleção estrutural Suporte para critérios de seleção usando atributos Possibilidade de inserção de conteúdo usando :before e :after José Paulo Leal, Rita P. Ribeiro PDE (DCC-FCUP) 21

23 4.1 Folhas de Estilo Seletores: Avançado - CSS nível 3 Estrutura Estrutura :root raíz do documento elemento:empty elementos vazios anterior ~ elemento elementos que seguem ao anterior dado elemento:first-of-type primeiro elemento deste tipo no seu progenitor elemento:last-of-type último elemento deste tipo no seu progenitor elemento:only-child único elemento deste tipo no seu progenitor elemento:nth-child(n) enésimo elemento deste tipo no seu progenitor elemento:nth-last-child(n) enésimo elemento (a contar do fim) deste tipo no seu progenitor elemento:last-child elemento deste tipo que é o ultimo do seu progenitor :target elemento apontado por link interno :enabled objeto gráfico ativo (ex. botão) :disabled objeto gráfico inativo (ex. botão) :checked objeto gráfico escolhido (check box) ::selection conteúdo selecionado pelo utilizador Lógico not(seletor) inverte a seleção Muitos elementos estruturais (vindos do XPath) Estado da interação (focado no HTML) Suporte incipiente para operações lógicas (apenas negação) José Paulo Leal, Rita P. Ribeiro PDE (DCC-FCUP) 22

24 4.1 Folhas de Estilo Propriedades Formatação como estrutura (árvore) Propriedades caracterizam nós da estrutura Diferentes tipos de propriedades Classificação: tipo de disposição Caixa: dimensões e contorno do rectângulo contendo o nó Posicionamento: localização de elementos CSS2 Conteúdo: introdução de valores CSS2 Tipo de letra: características dos caracteres Texto: relações entre os caracteres Cores: pintando o fundo do rectângulo José Paulo Leal, Rita P. Ribeiro PDE (DCC-FCUP) 23

25 4.1 Folhas de Estilo Propriedades de classificação Elemento Valores Inicial display block inline list-item none block whitespace normal pre nowrap normal list-style-type disc circle square decimal lower-roman upper-roman disc lower-alpha upper-alpha none list-style-image [url] none none list-style-position inside outside outside list-style [list-style-type] [list-style-position] [url] indefinido José Paulo Leal, Rita P. Ribeiro PDE (DCC-FCUP) 24

26 4.1 Folhas de Estilo Propriedades da caixa de contorno - I Elemento Valores Inicial Elementos Herdado width [comprimento] [percentagem] auto auto bloco não height [comprimento] [percentagem] auto auto bloco não float left right none none todos não clear left right none none todos não margin margin-top margin-left margin-right margin-bottom padding [comprimento] [percentagem] auto 0 todos não padding-top padding-left padding-right padding-bottom [comprimento] [percentagem] 0 todos não José Paulo Leal, Rita P. Ribeiro PDE (DCC-FCUP) 25

27 4.1 Folhas de Estilo Propriedades da caixa de contorno - II Elemento Valores Inicial Elementos Herdado border-width border-top-width border-left-width border-right-width border-bottom-width border-color thin medium thick [comprimento] [cor]{1,4} medium propriedade todos todos não não color border-style (none dotted dashed solid double none todos não groove ridge inset outset) border border-top border-left border-right border-bottom [border-width] [border-style] [color] indefinido todos não José Paulo Leal, Rita P. Ribeiro PDE (DCC-FCUP) 26

28 4.1 Folhas de Estilo Propriedades do posicionamento Elemento Valores Inicial Elementos Herdado position static absolute relative static todos não top left right bottom z-index [comprimento] [percentagem] auto [inteiro] auto auto auto position = absolute relative não não clip [forma] auto auto position = absolute não overflow visible hidden scroll auto visible position = absolute não visibility visible hidden inherit visible todos não José Paulo Leal, Rita P. Ribeiro PDE (DCC-FCUP) 27

29 4.1 Folhas de Estilo Propriedades do conteúdo Elemento Valores Inicial Elementos Herdado content texto none normal... normal todos não counter-increment id number none inherith none todos não counter-reset id number none inherith none todos não quotes texto texto... none inherith none todos não José Paulo Leal, Rita P. Ribeiro PDE (DCC-FCUP) 28

30 4.1 Folhas de Estilo Propriedades dos tipos de letra Elemento Valores Inicial Elementos Herdado font-family [familia-tipo] definido pelo todos sim [familia-genérica] navegador font-style normal italic oblique normal todos sim font-variant normal small-caps normal todos sim font-weight normal bold bolder lighter normal todos sim [tamanho-absoluto] [percentagem] font-size xx-small x-small small medium large x-large xx-large larger smaller medium todos sim ( [font-style] [font-variant] [font-weight] )? font indefinido todos sim [font-size[ ( / [line-height] )? [font-family] José Paulo Leal, Rita P. Ribeiro PDE (DCC-FCUP) 29

31 4.1 Folhas de Estilo Propriedades de cores e fundos Elemento Valores Inicial Elementos Herdado color [cor] definido pelo todos não navegador background-color [cor] transparent transparent todos não background-image [url] none none todos não background-attachment scroll fixed scroll todos não background-position x% y% xpos ypos 0% 0% todos não [left center right] [top center bottom] [background-color] [background-image] background [background-repeat] [background-attachment] [background-position] indefinido todos não José Paulo Leal, Rita P. Ribeiro PDE (DCC-FCUP) 30

32 4.1 Folhas de Estilo Propriedades do texto Elemento Valores Inicial Elementos Herdado word-spacing normal [comprimento] normal todos sim letter-spacing normal [comprimento] normal todos sim text-decoration none none todos não ( underline overline line-through blink ) vertical-align baseline sub super top text-top middle baseline em-linha não bottom text-bottom [percentagem] text-align left right center justify definido pelo blocos sim navegador text-indent [length] [percentagem] 0 blocos sim line-height normal [numero] [comprimento] [percentagem] normal todos sim José Paulo Leal, Rita P. Ribeiro PDE (DCC-FCUP) 31

33 4.1 Folhas de Estilo Exemplo - I <?xml version="1.0" encoding="iso "?> <?xml-stylesheet type="text/css" href="exemplo.css"?> <documento> <cabecalho> <tipo>encomenda</tipo> <data>2015/02/01</data> <cliente id="c123" nif=" "> <nome>fulaninho de tal</nome> <morada>fulaninho.tal@dominio.net</morada> </cliente> </cabecalho> <corpo> <linha> <quantidade>8</quantidade> <artigo id="a123" preco="40" iva="23">camisa</artigo> </linha> <linha> <quantidade>15</quantidade> <artigo id="a124" preco="30">camisola</artigo> </linha> </corpo> </documento> José Paulo Leal, Rita P. Ribeiro PDE (DCC-FCUP) 32

34 4.1 Folhas de Estilo Exemplo - II CSS Level 1 Style Sheet Documento formatado Limitações Apresentação de valores de atributos Inserção de conteúdos fixos (dados da empresa, cabeçalhos) CSS Level 2 Style Sheet Documento formatado Limitações Modificações complexas da estrutura: seleção, ordenação Cálculos sobre valores (total de fatura, IVA, etc) Inserção de conteúdo estruturado (linhas em branco) José Paulo Leal, Rita P. Ribeiro PDE (DCC-FCUP) 33

35 4.1 Folhas de Estilo Limitações Posicionamento Controlo de dimensões só em elementos block Não há propagação de dimensões de elementos float Dificuldade de posicionamento absoluto de sequências elementos Estrutura do documento CSS controla apenas propriedades gráficas Atributos não são visualizáveis Não é possível incluir novos elementos para visualização Dificuldade em ocultar dados baseado nos seus valores Processamento Cálculo de valores de agregação (ex: somar lista) Ligação de vários documentos José Paulo Leal, Rita P. Ribeiro PDE (DCC-FCUP) 34

36 4.2 Localizações XPath - Localização de partes de documentos - I <documento xmlns=" <cabecalho> <tipo>encomenda</tipo> <data>&hoje;</data> <cliente id="c123" nif=" "> <nome>fulaninho de tal</nome> <morada>fulaninho.tal dominio.net</morada> </cliente> </cabecalho> <corpo> <linha> <quantidade>8</quantidade> <artigo id="a123" preco="40" iva="23">camisa</artigo> </linha> <linha> <quantidade>15</quantidade> <artigo id="a124" preco="30">camisola</artigo> </linha> </corpo> </documento> Expressão XPath: /documento/corpo/linha[2]/artigo/@preco José Paulo Leal, Rita P. Ribeiro PDE (DCC-FCUP) 35

37 4.2 Localizações XPath - Localização de partes de documentos - II Linguagem de definição de caminhos em documentos XML Define expressões (inspiradas nos nomes-caminhos dos sistemas de ficheiros) que selecionam uma parte do documento XML Opera num modelo em árvore Não é uma linguagem XML mas é um standard W3C Usada em outras linguagens (XSLT, XPointer e XQuery) Expressões em strings atribuídas como valor a atributos Usada para seleção / emparelhamento avaliação de expressões (aritmética, booleanas, strings) cópia de valores José Paulo Leal, Rita P. Ribeiro PDE (DCC-FCUP) 36

38 4.2 Localizações Sintaxe básica Caminhos na árvore de elementos separados por barras Barra única ("/") inicial refere-se à raiz - caminho absoluto /documento/tipo Barra dupla ("//") inicial substitui qualquer caminho desde a raiz //nome Omitindo a barra inicial é tomado o elemento corrente do contexto cliente/nome O asterisco ("*") selecionam qualquer elemento /documento/corpo/*/preco Dois pontos consecutivos ("..") selecionam o progenitor do nó../quantidade O sinal de arroba ("@") permite aceder a um atributo linha/artigo/@preco Esta sintaxe básica é enganadoramente simples A sintaxe do XPath é muito mais completa e complexa José Paulo Leal, Rita P. Ribeiro PDE (DCC-FCUP) 37

39 4.2 Localizações Modelo de execução Linguagem de expressões Sem estrutura XML (Strings) Caminhos como elementos básicos Literais, operadores, funções Valores retornados (XPath 1.0) conjuntos de nós ordenados - nós na ordem natural do documento sem duplicados (os nós, não os seus valores) booleanos números strings Contexto de avaliação um nó da árvore do documento (contexto) posição e tamanho no contexto (inteiros) associação de valores a variáveis biblioteca de funções declaração de namespaces José Paulo Leal, Rita P. Ribeiro PDE (DCC-FCUP) 38

40 4.2 Localizações Caminhos Eixo:: Nó-teste[Predicados] Eixo gera um conjunto de nós num dado sentido relativamente a um dado contexto Nó-teste indica um tipo para os nós do conjunto anterior Predicados expressões que refinam o conjunto de nós selecionado Exemplo: child::linha[quantidade=15] Existem abreviaturas para expressões frequentes José Paulo Leal, Rita P. Ribeiro PDE (DCC-FCUP) 39

41 4.2 Localizações Caminhos - Eixos Conceito de Eixo conjunto de nós... segundo um conjunto de direções... baseado no nó corrente Nomes dos Eixos self child descendant descendant-or-self parent ancestor ancestor-or-self preceding preceding-sibling following following-sibling attribute namespace José Paulo Leal, Rita P. Ribeiro PDE (DCC-FCUP) 40

42 4.2 Localizações Caminhos - Eixos: Self Nó corrente <?xml version="1.0" encoding="utf-8"?> <ancestor xmlns:ns="urn::namespace::example" > <ancestor> <parent attribute="parent"> <preceding-sibling> <preceding/> </preceding-sibling> <preceding-sibling /> <self attribute="self"> <child attribute="child"> <descendant> <descendant /> </descendant> </child> <child> <descendant /> </child> </self> <following-sibling > <following/> </following-sibling> <following-sibling /> </parent> </ancestor> </ancestor> José Paulo Leal, Rita P. Ribeiro PDE (DCC-FCUP) 41

43 4.2 Localizações Caminhos - Eixos: Child Filhos do nó corrente <?xml version="1.0" encoding="utf-8"?> <ancestor xmlns:ns="urn::namespace::example" > <ancestor> <parent attribute="parent"> <preceding-sibling> <preceding/> </preceding-sibling> <preceding-sibling /> <self attribute="self"> <child attribute="child"> <descendant> <descendant /> </descendant> </child> <child> <descendant /> </child> </self> <following-sibling > <following/> </following-sibling> <following-sibling /> </parent> </ancestor> </ancestor> José Paulo Leal, Rita P. Ribeiro PDE (DCC-FCUP) 42

44 4.2 Localizações Caminhos - Eixos: Descendant Descendentes do nó corrente <?xml version="1.0" encoding="utf-8"?> <ancestor xmlns:ns="urn::namespace::example" > <ancestor> <parent attribute="parent"> <preceding-sibling> <preceding/> </preceding-sibling> <preceding-sibling /> <self attribute="self"> <child attribute="child"> <descendant> <descendant /> </descendant> </child> <child> <descendant /> </child> </self> <following-sibling > <following/> </following-sibling> <following-sibling /> </parent> </ancestor> </ancestor> José Paulo Leal, Rita P. Ribeiro PDE (DCC-FCUP) 43

45 4.2 Localizações Caminhos - Eixos: Descendant or Self Descendentes do nó corrente Inclui o nó corrente <?xml version="1.0" encoding="utf-8"?> <ancestor xmlns:ns="urn::namespace::example" > <ancestor> <parent attribute="parent"> <preceding-sibling> <preceding/> </preceding-sibling> <preceding-sibling /> <self attribute="self"> <child attribute="child"> <descendant> <descendant /> </descendant> </child> <child> <descendant /> </child> </self> <following-sibling > <following/> </following-sibling> <following-sibling /> </parent> </ancestor> </ancestor> José Paulo Leal, Rita P. Ribeiro PDE (DCC-FCUP) 44

46 4.2 Localizações Caminhos - Eixos: Parent Progenitor do nó corrente <?xml version="1.0" encoding="utf-8"?> <ancestor xmlns:ns="urn::namespace::example" > <ancestor> <parent attribute="parent"> <preceding-sibling> <preceding/> </preceding-sibling> <preceding-sibling /> <self attribute="self"> <child attribute="child"> <descendant> <descendant /> </descendant> </child> <child> <descendant /> </child> </self> <following-sibling > <following/> </following-sibling> <following-sibling /> </parent> </ancestor> </ancestor> José Paulo Leal, Rita P. Ribeiro PDE (DCC-FCUP) 45

47 4.2 Localizações Caminhos - Eixos: Ancestor Antepassados do nó corrente <?xml version="1.0" encoding="utf-8"?> <ancestor xmlns:ns="urn::namespace::example" > <ancestor> <parent attribute="parent"> <preceding-sibling> <preceding/> </preceding-sibling> <preceding-sibling /> <self attribute="self"> <child attribute="child"> <descendant> <descendant /> </descendant> </child> <child> <descendant /> </child> </self> <following-sibling > <following/> </following-sibling> <following-sibling /> </parent> </ancestor> </ancestor> José Paulo Leal, Rita P. Ribeiro PDE (DCC-FCUP) 46

48 4.2 Localizações Caminhos - Eixos: Ancestor or Self Antepassados do nó corrente Inclui o próprio nó corrente <?xml version="1.0" encoding="utf-8"?> <ancestor xmlns:ns="urn::namespace::example" > <ancestor> <parent attribute="parent"> <preceding-sibling> <preceding/> </preceding-sibling> <preceding-sibling /> <self attribute="self"> <child attribute="child"> <descendant> <descendant /> </descendant> </child> <child> <descendant /> </child> </self> <following-sibling > <following/> </following-sibling> <following-sibling /> </parent> </ancestor> </ancestor> José Paulo Leal, Rita P. Ribeiro PDE (DCC-FCUP) 47

49 4.2 Localizações Caminhos - Eixos: Preceding Nós anteriores do nó corrente <?xml version="1.0" encoding="utf-8"?> <ancestor xmlns:ns="urn::namespace::example" > <ancestor> <parent attribute="parent"> <preceding-sibling> <preceding/> </preceding-sibling> <preceding-sibling /> <self attribute="self"> <child attribute="child"> <descendant> <descendant /> </descendant> </child> <child> <descendant /> </child> </self> <following-sibling > <following/> </following-sibling> <following-sibling /> </parent> </ancestor> </ancestor> José Paulo Leal, Rita P. Ribeiro PDE (DCC-FCUP) 48

50 4.2 Localizações Caminhos - Eixos: Preceding sibling Irmãos anteriores do nó corrente <?xml version="1.0" encoding="utf-8"?> <ancestor xmlns:ns="urn::namespace::example" > <ancestor> <parent attribute="parent"> <preceding-sibling> <preceding/> </preceding-sibling> <preceding-sibling /> <self attribute="self"> <child attribute="child"> <descendant> <descendant /> </descendant> </child> <child> <descendant /> </child> </self> <following-sibling > <following/> </following-sibling> <following-sibling /> </parent> </ancestor> </ancestor> José Paulo Leal, Rita P. Ribeiro PDE (DCC-FCUP) 49

51 4.2 Localizações Caminhos - Eixos: Following Nós seguintes ao nó corrente <?xml version="1.0" encoding="utf-8"?> <ancestor xmlns:ns="urn::namespace::example" > <ancestor> <parent attribute="parent"> <preceding-sibling> <preceding/> </preceding-sibling> <preceding-sibling /> <self attribute="self"> <child attribute="child"> <descendant> <descendant /> </descendant> </child> <child> <descendant /> </child> </self> <following-sibling > <following/> </following-sibling> <following-sibling /> </parent> </ancestor> </ancestor> José Paulo Leal, Rita P. Ribeiro PDE (DCC-FCUP) 50

52 4.2 Localizações Caminhos - Eixos: Following sibling Irmãos seguintes ao nó corrente <?xml version="1.0" encoding="utf-8"?> <ancestor xmlns:ns="urn::namespace::example" > <ancestor> <parent attribute="parent"> <preceding-sibling> <preceding/> </preceding-sibling> <preceding-sibling /> <self attribute="self"> <child attribute="child"> <descendant> <descendant /> </descendant> </child> <child> <descendant /> </child> </self> <following-sibling > <following/> </following-sibling> <following-sibling /> </parent> </ancestor> </ancestor> José Paulo Leal, Rita P. Ribeiro PDE (DCC-FCUP) 51

53 4.2 Localizações Caminhos - Eixos: Attribute Atributos do nó corrente Apenas nós de atributos <?xml version="1.0" encoding="utf-8"?> <ancestor xmlns:ns="urn::namespace::example" > <ancestor> <parent attribute="parent"> <preceding-sibling> <preceding/> </preceding-sibling> <preceding-sibling /> <self attribute="self"> <child attribute="child"> <descendant> <descendant /> </descendant> </child> <child> <descendant /> </child> </self> <following-sibling > <following/> </following-sibling> <following-sibling /> </parent> </ancestor> </ancestor> José Paulo Leal, Rita P. Ribeiro PDE (DCC-FCUP) 52

54 4.2 Localizações Caminhos - Eixos: Namespace Apenas nós de definição de espaços de nomes Requer prefixo de espaço de nomes como "nó-teste" <?xml version="1.0" encoding="utf-8"?> <ancestor xmlns:ns="urn::namespace::example"> <ancestor> <parent attribute="parent"> <preceding-sibling> <preceding/> </preceding-sibling> <preceding-sibling /> <self attribute="self"> <child attribute="child"> <descendant> <descendant /> </descendant> </child> <child> <descendant /> </child> </self> <following-sibling > <following/> </following-sibling> <following-sibling /> </parent> </ancestor> </ancestor> José Paulo Leal, Rita P. Ribeiro PDE (DCC-FCUP) 53

55 4.2 Localizações Caminhos - Testes sobre nós Nós Significado Exemplo nome nome do nó (do tipo principal do eixo) child::nome text() nós de texto child::text() processing-instruction() nós de instruções de processamento ancestor::processing-instruction() comment() nós de comentários ancestor-or-self::comment() node() ramos do tipo nó child::node() * todos os nós descendant::* Testes selecionam nós baseados em tipos Selecção de nós por nome, baseado no tipo principal do eixo Tipo principal condicionado pelo eixo eixo attribute tem este tipo principal eixo namespace tem este tipo principal os restantes são do tipo element Tipo * seleciona todos os nós do tipo principal Tipo node() seleciona nós de qualquer tipo José Paulo Leal, Rita P. Ribeiro PDE (DCC-FCUP) 54

56 4.2 Localizações Caminhos - Predicados child::linha[child::artigo="camisa"] child::linha[position()=1] child::linha[1] child::linha[position()<3] child::linha[last()-1] descendant::linha[position()=last()-1] following-sibling::linha[1] ancestor::*[last()] position() Expressões refinam conjunto de nós selecionado Contexto de avaliação de predicados é o nó a testar Se omitido o eixo::teste, o contexto é o da expressão XPath Predicados usam expressões envolvendo literais, operadores e funções Valores numéricos são tomados como posição (position()) Posições são relativas ao conjunto selecionado (não a posição face ao progenitor) Predicados podem ser avaliados no contexto atual José Paulo Leal, Rita P. Ribeiro PDE (DCC-FCUP) 55

57 4.2 Localizações Caminhos - Abreviaturas Abreviaturas de expressões frequentes. Abrev. Significa Exemplo vazio child:: nome attribute:: artigo[@preco=30] child::artigo[attribute::preco=30]. self::node().//linha self::node()/descendant-or-self::node()/child::linha.. parent::node()../quantidade parent::/child::quantidade // /descendant-or-self::node()/ //artigo /descendant-or-self::node()/child::artigo José Paulo Leal, Rita P. Ribeiro PDE (DCC-FCUP) 56

58 4.2 Localizações Expressões XPath quantidade * ((artigo/@preco) * (1 + (artigo/@iva) div 100 )) < //cliente/limite Caminhos Literais Expressões Aritméticas Igualdade Relacionais Booleanas Uniões José Paulo Leal, Rita P. Ribeiro PDE (DCC-FCUP) 57

59 4.2 Localizações Expressões XPath: Caminhos e Literais Caminhos Operador Operação Exemplo / filho /documento/cabecalho/titulo // descendentes //titulo [ ] seleção //linha[quantidade/text()= 5 ] Literais Números: vírgula flutuante (IEEE 754) Booleanos: valores true e false são retornados mas não existem como literais Strings: sequência de caracteres UCS delimitadas por plicas ou aspas. José Paulo Leal, Rita P. Ribeiro PDE (DCC-FCUP) 58

60 4.2 Localizações Expressões XPath: Expressões aritméticas Operador Operação Exemplo + soma quantidade+1 - subtração artigo/@preco - 1 * multiplicação artigo/@quantidade*artigo/@preco div divisão artigo/@preco*(1+artigo/@iva div 100) mod resto artigo/@preco - artigo/@preco mod 10 Os operandos são, automaticamente, convertidos para valores numéricos A barra ( / ) não é usada como divisão para evitar ambiguidade com o separador de caminhos O asterisco ( * ) é o operador de multiplicação embora seja usado também como wildcard (//linha/* * 2 é uma expressão válida) O operador de subtração ( - ) pode ser usado como parte dum nome. É necessário deixar um espaço entre nomes e operadores de subtração José Paulo Leal, Rita P. Ribeiro PDE (DCC-FCUP) 59

61 4.2 Localizações Expressões XPath: Expressões de igualdade Operador Operação Exemplo = igualdade //linha/artigo = Camisa!= desigualdade //linha/artigo!= Camisa Testes a conjuntos de nós retornam verdade se a expressão for verdadeira para, pelo menos, um elemento Conjuntos resultantes das expressões de exemplo podem ser, simultaneamente, não vazios José Paulo Leal, Rita P. Ribeiro PDE (DCC-FCUP) 60

62 4.2 Localizações Expressões XPath: Expressões relacionais Operador Operação Exemplo < menor que //linha/quantidade < 10 > maior que //nome <? <= menor ou igual //linha/quantidade >= 10 >= maior ou igual //linha/quantidade >= 10 Operandos são convertidos em valores numéricos Se um dos operandos não for numérico, o resultado é false Testes sobre conjuntos de nós como na igualdade Os simbolos "<" e ">" podem ter de ser escritos recorrendo às entidades "<" e ">" se expressão XPath for colocada em atributos (Exemplo: no XSLT) José Paulo Leal, Rita P. Ribeiro PDE (DCC-FCUP) 61

63 4.2 Localizações Expressões XPath: Expressões booleanas Operador Operação Exemplo and conjunção quantidade > 10 and quantidade < 20 or disjunção quantidade < 10 or quantidade > 20 usar funções true() e false() para literais não existe operador not; usar a função not() Outros valores como booleanos Resultado de avaliar outro tipo de valores como booleano Tipo Verdade Falsidade string não vazia vazia número não nulo nem NaN 0 ou NaN conjunto de nós não vazio vazio José Paulo Leal, Rita P. Ribeiro PDE (DCC-FCUP) 62

64 4.2 Localizações Expressões XPath: Expressões sobre strings Não há operadores especiais para strings Todos os tipos de nós têm um valor como string Tipo de nó Raiz Elemento Texto Atributo Espaço de nomes Comentário Instrução de processamento Valor valor dos descendentes valor dos descendentes Texto do nó (pelo menos 1 caracter) Valor do nó URI do espaço de nomes Texto do comentário Texto do instrução de processamento Valor dos descendentes - concatenação dos valores string dos descendentes na ordem natural do documento José Paulo Leal, Rita P. Ribeiro PDE (DCC-FCUP) 63

65 4.2 Localizações Expressões XPath: Uniões Seleção de vários caminhos //quantidade //artigo Operação apenas sobre conjuntos Operador (pipe) Resulta na reunião dos conjuntos Conjuntos ordenados (ordem natural dos nós no documento) Não existem interseções José Paulo Leal, Rita P. Ribeiro PDE (DCC-FCUP) 64

66 4.2 Localizações Funções round( sum(//quantidade) div count(//quantidade) ) Conjuntos de nós Strings Numéricas Booleanas José Paulo Leal, Rita P. Ribeiro PDE (DCC-FCUP) 65

67 4.2 Localizações Funções: Conjunto de nós Função Descrição Exemplo count() retorna número de nós count(//linha) sum() soma os valores dum conjunto de nós sum(//quantidade) id() seleciona nós pelo id id( a124 ) last() retorna a posição do ultimo nó da lista em processamento //linha[last()] local-name() nome do nó sem prefixos local-name(//linha/*) name() nome do nó name(//linha/*) namespace-uri() retorna o uri do nó especificado //comentario[namespace-uri()=html] position() posição na lista de nós em processamento (começa em 1) //linha[position()=3] José Paulo Leal, Rita P. Ribeiro PDE (DCC-FCUP) 66

68 4.2 Localizações Funções: Strings Função Descrição Exemplo concat() concatenação concat("ola"," mundo")="ola mundo" contains() verifica se o primeiro argumento contem o segundo contains("xml","ml")=true normalize-space() remove espaços desnecessários normalize-space(" ola mundo ")="ola mundo" starts-with() string do primeiro argumento comeca com o segundo string() converte argumento para string string(123) starts-with("xml","x")=true string-length() comprimento duma string string-length(//nome) substring() substring-after() substring-before() translate() retorna substring desde o segundo argumento com o comprimento do terceiro retorna substring depois da string do segundo argumento retorna substring antes da string do segundo argumento substitui na string do primeiro argumento, o valor do segundo pelo do terceiro substring("xml",2,2)="ml" substring-after("1/1/2001","1/1/")="2001" substring-before("1/1/2001","/2001")="1/1" translate("/a/b","/","\")="\a\b" José Paulo Leal, Rita P. Ribeiro PDE (DCC-FCUP) 67

69 4.2 Localizações Funções: Numéricas Função Descrição Exemplo ceiling() menor inteiro maior que o argumento ceiling(2.3)=3 floor() maior inteiro menor que o argumento floor(2.3)=2 number() converte string para número number(quantidade) round() arredonda ao inteiro mais próximo round(artigo/@preco) José Paulo Leal, Rita P. Ribeiro PDE (DCC-FCUP) 68

70 4.2 Localizações Funções: Booleanas Função boolean() true() false() not() lang() Descrição converte string em booleano retorna literal true retorna literal false nega o valor do argumento verifica se se o atributo lang está definido com o valor do argumento José Paulo Leal, Rita P. Ribeiro PDE (DCC-FCUP) 69

71 4.2 Localizações Exemplos <documento> <cabecalho> <tipo>encomenda</tipo> <data>&hoje;</data> <cliente id="c123" nif=" "> <nome>fulaninho de tal</nome> <morada>fulaninho.tal dominio.net</morada> </cliente> </cabecalho> <corpo> <linha> <quantidade>8</quantidade> <artigo id="a123" preco="40" iva="23">camisa</artigo> </linha> <linha> <quantidade>15</quantidade> <artigo id="a124" preco="30">camisola</artigo> </linha> </corpo> </documento> Expressões absolutas Não fazem uso do elemento corrente Expressões iniciadas por / ou // Funções que agregam expressões absolutas Expressões relativas Elemento corrente é o assinalado Não são iniciadas por / ou // José Paulo Leal, Rita P. Ribeiro PDE (DCC-FCUP) 70

72 4.2 Localizações Exemplos: Expressões absolutas Designação Elemento tipo Texto do elemento tipo NIF do cliente (texto) Conjunto elementos artigo Conjunto de artigos com preço maior 35 Número de elementos com preço maior que 35 Preço do artigo encomendado com quantidade igual a 8 (conjunto) Expressão /documento/cabecalho/tipo //tipo (assumindo que tipo é único) /documento/cabecalho/tipo/text() /documento/cabecalho/cliente/@nif //cliente/@nif (assumindo que cliente é único) //artigo //artigo[@preco > 35] count(//artigo[@preco > 35]) //linha[quantidade/text()="8"]/artigo/@preco José Paulo Leal, Rita P. Ribeiro PDE (DCC-FCUP) 71

73 4.2 Localizações Exemplos: Expressões relativas Designação Elemento quantidade texto do elemento quantidade Verificar se o preço do artigo é 30 (booleano) Elementos quantidade dos irmãos anteriores (conjunto) Elemento tipo NIF do cliente (texto) Soma das quantidades dos irmãos (número) Contagem das linhas anteriores (número) Quantidade linha seguinte (texto) Expressão quantidade quantidade/text() artigo/@preco = 30 preceding-sibling::*/quantidade../../cabecalho/tipo../../cabecalho/cliente/@nif sum(../linha/quantidade) count(preceding-sibling::linha) following-sibling::linha[1]/quantidade/text() José Paulo Leal, Rita P. Ribeiro PDE (DCC-FCUP) 72

74 4.2 Localizações Limitações Limitações do XPath 1.0 Operações de agregação (além da soma) Exemplo: maior/menor valor Multiplicar vetores Exemplo: soma do total por linha dum documento No XPath 2.0 São suportados todos o tipos básicos do XMLSchema As expressões XPath retornam sequências em vez de conjuntos de nós As funções básicas são muito mais alargadas José Paulo Leal, Rita P. Ribeiro PDE (DCC-FCUP) 73

75 4.3 Transformações XSL- I Linguagem XLST Potência da máquina de Turing Aplicação de regras de reescrita (Templates) Emparelhamento com elementos do documento original Geração do documento objetivo Cópia de valores do documento original Inspirada nas linguagens funcionais Pattern matching Variáveis lógicas Recursão Utiliza expressões XPath matching e testes cópia e agregação de valores José Paulo Leal, Rita P. Ribeiro PDE (DCC-FCUP) 74

76 4.3 Transformações XSL- II Linguagem não tipificada (ortogonal à validação de documentos) Na geração do documento objetivo, permite: adicionar/remover elementos adicionar/remover atributos ordenar elementos realizar testes sobre o conteúdo decidir que elementos incluir/excluir etc. Utilização Na Web: conversão para HTML no servidor: durante o processamento do pedido no cliente: antes da formatação do documento Interoperabilidade: conversão entre formatos José Paulo Leal, Rita P. Ribeiro PDE (DCC-FCUP) 75

77 4.3 Transformações XSL Olá mundo <?xml version="1.0" encoding="utf-8"?> <xsl:transform version="1.0" xmlns:xsl=" <xsl:output omit-xml-declaration="yes" encoding="utf-8" method="text"/> <xsl:template match="/"> Ola mundo </xsl:template> </xsl:transform> Transformação básica Gera "Ola mundo" no output Produz um documento de texto (não XML) Ignora conteúdo do documento original José Paulo Leal, Rita P. Ribeiro PDE (DCC-FCUP) 76

78 4.3 Transformações XSL Modelo de processamento das transformações XSLT Documentos XML Original - fonte de dados a transformar Transformação XSL Objetivo - resultado da transfomação José Paulo Leal, Rita P. Ribeiro PDE (DCC-FCUP) 77

79 4.3 Transformações XSL Modelo de processamento das transformações XSLT: Emparelhamento Descida na árvore original até conseguir aplicar transformação Aplicação da transformação Emparelhamento com selector da regra usando XPath Colocação do conteúdo no objetivo José Paulo Leal, Rita P. Ribeiro PDE (DCC-FCUP) 78

80 4.3 Transformações XSL Modelo de processamento das transformações XSLT: Cópia de valores Conteúdo da transformação refere valores no documento original XPath Valores do documento original copiados para documento objetivo José Paulo Leal, Rita P. Ribeiro PDE (DCC-FCUP) 79

81 4.3 Transformações XSL Modelo de processamento das transformações XSLT: Procura no documento original Conteúdo da transformação aponta elementos no documento original XPath Essa referência no objetivo é o ponto de colocação de novas transformações José Paulo Leal, Rita P. Ribeiro PDE (DCC-FCUP) 80

82 4.3 Transformações XSL Modelo de processamento das transformações XSLT: Re-emparelhamento Procura de regra de reescrita para elemento selecionado Aplicação da transformação encontrada José Paulo Leal, Rita P. Ribeiro PDE (DCC-FCUP) 81

83 4.3 Transformações XSL Reescrita <xsl:transform xmlns:xsl=" version="1.0"> <xsl:output method="html" version="4.01" encoding="utf-8"/> <xsl:template match="documento"> <HTML> <HEAD>Documento <TITLE>Documento</TITLE> </HEAD> <BODY> <H2>Empresa XPTO</H2> NC: <BR/> <TABLE> <!-- linhas --> </TABLE> </HTML> </xsl:template> </xsl:transform> Documento XSL é (fundamentalmente) um conjunto de regras de reescrita Elemento de topo agrega regras de reescrita Conjunto das regras de reescrita define transformação José Paulo Leal, Rita P. Ribeiro PDE (DCC-FCUP) 82

84 4.3 Transformações XSL Reescrita: Transformações <?xml version="1.0" encoding="uft-8"?> <xsl:transform xmlns:xsl=" version="1.0"> <xsl:output method="html" version="4.01" encoding="utf-8"/> <xsl:variable... /> <xsl:template match="documento">... </xsl:template> </xsl:transform> <?xml version="1.0" encoding="uft-8"?> <xsl:stylesheet... >... </xsl:stylesheet> Raíz do documento (alternativamente) stylesheet transform Espaço de nomes Prefixo standard: xsl Elemento de topo output controla tipo de output (text, HTML, XML) Definições de variáveis globais Definições de templates José Paulo Leal, Rita P. Ribeiro PDE (DCC-FCUP) 83

85 4.3 Transformações XSL Reescrita: Emparelhamento <xsl:template match="documento"> <HTML> <HEAD>Documento <TITLE>Documento</TITLE> </HEAD> <BODY> <H2>Empresa XPTO</H2> NC: <BR/> <TABLE> <!-- linhas --> </TABLE> </HTML> </xsl:template> Elemento template define regra de reescrita Emparelhamento Reescrita Definido por atributo match usando expressão XPath Elemento selecionado é contexto de expressões XPath no contentor Contentor com fragmento de documento objetivo Colocado na posição corrente do documento objetivo Contentor pode conter instruções XSLT José Paulo Leal, Rita P. Ribeiro PDE (DCC-FCUP) 84

86 4.3 Transformações XSL Reescrita: Emparelhamento de descendentes <xsl:template match="documento">... <TABLE> <xsl:apply-templates select="cabecalho"/> <TABLE> <TR><TH>Quantidade</TH><TH>Descrição</TH>... </TR> <xsl:apply-templates select="corpo"/> <TABLE>... </xsl:template> <xsl:template match="cabecalho"> <DIV ALIGN="right"> <xsl:value-of select="data"/><br/> <xsl:value-of select="cliente/nome"/><br/> <xsl:value-of select="cliente/morada"/><br/> </DIV> </xsl:template> <xsl:template match="corpo">... </xsl:template> Torna o código da folha de estilos modular Permite reutilizar matrizes Expressões XPath têm como base o elemento do match José Paulo Leal, Rita P. Ribeiro PDE (DCC-FCUP) 85

87 4.3 Transformações XSL Reescrita: Emparelhamento por modos <xsl:template match="documento">... <TABLE> <xsl:apply-templates select="cabecalho" mode="topo"/> <TABLE> <TR><TH>Quantidade</TH><TH>Descrição</TH>... </TR> <xsl:apply-templates select="corpo"/> <xsl:apply-templates select="cabecalho" mode="fundo"/> <TABLE>... </xsl:template> <xsl:template match="cabecalho" mode="topo"> <DIV ALIGN="right"> <xsl:value-of select="data"/><br/> <xsl:value-of select="cliente/nome"/><br/> <xsl:value-of select="cliente/morada"/><br/> </DIV> </xsl:template> <xsl:template match="cabecalho" mode="fundo"> <DIV ALIGN="right"> <xsl:value-of select="data"/><br/> <xsl:value-of select="cliente/nome"/><br/> </DIV> </xsl:template> Modos permitem múltiplos emparelhamentos Atributo mode nos elementos (template, apply-template) Modo complementa emparelhamento baseado na estrutura José Paulo Leal, Rita P. Ribeiro PDE (DCC-FCUP) 86

88 4.3 Transformações XSL Reescrita: Prioridade <xsl:template match="corpo"> <TABLE> <xsl:apply-templates select="linha"/> </TABLE> </xsl:template> <xsl:template match="linha"> <TR> <TD ALIGN="right"><xsl:value-of select="quantidade"/></td> <TD ALIGN="left"><xsl:value-of select="artigo"/></td> <TD ALIGN="left"><xsl:value-of select="artigo/ preco"/></td> </TR> </xsl:template> <xsl:template match="linha[quantidade > 50]" priority="1"> <TR> <TD ALIGN="right"><FONT COLOR="yellow"><xsl:value-of select="quantidade"/></font></td> <TD ALIGN="left"><xsl:value-of select="artigo"/></td> <TD ALIGN="left"><xsl:value-of select="artigo/ preco"/></td> </TR> </xsl:template> <xsl:template match="linha[quantidade > 100]" priority="2"> <TR> <TD ALIGN="right"><FONT COLOR="red"><xsl:value-of select="quantidade"/></font></td> <TD ALIGN="left"><xsl:value-of select="artigo"/></td> <TD ALIGN="left"><xsl:value-of select="artigo/ preco"/></td> </TR> </xsl:template> Atributo priority condiciona ordem de aplicação das regras Regras básicas têm prioridade 0 Regras podem ter prioridade negativa Regras importadas e de omissão têm prioridade mais baixa José Paulo Leal, Rita P. Ribeiro PDE (DCC-FCUP) 87

89 4.3 Transformações XSL Reescrita: Regras Internas Processamento recursivo Recursão de modos Cópia de texto e atributos Ignorar comentários e Instruções de processamento <xsl:template match= * / > <xsl:apply-templates/> </xsl:template> <xsl:template match= * / mode= m > <xsl:apply-templates mode= m /> </xsl:template> <xsl:template match= > <xsl:value-of select=. /> </xsl:template> <xsl:template match= processing-instruction() comment() /> Regras implícitas são equivalentes às das tabelas Existe também regra para ignorar espaços de nomes (não representável) São tratadas como regras importadas (baixa prioridade) Podem ser substituídas com outras regras Alguns processadores definem regras implícitas ligeiramente diferentes José Paulo Leal, Rita P. Ribeiro PDE (DCC-FCUP) 88

90 4.3 Transformações XSL Copiar do documento original (fonte) Valores Cópia de expressões XPath Nós Cópia de nós isolados da árvore original Árvores Cópias completas de fragmentos da árvore Cópias de nós e árvores são úteis nas transformações entre o mesmo tipo de documento José Paulo Leal, Rita P. Ribeiro PDE (DCC-FCUP) 89

91 4.3 Transformações XSL Cópia de valores simples <xsl:template match="documento"> <HTML> <HEAD>Documento <TITLE><xsl:value-of select="/documento/tipo"/><title> </HEAD> <BODY> <H2>Empresa XPTO</H2> NC: <BR/> <TABLE> <!-- linhas --> </TABLE> </HTML> </xsl:template> Elemento value-of indica ponto de inclusão no objetivo Valores copiados do documento original para objetivo Atributo obrigatório select é expressão XPath Atributo opcional disable-output-escaping Controla substituição de caracteres da formatação por entidades Valores possíveis yes e no. Por omissão é no. José Paulo Leal, Rita P. Ribeiro PDE (DCC-FCUP) 90

92 4.3 Transformações XSL Cópia de nós <xsl:transform xmlns:xsl=" version="1.0"> <xsl:output method="xml" encoding="utf-8"/> <xsl:template match="documento"> <xsl:copy> <xsl:copy-of select="cabecalho"/> <xsl:apply-templates select="corpo"/> </xsl:copy> </xsl:template> <xsl:template match="corpo"> <xsl:copy> <xsl:copy-of select="linhas[quantidade > 0]"/> </xsl:copy> </xsl:template> </xsl:transform> Elemento copy copia nós isolados Copia apenas o nó corrente (selecionado pela template) Apenas espaços de nome são automaticamente copiados Não copia nem atributos nem descendentes Conteúdo de copy constroi atributos e descendentes Pode usar atributo use-attribute-sets para construir atributos José Paulo Leal, Rita P. Ribeiro PDE (DCC-FCUP) 91

93 4.3 Transformações XSL Cópia de árvores <xsl:transform xmlns:xsl=" version="1.0"> <xsl:output method="xml" encoding="utf-8"/> <xsl:template match="documento"> <xsl:copy> <xsl:copy-of select="cabecalho"/> <xsl:apply-templates select="corpo"/> </xsl:copy> </xsl:template> <xsl:template match="corpo"> <xsl:copy> <xsl:copy-of select="linhas[quantidade > 0]"/> </xsl:copy> </xsl:template> </xsl:transform> Elemento copy-of copia sub-árvores completas Atributo select seleciona árvore a copiar Inclui todos os atributos, espaços de nomes e descendentes Pode ser usado para replicar múltiplas vezes um elemento José Paulo Leal, Rita P. Ribeiro PDE (DCC-FCUP) 92

Sintaxe Básica da Linguagem CSS

Sintaxe Básica da Linguagem CSS Sintaxe Básica da Linguagem CSS Regras - Regra CSS é uma declaração com sintaxe própria, que indica como será aplicado um estilo a um ou mais elementos HTML. Ela é composta por três partes: um seletor,

Leia mais

Notas sobre XSLT. O modo correcto para declarar um documento xsl é:

Notas sobre XSLT. O modo correcto para declarar um documento xsl é: Notas sobre XSLT XSLT é a abreviatura de extensible Stylesheet Language Tansformations. É uma linguagem para transformação de documentos xml. Permite transformar um documento xml noutro documento xml,

Leia mais

TECNOLOGIAS WEB. Unidade 3 Linguagem de Marcação e Estilo. Luiz Leão

TECNOLOGIAS WEB. Unidade 3 Linguagem de Marcação e Estilo. Luiz Leão Luiz Leão luizleao@gmail.com http://luizleao.com Conteúdo da Unidade Cascading Style Sheet (CSS) Linguagem CSS Introdução É uma linguagem de folhas de estilo utilizada para definir a apresentação de documentos

Leia mais

IFSC/Florianópolis - Prof. Herval Daminelli. De fontes De textos De margens De bordas De preenchimentos (padding) De fundos (background) De links

IFSC/Florianópolis - Prof. Herval Daminelli. De fontes De textos De margens De bordas De preenchimentos (padding) De fundos (background) De links De fontes De textos De margens De bordas De preenchimentos (padding) De fundos (background) De links Propriedades básicas para fontes: color: cor da fonte font-family: tipo de fonte font-size: tamanho

Leia mais

Guia de Referência CSS Volume 1: Parâmetros Básicos Prof. Daniel Caetano

Guia de Referência CSS Volume 1: Parâmetros Básicos Prof. Daniel Caetano Programação Web 1 Guia de Referência CSS Volume 1: Parâmetros Básicos Prof. Daniel Caetano Objetivo: Apresentar os parâmetros básicos que podem ser modificados com a tecnologia CSS. Bibliografia: W3, 2009;

Leia mais

08/11/2012. Tecnologias WEB - CSS. Professor Elisson Lobão

08/11/2012. Tecnologias WEB - CSS. Professor Elisson Lobão Tecnologias WEB - CSS Professor Elisson Lobão 1 CSS CSS(Cascade Style Sheets) são folhas de estilo que permitem controlar a aparência dos elementos HTML Vantagens: Grande liberdade de formatação Maior

Leia mais

Web Design - CSS. Conteúdo. - O que é CSS? - Sintaxe CSS - Como inserir CSS em HTML - Propriedades CSS

Web Design - CSS. Conteúdo. - O que é CSS? - Sintaxe CSS - Como inserir CSS em HTML - Propriedades CSS CSS Web Design - CSS Conteúdo - O que é CSS? - Sintaxe CSS - Como inserir CSS em HTML - Propriedades CSS 01 Assunto: CSS O que é CSS? CSS é a sigla para Cascading Style Sheets, que pode ser traduzida para

Leia mais

HTML 5 LINGUAGEM DE MARCAÇÃO E ESTILO - CSS - Prof. Rosemary Melo

HTML 5 LINGUAGEM DE MARCAÇÃO E ESTILO - CSS - Prof. Rosemary Melo HTML 5 LINGUAGEM DE MARCAÇÃO E ESTILO - CSS - Prof. Rosemary Melo RESUMO Linguagem de Marcação e Estilo - CSS DESCRIÇÃO Regra CSS Vinculação Inline Vinculação Incorporada Vinculação Externa TAGS seletor

Leia mais

XML: uma introdução prática X100. Helder da Rocha

XML: uma introdução prática X100. Helder da Rocha XML: uma introdução prática X100 Helder da Rocha (helder@argonavis.com.br) Atualizado em outubro de 2005 1 O que é XPath XPath é uma linguagem usada para localizar informações em um documento XML Serve

Leia mais

CSS (Cascading Style Sheet)

CSS (Cascading Style Sheet) CSS (Cascading Style Sheet) André Tavares da Silva andre.silva@udesc.br CSS Folha de Estilo em Cascata Mecanismo simples para adicionar estilos (fontes, cores, espaçamentos, por exemplo) aos documentos

Leia mais

PROGRAMAÇÃO EM AMBIENTE WEB I

PROGRAMAÇÃO EM AMBIENTE WEB I PROGRAMAÇÃO EM AMBIENTE WEB I Prof. Esp. Fabiano Taguchi fabianotaguchi@gmail.com http://fabianotaguchi.wordpress.com CSS As folhas de estilo em cascata são mecanismos usados para adicionar estilos em

Leia mais

CSS. Karen Frigo Busolin

CSS. Karen Frigo Busolin CSS Karen Frigo Busolin O que é CSS? Significa Cascading Style Sheets Estilos define como mostrar elementos HTML Estilos foram adicionandos no HTML 4.0 Estilos na solução de problemas HTML nunca deve a

Leia mais

06/02/2016 PROGRAMAÇÃO EM AMBIENTE WEB I CSS UM POUCO DE HISTÓRIA

06/02/2016 PROGRAMAÇÃO EM AMBIENTE WEB I CSS UM POUCO DE HISTÓRIA PROGRAMAÇÃO EM AMBIENTE WEB I Prof. Esp. Fabiano Taguchi fabianotaguchi@gmail.com http://fabianotaguchi.wordpress.com CSS As folhas de estilo em cascata são mecanismos usados para adicionar estilos em

Leia mais

XSL - extemsible Stylesheet Language. Prof. Antonio Almeida de Barros Jr.

XSL - extemsible Stylesheet Language. Prof. Antonio Almeida de Barros Jr. XSL - extemsible Stylesheet Language Prof. Antonio Almeida de Barros Jr. Agenda Conceitos XSLT - XSL Transformations Iteração e Classificação Processamento Condicional Copiando Nodos Variáveis Estude de

Leia mais

Comandos Extras Formatações no CSS

Comandos Extras Formatações no CSS Comandos Extras Formatações no CSS Propriedade 'background-color': A propriedade background-color define a cor do fundo de um elemento. Propriedade 'color': A propriedade color define a cor do primeiro

Leia mais

Cascading Style Sheets

Cascading Style Sheets Cascading Style Sheets PROF. ME. HÉLIO ESPERIDIÃO CSS Cascading Style Sheets (CSS) é uma linguagem de folhas de estilo utilizada para definir a apresentação de documentos escritos em uma linguagem de marcação,

Leia mais

Recurso Didáctico. Dossier Técnico Pedagógico Projecto: 5742/2008/22 Acção: 5742/2008/ Formador[a]

Recurso Didáctico. Dossier Técnico Pedagógico Projecto: 5742/2008/22 Acção: 5742/2008/ Formador[a] Recurso Didáctico Formador[a] Sónia Rodrigues UFCD / UC 0793 Scripts CGI e Folhas de Estilo Data 05/05/2009 Contextualização / Objectivos Documentação de apoio Orientação Pedagógica Apontamentos de Folhas

Leia mais

Criando estilos. Css. Cada estilo que você cria é definido como uma regra CSS. Cada regra deve-se utilizar a seguinte sintaxe:

Criando estilos. Css. Cada estilo que você cria é definido como uma regra CSS. Cada regra deve-se utilizar a seguinte sintaxe: Css CSS (Style Sheets Cascating - Folhas de Estilo em Cascata) é um estilo criado para melhorar a formatação de textos, imagens, links, tabelas, formulários e etc das suas páginas HTML. o CSS também facilita

Leia mais

XML: uma introdução prática X100. Helder da Rocha

XML: uma introdução prática X100. Helder da Rocha XML: uma introdução prática X100 Helder da Rocha (helder@argonavis.com.br) Atualizado em setembro de 2001 1 Apresentação do XML Por que apresentar os dados? Impressão Web Verificação Edição Soluções Cascading

Leia mais

XSLT. Sub-linguagens. Processamento Estruturado de Documentos 2003 By jcr XSL XSLFO XSLT. XPath. 11 de Setembro de 2003 jcr - ped2003-1

XSLT. Sub-linguagens. Processamento Estruturado de Documentos 2003 By jcr XSL XSLFO XSLT. XPath. 11 de Setembro de 2003 jcr - ped2003-1 XSLT Processamento Estruturado de Documentos 2003 By jcr 11 de Setembro de 2003 jcr - ped2003-1 Sub-linguagens XSL XSLFO XSLT XPath 11 de Setembro de 2003 jcr - ped2003-2 Processo de Transformação 1. Construção

Leia mais

Linguagens e Programação XPATH / XSLT. Paulo Proença

Linguagens e Programação XPATH / XSLT. Paulo Proença Linguagens e Programação XPATH / XSLT XSL XSL - Extensible Stylesheet Language Linguagem para transformação e formatação de um documento XML XSL deu origem a 3 normas: XPath que define um modo de navegação

Leia mais

PROGRAMAÇÃO PARA INTERNET RICA FUNDAMENTOS DO CSS PARTE II

PROGRAMAÇÃO PARA INTERNET RICA FUNDAMENTOS DO CSS PARTE II PROGRAMAÇÃO PARA INTERNET RICA FUNDAMENTOS DO CSS PARTE II Prof. Dr. Daniel Caetano 2012-1 Objetivos Apresentar o CSS como ferramenta de layout de página Capacitar para o posicionamento de elementos com

Leia mais

HTML, CSS e JavaScript

HTML, CSS e JavaScript HTML, CSS e JavaScript Contato: Site: http://professores.chapeco.ifsc.edu.br/lara/ 1 Arquivo externo Dentro da tag head: 2 Qual a dirença

Leia mais

Cascading Style Sheets CSS

Cascading Style Sheets CSS Cascading Style Sheets CSS Sistemas de Informação André Monteiro de Oliveira Restivo E-mail: andre.restivo@fe.up.pt URL: www.fe.up.pt/~arestivo/aulas/sinf André Restivo SINF 2003/2004 CSS: 1 CSS: O que

Leia mais

PROGRAMAÇÃO PARA INTERNET RICA FUNDAMENTOS DO CSS PARTE I

PROGRAMAÇÃO PARA INTERNET RICA FUNDAMENTOS DO CSS PARTE I PROGRAMAÇÃO PARA INTERNET RICA FUNDAMENTOS DO CSS PARTE I Prof. Dr. Daniel Caetano 2012-1 Objetivos Apresentar o CSS como substituto dos parâmetros visuais do HTML Capacitar para a construção de documentos

Leia mais

INTRODUÇÃO AO DESENVOLVIMENTO WEB. PROFª. M.Sc. JULIANA H Q BENACCHIO

INTRODUÇÃO AO DESENVOLVIMENTO WEB. PROFª. M.Sc. JULIANA H Q BENACCHIO INTRODUÇÃO AO DESENVOLVIMENTO WEB PROFª. M.Sc. JULIANA H Q BENACCHIO A partir do HTML 4.01, o único modo de alterar a letra (cor, tamanho, tipo, etc.) ou o fundo (cor ou imagem) é utilizando o atributo

Leia mais

Modelo de formateo visual em CSS

Modelo de formateo visual em CSS Programação Web Modelo de formateo visual em CSS Conferencia 6 MSc. Yoenis Pantoja Zaldívar Recordando Atributos das caixas largura borde margen fundo altura recheio Resumo Tipos de posicionamento. Visualização

Leia mais

Exercícios Práticos HTML5 + CSS3. Profa. Flávia Pereira de Carvalho

Exercícios Práticos HTML5 + CSS3. Profa. Flávia Pereira de Carvalho Exercícios Práticos HTML5 + CSS3 Profa. Flávia Pereira de Carvalho Maio de 2018 1 Exemplos e Exercícios Práticos HTML5 e CSS3 1) Primeiro exemplo: 2) Seletor ID: 3) Seletor de Classe: 2 4) Também é possível

Leia mais

GERÊNCIA DE DADOS SEMI ESTRUTURADOS - XPATH. Prof. Angelo Augusto Frozza, M.Sc.

GERÊNCIA DE DADOS SEMI ESTRUTURADOS - XPATH. Prof. Angelo Augusto Frozza, M.Sc. GERÊNCIA DE DADOS SEMI ESTRUTURADOS - XPATH Prof. Angelo Augusto Frozza, M.Sc. XPATH (XML PATH LANGUAGE) Linguagem para navegação na estrutura de um documento XML semelhante a navegação em diretórios DOS

Leia mais

Estilo em Aplicações Hipermídia na Web

Estilo em Aplicações Hipermídia na Web SCC0265 Sistemas Interativos Web Estilo em Aplicações Hipermídia na Web Renata Pontin M. Fortes (renata@icmc.usp.br) PAE: Willian Watanabe (watinha@gmail.com) Instituto de Ciências Matemáticas e de Computação

Leia mais

Exemplos Práticos HTML5 + CSS3. Profa. Flávia Pereira de Carvalho

Exemplos Práticos HTML5 + CSS3. Profa. Flávia Pereira de Carvalho Exemplos Práticos HTML5 + CSS3 Profa. Flávia Pereira de Carvalho Agosto de 2018 2 1 Exemplos Práticos HTML5 e CSS3 1) Primeiro exemplo: 2) Seletor ID: 3) Seletor de Classe: Profa. Flávia Pereira de Carvalho

Leia mais

Desenvolvimento Web. Professor: Bruno E. G. Gomes

Desenvolvimento Web. Professor: Bruno E. G. Gomes Instituto Federal de Educação Ciência e Tecnologia Curso Técnico Integrado em Informática Campus Currais Novos Desenvolvimento Web CSS Conceitos básicos parte I Professor: Bruno E. G. Gomes 2013 Introdução

Leia mais

#Trabalhando com Texto

#Trabalhando com Texto INSTITUTO FEDERAL DE EDUCAÇÃO, CIÊNCIA E TECNOLOGIA DO RIO GRANDE DO NORTE CAMPUS SÃO GONÇALO DO AMARANTE PROGRAMAÇÃO WEB #Trabalhando com Texto Eliezio Soares elieziosoares@gmail.com Aula de Hoje Web

Leia mais

Processamento Estruturado de Documentos 2005 By jcr

Processamento Estruturado de Documentos 2005 By jcr XSL or XSLFO Processamento Estruturado de Documentos 2005 By jcr O que é? Uma linguagem de anotação para descrever conteúdos paginados. Suporte conceitos como: página, cabeçalho, rodapé,... jcr -ped2005

Leia mais

CSS CASCADING STYLE SHEET

CSS CASCADING STYLE SHEET CSS CASCADING STYLE SHEET CURSO TÉCNICO DE INFORMÁTICA MODALIDADE SUBSEQÜENTE DESENVOLVIMENTO WEB 1 PROF. ALEXANDRO DOS SANTOS SILVA 1 SUMÁRIO Conceito Sintaxe básica Tipos de folhas de estilos 2 1 CSS

Leia mais

Web Design Aula 16: Modelo de Caixa e propriedades de Imagem

Web Design Aula 16: Modelo de Caixa e propriedades de Imagem Web Design Aula 16: Modelo de Caixa e propriedades de Imagem Professora: Priscilla Suene priscilla.silverio@ifrn.edu.br Roteiro Introdução Área de Conteúdo Enchimento Bordas Margens Caixas Propriedades

Leia mais

Motivação. XPath. O Modelo de Dados do XPath. Introdução. Exemplo: nodo raiz. Exemplo: instância do poema

Motivação. XPath. O Modelo de Dados do XPath. Introdução. Exemplo: nodo raiz. Exemplo: instância do poema Motivação XPath Processamento Estruturado de Documentos 2002 By jcr Todos os processos de transformação/formatação de documentos XML começam por construir uma árvore: a árvore documental abstracta O XPath

Leia mais

Qual a razão do termo cascata na terminologia CSS? A forma como as regras de estilo são aplicadas obedece a 3 princípios básicos: herança,

Qual a razão do termo cascata na terminologia CSS? A forma como as regras de estilo são aplicadas obedece a 3 princípios básicos: herança, Qual a razão do termo cascata na terminologia CSS? A forma como as regras de estilo são aplicadas obedece a 3 princípios básicos: herança, especificidade do seletor e proximidade do elemento estilizado.

Leia mais

CSS [10] Desenvolvimento e Design de. Websites. Prof.: Ari Oliveira

CSS [10] Desenvolvimento e Design de. Websites. Prof.: Ari Oliveira Desenvolvimento e Design de Websites Prof.: Ari Oliveira Folhas de Estilo em Cascata CSS Localização dos estilos Seletores 2 Faça uma página de trabalhe conosco. Esta página deverá conter um formulário

Leia mais

INTRODUÇÃO À PROGRAMAÇÃO EXERCÍCIO DE REVISÃO

INTRODUÇÃO À PROGRAMAÇÃO EXERCÍCIO DE REVISÃO INTRODUÇÃO À PROGRAMAÇÃO EXERCÍCIO DE REVISÃO Questões de concurso 1. Na interface Web, ele é um arquivo independente do arquivo HTML no qual são declaradas propriedades e valores de estilização para os

Leia mais

CSS Cascading Style Sheets

CSS Cascading Style Sheets CSS Cascading Style Sheets Linguagem de Folhas de Estilo Introdução Faz parte da versão 4 do html Utilizado para padronizar os componentes html Pode ser utilizado de três formas: Inline quando é utilizada

Leia mais

Desenvolvimento em Ambiente Web. Prof. André Y. Kusumoto

Desenvolvimento em Ambiente Web. Prof. André Y. Kusumoto Desenvolvimento em Ambiente Web Prof. André Y. Kusumoto andrekusumoto.unip@gmail.com Folhas de estilos em cascata Objetivo Formatar páginas escritas em HTML baseada nos padrões "Cascading Style Sheets",

Leia mais

Desenvolvimento Web. CSS Conceitos básicos parte I. Professor: Bruno Gomes

Desenvolvimento Web. CSS Conceitos básicos parte I. Professor: Bruno Gomes INSTITUTO FEDERAL DE EDUCAÇÃO CIÊNCIA E TECNOLOGIA CURSO TÉCNICO INTEGRADO EM INFORMÁTICA CAMPUS CURRAIS NOVOS Desenvolvimento Web CSS Conceitos básicos parte I Professor: Bruno Gomes 2011 INTRODUÇÃO O

Leia mais

IFSC/Florianópolis - prof. Herval Daminelli

IFSC/Florianópolis - prof. Herval Daminelli Existem cinco pseudoclasses associadas ao estado de um link. São elas: a:link - define o estilo do link no estado inicial; a:visited - define o estilo do link visitado; a:hover - define o estilo do link

Leia mais

XML: uma introdução prática X100. Helder da Rocha

XML: uma introdução prática X100. Helder da Rocha XML: uma introdução prática X100 Helder da Rocha (helder@argonavis.com.br) Atualizado em setembro de 2001 1 XSL Formatting Objects Aplicação XML para descrever o layout preciso de texto e imagens em uma

Leia mais

[background-color] [background-image] [background-repeat] [background-attachment] [background-position] scroll; fixed.

[background-color] [background-image] [background-repeat] [background-attachment] [background-position] scroll; fixed. Tabela de CSS Propriedades relacionadas com o fundo (background) background background-attachment background-color background-image propriedades de background numa só declaração. Entre cada valor utiliza-se

Leia mais

Treinamento em CSS. Índice

Treinamento em CSS. Índice Nível: Básico Horas: 2 Treinamento em CSS Índice Índice...1 Introdução...2 Formantando documentos...2 O que é CSS?...2 Por que utilizar CSS?...2 Separando o sistema em camadas...3 Vinculando um arquivo

Leia mais

PROGRAMAÇÃO PARA INTERNET RICA FUNDAMENTOS DO CSS PARTE I

PROGRAMAÇÃO PARA INTERNET RICA FUNDAMENTOS DO CSS PARTE I PROGRAMAÇÃO PARA INTERNET RICA FUNDAMENTOS DO CSS PARTE I Prof. Dr. Daniel Caetano 2012-2 Objetivos Apresentar o CSS como substituto dos parâmetros visuais do HTML Apresentar a tag DIV Capacitar para a

Leia mais

Plano das aulas. Aula 3 Documentos em XML Estruturas lógicas Estruturas físicas Modelos e DTDs Construção de modelos. Exemplos

Plano das aulas. Aula 3 Documentos em XML Estruturas lógicas Estruturas físicas Modelos e DTDs Construção de modelos. Exemplos Plano das aulas Aula 3 Documentos em XML Estruturas lógicas Estruturas físicas Modelos e DTDs Construção de modelos. Exemplos Aula 5 Processamento de XML Analisadores sintácticos e o SAX DOM Xpath XSL

Leia mais

CSS Cascading Style Sheets (Folhas de Estilo em Cascata)

CSS Cascading Style Sheets (Folhas de Estilo em Cascata) CSS Cascading Style Sheets (Folhas de Estilo em Cascata) Instituto Federal de Educação, Ciência e Tecnologia do Triângulo Mineiro Prof. Edwar Saliba Júnior 1 Parte I CSS Basic 2 CSS Determina como elementos

Leia mais

Introdução à Informática Escola Superior de Tecnologia - Ano Lectivo 2005/06 Prof. Bruno Silva

Introdução à Informática Escola Superior de Tecnologia - Ano Lectivo 2005/06 Prof. Bruno Silva Introdução à Informática Escola Superior de Tecnologia - Ano Lectivo 2005/06 Prof. Bruno Silva Cascading Style Sheets - (CSS] Introdução Uma Style Sheet é um ficheiro que contém regras que dizem ao browser

Leia mais

13 de dezembro de 2012

13 de dezembro de 2012 ao ao Universidade Federal Fluminense 13 de dezembro de 2012 ao 1 2 3 4 5 6 7 Informações principais ao Quando o HTML surgiu, seu objetivo era especialmente a estruturação de informações na página. Com

Leia mais

modelo de apresentação estilos, cores e transparência traços e preenchimento Helder da Rocha

modelo de apresentação estilos, cores e transparência traços e preenchimento Helder da Rocha modelo de apresentação estilos, cores e transparência traços e preenchimento Helder da Rocha (helder@) Modelo de apresentação gráfica Objetos em SVG são desenhados em contextos gráficos individuais Grupos,

Leia mais

Introdução ao CSS. Programação para a Internet. Prof. Vilson Heck Junior

Introdução ao CSS. Programação para a Internet. Prof. Vilson Heck Junior Introdução ao CSS Programação para a Internet Prof. Vilson Heck Junior Estilos de Páginas CSS Cascading Style Sheets: Estilos de Página em Cascata (trad. livre); É uma linguagem de estilos Define a apresentação

Leia mais

Web Design Aula 15: Propriedades CSS

Web Design Aula 15: Propriedades CSS Web Design Aula 15: Propriedades CSS Professora: Priscilla Suene priscilla.silverio@ifrn.edu.br Roteiro Propriedades de texto Propriedades de Cores Propriedades de Bordas Propriedades de Listas Cor de

Leia mais

Desenvolvimento Web CSS Conceitos básicos parte II

Desenvolvimento Web CSS Conceitos básicos parte II Desenvolvimento Web CSS Conceitos básicos parte II Prof.: Bruno E. G. Gomes 2014 Folhas de Estilo Externa Estilos são definidos em um arquivo separado e incorporados à página através da tag link Podem

Leia mais

Aula 3 - Parte Final HTML e CSS

Aula 3 - Parte Final HTML e CSS Universidade Federal do Paraná - UFPR 16 de Agosto de 2010 Div 1 Div 2 Div Div Podemos dizer que a função da tag < div > é fazer a divisao dos itens de uma pagina, isto é posicionar os layouts. Para um

Leia mais

Uma regra CSS quando válida para vários seletores, estes podem ser agrupados. Exemplo: h1, h2, h3, h4, h5, h6 { color: #00FF00; }

Uma regra CSS quando válida para vários seletores, estes podem ser agrupados. Exemplo: h1, h2, h3, h4, h5, h6 { color: #00FF00; } CENTRO PASTORAL, EDUCACIONAL E ASSISTENCIAL DOM CARLOS CPEA Reconhecido de Utilidade Pública pelo Decreto No. 5.692 de 08.11.1967 FACULDADE VIZINHANÇA VALE DO IGUAÇU VIZIVALI DOIS VIZINHOS PARANÁ Criada

Leia mais

Permite que o conteúdo e o layout de uma página seja separado do design visual e os elementos de apresentação.

Permite que o conteúdo e o layout de uma página seja separado do design visual e os elementos de apresentação. Porque usar css? Cascading Style Sheets (css) sobrepõe as características padrões dos browsers São usadas para melhorar e controlar a aparência de uma página web. Porque usar css? Permite que o conteúdo

Leia mais

Tarlis Portela Web Design CSS

Tarlis Portela Web Design CSS Tarlis Portela Web Design CSS Web Design CONCEITOS 01 01 Histórico Quando o HTML foi criado, a intenção não era de forma alguma, formatar informação; A medida que o HTML foi se popularizando e evoluindo,

Leia mais

F E B A C. Exercício de Fixação 3. FACULDADE DE EDUCAÇÃO DE BACABAL FEBAC Credenciamento MEC/Portaria: 472/07 Resolução: 80/07

F E B A C. Exercício de Fixação 3. FACULDADE DE EDUCAÇÃO DE BACABAL FEBAC Credenciamento MEC/Portaria: 472/07 Resolução: 80/07 F E B A C FACULDADE DE EDUCAÇÃO DE BACABAL FACULDADE DE EDUCAÇÃO DE BACABAL FEBAC Credenciamento MEC/Portaria: 472/07 Resolução: 80/07 Curso: Sistemas para Internet Período: 2 o Disciplina: Fundamentos

Leia mais

Introdução ao HTML e às folhas de estilo (CSS)

Introdução ao HTML e às folhas de estilo (CSS) MIEEC SIEM ano letivo 2013/14 Introdução ao HTML e às folhas de estilo (CSS) José A. Faria (jfaria@fe.up.pt) FEUP, DEIG Setembro 2013 MIEEC SIEM --- 1 --- José António Faria Introdução ao protocolo HTTP

Leia mais

Transformação de documentos XML

Transformação de documentos XML Transformação de documentos XML César Vittori cvittori@inf.ufrgs.br Outubro de 2000 Resumo XSLT: Transformações XSL. Transformação de documentos XML. XSLT Introdução XSLT: transformações XSL (inglês: XSL

Leia mais

XSLT e recursividade estrutural. Gestão e Tratamento de Informação DEI IST

XSLT e recursividade estrutural. Gestão e Tratamento de Informação DEI IST XSLT e recursividade estrutural Gestão e Tratamento de Informação DEI IST Agenda Recursividade estrutural XSLT Agenda Recursividade estrutural XSLT Recursividade estrutural: um paradigma diferente Dados

Leia mais

HTML: Recursos Básicos e Especiais

HTML: Recursos Básicos e Especiais Linguagem de Programação para Web HTML: Recursos Básicos e Especiais Prof. Mauro Lopes 1-31 34 Objetivo Iremos aqui apresentar os recursos básicos e especiais do HTML. Serão apresentados, o uso de fontes,

Leia mais

Compêndio códigos. {css}

Compêndio códigos. {css} Compêndio códigos {css} ADVERTÊNCIA: A que se segue é apenas uma lista com as propriedades de CSS, não pretende de modo algum ser um manual. Pressupõe, portanto, que já se saiba de antemão o signi cado

Leia mais

HTML BÁSICO E TEMPLATE VIEW. Gabrielle Amorim Porto

HTML BÁSICO E TEMPLATE VIEW. Gabrielle Amorim Porto HTML BÁSICO E TEMPLATE VIEW Gabrielle Amorim Porto HTML BÁSICO E TEMPLATE VIEW Hypertext Markup Language Linguagem de marcação de hipertexto; Descreve a estrutura das páginas Web utilizando tags. HTML

Leia mais

Aula 8 Formatando o texto (propriedades)

Aula 8 Formatando o texto (propriedades) Aula 8 Formatando o texto (propriedades) Prof. Paulo Cesar F. De Oliveira, BSc, PhD 1 Estilizar o texto? 2 font-family body { font-family: Arial; } dt { font-family: Courier, monospace; } p { font-family:

Leia mais

Respostas - RESUMO: Questionário CSS. 1) O padrão CSS nasceu para tentar minimizar quais problemas ligados à gestão de conteúdos na web?

Respostas - RESUMO: Questionário CSS. 1) O padrão CSS nasceu para tentar minimizar quais problemas ligados à gestão de conteúdos na web? Faculdade de Informática de Taquara Disciplina: Autoria e Design na Internet I Profa. Flavia Pereira de Carvalho Respostas - RESUMO: Questionário CSS 1) O padrão CSS nasceu para tentar minimizar quais

Leia mais

CSS Cascading Style Sheets Folhas de Estilo em Cascata

CSS Cascading Style Sheets Folhas de Estilo em Cascata CSS Cascading Style Sheets Folhas de Estilo em Cascata Conjunto de instruções que controla a aparência de uma página Web 1. Regra CSS seletor { propriedade1: valor; propriedade2: valor; 2. Aplicação 2.1

Leia mais

desenvolva aplicações web profissionais com uso dos poderosos recursos de estilização das css3 Maurício Samy Silva

desenvolva aplicações web profissionais com uso dos poderosos recursos de estilização das css3 Maurício Samy Silva CSS3 desenvolva aplicações web profissionais com uso dos poderosos recursos de estilização das css3 Maurício Samy Silva Novatec Copyright 2012 da Novatec Editora Ltda. Todos os direitos reservados e protegidos

Leia mais

INTRODUÇÃO AO DESENVOLVIMENTO WEB. PROFª. M.Sc. JULIANA H Q BENACCHIO

INTRODUÇÃO AO DESENVOLVIMENTO WEB. PROFª. M.Sc. JULIANA H Q BENACCHIO INTRODUÇÃO AO DESENVOLVIMENTO WEB PROFª. M.Sc. JULIANA H Q BENACCHIO CSS - Cascading Style Sheets Folhas de estilo em cascata Para cada estilo deve ser definido uma regra CSS Cada regra CSS deve utilizar

Leia mais

COM222 DESENVOLVIMENTO DE SISTEMAS WEB. Aula 01: HTML e CSS

COM222 DESENVOLVIMENTO DE SISTEMAS WEB. Aula 01: HTML e CSS COM222 DESENVOLVIMENTO DE SISTEMAS WEB Aula 01: HTML e CSS 2 Conteúdo Noções introdutórias HTML CSS HTML: HyperText Markup Language 3 Linguagem usada para construir páginas Web Função principal Estruturar

Leia mais

Tags estruturais <!-- --> Cria um comentário <html> </html> Envolve todo um documento html <head> </head> Envolve o cabeçalho de um documento html

Tags estruturais <!-- --> Cria um comentário <html> </html> Envolve todo um documento html <head> </head> Envolve o cabeçalho de um documento html Tags estruturais Cria um comentário Envolve todo um documento html Envolve o cabeçalho de um documento html Fornece informações gerais sobre o documento

Leia mais

XSLT Transforming XML

XSLT Transforming XML XSLT Transforming XML A manipulação de ficheiros XML implica transformar o código fonte do documento XML em qualquer outra coisa (por exemplo em HTML ou pdf) de modo a permitir apresentar a informação

Leia mais

Desenvolvimento de Aplicações para Internet

Desenvolvimento de Aplicações para Internet Desenvolvimento de Aplicações para Internet CSS Celso Olivete Júnior olivete@fct.unesp.br HTML Formatando o documento... Formulário Responsável por fazer a interação entre os dados fornecidos pelo usuário

Leia mais

CSS Exercício JCC. Comunicações Digitais e Internet, 2006/07 Jornalismo e Ciências da Comunicação, U.Porto. Sumário

CSS Exercício JCC. Comunicações Digitais e Internet, 2006/07 Jornalismo e Ciências da Comunicação, U.Porto. Sumário CSS Exercício JCC Comunicações Digitais e Internet, 2006/07 Jornalismo e Ciências da Comunicação, U.Porto Sumário Com este exercício pretende-se apresentar e experimentar o processo de implementação de

Leia mais

PROGRAMADOR WEB. PROF. Esp. Andrew H. G. Rodrigues

PROGRAMADOR WEB. PROF. Esp. Andrew H. G. Rodrigues PROGRAMADOR WEB PROF. Esp. Andrew H. G. Rodrigues CSS - CASCADING STYLE SHEETS Folhas de estilo em cascata Para cada estilo deve ser definido uma regra CSS Cada regra CSS deve utilizar a seguinte sintaxe:

Leia mais

PROGRAMAÇÃO PARA INTERNET RICA FUNDAMENTOS DO CSS PARTE II

PROGRAMAÇÃO PARA INTERNET RICA FUNDAMENTOS DO CSS PARTE II PROGRAMAÇÃO PARA INTERNET RICA FUNDAMENTOS DO CSS PARTE II Prof. Dr. Daniel Caetano 2012-2 Objetivos Aresentar seudo-elementos e seudo-classes do CSS Aresentar o CSS como ferramenta de layout de ágina

Leia mais

Este exercício será parecido com a montagem de um projeto real, onde trabalhamos com vários arquivos XHTML e um único arquivo CSS.

Este exercício será parecido com a montagem de um projeto real, onde trabalhamos com vários arquivos XHTML e um único arquivo CSS. Este exercício será parecido com a montagem de um projeto real, onde trabalhamos com vários arquivos XHTML e um único arquivo CSS. 1) Crie uma pasta chamada com_estilo e salve dentro dela os arquivos obrigado.html

Leia mais

Aula 4 Modelo CSS. Efeito cascata. Ordem em cascata. Declarações normais e importantes. Exemplo. Especificidade de um seletor 30/08/2013

Aula 4 Modelo CSS. Efeito cascata. Ordem em cascata. Declarações normais e importantes. Exemplo. Especificidade de um seletor 30/08/2013 Efeito cascata Aula 4 Modelo CSS Curso: Técnico em Informática / 2º módulo Disciplina: Desenvolvimento Web Professora: Luciana Balieiro Cosme Fontes das folhas de estilo Autor Usuário Agente do usuário

Leia mais

Unidade 4: Introdução à Tecnologia CSS Prof. Daniel Caetano

Unidade 4: Introdução à Tecnologia CSS Prof. Daniel Caetano Programação para Internet Rica 1 Unidade 4: Introdução à Tecnologia CSS Prof. Daniel Caetano Objetivo: Apresentar conceitos de introduzir o uso de Folhas de Estilo em Cascata. Bibliografia: W3, 2009; CASCADE,

Leia mais

Teste de avaliação de frequência Parte Prática

Teste de avaliação de frequência Parte Prática Abaixo está uma proposta de solução para os exercícios do teste de avaliação de frequência às aulas práticas. Se tem dúvidas sobre esta resolução, fale com o seu Professor. GRUPO I HTML 1. CrieumHTMLcom3tiposdiferentesdelistasnãonumeradas.

Leia mais

Desenvolvimento WEB1 Aula 03 Profa Wanessa Machado do Amaral

Desenvolvimento WEB1 Aula 03 Profa Wanessa Machado do Amaral Desenvolvimento WEB1 Aula 03 Profa Wanessa Machado do Amaral Surgimento do CSS Na aula passada tivemos uma breve introdução ao CSS Os documentos web, cada vez mais sofisticados e extensos, estavam fugindo

Leia mais

Disciplina: Desenvolvimento Web Professor: Paulo César Fernandes de Oliveira, BSc, PhD

Disciplina: Desenvolvimento Web Professor: Paulo César Fernandes de Oliveira, BSc, PhD 1. O que é CSS? a) É a linguagem que se usa para se definir quais serão os elementos de uma página HTML. b) É uma linguagem que se usa para se modificar o estilo de apresentação dos elementos de uma página

Leia mais

Instituto Federal de Minas Gerais Campus Ponte Nova CSS 3. Professor: Saulo Henrique Cabral Silva

Instituto Federal de Minas Gerais Campus Ponte Nova CSS 3. Professor: Saulo Henrique Cabral Silva Instituto Federal de Minas Gerais Campus Ponte Nova CSS 3 Professor: Saulo Henrique Cabral Silva Estilizando Quando escrevemos um código HTML marcamos os conteúdos com tags adequadas aquela informação.

Leia mais

MODELO DE CAIXA (BOX MODEL)

MODELO DE CAIXA (BOX MODEL) Programação Web MODELO DE CAIXA (BOX MODEL) Conferencia 5 MSc. Yoenis Pantoja Zaldívar MODELO DE CAIXA (BOX MODEL) ( ) comportamento de CSS que provoca que todos os elementos incluidos numa página HTML

Leia mais

AULA 02 Introdução (HTML, CSS e Javascript) PROGRAMAÇÃO PARA WEB Marcelo Henrique dos Santos

AULA 02 Introdução (HTML, CSS e Javascript) PROGRAMAÇÃO PARA WEB Marcelo Henrique dos Santos AULA 02 Introdução (HTML, CSS e Javascript) Mestrado em Educação (em andamento) MBA em Negócios em Mídias Digitais MBA em Marketing e Vendas Especialista em games : Produção e Programação Bacharel em Sistema

Leia mais

08/08/2011 TECNOLOGIAS WEB AULA 10 PROF. RAFAEL DIAS Objetivos: Revisar os princípios de CSS Blocos e Elementos Alinhados com CSS

08/08/2011 TECNOLOGIAS WEB AULA 10 PROF. RAFAEL DIAS Objetivos: Revisar os princípios de CSS Blocos e Elementos Alinhados com CSS TECNOLOGIAS WEB AULA 10 PROF. RAFAEL DIAS RIBEIRO @RIBEIRORD Objetivos: Revisar os princípios de CSS Blocos e Elementos Alinhados com CSS 1 SINTAXE: seletor{ propriedade: valor; Seletor: É o elemento HTML

Leia mais

Tabelas. Tabelas. Iniciando a construção... Atributos <table> Tag <table></table> 05/06/2011

Tabelas. Tabelas. Iniciando a construção... Atributos <table> Tag <table></table> 05/06/2011 INSTITUTO FEDERAL DE EDUCAÇÃO, CIÊNCIA E TECNOLOGIA DA PARAÍBA CAMPUS CAMPINA GRANDE 1 2 Tabelas INTERNET BÁSICA: EXTENSIBLE HYPERTEXT MARKUP LANGUAGE XHTML PARTE 3 Largamente suportado(browser); Controlar

Leia mais

Introdução a HTTP, HTML e CSS

Introdução a HTTP, HTML e CSS MIEEC SIEM ano letivo 2014/15 Introdução a HTTP, HTML e CSS José A. Faria (jfaria@fe.up.pt) FEUP, DEGI Setembro 2014 1. Introdução ao protocolo HTTP Introdução A WEB -worldwideweb é um sistema global de

Leia mais

CSS: Cascading Style Sheets (folhas de estilo) Pimentel, Morganna BSI - UNIRIO DPW

CSS: Cascading Style Sheets (folhas de estilo) Pimentel, Morganna BSI - UNIRIO DPW CSS: Cascading Style Sheets (folhas de estilo) Pimentel, Morganna BSI - UNIRIO DPW 2017.2 1 CSS: ementa Texto Fontes Links Ícones Listas Tabelas DPW 2017.2 2 / 18 CSS: text Definição Formatar o texto quanto

Leia mais

1.1 Cascading Style Sheets CSS

1.1 Cascading Style Sheets CSS 1.1 Cascading Style Sheets CSS Uma folha de estilos consiste de uma ou mais definições de estilo (tamanho de fonte, estilo da fonte, alinhamento de texto, cor de texto e do fundo, margens, altura da linha,

Leia mais

Faculdade de Engenharia Departamento de Informática. Composição Web

Faculdade de Engenharia Departamento de Informática. Composição Web Folha Prática 6: CSS OBJECTIVO: Neste laboratório iremos continuar a trabalhar com Cascade Style Sheets na formatação de uma página muito simples, que apenas contém um título e uma lista desordenada que

Leia mais

CONTEÚDO PROGRAMÁTICO

CONTEÚDO PROGRAMÁTICO CONTEÚDO PROGRAMÁTICO XML e XSLT Completo Carga horária: 40 horas TreinaWeb Tecnologia LTDA CNPJ: 06.156.637/0001-58 Av. Paulista, 1765 - Conj 71 e 72 São Paulo - SP CONTEÚDO PROGRAMÁTICO Ementa do curso

Leia mais